diff --git a/src/components/Duration/DurationController.tsx b/src/components/Duration/DurationController.tsx
index 0b26045..2100bb3 100644
--- a/src/components/Duration/DurationController.tsx
+++ b/src/components/Duration/DurationController.tsx
@@ -92,15 +92,13 @@ export const DurationController: React.FC<DurationControllerProps> = ({
     <>
       <div className={isDesktop ? "flex" : ""}>
         {!isDesktop && <BottomSheetHeader title="Duration" />}
-        <div className="px-4 py-2">
-          <TabList
-            tabs={DURATION_TYPES}
-            selectedValue={selectedType}
-            onSelect={handleTypeSelect as (value: string) => void}
-            variant={isDesktop ? "vertical" : "chip"}
-          />
-        </div>
-        <div className={`flex-1 relative ${isDesktop ? "px-4" : "px-8"}`}>
+        <TabList
+          tabs={DURATION_TYPES}
+          selectedValue={selectedType}
+          onSelect={handleTypeSelect as (value: string) => void}
+          variant={isDesktop ? "vertical" : "chip"}
+        />
+        <div className={`flex-1 relative bg-white ${isDesktop ? "px-2" : "px-8"}`}>
           {selectedType === "hour" ? (
             <HoursDurationValue
               selectedValue={selectedValue.toString()}
@@ -134,8 +132,8 @@ export const DurationController: React.FC<DurationControllerProps> = ({
 
   if (isDesktop) {
     return (
-      <DesktopTradeFieldCard>
-        <div className="w-[480px]">{content}</div>
+      <DesktopTradeFieldCard className="p-0">
+        <div className="w-[368px]">{content}</div>
       </DesktopTradeFieldCard>
     );
   }
diff --git a/src/components/Duration/DurationField.tsx b/src/components/Duration/DurationField.tsx
index f6a918b..3eb0145 100644
--- a/src/components/Duration/DurationField.tsx
+++ b/src/components/Duration/DurationField.tsx
@@ -1,64 +1,75 @@
-import React, { useState, useRef } from "react";
-import { useTradeStore } from "@/stores/tradeStore";
-import { useBottomSheetStore } from "@/stores/bottomSheetStore";
-import { useDeviceDetection } from "@/hooks/useDeviceDetection";
-import TradeParam from "@/components/TradeFields/TradeParam";
-import { DurationController } from "./DurationController";
-import { Popover } from "@/components/ui/popover";
+import React, { useState, useRef } from "react"
+import { useTradeStore } from "@/stores/tradeStore"
+import { useBottomSheetStore } from "@/stores/bottomSheetStore"
+import { useDeviceDetection } from "@/hooks/useDeviceDetection"
+import TradeParam from "@/components/TradeFields/TradeParam"
+import { DurationController } from "./DurationController"
+import { Popover } from "@/components/ui/popover"
+import { DesktopTradeFieldCard } from "@/components/ui/desktop-trade-field-card"
 
 interface DurationFieldProps {
-  className?: string;
+  className?: string
 }
 
 export const DurationField: React.FC<DurationFieldProps> = ({ className }) => {
-  const { duration } = useTradeStore();
-  const { setBottomSheet } = useBottomSheetStore();
-  const { isDesktop } = useDeviceDetection();
-  const [isOpen, setIsOpen] = useState(false);
-  const popoverRef = useRef<{ isClosing: boolean }>({ isClosing: false });
+  const { duration } = useTradeStore()
+  const { setBottomSheet } = useBottomSheetStore()
+  const { isDesktop } = useDeviceDetection()
+  const [isOpen, setIsOpen] = useState(false)
+  const popoverRef = useRef<{ isClosing: boolean }>({ isClosing: false })
 
   const handleClick = () => {
     if (isDesktop) {
       if (!popoverRef.current.isClosing) {
-        setIsOpen(!isOpen);
+        setIsOpen(!isOpen)
       }
     } else {
-      setBottomSheet(true, "duration", "470px");
+      setBottomSheet(true, "duration", "470px")
     }
-  };
+  }
 
   const handleClose = () => {
-    popoverRef.current.isClosing = true;
-    setIsOpen(false);
+    popoverRef.current.isClosing = true
+    setIsOpen(false)
     // Reset after a longer delay
     setTimeout(() => {
-      popoverRef.current.isClosing = false;
-    }, 300); // 300ms should be enough for the animation to complete
-  };
+      popoverRef.current.isClosing = false
+    }, 300) // 300ms should be enough for the animation to complete
+  }
 
   return (
     <div className="relative">
-      <TradeParam
-        label="Duration"
-        value={duration}
-        onClick={handleClick}
-        className={className}
-      />
-
+      {isDesktop ? (
+        <DesktopTradeFieldCard isSelected={isOpen}>
+          <TradeParam
+            label="Duration"
+            value={duration}
+            onClick={handleClick}
+            className={className}
+          />
+        </DesktopTradeFieldCard>
+      ) : (
+        <TradeParam
+          label="Duration"
+          value={duration}
+          onClick={handleClick}
+          className={className}
+        />
+      )}
       {isDesktop && isOpen && (
         <Popover
           isOpen={isOpen}
           onClose={handleClose}
           style={{
-            position: 'absolute',
-            right: '100%',
-            top: '-8px',
-            marginRight: '16px'
+            position: "absolute",
+            right: "100%",
+            top: "-8px",
+            marginRight: "16px",
           }}
         >
           <DurationController onClose={handleClose} />
         </Popover>
       )}
     </div>
-  );
-};
+  )
+}
diff --git a/src/components/MarketInfo/MarketInfo.tsx b/src/components/MarketInfo/MarketInfo.tsx
index 127b47e..ffa8daa 100644
--- a/src/components/MarketInfo/MarketInfo.tsx
+++ b/src/components/MarketInfo/MarketInfo.tsx
@@ -25,7 +25,7 @@ export const MarketInfo: React.FC<MarketInfoProps> = ({
         data-id="market-info"
         onClick={onClick}
       >
-        <div className="flex items-center gap-4 px-4 py-3">
+        <div className="flex items-center gap-4 px-4 py-3 bg-black/[0.04]">
           {selectedMarket && (
             <div className="w-8 h-8 flex items-center justify-center">
               <MarketIcon
diff --git a/src/components/ui/__tests__/desktop-trade-field-card.test.tsx b/src/components/ui/__tests__/desktop-trade-field-card.test.tsx
index 4d77f29..6120a1f 100644
--- a/src/components/ui/__tests__/desktop-trade-field-card.test.tsx
+++ b/src/components/ui/__tests__/desktop-trade-field-card.test.tsx
@@ -20,7 +20,7 @@ describe('DesktopTradeFieldCard', () => {
     );
 
     const card = container.firstChild as HTMLElement;
-    expect(card).toHaveClass('bg-white', 'rounded-lg', 'p-2');
+    expect(card).toHaveClass('rounded-lg', 'p-2','bg-[rgba(246,247,248,1)]','border','border-transparent');
   });
 
   it('merges custom className with default styles', () => {
@@ -31,6 +31,6 @@ describe('DesktopTradeFieldCard', () => {
     );
 
     const card = container.firstChild as HTMLElement;
-    expect(card).toHaveClass('bg-white p-2 rounded-lg');
+    expect(card).toHaveClass('bg-[rgba(246,247,248,1)] rounded-lg p-2 border border-transparent custom-class');
   });
 });
diff --git a/src/components/ui/desktop-trade-field-card.tsx b/src/components/ui/desktop-trade-field-card.tsx
index 4ce3f5a..4e4bf22 100644
--- a/src/components/ui/desktop-trade-field-card.tsx
+++ b/src/components/ui/desktop-trade-field-card.tsx
@@ -10,17 +10,15 @@ interface DesktopTradeFieldCardProps {
 
 export const DesktopTradeFieldCard = ({ children, className, isSelected, error }: DesktopTradeFieldCardProps) => {
   return (
-    <div className="bg-white p-2 rounded-lg">
       <div 
         className={cn(
           "bg-[rgba(246,247,248,1)] rounded-lg p-2 border border-transparent",
-          isSelected && "border-black",
+          isSelected && "border-primary",
           error && "border-red-500 bg-[rgba(230,25,14,0.08)]",
           className
         )}
       >
         {children}
       </div>
-    </div>
   );
 };
diff --git a/src/components/ui/tab-list.tsx b/src/components/ui/tab-list.tsx
index 34b50eb..460edd5 100644
--- a/src/components/ui/tab-list.tsx
+++ b/src/components/ui/tab-list.tsx
@@ -57,17 +57,18 @@ const VerticalTabList: React.FC<BaseTabListProps> = ({
   onSelect,
 }) => {
   return (
-    <div className="w-48 border-r border-gray-200">
+    <div className="w-28 bg-[#F6F7F8]">
       {tabs.map(({ label, value }) => (
         <button
           key={value}
           onClick={() => onSelect(value)}
           className={`
-            w-full text-left py-2 px-4 transition-colors
-            ${
-              selectedValue === value
-                ? "bg-gray-100 font-bold"
-                : "hover:bg-gray-50"
+            relative w-full text-left py-3 px-6 transition-colors font-ibm-plex text-base leading-6 font-normal
+            text-primary cursor-pointer
+            before:absolute before:left-0 before:top-0 before:bottom-0 before:w-[4px]
+            ${selectedValue === value
+              ? "bg-white before:bg-black"
+              : "hover:bg-gray-50 before:bg-transparent"
             }
           `}
         >
diff --git a/src/screens/TradePage/components/TradeFormController.tsx b/src/screens/TradePage/components/TradeFormController.tsx
index 05a1045..9bc8138 100644
--- a/src/screens/TradePage/components/TradeFormController.tsx
+++ b/src/screens/TradePage/components/TradeFormController.tsx
@@ -1,77 +1,77 @@
-import React, { Suspense, lazy, useEffect, useState } from "react";
-import { TradeButton } from "@/components/TradeButton";
-import { ResponsiveTradeParamLayout } from "@/components/ui/responsive-trade-param-layout";
-import { MobileTradeFieldCard } from "@/components/ui/mobile-trade-field-card";
-import { DesktopTradeFieldCard } from "@/components/ui/desktop-trade-field-card";
-import { useTradeStore } from "@/stores/tradeStore";
-import { tradeTypeConfigs } from "@/config/tradeTypes";
-import { useTradeActions } from "@/hooks/useTradeActions";
-import { parseDuration, formatDuration } from "@/utils/duration";
-import { createSSEConnection } from "@/services/api/sse/createSSEConnection";
-import { useClientStore } from "@/stores/clientStore";
-import { WebSocketError } from "@/services/api/websocket/types";
-import { HowToTrade } from "@/components/HowToTrade";
-import { PayoutDisplay } from "@/components/Stake/components/PayoutDisplay";
+import React, { Suspense, lazy, useEffect, useState } from "react"
+import { TradeButton } from "@/components/TradeButton"
+import { ResponsiveTradeParamLayout } from "@/components/ui/responsive-trade-param-layout"
+import { MobileTradeFieldCard } from "@/components/ui/mobile-trade-field-card"
+import { DesktopTradeFieldCard } from "@/components/ui/desktop-trade-field-card"
+import { useTradeStore } from "@/stores/tradeStore"
+import { tradeTypeConfigs } from "@/config/tradeTypes"
+import { useTradeActions } from "@/hooks/useTradeActions"
+import { parseDuration, formatDuration } from "@/utils/duration"
+import { createSSEConnection } from "@/services/api/sse/createSSEConnection"
+import { useClientStore } from "@/stores/clientStore"
+import { WebSocketError } from "@/services/api/websocket/types"
+import { HowToTrade } from "@/components/HowToTrade"
+import { PayoutDisplay } from "@/components/Stake/components/PayoutDisplay"
 
 // Lazy load components
 const DurationField = lazy(() =>
   import("@/components/Duration").then((module) => ({
     default: module.DurationField,
   }))
-);
+)
 
 const StakeField = lazy(() =>
   import("@/components/Stake").then((module) => ({
     default: module.StakeField,
   }))
-);
+)
 
 const EqualTradeController = lazy(() =>
   import("@/components/EqualTrade").then((module) => ({
     default: module.EqualTradeController,
   }))
-);
+)
 
 interface TradeFormControllerProps {
-  isLandscape: boolean;
+  isLandscape: boolean
 }
 
 interface ButtonState {
-  loading: boolean;
-  error: Event | WebSocketError | null;
-  payout: number;
-  reconnecting?: boolean;
+  loading: boolean
+  error: Event | WebSocketError | null
+  payout: number
+  reconnecting?: boolean
 }
 
-type ButtonStates = Record<string, ButtonState>;
+type ButtonStates = Record<string, ButtonState>
 
 export const TradeFormController: React.FC<TradeFormControllerProps> = ({
   isLandscape,
 }) => {
-  const { trade_type, duration, setPayouts, stake } = useTradeStore();
-  const { token, currency } = useClientStore();
-  const tradeActions = useTradeActions();
-  const config = tradeTypeConfigs[trade_type];
-  const [isStakeSelected, setIsStakeSelected] = useState(false);
-  const [stakeError, setStakeError] = useState(false);
+  const { trade_type, duration, setPayouts, stake } = useTradeStore()
+  const { token, currency } = useClientStore()
+  const tradeActions = useTradeActions()
+  const config = tradeTypeConfigs[trade_type]
+  const [isStakeSelected, setIsStakeSelected] = useState(false)
+  const [stakeError, setStakeError] = useState(false)
 
   const [buttonStates, setButtonStates] = useState<ButtonStates>(() => {
     // Initialize states for all buttons in the current trade type
-    const initialStates: ButtonStates = {};
+    const initialStates: ButtonStates = {}
     tradeTypeConfigs[trade_type].buttons.forEach((button) => {
       initialStates[button.actionName] = {
         loading: true,
         error: null,
         payout: 0,
         reconnecting: false,
-      };
-    });
-    return initialStates;
-  });
+      }
+    })
+    return initialStates
+  })
 
   // Parse duration for API call
   const { value: apiDurationValue, type: apiDurationType } =
-    parseDuration(duration);
+    parseDuration(duration)
 
   useEffect(() => {
     // Create SSE connections for each button's contract type
@@ -98,10 +98,10 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                 payout: Number(priceData.price),
                 reconnecting: false,
               },
-            }));
+            }))
 
             // Update payouts in store
-            const payoutValue = Number(priceData.price);
+            const payoutValue = Number(priceData.price)
 
             // Create a map of button action names to their payout values
             const payoutValues = Object.keys(buttonStates).reduce(
@@ -109,16 +109,16 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                 acc[key] =
                   key === button.actionName
                     ? payoutValue
-                    : buttonStates[key]?.payout || 0;
-                return acc;
+                    : buttonStates[key]?.payout || 0
+                return acc
               },
               {} as Record<string, number>
-            );
+            )
 
             setPayouts({
               max: 50000,
               values: payoutValues,
-            });
+            })
           },
           onError: (error) => {
             // Update only this button's state on error
@@ -130,7 +130,7 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                 error,
                 reconnecting: true,
               },
-            }));
+            }))
           },
           onOpen: () => {
             // Reset error and reconnecting state on successful connection
@@ -141,46 +141,46 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                 error: null,
                 reconnecting: false,
               },
-            }));
+            }))
           },
-        });
+        })
       }
-    );
+    )
 
     return () => {
-      cleanupFunctions.forEach((cleanup) => cleanup());
-    };
-  }, [duration, stake, currency, token]);
+      cleanupFunctions.forEach((cleanup) => cleanup())
+    }
+  }, [duration, stake, currency, token])
 
   // Reset loading states when duration or trade type changes
   useEffect(() => {
-    const initialStates: ButtonStates = {};
+    const initialStates: ButtonStates = {}
     tradeTypeConfigs[trade_type].buttons.forEach((button) => {
       initialStates[button.actionName] = {
         loading: true,
         error: null,
         payout: buttonStates[button.actionName]?.payout || 0,
         reconnecting: false,
-      };
-    });
-    setButtonStates(initialStates);
-  }, [duration, trade_type, stake]);
+      }
+    })
+    setButtonStates(initialStates)
+  }, [duration, trade_type, stake])
 
   // Preload components based on metadata
   useEffect(() => {
     if (config.metadata?.preloadFields) {
       // Preload field components
       if (config.fields.duration) {
-        import("@/components/Duration");
+        import("@/components/Duration")
       }
       if (config.fields.stake) {
-        import("@/components/Stake");
+        import("@/components/Stake")
       }
       if (config.fields.allowEquals) {
-        import("@/components/EqualTrade");
+        import("@/components/EqualTrade")
       }
     }
-  }, [trade_type, config]);
+  }, [trade_type, config])
 
   return (
     <div
@@ -207,16 +207,14 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
               const event = new MouseEvent("mousedown", {
                 bubbles: true,
                 cancelable: true,
-              });
-              document.dispatchEvent(event);
+              })
+              document.dispatchEvent(event)
             }}
           >
-            <div className="flex flex-col gap-0">
+            <div className="flex flex-col gap-2">
               {config.fields.duration && (
                 <Suspense fallback={<div>Loading duration field...</div>}>
-                  <DesktopTradeFieldCard>
-                    <DurationField className="w-full" />
-                  </DesktopTradeFieldCard>
+                  <DurationField className="w-full" />
                 </Suspense>
               )}
               {config.fields.stake && (
@@ -236,16 +234,24 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                       <div className="p-2">
                         <PayoutDisplay
                           hasError={Boolean(stake && parseFloat(stake) > 50000)}
-                          loading={Object.values(buttonStates).some(state => state.loading)}
-                          loadingStates={Object.keys(buttonStates).reduce((acc, key) => ({
-                            ...acc,
-                            [key]: buttonStates[key].loading
-                          }), {})}
+                          loading={Object.values(buttonStates).some(
+                            (state) => state.loading
+                          )}
+                          loadingStates={Object.keys(buttonStates).reduce(
+                            (acc, key) => ({
+                              ...acc,
+                              [key]: buttonStates[key].loading,
+                            }),
+                            {}
+                          )}
                           maxPayout={50000}
-                          payoutValues={Object.keys(buttonStates).reduce((acc, key) => ({
-                            ...acc,
-                            [key]: buttonStates[key].payout
-                          }), {})}
+                          payoutValues={Object.keys(buttonStates).reduce(
+                            (acc, key) => ({
+                              ...acc,
+                              [key]: buttonStates[key].payout,
+                            }),
+                            {}
+                          )}
                         />
                       </div>
                     )}
@@ -284,9 +290,9 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                   }
                   error={buttonStates[button.actionName]?.error}
                   onClick={() => {
-                    const action = tradeActions[button.actionName];
+                    const action = tradeActions[button.actionName]
                     if (action) {
-                      action();
+                      action()
                     }
                   }}
                 />
@@ -306,9 +312,9 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                       onClick={() => {
                         const durationField = document.querySelector(
                           'button[aria-label^="Duration"]'
-                        );
+                        )
                         if (durationField) {
-                          (durationField as HTMLButtonElement).click();
+                          ;(durationField as HTMLButtonElement).click()
                         }
                       }}
                     >
@@ -322,9 +328,9 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                       onClick={() => {
                         const stakeField = document.querySelector(
                           'button[aria-label^="Stake"]'
-                        );
+                        )
                         if (stakeField) {
-                          (stakeField as HTMLButtonElement).click();
+                          ;(stakeField as HTMLButtonElement).click()
                         }
                       }}
                     >
@@ -371,9 +377,9 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
                   }
                   error={buttonStates[button.actionName]?.error}
                   onClick={() => {
-                    const action = tradeActions[button.actionName];
+                    const action = tradeActions[button.actionName]
                     if (action) {
-                      action();
+                      action()
                     }
                   }}
                 />
@@ -383,5 +389,5 @@ export const TradeFormController: React.FC<TradeFormControllerProps> = ({
         </>
       )}
     </div>
-  );
-};
+  )
+}