diff --git a/src/components/BalanceDisplay/BalanceDisplay.tsx b/src/components/BalanceDisplay/BalanceDisplay.tsx
index 6a66a52..06adefc 100644
--- a/src/components/BalanceDisplay/BalanceDisplay.tsx
+++ b/src/components/BalanceDisplay/BalanceDisplay.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { useClientStore } from "@/stores/clientStore";
+// import { useClientStore } from "@/stores/clientStore";
 
 interface BalanceDisplayProps {
   className?: string;
@@ -8,13 +8,14 @@ interface BalanceDisplayProps {
 export const BalanceDisplay: React.FC<BalanceDisplayProps> = ({
   className = "",
 }) => {
-  const { balance, currency } = useClientStore();
+  // const { balance, currency } = useClientStore();
 
   return (
     <div className={`flex flex-col ${className}`}>
       <span className="text-sm font-semibold text-color-solid-glacier-700">Real</span>
       <span className="text-sm font-semibold">
-        {balance} {currency}
+        {/* {balance} {currency} */}
+        10,000 USD
       </span>
     </div>
   );
diff --git a/src/components/BalanceDisplay/__tests__/BalanceDisplay.test.tsx b/src/components/BalanceDisplay/__tests__/BalanceDisplay.test.tsx
index 27c22cd..f60b30e 100644
--- a/src/components/BalanceDisplay/__tests__/BalanceDisplay.test.tsx
+++ b/src/components/BalanceDisplay/__tests__/BalanceDisplay.test.tsx
@@ -43,7 +43,7 @@ describe('BalanceDisplay', () => {
       render(<BalanceDisplay />);
       
       expect(screen.getByText('Real')).toBeInTheDocument();
-      expect(screen.getByText('1,000 USD')).toBeInTheDocument(); // matches combined balance and currency
+      expect(screen.getByText('10,000 USD')).toBeInTheDocument(); // matches combined balance and currency
     });
   });
 });
\ No newline at end of file
diff --git a/src/components/ContractDetailsChart/ContractDetailsChart.tsx b/src/components/ContractDetailsChart/ContractDetailsChart.tsx
index 091a5ed..2fda028 100644
--- a/src/components/ContractDetailsChart/ContractDetailsChart.tsx
+++ b/src/components/ContractDetailsChart/ContractDetailsChart.tsx
@@ -3,14 +3,14 @@ import { SmartChart } from "@/components/Chart/SmartChart";
 import { useChartData } from "@/hooks/useChartData";
 import { generateHistoricalTicks } from "@/utils/generateHistoricalData";
 import { transformTickData } from "@/utils/transformChartData";
-import { useDeviceDetection } from "@/hooks/useDeviceDetection";
+import { useOrientationStore } from "@/stores/orientationStore";
 
 export const ContractDetailsChart: React.FC = () => {
   const ref = useRef<{
     hasPredictionIndicators(): void;
     triggerPopup(arg: () => void): void;
   }>(null);
-  const { isDesktop } = useDeviceDetection();
+  const { isLandscape } = useOrientationStore();
 
   const historicalData = useMemo(() => {
     const data = generateHistoricalTicks("1HZ100V", 100);
@@ -25,7 +25,7 @@ export const ContractDetailsChart: React.FC = () => {
   });
 
   return (
-    <div className={`relative bg-white shadow-md rounded-lg ${isDesktop ? 'h-full' : 'h-[400px]'}`}>
+    <div className={`relative bg-white shadow-md rounded-lg ${isLandscape ? 'h-full' : 'h-[400px]'}`}>
       <div className="absolute inset-0">
         <SmartChart
           ref={ref}
diff --git a/src/components/PositionsSidebar/PositionsSidebar.tsx b/src/components/PositionsSidebar/PositionsSidebar.tsx
index 49b8a28..4bee560 100644
--- a/src/components/PositionsSidebar/PositionsSidebar.tsx
+++ b/src/components/PositionsSidebar/PositionsSidebar.tsx
@@ -55,7 +55,7 @@ export const PositionsSidebar: FC<PositionsSidebarProps> = ({ isOpen, onClose })
       <div className="p-6 flex-1 overflow-auto">
         <div className="flex gap-2 p-1 bg-gray-100 rounded-lg">
           <button
-            className={`flex-1 py-2 text-center font-small rounded-lg transition-all ${
+            className={`flex-1 h-8 flex items-center justify-center rounded-lg transition-all ${
               isOpenTab 
                 ? "bg-white text-black shadow-sm" 
                 : "text-gray-500 hover:bg-gray-50"
@@ -65,7 +65,7 @@ export const PositionsSidebar: FC<PositionsSidebarProps> = ({ isOpen, onClose })
             Open
           </button>
           <button
-            className={`flex-1 py-2 text-center font-medium rounded-lg transition-all ${
+            className={`flex-1 h-8 flex items-center justify-center rounded-lg transition-all ${
               !isOpenTab 
                 ? "bg-white text-black shadow-sm" 
                 : "text-gray-500 hover:bg-gray-50"
diff --git a/src/components/PositionsSidebar/components/FilterDropdown.tsx b/src/components/PositionsSidebar/components/FilterDropdown.tsx
index 22f6c09..bd2c63d 100644
--- a/src/components/PositionsSidebar/components/FilterDropdown.tsx
+++ b/src/components/PositionsSidebar/components/FilterDropdown.tsx
@@ -51,9 +51,9 @@ export const FilterDropdown: FC<FilterDropdownProps> = ({
             <>
               <li 
                 className="p-2 hover:bg-gray-100 cursor-pointer"
-                onClick={() => handleSelect("All trade types")}
+                onClick={() => handleSelect("Trade types")}
               >
-                All trade types
+                Trade types
               </li>
               {TRADE_TYPES.map((type) => (
                 <li 
diff --git a/src/components/PositionsSidebar/hooks/useFilteredPositions.ts b/src/components/PositionsSidebar/hooks/useFilteredPositions.ts
index 03f82d0..c89742b 100644
--- a/src/components/PositionsSidebar/hooks/useFilteredPositions.ts
+++ b/src/components/PositionsSidebar/hooks/useFilteredPositions.ts
@@ -26,7 +26,7 @@ export const useFilteredPositions = ({
       setSelectedFilter("All time");
       setFilteredPositions(closedPositions);
     } else {
-      setSelectedFilter("All trade types");
+      setSelectedFilter("Trade types");
       setFilteredPositions(allPositions);
     }
   }, [isOpenTab, allPositions, closedPositions]);
@@ -36,7 +36,7 @@ export const useFilteredPositions = ({
 
     // Filter positions based on selected filter
     const positions = !isOpenTab ? closedPositions : allPositions;
-    if (filter === "All trade types" || filter === "All time") {
+    if (filter === "Trade types" || filter === "All time") {
       setFilteredPositions(positions);
     } else if (!isOpenTab) {
       // Time-based filtering logic would go here
diff --git a/src/layouts/MainLayout/Header.tsx b/src/layouts/MainLayout/Header.tsx
index 162c980..232b04f 100644
--- a/src/layouts/MainLayout/Header.tsx
+++ b/src/layouts/MainLayout/Header.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { useOrientationStore } from "@/stores/orientationStore";
 import { useClientStore } from "@/stores/clientStore";
-import { AccountSwitcher } from "@/components/AccountSwitcher";
+// import { AccountSwitcher } from "@/components/AccountSwitcher";
+import { BalanceDisplay } from "@/components/BalanceDisplay";
 
 interface HeaderProps {
   className?: string;
@@ -42,7 +43,8 @@ export const Header: React.FC<HeaderProps> = ({
         <div className={isLandscape ? "flex items-center gap-4" : "flex-1"}>
           {isLoggedIn && (
             <div className={isLandscape ? "px-4" : ""}>
-              <AccountSwitcher />
+              {/* <AccountSwitcher /> */}
+              <BalanceDisplay />
             </div>
           )}
         </div>
diff --git a/src/layouts/MainLayout/MainLayout.tsx b/src/layouts/MainLayout/MainLayout.tsx
index 7838ac0..c34b4a9 100644
--- a/src/layouts/MainLayout/MainLayout.tsx
+++ b/src/layouts/MainLayout/MainLayout.tsx
@@ -15,7 +15,7 @@ interface MainLayoutProps {
 }
 
 export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
-  const { isMobile, isDesktop } = useDeviceDetection()
+  const { isMobile } = useDeviceDetection()
   const { isLandscape, setIsLandscape } = useOrientationStore()
   const { isSidebarOpen, setSidebarOpen } = useMainLayoutStore()
   const [isMenuOpen, setMenuOpen] = React.useState(false)
@@ -44,7 +44,7 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
     <div className="min-h-[100dvh] h-[100dvh] flex flex-col">
       {isHeaderVisible && <Header className="sticky top-0 z-50 w-full" />}
       <div
-        className={`flex flex-1 relative ${isDesktop ? "overflow-hidden" : ""}`}
+        className={`flex flex-1 relative ${isLandscape ? "overflow-hidden" : ""}`}
       >
         {isLandscape && (
           <SideNav
diff --git a/src/screens/ContractDetailsPage/ContractDetailsPage.tsx b/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
index a06a63c..0ab91a3 100644
--- a/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
+++ b/src/screens/ContractDetailsPage/ContractDetailsPage.tsx
@@ -10,7 +10,7 @@ import {
   OrderDetails,
   EntryExitDetails,
 } from "./components";
-import { useDeviceDetection } from "@/hooks/useDeviceDetection";
+import { useOrientationStore } from "@/stores/orientationStore";
 
 const MobileContractDetailsPage: React.FC = () => {
   const navigate = useNavigate();
@@ -56,8 +56,8 @@ const MobileContractDetailsPage: React.FC = () => {
 };
 
 const ContractDetailsPage: React.FC = () => {
-  const { isMobile } = useDeviceDetection();
-  return isMobile ? (
+  const { isLandscape } = useOrientationStore();
+  return !isLandscape ? (
     <MobileContractDetailsPage />
   ) : (
     <DesktopContractDetailsPage />
diff --git a/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx b/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx
index e005b10..0269704 100644
--- a/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx
+++ b/src/screens/ContractDetailsPage/DesktopContractDetailsPage.tsx
@@ -12,7 +12,7 @@ const DesktopContractDetailsPage: React.FC = () => {
   const navigate = useNavigate()
 
   return (
-    <div className="flex flex-col h-screen bg-gray-50 w-full" data-testid="desktop-contract-details">
+    <div className="flex flex-col bg-gray-50 w-full" data-testid="desktop-contract-details">
       <div className="flex justify-between items-center p-4 bg-white">
         <h1 className="text-xl font-bold mx-auto">Contract details</h1>
         <button onClick={() => navigate(-1)} className="text-gray-600">
@@ -20,14 +20,14 @@ const DesktopContractDetailsPage: React.FC = () => {
         </button>
       </div>
 
-      <div className="flex flex-1 overflow-hidden relative">
+      <div className="flex flex-1 overflow-hidden relative m-4">
         <div className="w-[320px] border-r bg-white flex flex-col" data-testid="left-panel">
-          <div className="flex-1 overflow-y-auto p-4 pb-40" data-testid="content-area">
+          <div className="flex-1 overflow-y-auto pb-20 space-y-4 bg-gray-50" data-testid="content-area">
             <ContractSummary />
             <OrderDetails />
             <EntryExitDetails />
           </div>
-          <div className="absolute bottom-16 left-0 right-0 m-4 w-[290px] b-[55px]" data-testid="close-button-container">
+          <div className="absolute bottom-0 left-0 right-0 m-4 w-[290px] b-[55px]" data-testid="close-button-container">
             <div className="max-w-[1200px] mx-auto">
               <button
                 onClick={() => navigate(-1)}
@@ -39,7 +39,7 @@ const DesktopContractDetailsPage: React.FC = () => {
           </div>
         </div>
         <div className="flex-1 flex flex-col">
-          <div className="m-4 mb-20 bg-white rounded-lg border h-full text-gray-500 ">
+          <div className="ml-4 bg-white rounded-lg border h-full text-gray-500">
             <ContractDetailsChart />
           </div>
         </div>
diff --git a/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx b/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx
index 719d52f..16359be 100644
--- a/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx
+++ b/src/screens/ContractDetailsPage/__tests__/DesktopContractDetailsPage.test.tsx
@@ -72,7 +72,7 @@ describe("DesktopContractDetailsPage", () => {
 
     // Check main container
     const mainContainer = screen.getByTestId("desktop-contract-details");
-    expect(mainContainer).toHaveClass("flex flex-col h-screen bg-gray-50 w-full");
+    expect(mainContainer).toHaveClass("flex flex-col bg-gray-50 w-full");
 
     // Check left panel
     const leftPanel = screen.getByTestId("left-panel");
@@ -80,11 +80,11 @@ describe("DesktopContractDetailsPage", () => {
 
     // Check content area
     const contentArea = screen.getByTestId("content-area");
-    expect(contentArea).toHaveClass("flex-1 overflow-y-auto p-4 pb-40");
+    expect(contentArea).toHaveClass("flex-1 overflow-y-auto pb-20 space-y-4 bg-gray-50");
 
     // Check close button container
     const closeButtonContainer = screen.getByTestId("close-button-container");
-    expect(closeButtonContainer).toHaveClass("absolute bottom-16 left-0 right-0 m-4 w-[290px] b-[55px]");
+    expect(closeButtonContainer).toHaveClass("absolute bottom-0 left-0 right-0 m-4 w-[290px] b-[55px]");
   });
 
   it("renders in correct order", () => {
diff --git a/src/screens/ContractDetailsPage/components/ContractSummary.tsx b/src/screens/ContractDetailsPage/components/ContractSummary.tsx
index d96c6b2..a672b8e 100644
--- a/src/screens/ContractDetailsPage/components/ContractSummary.tsx
+++ b/src/screens/ContractDetailsPage/components/ContractSummary.tsx
@@ -11,7 +11,7 @@ export const ContractSummary: React.FC = () => {
 
   const { type, market, stake, profit } = contractDetails;
   return (
-    <div className="h-[104px] p-4 bg-white rounded-lg mb-4 border-b border-gray-300" style={{ boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.03)' }}>
+    <div className="h-[104px] w-full p-4 bg-white rounded-lg border-b border-gray-300" style={{ boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 1px 2px 0px rgba(0, 0, 0, 0.03)' }}>
       <div className="flex justify-between">
         <div>
           <div className=" mb-1">
diff --git a/src/screens/PositionsPage/PositionsPage.tsx b/src/screens/PositionsPage/PositionsPage.tsx
index 552da2f..9b7cc3d 100644
--- a/src/screens/PositionsPage/PositionsPage.tsx
+++ b/src/screens/PositionsPage/PositionsPage.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Card, CardContent } from "../../components/ui/card";
 import { useNavigate } from "react-router-dom";
+import { ContractSummary } from "../ContractDetailsPage/components";
 
 const positions = [
   {
@@ -21,9 +21,19 @@ const positions = [
     duration: "00:05:00",
     isOpen: false,
   },
+  {
+    id: 3,
+    type: "Rise",
+    market: "Volatility 100 (1s) Index",
+    stake: "10.00 USD",
+    profit: "+0.00 USD",
+    duration: "00:05:00",
+    isOpen: false,
+  },
 ];
 
 const PositionsPage: React.FC = () => {
+  const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<"open" | "closed">("open");
   const [swipedCard, setSwipedCard] = useState<number | null>(null);
 
@@ -31,7 +41,7 @@ const PositionsPage: React.FC = () => {
     setSwipedCard(null);
   };
 
-  const handleTouchMove = (e: React.TouchEvent, id: number) => {
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>, id: number) => {
     const touch = e.touches[0];
     if (touch.clientX < 250) {
       setSwipedCard(id);
@@ -56,13 +66,13 @@ const PositionsPage: React.FC = () => {
   }, [swipedCard]);
 
   return (
-    <div className="flex flex-col flex-1 h-full bg-white"> 
+    <div className="flex flex-col flex-1 h-full bg-white">
       {/* Tabs */}
       <div className="flex sticky top-0 z-10 px-4 bg-white border-b border-border">
         <button
           className={`flex-1 py-3 border-b-2 transition-colors ${
-            activeTab === "open" 
-              ? "border-primary text-primary" 
+            activeTab === "open"
+              ? "border-primary text-primary"
               : "border-transparent text-muted-foreground"
           }`}
           onClick={() => setActiveTab("open")}
@@ -71,8 +81,8 @@ const PositionsPage: React.FC = () => {
         </button>
         <button
           className={`flex-1 py-3 border-b-2 transition-colors ${
-            activeTab === "closed" 
-              ? "border-primary text-primary" 
+            activeTab === "closed"
+              ? "border-primary text-primary"
               : "border-transparent text-muted-foreground"
           }`}
           onClick={() => setActiveTab("closed")}
@@ -84,51 +94,43 @@ const PositionsPage: React.FC = () => {
       {/* Positions List */}
       <div className="flex-1 overflow-y-auto px-2 pb-4 pt-2 space-y-2 bg-gray-100">
         {positions
-          .filter((position) => (activeTab === "open" ? position.isOpen : !position.isOpen))
-          .map((position) => {
-            const navigate = useNavigate();
-            return (
+          .filter((position) =>
+            activeTab === "open" ? position.isOpen : !position.isOpen
+          )
+          .map((position) => (
+            <div
+              key={position.id}
+              className="relative flex transition-transform duration-300"
+              onTouchStart={handleTouchStart}
+              onTouchMove={(e) => handleTouchMove(e, position.id)}
+              onTouchEnd={handleTouchEnd}
+              onMouseEnter={() => setSwipedCard(position.id)}
+              onMouseLeave={() => setSwipedCard(null)}
+            >
               <div
-                key={position.id}
-                className="relative flex transition-transform duration-300"
-                onTouchStart={handleTouchStart}
-                onTouchMove={(e) => handleTouchMove(e, position.id)}
-                onTouchEnd={handleTouchEnd}
-                onMouseEnter={() => setSwipedCard(position.id)}
-                onMouseLeave={() => setSwipedCard(null)}
+                className={`relative flex transition-transform duration-300 w-full cursor-pointer ${
+                  swipedCard === position.id
+                    ? "translate-x-[-4rem]"
+                    : "translate-x-0"
+                }`}
+                onClick={() => {
+                  navigate(`/contract/${position.id}`);
+                }}
               >
-                <div className={`relative flex transition-transform duration-300 w-full ${swipedCard === position.id ? "-translate-x-0" : "translate-x-0"}`}>
-                  <Card className={`w-full lg:w-full cursor-pointer flex transition-all duration-300 ${
-                    swipedCard === position.id ? "translate-x-[-4rem]" : "translate-x-0"
-                  }`}
-                  onClick={() => navigate(`/contract/${position.id}`)}
-                >
-                  <CardContent className="p-4 w-full">
-                    <div className="flex justify-between">
-                      <div>
-                        <div className="text-red-500 font-bold">{position.type}</div>
-                        <div className="text-gray-500 text-sm">{position.market}</div>
-                      </div>
-                      <div className="text-right">
-                        <div className="text-gray-700">{position.stake}</div>
-                        <div className="text-green-500">{position.profit}</div>
-                      </div>
-                    </div>
-                    <div className="text-gray-500 text-sm mt-2">{position.duration}</div>
-                  </CardContent>
-                </Card>
+                <div className="w-full">
+                  <ContractSummary />
+                </div>
               </div>
-                <button
-                  className={`absolute right-0 h-full w-16 bg-red-600 text-white font-bold flex items-center justify-center transition-all duration-300 rounded-tr-lg rounded-br-lg ${
-                    swipedCard === position.id ? "flex" : "hidden"
-                  }`}
-                  onClick={() => console.log("Close action triggered")}
-                >
-                  Close
-                </button>
-              </div>
-            );
-          })}
+              <button
+                className={`absolute right-0 h-[104px] w-16 bg-red-600 text-xs text-white font-bold flex items-center justify-center transition-all duration-300 rounded-r-lg ${
+                  swipedCard === position.id ? "flex" : "hidden"
+                }`}
+                onClick={() => console.log("Close action triggered")}
+              >
+                Close
+              </button>
+            </div>
+          ))}
       </div>
     </div>
   );