diff --git a/apps/trading/components/market-selector/asset-dropdown.tsx b/apps/trading/components/market-selector/asset-dropdown.tsx
index 308bba84e..d0bcefb0c 100644
--- a/apps/trading/components/market-selector/asset-dropdown.tsx
+++ b/apps/trading/components/market-selector/asset-dropdown.tsx
@@ -1,13 +1,12 @@
 import { t } from '@vegaprotocol/i18n';
 import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuTrigger,
-  VegaIcon,
-  VegaIconNames,
+  TradingDropdown,
+  TradingDropdownCheckboxItem,
+  TradingDropdownContent,
+  TradingDropdownItemIndicator,
+  TradingDropdownTrigger,
 } from '@vegaprotocol/ui-toolkit';
+import { MarketSelectorButton } from './market-selector-button';
 
 type Assets = Array<{ id: string; symbol: string }>;
 
@@ -25,17 +24,19 @@ export const AssetDropdown = ({
   }
 
   return (
-    <DropdownMenu
+    <TradingDropdown
       trigger={
-        <DropdownMenuTrigger data-testid="asset-trigger">
-          <TriggerText assets={assets} checkedAssets={checkedAssets} />
-        </DropdownMenuTrigger>
+        <TradingDropdownTrigger data-testid="asset-trigger">
+          <MarketSelectorButton>
+            {triggerText({ assets, checkedAssets })}
+          </MarketSelectorButton>
+        </TradingDropdownTrigger>
       }
     >
-      <DropdownMenuContent>
+      <TradingDropdownContent>
         {assets?.map((a) => {
           return (
-            <DropdownMenuCheckboxItem
+            <TradingDropdownCheckboxItem
               key={a.id}
               checked={checkedAssets.includes(a.id)}
               onCheckedChange={(checked) => {
@@ -46,16 +47,16 @@ export const AssetDropdown = ({
               data-testid={`asset-id-${a.id}`}
             >
               {a.symbol}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
+              <TradingDropdownItemIndicator />
+            </TradingDropdownCheckboxItem>
           );
         })}
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </TradingDropdownContent>
+    </TradingDropdown>
   );
 };
 
-const TriggerText = ({
+const triggerText = ({
   assets,
   checkedAssets,
 }: {
@@ -72,9 +73,5 @@ const TriggerText = ({
     text = t(`${checkedAssets.length} Assets`);
   }
 
-  return (
-    <span className="flex justify-between items-center">
-      {text} <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
-    </span>
-  );
+  return text;
 };
diff --git a/apps/trading/components/market-selector/index.ts b/apps/trading/components/market-selector/index.ts
index ddd159890..6a16773bb 100644
--- a/apps/trading/components/market-selector/index.ts
+++ b/apps/trading/components/market-selector/index.ts
@@ -1,2 +1,3 @@
 export * from './market-selector';
 export * from './market-selector-item';
+export * from './market-selector-button';
diff --git a/apps/trading/components/market-selector/market-selector-button.tsx b/apps/trading/components/market-selector/market-selector-button.tsx
new file mode 100644
index 000000000..90ae6cacf
--- /dev/null
+++ b/apps/trading/components/market-selector/market-selector-button.tsx
@@ -0,0 +1,23 @@
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import type { ButtonHTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+export const MarketSelectorButton = forwardRef<
+  HTMLButtonElement,
+  ButtonHTMLAttributes<HTMLButtonElement>
+>((props, ref) => (
+  <button
+    {...props}
+    className={classNames(
+      'flex items-center justify-between px-2 border rounded gap-1',
+      'border-vega-clight-600 dark:border-vega-cdark-600 bg-vega-clight-700 dark:bg-vega-cdark-700',
+      'text-secondary data-[state=open]:text-vega-clight-50 dark:data-[state=open]:text-vega-cdark-50'
+    )}
+    ref={ref}
+  >
+    {props.children}
+    <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+  </button>
+));
+MarketSelectorButton.displayName = 'MarketSelectorButton';
diff --git a/apps/trading/components/market-selector/market-selector-item.tsx b/apps/trading/components/market-selector/market-selector-item.tsx
index b60ef54af..af54ecd66 100644
--- a/apps/trading/components/market-selector/market-selector-item.tsx
+++ b/apps/trading/components/market-selector/market-selector-item.tsx
@@ -31,7 +31,7 @@ export const MarketSelectorItem = ({
     <div style={style} role="row">
       <Link
         to={`/markets/${market.id}`}
-        className={classNames('h-full flex items-center gap-2 px-4', {
+        className={classNames('h-full flex items-center gap-2 mx-2 px-2', {
           'hover:bg-vega-clight-700 dark:hover:bg-vega-cdark-700':
             market.id !== currentMarketId,
           'bg-vega-clight-600 dark:bg-vega-cdark-600':
@@ -94,7 +94,7 @@ const MarketData = ({
   return (
     <>
       <div className="w-2/5" role="gridcell">
-        <h3 className="text-ellipsis text-sm lg:text-base whitespace-nowrap overflow-hidden">
+        <h3 className="overflow-hidden text-sm text-ellipsis lg:text-base whitespace-nowrap">
           {market.tradableInstrument.instrument.code}{' '}
           {allProducts && productType && (
             <MarketProductPill productType={productType} />
@@ -107,7 +107,7 @@ const MarketData = ({
         )}
       </div>
       <div
-        className="w-1/5 text-xs lg:text-sm whitespace-nowrap text-ellipsis overflow-hidden"
+        className="w-1/5 overflow-hidden text-xs lg:text-sm whitespace-nowrap text-ellipsis"
         title={instrument.product.settlementAsset.symbol}
         data-testid="market-selector-price"
         role="gridcell"
@@ -115,14 +115,14 @@ const MarketData = ({
         {price} {instrument.product.settlementAsset.symbol}
       </div>
       <div
-        className="w-1/5 text-xs lg:text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden"
+        className="w-1/5 overflow-hidden text-xs text-right lg:text-sm whitespace-nowrap text-ellipsis"
         title={t('24h vol')}
         data-testid="market-selector-volume"
         role="gridcell"
       >
         {volume}
       </div>
-      <div className="w-1/5 flex justify-end" role="gridcell">
+      <div className="flex justify-end w-1/5" role="gridcell">
         {oneDayCandles && (
           <Sparkline
             width={64}
diff --git a/apps/trading/components/market-selector/market-selector.tsx b/apps/trading/components/market-selector/market-selector.tsx
index 673eb43e1..60a1876ae 100644
--- a/apps/trading/components/market-selector/market-selector.tsx
+++ b/apps/trading/components/market-selector/market-selector.tsx
@@ -52,7 +52,7 @@ export const MarketSelector = ({
   }, [reload]);
 
   return (
-    <div data-testid="market-selector">
+    <div data-testid="market-selector" className="md:w-[580px]">
       <div className="px-2 pt-2 mb-2">
         <ProductSelector
           product={filter.product}
diff --git a/apps/trading/components/market-selector/product-selector.tsx b/apps/trading/components/market-selector/product-selector.tsx
index 6669ae183..15077c7f6 100644
--- a/apps/trading/components/market-selector/product-selector.tsx
+++ b/apps/trading/components/market-selector/product-selector.tsx
@@ -33,11 +33,14 @@ export const ProductSelector = ({
   return (
     <div className="flex mb-2">
       {Object.keys(Product).map((t) => {
-        const classes = classNames('px-3 py-1.5 rounded', {
-          'bg-vega-clight-500 dark:bg-vega-cdark-500 text-default':
-            t === product,
-          'text-secondary': t !== product,
-        });
+        const classes = classNames(
+          'text-sm px-3 py-1.5 rounded hover:text-vega-clight-50 dark:hover:text-vega-cdark-50',
+          {
+            'bg-vega-clight-500 dark:bg-vega-cdark-500 text-default':
+              t === product,
+            'text-secondary': t !== product,
+          }
+        );
         return (
           <button
             key={t}
@@ -53,7 +56,7 @@ export const ProductSelector = ({
       })}
       <Link
         to={Routes.MARKETS}
-        className="flex items-center gap-2 ml-auto"
+        className="flex items-center ml-auto text-sm gap-2"
         title={t('See all markets')}
       >
         <span className="underline underline-offset-4">{t('Browse')}</span>
diff --git a/apps/trading/components/market-selector/sort-dropdown.tsx b/apps/trading/components/market-selector/sort-dropdown.tsx
index 285d6d566..c2ba4097f 100644
--- a/apps/trading/components/market-selector/sort-dropdown.tsx
+++ b/apps/trading/components/market-selector/sort-dropdown.tsx
@@ -1,13 +1,14 @@
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
+  TradingDropdown,
+  TradingDropdownContent,
+  TradingDropdownItemIndicator,
+  TradingDropdownRadioGroup,
+  TradingDropdownRadioItem,
+  TradingDropdownTrigger,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
+import { MarketSelectorButton } from './market-selector-button';
 
 export const Sort = {
   Gained: 'Gained',
@@ -44,24 +45,23 @@ export const SortDropdown = ({
   onSelect: (sort: SortType) => void;
 }) => {
   return (
-    <DropdownMenu
+    <TradingDropdown
       trigger={
-        <DropdownMenuTrigger data-testid="sort-trigger">
-          <span className="flex items-center justify-between gap-1">
+        <TradingDropdownTrigger data-testid="sort-trigger">
+          <MarketSelectorButton>
             {SortTypeMapping[currentSort]}
-            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
-          </span>
-        </DropdownMenuTrigger>
+          </MarketSelectorButton>
+        </TradingDropdownTrigger>
       }
     >
-      <DropdownMenuContent>
-        <DropdownMenuRadioGroup
+      <TradingDropdownContent>
+        <TradingDropdownRadioGroup
           value={currentSort}
           onValueChange={(value) => onSelect(value as SortType)}
         >
           {Object.keys(Sort).map((key) => {
             return (
-              <DropdownMenuRadioItem
+              <TradingDropdownRadioItem
                 inset
                 key={key}
                 value={key}
@@ -71,12 +71,12 @@ export const SortDropdown = ({
                   <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
                   {SortTypeMapping[key as SortType]}
                 </span>
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
+                <TradingDropdownItemIndicator />
+              </TradingDropdownRadioItem>
             );
           })}
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
+        </TradingDropdownRadioGroup>
+      </TradingDropdownContent>
+    </TradingDropdown>
   );
 };
diff --git a/libs/markets/src/lib/markets-provider.ts b/libs/markets/src/lib/markets-provider.ts
index 5fe37a720..021b78fca 100644
--- a/libs/markets/src/lib/markets-provider.ts
+++ b/libs/markets/src/lib/markets-provider.ts
@@ -199,7 +199,7 @@ export const allMarketsWithLiveDataProvider = makeDerivedDataProvider<
     return data.find(
       (market) =>
         market.id ===
-        (parts[1].delta as MarketDataUpdateFieldsFragment).marketId
+        (parts[1].delta as MarketDataUpdateFieldsFragment)?.marketId
     );
   }
 );
diff --git a/libs/ui-toolkit/src/components/trading-input/input.tsx b/libs/ui-toolkit/src/components/trading-input/input.tsx
index 20345f08a..e50b4eda1 100644
--- a/libs/ui-toolkit/src/components/trading-input/input.tsx
+++ b/libs/ui-toolkit/src/components/trading-input/input.tsx
@@ -84,10 +84,8 @@ const getAffixElement = ({
     'absolute z-10 top-0 bottom-0 flex items-center',
     {
       'fill-black dark:fill-white': prependIconName || appendIconName,
-      'left-3': prependIconName,
-      'right-3': appendIconName,
-      'left-1': prependElement,
-      'right-1': appendElement,
+      'left-3': prependIconName || prependElement,
+      'right-3': appendIconName || appendElement,
     }
   );