diff --git a/.env.example b/.env.example
index b7a842e..6071abb 100644
--- a/.env.example
+++ b/.env.example
@@ -6,5 +6,5 @@ VITE_PK_ENCRYPTION_KEY=
 
 VITE_WALLETCONNECT2_PROJECT_ID=
 
-VITE_V3_TOKEN_ADDRESS=
-VITE_TOKEN_MIGRATION_URI=
\ No newline at end of file
+VITE_V3_TOKEN_ADDRESS=0x6d5bb505a4f85c10b122ccc36e30f57e2b86a291
+VITE_TOKEN_MIGRATION_URI=https://bridge.dydx.trade/
\ No newline at end of file
diff --git a/src/components/CollapsibleTabs.tsx b/src/components/CollapsibleTabs.tsx
index 361bc96..a1d7bfa 100644
--- a/src/components/CollapsibleTabs.tsx
+++ b/src/components/CollapsibleTabs.tsx
@@ -225,6 +225,7 @@ Styled.CollapsibleContent = styled(CollapsibleContent)`
 `;
 
 Styled.IconButton = styled(IconButton)`
+  --button-icon-size: 1em;
   ${Styled.CollapsibleRoot}[data-state='closed'] & {
     rotate: -0.5turn;
   }
diff --git a/src/components/ComboboxDialogMenu.tsx b/src/components/ComboboxDialogMenu.tsx
index f4e231c..b7f6bb6 100644
--- a/src/components/ComboboxDialogMenu.tsx
+++ b/src/components/ComboboxDialogMenu.tsx
@@ -34,6 +34,7 @@ type PickDialogProps = Pick<
   | 'slotHeaderInner'
   | 'slotTrigger'
   | 'slotFooter'
+  | 'preventClose'
 >;
 
 export const ComboboxDialogMenu = <
@@ -57,6 +58,7 @@ export const ComboboxDialogMenu = <
   children,
 
   placement = DialogPlacement.Default,
+  preventClose,
   className,
 }: ElementProps<MenuItemValue, MenuGroupValue> &
   PickComboxMenuProps<MenuItemValue, MenuGroupValue> &
@@ -72,6 +74,7 @@ export const ComboboxDialogMenu = <
     slotTrigger={slotTrigger}
     slotFooter={slotFooter}
     placement={placement}
+    preventClose={preventClose}
     className={className}
   >
     <Styled.ComboboxMenu
diff --git a/src/components/DropdownHeaderMenu.tsx b/src/components/DropdownHeaderMenu.tsx
index 4558d42..f251cbf 100644
--- a/src/components/DropdownHeaderMenu.tsx
+++ b/src/components/DropdownHeaderMenu.tsx
@@ -33,9 +33,11 @@ export const DropdownHeaderMenu = <MenuItemValue extends string>({
 
   return (
     <Root>
-      <Styled.Trigger className={className}>
+      <Styled.Trigger className={className} asChild>
+        <div>
         {children}
         <Styled.DropdownIconButton iconName={IconName.Caret} isToggle />
+        </div>
       </Styled.Trigger>
       <Portal>
         <Styled.Content
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
index cba0570..9802ee6 100644
--- a/src/components/IconButton.tsx
+++ b/src/components/IconButton.tsx
@@ -67,6 +67,7 @@ const Styled: Record<string, AnyStyledComponent> = {};
 const buttonMixin = css`
   // Params
   --button-icon-size: 1.125em;
+  --button-padding: 0;
 
   // Rules
   > * {
diff --git a/src/components/NavigationMenu.tsx b/src/components/NavigationMenu.tsx
index d52cde2..132ea55 100644
--- a/src/components/NavigationMenu.tsx
+++ b/src/components/NavigationMenu.tsx
@@ -71,7 +71,7 @@ const NavItem = forwardRef(
           )}
         </span>
         {slotAfter}
-        {subitems?.length && <Styled.Icon iconName={IconName.Caret} />}
+        {subitems?.length && <Styled.Icon iconName={IconName.Triangle} />}
       </>
     );
 
@@ -525,7 +525,7 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
 `;
 
 Styled.Icon = styled(Icon)`
-  height: 0.75em;
+  font-size: 0.375em;
   transition: rotate 0.3s var(--ease-out-expo);
 
   ${Styled.List}[data-orientation="menu"] & {
diff --git a/src/components/Panel.tsx b/src/components/Panel.tsx
index dec52ea..e7b1cd0 100644
--- a/src/components/Panel.tsx
+++ b/src/components/Panel.tsx
@@ -31,7 +31,7 @@ export const Panel = ({
   hasSeparator,
   className,
 }: PanelProps & PanelStyleProps) => (
-  <Styled.Panel onClick={onClick}>
+  <Styled.Panel onClick={onClick} className={className}>
     <Styled.Left>
       {href ? (
         <Link to={href}>
@@ -53,7 +53,7 @@ export const Panel = ({
           </Styled.Header>
         )
       )}
-      <Styled.Content className={className}>{children}</Styled.Content>
+      <Styled.Content>{children}</Styled.Content>
     </Styled.Left>
     {slotRight}
   </Styled.Panel>
@@ -61,11 +61,29 @@ export const Panel = ({
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Panel = styled.section`
+Styled.Panel = styled.section<{ onClick?: () => void }>`
+  --panel-paddingY: 1rem;
+  --panel-paddingX: 1rem;
+  --panel-content-paddingY: var(--panel-paddingY);
+  --panel-content-paddingX: var(--panel-paddingX);
+
   ${layoutMixins.row}
 
   background-color: var(--color-layer-3);
   border-radius: 0.875rem;
+
+  ${({ onClick }) =>
+    onClick &&
+    css`
+      cursor: pointer;
+
+      &:hover {
+        button:not(:disabled) {
+          color: var(--button-hover-textColor);
+          filter: var(--button-hover-filter);
+        }
+      }
+    `}
 `;
 
 Styled.Left = styled.div`
@@ -75,7 +93,7 @@ Styled.Left = styled.div`
 
 Styled.Header = styled.header<{ hasSeparator?: boolean }>`
   ${layoutMixins.spacedRow}
-  padding: 1rem 1rem;
+  padding: var(--panel-paddingY) var(--panel-paddingX);
 
   ${({ hasSeparator }) =>
     hasSeparator &&
@@ -94,5 +112,5 @@ Styled.Content = styled.div`
   ${layoutMixins.scrollArea}
   ${layoutMixins.stickyArea0}
   --stickyArea0-background: transparent;
-  padding: 1rem 1rem;
+  padding: var(--panel-content-paddingY) var(--panel-content-paddingX);
 `;
diff --git a/src/components/ToggleGroup.tsx b/src/components/ToggleGroup.tsx
index d1541d0..246515e 100644
--- a/src/components/ToggleGroup.tsx
+++ b/src/components/ToggleGroup.tsx
@@ -7,13 +7,15 @@ import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { useBreakpoints } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import {  type BaseButtonProps } from '@/components/BaseButton';
+import { type BaseButtonProps } from '@/components/BaseButton';
 import { ToggleButton } from '@/components/ToggleButton';
 
 type ElementProps<MenuItemValue extends string> = {
   items: MenuItem<MenuItemValue>[];
   value: MenuItemValue;
-  onValueChange: (value: MenuItemValue) => void;
+  onValueChange: (value: any) => void;
+  onInteraction?: () => void;
+  ensureSelected?: boolean;
 };
 
 type StyleProps = {
@@ -25,10 +27,14 @@ export const ToggleGroup = forwardRef(
     {
       items,
       value,
+      ensureSelected = true,
       onValueChange,
+      onInteraction,
+
       className,
       size,
       shape = ButtonShape.Pill,
+
       ...buttonProps
     }: ElementProps<MenuItemValue> & StyleProps & BaseButtonProps,
     ref: Ref<HTMLDivElement>
@@ -40,12 +46,17 @@ export const ToggleGroup = forwardRef(
         ref={ref}
         type="single"
         value={value}
-        onValueChange={onValueChange}
+        onValueChange={(newValue: MenuItemValue) => {
+          if ((ensureSelected && newValue) || !ensureSelected) {
+            onValueChange(newValue);
+          }
+          onInteraction?.();
+        }}
         className={className}
         loop
       >
         {items.map((item) => (
-          <Item key={item.value} value={item.value} aria-label={item.label} asChild>
+          <Item key={item.value} value={item.value} asChild>
             <ToggleButton
               size={size ? size : isTablet ? ButtonSize.Small : ButtonSize.XSmall}
               shape={shape}
diff --git a/src/hooks/useMarketsData.ts b/src/hooks/useMarketsData.ts
index 26ffaf9..020db64 100644
--- a/src/hooks/useMarketsData.ts
+++ b/src/hooks/useMarketsData.ts
@@ -6,8 +6,10 @@ import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constant
 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
 
+import { isTruthy } from '@/lib/isTruthy';
+
 const filterFunctions = {
-  [MarketFilters.ALL]: (market: MarketData) => true,
+  [MarketFilters.ALL]: () => true,
   [MarketFilters.LAYER_1]: (market: MarketData) => {
     return market.asset.tags?.toArray().includes('Layer 1');
   },
@@ -28,13 +30,15 @@ export const useMarketsData = (
   const allAssets = useSelector(getAssets, shallowEqual) || {};
 
   const markets = useMemo(() => {
-    return Object.values(allPerpetualMarkets).map((marketData) => ({
-      asset: allAssets[marketData.assetId],
-      tickSizeDecimals: marketData.configs?.tickSizeDecimals,
-      ...marketData,
-      ...marketData.perpetual,
-      ...marketData.configs,
-    })) as MarketData[];
+    return Object.values(allPerpetualMarkets)
+      .filter(isTruthy)
+      .map((marketData) => ({
+        asset: allAssets[marketData.assetId],
+        tickSizeDecimals: marketData.configs?.tickSizeDecimals,
+        ...marketData,
+        ...marketData.perpetual,
+        ...marketData.configs,
+      })) as MarketData[];
   }, [allPerpetualMarkets, allAssets]);
 
   const filteredMarkets = useMemo(() => {
diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
index 03f1908..3b0e693 100644
--- a/src/pages/Profile.tsx
+++ b/src/pages/Profile.tsx
@@ -180,7 +180,7 @@ Styled.MobileProfileLayout = styled.div`
   ${layoutMixins.contentContainerPage}
 
   gap: 1rem;
-  padding: 1rem;
+  padding: 1.25rem;
 `;
 
 Styled.Header = styled.header`
@@ -278,13 +278,17 @@ Styled.RewardsPanel = styled(Panel)`
 `;
 
 Styled.TablePanel = styled(Panel)`
-  max-width: calc(100vw - 2rem);
-  max-height: 10rem;
-  margin-top: 0.5rem;
-  padding: 0;
-  border-radius: 0.875rem;
+  --panel-content-paddingY: 0;
+  --panel-content-paddingX: 0;
+
+  > div > div {
+    margin-top: 0.5rem;
+    --scrollArea-height: 10rem;
+    border-radius: 0.875rem;
+  }
 
   table {
+    max-height: 10rem;
     --tableCell-padding: 0.25rem 1rem;
     --tableRow-backgroundColor: var(--color-layer-3);
     background-color: var(--color-layer-3);
diff --git a/src/pages/portfolio/Fees.tsx b/src/pages/portfolio/Fees.tsx
index 5aa2fbd..3806fb0 100644
--- a/src/pages/portfolio/Fees.tsx
+++ b/src/pages/portfolio/Fees.tsx
@@ -1,12 +1,12 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useMemo } from 'react';
 import { Nullable } from '@dydxprotocol/v4-abacus';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import { FeeTier } from '@/constants/abacus';
-import { FEE_DECIMALS, QUANTUM_MULTIPLIER } from '@/constants/numbers';
+import { FEE_DECIMALS } from '@/constants/numbers';
 import { STRING_KEYS } from '@/constants/localization';
-import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints, useStringGetter } from '@/hooks';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { tableMixins } from '@/styles/tableMixins';
@@ -29,9 +29,8 @@ const EQUALITY_SYMBOL_MAP = {
 };
 
 export const Fees = () => {
-  const { dydxAddress } = useAccounts();
   const stringGetter = useStringGetter();
-  const { isNotTablet } = useBreakpoints();
+  const { isTablet, isNotTablet } = useBreakpoints();
   const userFeeTier = useSelector(getUserFeeTier, shallowEqual);
   const userStats = useSelector(getUserStats, shallowEqual);
   const feeTiers = useSelector(getFeeTiers, shallowEqual);
@@ -56,28 +55,28 @@ export const Fees = () => {
       <Styled.AdditionalConditions>
         {!isAdditional && !totalShare && !makerShare && <Output type={OutputType.Text} />}
         {!!totalShare && (
-          <Styled.TextRow>
-            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
-            <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}</span>
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>
+          <Styled.AdditionalConditionsText>
+            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
+            {stringGetter({ key: STRING_KEYS.EXCHANGE_MARKET_SHARE })}{' '}
+            <Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
             <Styled.HighlightOutput
               type={OutputType.Percent}
               value={totalShare}
               fractionDigits={0}
             />
-          </Styled.TextRow>
+          </Styled.AdditionalConditionsText>
         )}
         {!!makerShare && (
-          <Styled.TextRow>
-            {isAdditional && <span>{stringGetter({ key: STRING_KEYS.AND })}</span>}
-            <span>{stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}</span>
-            <Styled.Highlighted>{'>'}</Styled.Highlighted>
+          <Styled.AdditionalConditionsText>
+            {isAdditional && stringGetter({ key: STRING_KEYS.AND })}{' '}
+            {stringGetter({ key: STRING_KEYS.MAKER_MARKET_SHARE })}{' '}
+            <Styled.Highlighted>{'>'}</Styled.Highlighted>{' '}
             <Styled.HighlightOutput
               type={OutputType.Percent}
               value={makerShare}
               fractionDigits={0}
             />
-          </Styled.TextRow>
+          </Styled.AdditionalConditionsText>
         )}
       </Styled.AdditionalConditions>
     ),
@@ -103,91 +102,90 @@ export const Fees = () => {
             },
           ]}
         />
-        <div>
-          <Styled.FeeTable
-            label="Fee Tiers"
-            data={feeTiers || []}
-            getRowKey={(row: FeeTier) => row.tier}
-            getRowAttributes={(row: FeeTier) => ({
-              'data-yours': row.tier === userFeeTier,
-            })}
-            columns={(
-              [
-                {
-                  columnKey: 'tier',
-                  getCellValue: (row) => row.tier,
-                  label: stringGetter({ key: STRING_KEYS.TIER }),
-                  allowsSorting: false,
-                  renderCell: ({ tier }) => (
-                    <Styled.Tier>
-                      <Styled.Output type={OutputType.Text} value={tier} />
-                      {tier === userFeeTier && (
-                        <Styled.YouTag size={TagSize.Medium}>
-                          {stringGetter({ key: STRING_KEYS.YOU })}
-                        </Styled.YouTag>
-                      )}
-                    </Styled.Tier>
-                  ),
-                },
-                {
-                  columnKey: 'volume',
-                  getCellValue: (row) => row.volume,
-                  label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
-                  allowsSorting: false,
-                  renderCell: ({ symbol, volume, makerShare, totalShare }) => (
-                    <>
-                      <span>{`${
-                        symbol in EQUALITY_SYMBOL_MAP
-                          ? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
-                          : symbol
-                      } `}</span>
-                      <Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
-                      {!isNotTablet &&
-                        AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
-                    </>
-                  ),
-                },
-                isNotTablet && {
-                  columnKey: 'condition',
-                  getCellValue: (row) => row.volume,
-                  label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
-                  allowsSorting: false,
-                  renderCell: ({ totalShare, makerShare }) =>
-                    AdditionalConditions({ totalShare, makerShare }),
-                },
-                {
-                  columnKey: 'maker',
-                  getCellValue: (row) => row.maker,
-                  label: stringGetter({ key: STRING_KEYS.MAKER }),
-                  allowsSorting: false,
-                  renderCell: ({ maker }) => (
-                    <Styled.HighlightOutput
-                      type={OutputType.SmallPercent}
-                      value={maker}
-                      fractionDigits={FEE_DECIMALS}
-                    />
-                  ),
-                },
-                {
-                  columnKey: 'taker',
-                  getCellValue: (row) => row.taker,
-                  label: stringGetter({ key: STRING_KEYS.TAKER }),
-                  allowsSorting: false,
-                  renderCell: ({ taker }) => (
-                    <Styled.HighlightOutput
-                      type={OutputType.SmallPercent}
-                      value={taker}
-                      fractionDigits={FEE_DECIMALS}
-                    />
-                  ),
-                },
-              ] as ColumnDef<FeeTier>[]
-            ).filter(isTruthy)}
-            selectionBehavior="replace"
-            withOuterBorder={isNotTablet}
-            withInnerBorders
-          />
-        </div>
+
+        <Styled.FeeTable
+          label="Fee Tiers"
+          data={feeTiers || []}
+          getRowKey={(row: FeeTier) => row.tier}
+          getRowAttributes={(row: FeeTier) => ({
+            'data-yours': row.tier === userFeeTier,
+          })}
+          columns={(
+            [
+              {
+                columnKey: 'tier',
+                getCellValue: (row) => row.tier,
+                label: stringGetter({ key: STRING_KEYS.TIER }),
+                allowsSorting: false,
+                renderCell: ({ tier }) => (
+                  <Styled.Tier>
+                    <Styled.Output type={OutputType.Text} value={tier} />
+                    {tier === userFeeTier && (
+                      <Styled.YouTag size={TagSize.Medium}>
+                        {stringGetter({ key: STRING_KEYS.YOU })}
+                      </Styled.YouTag>
+                    )}
+                  </Styled.Tier>
+                ),
+              },
+              {
+                columnKey: 'volume',
+                getCellValue: (row) => row.volume,
+                label: stringGetter({ key: STRING_KEYS.VOLUME_30D }),
+                allowsSorting: false,
+                renderCell: ({ symbol, volume, makerShare, totalShare }) => (
+                  <>
+                    <span>{`${
+                      symbol in EQUALITY_SYMBOL_MAP
+                        ? EQUALITY_SYMBOL_MAP[symbol as keyof typeof EQUALITY_SYMBOL_MAP]
+                        : symbol
+                    } `}</span>
+                    <Styled.HighlightOutput type={OutputType.CompactFiat} value={volume} />
+                    {isTablet &&
+                      AdditionalConditions({ totalShare, makerShare, isAdditional: true })}
+                  </>
+                ),
+              },
+              isNotTablet && {
+                columnKey: 'condition',
+                getCellValue: (row) => row.volume,
+                label: stringGetter({ key: STRING_KEYS.ADDITIONAL_CONDITION }),
+                allowsSorting: false,
+                renderCell: ({ totalShare, makerShare }) =>
+                  AdditionalConditions({ totalShare, makerShare }),
+              },
+              {
+                columnKey: 'maker',
+                getCellValue: (row) => row.maker,
+                label: stringGetter({ key: STRING_KEYS.MAKER }),
+                allowsSorting: false,
+                renderCell: ({ maker }) => (
+                  <Styled.HighlightOutput
+                    type={OutputType.SmallPercent}
+                    value={maker}
+                    fractionDigits={FEE_DECIMALS}
+                  />
+                ),
+              },
+              {
+                columnKey: 'taker',
+                getCellValue: (row) => row.taker,
+                label: stringGetter({ key: STRING_KEYS.TAKER }),
+                allowsSorting: false,
+                renderCell: ({ taker }) => (
+                  <Styled.HighlightOutput
+                    type={OutputType.SmallPercent}
+                    value={taker}
+                    fractionDigits={FEE_DECIMALS}
+                  />
+                ),
+              },
+            ] as ColumnDef<FeeTier>[]
+          ).filter(isTruthy)}
+          selectionBehavior="replace"
+          withOuterBorder={isNotTablet}
+          withInnerBorders
+        />
       </Styled.ContentWrapper>
     </AttachedExpandingSection>
   );
@@ -198,21 +196,43 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.ContentWrapper = styled.div`
   ${layoutMixins.flexColumn}
   gap: 1.5rem;
+  max-width: 100vw;
 `;
 
 Styled.AdditionalConditions = styled.div`
   ${tableMixins.cellContentColumn}
+  justify-content: end;
 
   color: var(--color-text-0);
+  font: var(--font-small-book);
 
   > :nth-child(2) {
-    font: var(--font-base-book);
+    font: var(--font-small-book);
+  }
+`;
+
+Styled.AdditionalConditionsText = styled.span`
+  display: flex;
+  gap: 0.5ch;
+
+  @media ${breakpoints.mobile} {
+    display: inline;
+    max-width: 8rem;
+    min-width: 0;
+
+    output {
+      display: inline;
+    }
   }
 `;
 
 Styled.FeesDetails = styled(Details)`
   gap: 1rem;
 
+  @media ${breakpoints.notTablet} {
+    margin: 0 1.25rem;
+  }
+
   @media ${breakpoints.tablet} {
     padding: 1rem 1rem 0 1rem;
     --details-grid-numColumns: 1;
@@ -237,11 +257,7 @@ Styled.FeesDetails = styled(Details)`
   }
 
   output {
-    font: var(--font-medium-book);
-
-    @media ${breakpoints.tablet} {
-      font: var(--font-base-book);
-    }
+    font: var(--font-base-book);
   }
 `;
 
@@ -271,6 +287,11 @@ Styled.FeeTable = styled(Table)`
 
   font: var(--font-base-book);
 
+  @media ${breakpoints.mobile} {
+    --tableCell-padding: 1rem 1.25rem;
+    font: var(--font-small-book);
+  }
+
   tbody tr {
     &[data-yours='true'] {
       background-color: var(--color-layer-3);
@@ -283,6 +304,10 @@ Styled.FeeTable = styled(Table)`
 
   @media ${breakpoints.notTablet} {
     --tableHeader-backgroundColor: var(--color-layer-1);
+
+    thead tr {
+      --border-width: 0;
+    }
   }
 `;
 
diff --git a/src/pages/rewards/DYDXBalancePanel.tsx b/src/pages/rewards/DYDXBalancePanel.tsx
index 7d4fd9e..e6ee4bf 100644
--- a/src/pages/rewards/DYDXBalancePanel.tsx
+++ b/src/pages/rewards/DYDXBalancePanel.tsx
@@ -32,11 +32,11 @@ export const DYDXBalancePanel = () => {
   const { chainTokenLabel } = useTokenConfigs();
 
   return (
-    <Panel
+    <Styled.Panel
       slotHeader={
         <Styled.Header>
           <Styled.Title>
-            {/* <AssetIcon symbol="DYDX" /> */}
+            <AssetIcon symbol={chainTokenLabel} />
             {chainTokenLabel}
           </Styled.Title>
           <Styled.ReceiveAndTransferButtons>
@@ -117,14 +117,19 @@ export const DYDXBalancePanel = () => {
           ]}
         />
       </Styled.Content>
-    </Panel>
+    </Styled.Panel>
   );
 };
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
+Styled.Panel = styled(Panel)`
+  --panel-paddingX: 1.5rem;
+`;
+
 Styled.Header = styled.div`
   ${layoutMixins.spacedRow}
+  gap: 1rem;
   padding: 1rem 1.5rem 0;
 `;
 
@@ -177,7 +182,7 @@ Styled.WalletAndStakedBalance = styled(Details)`
   --details-item-backgroundColor: var(--color-layer-6);
 
   grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
+  gap: 1rem;
 
   > div {
     gap: 1rem;
diff --git a/src/pages/rewards/MigratePanel.tsx b/src/pages/rewards/MigratePanel.tsx
index 298265a..fd822bc 100644
--- a/src/pages/rewards/MigratePanel.tsx
+++ b/src/pages/rewards/MigratePanel.tsx
@@ -71,7 +71,7 @@ export const MigratePanel = () => {
       </Styled.Description>
     </Styled.MigratePanel>
   ) : (
-    <Styled.MobileMigratePanel
+    <Styled.MigratePanel
       slotHeader={
         <Styled.MobileMigrateHeader>
           <h3>
@@ -88,49 +88,52 @@ export const MigratePanel = () => {
         </Styled.MobileMigrateHeader>
       }
     >
-      <Styled.WithReceipt
-        slotReceipt={
-          <Styled.Details
-            items={[
-              {
-                key: 'available-to-migrate',
-                label: (
-                  <Styled.InlineRow>
-                    {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
-                    <Tag>DYDX</Tag>
-                  </Styled.InlineRow>
-                ),
-                value: <Output type={OutputType.Asset} value={tokenBalance} />,
-              },
-            ]}
-          />
-        }
-      >
-        {import.meta.env.VITE_TOKEN_MIGRATION_URI && (
-          <Button
-            action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
-            size={ButtonSize.Medium}
-            slotRight={<Icon iconName={IconName.LinkOut} />}
-            href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
-          >
-            {stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
-          </Button>
-        )}
-      </Styled.WithReceipt>
-      <Styled.InlineRow>
-        {stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
-        <Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
-          {stringGetter({ key: STRING_KEYS.CLICK_HERE })}
-        </Link>
-      </Styled.InlineRow>
-    </Styled.MobileMigratePanel>
+      <Styled.Column>
+        <Styled.WithReceipt
+          slotReceipt={
+            <Styled.Details
+              items={[
+                {
+                  key: 'available-to-migrate',
+                  label: (
+                    <Styled.InlineRow>
+                      {stringGetter({ key: STRING_KEYS.AVAILABLE_TO_MIGRATE })}
+                      <Tag>DYDX</Tag>
+                    </Styled.InlineRow>
+                  ),
+                  value: <Output type={OutputType.Asset} value={tokenBalance} />,
+                },
+              ]}
+            />
+          }
+        >
+          {import.meta.env.VITE_TOKEN_MIGRATION_URI && (
+            <Button
+              action={tokenBalance ? ButtonAction.Primary : ButtonAction.Base}
+              size={ButtonSize.Medium}
+              slotRight={<Icon iconName={IconName.LinkOut} />}
+              href={import.meta.env.VITE_TOKEN_MIGRATION_URI}
+            >
+              {stringGetter({ key: STRING_KEYS.MIGRATE_NOW })}
+            </Button>
+          )}
+        </Styled.WithReceipt>
+        <Styled.InlineRow>
+          {stringGetter({ key: STRING_KEYS.WANT_TO_LEARN })}
+          <Link href={TOKEN_MIGRATION_LEARN_MORE_LINK} withIcon>
+            {stringGetter({ key: STRING_KEYS.CLICK_HERE })}
+          </Link>
+        </Styled.InlineRow>
+      </Styled.Column>
+    </Styled.MigratePanel>
   );
 };
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.MigratePanel = styled(Panel)`
-  padding: 1rem 1.5rem;
+  --panel-paddingX: 1.5rem;
+  width: 100%;
 `;
 
 Styled.Title = styled.h3`
@@ -163,10 +166,9 @@ Styled.Description = styled.div`
   --link-color: var(--color-text-1);
 `;
 
-Styled.MobileMigratePanel = styled(Panel)`
+Styled.Column = styled.div`
   ${layoutMixins.flexColumn}
   gap: 1rem;
-
   align-items: center;
 `;
 
diff --git a/src/pages/rewards/RewardsPage.tsx b/src/pages/rewards/RewardsPage.tsx
index 17db58c..3bdba80 100644
--- a/src/pages/rewards/RewardsPage.tsx
+++ b/src/pages/rewards/RewardsPage.tsx
@@ -40,11 +40,7 @@ export const RewardsPage = () => {
     <Styled.Page>
       {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
       <Styled.PanelRow>
-        {isTablet && (
-          <Styled.BalancePanelContainer>
-            <DYDXBalancePanel />
-          </Styled.BalancePanelContainer>
-        )}
+        {isTablet && <DYDXBalancePanel />}
 
         <Styled.Panel
           slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
@@ -72,11 +68,7 @@ export const RewardsPage = () => {
           </Styled.Description>
         </Styled.Panel>
 
-        {isNotTablet && (
-          <Styled.BalancePanelContainer>
-            <DYDXBalancePanel />
-          </Styled.BalancePanelContainer>
-        )}
+        {isNotTablet && <DYDXBalancePanel />}
       </Styled.PanelRow>
     </Styled.Page>
   );
@@ -87,10 +79,26 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.Page = styled.div`
   ${layoutMixins.contentContainerPage}
   gap: 1.5rem;
+  padding: 2rem;
+  align-items: center;
+
+  > * {
+    --content-max-width: 70rem;
+    max-width: min(calc(100vw - 4rem), var(--content-max-width));
+  }
+
+  @media ${breakpoints.tablet} {
+    padding: 1.25rem;
+
+    > * {
+      max-width: calc(100vw - 2.5rem);
+      width: 100%;
+    }
+  }
 `;
 
 Styled.Panel = styled(Panel)`
-  padding: 1rem 1.5rem;
+  --panel-paddingX: 1.5rem;
 `;
 
 Styled.Title = styled.h3`
@@ -105,27 +113,14 @@ Styled.Description = styled.div`
 `;
 
 Styled.PanelRow = styled.div`
-  ${layoutMixins.spacedRow}
+  ${layoutMixins.gridEqualColumns}
   gap: 1.5rem;
-  max-width: min(100vw, var(--content-max-width));
-  align-items: flex-start;
 
-  > section {
-    cursor: pointer;
-  }
+  align-items: flex-start;
 
   @media ${breakpoints.tablet} {
     grid-auto-flow: row;
     grid-template-columns: 1fr;
-    max-width: auto;
-  }
-`;
-
-Styled.BalancePanelContainer = styled.div`
-  width: 21.25rem;
-
-  @media ${breakpoints.tablet} {
-    width: auto;
   }
 `;
 
@@ -135,5 +130,5 @@ Styled.IconButton = styled(IconButton)`
 `;
 
 Styled.Arrow = styled.div`
-  padding: 1rem 1.5rem;
+  padding: 1rem;
 `;
diff --git a/src/pages/trade/HorizontalPanel.tsx b/src/pages/trade/HorizontalPanel.tsx
index 163b942..b072adc 100644
--- a/src/pages/trade/HorizontalPanel.tsx
+++ b/src/pages/trade/HorizontalPanel.tsx
@@ -227,8 +227,8 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
             },
           ]}
           value={view}
-          onValueChange={(newView: string) => {
-            setView((newView || view) as PanelView);
+          onValueChange={setView}
+          onInteraction={() => {
             setIsOpen?.(true);
           }}
         />
diff --git a/src/views/MarketFilter.tsx b/src/views/MarketFilter.tsx
index 3e7d96e..6768a4f 100644
--- a/src/views/MarketFilter.tsx
+++ b/src/views/MarketFilter.tsx
@@ -29,7 +29,7 @@ export const MarketFilter = ({
     <>
       {!isSearch && (
         <ToggleGroup
-          items={Object.entries(filters).map(([key, value]) => ({
+          items={Object.values(filters).map((value) => ({
             label: stringGetter({ key: MARKET_FILTER_LABELS[value] }),
             value,
           }))}
diff --git a/src/views/MarketStatsDetails.tsx b/src/views/MarketStatsDetails.tsx
index 6ae5d3e..562debd 100644
--- a/src/views/MarketStatsDetails.tsx
+++ b/src/views/MarketStatsDetails.tsx
@@ -198,8 +198,6 @@ Styled.Details = styled(Details)`
   @media ${breakpoints.tablet} {
     ${layoutMixins.withOuterAndInnerBorders}
 
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
     font: var(--font-small-book);
 
     > * {
diff --git a/src/views/charts/FundingChart.tsx b/src/views/charts/FundingChart.tsx
index 9c58b0d..75fbde0 100644
--- a/src/views/charts/FundingChart.tsx
+++ b/src/views/charts/FundingChart.tsx
@@ -246,9 +246,7 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => {
               }[rate] || '',
           }))}
           value={fundingRateView}
-          onValueChange={(newRate: FundingRateResolution) => {
-            if (newRate) setFundingRateView(newRate);
-          }}
+          onValueChange={setFundingRateView}
           size={ButtonSize.XSmall}
         />
       </Styled.FundingRateToggle>
diff --git a/src/views/dialogs/TradeDialog.tsx b/src/views/dialogs/TradeDialog.tsx
index 0cd9a14..7129325 100644
--- a/src/views/dialogs/TradeDialog.tsx
+++ b/src/views/dialogs/TradeDialog.tsx
@@ -73,9 +73,7 @@ export const TradeDialog = ({ isOpen, setIsOpen, slotTrigger }: ElementProps) =>
             <Styled.ToggleGroup
               items={allTradeTypeItems}
               value={selectedTradeType}
-              onValueChange={(tradeType: TradeTypes) =>
-                onTradeTypeChange(tradeType || selectedTradeType)
-              }
+              onValueChange={onTradeTypeChange}
             />
           ),
         },
diff --git a/src/views/forms/ClosePositionForm.tsx b/src/views/forms/ClosePositionForm.tsx
index e507e5f..4b22a47 100644
--- a/src/views/forms/ClosePositionForm.tsx
+++ b/src/views/forms/ClosePositionForm.tsx
@@ -209,7 +209,7 @@ export const ClosePositionForm = ({
           value: value.toString(),
         }))}
         value={percent?.toString() ?? ''}
-        onValueChange={(value: any) => onSelectPercentage((value || percent?.toString()) ?? '')}
+        onValueChange={onSelectPercentage}
         shape={ButtonShape.Rectangle}
       />
 
diff --git a/src/views/forms/TradeForm/MarketLeverageInput.tsx b/src/views/forms/TradeForm/MarketLeverageInput.tsx
index 04fa56a..4404331 100644
--- a/src/views/forms/TradeForm/MarketLeverageInput.tsx
+++ b/src/views/forms/TradeForm/MarketLeverageInput.tsx
@@ -153,9 +153,7 @@ export const MarketLeverageInput = ({
           value: MustBigNumber(leverageAmount).toFixed(LEVERAGE_DECIMALS),
         }))}
         value={MustBigNumber(formattedLeverageValue).abs().toFixed(LEVERAGE_DECIMALS)} // sign agnostic
-        onValueChange={(option?: number) =>
-          updateLeverage(option === undefined ? formattedLeverageValue : option)
-        }
+        onValueChange={updateLeverage}
         shape={ButtonShape.Rectangle}
       />
     </>
diff --git a/src/views/menus/NotificationsMenu.tsx b/src/views/menus/NotificationsMenu.tsx
index 842e128..08b3117 100644
--- a/src/views/menus/NotificationsMenu.tsx
+++ b/src/views/menus/NotificationsMenu.tsx
@@ -1,10 +1,13 @@
 import React, { useMemo } from 'react';
-
+import styled from 'styled-components';
+import { layoutMixins } from '@/styles/layoutMixins';
 import { groupBy } from 'lodash';
 
 import { type Notification, NotificationStatus } from '@/constants/notifications';
 
+import { useBreakpoints } from '@/hooks';
 import { useNotifications } from '@/hooks/useNotifications';
+import { CloseIcon } from '@/icons';
 
 import { Button } from '@/components/Button';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
@@ -13,10 +16,6 @@ import { DialogPlacement } from '@/components/Dialog';
 import { Output, OutputType } from '@/components/Output';
 import { IconButton } from '@/components/IconButton';
 import { Toolbar } from '@/components/Toolbar';
-import { CloseIcon } from '@/icons';
-
-import styled from 'styled-components';
-import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
   slotTrigger?: React.ReactNode;
@@ -27,6 +26,7 @@ export const NotificationsMenu = ({
   slotTrigger,
   placement = DialogPlacement.Sidebar,
 }: ElementProps) => {
+  const { isTablet } = useBreakpoints();
   const {
     notifications,
     getDisplayData,
@@ -173,6 +173,7 @@ export const NotificationsMenu = ({
         </$FooterToolbar>
       }
       placement={placement}
+      preventClose={isTablet}
     />
   );
 };