diff --git a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx
index 6c477d81fdf0..71faedfb04d9 100644
--- a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx
+++ b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx
@@ -11,7 +11,13 @@ import React, {
   useEffect,
   useRef,
 } from 'react';
-import { SafeAreaView, ScrollView, View, RefreshControl } from 'react-native';
+import {
+  SafeAreaView,
+  ScrollView,
+  View,
+  RefreshControl,
+  Linking,
+} from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { strings } from '../../../../../../locales/i18n';
 import Button, {
@@ -53,9 +59,7 @@ import {
   PerpsEventProperties,
   PerpsEventValues,
 } from '../../constants/eventNames';
-import { useSelector } from 'react-redux';
-import { selectPerpsProvider } from '../../selectors/perpsController';
-import { capitalize } from '../../../../../util/general';
+
 import {
   usePerpsAccount,
   usePerpsConnection,
@@ -104,8 +108,6 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
   const [activeTabId, setActiveTabId] = useState('position');
   const [refreshing, setRefreshing] = useState(false);
 
-  const perpsProvider = useSelector(selectPerpsProvider);
-
   const account = usePerpsAccount();
 
   usePerpsConnection();
@@ -284,6 +286,12 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
     });
   };
 
+  const handleTradingViewPress = useCallback(() => {
+    Linking.openURL('https://www.tradingview.com/').catch((error) => {
+      console.error('Failed to open Trading View URL:', error);
+    });
+  }, []);
+
   // Determine if any action buttons will be visible
   const hasLongShortButtons = useMemo(
     () => !isLoadingPosition && !hasZeroBalance,
@@ -387,9 +395,14 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
               variant={TextVariant.BodyXS}
               color={TextColor.Alternative}
             >
-              {strings('perps.risk_disclaimer', {
-                provider: capitalize(perpsProvider),
-              })}
+              {strings('perps.risk_disclaimer')}{' '}
+              <Text
+                variant={TextVariant.BodyXS}
+                color={TextColor.Alternative}
+                onPress={handleTradingViewPress}
+              >
+                Trading View
+              </Text>
             </Text>
           </View>
         </ScrollView>
diff --git a/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx b/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx
index 6ecbf10c3880..e081da862eea 100644
--- a/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx
+++ b/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx
@@ -160,11 +160,29 @@ const PerpsMarketListView = ({
   };
 
   const filteredMarkets = useMemo(() => {
+    // First filter out markets with no volume or $0 volume
+    const marketsWithVolume = markets.filter((market: PerpsMarketData) => {
+      // Check if volume exists and is not zero
+      if (
+        !market.volume ||
+        market.volume === '$0' ||
+        market.volume === '$0.00'
+      ) {
+        return false;
+      }
+      // Also filter out fallback display values
+      if (market.volume === '$---' || market.volume === '---') {
+        return false;
+      }
+      return true;
+    });
+
+    // Then apply search filter if needed
     if (!searchQuery.trim()) {
-      return markets;
+      return marketsWithVolume;
     }
     const query = searchQuery.toLowerCase().trim();
-    return markets.filter(
+    return marketsWithVolume.filter(
       (market: PerpsMarketData) =>
         market.symbol.toLowerCase().includes(query) ||
         market.name.toLowerCase().includes(query),
diff --git a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx b/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx
index 764a8da3624b..453c9fa6c473 100644
--- a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx
+++ b/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx
@@ -650,7 +650,7 @@ const PerpsOrderViewContentBase: React.FC = () => {
         {/* Amount Display */}
         <PerpsAmountDisplay
           amount={orderForm.amount}
-          maxAmount={availableBalance}
+          maxAmount={availableBalance * orderForm.leverage}
           showWarning={availableBalance === 0}
           onPress={handleAmountPress}
           isActive={isInputFocused}
@@ -663,7 +663,7 @@ const PerpsOrderViewContentBase: React.FC = () => {
               value={parseFloat(orderForm.amount || '0')}
               onValueChange={(value) => setAmount(Math.floor(value).toString())}
               minimumValue={0}
-              maximumValue={availableBalance}
+              maximumValue={availableBalance * orderForm.leverage}
               step={1}
               showPercentageLabels
             />
diff --git a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.test.tsx b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.test.tsx
index bbe44c8fcbe7..d53c6bdfe98d 100644
--- a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.test.tsx
@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/native';
 import { act, fireEvent, render, screen } from '@testing-library/react-native';
 import React from 'react';
+import { useSelector } from 'react-redux';
 import Routes from '../../../../../constants/navigation/Routes';
 import { strings } from '../../../../../../locales/i18n';
 import type { Position } from '../../controllers/types';
@@ -12,6 +13,20 @@ jest.mock('@react-navigation/native', () => ({
   useNavigation: jest.fn(),
 }));
 
+// Mock Redux
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+// Mock the multichain selector
+jest.mock('../../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(() => () => ({
+    address: '0x1234567890123456789012345678901234567890',
+    id: 'mock-account-id',
+    type: 'eip155:eoa',
+  })),
+}));
+
 // Mock PerpsConnectionProvider
 jest.mock('../../providers/PerpsConnectionProvider', () => ({
   PerpsConnectionProvider: ({ children }: { children: React.ReactNode }) =>
@@ -126,10 +141,20 @@ describe('PerpsTabView', () => {
     jest.clearAllMocks();
     (useNavigation as jest.Mock).mockReturnValue(mockNavigation);
 
+    // Mock useSelector for the multichain selector
+    (useSelector as jest.Mock).mockImplementation(() => () => ({
+      address: '0x1234567890123456789012345678901234567890',
+      id: 'mock-account-id',
+      type: 'eip155:eoa',
+    }));
+
     // Default hook mocks
     mockUsePerpsConnection.mockReturnValue({
       isConnected: true,
       isInitialized: true,
+      error: null,
+      connect: jest.fn(),
+      resetError: jest.fn(),
     });
 
     mockUsePerpsLivePositions.mockReturnValue({
@@ -477,6 +502,69 @@ describe('PerpsTabView', () => {
 
       consoleSpy.mockRestore();
     });
+
+    it('should render connection error state when connection fails', () => {
+      mockUsePerpsConnection.mockReturnValue({
+        isConnected: false,
+        isInitialized: false,
+        error: 'CONNECTION_FAILED',
+        connect: jest.fn(),
+        resetError: jest.fn(),
+      });
+
+      render(<PerpsTabView />);
+
+      // Should show connection failed error
+      expect(
+        screen.getByText(strings('perps.errors.connectionFailed.title')),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText(strings('perps.errors.connectionFailed.description')),
+      ).toBeOnTheScreen();
+    });
+
+    it('should render network error state when network error occurs', () => {
+      mockUsePerpsConnection.mockReturnValue({
+        isConnected: false,
+        isInitialized: false,
+        error: 'NETWORK_ERROR',
+        connect: jest.fn(),
+        resetError: jest.fn(),
+      });
+
+      render(<PerpsTabView />);
+
+      // Should show connection failed error (PerpsTabView always uses CONNECTION_FAILED)
+      expect(
+        screen.getByText(strings('perps.errors.connectionFailed.title')),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText(strings('perps.errors.connectionFailed.description')),
+      ).toBeOnTheScreen();
+    });
+
+    it('should call connect when retry button is pressed on error', () => {
+      const mockConnect = jest.fn();
+      const mockResetError = jest.fn();
+
+      mockUsePerpsConnection.mockReturnValue({
+        isConnected: false,
+        isInitialized: false,
+        error: 'CONNECTION_FAILED',
+        connect: mockConnect,
+        resetError: mockResetError,
+      });
+
+      render(<PerpsTabView />);
+
+      const retryButton = screen.getByText(
+        strings('perps.errors.connectionFailed.retry'),
+      );
+      fireEvent.press(retryButton);
+
+      expect(mockResetError).toHaveBeenCalledTimes(1);
+      expect(mockConnect).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('Accessibility', () => {
diff --git a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx
index 24fb0413afc2..4fea1cbc647f 100644
--- a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx
+++ b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx
@@ -1,6 +1,7 @@
 import { useNavigation, type NavigationProp } from '@react-navigation/native';
 import React, { useCallback, useEffect, useRef } from 'react';
 import { ScrollView, View } from 'react-native';
+import { useSelector } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
 import Button, {
   ButtonSize,
@@ -21,6 +22,9 @@ import Routes from '../../../../../constants/navigation/Routes';
 import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
 import PerpsPositionCard from '../../components/PerpsPositionCard';
 import { PerpsTabControlBar } from '../../components/PerpsTabControlBar';
+import PerpsErrorState, {
+  PerpsErrorType,
+} from '../../components/PerpsErrorState';
 import {
   PerpsEventProperties,
   PerpsEventValues,
@@ -36,6 +40,7 @@ import {
   usePerpsPerformance,
   usePerpsLivePositions,
 } from '../../hooks';
+import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import styleSheet from './PerpsTabView.styles';
 
 interface PerpsTabViewProps {}
@@ -43,8 +48,12 @@ interface PerpsTabViewProps {}
 const PerpsTabView: React.FC<PerpsTabViewProps> = () => {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
+  const selectedEvmAccount = useSelector(selectSelectedInternalAccountByScope)(
+    'eip155:1',
+  );
   const { getAccountState } = usePerpsTrading();
-  const { isConnected, isInitialized } = usePerpsConnection();
+  const { isConnected, isInitialized, error, connect, resetError } =
+    usePerpsConnection();
   const { track } = usePerpsEventTracking();
   const cachedAccountState = usePerpsAccount();
 
@@ -64,15 +73,15 @@ const PerpsTabView: React.FC<PerpsTabViewProps> = () => {
     startMeasure(PerpsMeasurementName.POSITION_DATA_LOADED_PERP_TAB);
   }, [startMeasure]);
 
-  // Automatically load account state on mount and when network changes
+  // Automatically load account state on mount and when network or account changes
   useEffect(() => {
-    // Only load account state if we're connected and initialized
-    if (isConnected && isInitialized) {
+    // Only load account state if we're connected, initialized, and have an EVM account
+    if (isConnected && isInitialized && selectedEvmAccount) {
       // Fire and forget - errors are already handled in getAccountState
       // and stored in the controller's state
       getAccountState();
     }
-  }, [getAccountState, isConnected, isInitialized]);
+  }, [getAccountState, isConnected, isInitialized, selectedEvmAccount]);
 
   // Track homescreen tab viewed - only once when positions and account are loaded
   useEffect(() => {
@@ -123,6 +132,11 @@ const PerpsTabView: React.FC<PerpsTabViewProps> = () => {
     });
   }, [navigation]);
 
+  const handleRetryConnection = useCallback(() => {
+    resetError();
+    connect();
+  }, [connect, resetError]);
+
   const renderPositionsSection = () => {
     if (isInitialLoading) {
       return (
@@ -208,6 +222,18 @@ const PerpsTabView: React.FC<PerpsTabViewProps> = () => {
     );
   };
 
+  // Check for connection errors
+  if (error && !isConnected && selectedEvmAccount) {
+    return (
+      <View style={styles.wrapper}>
+        <PerpsErrorState
+          errorType={PerpsErrorType.CONNECTION_FAILED}
+          onRetry={handleRetryConnection}
+        />
+      </View>
+    );
+  }
+
   return (
     <View style={styles.wrapper}>
       {isFirstTimeUser ? (
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.test.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.test.tsx
index 5d93d6aa8894..865a08693324 100644
--- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
+import { useSelector } from 'react-redux';
 import Routes from '../../../../../constants/navigation/Routes';
 import PerpsFundingTransactionView from './PerpsFundingTransactionView';
 import { PerpsTransactionSelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
@@ -23,7 +24,6 @@ const mockTransaction = {
 // Mock all dependencies properly
 const mockUseNavigation = jest.fn();
 const mockUseRoute = jest.fn();
-const mockUseSelector = jest.fn();
 const mockUsePerpsNetwork = jest.fn();
 const mockUsePerpsBlockExplorerUrl = jest.fn();
 const mockGetHyperliquidExplorerUrl = jest.fn();
@@ -37,7 +37,13 @@ jest.mock('@react-navigation/native', () => ({
 }));
 
 jest.mock('react-redux', () => ({
-  useSelector: () => mockUseSelector(),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('../../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(() => () => ({
+    address: '0x1234567890abcdef1234567890abcdef12345678',
+  })),
 }));
 
 jest.mock('../../hooks', () => ({
@@ -69,9 +75,10 @@ describe('PerpsFundingTransactionView', () => {
         ),
       baseExplorerUrl: 'https://app.hyperliquid.xyz/explorer',
     });
-    mockUseSelector.mockReturnValue({
+    // Mock useSelector to return a function that returns the account
+    (useSelector as jest.Mock).mockImplementation(() => () => ({
       address: '0x1234567890abcdef1234567890abcdef12345678',
-    });
+    }));
     mockUseRoute.mockReturnValue({
       params: { transaction: mockTransaction },
     });
@@ -263,7 +270,8 @@ describe('PerpsFundingTransactionView', () => {
       setOptions: jest.fn(),
     });
 
-    mockUseSelector.mockReturnValue(null);
+    // Mock useSelector to return null for no account
+    (useSelector as jest.Mock).mockImplementationOnce(() => () => null);
 
     const { getByTestId } = render(<PerpsFundingTransactionView />);
 
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx
index 1871557fd949..e5cea34c5964 100644
--- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx
+++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx
@@ -19,7 +19,7 @@ import Text, {
   TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../component-library/hooks';
-import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import ScreenView from '../../../../Base/ScreenView';
 import { getPerpsTransactionsDetailsNavbar } from '../../../Navbar';
 import { usePerpsBlockExplorerUrl } from '../../hooks';
@@ -40,7 +40,9 @@ const PerpsFundingTransactionView: React.FC = () => {
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
   const route = useRoute<PerpsFundingTransactionRouteProp>();
 
-  const selectedInternalAccount = useSelector(selectSelectedInternalAccount);
+  const selectedInternalAccount = useSelector(
+    selectSelectedInternalAccountByScope,
+  )('eip155:1');
   const { getExplorerUrl } = usePerpsBlockExplorerUrl();
 
   // Get transaction from route params
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.test.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.test.tsx
index 6d7b745c0525..983d9b18036a 100644
--- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
+import { useSelector } from 'react-redux';
 import Routes from '../../../../../constants/navigation/Routes';
 import PerpsOrderTransactionView from './PerpsOrderTransactionView';
 import {
@@ -30,7 +31,6 @@ const mockTransaction = {
 // Mock dependencies
 const mockUseNavigation = jest.fn();
 const mockUseRoute = jest.fn();
-const mockUseSelector = jest.fn();
 
 jest.mock('@react-navigation/native', () => ({
   useNavigation: () => mockUseNavigation(),
@@ -38,7 +38,13 @@ jest.mock('@react-navigation/native', () => ({
 }));
 
 jest.mock('react-redux', () => ({
-  useSelector: () => mockUseSelector(),
+  useSelector: jest.fn(),
+}));
+
+jest.mock('../../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(() => () => ({
+    address: '0x1234567890abcdef1234567890abcdef12345678',
+  })),
 }));
 
 jest.mock('../../hooks', () => ({
@@ -64,32 +70,14 @@ describe('PerpsOrderTransactionView', () => {
       typeof usePerpsBlockExplorerUrl
     >;
 
-  // Mock selectedInternalAccount
-  const mockSelectedInternalAccount = {
-    id: 'test-account-id',
-    address: '0x1234567890abcdef1234567890abcdef12345678',
-    type: 'eip155:eoa' as const,
-    metadata: {
-      name: 'Test Account',
-      importTime: 1684232000456,
-      keyring: {
-        type: 'HD Key Tree',
-      },
-    },
-    options: {},
-    methods: [
-      'personal_sign',
-      'eth_signTransaction',
-      'eth_signTypedData_v1',
-      'eth_signTypedData_v3',
-      'eth_signTypedData_v4',
-    ],
-    scopes: ['eip155:1'],
-  };
-
   beforeEach(() => {
     jest.clearAllMocks();
 
+    // Mock useSelector to return a function that returns the account
+    (useSelector as jest.Mock).mockImplementation(() => () => ({
+      address: '0x1234567890abcdef1234567890abcdef12345678',
+    }));
+
     mockUsePerpsNetwork.mockReturnValue('mainnet');
     mockUsePerpsBlockExplorerUrl.mockReturnValue({
       getExplorerUrl: jest.fn().mockImplementation((address) => {
@@ -124,9 +112,6 @@ describe('PerpsOrderTransactionView', () => {
       navigate: jest.fn(),
       setOptions: jest.fn(),
     });
-
-    // Mock selectedInternalAccount by default
-    mockUseSelector.mockReturnValue(mockSelectedInternalAccount);
   });
 
   it('should render order transaction details correctly', () => {
@@ -249,7 +234,8 @@ describe('PerpsOrderTransactionView', () => {
       setOptions: jest.fn(),
     });
 
-    mockUseSelector.mockReturnValue(null);
+    // Mock useSelector to return null for no account
+    (useSelector as jest.Mock).mockImplementationOnce(() => () => null);
 
     const { getByTestId } = render(<PerpsOrderTransactionView />);
 
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx
index b6fd768a6220..c6eee742d05e 100644
--- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx
+++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx
@@ -20,7 +20,7 @@ import Button, {
   ButtonWidthTypes,
 } from '../../../../../component-library/components/Buttons/Button';
 import { useStyles } from '../../../../../component-library/hooks';
-import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import ScreenView from '../../../../Base/ScreenView';
 import { getPerpsTransactionsDetailsNavbar } from '../../../Navbar';
 import PerpsTransactionDetailAssetHero from '../../components/PerpsTransactionDetailAssetHero';
@@ -37,7 +37,9 @@ const PerpsOrderTransactionView: React.FC = () => {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
   const route = useRoute<PerpsOrderTransactionRouteProp>();
-  const selectedInternalAccount = useSelector(selectSelectedInternalAccount);
+  const selectedInternalAccount = useSelector(
+    selectSelectedInternalAccountByScope,
+  )('eip155:1');
   const { getExplorerUrl } = usePerpsBlockExplorerUrl();
   // Get transaction from route params
   const transaction = route.params?.transaction;
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.test.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.test.tsx
index 183844a2724f..89bc7b5994fb 100644
--- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.test.tsx
@@ -3,6 +3,7 @@ import { fireEvent } from '@testing-library/react-native';
 import PerpsPositionTransactionView from './PerpsPositionTransactionView';
 import { usePerpsNetwork, usePerpsBlockExplorerUrl } from '../../hooks';
 import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import renderWithProvider, {
   DeepPartial,
 } from '../../../../../util/test/renderWithProvider';
@@ -52,6 +53,13 @@ jest.mock('../../../../../selectors/accountsController', () => ({
   selectSelectedInternalAccountAddress: jest.fn(),
   selectSelectedInternalAccountFormattedAddress: jest.fn(),
   selectHasCreatedSolanaMainnetAccount: jest.fn(),
+  selectInternalAccounts: jest.fn(() => []),
+}));
+
+jest.mock('../../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(() => () => ({
+    address: '0x1234567890abcdef1234567890abcdef12345678',
+  })),
 }));
 
 const mockTransaction = {
@@ -334,9 +342,11 @@ describe('PerpsPositionTransactionView', () => {
   });
 
   it('should not navigate to block explorer when no selected account', () => {
-    (selectSelectedInternalAccount as unknown as jest.Mock).mockReturnValue(
-      null,
-    );
+    // Mock the multichain selector to return undefined
+    jest
+      .mocked(selectSelectedInternalAccountByScope)
+      .mockReturnValueOnce(() => undefined);
+
     const { getByText } = renderWithProvider(<PerpsPositionTransactionView />, {
       state: mockInitialState,
     });
diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx
index 4d8cd4718c7e..63e52a6594a8 100644
--- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx
+++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx
@@ -19,7 +19,7 @@ import Button, {
   ButtonWidthTypes,
 } from '../../../../../component-library/components/Buttons/Button';
 import { useStyles } from '../../../../../component-library/hooks';
-import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../../selectors/multichainAccounts/accounts';
 import ScreenView from '../../../../Base/ScreenView';
 import { getPerpsTransactionsDetailsNavbar } from '../../../Navbar';
 import PerpsTransactionDetailAssetHero from '../../components/PerpsTransactionDetailAssetHero';
@@ -40,7 +40,9 @@ const PerpsPositionTransactionView: React.FC = () => {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
   const route = useRoute<PerpsPositionTransactionRouteProp>();
-  const selectedInternalAccount = useSelector(selectSelectedInternalAccount);
+  const selectedInternalAccount = useSelector(
+    selectSelectedInternalAccountByScope,
+  )('eip155:1');
   const { getExplorerUrl } = usePerpsBlockExplorerUrl();
 
   // Get transaction from route params
diff --git a/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.test.tsx b/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.test.tsx
index a4672deee909..e243633ec4d5 100644
--- a/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.test.tsx
+++ b/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.test.tsx
@@ -120,6 +120,9 @@ describe('PerpsAmountDisplay', () => {
     render(<PerpsAmountDisplay amount="1234.56" maxAmount={9876.54} />);
 
     expect(formatPrice).toHaveBeenCalledWith('1234.56', { minimumDecimals: 0 });
-    expect(formatPrice).toHaveBeenCalledWith(9876.54);
+    expect(formatPrice).toHaveBeenCalledWith(9876.54, {
+      minimumDecimals: 2,
+      maximumDecimals: 2,
+    });
   });
 });
diff --git a/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.tsx b/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.tsx
index b1e29245dfac..92ea34f3e805 100644
--- a/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.tsx
+++ b/app/components/UI/Perps/components/PerpsAmountDisplay/PerpsAmountDisplay.tsx
@@ -1,13 +1,14 @@
 import React, { useEffect, useRef } from 'react';
-import { View, TouchableOpacity, Animated, Text as RNText } from 'react-native';
+import { Animated, Text as RNText, TouchableOpacity, View } from 'react-native';
+import { PerpsAmountDisplaySelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 import Text, {
-  TextVariant,
   TextColor,
+  TextVariant,
 } from '../../../../../component-library/components/Texts/Text';
 import { useTheme } from '../../../../../util/theme';
 import { formatPrice } from '../../utils/formatUtils';
-import { PerpsAmountDisplaySelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 import createStyles from './PerpsAmountDisplay.styles';
+import { strings } from '../../../../../../locales/i18n';
 
 interface PerpsAmountDisplayProps {
   amount: string;
@@ -77,11 +78,12 @@ const PerpsAmountDisplay: React.FC<PerpsAmountDisplayProps> = ({
         )}
       </View>
       <Text
-        variant={TextVariant.BodyMD}
+        variant={TextVariant.BodySM}
         color={TextColor.Alternative}
         style={styles.maxAmount}
       >
-        {formatPrice(maxAmount)} max
+        {formatPrice(maxAmount, { minimumDecimals: 2, maximumDecimals: 2 })}{' '}
+        {strings('perps.order.max')}
       </Text>
       {showWarning && (
         <Text
diff --git a/app/components/UI/Perps/components/PerpsClosePositionBottomSheet/PerpsClosePositionBottomSheet.tsx b/app/components/UI/Perps/components/PerpsClosePositionBottomSheet/PerpsClosePositionBottomSheet.tsx
index 3af0d073ec5a..3c073af50334 100644
--- a/app/components/UI/Perps/components/PerpsClosePositionBottomSheet/PerpsClosePositionBottomSheet.tsx
+++ b/app/components/UI/Perps/components/PerpsClosePositionBottomSheet/PerpsClosePositionBottomSheet.tsx
@@ -100,11 +100,8 @@ const PerpsClosePositionBottomSheet: React.FC<
     : 1;
   const effectiveMargin = positionValue / leverage;
 
-  // Calculate P&L
-  const entryPrice = parseFloat(position.entryPrice);
-  const pnl = isLong
-    ? (currentPrice - entryPrice) * absSize
-    : (entryPrice - currentPrice) * absSize;
+  // Use unrealized PnL from position
+  const pnl = parseFloat(position.unrealizedPnl);
 
   // Calculate fees using the unified fee hook
   const closingValue = positionValue * (closePercentage / 100);
@@ -327,7 +324,10 @@ const PerpsClosePositionBottomSheet: React.FC<
             style={styles.sizeAmount}
             testID="close-amount-usd"
           >
-            {formatPrice(closeAmountUSD)}
+            {formatPrice(closeAmountUSD, {
+              minimumDecimals: 2,
+              maximumDecimals: 2,
+            })}
           </Text>
           <Text
             variant={TextVariant.BodyMD}
@@ -402,8 +402,11 @@ const PerpsClosePositionBottomSheet: React.FC<
               variant={TextVariant.BodyMDMedium}
               color={pnl >= 0 ? TextColor.Success : TextColor.Error}
             >
-              {pnl >= 0 ? '+' : ''}
-              {formatPrice(pnl * (closePercentage / 100))}
+              {pnl >= 0 ? '+' : '-'}
+              {formatPrice(Math.abs(pnl * (closePercentage / 100)), {
+                minimumDecimals: 2,
+                maximumDecimals: 2,
+              })}
             </Text>
           </View>
 
@@ -416,7 +419,11 @@ const PerpsClosePositionBottomSheet: React.FC<
               variant={TextVariant.BodyMD}
               color={TextColor.Default}
             >
-              -{formatPrice(feeResults.totalFee)}
+              -
+              {formatPrice(feeResults.totalFee, {
+                minimumDecimals: 2,
+                maximumDecimals: 2,
+              })}
             </Text>
           </View>
 
@@ -432,7 +439,10 @@ const PerpsClosePositionBottomSheet: React.FC<
                 variant={TextVariant.BodyLGMedium}
                 color={TextColor.Default}
               >
-                {formatPrice(receiveAmount)}
+                {formatPrice(receiveAmount, {
+                  minimumDecimals: 2,
+                  maximumDecimals: 2,
+                })}
               </Text>
             </View>
           </View>
diff --git a/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.styles.ts b/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.styles.ts
new file mode 100644
index 000000000000..3abc3527308f
--- /dev/null
+++ b/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.styles.ts
@@ -0,0 +1,39 @@
+import { StyleSheet } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme }) => {
+  const { theme } = params;
+  const { colors } = theme;
+
+  return StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: colors.background.default,
+      paddingHorizontal: 16,
+    },
+    content: {
+      alignItems: 'center',
+      maxWidth: 320,
+      width: '100%',
+    },
+    icon: {
+      marginBottom: 24,
+    },
+    title: {
+      marginBottom: 12,
+      textAlign: 'center',
+    },
+    description: {
+      marginBottom: 32,
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+    button: {
+      marginTop: 8,
+    },
+  });
+};
+
+export default styleSheet;
diff --git a/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.test.tsx b/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.test.tsx
new file mode 100644
index 000000000000..34a1a5d6d173
--- /dev/null
+++ b/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.test.tsx
@@ -0,0 +1,129 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import PerpsErrorState, { PerpsErrorType } from './PerpsErrorState';
+import { strings } from '../../../../../../locales/i18n';
+
+describe('PerpsErrorState', () => {
+  describe('CONNECTION_FAILED error type', () => {
+    it('should render connection failed error with retry button', () => {
+      const onRetryMock = jest.fn();
+      const { getByText } = render(
+        <PerpsErrorState
+          errorType={PerpsErrorType.CONNECTION_FAILED}
+          onRetry={onRetryMock}
+        />,
+      );
+
+      expect(
+        getByText(strings('perps.errors.connectionFailed.title')),
+      ).toBeTruthy();
+      expect(
+        getByText(strings('perps.errors.connectionFailed.description')),
+      ).toBeTruthy();
+
+      const retryButton = getByText(
+        strings('perps.errors.connectionFailed.retry'),
+      );
+      expect(retryButton).toBeTruthy();
+
+      fireEvent.press(retryButton);
+      expect(onRetryMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render connection failed without retry when onRetry not provided', () => {
+      const { getByText, queryByText } = render(
+        <PerpsErrorState errorType={PerpsErrorType.CONNECTION_FAILED} />,
+      );
+
+      expect(
+        getByText(strings('perps.errors.connectionFailed.title')),
+      ).toBeTruthy();
+      expect(
+        queryByText(strings('perps.errors.connectionFailed.retry')),
+      ).toBeNull();
+    });
+  });
+
+  describe('NETWORK_ERROR error type', () => {
+    it('should render network error with retry button', () => {
+      const onRetryMock = jest.fn();
+      const { getByText } = render(
+        <PerpsErrorState
+          errorType={PerpsErrorType.NETWORK_ERROR}
+          onRetry={onRetryMock}
+        />,
+      );
+
+      expect(
+        getByText(strings('perps.errors.networkError.title')),
+      ).toBeTruthy();
+      expect(
+        getByText(strings('perps.errors.networkError.description')),
+      ).toBeTruthy();
+
+      const retryButton = getByText(strings('perps.errors.networkError.retry'));
+      expect(retryButton).toBeTruthy();
+
+      fireEvent.press(retryButton);
+      expect(onRetryMock).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('UNKNOWN error type', () => {
+    it('should render unknown error with retry button when onRetry provided', () => {
+      const onRetryMock = jest.fn();
+      const { getByText } = render(
+        <PerpsErrorState
+          errorType={PerpsErrorType.UNKNOWN}
+          onRetry={onRetryMock}
+        />,
+      );
+
+      expect(getByText(strings('perps.errors.unknown.title'))).toBeTruthy();
+      expect(
+        getByText(strings('perps.errors.unknown.description')),
+      ).toBeTruthy();
+
+      const retryButton = getByText(strings('perps.errors.unknown.retry'));
+      expect(retryButton).toBeTruthy();
+
+      fireEvent.press(retryButton);
+      expect(onRetryMock).toHaveBeenCalledTimes(1);
+    });
+
+    it('should render unknown error without retry button when onRetry not provided', () => {
+      const { getByText, queryByText } = render(
+        <PerpsErrorState errorType={PerpsErrorType.UNKNOWN} />,
+      );
+
+      expect(getByText(strings('perps.errors.unknown.title'))).toBeTruthy();
+      expect(
+        getByText(strings('perps.errors.unknown.description')),
+      ).toBeTruthy();
+      expect(queryByText(strings('perps.errors.unknown.retry'))).toBeNull();
+    });
+  });
+
+  describe('Default behavior', () => {
+    it('should default to UNKNOWN error type when no errorType provided', () => {
+      const { getByText } = render(<PerpsErrorState />);
+
+      expect(getByText(strings('perps.errors.unknown.title'))).toBeTruthy();
+      expect(
+        getByText(strings('perps.errors.unknown.description')),
+      ).toBeTruthy();
+    });
+
+    it('should use default testID when not provided', () => {
+      const { getByTestId } = render(<PerpsErrorState />);
+      expect(getByTestId('perps-error-state')).toBeTruthy();
+    });
+
+    it('should use custom testID when provided', () => {
+      const { getByTestId } = render(
+        <PerpsErrorState testID="custom-error-state" />,
+      );
+      expect(getByTestId('custom-error-state')).toBeTruthy();
+    });
+  });
+});
diff --git a/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.tsx b/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.tsx
new file mode 100644
index 000000000000..1c250a3de0c2
--- /dev/null
+++ b/app/components/UI/Perps/components/PerpsErrorState/PerpsErrorState.tsx
@@ -0,0 +1,122 @@
+import React from 'react';
+import { View } from 'react-native';
+import { strings } from '../../../../../../locales/i18n';
+import Button, {
+  ButtonSize,
+  ButtonVariants,
+  ButtonWidthTypes,
+} from '../../../../../component-library/components/Buttons/Button';
+import Icon, {
+  IconColor,
+  IconName,
+  IconSize,
+} from '../../../../../component-library/components/Icons/Icon';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../component-library/hooks';
+import styleSheet from './PerpsErrorState.styles';
+
+export enum PerpsErrorType {
+  CONNECTION_FAILED = 'connection_failed',
+  NETWORK_ERROR = 'network_error',
+  UNKNOWN = 'unknown',
+}
+
+interface PerpsErrorStateProps {
+  errorType?: PerpsErrorType;
+  onRetry?: () => void;
+  testID?: string;
+}
+
+/**
+ * PerpsErrorState - Error state component for Perps tab
+ * Displays appropriate error messages and actions based on error type
+ */
+const PerpsErrorState: React.FC<PerpsErrorStateProps> = ({
+  errorType = PerpsErrorType.UNKNOWN,
+  onRetry,
+  testID = 'perps-error-state',
+}) => {
+  const { styles } = useStyles(styleSheet, {});
+
+  const getErrorContent = () => {
+    switch (errorType) {
+      case PerpsErrorType.CONNECTION_FAILED:
+        return {
+          icon: IconName.Wifi,
+          title: strings('perps.errors.connectionFailed.title'),
+          description: strings('perps.errors.connectionFailed.description'),
+          primaryAction: {
+            label: strings('perps.errors.connectionFailed.retry'),
+            onPress: onRetry,
+          },
+        };
+      case PerpsErrorType.NETWORK_ERROR:
+        return {
+          icon: IconName.Global,
+          title: strings('perps.errors.networkError.title'),
+          description: strings('perps.errors.networkError.description'),
+          primaryAction: {
+            label: strings('perps.errors.networkError.retry'),
+            onPress: onRetry,
+          },
+        };
+      default:
+        return {
+          icon: IconName.Warning,
+          title: strings('perps.errors.unknown.title'),
+          description: strings('perps.errors.unknown.description'),
+          primaryAction: onRetry
+            ? {
+                label: strings('perps.errors.unknown.retry'),
+                onPress: onRetry,
+              }
+            : undefined,
+        };
+    }
+  };
+
+  const errorContent = getErrorContent();
+  const iconSize = 48 as unknown as IconSize;
+
+  return (
+    <View style={styles.container} testID={testID}>
+      <View style={styles.content}>
+        <Icon
+          name={errorContent.icon}
+          color={IconColor.Muted}
+          size={iconSize}
+          style={styles.icon}
+        />
+        <Text
+          variant={TextVariant.HeadingMD}
+          color={TextColor.Default}
+          style={styles.title}
+        >
+          {errorContent.title}
+        </Text>
+        <Text
+          variant={TextVariant.BodyMD}
+          color={TextColor.Muted}
+          style={styles.description}
+        >
+          {errorContent.description}
+        </Text>
+        {errorContent.primaryAction?.onPress && (
+          <Button
+            variant={ButtonVariants.Primary}
+            size={ButtonSize.Lg}
+            label={errorContent.primaryAction.label}
+            onPress={errorContent.primaryAction.onPress}
+            style={styles.button}
+            width={ButtonWidthTypes.Full}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default PerpsErrorState;
diff --git a/app/components/UI/Perps/components/PerpsErrorState/index.ts b/app/components/UI/Perps/components/PerpsErrorState/index.ts
new file mode 100644
index 000000000000..e91484015a3d
--- /dev/null
+++ b/app/components/UI/Perps/components/PerpsErrorState/index.ts
@@ -0,0 +1 @@
+export { default, PerpsErrorType } from './PerpsErrorState';
diff --git a/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.test.tsx b/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.test.tsx
index c63e1a171093..382694cee5cc 100644
--- a/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.test.tsx
+++ b/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.test.tsx
@@ -12,8 +12,12 @@ jest.mock('react-native-gesture-handler', () => ({
   GestureDetector: 'View',
   Gesture: {
     Pan: jest.fn().mockReturnValue({
+      onBegin: jest.fn().mockReturnThis(),
       onUpdate: jest.fn().mockReturnThis(),
       onEnd: jest.fn().mockReturnThis(),
+      onFinalize: jest.fn().mockReturnThis(),
+      withSpring: jest.fn().mockReturnThis(),
+      runOnJS: jest.fn().mockReturnThis(),
     }),
     Tap: jest.fn().mockReturnValue({
       onEnd: jest.fn().mockReturnThis(),
diff --git a/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.tsx b/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.tsx
index 0e125186cea3..17c5d36d85d1 100644
--- a/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.tsx
+++ b/app/components/UI/Perps/components/PerpsLeverageBottomSheet/PerpsLeverageBottomSheet.tsx
@@ -1,57 +1,56 @@
 /* eslint-disable @metamask/design-tokens/color-no-hex */
 import React, {
-  useRef,
-  useState,
-  useMemo,
+  memo,
   useCallback,
   useEffect,
-  memo,
+  useMemo,
+  useRef,
+  useState,
 } from 'react';
-import { View, TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 import {
   Gesture,
   GestureDetector,
   GestureHandlerRootView,
 } from 'react-native-gesture-handler';
+import LinearGradient from 'react-native-linear-gradient';
 import Animated, {
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
-  withSpring,
 } from 'react-native-reanimated';
-import LinearGradient from 'react-native-linear-gradient';
+import { strings } from '../../../../../../locales/i18n';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../../component-library/components/BottomSheets/BottomSheet';
-import BottomSheetHeader from '../../../../../component-library/components/BottomSheets/BottomSheetHeader';
 import BottomSheetFooter from '../../../../../component-library/components/BottomSheets/BottomSheetFooter';
+import BottomSheetHeader from '../../../../../component-library/components/BottomSheets/BottomSheetHeader';
 import {
   ButtonSize,
   ButtonVariants,
 } from '../../../../../component-library/components/Buttons/Button';
-import { useTheme } from '../../../../../util/theme';
-import Text, {
-  TextVariant,
-  TextColor,
-} from '../../../../../component-library/components/Texts/Text';
 import Icon, {
-  IconSize,
-  IconName,
   IconColor,
+  IconName,
+  IconSize,
 } from '../../../../../component-library/components/Icons/Icon';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
 import { DevLogger } from '../../../../../core/SDKConnect/utils/DevLogger';
-import { formatPrice } from '../../utils/formatUtils';
-import { createStyles } from './PerpsLeverageBottomSheet.styles';
-import { strings } from '../../../../../../locales/i18n';
+import { useTheme } from '../../../../../util/theme';
 import { Theme } from '../../../../../util/theme/models';
-import { PerpsMeasurementName } from '../../constants/performanceMetrics';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
 import {
   PerpsEventProperties,
   PerpsEventValues,
 } from '../../constants/eventNames';
-import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
-import { usePerpsScreenTracking } from '../../hooks/usePerpsScreenTracking';
+import { PerpsMeasurementName } from '../../constants/performanceMetrics';
 import { usePerpsEventTracking } from '../../hooks/usePerpsEventTracking';
+import { usePerpsScreenTracking } from '../../hooks/usePerpsScreenTracking';
+import { formatPrice } from '../../utils/formatUtils';
+import { createStyles } from './PerpsLeverageBottomSheet.styles';
 
 interface PerpsLeverageBottomSheetProps {
   isVisible: boolean;
@@ -78,6 +77,8 @@ const LeverageSlider: React.FC<{
   const styles = createStyles(colors);
   const sliderWidth = useSharedValue(0);
   const translateX = useSharedValue(0);
+  const isPressed = useSharedValue(false);
+  const thumbScale = useSharedValue(1);
   const widthRef = useRef(0);
   const [gradientWidth, setGradientWidth] = useState(300);
 
@@ -114,10 +115,8 @@ const LeverageSlider: React.FC<{
     if (widthRef.current > 0) {
       const percentage = (value - minValue) / (maxValue - minValue);
       const newPosition = percentage * widthRef.current;
-      translateX.value = withSpring(newPosition, {
-        damping: 15,
-        stiffness: 400,
-      });
+      // Direct assignment for instant update, no spring animation
+      translateX.value = newPosition;
     }
   }, [value, minValue, maxValue, translateX]);
 
@@ -126,7 +125,7 @@ const LeverageSlider: React.FC<{
   }));
 
   const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
+    transform: [{ translateX: translateX.value }, { scale: thumbScale.value }],
   }));
 
   const updateValue = useCallback(
@@ -138,18 +137,31 @@ const LeverageSlider: React.FC<{
   );
 
   const panGesture = Gesture.Pan()
+    .onBegin(() => {
+      isPressed.value = true;
+      thumbScale.value = 1.1; // Subtle scale effect, instant
+    })
     .onUpdate((event) => {
       const newPosition = Math.max(0, Math.min(event.x, sliderWidth.value));
       translateX.value = newPosition;
+      // Real-time value update during drag
+      const currentValue = positionToValue(newPosition, sliderWidth.value);
+      runOnJS(updateValue)(currentValue);
     })
     .onEnd(() => {
+      isPressed.value = false;
+      thumbScale.value = 1; // Direct assignment, no spring
       const currentValue = positionToValue(translateX.value, sliderWidth.value);
       runOnJS(updateValue)(currentValue);
+    })
+    .onFinalize(() => {
+      isPressed.value = false;
+      thumbScale.value = 1; // Direct assignment, no spring
     });
 
   const tapGesture = Gesture.Tap().onEnd((event) => {
     const newPosition = Math.max(0, Math.min(event.x, sliderWidth.value));
-    translateX.value = withSpring(newPosition, { damping: 15, stiffness: 400 });
+    translateX.value = newPosition; // Direct assignment for instant response
     const newValue = positionToValue(newPosition, sliderWidth.value);
     runOnJS(updateValue)(newValue);
   });
@@ -210,7 +222,10 @@ const LeverageSlider: React.FC<{
           ))}
 
           {/* Thumb */}
-          <Animated.View style={[styles.leverageThumb, thumbStyle]} />
+          <Animated.View
+            style={[styles.leverageThumb, thumbStyle]}
+            hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
+          />
         </View>
       </GestureDetector>
     </GestureHandlerRootView>
diff --git a/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.styles.ts b/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.styles.ts
index 404ccf949a36..10e551f4dbb9 100644
--- a/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.styles.ts
+++ b/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.styles.ts
@@ -73,4 +73,20 @@ export const createStyles = (colors: Theme['colors']) =>
       paddingHorizontal: 16,
       paddingBottom: 24,
     },
+    priceDifferenceContainer: {
+      flexDirection: 'row',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: 8,
+      marginBottom: 16,
+    },
+    priceDifferenceLabel: {
+      fontSize: 14,
+      color: colors.text.alternative,
+      marginRight: 8,
+    },
+    priceDifferenceValue: {
+      fontSize: 14,
+      fontWeight: '600',
+    },
   });
diff --git a/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.test.tsx b/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.test.tsx
index 9a94aa8cd0c7..52e68505cee6 100644
--- a/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.test.tsx
+++ b/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.test.tsx
@@ -342,7 +342,8 @@ describe('PerpsLimitPriceBottomSheet', () => {
       render(<PerpsLimitPriceBottomSheet {...props} />);
 
       // Assert
-      expect(screen.getAllByText('3100')).toHaveLength(2); // Initial limit price + keypad value
+      expect(screen.getByText('$3100.00')).toBeOnTheScreen(); // Formatted limit price display
+      expect(screen.getByText('3100')).toBeOnTheScreen(); // Keypad value
     });
 
     it('renders quick action buttons', () => {
diff --git a/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.tsx b/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.tsx
index 5d701f6f0c39..4588bf8c6ad7 100644
--- a/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.tsx
+++ b/app/components/UI/Perps/components/PerpsLimitPriceBottomSheet/PerpsLimitPriceBottomSheet.tsx
@@ -19,6 +19,7 @@ import { formatPrice } from '../../utils/formatUtils';
 import { createStyles } from './PerpsLimitPriceBottomSheet.styles';
 import { usePerpsLivePrices } from '../../hooks/stream';
 import { ORDER_BOOK_SPREAD } from '../../constants/hyperLiquidConfig';
+import { PERPS_CONSTANTS } from '../../constants/perpsConfig';
 
 interface PerpsLimitPriceBottomSheetProps {
   isVisible: boolean;
@@ -52,48 +53,26 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
   });
   const currentPriceData = priceData[asset];
 
-  // Store price data in state to control when it updates
-  const [priceSnapshot, setPriceSnapshot] = useState(() => ({
-    currentPrice: passedCurrentPrice,
-    markPrice: passedCurrentPrice,
-    bestBid: passedCurrentPrice
-      ? passedCurrentPrice * ORDER_BOOK_SPREAD.DEFAULT_BID_MULTIPLIER
-      : undefined,
-    bestAsk: passedCurrentPrice
-      ? passedCurrentPrice * ORDER_BOOK_SPREAD.DEFAULT_ASK_MULTIPLIER
-      : undefined,
-  }));
+  // Use live data directly - updates automatically every 1000ms
+  const currentPrice = currentPriceData?.price
+    ? parseFloat(currentPriceData.price)
+    : passedCurrentPrice;
 
-  // Update price snapshot only when bottom sheet opens
-  useEffect(() => {
-    if (isVisible) {
-      const current = currentPriceData?.price
-        ? parseFloat(currentPriceData.price)
-        : passedCurrentPrice;
-      const mark = currentPriceData?.markPrice
-        ? parseFloat(currentPriceData.markPrice)
-        : current;
-      const bid = currentPriceData?.bestBid
-        ? parseFloat(currentPriceData.bestBid)
-        : current
-        ? current * ORDER_BOOK_SPREAD.DEFAULT_BID_MULTIPLIER
-        : undefined;
-      const ask = currentPriceData?.bestAsk
-        ? parseFloat(currentPriceData.bestAsk)
-        : current
-        ? current * ORDER_BOOK_SPREAD.DEFAULT_ASK_MULTIPLIER
-        : undefined;
+  const markPrice = currentPriceData?.markPrice
+    ? parseFloat(currentPriceData.markPrice)
+    : currentPrice;
 
-      setPriceSnapshot({
-        currentPrice: current,
-        markPrice: mark,
-        bestBid: bid,
-        bestAsk: ask,
-      });
-    }
-  }, [isVisible]); // eslint-disable-line react-hooks/exhaustive-deps
+  const bestBid = currentPriceData?.bestBid
+    ? parseFloat(currentPriceData.bestBid)
+    : currentPrice
+    ? currentPrice * ORDER_BOOK_SPREAD.DEFAULT_BID_MULTIPLIER
+    : undefined;
 
-  const { currentPrice, markPrice, bestBid, bestAsk } = priceSnapshot;
+  const bestAsk = currentPriceData?.bestAsk
+    ? parseFloat(currentPriceData.bestAsk)
+    : currentPrice
+    ? currentPrice * ORDER_BOOK_SPREAD.DEFAULT_ASK_MULTIPLIER
+    : undefined;
 
   useEffect(() => {
     if (isVisible) {
@@ -102,7 +81,9 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
   }, [isVisible]);
 
   const handleConfirm = () => {
-    onConfirm(limitPrice);
+    // Remove any formatting (commas, dollar signs) before passing the value
+    const cleanPrice = limitPrice.replace(/[$,]/g, '');
+    onConfirm(cleanPrice);
     onClose();
   };
 
@@ -115,11 +96,8 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
 
   const calculatePriceForPercentage = useCallback(
     (percentage: number) => {
-      // Use the current limit price if set, otherwise use market price
-      const basePrice =
-        limitPrice && parseFloat(limitPrice) > 0
-          ? parseFloat(limitPrice)
-          : currentPrice;
+      // Use the current market price (not limit price) for percentage calculations
+      const basePrice = currentPrice;
 
       if (!basePrice || basePrice === 0) {
         return '';
@@ -127,19 +105,26 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
 
       const multiplier = 1 + percentage / 100;
       const calculatedPrice = basePrice * multiplier;
-      return calculatedPrice.toFixed(2);
+      return formatPrice(calculatedPrice, {
+        minimumDecimals: 2,
+        maximumDecimals: 2,
+      });
     },
-    [currentPrice, limitPrice],
+    [currentPrice],
   );
 
   const handleMidPrice = useCallback(() => {
     // Mid price is the average between ask and bid
     if (bestAsk && bestBid) {
       const midPrice = (bestAsk + bestBid) / 2;
-      setLimitPrice(midPrice.toFixed(2));
+      setLimitPrice(
+        formatPrice(midPrice, { minimumDecimals: 2, maximumDecimals: 2 }),
+      );
     } else if (currentPrice) {
       // Fallback to current price if we don't have bid/ask
-      setLimitPrice(currentPrice.toFixed(2));
+      setLimitPrice(
+        formatPrice(currentPrice, { minimumDecimals: 2, maximumDecimals: 2 }),
+      );
     }
   }, [currentPrice, bestAsk, bestBid]);
 
@@ -147,7 +132,9 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
     // Use mark price if available, otherwise fall back to current price
     const priceToUse = markPrice || currentPrice;
     if (priceToUse) {
-      setLimitPrice(priceToUse.toFixed(2));
+      setLimitPrice(
+        formatPrice(priceToUse, { minimumDecimals: 2, maximumDecimals: 2 }),
+      );
     }
   }, [currentPrice, markPrice]);
 
@@ -158,7 +145,9 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
       size: ButtonSize.Lg,
       onPress: handleConfirm,
       disabled:
-        !limitPrice || limitPrice === '0' || parseFloat(limitPrice) <= 0,
+        !limitPrice ||
+        limitPrice === '0' ||
+        parseFloat(limitPrice.replace(/[$,]/g, '')) <= 0,
     },
   ];
 
@@ -196,7 +185,12 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
               {strings('perps.order.limit_price_modal.current_price')} ({asset})
             </Text>
             <Text style={styles.priceValue}>
-              {currentPrice ? formatPrice(currentPrice) : '$---'}
+              {currentPrice
+                ? formatPrice(currentPrice, {
+                    minimumDecimals: 2,
+                    maximumDecimals: 2,
+                  })
+                : PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY}
             </Text>
           </View>
           <View style={styles.priceRow}>
@@ -204,7 +198,12 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
               {strings('perps.order.limit_price_modal.ask_price')}
             </Text>
             <Text style={styles.priceValue}>
-              {displayAskPrice ? formatPrice(displayAskPrice) : '$---'}
+              {displayAskPrice
+                ? formatPrice(displayAskPrice, {
+                    minimumDecimals: 2,
+                    maximumDecimals: 2,
+                  })
+                : PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY}
             </Text>
           </View>
           <View style={styles.priceRow}>
@@ -212,7 +211,12 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
               {strings('perps.order.limit_price_modal.bid_price')}
             </Text>
             <Text style={styles.priceValue}>
-              {displayBidPrice ? formatPrice(displayBidPrice) : '$---'}
+              {displayBidPrice
+                ? formatPrice(displayBidPrice, {
+                    minimumDecimals: 2,
+                    maximumDecimals: 2,
+                  })
+                : PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY}
             </Text>
           </View>
         </View>
@@ -229,7 +233,10 @@ const PerpsLimitPriceBottomSheet: React.FC<PerpsLimitPriceBottomSheetProps> = ({
           >
             {!limitPrice || limitPrice === '0'
               ? strings('perps.order.limit_price')
-              : limitPrice}
+              : formatPrice(limitPrice, {
+                  minimumDecimals: 2,
+                  maximumDecimals: 2,
+                })}
           </Text>
           <Text style={styles.limitPriceCurrency}>USD</Text>
         </View>
diff --git a/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.styles.ts b/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.styles.ts
index 97ca42eb44f3..92b584cc5c98 100644
--- a/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.styles.ts
+++ b/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.styles.ts
@@ -17,6 +17,14 @@ const styleSheet = (params: { theme: Theme }) => {
       width: 32,
       height: 32,
       marginRight: 16,
+      borderRadius: 16,
+      overflow: 'hidden',
+      backgroundColor: colors.background.alternative,
+    },
+    tokenIcon: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
     },
     leftSection: {
       flexDirection: 'row',
diff --git a/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.test.tsx b/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.test.tsx
index 68bcedaebd6d..71e58dbd0414 100644
--- a/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.test.tsx
+++ b/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.test.tsx
@@ -46,6 +46,12 @@ jest.mock('../../../../Base/RemoteImage', () => {
   };
 });
 
+// Mock react-redux for AvatarToken component
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useSelector: jest.fn(() => false), // Mock selectIsIpfsGatewayEnabled to return false
+}));
+
 describe('PerpsMarketRowItem', () => {
   const mockMarketData: PerpsMarketData = {
     symbol: 'BTC',
@@ -339,8 +345,8 @@ describe('PerpsMarketRowItem', () => {
 
       // Should show the new live price
       expect(screen.getByText('$55,000.00')).toBeOnTheScreen();
-      // Should show updated volume
-      expect(screen.getByText('$3.0B')).toBeOnTheScreen();
+      // Should show updated volume (2 decimals with formatVolume)
+      expect(screen.getByText('$3.00B')).toBeOnTheScreen();
     });
 
     it('does not update when live price matches current price', () => {
@@ -398,39 +404,41 @@ describe('PerpsMarketRowItem', () => {
 
       render(<PerpsMarketRowItem market={mockMarketData} />);
 
-      expect(screen.getByText('$0.00')).toBeOnTheScreen();
+      // Price and volume both show $0.00, so check for multiple instances
+      const zeroElements = screen.getAllByText('$0.00');
+      expect(zeroElements.length).toBeGreaterThanOrEqual(1);
     });
 
     it('formats different volume ranges correctly', () => {
-      // Test billions
+      // Test billions (2 decimals with formatVolume)
       mockUsePerpsLivePrices.mockReturnValue({
         BTC: { price: '50000', volume24h: 5500000000 },
       });
       const { rerender } = render(
         <PerpsMarketRowItem market={mockMarketData} />,
       );
-      expect(screen.getByText('$5.5B')).toBeOnTheScreen();
+      expect(screen.getByText('$5.50B')).toBeOnTheScreen(); // B shows 2 decimals
 
-      // Test millions
+      // Test millions (2 decimals with formatVolume)
       mockUsePerpsLivePrices.mockReturnValue({
         BTC: { price: '50000', volume24h: 750000000 },
       });
       rerender(<PerpsMarketRowItem market={mockMarketData} />);
-      expect(screen.getByText('$750.0M')).toBeOnTheScreen();
+      expect(screen.getByText('$750.00M')).toBeOnTheScreen(); // M shows 2 decimals
 
-      // Test thousands
+      // Test thousands (0 decimals with formatVolume)
       mockUsePerpsLivePrices.mockReturnValue({
         BTC: { price: '50000', volume24h: 50000 },
       });
       rerender(<PerpsMarketRowItem market={mockMarketData} />);
-      expect(screen.getByText('$50.0K')).toBeOnTheScreen();
+      expect(screen.getByText('$50K')).toBeOnTheScreen(); // K shows no decimals
 
-      // Test small values
+      // Test small values (2 decimals with formatVolume)
       mockUsePerpsLivePrices.mockReturnValue({
         BTC: { price: '50000', volume24h: 123.45 },
       });
       rerender(<PerpsMarketRowItem market={mockMarketData} />);
-      expect(screen.getByText('$123.45')).toBeOnTheScreen();
+      expect(screen.getByText('$123.45')).toBeOnTheScreen(); // Shows 2 decimals
     });
 
     it('handles missing live price fields gracefully', () => {
@@ -513,7 +521,8 @@ describe('PerpsMarketRowItem', () => {
 
       render(<PerpsMarketRowItem market={mockMarketData} />);
 
-      expect(screen.getByText('$0.0001')).toBeOnTheScreen();
+      // With 2 decimal enforcement, very small prices show as $0.00
+      expect(screen.getByText('$0.00')).toBeOnTheScreen();
     });
 
     it('handles very large price values', () => {
diff --git a/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.tsx b/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.tsx
index dbd7add4634b..5af1bbd5aec2 100644
--- a/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.tsx
+++ b/app/components/UI/Perps/components/PerpsMarketRowItem/PerpsMarketRowItem.tsx
@@ -19,8 +19,10 @@ import {
   formatPrice,
   formatPercentage,
   formatPnl,
+  formatVolume,
 } from '../../utils/formatUtils';
 import { getPerpsMarketRowItemSelector } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
+import { PERPS_CONSTANTS } from '../../constants/perpsConfig';
 
 const PerpsMarketRowItem = ({ market, onPress }: PerpsMarketRowItemProps) => {
   const { styles } = useStyles(styleSheet, {});
@@ -39,9 +41,12 @@ const PerpsMarketRowItem = ({ market, onPress }: PerpsMarketRowItemProps) => {
       return market;
     }
 
-    // Parse and format the price
+    // Parse and format the price with exactly 2 decimals for consistency
     const currentPrice = parseFloat(livePrice.price);
-    const formattedPrice = formatPrice(currentPrice);
+    const formattedPrice = formatPrice(currentPrice, {
+      minimumDecimals: 2,
+      maximumDecimals: 2,
+    });
 
     // Only update if price actually changed
     if (formattedPrice === market.price) {
@@ -70,17 +75,19 @@ const PerpsMarketRowItem = ({ market, onPress }: PerpsMarketRowItemProps) => {
     }
 
     // Update volume if available
-    if (livePrice.volume24h) {
+    if (livePrice.volume24h !== undefined) {
       const volume = livePrice.volume24h;
-      if (volume >= 1e9) {
-        updatedMarket.volume = `$${(volume / 1e9).toFixed(1)}B`;
-      } else if (volume >= 1e6) {
-        updatedMarket.volume = `$${(volume / 1e6).toFixed(1)}M`;
-      } else if (volume >= 1e3) {
-        updatedMarket.volume = `$${(volume / 1e3).toFixed(1)}K`;
+
+      // Use formatVolume with auto-determined decimals based on magnitude
+      if (volume > 0) {
+        updatedMarket.volume = formatVolume(volume);
       } else {
-        updatedMarket.volume = `$${volume.toFixed(2)}`;
+        // Only show $0 if volume is truly 0
+        updatedMarket.volume = '$0.00';
       }
+    } else if (!market.volume || market.volume === '$0') {
+      // Fallback: ensure volume field always has a value
+      updatedMarket.volume = PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY;
     }
 
     return updatedMarket;
@@ -97,16 +104,15 @@ const PerpsMarketRowItem = ({ market, onPress }: PerpsMarketRowItemProps) => {
       <View style={styles.leftSection}>
         <View style={styles.perpIcon}>
           {assetUrl ? (
-            <RemoteImage source={{ uri: assetUrl }} />
+            <RemoteImage source={{ uri: assetUrl }} style={styles.tokenIcon} />
           ) : (
             <Avatar
-              variant={AvatarVariant.Network}
+              variant={AvatarVariant.Token}
               name={displayMarket.symbol}
-              size={AvatarSize.Lg}
+              size={AvatarSize.Md}
               testID={getPerpsMarketRowItemSelector.rowItem(
                 displayMarket.symbol,
               )}
-              style={styles.networkAvatar}
             />
           )}
         </View>
diff --git a/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx b/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx
index df2085f387d7..ec2e41f06a1a 100644
--- a/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx
+++ b/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx
@@ -19,8 +19,7 @@ import { HYPERLIQUID_ASSET_ICONS_BASE_URL } from '../../constants/hyperLiquidCon
 import type { OrderType } from '../../controllers/types';
 import { PerpsOrderHeaderSelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 import { createStyles } from './PerpsOrderHeader.styles';
-
-const FALLBACK_PRICE_DISPLAY = '$---';
+import { PERPS_CONSTANTS } from '../../constants/perpsConfig';
 
 interface PerpsOrderHeaderProps {
   asset: string;
@@ -68,14 +67,14 @@ const PerpsOrderHeader: React.FC<PerpsOrderHeaderProps> = ({
   const formattedPrice = useMemo(() => {
     // Handle invalid or edge case values
     if (!price || price <= 0 || !Number.isFinite(price)) {
-      return FALLBACK_PRICE_DISPLAY;
+      return PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY;
     }
 
     try {
       return formatPrice(price);
     } catch {
       // Fallback if formatPrice throws
-      return FALLBACK_PRICE_DISPLAY;
+      return PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY;
     }
   }, [price]);
 
diff --git a/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.test.tsx b/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.test.tsx
index 4cf969939d17..d3baf45ba9e3 100644
--- a/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.test.tsx
+++ b/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.test.tsx
@@ -12,6 +12,11 @@ jest.mock('@react-navigation/native', () => ({
   useFocusEffect: jest.fn(),
 }));
 
+// Mock i18n
+jest.mock('../../../../../../locales/i18n', () => ({
+  strings: jest.fn((key) => key),
+}));
+
 const mockUseTheme = jest.fn();
 jest.mock('../../../../../util/theme', () => ({
   useTheme: mockUseTheme,
@@ -29,6 +34,28 @@ jest.mock('../../hooks/usePerpsAssetsMetadata', () => ({
   }),
 }));
 
+// Mock stream provider
+jest.mock('../../providers/PerpsStreamManager', () => ({
+  usePerpsStream: jest.fn(() => ({
+    subscribeToPrices: jest.fn(() => jest.fn()),
+    subscribeToPositions: jest.fn(() => jest.fn()),
+    subscribeToAccount: jest.fn(() => jest.fn()),
+    subscribeToOrders: jest.fn(() => jest.fn()),
+    subscribeToFills: jest.fn(() => jest.fn()),
+    connect: jest.fn(),
+    disconnect: jest.fn(),
+    isConnected: false,
+  })),
+  PerpsStreamProvider: ({ children }: { children: React.ReactNode }) =>
+    children,
+}));
+
+// Mock stream hooks
+jest.mock('../../hooks/stream', () => ({
+  usePerpsLivePrices: jest.fn(() => ({})),
+  usePerpsLivePositions: jest.fn(() => ({})),
+}));
+
 // Mock the new hooks from ../../hooks
 jest.mock('../../hooks', () => ({
   usePerpsPositions: jest.fn().mockReturnValue({
@@ -152,22 +179,32 @@ describe('PerpsPositionCard', () => {
 
   describe('Component Rendering', () => {
     it('renders position card with all sections', () => {
-      // Act
-      render(<PerpsPositionCard position={mockPosition} />);
+      // Act - Render expanded to show all sections
+      render(<PerpsPositionCard position={mockPosition} expanded />);
 
       // Assert - Header section
       expect(screen.getByText(/10x\s+long/)).toBeOnTheScreen();
       expect(screen.getByText('2.50 ETH')).toBeOnTheScreen();
       expect(screen.getByText('$5,000.00')).toBeOnTheScreen();
 
-      // Assert - Body section
-      expect(screen.getByText('Entry Price')).toBeOnTheScreen();
+      // Assert - Body section - using string keys since strings() mock returns keys
+      expect(
+        screen.getByText('perps.position.card.entry_price'),
+      ).toBeOnTheScreen();
       expect(screen.getByText('$2,000.00')).toBeOnTheScreen();
-      expect(screen.getByText('Market Price')).toBeOnTheScreen();
-      expect(screen.getByText('Liquidity Price')).toBeOnTheScreen();
-      expect(screen.getByText('Take Profit')).toBeOnTheScreen();
-      expect(screen.getByText('Stop Loss')).toBeOnTheScreen();
-      expect(screen.getByText('Margin')).toBeOnTheScreen();
+      expect(
+        screen.getByText('perps.position.card.market_price'),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText('perps.position.card.liquidation_price'),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText('perps.position.card.take_profit'),
+      ).toBeOnTheScreen();
+      expect(
+        screen.getByText('perps.position.card.stop_loss'),
+      ).toBeOnTheScreen();
+      expect(screen.getByText('perps.position.card.margin')).toBeOnTheScreen();
       expect(screen.getByText('$500.00')).toBeOnTheScreen();
 
       // Assert - Footer section
@@ -198,22 +235,22 @@ describe('PerpsPositionCard', () => {
       // Act
       render(<PerpsPositionCard position={mockPosition} />);
 
-      // Assert
-      expect(screen.getByText(/\+\$250\.00.*\+5\.00%/)).toBeOnTheScreen();
+      // Assert - ROE is 12.5 * 100 = 1250%
+      expect(screen.getByText(/\+\$250\.00.*\+1250\.0%/)).toBeOnTheScreen();
     });
 
     it('handles missing PnL percentage data', () => {
-      // Arrange
-      const { calculatePnLPercentageFromUnrealized } = jest.requireMock(
-        '../../utils/pnlCalculations',
-      );
-      calculatePnLPercentageFromUnrealized.mockReturnValueOnce(undefined);
+      // Arrange - Set returnOnEquity to empty string to test fallback
+      const positionWithoutROE = {
+        ...mockPosition,
+        returnOnEquity: '', // Use empty string instead of undefined
+      };
 
       // Act
-      render(<PerpsPositionCard position={mockPosition} />);
+      render(<PerpsPositionCard position={positionWithoutROE} />);
 
-      // Assert
-      expect(screen.getByText(/\+\$250\.00.*0\.00%/)).toBeOnTheScreen();
+      // Assert - Should show 0% when ROE is missing
+      expect(screen.getByText(/\+\$250\.00.*\+0\.0%/)).toBeOnTheScreen();
     });
 
     it('handles missing liquidation price', () => {
@@ -380,6 +417,7 @@ describe('PerpsPositionCard', () => {
       const positionWithZeroPnl = {
         ...mockPosition,
         unrealizedPnl: '0.00',
+        returnOnEquity: '0',
       };
       const { calculatePnLPercentageFromUnrealized } = jest.requireMock(
         '../../utils/pnlCalculations',
@@ -389,8 +427,8 @@ describe('PerpsPositionCard', () => {
       // Act
       render(<PerpsPositionCard position={positionWithZeroPnl} />);
 
-      // Assert
-      expect(screen.getByText(/\$0\.00.*\+0\.00%/)).toBeOnTheScreen();
+      // Assert - ROE is shown as 0.0% (not 0.00%)
+      expect(screen.getByText(/\$0\.00.*\+0\.0%/)).toBeOnTheScreen();
     });
 
     it('handles position with empty liquidation price', () => {
@@ -408,17 +446,17 @@ describe('PerpsPositionCard', () => {
     });
 
     it('renders all body items in correct order', () => {
-      // Act
-      render(<PerpsPositionCard position={mockPosition} />);
+      // Act - Render with expanded=true to show body items
+      render(<PerpsPositionCard position={mockPosition} expanded />);
 
       // Assert - Check that all 6 body items are present
       const bodyLabels = [
-        'Entry Price',
-        'Market Price',
-        'Liquidity Price',
-        'Take Profit',
-        'Stop Loss',
-        'Margin',
+        'perps.position.card.entry_price',
+        'perps.position.card.market_price',
+        'perps.position.card.liquidation_price',
+        'perps.position.card.take_profit',
+        'perps.position.card.stop_loss',
+        'perps.position.card.margin',
       ];
 
       bodyLabels.forEach((label) => {
diff --git a/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.tsx b/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.tsx
index 2b9966c913cc..707032330186 100644
--- a/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.tsx
+++ b/app/components/UI/Perps/components/PerpsPositionCard/PerpsPositionCard.tsx
@@ -24,21 +24,21 @@ import type {
   PriceUpdate,
 } from '../../controllers/types';
 import {
-  formatPercentage,
   formatPnl,
   formatPrice,
   formatPositionSize,
 } from '../../utils/formatUtils';
-import { calculatePnLPercentageFromUnrealized } from '../../utils/pnlCalculations';
 import styleSheet from './PerpsPositionCard.styles';
 import { PerpsPositionCardSelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 import { usePerpsAssetMetadata } from '../../hooks/usePerpsAssetsMetadata';
+import { PERPS_CONSTANTS } from '../../constants/perpsConfig';
 import RemoteImage from '../../../../Base/RemoteImage';
 import {
   usePerpsMarkets,
   usePerpsTPSLUpdate,
   usePerpsClosePosition,
 } from '../../hooks';
+import { usePerpsLivePrices } from '../../hooks/stream';
 import PerpsTPSLBottomSheet from '../PerpsTPSLBottomSheet';
 import PerpsClosePositionBottomSheet from '../PerpsClosePositionBottomSheet';
 
@@ -57,12 +57,22 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
   showIcon = false, // Default to not showing icon
   rightAccessory,
   onPositionUpdate,
-  priceData,
+  priceData: externalPriceData,
 }) => {
   const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
   const { assetUrl } = usePerpsAssetMetadata(position.coin);
 
+  // Subscribe to live prices at the leaf level to avoid re-rendering parent components
+  // Only subscribe when expanded (detailed view) to optimize performance
+  const livePrices = usePerpsLivePrices({
+    symbols: expanded ? [position.coin] : [],
+    throttleMs: 1000, // Update every second
+  });
+
+  // Use external price data if provided, otherwise use live prices
+  const priceData = externalPriceData || livePrices[position.coin];
+
   const [isTPSLVisible, setIsTPSLVisible] = useState(false);
   const [isClosePositionVisible, setIsClosePositionVisible] = useState(false);
   const [selectedPosition, setSelectedPosition] = useState<Position | null>(
@@ -127,14 +137,11 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
   };
 
   const pnlNum = parseFloat(position.unrealizedPnl);
-  const pnlPercentage = calculatePnLPercentageFromUnrealized({
-    unrealizedPnl: pnlNum,
-    entryPrice: parseFloat(position.entryPrice),
-    size: parseFloat(position.size),
-  });
-  const isPositive24h =
-    position.cumulativeFunding.sinceChange &&
-    parseFloat(position.cumulativeFunding.sinceChange) >= 0;
+
+  // ROE is always stored as a decimal (e.g., 0.171 for 17.1%)
+  // Convert to percentage for display
+  const roeValue = parseFloat(position.returnOnEquity || '0');
+  const roe = isNaN(roeValue) ? 0 : roeValue * 100;
 
   const handleEditTPSL = () => {
     setSelectedPosition(position);
@@ -191,15 +198,19 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
           <View style={styles.headerRight}>
             <View style={styles.headerRow}>
               <Text variant={TextVariant.BodyMD} color={TextColor.Default}>
-                {formatPrice(position.positionValue)}
+                {formatPrice(position.positionValue, {
+                  minimumDecimals: 2,
+                  maximumDecimals: 2,
+                })}
               </Text>
             </View>
             <View style={styles.headerRow}>
               <Text
                 variant={TextVariant.BodySM}
-                color={isPositive24h ? TextColor.Success : TextColor.Error}
+                color={pnlNum >= 0 ? TextColor.Success : TextColor.Error}
               >
-                {formatPnl(pnlNum)} ({formatPercentage(pnlPercentage)})
+                {formatPnl(pnlNum)} ({roe >= 0 ? '+' : ''}
+                {roe.toFixed(1)}%)
               </Text>
             </View>
           </View>
@@ -225,7 +236,10 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
                   variant={TextVariant.BodySMMedium}
                   color={TextColor.Default}
                 >
-                  {formatPrice(position.entryPrice)}
+                  {formatPrice(position.entryPrice, {
+                    minimumDecimals: 2,
+                    maximumDecimals: 2,
+                  })}
                 </Text>
               </View>
               <View style={styles.bodyItem}>
@@ -239,7 +253,12 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
                   variant={TextVariant.BodySMMedium}
                   color={TextColor.Default}
                 >
-                  {priceData?.price ? formatPrice(priceData.price) : ''}
+                  {priceData?.price
+                    ? formatPrice(priceData.price, {
+                        minimumDecimals: 2,
+                        maximumDecimals: 2,
+                      })
+                    : PERPS_CONSTANTS.FALLBACK_DATA_DISPLAY}
                 </Text>
               </View>
               <View style={styles.bodyItem}>
@@ -247,14 +266,17 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
                   variant={TextVariant.BodyXS}
                   color={TextColor.Alternative}
                 >
-                  {strings('perps.position.card.liquidity_price')}
+                  {strings('perps.position.card.liquidation_price')}
                 </Text>
                 <Text
                   variant={TextVariant.BodySMMedium}
                   color={TextColor.Default}
                 >
                   {position.liquidationPrice
-                    ? formatPrice(position.liquidationPrice)
+                    ? formatPrice(position.liquidationPrice, {
+                        minimumDecimals: 2,
+                        maximumDecimals: 2,
+                      })
                     : 'N/A'}
                 </Text>
               </View>
@@ -273,7 +295,10 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
                   color={TextColor.Default}
                 >
                   {position.takeProfitPrice
-                    ? formatPrice(position.takeProfitPrice)
+                    ? formatPrice(position.takeProfitPrice, {
+                        minimumDecimals: 2,
+                        maximumDecimals: 2,
+                      })
                     : strings('perps.position.card.not_set')}
                 </Text>
               </View>
@@ -289,7 +314,10 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
                   color={TextColor.Default}
                 >
                   {position.stopLossPrice
-                    ? formatPrice(position.stopLossPrice)
+                    ? formatPrice(position.stopLossPrice, {
+                        minimumDecimals: 2,
+                        maximumDecimals: 2,
+                      })
                     : strings('perps.position.card.not_set')}
                 </Text>
               </View>
@@ -304,7 +332,10 @@ const PerpsPositionCard: React.FC<PerpsPositionCardProps> = ({
                   variant={TextVariant.BodySMMedium}
                   color={TextColor.Default}
                 >
-                  {formatPrice(position.marginUsed)}
+                  {formatPrice(position.marginUsed, {
+                    minimumDecimals: 2,
+                    maximumDecimals: 2,
+                  })}
                 </Text>
               </View>
             </View>
diff --git a/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.test.tsx b/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.test.tsx
index 35c78ab3b71d..83616f49c7e2 100644
--- a/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.test.tsx
+++ b/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.test.tsx
@@ -35,8 +35,12 @@ jest.mock('react-native-gesture-handler', () => ({
   Gesture: {
     Pan: jest.fn().mockReturnValue({
       enabled: jest.fn().mockReturnThis(),
+      onBegin: jest.fn().mockReturnThis(),
       onUpdate: jest.fn().mockReturnThis(),
       onEnd: jest.fn().mockReturnThis(),
+      onFinalize: jest.fn().mockReturnThis(),
+      withSpring: jest.fn().mockReturnThis(),
+      runOnJS: jest.fn().mockReturnThis(),
     }),
     Tap: jest.fn().mockReturnValue({
       enabled: jest.fn().mockReturnThis(),
@@ -385,12 +389,7 @@ describe('PerpsSlider', () => {
 
     it('handles custom spring configuration', () => {
       // Act
-      render(
-        <PerpsSlider
-          {...defaultProps}
-          springConfig={{ damping: 20, stiffness: 300 }}
-        />,
-      );
+      render(<PerpsSlider {...defaultProps} />);
 
       // Assert - Component should render without crashing
       expect(screen.getByText('50%')).toBeOnTheScreen();
diff --git a/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.tsx b/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.tsx
index 850c4412623b..a274f3290e43 100644
--- a/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.tsx
+++ b/app/components/UI/Perps/components/PerpsSlider/PerpsSlider.tsx
@@ -11,13 +11,12 @@ import Animated, {
   runOnJS,
   useAnimatedStyle,
   useSharedValue,
-  withSpring,
 } from 'react-native-reanimated';
 
+import LinearGradient from 'react-native-linear-gradient';
 import Text from '../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../component-library/hooks';
 import styleSheet from './PerpsSlider.styles';
-import LinearGradient from 'react-native-linear-gradient';
 
 // Only configure reanimated logger in non-test environments
 if (
@@ -40,10 +39,6 @@ interface PerpsSliderProps {
   disabled?: boolean;
   progressColor?: 'default' | 'gradient';
   quickValues?: number[];
-  springConfig?: {
-    damping?: number;
-    stiffness?: number;
-  };
 }
 
 const PerpsSlider: React.FC<PerpsSliderProps> = ({
@@ -56,16 +51,14 @@ const PerpsSlider: React.FC<PerpsSliderProps> = ({
   disabled = false,
   progressColor = 'default',
   quickValues,
-  springConfig = {
-    damping: 15,
-    stiffness: 400,
-  },
 }) => {
   const { styles } = useStyles(styleSheet, {});
 
   // Shared values for animations
   const sliderWidth = useSharedValue(0);
   const translateX = useSharedValue(0);
+  const isPressed = useSharedValue(false);
+  const thumbScale = useSharedValue(1);
 
   // Convert position to value
   const positionToValue = useCallback(
@@ -111,12 +104,10 @@ const PerpsSlider: React.FC<PerpsSliderProps> = ({
       const range = maximumValue - minimumValue;
       const percentage = range === 0 ? 0 : (value - minimumValue) / range;
       const newPosition = percentage * widthRef.current;
-      translateX.value = withSpring(newPosition, {
-        damping: springConfig.damping,
-        stiffness: springConfig.stiffness,
-      });
+      // Direct assignment for instant update, no spring animation
+      translateX.value = newPosition;
     }
-  }, [value, minimumValue, maximumValue, translateX, widthRef, springConfig]);
+  }, [value, minimumValue, maximumValue, translateX, widthRef]);
 
   // Animated styles
   const progressStyle = useAnimatedStyle(() => ({
@@ -124,7 +115,7 @@ const PerpsSlider: React.FC<PerpsSliderProps> = ({
   }));
 
   const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{ translateX: translateX.value }],
+    transform: [{ translateX: translateX.value }, { scale: thumbScale.value }],
   }));
 
   // JS callback wrapper
@@ -138,13 +129,26 @@ const PerpsSlider: React.FC<PerpsSliderProps> = ({
   // Pan gesture for dragging
   const panGesture = Gesture.Pan()
     .enabled(!disabled)
+    .onBegin(() => {
+      isPressed.value = true;
+      thumbScale.value = 1.1; // Subtle scale effect, instant
+    })
     .onUpdate((event) => {
       const newPosition = Math.max(0, Math.min(event.x, sliderWidth.value));
       translateX.value = newPosition;
+      // Real-time value update during drag
+      const currentValue = positionToValue(newPosition, sliderWidth.value);
+      runOnJS(updateValue)(currentValue);
     })
     .onEnd(() => {
+      isPressed.value = false;
+      thumbScale.value = 1; // Direct assignment, no spring
       const currentValue = positionToValue(translateX.value, sliderWidth.value);
       runOnJS(updateValue)(currentValue);
+    })
+    .onFinalize(() => {
+      isPressed.value = false;
+      thumbScale.value = 1; // Direct assignment, no spring
     });
 
   // Tap gesture for clicking on track
@@ -152,10 +156,7 @@ const PerpsSlider: React.FC<PerpsSliderProps> = ({
     .enabled(!disabled)
     .onEnd((event) => {
       const newPosition = Math.max(0, Math.min(event.x, sliderWidth.value));
-      translateX.value = withSpring(newPosition, {
-        damping: springConfig.damping,
-        stiffness: springConfig.stiffness,
-      });
+      translateX.value = newPosition; // Direct assignment for instant response
       const newValue = positionToValue(newPosition, sliderWidth.value);
       runOnJS(updateValue)(newValue);
     });
@@ -194,7 +195,10 @@ const PerpsSlider: React.FC<PerpsSliderProps> = ({
               ) : (
                 <Animated.View style={[styles.progress, progressStyle]} />
               )}
-              <Animated.View style={[styles.thumb, thumbStyle]} />
+              <Animated.View
+                style={[styles.thumb, thumbStyle]}
+                hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
+              />
             </Animated.View>
           </GestureDetector>
 
diff --git a/app/components/UI/Perps/components/PerpsTPSLBottomSheet/PerpsTPSLBottomSheet.tsx b/app/components/UI/Perps/components/PerpsTPSLBottomSheet/PerpsTPSLBottomSheet.tsx
index cdbcc1ad70b7..a3909b571552 100644
--- a/app/components/UI/Perps/components/PerpsTPSLBottomSheet/PerpsTPSLBottomSheet.tsx
+++ b/app/components/UI/Perps/components/PerpsTPSLBottomSheet/PerpsTPSLBottomSheet.tsx
@@ -27,6 +27,7 @@ import { createStyles } from './PerpsTPSLBottomSheet.styles';
 import { usePerpsPerformance } from '../../hooks';
 import { usePerpsLivePrices } from '../../hooks/stream';
 import { PerpsMeasurementName } from '../../constants/performanceMetrics';
+import { PERPS_CONSTANTS } from '../../constants/perpsConfig';
 import {
   PerpsEventProperties,
   PerpsEventValues,
@@ -477,7 +478,9 @@ const PerpsTPSLBottomSheet: React.FC<PerpsTPSLBottomSheetProps> = ({
               {strings('perps.tpsl.current_price')}
             </Text>
             <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
-              {currentPrice ? formatPrice(currentPrice) : '$---'}
+              {currentPrice
+                ? formatPrice(currentPrice)
+                : PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY}
             </Text>
           </View>
           {position?.liquidationPrice && (
diff --git a/app/components/UI/Perps/components/PerpsTabControlBar/PerpsTabControlBar.tsx b/app/components/UI/Perps/components/PerpsTabControlBar/PerpsTabControlBar.tsx
index 3729d9a0491a..bbaf685a055e 100644
--- a/app/components/UI/Perps/components/PerpsTabControlBar/PerpsTabControlBar.tsx
+++ b/app/components/UI/Perps/components/PerpsTabControlBar/PerpsTabControlBar.tsx
@@ -26,7 +26,6 @@ export const PerpsTabControlBar: React.FC<PerpsTabControlBarProps> = ({
   onManageBalancePress,
 }) => {
   const { styles } = useStyles(styleSheet, {});
-
   // Use live account data with 1 second throttle for balance display
   const { account: perpsAccount } = usePerpsLiveAccount({ throttleMs: 1000 });
 
diff --git a/app/components/UI/Perps/constants/perpsConfig.ts b/app/components/UI/Perps/constants/perpsConfig.ts
index be2fc6d9802b..c91a4e24f814 100644
--- a/app/components/UI/Perps/constants/perpsConfig.ts
+++ b/app/components/UI/Perps/constants/perpsConfig.ts
@@ -7,6 +7,8 @@ export const PERPS_CONSTANTS = {
   WEBSOCKET_CLEANUP_DELAY: 1000, // 1 second
   DEFAULT_ASSET_PREVIEW_LIMIT: 5,
   DEFAULT_MAX_LEVERAGE: 3 as number, // Default fallback max leverage when market data is unavailable - conservative default
+  FALLBACK_PRICE_DISPLAY: '$---', // Display when price data is unavailable
+  FALLBACK_DATA_DISPLAY: '--', // Display when non-price data is unavailable
 } as const;
 
 /**
diff --git a/app/components/UI/Perps/controllers/PerpsController.test.ts b/app/components/UI/Perps/controllers/PerpsController.test.ts
index 214edaf3a1ab..98c3a7702e81 100644
--- a/app/components/UI/Perps/controllers/PerpsController.test.ts
+++ b/app/components/UI/Perps/controllers/PerpsController.test.ts
@@ -50,6 +50,16 @@ jest.mock('../../../../core/Engine', () => ({
         metadata: { name: 'Test Account' },
       }),
     },
+    AccountTreeController: {
+      getAccountsFromSelectedAccountGroup: jest.fn().mockReturnValue([
+        {
+          address: '0x1234567890123456789012345678901234567890',
+          id: 'mock-account-id',
+          type: 'eip155:',
+          metadata: { name: 'Test Account' },
+        },
+      ]),
+    },
     NetworkController: {
       state: {
         selectedNetworkClientId: 'mainnet',
@@ -1107,7 +1117,7 @@ describe('PerpsController', () => {
     });
 
     it('should handle deposit transaction confirmation', async () => {
-      withController(async ({ controller }) => {
+      await withController(async ({ controller }) => {
         // Arrange
         const mockTxHash = '0xtransaction123';
         const mockResultPromise = Promise.resolve(mockTxHash);
@@ -1153,7 +1163,7 @@ describe('PerpsController', () => {
     });
 
     it('should handle user cancellation of deposit transaction', async () => {
-      withController(async ({ controller }) => {
+      await withController(async ({ controller }) => {
         // Arrange
         const mockError = new Error('User denied transaction signature');
         const mockResultPromise = Promise.reject(mockError);
@@ -1196,7 +1206,7 @@ describe('PerpsController', () => {
     });
 
     it('should handle deposit transaction failure', async () => {
-      withController(async ({ controller }) => {
+      await withController(async ({ controller }) => {
         // Arrange
         const mockError = new Error('Insufficient balance');
         const mockResultPromise = Promise.reject(mockError);
@@ -1242,7 +1252,7 @@ describe('PerpsController', () => {
     });
 
     it('should handle deposit when TransactionController.addTransaction throws', async () => {
-      withController(async ({ controller }) => {
+      await withController(async ({ controller }) => {
         // Arrange
         const mockError = new Error('Network error');
 
@@ -1337,7 +1347,7 @@ describe('PerpsController', () => {
     });
 
     it('should handle empty deposit routes', async () => {
-      withController(async ({ controller }) => {
+      await withController(async ({ controller }) => {
         // Arrange
         mockHyperLiquidProvider.getDepositRoutes.mockReturnValue([]);
         mockHyperLiquidProvider.initialize.mockResolvedValue({ success: true });
@@ -1355,7 +1365,7 @@ describe('PerpsController', () => {
     });
 
     it('should use correct transaction type for perps deposit', async () => {
-      withController(async ({ controller }) => {
+      await withController(async ({ controller }) => {
         // Arrange
         const mockDepositRoute: AssetRoute = {
           assetId:
diff --git a/app/components/UI/Perps/controllers/PerpsController.ts b/app/components/UI/Perps/controllers/PerpsController.ts
index bbf348bdac79..60c9e2017fa8 100644
--- a/app/components/UI/Perps/controllers/PerpsController.ts
+++ b/app/components/UI/Perps/controllers/PerpsController.ts
@@ -1,4 +1,3 @@
-import type { AccountsControllerGetSelectedAccountAction } from '@metamask/accounts-controller';
 import {
   BaseController,
   type RestrictedMessenger,
@@ -273,9 +272,7 @@ export type PerpsControllerActions =
 /**
  * External actions the PerpsController can call
  */
-export type AllowedActions =
-  | AccountsControllerGetSelectedAccountAction['type']
-  | NetworkControllerGetStateAction['type'];
+export type AllowedActions = NetworkControllerGetStateAction['type'];
 
 /**
  * External events the PerpsController can subscribe to
@@ -619,7 +616,7 @@ export class PerpsController extends BaseController<
    * No complex state tracking - just sets a loading flag
    */
   async depositWithConfirmation() {
-    const { AccountsController, NetworkController, TransactionController } =
+    const { AccountTreeController, NetworkController, TransactionController } =
       Engine.context;
 
     try {
@@ -639,8 +636,17 @@ export class PerpsController extends BaseController<
         amount: '0x0',
       });
 
-      const selectedAccount = AccountsController.getSelectedAccount();
-      const accountAddress = selectedAccount.address as Hex;
+      const accounts =
+        AccountTreeController.getAccountsFromSelectedAccountGroup();
+      const evmAccount = accounts.find((account) =>
+        account.type.startsWith('eip155:'),
+      );
+      if (!evmAccount) {
+        throw new Error(
+          'No EVM-compatible account found in selected account group',
+        );
+      }
+      const accountAddress = evmAccount.address as Hex;
 
       const parsedAsset = parseCaipAssetId(route.assetId);
       const assetChainId = toHex(parsedAsset.chainId.split(':')[1]);
diff --git a/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.test.ts b/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.test.ts
index f383b30b3ed5..6c4429058568 100644
--- a/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.test.ts
+++ b/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.test.ts
@@ -218,6 +218,15 @@ describe('HyperLiquidProvider', () => {
           },
         }),
         maxBuilderFee: jest.fn().mockResolvedValue(1),
+        userFees: jest.fn().mockResolvedValue({
+          feeSchedule: {
+            cross: '0.00030', // 0.030% taker with discount
+            add: '0.00010', // 0.010% maker with discount
+            spotCross: '0.00040',
+            spotAdd: '0.00020',
+          },
+          dailyUserVlm: [],
+        }),
       }),
       disconnect: jest.fn().mockResolvedValue(undefined),
       toggleTestnet: jest.fn(),
@@ -2724,6 +2733,15 @@ describe('HyperLiquidProvider', () => {
     });
 
     describe('calculateFees', () => {
+      beforeEach(() => {
+        // Reset userFees mock for each test
+        (mockClientService.getInfoClient().userFees as jest.Mock).mockClear();
+        // Default to throw error (will use base rates)
+        mockWalletService.getUserAddressWithDefault.mockRejectedValue(
+          new Error('No wallet connected'),
+        );
+      });
+
       it('should calculate fees for market orders', async () => {
         const result = await provider.calculateFees({
           orderType: 'market',
@@ -2778,6 +2796,72 @@ describe('HyperLiquidProvider', () => {
         expect(result.feeAmount).toBeUndefined();
       });
 
+      it('should use cached user-specific fee rates when available', async () => {
+        // Reset mock and set user address to trigger user fee fetching
+        (mockClientService.getInfoClient().userFees as jest.Mock).mockClear();
+        (
+          mockClientService.getInfoClient().userFees as jest.Mock
+        ).mockResolvedValue({
+          feeSchedule: {
+            cross: '0.00030', // 0.030% taker with discount
+            add: '0.00010', // 0.010% maker with discount
+            spotCross: '0.00040',
+            spotAdd: '0.00020',
+          },
+          dailyUserVlm: [],
+        });
+        mockWalletService.getUserAddressWithDefault.mockResolvedValue('0x123');
+
+        // First call should fetch from API
+        const result1 = await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        // Should use discounted rate from userFees mock
+        expect(result1.feeRate).toBe(0.0003); // 0.030% with discount
+        expect(result1.feeAmount).toBeCloseTo(30, 5); // 100000 * 0.00030
+        expect(
+          mockClientService.getInfoClient().userFees,
+        ).toHaveBeenCalledTimes(1);
+
+        // Second call should use cache
+        const result2 = await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        expect(result2.feeRate).toBe(0.0003);
+        expect(result2.feeAmount).toBeCloseTo(30, 5);
+        // Should not call API again (cached)
+        expect(
+          mockClientService.getInfoClient().userFees,
+        ).toHaveBeenCalledTimes(1);
+      });
+
+      it('should fall back to base rates on API failure', async () => {
+        // Reset and mock user address
+        (mockClientService.getInfoClient().userFees as jest.Mock).mockClear();
+        mockWalletService.getUserAddressWithDefault.mockResolvedValue('0x123');
+
+        // Mock API failure
+        (
+          mockClientService.getInfoClient().userFees as jest.Mock
+        ).mockRejectedValue(new Error('API Error'));
+
+        const result = await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        // Should use base rates on failure
+        expect(result.feeRate).toBe(0.00045); // Base taker rate
+        expect(result.feeAmount).toBe(45);
+      });
+
       it('should handle non-numeric amount gracefully', async () => {
         const result = await provider.calculateFees({
           orderType: 'market',
@@ -2811,6 +2895,162 @@ describe('HyperLiquidProvider', () => {
         expect(result).toBeInstanceOf(Promise);
       });
 
+      it('should fetch user-specific fee rates when wallet is connected', async () => {
+        const testAddress = '0xTestAddress123';
+        mockWalletService.getUserAddressWithDefault.mockResolvedValue(
+          testAddress,
+        );
+
+        // Mock user fees API response with discounted rates
+        (
+          mockClientService.getInfoClient().userFees as jest.Mock
+        ).mockResolvedValue({
+          feeSchedule: {
+            cross: '0.0003', // 0.03% - discounted taker rate
+            add: '0.0001', // 0.01% - discounted maker rate
+            spotCross: '0.0003',
+            spotAdd: '0.0001',
+          },
+        });
+
+        const result = await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        expect(result.feeRate).toBe(0.0003); // Discounted rate
+        expect(result.feeAmount).toBeCloseTo(30, 5);
+      });
+
+      it('should cache user fee rates and reuse them', async () => {
+        const testAddress = '0xTestAddress123';
+        mockWalletService.getUserAddressWithDefault.mockResolvedValue(
+          testAddress,
+        );
+
+        (
+          mockClientService.getInfoClient().userFees as jest.Mock
+        ).mockResolvedValue({
+          feeSchedule: {
+            cross: '0.0003',
+            add: '0.0001',
+            spotCross: '0.0003',
+            spotAdd: '0.0001',
+          },
+        });
+
+        // First call - should fetch from API
+        await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        expect(
+          mockClientService.getInfoClient().userFees,
+        ).toHaveBeenCalledTimes(1);
+
+        // Second call - should use cache
+        await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        // Should not call API again
+        expect(
+          mockClientService.getInfoClient().userFees,
+        ).toHaveBeenCalledTimes(1);
+      });
+
+      it('should fall back to base rates when API returns invalid fee rates', async () => {
+        const testAddress = '0xTestAddress123';
+        mockWalletService.getUserAddressWithDefault.mockResolvedValue(
+          testAddress,
+        );
+
+        // Mock user fees API response with invalid rates that will produce NaN
+        (
+          mockClientService.getInfoClient().userFees as jest.Mock
+        ).mockResolvedValue({
+          feeSchedule: {
+            cross: 'invalid', // Will cause parseFloat to return NaN
+            add: 'invalid',
+            spotCross: 'invalid',
+            spotAdd: 'invalid',
+          },
+        });
+
+        const result = await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        // Should fall back to base rates due to validation failure
+        expect(result.feeRate).toBe(0.00045); // Base taker rate
+        expect(result.feeAmount).toBe(45);
+      });
+
+      it('should fall back to base rates when API returns negative fee rates', async () => {
+        const testAddress = '0xTestAddress123';
+        mockWalletService.getUserAddressWithDefault.mockResolvedValue(
+          testAddress,
+        );
+
+        // Mock user fees API response with negative rates
+        (
+          mockClientService.getInfoClient().userFees as jest.Mock
+        ).mockResolvedValue({
+          feeSchedule: {
+            cross: '-0.0003', // Negative rate - invalid
+            add: '0.0001',
+            spotCross: '0.0003',
+            spotAdd: '0.0001',
+          },
+        });
+
+        const result = await provider.calculateFees({
+          orderType: 'market',
+          isMaker: false,
+          amount: '100000',
+        });
+
+        // Should fall back to base rates due to validation failure
+        expect(result.feeRate).toBe(0.00045); // Base taker rate
+        expect(result.feeAmount).toBe(45);
+      });
+
+      it('should always use taker rate for market orders regardless of isMaker', async () => {
+        const testAddress = '0xTestAddress123';
+        mockWalletService.getUserAddressWithDefault.mockResolvedValue(
+          testAddress,
+        );
+
+        (
+          mockClientService.getInfoClient().userFees as jest.Mock
+        ).mockResolvedValue({
+          feeSchedule: {
+            cross: '0.0003', // Taker rate
+            add: '0.0001', // Maker rate (lower)
+            spotCross: '0.0003',
+            spotAdd: '0.0001',
+          },
+        });
+
+        // Test market order with isMaker=true (should still use taker rate)
+        const result = await provider.calculateFees({
+          orderType: 'market',
+          isMaker: true, // This should be ignored for market orders
+          amount: '100000',
+        });
+
+        // Should use taker rate even though isMaker is true
+        expect(result.feeRate).toBe(0.0003); // Taker rate, not maker rate (0.0001)
+        expect(result.feeAmount).toBeCloseTo(30, 5);
+      });
+
       describe('placeholder methods for future implementation', () => {
         it('should have getUserVolume method returning 0', async () => {
           // Access private method for testing
diff --git a/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts b/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts
index 7d0b1b9bef1c..cdb94a3fab86 100644
--- a/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts
+++ b/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts
@@ -99,6 +99,19 @@ export class HyperLiquidProvider implements IPerpsProvider {
   // Asset mapping
   private coinToAssetId = new Map<string, number>();
 
+  // Cache for user fee rates to avoid excessive API calls
+  private userFeeCache = new Map<
+    string,
+    {
+      perpsTakerRate: number;
+      perpsMakerRate: number;
+      spotTakerRate: number;
+      spotMakerRate: number;
+      timestamp: number;
+      ttl: number;
+    }
+  >();
+
   constructor(options: { isTestnet?: boolean } = {}) {
     const isTestnet = options.isTestnet || false;
 
@@ -2011,48 +2024,124 @@ export class HyperLiquidProvider implements IPerpsProvider {
    * Calculate fees based on HyperLiquid's fee structure
    * Returns fee rate as decimal (e.g., 0.00045 for 0.045%)
    *
-   * HyperLiquid base fees (Tier 0, no discounts):
-   * - Taker: 0.045% (market orders, aggressive limit orders)
-   * - Maker: 0.015% (limit orders that add liquidity)
-   *
-   * TODO: Apply volume and staking discounts when APIs available
+   * Uses the SDK's userFees API to get actual discounted rates when available,
+   * falling back to base rates if the API is unavailable or user not connected.
    */
   async calculateFees(
     params: FeeCalculationParams,
   ): Promise<FeeCalculationResult> {
     const { orderType, isMaker = false, amount } = params;
 
-    // Use base rates from config
-    const baseRate =
+    // Start with base rates from config
+    let feeRate =
       orderType === 'market' || !isMaker ? FEE_RATES.taker : FEE_RATES.maker;
 
-    // TODO: When APIs available, apply user-specific discounts
-    // const volume = await this.getUserVolume();
-    // const staking = await this.getUserStaking();
-    // const { volumeTier, volumeDiscount, stakingDiscount } = await this.calculateDiscounts(volume, staking);
-    // const finalRate = baseRate * (1 - volumeDiscount) * (1 - stakingDiscount);
+    // Try to get user-specific rates if wallet is connected
+    try {
+      const userAddress = await this.walletService.getUserAddressWithDefault();
+
+      // Check cache first
+      if (this.isFeeCacheValid(userAddress)) {
+        const cached = this.userFeeCache.get(userAddress);
+        if (cached) {
+          // Market orders always use taker rate, limit orders check isMaker
+          feeRate =
+            orderType === 'market' || !isMaker
+              ? cached.perpsTakerRate
+              : cached.perpsMakerRate;
+        }
+      } else {
+        // Fetch fresh rates from SDK
+        await this.ensureReady();
+        const infoClient = this.clientService.getInfoClient();
+        const userFees = await infoClient.userFees({
+          user: userAddress as `0x${string}`,
+        });
+
+        // Parse the rates (these already include all discounts!)
+        const perpsTakerRate = parseFloat(userFees.feeSchedule.cross);
+        const perpsMakerRate = parseFloat(userFees.feeSchedule.add);
+        const spotTakerRate = parseFloat(userFees.feeSchedule.spotCross);
+        const spotMakerRate = parseFloat(userFees.feeSchedule.spotAdd);
+
+        // Validate all rates are valid numbers before caching
+        if (
+          isNaN(perpsTakerRate) ||
+          isNaN(perpsMakerRate) ||
+          isNaN(spotTakerRate) ||
+          isNaN(spotMakerRate) ||
+          perpsTakerRate < 0 ||
+          perpsMakerRate < 0 ||
+          spotTakerRate < 0 ||
+          spotMakerRate < 0
+        ) {
+          throw new Error('Invalid fee rates received from API');
+        }
+
+        const rates = {
+          perpsTakerRate,
+          perpsMakerRate,
+          spotTakerRate,
+          spotMakerRate,
+          timestamp: Date.now(),
+          ttl: 5 * 60 * 1000, // 5 minutes
+        };
+
+        this.userFeeCache.set(userAddress, rates);
+        // Market orders always use taker rate, limit orders check isMaker
+        feeRate =
+          orderType === 'market' || !isMaker
+            ? rates.perpsTakerRate
+            : rates.perpsMakerRate;
+
+        DevLogger.log('Fetched user fee rates', {
+          userAddress,
+          perpsTaker: rates.perpsTakerRate,
+          perpsMaker: rates.perpsMakerRate,
+          cacheExpiry: new Date(rates.timestamp + rates.ttl).toISOString(),
+        });
+      }
+    } catch (error) {
+      // Silently fall back to base rates
+      DevLogger.log('Failed to fetch user fee rates, using base rates', error);
+    }
 
     const parsedAmount = amount ? parseFloat(amount) : 0;
     const feeAmount =
       amount !== undefined
         ? isNaN(parsedAmount)
           ? 0
-          : parsedAmount * baseRate
+          : parsedAmount * feeRate
         : undefined;
 
     return {
-      feeRate: baseRate,
+      feeRate,
       feeAmount,
-      // Future: Include breakdown when we have user data
-      // breakdown: {
-      //   baseFeeRate: baseRate,
-      //   volumeTier,
-      //   volumeDiscount,
-      //   stakingDiscount,
-      // },
     };
   }
 
+  /**
+   * Check if the fee cache is valid for a user
+   * @private
+   */
+  private isFeeCacheValid(userAddress: string): boolean {
+    const cached = this.userFeeCache.get(userAddress);
+    if (!cached) return false;
+    return Date.now() - cached.timestamp < cached.ttl;
+  }
+
+  /**
+   * Clear fee cache for a specific user or all users
+   * @param userAddress - Optional address to clear cache for
+   */
+  public clearFeeCache(userAddress?: string): void {
+    if (userAddress) {
+      this.userFeeCache.delete(userAddress);
+    } else {
+      this.userFeeCache.clear();
+    }
+  }
+
   /**
    * Disconnect provider
    */
@@ -2066,6 +2155,9 @@ export class HyperLiquidProvider implements IPerpsProvider {
       // Clear subscriptions through subscription service
       this.subscriptionService.clearAll();
 
+      // Clear fee cache
+      this.clearFeeCache();
+
       // Disconnect client service
       await this.clientService.disconnect();
 
diff --git a/app/components/UI/Perps/hooks/usePerpsAssetsMetadata.ts b/app/components/UI/Perps/hooks/usePerpsAssetsMetadata.ts
index c201c73067d0..2ce4b9741616 100644
--- a/app/components/UI/Perps/hooks/usePerpsAssetsMetadata.ts
+++ b/app/components/UI/Perps/hooks/usePerpsAssetsMetadata.ts
@@ -1,12 +1,18 @@
 import { useEffect, useState, useMemo } from 'react';
+// import { useTheme } from '../../../../util/theme'; // Available for future dark mode support
 import { HYPERLIQUID_ASSET_ICONS_BASE_URL } from '../constants/hyperLiquidConfig';
 
 export const usePerpsAssetMetadata = (assetSymbol: string | undefined) => {
   const [assetUrl, setAssetUrl] = useState('');
   const [error, setError] = useState<string | null>(null);
+  // Note: useTheme() is available here for future dark mode logo support
+  // const { colors } = useTheme();
 
   const url = useMemo(() => {
     if (!assetSymbol) return '';
+    // For now, we use the same SVG for both themes
+    // In the future, we could add logic here to use different URLs based on theme
+    // e.g., `${base}${symbol}_${isDarkMode ? 'dark' : 'light'}.svg`
     return `${HYPERLIQUID_ASSET_ICONS_BASE_URL}${assetSymbol.toUpperCase()}.svg`;
   }, [assetSymbol]);
 
diff --git a/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.test.ts b/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.test.ts
index c6421f2480cf..c539106ec6b3 100644
--- a/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.test.ts
+++ b/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.test.ts
@@ -6,7 +6,15 @@ import { PerpsController } from '../controllers';
 
 // Mock dependencies
 jest.mock('react-redux', () => ({
-  useSelector: jest.fn(),
+  useSelector: jest.fn(() => () => ({
+    address: '0x1234567890abcdef1234567890abcdef12345678',
+  })),
+}));
+
+jest.mock('../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(() => () => ({
+    address: '0x1234567890abcdef1234567890abcdef12345678',
+  })),
 }));
 
 jest.mock('../../../../core/Engine', () => ({
@@ -28,7 +36,9 @@ describe('usePerpsBlockExplorerUrl', () => {
     jest.clearAllMocks();
     Engine.context.PerpsController =
       mockController as unknown as PerpsController;
-    (useSelector as jest.Mock).mockReturnValue(mockSelectedAddress);
+    (useSelector as jest.Mock).mockReturnValue(() => ({
+      address: mockSelectedAddress,
+    }));
   });
 
   it('should return baseExplorerUrl from controller', () => {
@@ -94,7 +104,7 @@ describe('usePerpsBlockExplorerUrl', () => {
 
     it('should return null when no address available', () => {
       mockController.getBlockExplorerUrl.mockClear();
-      (useSelector as jest.Mock).mockReturnValue(null);
+      (useSelector as jest.Mock).mockReturnValue(() => null);
 
       const { result } = renderHook(() => usePerpsBlockExplorerUrl());
       const url = result.current.getExplorerUrl();
diff --git a/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.ts b/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.ts
index a3e856ce6472..61bb3fc4d416 100644
--- a/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.ts
+++ b/app/components/UI/Perps/hooks/usePerpsBlockExplorerUrl.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import { selectSelectedInternalAccountAddress } from '../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../selectors/multichainAccounts/accounts';
 import Engine from '../../../../core/Engine';
 
 export interface UsePerpsBlockExplorerUrlResult {
@@ -17,7 +17,9 @@ export const usePerpsBlockExplorerUrl = (
   defaultAddress?: string,
 ): UsePerpsBlockExplorerUrlResult => {
   const controller = Engine.context.PerpsController;
-  const selectedAddress = useSelector(selectSelectedInternalAccountAddress);
+  const selectedAddress = useSelector(selectSelectedInternalAccountByScope)(
+    'eip155:1',
+  )?.address;
 
   const baseExplorerUrl = useMemo(() => {
     try {
diff --git a/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts b/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts
index 3bd01656ddba..9ed219346c7e 100644
--- a/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts
+++ b/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts
@@ -22,10 +22,10 @@ jest.mock('../utils/formatUtils', () => ({
       maximumFractionDigits: 2,
     })}`,
   formatLargeNumber: (num: number) => {
-    if (num >= 1e12) return `$${(num / 1e12).toFixed(2)}T`;
-    if (num >= 1e9) return `$${(num / 1e9).toFixed(2)}B`;
-    if (num >= 1e6) return `$${(num / 1e6).toFixed(2)}M`;
-    return `$${num.toFixed(2)}`;
+    if (num >= 1e12) return `${Math.round(num / 1e12)}T`;
+    if (num >= 1e9) return `${Math.round(num / 1e9)}B`;
+    if (num >= 1e6) return `${Math.round(num / 1e6)}M`;
+    return num.toFixed(2);
   },
 }));
 
@@ -100,8 +100,8 @@ describe('usePerpsMarketStats', () => {
     expect(result.current.currentPrice).toBe(45000);
     expect(result.current.high24h).toBe('$46,000.00');
     expect(result.current.low24h).toBe('$43,500.00');
-    expect(result.current.volume24h).toBe('$1.23B');
-    expect(result.current.openInterest).toBe('$987.65M');
+    expect(result.current.volume24h).toBe('$1B'); // No decimals in formatVolume
+    expect(result.current.openInterest).toBe('$988M'); // No decimals in formatLargeNumber
     expect(result.current.fundingRate).toBe('1.0000%');
     expect(result.current.isLoading).toBe(false);
   });
@@ -165,8 +165,8 @@ describe('usePerpsMarketStats', () => {
 
     const { result } = renderHook(() => usePerpsMarketStats('BTC'));
 
-    expect(result.current.volume24h).toBe('$12.35T');
-    expect(result.current.openInterest).toBe('$98.77T');
+    expect(result.current.volume24h).toBe('$12T'); // No decimals in formatVolume
+    expect(result.current.openInterest).toBe('$99T'); // No decimals in formatLargeNumber
   });
 
   it('should format negative funding rate correctly', () => {
diff --git a/app/components/UI/Perps/hooks/usePerpsMarketStats.ts b/app/components/UI/Perps/hooks/usePerpsMarketStats.ts
index b36348589d48..cf2fb1f8d500 100644
--- a/app/components/UI/Perps/hooks/usePerpsMarketStats.ts
+++ b/app/components/UI/Perps/hooks/usePerpsMarketStats.ts
@@ -103,13 +103,25 @@ export const usePerpsMarketStats = (
 
     return {
       // 24h high/low from candlestick data, with fallback estimates
-      high24h: high > 0 ? formatPrice(high) : formatPrice(fallbackPrice),
-      low24h: low > 0 ? formatPrice(low) : formatPrice(fallbackPrice),
+      high24h:
+        high > 0
+          ? formatPrice(high, { minimumDecimals: 2, maximumDecimals: 2 })
+          : formatPrice(fallbackPrice, {
+              minimumDecimals: 2,
+              maximumDecimals: 2,
+            }),
+      low24h:
+        low > 0
+          ? formatPrice(low, { minimumDecimals: 2, maximumDecimals: 2 })
+          : formatPrice(fallbackPrice, {
+              minimumDecimals: 2,
+              maximumDecimals: 2,
+            }),
       volume24h: marketData.volume24h
-        ? formatLargeNumber(marketData.volume24h)
+        ? `$${formatLargeNumber(marketData.volume24h)}`
         : '$0.00',
       openInterest: marketData.openInterest
-        ? formatLargeNumber(marketData.openInterest)
+        ? `$${formatLargeNumber(marketData.openInterest)}`
         : '$0.00',
       fundingRate: marketData.funding
         ? `${(marketData.funding * 100).toFixed(4)}%`
diff --git a/app/components/UI/Perps/hooks/usePerpsMarkets.ts b/app/components/UI/Perps/hooks/usePerpsMarkets.ts
index 496971c91db2..59465950b4f8 100644
--- a/app/components/UI/Perps/hooks/usePerpsMarkets.ts
+++ b/app/components/UI/Perps/hooks/usePerpsMarkets.ts
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback } from 'react';
 import DevLogger from '../../../../core/SDKConnect/utils/DevLogger';
 import Engine from '../../../../core/Engine';
 import type { PerpsMarketData } from '../controllers/types';
+import { PERPS_CONSTANTS } from '../constants/perpsConfig';
 
 export interface UsePerpsMarketsResult {
   /**
@@ -82,7 +83,42 @@ export const usePerpsMarkets = (
         // Get markets with price data directly from the provider
         const marketDataWithPrices = await provider.getMarketDataWithPrices();
 
-        setMarkets(marketDataWithPrices);
+        // Sort markets by 24h volume (highest first)
+        const sortedMarkets = [...marketDataWithPrices].sort((a, b) => {
+          // Helper function to parse volume string and convert to number
+          const getVolumeNumber = (volumeStr: string | undefined): number => {
+            if (!volumeStr) return -1; // Put undefined at the end
+
+            // Handle special cases
+            if (volumeStr === PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY) return -1; // Put missing data at the end
+            if (volumeStr === '$<1') return 0.5; // Treat as very small but not zero
+
+            // Remove $ and commas, handle different suffixes
+            const cleaned = volumeStr.replace(/[$,]/g, '');
+
+            // Handle billion (B), million (M), thousand (K) suffixes
+            if (cleaned.includes('B')) {
+              return parseFloat(cleaned.replace('B', '')) * 1e9;
+            }
+            if (cleaned.includes('M')) {
+              return parseFloat(cleaned.replace('M', '')) * 1e6;
+            }
+            if (cleaned.includes('K')) {
+              return parseFloat(cleaned.replace('K', '')) * 1e3;
+            }
+
+            // Plain number without suffix (including 0)
+            const num = parseFloat(cleaned);
+            return isNaN(num) ? -1 : num;
+          };
+
+          const volumeA = getVolumeNumber(a.volume);
+          const volumeB = getVolumeNumber(b.volume);
+
+          return volumeB - volumeA; // Descending order
+        });
+
+        setMarkets(sortedMarkets);
 
         DevLogger.log(
           'Perps: Successfully fetched and transformed market data',
diff --git a/app/components/UI/Perps/hooks/usePerpsOrderForm.test.ts b/app/components/UI/Perps/hooks/usePerpsOrderForm.test.ts
index 3cb41ce15baa..6d4ab90b3d64 100644
--- a/app/components/UI/Perps/hooks/usePerpsOrderForm.test.ts
+++ b/app/components/UI/Perps/hooks/usePerpsOrderForm.test.ts
@@ -184,7 +184,7 @@ describe('usePerpsOrderForm', () => {
         result.current.handlePercentageAmount(0.5);
       });
 
-      expect(result.current.orderForm.amount).toBe('500'); // 50% of 1000
+      expect(result.current.orderForm.amount).toBe('1500'); // 50% of 1000 * 3x leverage
     });
 
     it('should handle max amount', () => {
@@ -194,7 +194,7 @@ describe('usePerpsOrderForm', () => {
         result.current.handleMaxAmount();
       });
 
-      expect(result.current.orderForm.amount).toBe('1000');
+      expect(result.current.orderForm.amount).toBe('3000'); // 1000 * 3x leverage
     });
 
     it('should handle min amount for mainnet', () => {
diff --git a/app/components/UI/Perps/hooks/usePerpsOrderForm.ts b/app/components/UI/Perps/hooks/usePerpsOrderForm.ts
index 3d08edee5591..d46f266d972d 100644
--- a/app/components/UI/Perps/hooks/usePerpsOrderForm.ts
+++ b/app/components/UI/Perps/hooks/usePerpsOrderForm.ts
@@ -125,10 +125,12 @@ export function usePerpsOrderForm(
   const handlePercentageAmount = useCallback(
     (percentage: number) => {
       if (availableBalance === 0) return;
-      const newAmount = Math.floor(availableBalance * percentage).toString();
+      const newAmount = Math.floor(
+        availableBalance * orderForm.leverage * percentage,
+      ).toString();
       setOrderForm((prev) => ({ ...prev, amount: newAmount }));
     },
-    [availableBalance],
+    [availableBalance, orderForm.leverage],
   );
 
   // Handle max amount selection
@@ -136,7 +138,7 @@ export function usePerpsOrderForm(
     if (availableBalance === 0) return;
     setOrderForm((prev) => ({
       ...prev,
-      amount: Math.floor(availableBalance).toString(),
+      amount: Math.floor(availableBalance * prev.leverage).toString(),
     }));
   }, [availableBalance]);
 
diff --git a/app/components/UI/Perps/providers/PerpsConnectionProvider.tsx b/app/components/UI/Perps/providers/PerpsConnectionProvider.tsx
index 4661416a5e57..285e057408ad 100644
--- a/app/components/UI/Perps/providers/PerpsConnectionProvider.tsx
+++ b/app/components/UI/Perps/providers/PerpsConnectionProvider.tsx
@@ -193,7 +193,11 @@ export const PerpsConnectionProvider: React.FC<
 
   // Show skeleton loading UI while connection is initializing
   // This prevents components from trying to load data before the connection is ready
-  if (connectionState.isConnecting || !connectionState.isInitialized) {
+  // Don't show skeleton if there's an error (let the child components handle it)
+  if (
+    (connectionState.isConnecting || !connectionState.isInitialized) &&
+    !error
+  ) {
     return (
       <PerpsConnectionContext.Provider value={contextValue}>
         <PerpsLoadingSkeleton />
diff --git a/app/components/UI/Perps/services/HyperLiquidWalletService.test.ts b/app/components/UI/Perps/services/HyperLiquidWalletService.test.ts
index b6f1f864d7d6..768f5d230af2 100644
--- a/app/components/UI/Perps/services/HyperLiquidWalletService.test.ts
+++ b/app/components/UI/Perps/services/HyperLiquidWalletService.test.ts
@@ -69,6 +69,12 @@ jest.mock('../../../../selectors/accountsController', () => ({
   ),
 }));
 
+jest.mock('../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(
+    () => () => MOCK_SELECTED_ACCOUNT,
+  ),
+}));
+
 // Mock Engine with proper hoisting
 jest.mock('../../../../core/Engine', () => {
   const mockKeyringController = {
@@ -99,7 +105,7 @@ jest.mock('../../../../core/SDKConnect/utils/DevLogger', () => ({
 
 import { HyperLiquidWalletService } from './HyperLiquidWalletService';
 import type { CaipAccountId } from '@metamask/utils';
-import { selectSelectedInternalAccountAddress } from '../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../selectors/multichainAccounts/accounts';
 import { store } from '../../../../store';
 import Engine from '../../../../core/Engine';
 import { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger';
@@ -160,8 +166,8 @@ describe('HyperLiquidWalletService', () => {
       it('should throw error when no account selected', async () => {
         // Mock selector to return null for this test
         jest
-          .mocked(selectSelectedInternalAccountAddress)
-          .mockReturnValueOnce(undefined);
+          .mocked(selectSelectedInternalAccountByScope)
+          .mockReturnValueOnce(() => undefined);
 
         await expect(
           walletAdapter.request({
@@ -267,8 +273,8 @@ describe('HyperLiquidWalletService', () => {
       it('should throw error when no account selected', async () => {
         // Mock selector to return null for this test
         jest
-          .mocked(selectSelectedInternalAccountAddress)
-          .mockReturnValueOnce(undefined);
+          .mocked(selectSelectedInternalAccountByScope)
+          .mockReturnValueOnce(() => undefined);
 
         await expect(
           walletAdapter.request({
@@ -344,8 +350,8 @@ describe('HyperLiquidWalletService', () => {
     it('should throw error when getting account ID with no selected account', async () => {
       // Mock selector to return null for this test
       jest
-        .mocked(selectSelectedInternalAccountAddress)
-        .mockReturnValueOnce(undefined);
+        .mocked(selectSelectedInternalAccountByScope)
+        .mockReturnValueOnce(() => undefined);
 
       await expect(service.getCurrentAccountId()).rejects.toThrow(
         'No account selected',
diff --git a/app/components/UI/Perps/services/HyperLiquidWalletService.ts b/app/components/UI/Perps/services/HyperLiquidWalletService.ts
index 4677f38fba90..71f608aa0900 100644
--- a/app/components/UI/Perps/services/HyperLiquidWalletService.ts
+++ b/app/components/UI/Perps/services/HyperLiquidWalletService.ts
@@ -5,7 +5,7 @@ import {
   isValidHexAddress,
 } from '@metamask/utils';
 import { store } from '../../../../store';
-import { selectSelectedInternalAccountAddress } from '../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../selectors/multichainAccounts/accounts';
 import Engine from '../../../../core/Engine';
 import { SignTypedDataVersion } from '@metamask/keyring-controller';
 import { getChainId } from '../constants/hyperLiquidConfig';
@@ -38,13 +38,13 @@ export class HyperLiquidWalletService {
       }): Promise<unknown> => {
         switch (args.method) {
           case 'eth_requestAccounts': {
-            const selectedAddress = selectSelectedInternalAccountAddress(
+            const selectedEvmAccount = selectSelectedInternalAccountByScope(
               store.getState(),
-            );
-            if (!selectedAddress) {
+            )('eip155:1');
+            if (!selectedEvmAccount?.address) {
               throw new Error(strings('perps.errors.noAccountSelected'));
             }
-            return [selectedAddress];
+            return [selectedEvmAccount.address];
           }
           case 'eth_chainId': {
             // Return Arbitrum chain ID in hex format
@@ -61,17 +61,19 @@ export class HyperLiquidWalletService {
 
           case 'eth_signTypedData_v4': {
             const [address, data] = args.params as [string, string | object];
-            const selectedAddress = selectSelectedInternalAccountAddress(
+            const selectedEvmAccount = selectSelectedInternalAccountByScope(
               store.getState(),
-            );
+            )('eip155:1');
 
             // Check if account is selected
-            if (!selectedAddress) {
+            if (!selectedEvmAccount?.address) {
               throw new Error(strings('perps.errors.noAccountSelected'));
             }
 
             // Verify the signing address matches the selected account
-            if (address.toLowerCase() !== selectedAddress.toLowerCase()) {
+            if (
+              address.toLowerCase() !== selectedEvmAccount.address.toLowerCase()
+            ) {
               throw new Error(strings('perps.errors.noAccountSelected'));
             }
 
@@ -107,16 +109,16 @@ export class HyperLiquidWalletService {
    * Get current account ID from Redux store
    */
   public async getCurrentAccountId(): Promise<CaipAccountId> {
-    const selectedAddress = selectSelectedInternalAccountAddress(
+    const selectedEvmAccount = selectSelectedInternalAccountByScope(
       store.getState(),
-    );
+    )('eip155:1');
 
-    if (!selectedAddress) {
+    if (!selectedEvmAccount?.address) {
       throw new Error(strings('perps.errors.noAccountSelected'));
     }
 
     const chainId = getChainId(this.isTestnet);
-    const caipAccountId: CaipAccountId = `eip155:${chainId}:${selectedAddress}`;
+    const caipAccountId: CaipAccountId = `eip155:${chainId}:${selectedEvmAccount.address}`;
 
     return caipAccountId;
   }
diff --git a/app/components/UI/Perps/services/PerpsConnectionManager.test.ts b/app/components/UI/Perps/services/PerpsConnectionManager.test.ts
index 97d6fde985a9..f78f67e6db8f 100644
--- a/app/components/UI/Perps/services/PerpsConnectionManager.test.ts
+++ b/app/components/UI/Perps/services/PerpsConnectionManager.test.ts
@@ -29,6 +29,13 @@ jest.mock('../../../../store', () => ({
 // Mock selectors
 jest.mock('../../../../selectors/accountsController', () => ({
   selectSelectedInternalAccountAddress: jest.fn(),
+  selectInternalAccounts: jest.fn(() => []),
+}));
+
+jest.mock('../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(() => () => ({
+    address: '0x1234567890123456789012345678901234567890',
+  })),
 }));
 
 jest.mock('../selectors/perpsController', () => ({
@@ -50,7 +57,7 @@ jest.mock('../providers/PerpsStreamManager', () => ({
 import { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger';
 import Engine from '../../../../core/Engine';
 import { store } from '../../../../store';
-import { selectSelectedInternalAccountAddress } from '../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../selectors/multichainAccounts/accounts';
 import { selectPerpsNetwork } from '../selectors/perpsController';
 
 // Import PerpsConnectionManager after mocks are set up
@@ -406,8 +413,8 @@ describe('PerpsConnectionManager', () => {
 
       // Setup initial values for selectors
       (
-        selectSelectedInternalAccountAddress as unknown as jest.Mock
-      ).mockReturnValue('0xabc123');
+        selectSelectedInternalAccountByScope as unknown as jest.Mock
+      ).mockReturnValue(() => ({ address: '0xabc123' }));
       (selectPerpsNetwork as unknown as jest.Mock).mockReturnValue('mainnet');
       (store.getState as jest.Mock).mockReturnValue({});
     });
@@ -443,8 +450,8 @@ describe('PerpsConnectionManager', () => {
 
       // Simulate account change
       (
-        selectSelectedInternalAccountAddress as unknown as jest.Mock
-      ).mockReturnValue('0xdef456');
+        selectSelectedInternalAccountByScope as unknown as jest.Mock
+      ).mockReturnValue(() => ({ address: '0xdef456' }));
 
       // Trigger the store callback with the changed value
       storeCallback();
@@ -515,8 +522,8 @@ describe('PerpsConnectionManager', () => {
 
         // Simulate account change
         (
-          selectSelectedInternalAccountAddress as unknown as jest.Mock
-        ).mockReturnValue('0xdef456');
+          selectSelectedInternalAccountByScope as unknown as jest.Mock
+        ).mockReturnValue(() => ({ address: '0xdef456' }));
 
         // Trigger the store callback with changed values
         storeCallback();
diff --git a/app/components/UI/Perps/services/PerpsConnectionManager.ts b/app/components/UI/Perps/services/PerpsConnectionManager.ts
index 8bfbe6283764..56738f4c769b 100644
--- a/app/components/UI/Perps/services/PerpsConnectionManager.ts
+++ b/app/components/UI/Perps/services/PerpsConnectionManager.ts
@@ -1,7 +1,7 @@
 import { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger';
 import Engine from '../../../../core/Engine';
 import { store } from '../../../../store';
-import { selectSelectedInternalAccountAddress } from '../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../selectors/multichainAccounts/accounts';
 import { selectPerpsNetwork } from '../selectors/perpsController';
 import { getStreamManagerInstance } from '../providers/PerpsStreamManager';
 
@@ -39,13 +39,17 @@ class PerpsConnectionManagerClass {
 
     // Get initial values
     const state = store.getState();
-    this.previousAddress = selectSelectedInternalAccountAddress(state);
+    const selectedEvmAccount =
+      selectSelectedInternalAccountByScope(state)('eip155:1');
+    this.previousAddress = selectedEvmAccount?.address;
     this.previousPerpsNetwork = selectPerpsNetwork(state);
 
     // Subscribe to Redux store changes
     this.unsubscribeFromStore = store.subscribe(() => {
       const currentState = store.getState();
-      const currentAddress = selectSelectedInternalAccountAddress(currentState);
+      const currentEvmAccount =
+        selectSelectedInternalAccountByScope(currentState)('eip155:1');
+      const currentAddress = currentEvmAccount?.address;
       const currentPerpsNetwork = selectPerpsNetwork(currentState);
 
       const hasAccountChanged =
diff --git a/app/components/UI/Perps/utils/formatUtils.test.ts b/app/components/UI/Perps/utils/formatUtils.test.ts
index dfbc051661ac..1aa929fd9de9 100644
--- a/app/components/UI/Perps/utils/formatUtils.test.ts
+++ b/app/components/UI/Perps/utils/formatUtils.test.ts
@@ -8,6 +8,7 @@ import {
   formatPnl,
   formatPercentage,
   formatLargeNumber,
+  formatVolume,
   formatPositionSize,
   formatLeverage,
   parseCurrencyString,
@@ -150,30 +151,54 @@ describe('formatUtils', () => {
   });
 
   describe('formatLargeNumber', () => {
-    it('should format billions with B suffix', () => {
-      expect(formatLargeNumber(1000000000)).toBe('1.0B');
-      expect(formatLargeNumber('2500000000')).toBe('2.5B');
-      expect(formatLargeNumber(12300000000)).toBe('12.3B');
+    it('should format billions with B suffix (default no decimals)', () => {
+      expect(formatLargeNumber(1000000000)).toBe('1B');
+      expect(formatLargeNumber('2500000000')).toBe('3B');
+      expect(formatLargeNumber(12300000000)).toBe('12B');
     });
 
-    it('should format millions with M suffix', () => {
-      expect(formatLargeNumber(1000000)).toBe('1.0M');
-      expect(formatLargeNumber('2500000')).toBe('2.5M');
-      expect(formatLargeNumber(123456789)).toBe('123.5M');
+    it('should format billions with configured decimals', () => {
+      expect(formatLargeNumber(1000000000, { decimals: 1 })).toBe('1.0B');
+      expect(formatLargeNumber('2500000000', { decimals: 1 })).toBe('2.5B');
+      expect(formatLargeNumber(12300000000, { decimals: 2 })).toBe('12.30B');
     });
 
-    it('should format thousands with K suffix', () => {
-      expect(formatLargeNumber(1000)).toBe('1.0K');
-      expect(formatLargeNumber('2500')).toBe('2.5K');
-      expect(formatLargeNumber(123456)).toBe('123.5K');
+    it('should format millions with M suffix (default no decimals)', () => {
+      expect(formatLargeNumber(1000000)).toBe('1M');
+      expect(formatLargeNumber('2500000')).toBe('3M');
+      expect(formatLargeNumber(123456789)).toBe('123M');
     });
 
-    it('should format numbers < 1000 with 2 decimal places', () => {
+    it('should format millions with configured decimals', () => {
+      expect(formatLargeNumber(1000000, { decimals: 1 })).toBe('1.0M');
+      expect(formatLargeNumber('2500000', { decimals: 1 })).toBe('2.5M');
+      expect(formatLargeNumber(123456789, { decimals: 2 })).toBe('123.46M');
+    });
+
+    it('should format thousands with K suffix (default no decimals)', () => {
+      expect(formatLargeNumber(1000)).toBe('1K');
+      expect(formatLargeNumber('2500')).toBe('3K');
+      expect(formatLargeNumber(123456)).toBe('123K');
+    });
+
+    it('should format thousands with configured decimals', () => {
+      expect(formatLargeNumber(1000, { decimals: 1 })).toBe('1.0K');
+      expect(formatLargeNumber('2500', { decimals: 2 })).toBe('2.50K');
+      expect(formatLargeNumber(123456, { decimals: 1 })).toBe('123.5K');
+    });
+
+    it('should format numbers < 1000 with 2 decimal places by default', () => {
       expect(formatLargeNumber(999)).toBe('999.00');
       expect(formatLargeNumber('123.45')).toBe('123.45');
       expect(formatLargeNumber(0)).toBe('0.00');
     });
 
+    it('should format numbers < 1000 with configured raw decimals', () => {
+      expect(formatLargeNumber(999, { rawDecimals: 0 })).toBe('999');
+      expect(formatLargeNumber('123.45', { rawDecimals: 3 })).toBe('123.450');
+      expect(formatLargeNumber(0, { rawDecimals: 1 })).toBe('0.0');
+    });
+
     it('should handle invalid inputs', () => {
       expect(formatLargeNumber('invalid')).toBe('0');
       expect(formatLargeNumber(NaN)).toBe('0');
@@ -181,18 +206,63 @@ describe('formatUtils', () => {
     });
 
     it('should handle negative numbers', () => {
-      expect(formatLargeNumber(-1000000)).toBe('-1000000.00');
-      expect(formatLargeNumber(-2500)).toBe('-2500.00');
+      expect(formatLargeNumber(-1000000)).toBe('-1M');
+      expect(formatLargeNumber(-2500)).toBe('-3K');
       expect(formatLargeNumber(-999)).toBe('-999.00');
     });
 
+    it('should handle negative numbers with decimals', () => {
+      expect(formatLargeNumber(-1000000, { decimals: 1 })).toBe('-1.0M');
+      expect(formatLargeNumber(-2500, { decimals: 2 })).toBe('-2.50K');
+      expect(formatLargeNumber(-999, { rawDecimals: 0 })).toBe('-999');
+    });
+
     it('should handle edge cases at boundaries', () => {
-      expect(formatLargeNumber(999999999)).toBe('1000.0M');
-      expect(formatLargeNumber(999999)).toBe('1000.0K');
+      expect(formatLargeNumber(999999999)).toBe('1000M');
+      expect(formatLargeNumber(999999)).toBe('1000K');
       expect(formatLargeNumber(999.99)).toBe('999.99');
     });
   });
 
+  describe('formatVolume', () => {
+    it('should format volume with appropriate decimals by default', () => {
+      expect(formatVolume(1234567890)).toBe('$1.23B'); // B: 2 decimals
+      expect(formatVolume(12345678)).toBe('$12.35M'); // M: 2 decimals
+      expect(formatVolume(123456)).toBe('$123K'); // K: 0 decimals
+      expect(formatVolume(999)).toBe('$999.00'); // Under 1K: 2 decimals
+    });
+
+    it('should allow configurable decimals', () => {
+      expect(formatVolume(1234567890, 0)).toBe('$1B');
+      expect(formatVolume(12345678, 1)).toBe('$12.3M');
+      expect(formatVolume(123456, 3)).toBe('$123.456K');
+    });
+
+    it('should handle zero volume', () => {
+      expect(formatVolume(0)).toBe('$0.00');
+      expect(formatVolume('0')).toBe('$0.00');
+      expect(formatVolume(0, 0)).toBe('$0');
+    });
+
+    it('should handle invalid inputs', () => {
+      expect(formatVolume('invalid')).toBe('$---');
+      expect(formatVolume(NaN)).toBe('$---');
+      expect(formatVolume(Infinity)).toBe('$---');
+    });
+
+    it('should handle negative volume', () => {
+      expect(formatVolume(-1000000)).toBe('-$1.00M'); // M: 2 decimals
+      expect(formatVolume(-1234)).toBe('-$1K'); // K: 0 decimals by default
+      expect(formatVolume(-1234, 0)).toBe('-$1K'); // Explicit 0 decimals
+    });
+
+    it('should handle very large volumes', () => {
+      expect(formatVolume(1000000000000)).toBe('$1.00T');
+      expect(formatVolume(2500000000000)).toBe('$2.50T');
+      expect(formatVolume(2500000000000, 0)).toBe('$3T');
+    });
+  });
+
   describe('formatPositionSize', () => {
     it('should format very small numbers with 6 decimal places', () => {
       expect(formatPositionSize(0.001)).toBe('0.001000');
diff --git a/app/components/UI/Perps/utils/formatUtils.ts b/app/components/UI/Perps/utils/formatUtils.ts
index 2f6ea0c92713..161b0b19cb86 100644
--- a/app/components/UI/Perps/utils/formatUtils.ts
+++ b/app/components/UI/Perps/utils/formatUtils.ts
@@ -38,31 +38,32 @@ export const formatPerpsFiat = (balance: string | number): string => {
  */
 export const formatPrice = (
   price: string | number,
-  options?: { minimumDecimals?: number },
+  options?: { minimumDecimals?: number; maximumDecimals?: number },
 ): string => {
   const num = typeof price === 'string' ? parseFloat(price) : price;
   const minDecimals = options?.minimumDecimals ?? 2;
+  const maxDecimals = options?.maximumDecimals ?? 4;
 
   if (isNaN(num)) {
     return minDecimals === 0 ? '$0' : '$0.00';
   }
 
-  // For prices >= 1000, use specified minimum decimal places
+  // For prices >= 1000, use specified decimal places
   if (num >= 1000) {
     return formatWithThreshold(num, 1000, 'en-US', {
       style: 'currency',
       currency: 'USD',
       minimumFractionDigits: minDecimals,
-      maximumFractionDigits: Math.max(minDecimals, 2),
+      maximumFractionDigits: maxDecimals,
     });
   }
 
-  // For prices < 1000, use up to 4 decimal places
+  // For prices < 1000, use specified decimal places
   return formatWithThreshold(num, 0.0001, 'en-US', {
     style: 'currency',
     currency: 'USD',
     minimumFractionDigits: minDecimals,
-    maximumFractionDigits: 4,
+    maximumFractionDigits: maxDecimals,
   });
 };
 
@@ -112,29 +113,103 @@ export const formatPercentage = (value: string | number): string => {
 /**
  * Formats large numbers with magnitude suffixes
  * @param value - Raw numeric value
- * @returns Format: "X.XB" / "X.XM" / "X.XK" / "X.XX" (1 decimal for suffixed, 2 for raw)
- * @example formatLargeNumber(1500000) => "1.5M"
- * @example formatLargeNumber(1234) => "1.2K"
+ * @param options - Optional formatting options
+ * @param options.decimals - Number of decimal places for suffixed values (default: 0)
+ * @param options.rawDecimals - Number of decimal places for non-suffixed values (default: 2)
+ * @returns Format: "X.XXB" / "X.XXM" / "X.XXK" / "X.XX" (configurable decimals)
+ * @example formatLargeNumber(1500000) => "2M"
+ * @example formatLargeNumber(1500000, { decimals: 1 }) => "1.5M"
+ * @example formatLargeNumber(1234, { decimals: 2 }) => "1.23K"
  * @example formatLargeNumber(999) => "999.00"
  */
-export const formatLargeNumber = (value: string | number): string => {
+export const formatLargeNumber = (
+  value: string | number,
+  options?: { decimals?: number; rawDecimals?: number },
+): string => {
   const num = typeof value === 'string' ? parseFloat(value) : value;
+  const decimals = options?.decimals ?? 0;
+  const rawDecimals = options?.rawDecimals ?? 2;
 
   if (isNaN(num)) {
     return '0';
   }
 
-  if (num >= 1000000000) {
-    return `${(num / 1000000000).toFixed(1)}B`;
+  const absNum = Math.abs(num);
+  const sign = num < 0 ? '-' : '';
+
+  if (absNum >= 1000000000000) {
+    const trillions = absNum / 1000000000000;
+    return `${sign}${trillions.toFixed(decimals)}T`;
   }
-  if (num >= 1000000) {
-    return `${(num / 1000000).toFixed(1)}M`;
+  if (absNum >= 1000000000) {
+    const billions = absNum / 1000000000;
+    return `${sign}${billions.toFixed(decimals)}B`;
   }
-  if (num >= 1000) {
-    return `${(num / 1000).toFixed(1)}K`;
+  if (absNum >= 1000000) {
+    const millions = absNum / 1000000;
+    return `${sign}${millions.toFixed(decimals)}M`;
+  }
+  if (absNum >= 1000) {
+    const thousands = absNum / 1000;
+    return `${sign}${thousands.toFixed(decimals)}K`;
   }
 
-  return num.toFixed(2);
+  return num.toFixed(rawDecimals);
+};
+
+/**
+ * Formats volume with appropriate magnitude suffixes
+ * @param volume - Raw volume value
+ * @param decimals - Number of decimal places to show (optional, auto-determined by default)
+ * @returns Format: "$XB" / "$X.XXM" / "$XK" / "$X.XX"
+ * @example formatVolume(1234567890) => "$1.23B"
+ * @example formatVolume(12345678) => "$12.35M"
+ * @example formatVolume(123456) => "$123K"
+ */
+export const formatVolume = (
+  volume: string | number,
+  decimals?: number,
+): string => {
+  const num = typeof volume === 'string' ? parseFloat(volume) : volume;
+
+  // Handle invalid inputs - return fallback display for NaN/Infinity
+  if (isNaN(num) || !isFinite(num)) {
+    return '$---';
+  }
+
+  const absNum = Math.abs(num);
+
+  // Auto-determine decimals based on magnitude if not specified
+  let autoDecimals = decimals;
+  if (decimals === undefined) {
+    if (absNum >= 1000000000) {
+      // Billions: 2 decimals
+      autoDecimals = 2;
+    } else if (absNum >= 1000000) {
+      // Millions: 2 decimals
+      autoDecimals = 2;
+    } else if (absNum >= 1000) {
+      // Thousands: 0 decimals
+      autoDecimals = 0;
+    } else {
+      // Under 1000: 2 decimals
+      autoDecimals = 2;
+    }
+  } else {
+    autoDecimals = decimals;
+  }
+
+  const formatted = formatLargeNumber(volume, {
+    decimals: autoDecimals,
+    rawDecimals: autoDecimals,
+  });
+
+  // Handle negative values - ensure dollar sign comes after negative sign
+  if (formatted.startsWith('-')) {
+    return `-$${formatted.slice(1)}`;
+  }
+
+  return `$${formatted}`;
 };
 
 /**
diff --git a/app/components/UI/Perps/utils/marketDataTransform.test.ts b/app/components/UI/Perps/utils/marketDataTransform.test.ts
index c93c82a8f10d..620b0517a480 100644
--- a/app/components/UI/Perps/utils/marketDataTransform.test.ts
+++ b/app/components/UI/Perps/utils/marketDataTransform.test.ts
@@ -7,9 +7,9 @@ import {
   formatPrice,
   formatChange,
   formatPercentage,
-  formatVolume,
   HyperLiquidMarketData,
 } from './marketDataTransform';
+import { formatVolume } from './formatUtils';
 import {
   AllMids,
   PerpsAssetCtx,
@@ -68,7 +68,9 @@ describe('marketDataTransform', () => {
         price: '$52,000.00',
         change24h: '+$2,000.00',
         change24hPercent: '+4.00%',
-        volume: '$1B',
+        volume: '$1.00B',
+        nextFundingTime: undefined,
+        fundingIntervalHours: undefined,
       });
     });
 
@@ -131,7 +133,7 @@ describe('marketDataTransform', () => {
       // Assert
       expect(result[0].change24h).toBe('+$52,000.00');
       expect(result[0].change24hPercent).toBe('0.00%');
-      expect(result[0].volume).toBe('$0');
+      expect(result[0].volume).toBe('$---');
     });
 
     it('handles null/undefined asset context values', () => {
@@ -153,7 +155,7 @@ describe('marketDataTransform', () => {
       // Assert
       expect(result[0].change24h).toBe('$0.00');
       expect(result[0].change24hPercent).toBe('0.00%');
-      expect(result[0].volume).toBe('$0');
+      expect(result[0].volume).toBe('$---');
     });
 
     it('calculates negative price changes correctly', () => {
@@ -201,8 +203,8 @@ describe('marketDataTransform', () => {
 
       // Assert
       expect(result).toHaveLength(2);
-      expect(result[0].volume).toBe('$1B'); // Has context
-      expect(result[1].volume).toBe('$0'); // No context
+      expect(result[0].volume).toBe('$1.00B'); // Has context, now with 2 decimals
+      expect(result[1].volume).toBe('$---'); // No context
     });
 
     it('handles predicted funding data correctly', () => {
@@ -598,7 +600,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$0');
+      expect(result).toBe('$0.00');
     });
 
     it('formats volume in billions', () => {
@@ -609,7 +611,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$2.5B');
+      expect(result).toBe('$2.50B'); // Now with 2 decimals
     });
 
     it('formats volume in millions', () => {
@@ -620,7 +622,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$150M');
+      expect(result).toBe('$150.00M');
     });
 
     it('formats volume in thousands', () => {
@@ -631,7 +633,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$75K');
+      expect(result).toBe('$75K'); // K values have no decimals
     });
 
     it('formats small volume with two decimal places', () => {
@@ -642,7 +644,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$123.45');
+      expect(result).toBe('$123.45'); // Now with 2 decimals
     });
 
     it('formats edge case at exactly 1 billion', () => {
@@ -653,7 +655,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$1B');
+      expect(result).toBe('$1.00B');
     });
 
     it('formats edge case at exactly 1 million', () => {
@@ -664,7 +666,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$1M');
+      expect(result).toBe('$1.00M');
     });
 
     it('formats edge case at exactly 1 thousand', () => {
@@ -675,7 +677,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$1K');
+      expect(result).toBe('$1K'); // K values have no decimals
     });
 
     it('formats decimal billions correctly', () => {
@@ -686,7 +688,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$1.23B');
+      expect(result).toBe('$1.23B'); // Now with 2 decimals
     });
 
     it('formats decimal millions correctly', () => {
@@ -697,7 +699,7 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$12.35M');
+      expect(result).toBe('$12.35M'); // Now with 2 decimals
     });
 
     it('formats decimal thousands correctly', () => {
@@ -708,18 +710,18 @@ describe('marketDataTransform', () => {
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$12.35K');
+      expect(result).toBe('$12K'); // K values have no decimals
     });
 
     it('handles very large numbers correctly', () => {
       // Arrange
-      const volume = 999999999999;
+      const volume = 1000000000000; // 1 trillion
 
       // Act
       const result = formatVolume(volume);
 
       // Assert
-      expect(result).toBe('$1T');
+      expect(result).toBe('$1.00T');
     });
   });
 
@@ -760,7 +762,7 @@ describe('marketDataTransform', () => {
       // Assert
       expect(result[0].change24h).toBe('$0.00');
       expect(result[0].change24hPercent).toBe('0.00%');
-      expect(result[0].volume).toBe('$0');
+      expect(result[0].volume).toBe('$---');
     });
 
     it('handles invalid price string in allMids with safe fallbacks', () => {
@@ -786,13 +788,13 @@ describe('marketDataTransform', () => {
     it('handles negative numbers in formatting functions', () => {
       // Arrange & Act & Assert
       expect(formatPrice(-100)).toBe('-$100.00');
-      expect(formatVolume(-1000000)).toBe('-$1M');
+      expect(formatVolume(-1000000)).toBe('-$1.00M'); // Now with 2 decimals
     });
 
     it('handles very small numbers close to zero', () => {
       // Arrange & Act & Assert
       expect(formatPrice(0.0000001)).toBe('$0.000000');
-      expect(formatVolume(0.1)).toBe('$0.1');
+      expect(formatVolume(0.1)).toBe('$0.10'); // Now shows 2 decimals
       expect(formatPercentage(0.001)).toBe('+0.00%');
     });
 
@@ -801,8 +803,8 @@ describe('marketDataTransform', () => {
       // Arrange & Act & Assert
       expect(formatPrice(NaN)).toBe('$0.00');
       expect(formatPrice(Infinity)).toBe('$0.00');
-      expect(formatVolume(NaN)).toBe('$0');
-      expect(formatVolume(Infinity)).toBe('$0');
+      expect(formatVolume(NaN)).toBe('$---');
+      expect(formatVolume(Infinity)).toBe('$---');
       expect(formatChange(NaN)).toBe('$0.00');
       expect(formatChange(Infinity)).toBe('$0.00');
       expect(formatPercentage(NaN)).toBe('0.00%');
diff --git a/app/components/UI/Perps/utils/marketDataTransform.ts b/app/components/UI/Perps/utils/marketDataTransform.ts
index 9a7585d13f15..861ab0a15278 100644
--- a/app/components/UI/Perps/utils/marketDataTransform.ts
+++ b/app/components/UI/Perps/utils/marketDataTransform.ts
@@ -5,6 +5,8 @@ import type {
   AllMids,
   PredictedFunding,
 } from '@deeeed/hyperliquid-node20';
+import { PERPS_CONSTANTS } from '../constants/perpsConfig';
+import { formatVolume } from './formatUtils';
 
 /**
  * HyperLiquid-specific market data structure
@@ -57,7 +59,8 @@ export function transformMarketData(
       : 0;
 
     // Format volume (dayNtlVlm is daily notional volume)
-    const volume = assetCtx ? parseFloat(assetCtx.dayNtlVlm) : 0;
+    // If assetCtx is missing or dayNtlVlm is not available, use NaN to indicate missing data
+    const volume = assetCtx?.dayNtlVlm ? parseFloat(assetCtx.dayNtlVlm) : NaN;
 
     // Extract funding time data if available
     let nextFundingTime: number | undefined;
@@ -92,7 +95,9 @@ export function transformMarketData(
       change24hPercent: isNaN(change24hPercent)
         ? '0.00%'
         : formatPercentage(change24hPercent),
-      volume: isNaN(volume) ? '$0' : formatVolume(volume),
+      volume: isNaN(volume)
+        ? PERPS_CONSTANTS.FALLBACK_PRICE_DISPLAY
+        : formatVolume(volume),
       nextFundingTime,
       fundingIntervalHours,
     };
@@ -177,19 +182,3 @@ export function formatPercentage(percent: number): string {
 
   return percent > 0 ? `+${formatted}` : formatted;
 }
-
-/**
- * Format volume with appropriate units
- */
-export function formatVolume(volume: number): string {
-  if (isNaN(volume) || !isFinite(volume)) return '$0';
-  if (volume === 0) return '$0';
-
-  return new Intl.NumberFormat('en-US', {
-    style: 'currency',
-    currency: 'USD',
-    notation: 'compact',
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 2,
-  }).format(volume);
-}
diff --git a/app/components/Views/confirmations/components/edit-amount/edit-amount.test.tsx b/app/components/Views/confirmations/components/edit-amount/edit-amount.test.tsx
index 48806162223d..0f10ba154001 100644
--- a/app/components/Views/confirmations/components/edit-amount/edit-amount.test.tsx
+++ b/app/components/Views/confirmations/components/edit-amount/edit-amount.test.tsx
@@ -57,7 +57,7 @@ describe('EditAmount', () => {
     } as unknown as AlertsContextParams);
 
     useTransactionPayTokenMock.mockReturnValue({
-      balanceFiat: '0',
+      payToken: { balanceFiat: '0' },
     } as ReturnType<typeof useTransactionPayToken>);
   });
 
@@ -123,7 +123,7 @@ describe('EditAmount', () => {
 
   it('updates token amount if percentage button pressed', async () => {
     useTransactionPayTokenMock.mockReturnValue({
-      balanceFiat: '1200.50',
+      payToken: { balanceFiat: '1200.50' },
     } as ReturnType<typeof useTransactionPayToken>);
 
     const { getByTestId, getByText } = render();
@@ -144,7 +144,7 @@ describe('EditAmount', () => {
 
   it('does nothing if percentage button pressed with no pay token selected', async () => {
     useTransactionPayTokenMock.mockReturnValue({
-      balanceFiat: undefined,
+      payToken: undefined,
     } as ReturnType<typeof useTransactionPayToken>);
 
     const { getByTestId, getByText } = render();
diff --git a/app/components/Views/confirmations/components/edit-amount/edit-amount.tsx b/app/components/Views/confirmations/components/edit-amount/edit-amount.tsx
index 8523878a565a..ea20f303021f 100644
--- a/app/components/Views/confirmations/components/edit-amount/edit-amount.tsx
+++ b/app/components/Views/confirmations/components/edit-amount/edit-amount.tsx
@@ -37,8 +37,9 @@ export function EditAmount({
     hasAlert,
   });
 
-  const { balanceFiat } = useTransactionPayToken();
+  const { payToken } = useTransactionPayToken();
   const { amountUnformatted, updateTokenAmount } = useTokenAmount();
+  const { balanceFiat } = payToken ?? {};
 
   const [amountHuman, setAmountHuman] = useState<string>(
     amountUnformatted ?? '0',
diff --git a/app/components/Views/confirmations/components/pay-token-amount/index.ts b/app/components/Views/confirmations/components/pay-token-amount/index.ts
new file mode 100644
index 000000000000..721f5b2c54c0
--- /dev/null
+++ b/app/components/Views/confirmations/components/pay-token-amount/index.ts
@@ -0,0 +1 @@
+export * from './pay-token-amount';
diff --git a/app/components/Views/confirmations/components/token-amount-native/token-amount-native.styles.ts b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.styles.ts
similarity index 86%
rename from app/components/Views/confirmations/components/token-amount-native/token-amount-native.styles.ts
rename to app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.styles.ts
index e0464303f63c..9b0511b60adb 100644
--- a/app/components/Views/confirmations/components/token-amount-native/token-amount-native.styles.ts
+++ b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.styles.ts
@@ -11,9 +11,10 @@ const styleSheet = (params: { theme: Theme }) =>
       display: 'flex',
       flexDirection: 'row',
       gap: 4,
-      paddingInline: 16,
+      paddingLeft: 16,
+      paddingRight: 8,
       paddingVertical: 6,
-      marginBottom: 32,
+      marginBottom: 64,
     },
   });
 
diff --git a/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.test.tsx b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.test.tsx
new file mode 100644
index 000000000000..3688e12b818a
--- /dev/null
+++ b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.test.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import { merge } from 'lodash';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import { PayTokenAmount } from './pay-token-amount';
+import { simpleSendTransactionControllerMock } from '../../__mocks__/controllers/transaction-controller-mock';
+import { transactionApprovalControllerMock } from '../../__mocks__/controllers/approval-controller-mock';
+import { useTokenAmount } from '../../hooks/useTokenAmount';
+import { otherControllersMock } from '../../__mocks__/controllers/other-controllers-mock';
+import { useTokenAsset } from '../../hooks/useTokenAsset';
+import { useTokenFiatRates } from '../../hooks/tokens/useTokenFiatRates';
+import { useTransactionPayToken } from '../../hooks/pay/useTransactionPayToken';
+
+jest.mock('../../hooks/useTokenAmount');
+jest.mock('../../hooks/useTokenAsset');
+jest.mock('../../hooks/tokens/useTokenFiatRates');
+jest.mock('../../hooks/pay/useTransactionPayToken');
+
+function render() {
+  return renderWithProvider(<PayTokenAmount />, {
+    state: merge(
+      simpleSendTransactionControllerMock,
+      transactionApprovalControllerMock,
+      otherControllersMock,
+    ),
+  });
+}
+
+const ASSET_AMOUNT_MOCK = '100';
+const ASSET_FIAT_RATE_MOCK = 10;
+const PAY_TOKEN_FIAT_RATE_MOCK = 2;
+const PAY_TOKEN_SYMBOL_MOCK = 'TST';
+const CHAIN_ID_1_MOCK = '0x123';
+const CHAIN_ID_2_MOCK = '0x456';
+const ADDRESS_1_MOCK = '0xabc';
+const ADDRESS_2_MOCK = '0xdef';
+
+describe('PayTokenAmount', () => {
+  const useTokenAmountMock = jest.mocked(useTokenAmount);
+  const useTokenAssetMock = jest.mocked(useTokenAsset);
+  const useTokenFiatRatesMock = jest.mocked(useTokenFiatRates);
+  const useTransactionPayTokenMock = jest.mocked(useTransactionPayToken);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    useTokenAmountMock.mockReturnValue({
+      amountUnformatted: ASSET_AMOUNT_MOCK,
+    } as unknown as ReturnType<typeof useTokenAmount>);
+
+    useTokenAssetMock.mockReturnValue({
+      asset: {
+        chainId: CHAIN_ID_1_MOCK,
+        address: ADDRESS_1_MOCK,
+      },
+    } as unknown as ReturnType<typeof useTokenAsset>);
+
+    useTokenFiatRatesMock.mockReturnValue([
+      PAY_TOKEN_FIAT_RATE_MOCK,
+      ASSET_FIAT_RATE_MOCK,
+    ]);
+
+    useTransactionPayTokenMock.mockReturnValue({
+      payToken: {
+        chainId: CHAIN_ID_2_MOCK,
+        address: ADDRESS_2_MOCK,
+        symbol: PAY_TOKEN_SYMBOL_MOCK,
+      },
+    } as unknown as ReturnType<typeof useTransactionPayToken>);
+  });
+
+  it('renders equivalent pay token value', () => {
+    const { getByText } = render();
+    expect(getByText('500', { exact: false })).toBeDefined();
+  });
+
+  it('renders pay token symbol', () => {
+    const { getByText } = render();
+    expect(getByText(PAY_TOKEN_SYMBOL_MOCK, { exact: false })).toBeDefined();
+  });
+
+  it('renders nothing if missing fiat rate', () => {
+    useTokenFiatRatesMock.mockReturnValue([undefined, undefined]);
+
+    const { queryByTestId } = render();
+
+    expect(queryByTestId('pay-token-amount')).toBeNull();
+  });
+});
diff --git a/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.tsx b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.tsx
new file mode 100644
index 000000000000..3ed241b5d6dd
--- /dev/null
+++ b/app/components/Views/confirmations/components/pay-token-amount/pay-token-amount.tsx
@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react';
+import { useTokenAmount } from '../../hooks/useTokenAmount';
+import { View } from 'react-native';
+import Text from '../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../hooks/useStyles';
+import styleSheet from './pay-token-amount.styles';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../../../component-library/components/Icons/Icon';
+import { useTransactionPayToken } from '../../hooks/pay/useTransactionPayToken';
+import { useTokenAsset } from '../../hooks/useTokenAsset';
+import { BigNumber } from 'bignumber.js';
+import { formatAmount } from '../../../../UI/SimulationDetails/formatAmount';
+import I18n from '../../../../../../locales/i18n';
+import { useTokenFiatRates } from '../../hooks/tokens/useTokenFiatRates';
+import { Hex } from 'viem';
+
+export function PayTokenAmount() {
+  const { styles } = useStyles(styleSheet, {});
+  const { amountUnformatted } = useTokenAmount();
+  const { asset } = useTokenAsset();
+  const { payToken } = useTransactionPayToken();
+
+  const fiatRequests = useMemo(
+    () =>
+      payToken && asset
+        ? [
+            {
+              chainId: payToken.chainId,
+              address: payToken.address,
+            },
+            {
+              chainId: asset.chainId as Hex,
+              address: asset.address as Hex,
+            },
+          ]
+        : [],
+    [asset, payToken],
+  );
+
+  const fiatRates = useTokenFiatRates(fiatRequests);
+
+  const payTokenFiatRate = fiatRates[0];
+  const assetFiatRate = fiatRates[1];
+
+  if (!payTokenFiatRate || !assetFiatRate) return null;
+
+  const assetToPayTokenRate = new BigNumber(assetFiatRate).dividedBy(
+    payTokenFiatRate,
+  );
+
+  const payTokenAmount = new BigNumber(amountUnformatted || '0').multipliedBy(
+    assetToPayTokenRate,
+  );
+
+  const formattedAmount = formatAmount(I18n.locale, payTokenAmount);
+
+  return (
+    <View testID="pay-token-amount" style={styles.container}>
+      <Text>
+        {formattedAmount} {payToken?.symbol}
+      </Text>
+      <Icon name={IconName.SwapVertical} size={IconSize.Md} />
+    </View>
+  );
+}
diff --git a/app/components/Views/confirmations/components/pay-token-balance/index.ts b/app/components/Views/confirmations/components/pay-token-balance/index.ts
deleted file mode 100644
index 89f42f83d544..000000000000
--- a/app/components/Views/confirmations/components/pay-token-balance/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './pay-token-balance';
diff --git a/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.test.tsx b/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.test.tsx
deleted file mode 100644
index d3a128de275c..000000000000
--- a/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.test.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react-native';
-import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
-import { BridgeToken } from '../../../../UI/Bridge/types';
-import { useTransactionPayToken } from '../../hooks/pay/useTransactionPayToken';
-import { PayTokenBalance } from './pay-token-balance';
-import { View as MockView } from 'react-native';
-
-jest.mock('../../hooks/pay/useTransactionPayToken');
-jest.mock('../../../../UI/Bridge/hooks/useTokensWithBalance');
-
-jest.mock('../../../../UI/AnimatedSpinner', () => ({
-  __esModule: true,
-  ...jest.requireActual('../../../../UI/AnimatedSpinner'),
-  default: () => <MockView testID="pay-token-spinner">{`Spinner`}</MockView>,
-}));
-
-const TOKEN_ADDRESS_MOCK = '0xabcd1234abcd1234abcd1234abcd1234abcd1234';
-const CHAIN_ID_MOCK = '0x123';
-const BALANCE_FIAT_MOCK = '$100.12';
-
-describe('PayTokenBalance', () => {
-  const useTransactionPayTokenMock = jest.mocked(useTransactionPayToken);
-  const useTokensWithBalanceMock = jest.mocked(useTokensWithBalance);
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    useTransactionPayTokenMock.mockReturnValue({
-      balanceFiat: BALANCE_FIAT_MOCK,
-      balanceHuman: '1.23',
-      decimals: 4,
-      payToken: {
-        address: TOKEN_ADDRESS_MOCK,
-        chainId: CHAIN_ID_MOCK,
-      },
-      setPayToken: jest.fn(),
-    });
-
-    useTokensWithBalanceMock.mockReturnValue([
-      {
-        address: TOKEN_ADDRESS_MOCK,
-        chainId: CHAIN_ID_MOCK,
-        balanceFiat: BALANCE_FIAT_MOCK,
-      },
-    ] as unknown as BridgeToken[]);
-  });
-
-  it('renders pay token balance', () => {
-    const { getByText } = render(<PayTokenBalance />);
-    expect(getByText(`Available: ${BALANCE_FIAT_MOCK}`)).toBeDefined();
-  });
-
-  it('renders spinner if no pay token selected', () => {
-    useTransactionPayTokenMock.mockReturnValue({
-      payToken: undefined,
-    } as ReturnType<typeof useTransactionPayToken>);
-
-    const { getByTestId } = render(<PayTokenBalance />);
-    expect(getByTestId('pay-token-spinner')).toBeDefined();
-  });
-
-  it('renders spinner if token not found', () => {
-    useTokensWithBalanceMock.mockReturnValue([]);
-
-    const { getByTestId } = render(<PayTokenBalance />);
-    expect(getByTestId('pay-token-spinner')).toBeDefined();
-  });
-});
diff --git a/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.tsx b/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.tsx
deleted file mode 100644
index a1ceefd19f90..000000000000
--- a/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { View } from 'react-native';
-import Text, {
-  TextColor,
-} from '../../../../../component-library/components/Texts/Text';
-import { useStyles } from '../../../../../component-library/hooks';
-import styleSheet from './pay-token-balance.styles';
-import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
-import { useTransactionPayToken } from '../../hooks/pay/useTransactionPayToken';
-import { strings } from '../../../../../../locales/i18n';
-import AnimatedSpinner, { SpinnerSize } from '../../../../UI/AnimatedSpinner';
-
-export function PayTokenBalance() {
-  const { styles } = useStyles(styleSheet, {});
-  const { payToken } = useTransactionPayToken();
-  const { address: payTokenAddress, chainId } = payToken ?? {};
-  const chainIds = chainId ? [chainId] : [];
-  const tokens = useTokensWithBalance({ chainIds });
-
-  const token = tokens.find(
-    (t) =>
-      t.address.toLowerCase() === payTokenAddress?.toLowerCase() &&
-      t.chainId === chainId,
-  );
-
-  const isLoading = !token || token.balanceFiat === 'tokenBalanceLoading';
-
-  return (
-    <View style={styles.container}>
-      {isLoading && <AnimatedSpinner size={SpinnerSize.SM} />}
-      {!isLoading && (
-        <Text style={styles.text} color={TextColor.Alternative}>
-          {strings('confirm.available_balance')}
-          {token.balanceFiat}
-        </Text>
-      )}
-    </View>
-  );
-}
diff --git a/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.styles.ts b/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.styles.ts
similarity index 50%
rename from app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.styles.ts
rename to app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.styles.ts
index ff816bdace34..fb86e09125a8 100644
--- a/app/components/Views/confirmations/components/pay-token-balance/pay-token-balance.styles.ts
+++ b/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.styles.ts
@@ -1,15 +1,18 @@
 import { StyleSheet } from 'react-native';
-import { Theme } from '../../../../../util/theme/models';
+import { Theme } from '../../../../../../util/theme/models';
 
 const styleSheet = (_params: { theme: Theme }) =>
   StyleSheet.create({
     container: {
-      display: 'flex',
-      flexDirection: 'row',
-      justifyContent: 'center',
+      paddingInline: 8,
+      paddingVertical: 4,
     },
-    text: {
-      textAlign: 'center',
+
+    spinner: {
+      paddingInline: 8,
+      paddingVertical: 4,
+      justifyContent: 'center',
+      alignItems: 'center',
     },
   });
 
diff --git a/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx b/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx
index ec0d2f6af7eb..124334189e27 100644
--- a/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx
+++ b/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { PayWithRow } from './pay-with-row';
-import { TokenPillProps } from '../../token-pill/token-pill';
+import { TokenIconProps } from '../../token-icon';
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
 import { useNavigation } from '@react-navigation/native';
 import { act, fireEvent } from '@testing-library/react-native';
@@ -19,8 +19,8 @@ jest.mock('../../../hooks/pay/useTransactionPayToken');
 jest.mock('../../../hooks/pay/useTransactionBridgeQuotes');
 jest.mock('../../../hooks/pay/useTransactionRequiredFiat');
 
-jest.mock('../../token-pill/', () => ({
-  TokenPill: (props: TokenPillProps) => (
+jest.mock('../../token-icon/', () => ({
+  TokenIcon: (props: TokenIconProps) => (
     <MockText>{`${props.address} ${props.chainId}`}</MockText>
   ),
 }));
@@ -56,12 +56,11 @@ describe('PayWithRow', () => {
     jest.resetAllMocks();
 
     jest.mocked(useTransactionPayToken).mockReturnValue({
-      balanceFiat: '$1.23',
-      balanceHuman: '1.23',
-      decimals: 18,
       payToken: {
         address: ADDRESS_MOCK,
         chainId: CHAIN_ID_MOCK,
+        decimals: 4,
+        symbol: 'test',
       },
       setPayToken: jest.fn(),
     });
@@ -108,9 +107,6 @@ describe('PayWithRow', () => {
   it('renders spinner when no pay token selected', () => {
     jest.mocked(useTransactionPayToken).mockReturnValue({
       payToken: undefined,
-      balanceFiat: undefined,
-      balanceHuman: undefined,
-      decimals: undefined,
       setPayToken: jest.fn(),
     });
 
diff --git a/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx b/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx
index 3433766a4444..1f96d0566788 100644
--- a/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx
+++ b/app/components/Views/confirmations/components/rows/pay-with-row/pay-with-row.tsx
@@ -1,18 +1,36 @@
 import React, { useCallback } from 'react';
-import InfoRow from '../../UI/info-row';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../../constants/navigation/Routes';
-import { TokenPill } from '../../token-pill/';
+import { TokenIcon } from '../../token-icon';
 import { useTransactionPayToken } from '../../../hooks/pay/useTransactionPayToken';
-import { strings } from '../../../../../../../locales/i18n';
 import { TouchableOpacity } from 'react-native';
 import { useTransactionBridgeQuotes } from '../../../hooks/pay/useTransactionBridgeQuotes';
 import { useTransactionRequiredFiat } from '../../../hooks/pay/useTransactionRequiredFiat';
+import { Box } from '../../../../../UI/Box/Box';
+import {
+  AlignItems,
+  FlexDirection,
+  JustifyContent,
+} from '../../../../../UI/Box/box.types';
+import Text, {
+  TextColor,
+  TextVariant,
+} from '../../../../../../component-library/components/Texts/Text';
+import { useStyles } from '../../../../../hooks/useStyles';
+import styleSheet from './pay-with-row.styles';
 import AnimatedSpinner, {
   SpinnerSize,
 } from '../../../../../UI/AnimatedSpinner';
+import { BigNumber } from 'bignumber.js';
+import Icon, {
+  IconName,
+  IconSize,
+} from '../../../../../../component-library/components/Icons/Icon';
+import { formatAmount } from '../../../../../UI/SimulationDetails/formatAmount';
+import I18n, { strings } from '../../../../../../../locales/i18n';
 
 export function PayWithRow() {
+  const { styles } = useStyles(styleSheet, {});
   const navigation = useNavigation();
   const { payToken } = useTransactionPayToken();
   const { totalFiat } = useTransactionRequiredFiat();
@@ -25,19 +43,66 @@ export function PayWithRow() {
     });
   }, [navigation, totalFiat]);
 
+  if (!payToken) {
+    return (
+      <Box style={styles.spinner}>
+        <AnimatedSpinner size={SpinnerSize.SM} />
+      </Box>
+    );
+  }
+
+  const tokenBalance = formatAmount(
+    I18n.locale,
+    new BigNumber(payToken.balance ?? '0'),
+  );
+
   return (
-    <InfoRow label={strings('confirm.label.pay_with')}>
-      <TouchableOpacity onPress={handleClick}>
-        {!payToken ? (
-          <AnimatedSpinner size={SpinnerSize.SM} />
-        ) : (
-          <TokenPill
-            address={payToken.address}
-            chainId={payToken.chainId}
-            showArrow
-          />
-        )}
-      </TouchableOpacity>
-    </InfoRow>
+    <TouchableOpacity onPress={handleClick}>
+      <Box
+        flexDirection={FlexDirection.Row}
+        justifyContent={JustifyContent.spaceBetween}
+        alignItems={AlignItems.center}
+        style={styles.container}
+      >
+        <Box flexDirection={FlexDirection.Row} gap={12}>
+          <TokenIcon address={payToken.address} chainId={payToken.chainId} />
+          <Box flexDirection={FlexDirection.Column}>
+            <Box
+              flexDirection={FlexDirection.Row}
+              alignItems={AlignItems.center}
+              gap={6}
+            >
+              <Text
+                variant={TextVariant.BodyMDMedium}
+                color={TextColor.Default}
+              >
+                {strings('confirm.label.pay_with')}
+              </Text>
+              <Icon name={IconName.ArrowDown} size={IconSize.Sm} />
+            </Box>
+            <Text
+              variant={TextVariant.BodySMMedium}
+              color={TextColor.Alternative}
+            >
+              {payToken.symbol}
+            </Text>
+          </Box>
+        </Box>
+        <Box
+          flexDirection={FlexDirection.Column}
+          alignItems={AlignItems.flexEnd}
+        >
+          <Text variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
+            {payToken.balanceFiat}
+          </Text>
+          <Text
+            variant={TextVariant.BodySMMedium}
+            color={TextColor.Alternative}
+          >
+            {tokenBalance} {payToken.symbol}
+          </Text>
+        </Box>
+      </Box>
+    </TouchableOpacity>
   );
 }
diff --git a/app/components/Views/confirmations/components/rows/total-row/total-row.test.tsx b/app/components/Views/confirmations/components/rows/total-row/total-row.test.tsx
index 76efb742e8ff..d04e9b25e983 100644
--- a/app/components/Views/confirmations/components/rows/total-row/total-row.test.tsx
+++ b/app/components/Views/confirmations/components/rows/total-row/total-row.test.tsx
@@ -47,7 +47,7 @@ describe('TotalRow', () => {
     useTransactionTotalFiatMock.mockReturnValue({
       value: '123.456',
       formatted: TOTAL_FIAT_MOCK,
-    });
+    } as ReturnType<typeof useTransactionTotalFiat>);
   });
 
   it('renders the total amount', () => {
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/gas-fee-fiat-row.test.tsx b/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/gas-fee-fiat-row.test.tsx
new file mode 100644
index 000000000000..9640165a0a66
--- /dev/null
+++ b/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/gas-fee-fiat-row.test.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
+import { GasFeeFiatRow } from './gas-fee-fiat-row';
+import { merge } from 'lodash';
+import {
+  simpleSendTransactionControllerMock,
+  transactionIdMock,
+} from '../../../../__mocks__/controllers/transaction-controller-mock';
+import { transactionApprovalControllerMock } from '../../../../__mocks__/controllers/approval-controller-mock';
+import { useTransactionTotalFiat } from '../../../../hooks/pay/useTransactionTotalFiat';
+import { View as MockView } from 'react-native';
+
+jest.mock('../../../../hooks/pay/useTransactionTotalFiat');
+
+jest.mock('../../../../../../UI/AnimatedSpinner', () => ({
+  __esModule: true,
+  ...jest.requireActual('../../../../../../UI/AnimatedSpinner'),
+  default: () => <MockView testID="gas-fee-fiat-spinner">{`Spinner`}</MockView>,
+}));
+
+const GAS_FEE_FIAT_MOCK = '$1.23';
+
+function render({ isQuotesLoading }: { isQuotesLoading?: boolean } = {}) {
+  const state = merge(
+    {},
+    simpleSendTransactionControllerMock,
+    transactionApprovalControllerMock,
+    {
+      confirmationMetrics: {
+        isTransactionBridgeQuotesLoadingById: {
+          [transactionIdMock]: isQuotesLoading ?? false,
+        },
+      },
+    },
+  );
+
+  return renderWithProvider(<GasFeeFiatRow />, { state });
+}
+
+describe('GasFeeFiatRow', () => {
+  const useTransactionTotalFiatMock = jest.mocked(useTransactionTotalFiat);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+
+    useTransactionTotalFiatMock.mockReturnValue({
+      totalGasFormatted: GAS_FEE_FIAT_MOCK,
+    } as ReturnType<typeof useTransactionTotalFiat>);
+  });
+
+  it('renders total gas fee in fiat', () => {
+    const { getByText } = render();
+    expect(getByText(GAS_FEE_FIAT_MOCK)).toBeDefined();
+  });
+
+  it('renders spinner if quotes are loading', () => {
+    const { getByTestId } = render({ isQuotesLoading: true });
+    expect(getByTestId('gas-fee-fiat-spinner')).toBeDefined();
+  });
+});
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/gas-fee-fiat-row.tsx b/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/gas-fee-fiat-row.tsx
new file mode 100644
index 000000000000..102f9ec29993
--- /dev/null
+++ b/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/gas-fee-fiat-row.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Text from '../../../../../../../component-library/components/Texts/Text';
+import InfoRow from '../../../UI/info-row';
+import { strings } from '../../../../../../../../locales/i18n';
+import { useTransactionTotalFiat } from '../../../../hooks/pay/useTransactionTotalFiat';
+import { useSelector } from 'react-redux';
+import { selectIsTransactionBridgeQuotesLoadingById } from '../../../../../../../core/redux/slices/confirmationMetrics';
+import { RootState } from '../../../../../../../reducers';
+import { useTransactionMetadataRequest } from '../../../../hooks/transactions/useTransactionMetadataRequest';
+import AnimatedSpinner, {
+  SpinnerSize,
+} from '../../../../../../UI/AnimatedSpinner';
+
+export function GasFeeFiatRow() {
+  const { id: transactionId } = useTransactionMetadataRequest() ?? {};
+  const { totalGasFormatted } = useTransactionTotalFiat();
+
+  const isQuotesLoading = useSelector((state: RootState) =>
+    selectIsTransactionBridgeQuotesLoadingById(state, transactionId ?? ''),
+  );
+
+  return (
+    <InfoRow label={strings('transactions.network_fee')}>
+      {isQuotesLoading && <AnimatedSpinner size={SpinnerSize.SM} />}
+      {!isQuotesLoading && <Text>{totalGasFormatted}</Text>}
+    </InfoRow>
+  );
+}
diff --git a/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/index.ts b/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/index.ts
new file mode 100644
index 000000000000..36e712b93249
--- /dev/null
+++ b/app/components/Views/confirmations/components/rows/transactions/gas-fee-fiat-row/index.ts
@@ -0,0 +1 @@
+export * from './gas-fee-fiat-row';
diff --git a/app/components/Views/confirmations/components/token-amount-native/index.ts b/app/components/Views/confirmations/components/token-amount-native/index.ts
deleted file mode 100644
index 6913b964335c..000000000000
--- a/app/components/Views/confirmations/components/token-amount-native/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './token-amount-native';
diff --git a/app/components/Views/confirmations/components/token-amount-native/token-amount-native.test.tsx b/app/components/Views/confirmations/components/token-amount-native/token-amount-native.test.tsx
deleted file mode 100644
index 92dfb9271144..000000000000
--- a/app/components/Views/confirmations/components/token-amount-native/token-amount-native.test.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { merge } from 'lodash';
-import renderWithProvider from '../../../../../util/test/renderWithProvider';
-import { TokenAmountNative } from './token-amount-native';
-import { simpleSendTransactionControllerMock } from '../../__mocks__/controllers/transaction-controller-mock';
-import { transactionApprovalControllerMock } from '../../__mocks__/controllers/approval-controller-mock';
-import { useTokenAmount } from '../../hooks/useTokenAmount';
-import { otherControllersMock } from '../../__mocks__/controllers/other-controllers-mock';
-
-jest.mock('../../hooks/useTokenAmount');
-
-function render() {
-  return renderWithProvider(<TokenAmountNative />, {
-    state: merge(
-      simpleSendTransactionControllerMock,
-      transactionApprovalControllerMock,
-      otherControllersMock,
-    ),
-  });
-}
-
-const NATIVE_VALUE_MOCK = '123.123456';
-
-describe('TokenAmountNative', () => {
-  const useTokenAmountMock = jest.mocked(useTokenAmount);
-
-  beforeEach(() => {
-    jest.resetAllMocks();
-
-    useTokenAmountMock.mockReturnValue({
-      amountNative: NATIVE_VALUE_MOCK,
-    } as unknown as ReturnType<typeof useTokenAmount>);
-  });
-
-  it('renders native value', () => {
-    const { getByText } = render();
-    expect(getByText(NATIVE_VALUE_MOCK, { exact: false })).toBeDefined();
-  });
-
-  it('renders ticker', () => {
-    const { getByText } = render();
-    expect(getByText('ETH', { exact: false })).toBeDefined();
-  });
-});
diff --git a/app/components/Views/confirmations/components/token-amount-native/token-amount-native.tsx b/app/components/Views/confirmations/components/token-amount-native/token-amount-native.tsx
deleted file mode 100644
index 96a25cf11b21..000000000000
--- a/app/components/Views/confirmations/components/token-amount-native/token-amount-native.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { useTokenAmount } from '../../hooks/useTokenAmount';
-import { useTransactionMetadataOrThrow } from '../../hooks/transactions/useTransactionMetadataRequest';
-import { View } from 'react-native';
-import Text from '../../../../../component-library/components/Texts/Text';
-import { selectTickerByChainId } from '../../../../../selectors/networkController';
-import { RootState } from '../../../../../reducers';
-import { useStyles } from '../../../../hooks/useStyles';
-import styleSheet from './token-amount-native.styles';
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../../../component-library/components/Icons/Icon';
-
-export function TokenAmountNative() {
-  const { styles } = useStyles(styleSheet, {});
-  const { amountNative } = useTokenAmount();
-  const { chainId } = useTransactionMetadataOrThrow();
-
-  const ticker = useSelector((state: RootState) =>
-    selectTickerByChainId(state, chainId),
-  );
-
-  return (
-    <View style={styles.container}>
-      <Text>
-        {amountNative} {ticker}
-      </Text>
-      <Icon name={IconName.SwapVertical} size={IconSize.Md} />
-    </View>
-  );
-}
diff --git a/app/components/Views/confirmations/components/token-icon/index.ts b/app/components/Views/confirmations/components/token-icon/index.ts
new file mode 100644
index 000000000000..0cd366ff0856
--- /dev/null
+++ b/app/components/Views/confirmations/components/token-icon/index.ts
@@ -0,0 +1 @@
+export * from './token-icon';
diff --git a/app/components/Views/confirmations/components/token-icon/token-icon.styles.ts b/app/components/Views/confirmations/components/token-icon/token-icon.styles.ts
new file mode 100644
index 000000000000..afefb1a429cf
--- /dev/null
+++ b/app/components/Views/confirmations/components/token-icon/token-icon.styles.ts
@@ -0,0 +1,21 @@
+import { Theme } from '@metamask/design-tokens';
+import { StyleSheet, ViewStyle } from 'react-native';
+
+const styleSheet = (_params: { theme: Theme }) => {
+  const container: ViewStyle = {
+    marginTop: 4,
+  };
+
+  const tokenIcon: ViewStyle = {
+    width: 34,
+    height: 34,
+    borderRadius: 99,
+  };
+
+  return StyleSheet.create({
+    container,
+    tokenIcon,
+  });
+};
+
+export default styleSheet;
diff --git a/app/components/Views/confirmations/components/token-pill/token-pill.test.tsx b/app/components/Views/confirmations/components/token-icon/token-icon.test.tsx
similarity index 53%
rename from app/components/Views/confirmations/components/token-pill/token-pill.test.tsx
rename to app/components/Views/confirmations/components/token-icon/token-icon.test.tsx
index a4ddb4ee2edc..45ab34341669 100644
--- a/app/components/Views/confirmations/components/token-pill/token-pill.test.tsx
+++ b/app/components/Views/confirmations/components/token-icon/token-icon.test.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TokenPill, TokenPillProps } from './token-pill';
+import { TokenIcon, TokenIconProps } from './token-icon';
 import { Hex } from '@metamask/utils';
 import renderWithProvider from '../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
@@ -17,13 +17,13 @@ const STATE_MOCK = {
   },
 };
 
-function render(props: TokenPillProps) {
-  return renderWithProvider(<TokenPill {...props} />, {
+function render(props: TokenIconProps) {
+  return renderWithProvider(<TokenIcon {...props} />, {
     state: STATE_MOCK,
   });
 }
 
-describe('TokenPill', () => {
+describe('TokenIcon', () => {
   const useTokensWithBalanceMock = jest.mocked(useTokensWithBalance);
 
   beforeEach(() => {
@@ -39,31 +39,13 @@ describe('TokenPill', () => {
     ]);
   });
 
-  it('renders token symbol', () => {
-    const { getByTestId } = render({
-      address: ADDRESS_MOCK,
-      chainId: CHAIN_ID_MOCK,
-    });
-
-    expect(getByTestId('token-pill-symbol')).toHaveTextContent(SYMBOL_MOCK);
-  });
-
-  it('finds token using case-insensitive address', () => {
-    const { getByTestId } = render({
-      address: ADDRESS_MOCK.toUpperCase() as Hex,
-      chainId: CHAIN_ID_MOCK,
-    });
-
-    expect(getByTestId('token-pill-symbol')).toHaveTextContent(SYMBOL_MOCK);
-  });
-
   it('renders token icon', () => {
     const { getByTestId } = render({
       address: ADDRESS_MOCK,
       chainId: CHAIN_ID_MOCK,
     });
 
-    expect(getByTestId('token-pill-icon')).toHaveTextContent('T');
+    expect(getByTestId('token-icon')).toHaveTextContent('T');
   });
 
   it('renders nothing if token not found', () => {
@@ -72,16 +54,6 @@ describe('TokenPill', () => {
       chainId: CHAIN_ID_MOCK,
     });
 
-    expect(queryByTestId('token-pill-symbol')).toBeNull();
-  });
-
-  it('renders arrow if showArrow is true', () => {
-    const { getByTestId } = render({
-      address: ADDRESS_MOCK,
-      chainId: CHAIN_ID_MOCK,
-      showArrow: true,
-    });
-
-    expect(getByTestId('token-pill-arrow')).toBeDefined();
+    expect(queryByTestId('token-icon')).toBeNull();
   });
 });
diff --git a/app/components/Views/confirmations/components/token-icon/token-icon.tsx b/app/components/Views/confirmations/components/token-icon/token-icon.tsx
new file mode 100644
index 000000000000..a3f0a18bf7cb
--- /dev/null
+++ b/app/components/Views/confirmations/components/token-icon/token-icon.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { Hex } from '@metamask/utils';
+import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
+import SwapsTokenIcon from '../../../../UI/Swaps/components/TokenIcon';
+import styleSheet from './token-icon.styles';
+import { useStyles } from '../../../../hooks/useStyles';
+import BadgeWrapper, {
+  BadgePosition,
+} from '../../../../../component-library/components/Badges/BadgeWrapper';
+import Badge, {
+  BadgeVariant,
+} from '../../../../../component-library/components/Badges/Badge';
+import { getNetworkImageSource } from '../../../../../util/networks';
+
+export interface TokenIconProps {
+  address: Hex;
+  chainId: Hex;
+}
+
+export const TokenIcon: React.FC<TokenIconProps> = ({ address, chainId }) => {
+  const { styles } = useStyles(styleSheet, {});
+  const tokens = useTokensWithBalance({ chainIds: [chainId] });
+
+  const token = tokens.find(
+    (t) =>
+      t.address.toLowerCase() === address.toLowerCase() &&
+      t.chainId === chainId,
+  );
+
+  if (!token) {
+    return null;
+  }
+
+  const networkImageSource = getNetworkImageSource({
+    chainId,
+  });
+
+  return (
+    <BadgeWrapper
+      style={styles.container}
+      badgePosition={BadgePosition.BottomRight}
+      badgeElement={
+        <Badge
+          variant={BadgeVariant.Network}
+          imageSource={networkImageSource}
+        />
+      }
+    >
+      <SwapsTokenIcon
+        testID="token-icon"
+        icon={token?.image}
+        symbol={token?.symbol}
+        style={styles.tokenIcon}
+      />
+    </BadgeWrapper>
+  );
+};
diff --git a/app/components/Views/confirmations/components/token-pill/index.ts b/app/components/Views/confirmations/components/token-pill/index.ts
deleted file mode 100644
index 35405f985651..000000000000
--- a/app/components/Views/confirmations/components/token-pill/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './token-pill';
diff --git a/app/components/Views/confirmations/components/token-pill/token-pill.styles.ts b/app/components/Views/confirmations/components/token-pill/token-pill.styles.ts
deleted file mode 100644
index bb8722916f3b..000000000000
--- a/app/components/Views/confirmations/components/token-pill/token-pill.styles.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Theme } from '@metamask/design-tokens';
-import { StyleSheet, ViewStyle } from 'react-native';
-
-const styleSheet = (params: { theme: Theme }) => {
-  const { theme } = params;
-  const { colors } = theme;
-
-  const baseStyle: ViewStyle = {
-    backgroundColor: colors.background.alternative,
-    borderRadius: 99,
-    paddingVertical: 4,
-    paddingInline: 8,
-    gap: 5,
-  };
-
-  const tokenIconStyle: ViewStyle = {
-    width: 16,
-    height: 16,
-    borderRadius: 8,
-  };
-
-  const networkIconStyle: ViewStyle = {
-    paddingTop: 4,
-  };
-
-  return StyleSheet.create({
-    base: baseStyle,
-    tokenIcon: tokenIconStyle,
-    networkIcon: networkIconStyle,
-  });
-};
-
-export default styleSheet;
diff --git a/app/components/Views/confirmations/components/token-pill/token-pill.tsx b/app/components/Views/confirmations/components/token-pill/token-pill.tsx
deleted file mode 100644
index 67a577734d24..000000000000
--- a/app/components/Views/confirmations/components/token-pill/token-pill.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from 'react';
-import { Hex } from '@metamask/utils';
-import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
-import TokenIcon from '../../../../UI/Swaps/components/TokenIcon';
-import { Box } from '../../../../UI/Box/Box';
-import { AlignItems, FlexDirection } from '../../../../UI/Box/box.types';
-import Text from '../../../../../component-library/components/Texts/Text';
-import styleSheet from './token-pill.styles';
-import { useStyles } from '../../../../hooks/useStyles';
-import BadgeWrapper, {
-  BadgePosition,
-} from '../../../../../component-library/components/Badges/BadgeWrapper';
-import Badge, {
-  BadgeVariant,
-} from '../../../../../component-library/components/Badges/Badge';
-import { getNetworkImageSource } from '../../../../../util/networks';
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../../../component-library/components/Icons/Icon';
-
-export interface TokenPillProps {
-  address: Hex;
-  chainId: Hex;
-  showArrow?: boolean;
-}
-
-export const TokenPill: React.FC<TokenPillProps> = ({
-  address,
-  chainId,
-  showArrow,
-}) => {
-  const { styles } = useStyles(styleSheet, {});
-  const tokens = useTokensWithBalance({ chainIds: [chainId] });
-
-  const token = tokens.find(
-    (t) =>
-      t.address.toLowerCase() === address.toLowerCase() &&
-      t.chainId === chainId,
-  );
-
-  if (!token) {
-    return null;
-  }
-
-  const networkImageSource = getNetworkImageSource({
-    chainId,
-  });
-
-  return (
-    <Box
-      flexDirection={FlexDirection.Row}
-      alignItems={AlignItems.center}
-      style={styles.base}
-    >
-      <BadgeWrapper
-        style={styles.networkIcon}
-        badgePosition={BadgePosition.BottomRight}
-        badgeElement={
-          <Badge
-            variant={BadgeVariant.Network}
-            imageSource={networkImageSource}
-          />
-        }
-      >
-        <TokenIcon
-          testID="token-pill-icon"
-          icon={token?.image}
-          symbol={token?.symbol}
-          style={styles.tokenIcon}
-        />
-      </BadgeWrapper>
-      <Text testID="token-pill-symbol">{token?.symbol}</Text>
-      {showArrow && (
-        <Icon
-          testID="token-pill-arrow"
-          name={IconName.ArrowDown}
-          size={IconSize.Xs}
-        />
-      )}
-    </Box>
-  );
-};
diff --git a/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.test.tsx b/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.test.tsx
index adccdcb8d833..8ad623fa6d4a 100644
--- a/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.test.tsx
+++ b/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.test.tsx
@@ -11,6 +11,7 @@ import { useGasFeeEstimates } from '../../../../hooks/gas/useGasFeeEstimates';
 import { ConfirmationRowComponentIDs } from '../../../../../../../../e2e/selectors/Confirmation/ConfirmationView.selectors';
 import { useTransactionPayToken } from '../../../../hooks/pay/useTransactionPayToken';
 import { usePerpsDepositView } from '../../hooks/usePerpsDepositView';
+import { useTokenAsset } from '../../../../hooks/useTokenAsset';
 
 jest.mock('../../../../hooks/ui/useNavbar');
 jest.mock('../../../../../../UI/Bridge/hooks/useTokensWithBalance');
@@ -18,6 +19,7 @@ jest.mock('../../../../hooks/gas/useGasFeeEstimates');
 jest.mock('../../../../hooks/pay/useAutomaticTransactionPayToken');
 jest.mock('../../../../hooks/pay/useTransactionPayToken');
 jest.mock('../../hooks/usePerpsDepositView');
+jest.mock('../../../../hooks/useTokenAsset');
 
 jest.mock('@react-navigation/native', () => ({
   ...jest.requireActual('@react-navigation/native'),
@@ -37,6 +39,7 @@ describe('PerpsDeposit', () => {
   const useGasFeeEstimatesMock = jest.mocked(useGasFeeEstimates);
   const useTransactionPayTokenMock = jest.mocked(useTransactionPayToken);
   const usePerpsDepositViewMock = jest.mocked(usePerpsDepositView);
+  const useTokenAssetMock = jest.mocked(useTokenAsset);
 
   beforeEach(() => {
     jest.resetAllMocks();
@@ -48,12 +51,13 @@ describe('PerpsDeposit', () => {
     });
 
     useTransactionPayTokenMock.mockReturnValue({
-      balanceFiat: '0',
-      balanceHuman: '0',
-      decimals: 18,
       payToken: {
         address: '0x123',
         chainId: '0x1',
+        balance: '0',
+        balanceFiat: '0',
+        decimals: 18,
+        symbol: 'TST',
       },
       setPayToken: noop,
     });
@@ -61,6 +65,12 @@ describe('PerpsDeposit', () => {
     usePerpsDepositViewMock.mockReturnValue({
       isFullView: false,
     });
+
+    useTokenAssetMock.mockReturnValue({
+      asset: {
+        address: '0xabc',
+      },
+    } as ReturnType<typeof useTokenAsset>);
   });
 
   it('renders pay token', () => {
diff --git a/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.tsx b/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.tsx
index 8082bd173a5b..483355cf158e 100644
--- a/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.tsx
+++ b/app/components/Views/confirmations/external/perps-temp/components/deposit/deposit.tsx
@@ -1,13 +1,11 @@
 import React, { useState } from 'react';
-import GasFeesDetailsRow from '../../../../components/rows/transactions/gas-fee-details-row/gas-fee-details-row';
 import { PayWithRow } from '../../../../components/rows/pay-with-row';
 import useNavbar from '../../../../hooks/ui/useNavbar';
 import { EditAmount } from '../../../../components/edit-amount';
 import { strings } from '../../../../../../../../locales/i18n';
-import { TokenAmountNative } from '../../../../components/token-amount-native';
+import { PayTokenAmount } from '../../../../components/pay-token-amount';
 import { TotalRow } from '../../../../components/rows/total-row';
 import InfoSection from '../../../../components/UI/info-row/info-section/info-section';
-import { PayTokenBalance } from '../../../../components/pay-token-balance';
 import { BridgeTimeRow } from '../../../../components/rows/bridge-time-row';
 import { AlertMessage } from '../../../../components/alert-message';
 import { RowAlertKey } from '../../../../components/UI/info-row/alert-row/constants';
@@ -16,6 +14,7 @@ import { Box } from '../../../../../../UI/Box/Box';
 import InfoRowDivider from '../../../../components/UI/info-row-divider';
 import { InfoRowDividerVariant } from '../../../../components/UI/info-row-divider/info-row-divider.styles';
 import { usePerpsDepositView } from '../../hooks/usePerpsDepositView';
+import { GasFeeFiatRow } from '../../../../components/rows/transactions/gas-fee-fiat-row';
 
 const AMOUNT_PREFIX = '$';
 
@@ -45,9 +44,8 @@ export function PerpsDeposit() {
         onKeyboardHide={handleKeyboardHide}
       >
         <Box gap={16}>
-          {isKeyboardVisible && <PayTokenBalance />}
           <AlertMessage field={RowAlertKey.Amount} />
-          <TokenAmountNative />
+          <PayTokenAmount />
         </Box>
         {!isKeyboardVisible && (
           <AlertBanner field={RowAlertKey.PayWith} inline />
@@ -58,7 +56,7 @@ export function PerpsDeposit() {
         </InfoSection>
         {isFullView && (
           <InfoSection>
-            <GasFeesDetailsRow disableUpdate hideSpeed fiatOnly noSection />
+            <GasFeeFiatRow />
             <InfoRowDivider variant={InfoRowDividerVariant.Large} />
             <TotalRow />
           </InfoSection>
diff --git a/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.test.ts b/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.test.ts
index 62b488bb7a90..4fd985d97620 100644
--- a/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.test.ts
+++ b/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.test.ts
@@ -31,7 +31,7 @@ describe('useInsufficientPayTokenBalance', () => {
     } as ReturnType<typeof useTransactionPayTokenAmounts>);
 
     useTransactionPayTokenMock.mockReturnValue({
-      balanceHuman: '123.455',
+      payToken: { balance: '123.455' },
     } as ReturnType<typeof useTransactionPayToken>);
 
     const { result } = runHook();
@@ -53,7 +53,7 @@ describe('useInsufficientPayTokenBalance', () => {
     } as ReturnType<typeof useTransactionPayTokenAmounts>);
 
     useTransactionPayTokenMock.mockReturnValue({
-      balanceHuman: '123.456',
+      payToken: { balance: '123.456' },
     } as ReturnType<typeof useTransactionPayToken>);
 
     const { result } = runHook();
diff --git a/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.ts b/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.ts
index 62d0716a32fb..8d4caef33e07 100644
--- a/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.ts
+++ b/app/components/Views/confirmations/hooks/alerts/useInsufficientPayTokenBalanceAlert.ts
@@ -9,10 +9,11 @@ import { strings } from '../../../../../../locales/i18n';
 
 export function useInsufficientPayTokenBalanceAlert(): Alert[] {
   const { totalHuman } = useTransactionPayTokenAmounts();
-  const { balanceHuman } = useTransactionPayToken();
+  const { payToken } = useTransactionPayToken();
+  const { balance } = payToken ?? {};
 
   const isInsufficient =
-    new BigNumber(balanceHuman ?? '0').isLessThan(
+    new BigNumber(balance ?? '0').isLessThan(
       new BigNumber(totalHuman ?? '0'),
     ) && process.env.MM_CONFIRMATION_INTENTS === 'true';
 
diff --git a/app/components/Views/confirmations/hooks/gas/useFeeCalculations.test.ts b/app/components/Views/confirmations/hooks/gas/useFeeCalculations.test.ts
index 81b2646a1dbe..dbe7a25de962 100644
--- a/app/components/Views/confirmations/hooks/gas/useFeeCalculations.test.ts
+++ b/app/components/Views/confirmations/hooks/gas/useFeeCalculations.test.ts
@@ -48,6 +48,7 @@ describe('useFeeCalculations', () => {
 
     expect(result.current.estimatedFeeFiat).toBe('$0.34');
     expect(result.current.estimatedFeeNative).toBe('0.0001 ETH');
+    expect(result.current.estimatedFeeFiatPrecise).toBe('0.338');
     expect(result.current.preciseNativeFeeInHex).toBe('0x5572e9c22d00');
     expect(result.current.calculateGasEstimate).toBeDefined();
   });
@@ -98,6 +99,7 @@ describe('useFeeCalculations', () => {
 
     expect(result.current.estimatedFeeFiat).toBe('< $0.01');
     expect(result.current.estimatedFeeNative).toBe('0.0001 ETH');
+    expect(result.current.estimatedFeeFiatPrecise).toBe('0.008');
     expect(result.current.preciseNativeFeeInHex).toBe('0x5572e9c22d00');
     expect(result.current.calculateGasEstimate).toBeDefined();
   });
@@ -124,6 +126,7 @@ describe('useFeeCalculations', () => {
 
     expect(result.current.estimatedFeeFiat).toBe(null);
     expect(result.current.estimatedFeeNative).toBe(null);
+    expect(result.current.estimatedFeeFiatPrecise).toBe(null);
     expect(result.current.preciseNativeFeeInHex).toBe(null);
     expect(result.current.calculateGasEstimate).toBeDefined();
   });
@@ -152,6 +155,7 @@ describe('useFeeCalculations', () => {
     // The original estimatedFee is 0x5572e9c22d00, so the sum is 0x5572e9c23d00
     expect(result.current.estimatedFeeFiat).toBe('$0.34');
     expect(result.current.estimatedFeeNative).toBe('0.0001 ETH');
+    expect(result.current.estimatedFeeFiatPrecise).toBe('0.338');
     expect(result.current.preciseNativeFeeInHex).toBe('0x5572e9c23d00');
     expect(result.current.calculateGasEstimate).toBeDefined();
   });
diff --git a/app/components/Views/confirmations/hooks/gas/useFeeCalculations.ts b/app/components/Views/confirmations/hooks/gas/useFeeCalculations.ts
index a52fe2300694..baba280e79ce 100644
--- a/app/components/Views/confirmations/hooks/gas/useFeeCalculations.ts
+++ b/app/components/Views/confirmations/hooks/gas/useFeeCalculations.ts
@@ -21,6 +21,7 @@ export const useFeeCalculations = (
   transactionMeta: TransactionMeta,
 ): {
   estimatedFeeFiat: string | null;
+  estimatedFeeFiatPrecise: string | null;
   estimatedFeeNative: string | null;
   preciseNativeFeeInHex: string | null;
   calculateGasEstimate: ({
@@ -38,6 +39,7 @@ export const useFeeCalculations = (
   }) => {
     currentCurrencyFee: string | null;
     nativeCurrencyFee: string | null;
+    preciseCurrentCurrencyFee: string | null;
     preciseNativeCurrencyFee: string | null;
     preciseNativeFeeInHex: string | null;
   };
@@ -153,6 +155,7 @@ export const useFeeCalculations = (
 
   return {
     estimatedFeeFiat: estimatedFees.currentCurrencyFee,
+    estimatedFeeFiatPrecise: estimatedFees.preciseCurrentCurrencyFee,
     estimatedFeeNative: estimatedFees.nativeCurrencyFee,
     preciseNativeFeeInHex: estimatedFees.preciseNativeFeeInHex,
     calculateGasEstimate: calculateGasEstimateCallback,
diff --git a/app/components/Views/confirmations/hooks/gas/useGasFeeToken.test.ts b/app/components/Views/confirmations/hooks/gas/useGasFeeToken.test.ts
index 224a6ed8fa9e..a2364da387d7 100644
--- a/app/components/Views/confirmations/hooks/gas/useGasFeeToken.test.ts
+++ b/app/components/Views/confirmations/hooks/gas/useGasFeeToken.test.ts
@@ -91,6 +91,7 @@ describe('useGasFeeToken', () => {
       preciseNativeFeeInHex: '0x1',
       estimatedFeeFiat: null,
       estimatedFeeNative: null,
+      estimatedFeeFiatPrecise: null,
       maxFeeFiat: null,
       maxFeeNative: null,
       maxFeeNativePrecise: null,
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionBridgeQuotes.test.ts b/app/components/Views/confirmations/hooks/pay/useTransactionBridgeQuotes.test.ts
index 9f0724da1250..d21ebdd1b7d9 100644
--- a/app/components/Views/confirmations/hooks/pay/useTransactionBridgeQuotes.test.ts
+++ b/app/components/Views/confirmations/hooks/pay/useTransactionBridgeQuotes.test.ts
@@ -62,12 +62,13 @@ describe('useTransactionBridgeQuotes', () => {
     } as unknown as TransactionMeta);
 
     useTransactionPayTokenMock.mockReturnValue({
-      balanceFiat: '123.456',
-      balanceHuman: '123.456',
-      decimals: 4,
       payToken: {
         address: TOKEN_ADDRESS_SOURCE_MOCK,
+        balance: '123.456',
+        balanceFiat: '123.456',
         chainId: CHAIN_ID_SOURCE_MOCK,
+        decimals: 4,
+        symbol: 'TST',
       },
       setPayToken: jest.fn(),
     });
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.test.ts b/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.test.ts
index cd28a509eb1a..de511d29bfe9 100644
--- a/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.test.ts
+++ b/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.test.ts
@@ -30,6 +30,14 @@ const PAY_TOKEN_MOCK: ConfirmationMetricsReducer.TransactionPayToken = {
   chainId: '0x1',
 };
 
+const BRIDGE_TOKEN_MOCK = {
+  address: tokenAddress1Mock,
+  balance: '123.456',
+  decimals: 4,
+  chainId: ChainId.mainnet,
+  tokenFiatAmount: 456.123,
+} as unknown as BridgeToken;
+
 function runHook({
   payToken,
 }: { payToken?: ConfirmationMetricsReducer.TransactionPayToken } = {}) {
@@ -54,16 +62,7 @@ describe('useTransactionPayToken', () => {
 
   beforeEach(() => {
     jest.resetAllMocks();
-
-    useTokensWithBalanceMock.mockReturnValue([
-      {
-        address: tokenAddress1Mock,
-        balance: '123.456',
-        decimals: 4,
-        chainId: ChainId.mainnet,
-        tokenFiatAmount: 456.123,
-      },
-    ] as unknown as BridgeToken[]);
+    useTokensWithBalanceMock.mockReturnValue([BRIDGE_TOKEN_MOCK]);
   });
 
   it('returns undefined if no state', () => {
@@ -71,36 +70,12 @@ describe('useTransactionPayToken', () => {
     expect(result.current.payToken).toBeUndefined();
   });
 
-  it('returns token from state', () => {
-    const { result } = runHook({
-      payToken: PAY_TOKEN_MOCK,
-    });
-
-    expect(result.current.payToken).toEqual(PAY_TOKEN_MOCK);
-  });
-
-  it('returns decimals', () => {
-    const { result } = runHook({
-      payToken: PAY_TOKEN_MOCK,
-    });
-
-    expect(result.current.decimals).toEqual(4);
-  });
-
-  it('returns balance', () => {
-    const { result } = runHook({
-      payToken: PAY_TOKEN_MOCK,
-    });
-
-    expect(result.current.balanceHuman).toEqual('123.456');
-  });
-
-  it('returns fiat balance', () => {
+  it('returns bridge token matching state', () => {
     const { result } = runHook({
       payToken: PAY_TOKEN_MOCK,
     });
 
-    expect(result.current.balanceFiat).toEqual('456.123');
+    expect(result.current.payToken).toStrictEqual(BRIDGE_TOKEN_MOCK);
   });
 
   it('sets token in state', () => {
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.ts b/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.ts
index 916825af603b..f4b1e6ceed61 100644
--- a/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.ts
+++ b/app/components/Views/confirmations/hooks/pay/useTransactionPayToken.ts
@@ -9,6 +9,7 @@ import { EMPTY_ADDRESS } from '../../../../../constants/transaction';
 import { useCallback } from 'react';
 import { RootState } from '../../../../../reducers';
 import { useTokensWithBalance } from '../../../../UI/Bridge/hooks/useTokensWithBalance';
+import { Hex } from '@metamask/utils';
 
 export function useTransactionPayToken() {
   const dispatch = useDispatch();
@@ -49,16 +50,13 @@ export function useTransactionPayToken() {
     };
   }
 
-  const decimals = token.decimals;
-  const balanceHuman = token.balance;
-  const balanceFiat = token.tokenFiatAmount?.toString();
-
-  const payToken = selectedPayToken;
+  const payToken = {
+    ...token,
+    address: token.address as Hex,
+    chainId: token.chainId as Hex,
+  };
 
   return {
-    balanceFiat,
-    balanceHuman,
-    decimals,
     payToken,
     setPayToken,
   };
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.test.ts b/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.test.ts
index 3555c4501593..312a75cbde56 100644
--- a/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.test.ts
+++ b/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.test.ts
@@ -49,12 +49,13 @@ describe('useTransactionPayTokenAmounts', () => {
     useTokenFiatRatesMock.mockReturnValue([4]);
 
     useTransactionPayTokenMock.mockReturnValue({
-      balanceFiat: '123.456',
-      balanceHuman: '123.456',
-      decimals: 4,
       payToken: {
         address: tokenAddress1Mock,
+        balance: '123.456',
+        balanceFiat: '123.456',
         chainId: CHAIN_ID_MOCK,
+        decimals: 4,
+        symbol: 'TST',
       },
       setPayToken: jest.fn(),
     });
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.ts b/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.ts
index 73de607afa9e..564c2520fd29 100644
--- a/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.ts
+++ b/app/components/Views/confirmations/hooks/pay/useTransactionPayTokenAmounts.ts
@@ -12,8 +12,8 @@ const log = createProjectLogger('transaction-pay');
  * Calculate the amount of the selected pay token, that is needed for each token required by the transaction.
  */
 export function useTransactionPayTokenAmounts() {
-  const { decimals, payToken } = useTransactionPayToken();
-  const { address, chainId } = payToken ?? {};
+  const { payToken } = useTransactionPayToken();
+  const { address, chainId, decimals } = payToken ?? {};
 
   const fiatRequests = useMemo(() => {
     if (!address || !chainId) {
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.test.ts b/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.test.ts
index 8a0ea594fffc..84072cb88287 100644
--- a/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.test.ts
+++ b/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.test.ts
@@ -10,10 +10,12 @@ import { otherControllersMock } from '../../__mocks__/controllers/other-controll
 import { useTransactionMaxGasCost } from '../gas/useTransactionMaxGasCost';
 import { useTransactionRequiredFiat } from './useTransactionRequiredFiat';
 import { TransactionBridgeQuote } from '../../utils/bridge';
+import { useFeeCalculations } from '../gas/useFeeCalculations';
 
 jest.mock('../gas/useTransactionMaxGasCost');
 jest.mock('./useTransactionRequiredFiat');
 jest.mock('./useTransactionRequiredTokens');
+jest.mock('../gas/useFeeCalculations');
 
 const ADDRESS_MOCK = '0x1234567890abcdef1234567890abcdef12345678';
 const ADDRESS_2_MOCK = '0xabcdef1234567890abcdef1234567890abcdef12';
@@ -38,6 +40,7 @@ function runHook({ quotes }: { quotes?: TransactionBridgeQuote[] } = {}) {
 
 describe('useTransactionTotalFiat', () => {
   const useTransactionMaxGasCostMock = jest.mocked(useTransactionMaxGasCost);
+  const useFeeCalculationsMock = jest.mocked(useFeeCalculations);
 
   const useTransactionRequiredFiatMock = jest.mocked(
     useTransactionRequiredFiat,
@@ -52,6 +55,10 @@ describe('useTransactionTotalFiat', () => {
       values: [],
       totalFiat: 0,
     });
+
+    useFeeCalculationsMock.mockReturnValue({
+      estimatedFeeFiatPrecise: '7.89',
+    } as ReturnType<typeof useFeeCalculations>);
   });
 
   it('includes quotes cost', () => {
@@ -82,10 +89,12 @@ describe('useTransactionTotalFiat', () => {
       ] as TransactionBridgeQuote[],
     });
 
-    expect(result.current).toStrictEqual({
-      value: '240.69',
-      formatted: '$240.69',
-    });
+    expect(result.current).toStrictEqual(
+      expect.objectContaining({
+        value: '240.69',
+        formatted: '$240.69',
+      }),
+    );
   });
 
   it('includes balance cost', () => {
@@ -104,10 +113,12 @@ describe('useTransactionTotalFiat', () => {
 
     const { result } = runHook();
 
-    expect(result.current).toStrictEqual({
-      value: '35.79',
-      formatted: '$35.79',
-    });
+    expect(result.current).toStrictEqual(
+      expect.objectContaining({
+        value: '35.79',
+        formatted: '$35.79',
+      }),
+    );
   });
 
   it('ignores balance cost if matching quote', () => {
@@ -145,9 +156,30 @@ describe('useTransactionTotalFiat', () => {
       ] as TransactionBridgeQuote[],
     });
 
-    expect(result.current).toStrictEqual({
-      value: '140',
-      formatted: '$140',
+    expect(result.current).toStrictEqual(
+      expect.objectContaining({
+        value: '140',
+        formatted: '$140',
+      }),
+    );
+  });
+
+  it('returns total gas cost', () => {
+    const { result } = runHook({
+      quotes: [
+        {
+          totalMaxNetworkFee: {
+            valueInCurrency: '1.23',
+          },
+        },
+        {
+          totalMaxNetworkFee: {
+            valueInCurrency: '4.56',
+          },
+        },
+      ] as TransactionBridgeQuote[],
     });
+
+    expect(result.current.totalGasFormatted).toBe('$13.68');
   });
 });
diff --git a/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.ts b/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.ts
index 772352b6d644..963d185d92ee 100644
--- a/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.ts
+++ b/app/components/Views/confirmations/hooks/pay/useTransactionTotalFiat.ts
@@ -8,13 +8,16 @@ import { createProjectLogger } from '@metamask/utils';
 import { useEffect } from 'react';
 import useFiatFormatter from '../../../../UI/SimulationDetails/FiatDisplay/useFiatFormatter';
 import { TransactionBridgeQuote } from '../../utils/bridge';
+import { useFeeCalculations } from '../gas/useFeeCalculations';
 
 const log = createProjectLogger('transaction-pay');
 
 export function useTransactionTotalFiat() {
   const fiatFormatter = useFiatFormatter();
   const { values: requiredFiat } = useTransactionRequiredFiat();
-  const { id: transactionId } = useTransactionMetadataOrThrow();
+  const transactionMeta = useTransactionMetadataOrThrow();
+  const { id: transactionId } = transactionMeta;
+  const { estimatedFeeFiatPrecise } = useFeeCalculations(transactionMeta);
 
   const quotes = useSelector((state: RootState) =>
     selectTransactionBridgeQuotesById(state, transactionId),
@@ -39,10 +42,23 @@ export function useTransactionTotalFiat() {
     new BigNumber(0),
   );
 
+  const quoteGasCost =
+    quotes?.reduce(
+      (acc, quote) =>
+        acc.plus(new BigNumber(quote.totalMaxNetworkFee.valueInCurrency ?? 0)),
+      new BigNumber(0),
+    ) ?? new BigNumber(0);
+
   const total = quotesCost.plus(balanceCost);
   const value = total.toString(10);
   const formatted = fiatFormatter(total);
 
+  const totalGas = quoteGasCost.plus(
+    new BigNumber(estimatedFeeFiatPrecise ?? 0),
+  );
+
+  const totalGasFormatted = fiatFormatter(totalGas);
+
   useEffect(() => {
     log('Total fiat', {
       balanceCost: balanceCost.toString(10),
@@ -55,13 +71,14 @@ export function useTransactionTotalFiat() {
   return {
     value,
     formatted,
+    totalGasFormatted,
   };
 }
 
 function getQuoteCostFiat(quote: TransactionBridgeQuote): BigNumber {
-  const gasCost = new BigNumber(quote.totalMaxNetworkFee.valueInCurrency ?? 0);
-  const cost = new BigNumber(quote.cost.valueInCurrency ?? 0);
-  const amount = new BigNumber(quote.adjustedReturn.valueInCurrency ?? 0);
+  const gasCost = new BigNumber(quote.totalMaxNetworkFee?.valueInCurrency ?? 0);
+  const cost = new BigNumber(quote.cost?.valueInCurrency ?? 0);
+  const amount = new BigNumber(quote.adjustedReturn?.valueInCurrency ?? 0);
 
   return amount.plus(gasCost).plus(cost);
 }
diff --git a/app/components/Views/confirmations/utils/gas.ts b/app/components/Views/confirmations/utils/gas.ts
index ce5ff7a50110..4fbb2a8f2f6a 100644
--- a/app/components/Views/confirmations/utils/gas.ts
+++ b/app/components/Views/confirmations/utils/gas.ts
@@ -34,6 +34,7 @@ export function getFeesFromHex({
     return {
       currentCurrencyFee: null,
       nativeCurrencyFee: null,
+      preciseCurrentCurrencyFee: null,
       preciseNativeCurrencyFee: null,
       preciseNativeFeeInHex: null,
     };
@@ -82,7 +83,7 @@ export function getFeesFromHex({
 
   // This is used to check if the fee is less than $0.01 - more precise than decimalCurrentCurrencyFee
   // Because decimalCurrentCurrencyFee is rounded to 2 decimal places
-  const preciseCurrentCurrencyFee = Number(
+  const preciseCurrentCurrencyFeeNum = Number(
     getValueFromWeiHex({
       value: hexFee,
       conversionRate: nativeConversionRateInBN,
@@ -94,7 +95,7 @@ export function getFeesFromHex({
   );
 
   let currentCurrencyFee;
-  if (preciseCurrentCurrencyFee < 0.01) {
+  if (preciseCurrentCurrencyFeeNum < 0.01) {
     currentCurrencyFee = `< ${fiatFormatter(new BigNumber(0.01))}`;
   } else {
     currentCurrencyFee = fiatFormatter(
@@ -106,9 +107,14 @@ export function getFeesFromHex({
     currentCurrencyFee = null;
   }
 
+  const preciseCurrentCurrencyFee = currentCurrencyFee
+    ? new BigNumber(preciseCurrentCurrencyFeeNum).toString(10)
+    : null;
+
   return {
     currentCurrencyFee,
     nativeCurrencyFee,
+    preciseCurrentCurrencyFee,
     preciseNativeCurrencyFee,
     preciseNativeFeeInHex: add0x(hexFee),
   };
@@ -134,6 +140,7 @@ export function calculateGasEstimate({
   getFeesFromHexFn: (hexFee: string) => {
     currentCurrencyFee: string | null;
     nativeCurrencyFee: string | null;
+    preciseCurrentCurrencyFee: string | null;
     preciseNativeCurrencyFee: string | null;
     preciseNativeFeeInHex: string | null;
   };
diff --git a/app/store/sagas/xmlHttpRequestOverride.test.ts b/app/store/sagas/xmlHttpRequestOverride.test.ts
index fa2b4ed5ccb0..d3865636dcc2 100644
--- a/app/store/sagas/xmlHttpRequestOverride.test.ts
+++ b/app/store/sagas/xmlHttpRequestOverride.test.ts
@@ -83,3 +83,102 @@ describe('restoreXMLHttpRequest', () => {
     }),
   );
 });
+
+describe('handleBlockedRequest behavior', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('calls onerror handler when blocking a request', (done) => {
+    const mockOnerror = jest.fn();
+    overrideXMLHttpRequest();
+    const req = new global.XMLHttpRequest();
+    req.onerror = mockOnerror;
+
+    req.open('POST', 'https://example.com/gas-api');
+    req.send();
+
+    setImmediate(() => {
+      expect(mockOnerror).toHaveBeenCalledTimes(1);
+      expect(mockOnerror).toHaveBeenCalledWith(expect.any(Error));
+      done();
+    });
+  });
+
+  it('calls abort method when blocking a request', (done) => {
+    const mockAbort = jest.fn();
+    overrideXMLHttpRequest();
+    const req = new global.XMLHttpRequest();
+    req.abort = mockAbort;
+
+    req.open('POST', 'https://example.com/gas-api');
+    req.send();
+
+    setImmediate(() => {
+      expect(mockAbort).toHaveBeenCalledTimes(1);
+      done();
+    });
+  });
+
+  it('calls onloadend handler when blocking a request', (done) => {
+    const mockOnloadend = jest.fn();
+    overrideXMLHttpRequest();
+    const req = new global.XMLHttpRequest();
+    req.onloadend = mockOnloadend;
+
+    req.open('POST', 'https://example.com/gas-api');
+    req.send();
+
+    setImmediate(() => {
+      expect(mockOnloadend).toHaveBeenCalledTimes(1);
+      done();
+    });
+  });
+
+  it('handles missing handlers gracefully when blocking a request', (done) => {
+    const logSpy = jest.spyOn(console, 'error');
+    overrideXMLHttpRequest();
+    const req = new global.XMLHttpRequest();
+    // Explicitly set handlers to null
+    req.onerror = null;
+    req.onloadend = null;
+    req.abort = () => {
+      /* no-op */
+    };
+
+    req.open('POST', 'https://example.com/gas-api');
+    req.send();
+
+    setImmediate(() => {
+      // Should still log the error even without handlers
+      expect(logSpy).toHaveBeenCalledTimes(1);
+      expect(logSpy.mock.calls[0][0].message).toMatch(
+        'Disallowed URL: https://example.com/gas-api',
+      );
+      done();
+    });
+  });
+
+  it('continues blocking when handler throws an error', (done) => {
+    const logSpy = jest.spyOn(console, 'error');
+    const throwingHandler = jest.fn(() => {
+      throw new Error('Handler failed');
+    });
+    overrideXMLHttpRequest();
+    const req = new global.XMLHttpRequest();
+    req.onerror = throwingHandler;
+
+    req.open('POST', 'https://example.com/gas-api');
+    req.send();
+
+    setImmediate(() => {
+      expect(throwingHandler).toHaveBeenCalledTimes(1);
+      // Should still log the original blocking error despite handler failure
+      expect(logSpy).toHaveBeenCalledTimes(1);
+      expect(logSpy.mock.calls[0][0].message).toMatch(
+        'Disallowed URL: https://example.com/gas-api',
+      );
+      done();
+    });
+  });
+});
diff --git a/app/store/sagas/xmlHttpRequestOverride.ts b/app/store/sagas/xmlHttpRequestOverride.ts
index 9af6cf6e4808..8853a452ea4d 100644
--- a/app/store/sagas/xmlHttpRequestOverride.ts
+++ b/app/store/sagas/xmlHttpRequestOverride.ts
@@ -41,12 +41,43 @@ export function overrideXMLHttpRequest() {
       url.includes(blockedUrl),
     );
 
-  const handleError = () =>
-    Promise.reject(new Error(`Disallowed URL: ${currentUrl}`)).catch(
-      (error) => {
-        console.error(error);
-      },
-    );
+  const handleBlockedRequest = (xhr: XMLHttpRequest) => {
+    const error = new Error(`Disallowed URL: ${currentUrl}`);
+    // Keep existing logging behavior (relied upon by tests)
+    console.error(error);
+
+    // Proactively notify consumers so promises (e.g., fetch) do not hang.
+    try {
+      // Inform listeners that an error occurred
+      const onerror = xhr.onerror;
+      if (typeof onerror === 'function') {
+        // @ts-expect-error - ProgressEvent is not supported by React Native and we don't need it
+        onerror(error);
+      }
+    } catch {
+      // no-op
+    }
+
+    try {
+      // Abort to ensure any consumers listening for abort are notified
+      if (typeof xhr.abort === 'function') {
+        xhr.abort();
+      }
+    } catch {
+      // no-op
+    }
+
+    try {
+      // Fire loadend if present to complete any pending listeners
+      const onloadend = xhr.onloadend;
+      if (typeof onloadend === 'function') {
+        // @ts-expect-error - ProgressEvent is not supported by React Native and we don't need it
+        onloadend();
+      }
+    } catch {
+      // no-op
+    }
+  };
 
   // Override the 'open' method to capture the request URL
   global.XMLHttpRequest.prototype.open = function (
@@ -72,7 +103,7 @@ export function overrideXMLHttpRequest() {
   ) {
     // Check if the current request should be blocked
     if (shouldBlockRequest(currentUrl)) {
-      handleError(); // Trigger an error callback or handle the blocked request as needed
+      handleBlockedRequest(this as XMLHttpRequest); // Trigger error/abort so callers don't hang
       return; // Do not proceed with the request
     }
     // For non-blocked requests, proceed as normal
diff --git a/e2e/selectors/Browser/TestSnaps.selectors.ts b/e2e/selectors/Browser/TestSnaps.selectors.ts
index 872fd5a6d10b..16a420c63cb4 100644
--- a/e2e/selectors/Browser/TestSnaps.selectors.ts
+++ b/e2e/selectors/Browser/TestSnaps.selectors.ts
@@ -13,6 +13,7 @@ export const TestSnapViewSelectorWebIDS = {
   connectDialogSnapButton: 'connectdialogs',
   connectErrorSnapButton: 'connecterrors',
   connectGetEntropyButton: 'connectGetEntropySnap',
+  connectGetFileButton: 'connectgetfile',
   connectGetPreferencesButton: 'connectpreferences',
   connectJsonRpcButton: 'connectjson-rpc',
   connectLifeCycleButton: 'connectlifecycle-hooks',
@@ -42,6 +43,9 @@ export const TestSnapViewSelectorWebIDS = {
   sendConfirmationButton: 'sendConfirmationButton',
   sendCustomButton: 'sendCustomButton',
   sendErrorButton: 'sendError',
+  sendGetFileTextButton: 'sendGetFileTextButton',
+  sendGetFileBase64Button: 'sendGetFileBase64Button',
+  sendGetFileHexButton: 'sendGetFileHexButton',
   sendGetStateButton: 'sendGetState',
   sendGetUnencryptedStateButton: 'sendGetUnencryptedState',
   sendManageStateButton: 'sendManageState',
@@ -112,6 +116,7 @@ export const TestSnapResultSelectorWebIDS = {
   encryptedStateResultSpan: 'encryptedStateResult',
   entropySignResultSpan: 'entropySignResult',
   getBackgroundEventsResultSpan: 'getBackgroundEventsResult',
+  fileResultSpan: 'getFileResult',
   getStateResultSpan: 'getStateResult',
   getStateUnencryptedResultSpan: 'getStateUnencryptedResult',
   installedSnapResultSpan: 'installedSnapsResult',
diff --git a/e2e/specs/snaps/test-snap-get-file.spec.ts b/e2e/specs/snaps/test-snap-get-file.spec.ts
new file mode 100644
index 000000000000..15edbd7da3ff
--- /dev/null
+++ b/e2e/specs/snaps/test-snap-get-file.spec.ts
@@ -0,0 +1,50 @@
+import { FlaskBuildTests } from '../../tags';
+import { loginToApp } from '../../viewHelper';
+import FixtureBuilder from '../../framework/fixtures/FixtureBuilder';
+import { withFixtures } from '../../framework/fixtures/FixtureHelper';
+import TabBarComponent from '../../pages/wallet/TabBarComponent';
+import TestSnaps from '../../pages/Browser/TestSnaps';
+
+jest.setTimeout(150_000);
+
+describe(FlaskBuildTests('Get File Snap Tests'), () => {
+  it('can connect to the get File Snap', async () => {
+    await withFixtures(
+      {
+        fixture: new FixtureBuilder().build(),
+        restartDevice: true,
+      },
+      async () => {
+        await loginToApp();
+        await TabBarComponent.tapBrowser();
+        await TestSnaps.navigateToTestSnap();
+
+        await TestSnaps.installSnap('connectGetFileButton');
+      },
+    );
+  });
+
+  it('returns responses for different formats', async () => {
+    await withFixtures(
+      {
+        fixture: new FixtureBuilder().build(),
+      },
+      async () => {
+        await TestSnaps.tapButton('sendGetFileTextButton');
+        await TestSnaps.checkResultJson('fileResultSpan', { foo: 'bar' });
+
+        await TestSnaps.tapButton('sendGetFileBase64Button');
+        await TestSnaps.checkResultSpan(
+          'fileResultSpan',
+          '"ewogICJmb28iOiAiYmFyIgp9Cg=="',
+        );
+
+        await TestSnaps.tapButton('sendGetFileHexButton');
+        await TestSnaps.checkResultSpan(
+          'fileResultSpan',
+          '"0x7b0a202022666f6f223a2022626172220a7d0a"',
+        );
+      },
+    );
+  });
+});
diff --git a/locales/languages/en.json b/locales/languages/en.json
index 51a1061bbe16..b1e5f17d1c21 100644
--- a/locales/languages/en.json
+++ b/locales/languages/en.json
@@ -950,8 +950,7 @@
       "fees": "Fees",
       "market": "Market",
       "limit": "Limit",
-      "take_profit": "Take profit",
-      "stop_loss": "Stop loss",
+      "max": "max",
       "cancel_order": "Cancel order",
       "filled": "filled",
       "reduce_only": "Reduce only",
@@ -1010,7 +1009,8 @@
         "market": "Market",
         "current_price": "Current price",
         "ask_price": "Ask price",
-        "bid_price": "Bid price"
+        "bid_price": "Bid price",
+        "difference_from_market": "Difference from market:"
       },
       "leverage_modal": {
         "title": "Set Leverage",
@@ -1048,7 +1048,7 @@
       "closing": "Closing position...",
       "pnl": "PnL",
       "fees": "Fees",
-      "receive": "You'll receive (Hyperliquid USDC)",
+      "receive": "You'll receive",
       "error_unknown": "Failed to close position",
       "success_title": "Position Closed Successfully",
       "success_description": "Your {{direction}} position for {{asset}} has been closed",
@@ -1128,14 +1128,29 @@
       "withdrawFailed": "Failed to withdraw",
       "connectionRequired": "usePerpsConnection must be used within a PerpsConnectionProvider",
       "assetMappingFailed": "Failed to build asset mapping",
-      "depositFailed": "Deposit failed"
+      "depositFailed": "Deposit failed",
+      "connectionFailed": {
+        "title": "Connection Failed",
+        "description": "Unable to connect to Perps services. Please check your connection and try again.",
+        "retry": "Retry"
+      },
+      "networkError": {
+        "title": "Network Error",
+        "description": "There was a problem connecting to the network. Please try again.",
+        "retry": "Try Again"
+      },
+      "unknown": {
+        "title": "Something Went Wrong",
+        "description": "An unexpected error occurred. Please try again later.",
+        "retry": "Retry"
+      }
     },
     "position": {
       "title": "Positions",
       "card": {
         "entry_price": "Entry Price",
         "market_price": "Market Price",
-        "liquidity_price": "Liquidity Price",
+        "liquidation_price": "Liquidation Price",
         "take_profit": "Take Profit",
         "stop_loss": "Stop Loss",
         "margin": "Margin",
@@ -1294,7 +1309,7 @@
         "history_will_appear": "Your trading history will appear here"
       }
     },
-    "risk_disclaimer": "Perpetual contracts are very risky, and you could suddenly and without notice lose your entire investment. You trade entirely at your own risk.  Market data provided by {{provider}}.",
+    "risk_disclaimer": "Perps trading is risky, and you could suddenly and without notice lose your entire margin. You trade entirely at your own risks. Market data provided by Hyperliquid. Price chart powered by",
     "tutorial": {
       "continue": "Continue",
       "skip": "Skip",
diff --git a/package.json b/package.json
index de6444201ec4..7975edb1327f 100644
--- a/package.json
+++ b/package.json
@@ -206,7 +206,7 @@
     "@metamask/approval-controller": "^7.1.3",
     "@metamask/assets-controllers": "^73.0.2",
     "@metamask/base-controller": "^8.0.0",
-    "@metamask/bitcoin-wallet-snap": "^0.18.0",
+    "@metamask/bitcoin-wallet-snap": "^0.19.3",
     "@metamask/bridge-controller": "^39.0.1",
     "@metamask/bridge-status-controller": "^38.0.1",
     "@metamask/chain-agnostic-permission": "^0.7.1",
@@ -270,11 +270,11 @@
     "@metamask/signature-controller": "^30.0.0",
     "@metamask/slip44": "^4.2.0",
     "@metamask/smart-transactions-controller": "^18.1.0",
-    "@metamask/snaps-controllers": "^14.2.1",
+    "@metamask/snaps-controllers": "^14.2.2",
     "@metamask/snaps-execution-environments": "^10.2.1",
     "@metamask/snaps-rpc-methods": "^13.5.0",
     "@metamask/snaps-sdk": "^9.3.0",
-    "@metamask/snaps-utils": "^11.4.0",
+    "@metamask/snaps-utils": "^11.5.0",
     "@metamask/solana-wallet-snap": "^2.1.4",
     "@metamask/solana-wallet-standard": "^0.5.1",
     "@metamask/stake-sdk": "^3.2.0",
diff --git a/yarn.lock b/yarn.lock
index 191b37475e2c..f4d15491cdc9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4909,10 +4909,10 @@
     "@metamask/utils" "^11.4.2"
     immer "^9.0.6"
 
-"@metamask/bitcoin-wallet-snap@^0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@metamask/bitcoin-wallet-snap/-/bitcoin-wallet-snap-0.18.0.tgz#51b73f9132886c599b7e09fd5671a1dc7584836c"
-  integrity sha512-5HeXKrsTOBowdK/5KJ6tmHRkv7IekUG9oIczNZwRnGxqGIzmRRPnxVEaWawOuRCxlkNO3qZT9KCkxFtCL+tXbw==
+"@metamask/bitcoin-wallet-snap@^0.19.3":
+  version "0.19.3"
+  resolved "https://registry.yarnpkg.com/@metamask/bitcoin-wallet-snap/-/bitcoin-wallet-snap-0.19.3.tgz#5d2fd90adf3bb4185c56544da0e3b8c5357971b5"
+  integrity sha512-F5P/x5qA0FKplspSA0Vwo+a1KUb5YfFzurfAMh4AXkImyYuDOa+lufjFuiXQILs4DGF0Cl5ALkKHaecW/6sP2w==
 
 "@metamask/bridge-controller@^39.0.1":
   version "39.0.1"
@@ -6086,13 +6086,13 @@
     fast-json-patch "^3.1.0"
     lodash "^4.17.21"
 
-"@metamask/snaps-controllers@^14.2.1":
-  version "14.2.1"
-  resolved "https://registry.yarnpkg.com/@metamask/snaps-controllers/-/snaps-controllers-14.2.1.tgz#11ded99a695c66076c53aa61d075e52497382cd9"
-  integrity sha512-5TTaeeXZcN2nvD9OaLiIqlcEoB0ntjDmhPo7aumhmh7tBaHtCviPfTLl612WPRDS/NKUuoE9JpkKJOS26v55+g==
+"@metamask/snaps-controllers@^14.2.2":
+  version "14.2.2"
+  resolved "https://registry.yarnpkg.com/@metamask/snaps-controllers/-/snaps-controllers-14.2.2.tgz#f1e8acd81f27bd370d62e7607384bc78f1ad4f33"
+  integrity sha512-gSqa8t6oRo782fQJWO+uL1IyhYfKyrZBrfD3KS0afb9Z85LPz73y83icfY3nWL5hJ7WJvVGwe8eCOgH0AfjSsg==
   dependencies:
     "@metamask/approval-controller" "^7.1.3"
-    "@metamask/base-controller" "^8.0.1"
+    "@metamask/base-controller" "^8.1.0"
     "@metamask/json-rpc-engine" "^10.0.2"
     "@metamask/json-rpc-middleware-stream" "^8.0.7"
     "@metamask/key-tree" "^10.1.1"
@@ -6104,7 +6104,7 @@
     "@metamask/snaps-registry" "^3.2.3"
     "@metamask/snaps-rpc-methods" "^13.5.0"
     "@metamask/snaps-sdk" "^9.3.0"
-    "@metamask/snaps-utils" "^11.4.0"
+    "@metamask/snaps-utils" "^11.5.0"
     "@metamask/utils" "^11.4.2"
     "@xstate/fsm" "^2.0.0"
     async-mutex "^0.5.0"
@@ -6182,14 +6182,14 @@
     "@metamask/superstruct" "^3.2.1"
     "@metamask/utils" "^11.4.2"
 
-"@metamask/snaps-utils@^11.0.0", "@metamask/snaps-utils@^11.3.0", "@metamask/snaps-utils@^11.4.0":
-  version "11.4.0"
-  resolved "https://registry.yarnpkg.com/@metamask/snaps-utils/-/snaps-utils-11.4.0.tgz#fb09a75426bb1ebfa905fbf8162e1d81ac47f7e2"
-  integrity sha512-k7+dFUL9ElFoXM1yHemA4HjZnFZBLt6kH9x+NJ7iTQfEjOOhbzbP2vL0jZM91un8MKAb6ieH53AiE6Pi76rsLQ==
+"@metamask/snaps-utils@^11.0.0", "@metamask/snaps-utils@^11.3.0", "@metamask/snaps-utils@^11.4.0", "@metamask/snaps-utils@^11.5.0":
+  version "11.5.0"
+  resolved "https://registry.yarnpkg.com/@metamask/snaps-utils/-/snaps-utils-11.5.0.tgz#87a0216a35cdde886fd72c3b9c0f5428746d4e8c"
+  integrity sha512-XKYnfj8eXdYmUn8M4rYq+OOp09qIUJ943g9iZWl/hS4tCEx9zbe0LzFs3zYy38QTlDptj6gY7m9Z3+JitH8UGA==
   dependencies:
     "@babel/core" "^7.23.2"
     "@babel/types" "^7.23.0"
-    "@metamask/base-controller" "^8.0.1"
+    "@metamask/base-controller" "^8.1.0"
     "@metamask/key-tree" "^10.1.1"
     "@metamask/permission-controller" "^11.0.6"
     "@metamask/rpc-errors" "^7.0.3"