diff --git a/src/dashboard.html b/src/dashboard.html
index 0275328..81c0a6d 100644
--- a/src/dashboard.html
+++ b/src/dashboard.html
@@ -34,264 +34,719 @@
 
     <!-- Start Content -->
         <section class="container mx-auto flex gap-16 mt-[40px] mb-[72px]">     
-            <!-- Sidebar -->
-            <div id="sidebar" class="md:hidden block sidebar fixed left-0 top-0 w-[264px] h-full border border-[#E4E7E9] shadow-md transform -translate-x-full bg-white z-50 transform transition-transform duration-300 ease">
-                <button id="closeSidebar" class="flex items-center justify-end w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer text-[#5F6C72]">
-                    <img src="../assets/images/closeIcon.svg" alt="Close" class="w-6 h-6">
-                </button>
-                <ul class="mt-4">
-                    <a href="./dashboard.html" class="flex items-center gap-3 bg-[#FA8232] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Stackwhite.svg" alt="Stack">
-                        <p class="text-white text-sm font-semibold">Dashboard</p>
-                    </a>
-                    <a href="./orderHistory.html" class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Storefront@2x.svg" alt="Storefront">
-                        <p class="text-[#5F6C72] text-sm font-normal">Order History</p>
-                    </a>
-                    <li class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/MapPinLine.svg" alt="MapPinLine">
-                        <p class="text-[#5F6C72] text-sm font-normal">Track Order</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/ShoppingCartSimple.svg" alt="Shopping Cart">
-                        <p class="text-[#5F6C72] text-sm font-normal">Shopping Cart</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Heart.svg" alt="Heart">
-                        <p class="text-[#5F6C72] text-sm font-normal">Wishlist</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/ArrowsCounterClockwise.svg" alt="Clockwise">
-                        <p class="text-[#5F6C72] text-sm font-normal">Compare</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/NotebookGray.svg" alt="Notebook">
-                        <p class="text-[#5F6C72] text-sm font-normal">Cards & Address</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/ClockClockwise.svg" alt="Clock">
-                        <p class="text-[#5F6C72] text-sm font-normal">Browsing History</p>
-                    </li>
-                    <a href="./dashboardSetting.html" class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Gear.svg" alt="Gear">
-                        <p class="text-[#5F6C72] text-sm font-normal">Setting</p>
-                    </a>
-                    <li class="flex items-center gap-3 w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/SignOut.svg" alt="Sign Out">
-                        <p class="text-[#5F6C72] text-sm font-normal">Log-out</p>
-                    </li>
-                </ul>
-            </div>
-            
-            <div class="md:block hidden w-[264px] h-[432px] border border-[#E4E7E9]" style="box-shadow: 0px 8px 40px 0px #00000014;">
-                <ul class="mt-4">
-                    <a href="./dashboard.html" class="flex items-center gap-3 bg-[#FA8232] w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Stackwhite.svg" alt="Stack">
-                        <p class="text-white text-sm font-semibold">Dashboard</p>
-                    </a href="./dashboard.html">
-                    <a href="./orderHistory.html" class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Storefront@2x.svg" alt="Storefront">
-                        <p class="text-[#5F6C72] text-sm font-normal">Order History</p>
-                    </a>
-                    <li class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/MapPinLine.svg" alt="MapPinLine">
-                        <p class="text-[#5F6C72] text-sm font-normal">Track Order</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/ShoppingCartSimple.svg" alt="Shopping Cart">
-                        <p class="text-[#5F6C72] text-sm font-normal">Shopping Cart</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Heart.svg" alt="Heart">
-                        <p class="text-[#5F6C72] text-sm font-normal">Wishlist</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/ArrowsCounterClockwise.svg" alt="Clockwise">
-                        <p class="text-[#5F6C72] text-sm font-normal">Compare</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/NotebookGray.svg" alt="Notebook">
-                        <p class="text-[#5F6C72] text-sm font-normal">Cards & Address</p>
-                    </li>
-                    <li class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/ClockClockwise.svg" alt="Clock">
-                        <p class="text-[#5F6C72] text-sm font-normal">Browsing History</p>
-                    </li>
-                    <a href="./dashboardSetting.html" class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/Gear.svg" alt="Gear">
-                        <p class="text-[#5F6C72] text-sm font-normal">Setting</p>
-                    </a>
-                    <li class="flex items-center gap-3 w-[264px] h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
-                        <img src="../assets/images/SignOut.svg" alt="Sign Out">
-                        <p class="text-[#5F6C72] text-sm font-normal">Log-out</p>
-                    </li>
-                </ul>
-            </div>
-
-            <div class="md:px-0 px-2 w-full">
-                <button id="toggleButton" class="md:hidden flex items-center gap-2 mb-4 text-white rounded">
-                    <img src="../assets/images/burger-menu.svg" class="w-6 h-6" alt="Toggle Sidebar">
-                    <p class="text-black">Dashboard</p>
-                </button>
-                <h1 class="text-[#191C1F] font-semibold text-[20px]">Hello, Kevin</h1>
-                <p class="text-[#475156] md:w-[432px] font-medium text-sm mt-3">From your account dashboard. you can easily check & view your <a href="#" class="text-[#2DA5F3]">Recent Orders</a>, manage your <a href="#" class="text-[#2DA5F3]">Shipping and Billing Addresses</a> and edit your <a href="#" class="text-[#2DA5F3]">Password</a> and <a href="#" class="text-[#2DA5F3]">Account Details.</a></p>
-                <div class="flex md:flex-row items-center flex-col gap-6">
-                    <!-- Account Info -->
-                        <div class="w-[312px] h-[312px] border border-[#E4E7E9] mt-6">
-                            <h1 class="text-[#191C1F] text-sm font-semibold uppercase ltr:pl-6 rtl:pr-6 py-4">Account Info</h1>
-                            <hr>
-                            <div class="flex items-center gap-4 ltr:ml-6 rtl:mr-6 mt-[22px]">
-                                <img src="../assets/images/team2.webp" class="w-[48px] h-[48px] rounded-full" alt="Image">
-                                <span>
-                                    <h1 class="text-[#191C1F] text-base font-medium">Kevin Gilbert</h1>
-                                    <p class="text-[#5F6C72] text-sm font-normal">Dhaka - 1207, Bangladesh</p>
-                                </span>
+            <div x-data="{ activePage: 'dashboard' }" class="md:flex gap-[72px]">
+                <div x-data="{ open: false }">
+                    <button @click="open = !open" class="md:hidden flex items-center gap-5 p-[3px] text-gray-800">
+                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
+                        </svg>
+                        <p>Dashboard</p>
+                    </button>
+                
+                    <div :class="{ 'block': open, 'hidden': !open }" class="md:block hidden mt-5 sm:mt-0 mb-2 mx-auto w-[266px] sm:h-[432px] border border-[#E4E7E9] bg-white " style="box-shadow: 0px 8px 40px 0px #00000014;" >
+                        <ul class="mt-4">
+                            <li @click="activePage = 'dashboard'" 
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'dashboard' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img :src="activePage === 'dashboard' ? '../assets/images/Stackwhite.svg' : '../assets/images/Stackgray.svg'" alt="Stack">
+                                <p class="text-sm" :class="activePage === 'dashboard' ? 'text-white' : 'text-[#5F6C72] font-normal'">Dashboard</p>
+                            </li>
+                        
+                            <li @click="activePage = 'orderHistory'"
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'orderHistory' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img :src="activePage === 'orderHistory' ? '../assets/images/StorefrontW.svg' : '../assets/images/Storefront@2x.svg'" alt="Storefront">
+                                <p class="text-sm" :class="activePage === 'orderHistory' ? 'text-white' : 'text-[#5F6C72] font-normal'">Order History</p>
+                            </li>
+                        
+                            <li @click="activePage = 'trackOrder'"
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'trackOrder' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img :src="activePage === 'trackOrder' ? '../assets/images/MapPinLine.svg' : '../assets/images/MapPinLine.svg'" alt="Storefront">
+                                <p class="text-sm" :class="activePage === 'trackOrder' ? 'text-white' : 'text-[#5F6C72] font-normal'">Track Order</p>
+                            </li>
+                
+                            <li @click="activePage = 'Shopping'"
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'Shopping' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img src="../assets/images/ShoppingCartSimple.svg" alt="ShoppingCartSimple">
+                                <p class="text-sm" :class="activePage === 'Shopping' ? 'text-white' : 'text-[#5F6C72] font-normal'">Shopping Cart</p>
+                            </li>
+                
+                            <li @click="activePage = 'Wishlist'"
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'Wishlist' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img src="../assets/images/Heart.svg" alt="Heart">
+                                <p class="text-sm" :class="activePage === 'Wishlist' ? 'text-white' : 'text-[#5F6C72] font-normal'">Wishlist</p>
+                            </li>
+                
+                            <li @click="activePage = 'Compare'"
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'Compare' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img src="../assets/images/ArrowsCounterClockwise.svg" alt="ClockClockwise">
+                                <p class="text-sm" :class="activePage === 'Compare' ? 'text-white' : 'text-[#5F6C72] font-normal'">Compare</p>
+                            </li>
+                
+                            <li @click="activePage = 'Cards & Address'"
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'Cards & Address' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img src="../assets/images/NotebookGray.svg" alt="Notebook">
+                                <p class="text-sm" :class="activePage === 'Cards & Address' ? 'text-white' : 'text-[#5F6C72] font-normal'">Cards & Address</p>
+                            </li>
+                
+                            <li @click="activePage = 'dashboardSetting'"
+                                :class="{ 'bg-[#FA8232] text-white font-semibold': activePage === 'dashboardSetting' }"
+                                class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                <img :src="activePage === 'dashboardSetting' ? '../assets/images/whiteGear.svg' : '../assets/images/Gear.svg'" alt="Storefront">
+                                <p class="text-sm" :class="activePage === 'dashboardSetting' ? 'text-white' : 'text-[#5F6C72] font-normal'">Setting</p>
+                            </li>
+                
+                            <div x-data="{ activePage: '', showLogoutModal: false }">
+                                <li @click="activePage = 'Log-out'; showLogoutModal = true"
+                                    class="flex items-center gap-3 sm:w-[264px] w-full h-[40px] ltr:pl-6 rtl:pr-6 cursor-pointer">
+                                    <img src="../assets/images/SignOut.svg" alt="Log-out">
+                                    <p class="text-[#5F6C72] font-normal">Log-out</p>
+                                </li>
+                
+                                <!-- Logout Confirmation Modal -->
+                                <div x-show="showLogoutModal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50" x-cloak x-transition>
+                                    <div class="bg-white p-6 rounded-md shadow-lg w-[300px]">
+                                        <h2 class="text-lg font-semibold mb-4">Confirm Log-out</h2>
+                                        <p class="mb-6">Are you sure you want to log out?</p>
+                                        <div class="flex justify-end gap-3">
+                                            <button @click="showLogoutModal = false" class="bg-gray-300 px-4 py-2 rounded-md">Cancel</button>
+                                            <button class="bg-[#FA8232] text-white px-4 py-2 rounded-md">Log-out</button>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                            <div class="flex items-baseline gap-1">
-                                <h1 class="text-[#191C1F] font-normal text-sm ltr:ml-6 rtl:mr-6 mt-[20px]">Email:</h1>
-                                <p class="text-[#5F6C72] font-normal text-sm">kevin.gilbert@gmail.com</p>
+                        </ul>
+                    </div>
+                </div>
+                
+                <!-- Content  -->
+                <div class="flex-1">
+                    <!-- Dashboard Page -->
+                    <div x-show="activePage === 'dashboard'" x-transition>
+                        <div class="md:px-0 px-2 w-full">
+                            <h1 class="text-[#191C1F] font-semibold text-[20px]">Hello, Kevin</h1>
+                            <p class="text-[#475156] md:w-[432px] font-medium text-sm mt-3">From your account dashboard. you can easily check & view your <a href="#" class="text-[#2DA5F3]">Recent Orders</a>, manage your <a href="#" class="text-[#2DA5F3]">Shipping and Billing Addresses</a> and edit your <a href="#" class="text-[#2DA5F3]">Password</a> and <a href="#" class="text-[#2DA5F3]">Account Details.</a></p>
+                            <div class="flex md:flex-row items-center flex-col gap-6">
+                                <!-- Account Info -->
+                                    <div class="w-[312px] h-[312px] border border-[#E4E7E9] mt-6">
+                                        <h1 class="text-[#191C1F] text-sm font-semibold uppercase ltr:pl-6 rtl:pr-6 py-4">Account Info</h1>
+                                        <hr>
+                                        <div class="flex items-center gap-4 ltr:ml-6 rtl:mr-6 mt-[22px]">
+                                            <img src="../assets/images/team2.webp" class="w-[48px] h-[48px] rounded-full" alt="Image">
+                                            <span>
+                                                <h1 class="text-[#191C1F] text-base font-medium">Kevin Gilbert</h1>
+                                                <p class="text-[#5F6C72] text-sm font-normal">Dhaka - 1207, Bangladesh</p>
+                                            </span>
+                                        </div>
+                                        <div class="flex items-baseline gap-1">
+                                            <h1 class="text-[#191C1F] font-normal text-sm ltr:ml-6 rtl:mr-6 mt-[20px]">Email:</h1>
+                                            <p class="text-[#5F6C72] font-normal text-sm">kevin.gilbert@gmail.com</p>
+                                        </div>
+                                        <div class="flex items-baseline gap-1">
+                                            <h1 class="text-[#191C1F] font-normal text-sm ltr:ml-6 rtl:mr-6 mt-2">Sec Email: </h1>
+                                            <p class="text-[#5F6C72] font-normal text-sm">kevin12345@gmail.com</p>
+                                        </div>
+                                        <div class="flex items-baseline gap-1">
+                                            <h1 class="text-[#191C1F] font-normal text-sm ltr:ml-6 rtl:mr-6 mt-2">Phone:</h1>
+                                            <p class="text-[#5F6C72] font-normal text-sm">+1-202-555-0118</p>
+                                        </div>
+                                        <a href="#" class="flex items-center font-bold justify-center ltr:ml-6 rtl:mr-6 mt-[22px] text-[#2DA5F3] uppercase w-[155px] h-12 border-2 border-[#D5EDFD]">
+                                            Edit Account
+                                        </a>
+                                    </div>
+                                <!-- Number Of Orders -->
+                                    <div class="mt-[22px]">
+                                        <div class="w-[312px] h-[88px] bg-[#EAF6FE] flex gap-4 ltr:pl-6 rtl:pr-6 py-4">
+                                            <img src="../assets/images/dashIcon.svg" alt="Icon">
+                                            <span>
+                                                <p class="text-[#191C1F] font-semibold text-[20px]">154</p>
+                                                <p class="text-[#475156] font-normal text-sm mt-1">Total Orders</p>
+                                            </span>
+                                        </div>
+                                        <div class="w-[312px] h-[88px] bg-[#FFF3EB] flex gap-4 ltr:pl-6 rtl:pr-6 py-4 mt-6">
+                                            <img src="../assets/images/dashIcon2.svg" alt="Icon">
+                                            <span>
+                                                <p class="text-[#191C1F] font-semibold text-[20px]">05</p>
+                                                <p class="text-[#475156] font-normal text-sm mt-1">Pending Orders</p>
+                                            </span>
+                                        </div>
+                                        <div class="w-[312px] h-[88px] bg-[#EAF7E9] flex gap-4 ltr:pl-6 rtl:pr-6 py-4 mt-6">
+                                            <img src="../assets/images/dashIcon3.svg" alt="Icon">
+                                            <span>
+                                                <p class="text-[#191C1F] font-semibold text-[20px]">149</p>
+                                                <p class="text-[#475156] font-normal text-sm mt-1">Completed Orders</p>
+                                            </span>
+                                        </div>
+                                    </div>
                             </div>
-                            <div class="flex items-baseline gap-1">
-                                <h1 class="text-[#191C1F] font-normal text-sm ltr:ml-6 rtl:mr-6 mt-2">Sec Email: </h1>
-                                <p class="text-[#5F6C72] font-normal text-sm">kevin12345@gmail.com</p>
+                            <!-- Recent Orders -->
+                            <div class="mt-10 w-[350px] md:w-[984px]">
+                                <div class="bg-white border border-[#E4E7E9] rounded-[4px] overflow-hidden">
+                                    <div class="flex justify-between items-center px-6 py-4 border-b">
+                                        <h2 class="text-[#191C1F] font-medium text-sm uppercase">Recent Order</h2>
+                                        <a href="#" class="flex items-center gap-2 text-[#FA8232] text-sm font-semibold">
+                                            View all
+                                            <img src="../assets/images/oArrowRight.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Right Arrow">
+                                        </a>
+                                    </div>
+                                    <div class="overflow-x-auto">
+                                        <table class="w-[984px] md:w-full bg-white">
+                                            <thead>
+                                                <tr class="bg-[#E4E7E9]">
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Order ID</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Status</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Date</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Total</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Action</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="text-gray-700">
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#96459761</td>
+                                                    <td class="py-3 px-4 text-[#FA8232] font-semibold">IN PROGRESS</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Dec 30, 2019 05:18</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$1,500 (5 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                    <a @click="activePage = 'orderDetails'" class="flex items-center gap-2 font-medium text-[#2DA5F3]">
+                                                        View  
+                                                        <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                    </a>
+
+                                                    <!-- Content section that will be displayed when the link is clicked -->
+                                                    <div x-show="activePage === 'orderDetails'" x-transition>
+                                                        <!-- Your content here -->
+                                                        <h2>Order Details</h2>
+                                                        <p>Information about the order goes here...</p>
+                                                    </div>
+
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#71667167</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$80 (11 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#95214362</td>
+                                                    <td class="py-3 px-4 text-[#EE5858] font-semibold">CANCELED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Mar 20, 2019 23:14</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$160 (3 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#71667167</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$80 (1 Product)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#51746385</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$2,300 (2 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#51746385</td>
+                                                    <td class="py-3 px-4 text-[#EE5858] font-semibold">CANCELED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Dec 30, 2019 07:52</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$70 (1 Product)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#673971743</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Dec 7, 2019 23:26</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$220 (1 Product)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                </div>
                             </div>
-                            <div class="flex items-baseline gap-1">
-                                <h1 class="text-[#191C1F] font-normal text-sm ltr:ml-6 rtl:mr-6 mt-2">Phone:</h1>
-                                <p class="text-[#5F6C72] font-normal text-sm">+1-202-555-0118</p>
                             </div>
-                            <a href="#" class="flex items-center font-bold justify-center ltr:ml-6 rtl:mr-6 mt-[22px] text-[#2DA5F3] uppercase w-[155px] h-12 border-2 border-[#D5EDFD]">
-                                Edit Account
-                            </a>
                         </div>
-                    <!-- Number Of Orders -->
-                        <div class="mt-[22px]">
-                            <div class="w-[312px] h-[88px] bg-[#EAF6FE] flex gap-4 ltr:pl-6 rtl:pr-6 py-4">
-                                <img src="../assets/images/dashIcon.svg" alt="Icon">
-                                <span>
-                                    <p class="text-[#191C1F] font-semibold text-[20px]">154</p>
-                                    <p class="text-[#475156] font-normal text-sm mt-1">Total Orders</p>
-                                </span>
-                            </div>
-                            <div class="w-[312px] h-[88px] bg-[#FFF3EB] flex gap-4 ltr:pl-6 rtl:pr-6 py-4 mt-6">
-                                <img src="../assets/images/dashIcon2.svg" alt="Icon">
-                                <span>
-                                    <p class="text-[#191C1F] font-semibold text-[20px]">05</p>
-                                    <p class="text-[#475156] font-normal text-sm mt-1">Pending Orders</p>
-                                </span>
-                            </div>
-                            <div class="w-[312px] h-[88px] bg-[#EAF7E9] flex gap-4 ltr:pl-6 rtl:pr-6 py-4 mt-6">
-                                <img src="../assets/images/dashIcon3.svg" alt="Icon">
-                                <span>
-                                    <p class="text-[#191C1F] font-semibold text-[20px]">149</p>
-                                    <p class="text-[#475156] font-normal text-sm mt-1">Completed Orders</p>
-                                </span>
+                    </div>
+            
+                    <!-- Order History Page -->
+                    <div x-show="activePage === 'orderHistory'" x-transition>
+                        <section class="container mx-auto flex  gap-16  mb-[72px]">
+                            <div class="w-[370px] md:w-[984px] md:px-0 px-2">
+                                <div class="bg-white border border-[#E4E7E9] rounded-[4px] overflow-hidden">
+                                    <div class="flex justify-between items-center px-6 py-4 border-b">
+                                        <h2 class="text-[#191C1F] font-medium text-sm uppercase">Recent Order</h2>
+                                        <a href="#" class="flex items-center gap-2 text-[#FA8232] text-sm font-semibold">
+                                            View all
+                                            <img src="../assets/images/oArrowRight.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Right Arrow">
+                                        </a>
+                                    </div>
+                                    <div class="overflow-x-auto">
+                                        <table class="w-[984px] md:w-full bg-white">
+                                            <thead>
+                                                <tr class="bg-[#E4E7E9]">
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Order ID</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Status</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Date</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Total</th>
+                                                    <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Action</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody class="text-gray-700">
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#96459761</td>
+                                                    <td class="py-3 px-4 text-[#FA8232] font-semibold">IN PROGRESS</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Dec 30, 2019 05:18</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$1,500 (5 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#71667167</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$80 (11 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#95214362</td>
+                                                    <td class="py-3 px-4 text-[#EE5858] font-semibold">CANCELED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Mar 20, 2019 23:14</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$160 (3 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#71667167</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$80 (1 Product)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#51746385</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$2,300 (2 Products)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#51746385</td>
+                                                    <td class="py-3 px-4 text-[#EE5858] font-semibold">CANCELED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Dec 30, 2019 07:52</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$70 (1 Product)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <td class="py-3 px-4 text-[#191C1F] font-medium">#673971743</td>
+                                                    <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
+                                                    <td class="py-3 px-4 text-[#5F6C72]">Dec 7, 2019 23:26</td>
+                                                    <td class="py-3 px-4 text-[#475156]">$220 (1 Product)</td>
+                                                    <td class="py-3 px-4">
+                                                        <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
+                                                            <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
+                                                        </a>
+                                                    </td>
+                                                </tr>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                    <div class="flex items-center justify-center space-x-2 mt-[40px] mb-6">
+                                        <button class="flex justify-center items-center rtl:m-2 w-10 h-10 border-2 border-[#FA8232] text-[#FA8232] rounded-full">
+                                            <img src="../assets/images/oArrowLeft.svg" alt="Left Arrow" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
+                                        </button>
+                        
+                                        <button class="flex justify-center items-center w-10 h-10 bg-[#FA8232] text-white rounded-full">01</button>
+                                        <button class="flex justify-center items-center w-10 h-10 border-2 border-gray-300 text-gray-500 rounded-full hover:bg-[#FA8232] hover:text-white">02</button>
+                                        <button class="flex justify-center items-center w-10 h-10 border-2 border-gray-300 text-gray-500 rounded-full hover:bg-[#FA8232] hover:text-white">03</button>
+                                        <button class="flex justify-center items-center w-10 h-10 border-2 border-gray-300 text-gray-500 rounded-full hover:bg-[#FA8232] hover:text-white">04</button>
+                                        <button class="flex justify-center items-center w-10 h-10 border-2 border-gray-300 text-gray-500 rounded-full hover:bg-[#FA8232] hover:text-white">05</button>
+                                        <button class="flex justify-center items-center w-10 h-10 border-2 border-gray-300 text-gray-500 rounded-full hover:bg-[#FA8232] hover:text-white">06</button>
+                                
+                                        <button class="flex justify-center items-center w-10 h-10 border-2 border-[#FA8232] text-[#FA8232] rounded-full">
+                                            <img src="../assets/images/oArrowRight.svg" alt="Right Arrow" class="transform rtl:scale-x-[-1] ltr:scale-x-100">
+                                        </button>
+                                    </div>
+                                </div>
                             </div>
+                            
+                    </section>
+                    </div>
+            
+                    <!-- Track Order -->
+                    <div x-show="activePage === 'trackOrder'" x-transition>
+                        <div class="container mx-auto mt-12 mb-24 ltr:pl-5 rtl:pr-5">
+                            <h1 class="text-[#191C1F] text-[32px] font-semibold leading-[40px]">Track Order</h1>
+                            <p class="md:w-[760px] text-[#5F6C72] mt-4 text-base font-normal">To track your order please enter your order ID in the input field below and press the “Track Order” button. this was given to you on your receipt and in the confirmation email you should have received.</p>
+                                <form class="flex flex-wrap gap-3 mt-6">
+                                    <div>
+                                        <label class="block text-[#191C1F] font-normal mb-2" for="display-name">Order ID</label>
+                                        <input type="text" id="order-id" placeholder="ID..." class="md:w-[424px] w-[300px] h-10 border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                    </div>
+                            
+                                    <div>
+                                        <label class="block text-[#191C1F] font-normal mb-2" for="username">Billing Email</label>
+                                        <input type="email" id="email-address" placeholder="Email address" class="md:w-[424px] w-[300px] h-10 border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                    </div>
+                                </form>
+                                <div class="flex items-center gap-[2px] mt-[18px]">
+                                    <img src="../assets/images/Info.svg" alt="Info Icon">
+                                    <p class="text-[#5F6C72] font-normal text-sm">Order ID that we sended to your in your email address.</p>
+                                </div>
+                                <button class="w-[217px] bg-[#FA8232] flex items-center justify-center gap-2 text-white py-2 rounded-[2px] h-[48px] font-bold text-sm mt-4">
+                                    Track Order
+                                <img src="../assets/images/ArrowRight.svg" class="transform rtl:scale-x-[-1] ltr:scale-x-100" alt="Right Arrow">
+                                </button>
                         </div>
-                </div>
-                <!-- Recent Orders -->
-                <div class="w-full md:w-[984px] mt-10">
-                    <div class="bg-white border border-[#E4E7E9] rounded-[4px] overflow-hidden">
-                        <div class="flex justify-between items-center px-6 py-4 border-b">
-                            <h2 class="text-[#191C1F] font-medium text-sm uppercase">Recent Order</h2>
-                            <a href="#" class="flex items-center gap-2 text-[#FA8232] text-sm font-semibold">
-                                View all
-                                <img src="../assets/images/oArrowRight.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Right Arrow">
-                            </a>
+                    </div>
+                    <!-- Track Order -->
+
+                    <!-- Wishlist -->
+                        <div x-show="activePage === 'Wishlist'" x-transition>
+                            <section class="container mx-auto flex justify-center mb-[72px]">
+                                <div class="md:w-full w-[370px] md:px-0 px-2">
+                                    <div class="bg-white border border-[#E4E7E9] rounded-[4px] overflow-hidden">
+                                        <div>
+                                            <h1 class="pt-6 ltr:pl-[32px] rtl:pr-[32px] text-[#191C1F] font-medium text-lg">Wishlist</h1>
+                                            <div class="overflow-x-auto pt-[20px]">
+                                                <table class="w-full min-w-[600px] table-auto">
+                                                <thead>
+                                                    <tr class="bg-gray-200">
+                                                    <th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium">PRODUCTS</th>
+                                                    <th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium">PRICE</th>
+                                                    <th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium">Stock Status</th>
+                                                    <th class="ltr:text-left rtl:text-right p-3 text-[#475156] text-sm font-medium">Actions</th>
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    <tr class="border-b">
+                                                        <td class="p-3 flex gap-2">
+                                                            <img src="../assets/images/wishlistimg1.webp" class="w-[72px] h-[72px] object-cover" alt="Wishlist">
+                                                            <p class="w-[419px] text-[#475156]">Bose Sport Earbuds - Wireless Earphones - Bluetooth In Ear Headphones for Workouts and Running, Triple Black</p>
+                                                        </td>
+                                                        <td class="p-3 text-black">
+                                                            <span class="text-[#929FA5]">$1299</span>
+                                                            $1299
+                                                        </td>
+                                                        <td class="p-3 text-[#2DB224] font-semibold uppercase">IN STOCK</td>
+                                                        <td class="trContent relative p-8 text-[#191C1F] font-medium  items-center">
+                                                                <a href="#" class="text-white bg-[#FA8232] uppercase w-[174px] h-[48px] flex gap-2 items-center justify-center rounded-[2px]">add to card
+                                                                    <img src="../assets/images/ShoppingCartwh.svg" alt="Shopping Cart">
+                                                                </a>
+                                                                <div>
+                                                                    <img src="../assets/images/closeIcon.svg" class="absolute right-0 top-10 cursor-pointer" alt="Close Icon">
+                                                                </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="border-b">
+                                                        <td class="p-3 flex gap-2">
+                                                            <img src="../assets/images/wishlistimg2.webp" class="w-[72px] h-[72px] object-cover" alt="Wishlist">
+                                                            <p class="w-[419px] text-[#475156]">Simple Mobile 5G LTE Galexy 12 Mini 512GB Gaming Phone</p>
+                                                        </td>
+                                                        <td class="p-3 text-black">
+                                                            $2,300.00
+                                                        </td>
+                                                        <td class="p-3 text-[#2DB224] font-semibold uppercase">IN STOCK</td>
+                                                        <td class="trContent relative p-8 text-[#191C1F] font-medium  items-center">
+                                                                <a href="#" class="text-white bg-[#FA8232] uppercase w-[174px] h-[48px] flex gap-2 items-center justify-center rounded-[2px]">add to card
+                                                                    <img src="../assets/images/ShoppingCartwh.svg" alt="Shopping Cart">
+                                                                </a>
+                                                                <div>
+                                                                    <img src="../assets/images/closeIcon.svg" class="absolute right-0 top-10 cursor-pointer" alt="Close Icon">
+                                                                </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="border-b">
+                                                        <td class="p-3 flex gap-2">
+                                                            <img src="../assets/images/wishlistimg3.webp" class="w-[72px] h-[72px] object-cover" alt="Wishlist">
+                                                            <p class="w-[419px] text-[#475156]">Portable Wshing Machine, 11lbs capacity Model 18NMFIAM</p>
+                                                        </td>
+                                                        <td class="p-3 text-black">
+                                                            $70.00
+                                                        </td>
+                                                        <td class="p-3 text-[#2DB224] font-semibold uppercase">IN STOCK</td>
+                                                        <td class="trContent relative p-8 text-[#191C1F] font-medium  items-center">
+                                                                <a href="#" class="text-white bg-[#FA8232] uppercase w-[174px] h-[48px] flex gap-2 items-center justify-center rounded-[2px]">add to card
+                                                                    <img src="../assets/images/ShoppingCartwh.svg" alt="Shopping Cart">
+                                                                </a>
+                                                                <div>
+                                                                    <img src="../assets/images/closeIcon.svg" class="absolute right-0 top-10 cursor-pointer" alt="Close Icon">
+                                                                </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="border-b">
+                                                        <td class="p-3 flex gap-2">
+                                                            <img src="../assets/images/wishlistimg4.webp" class="w-[72px] h-[72px] object-cover" alt="Wishlist">
+                                                            <p class="w-[419px] text-[#475156]">TOZO T6 True Wireless Earbuds Bluetooth Headphones Touch Control with Wireless Charging Case IPX8 Waterproof Stereo Earphones in-Ear</p>
+                                                        </td>
+                                                        <td class="p-3 text-black">
+                                                            $70.00
+                                                        </td>
+                                                        <td class="p-3 text-[#EE5858] font-semibold uppercase">OUT OF STOCK</td>
+                                                        <td class="trContent relative p-8 text-[#191C1F] font-medium  items-center">
+                                                                <a href="#" class="text-white bg-[#ADB7BC] uppercase w-[174px] h-[48px] flex gap-2 items-center justify-center rounded-[2px]">add to card
+                                                                    <img src="../assets/images/ShoppingCartwh.svg" alt="Shopping Cart">
+                                                                </a>
+                                                                <div>
+                                                                    <img src="../assets/images/closeIcon.svg" class="absolute right-0 top-10 cursor-pointer" alt="Close Icon">
+                                                                </div>
+                                                        </td>
+                                                    </tr>
+                                                    <tr class="border-b">
+                                                        <td class="p-3 flex gap-2">
+                                                            <img src="../assets/images/wishlistimg5.webp" class="w-[72px] h-[72px] object-cover" alt="Wishlist">
+                                                            <p class="w-[419px] text-[#475156]">Wyze Cam Pan v2 1080p Pan/Tilt/Zoom Wi-Fi Indoor Smart Home Camera with Color Night Vision, 2-Way Audio</p>
+                                                        </td>
+                                                        <td class="p-3 text-black">
+                                                            $1,499.99
+                                                        </td>
+                                                        <td class="p-3 text-[#2DB224] font-semibold uppercase">IN STOCK</td>
+                                                        <td class="trContent relative p-8 text-[#191C1F] font-medium  items-center">
+                                                                <a href="#" class="text-white bg-[#FA8232] uppercase w-[174px] h-[48px] flex gap-2 items-center justify-center rounded-[2px]">add to card
+                                                                    <img src="../assets/images/ShoppingCartwh.svg" alt="Shopping Cart">
+                                                                </a>
+                                                                <div>
+                                                                    <img src="../assets/images/closeIcon.svg" class="absolute right-0 top-10 cursor-pointer" alt="Close Icon">
+                                                                </div>
+                                                        </td>
+                                                    </tr>
+                                                </tbody>
+                                                </table>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                        </section>
+                        </div>
+                    <!-- Wishlist -->
+
+                    <!-- Setting -->
+                        <div x-show="activePage === 'dashboardSetting'" x-transition>
+                            <section class="container mx-auto flex  gap-16 mb-[72px]">
+                                <div class="md:px-0 px-2">
+                                    <!-- Account Info -->
+                                        <div class="md:w-[984px] md:h-[508px] border border-[#E4E7E9]">
+                                            <h1 class="text-[#191C1F] text-sm font-semibold uppercase ltr:pl-6 rtl:pr-6 py-4">Account Setting</h1>
+                                            <hr>
+                                            <div class="flex md:flex-row flex-col gap-4 ltr:ml-6 rtl:mr-6 mt-[22px]">
+                                                <img src="../assets/images/Avatar.webp" class="w-[176px] h-[176px] rounded-full mx-auto" alt="Image">
+                                                <form class="flex flex-wrap gap-4">
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="display-name">Display name</label>
+                                                        <input type="text" id="display-name" placeholder="Kevin" class="md:w-[360px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="username">Username</label>
+                                                        <input type="text" id="username" placeholder="Display name" class="md:w-[360px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="full-name">Full Name</label>
+                                                        <input type="text" id="full-name" placeholder="Kevin Gilbert" class="md:w-[360px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="email">Email</label>
+                                                        <input type="email" id="email" placeholder="Kevin.gilbert@gmail.com" class="md:w-[360px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="secondary-email">Secondary Email</label>
+                                                        <input type="email" id="secondary-email" placeholder="kevin12345@gmail.com" class="md:w-[360px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="phone-number">Phone Number</label>
+                                                        <input type="tel" id="phone-number" placeholder="+1-202-555-0118" class="md:w-[360px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="country">Country/Region</label>
+                                                        <select id="country" class="md:w-[360px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                            <option>Bangladesh</option>
+                                                        </select>
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="state">States</label>
+                                                        <select id="state" class="md:w-[172px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                            <option>Dhaka</option>
+                                                        </select>
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="zip-code">Zip Code</label>
+                                                        <input type="text" id="zip-code" placeholder="1207" class="md:w-[172px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                                </form>
+                                            </div>
+                                            <div class="flex items-center justify-center md:justify-start pb-3 md:pb-0">
+                                                <a href="#" class="text-white bg-[#FA8232] uppercase w-[162px] h-[48px] flex items-center justify-center rounded-[2px] md:ltr:ml-[215px] md:rtl:mr-[215px] mt-6 hover:shadow-xl">Save Changes</a>
+                                            </div>
+                                        </div>
+                    
+                                    <!-- Shipping Address -->
+                                        <div class="md:w-[480px] md:h-[860px] border border-[#E4E7E9] mt-6">
+                                            <h1 class="text-[#191C1F] text-sm font-semibold uppercase ltr:pl-6 rtl:pr-6 py-4">Shipping Address</h1>
+                                            <hr>
+                                            <div class="flex gap-4 ltr:ml-6 rtl:mr-6 mt-[22px]">
+                                                <form class="flex flex-wrap gap-3">
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="display-name">First Name</label>
+                                                        <input type="text" id="display-name" placeholder="Kevin" class="md:w-[208px] w-[300px] h-10 border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="username">Last Name</label>
+                                                        <input type="text" id="username" placeholder="Gilbert" class="md:w-[208px] w-[300px] h-10 border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="full-name">Company Name (Optional)</label>
+                                                        <input type="text" id="company-name" placeholder="" class="md:w-[432px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="email">Address</label>
+                                                        <input type="email" id="text" placeholder="Road No. 13/x, House no. 1320/C, Flat No. 5D" class="md:w-[432px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="country">Country</label>
+                                                        <select id="country" class="md:w-[432px] w-[145px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                            <option>Bangladesh</option>
+                                                        </select>
+                                                    </div>
+                    
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="country">Region/State</label>
+                                                        <select id="Region" class="md:w-[432px] w-[145px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                            <option>Bangladesh</option>
+                                                        </select>
+                                                    </div>
+                    
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="state">States</label>
+                                                        <select id="state" class="md:w-[208px] w-[145px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                            <option>Dhaka</option>
+                                                        </select>
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="zip-code">Zip Code</label>
+                                                        <input type="text" id="zip-code" placeholder="1207" class="md:w-[208px] w-[145px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                                    
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="Sec_email">Email</label>
+                                                        <input type="email" id="Sec_email" placeholder="kevin12345@gmail.com" class="md:w-[432px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                    
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="phone-number">Phone Number</label>
+                                                        <input type="tel" id="phone-number" placeholder="+1-202-555-0118" class="md:w-[432px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                                </form>
+                                            </div>
+                                            <div class="flex items-center justify-center md:justify-start pb-3 md:pb-0">
+                                                <a href="#" class="text-white bg-[#FA8232] uppercase w-[162px] h-[48px] flex items-center justify-center rounded-[2px] ltr:ml-6 rtl:mr-6 mt-6 hover:shadow-xl">Save Changes</a>
+                                            </div>
+                                        </div>
+                    
+                                    <!-- Password -->
+                                        <div class="md:w-[984px] h-[420px] border border-[#E4E7E9] mt-6">
+                                            <h1 class="text-[#191C1F] text-sm font-semibold uppercase ltr:pl-6 rtl:pr-6 py-4">Change Password</h1>
+                                            <hr>
+                                            <div class="flex gap-4 ltr:ml-6 rtl:mr-6 mt-[22px]">
+                                                <form class="flex flex-wrap gap-4">
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="display-name">Current Password</label>
+                                                        <input type="password" id="current_password" class="md:w-[936px] w-[300px] h-10 border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="username">New Password</label>
+                                                        <input type="password" placeholder="8+ characters" id="new_password" class="md:w-[936px] w-[300px] h-10 border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#77878F]">
+                                                    </div>
+                                            
+                                                    <div>
+                                                        <label class="block text-[#191C1F] font-normal mb-2" for="full-name">Confirm Password</label>
+                                                        <input type="password" id="confirm_password" class="md:w-[936px] w-[300px] border border-gray-300 p-2 rounded focus:outline-none focus:ring-0 focus:border-[#FA8232] placeholder:text-[#475156]">
+                                                    </div>
+                                            
+                                            </form>
+                                            </div>
+                                            <div class="flex items-center justify-center md:justify-start pb-3 md:pb-0">
+                                                <a href="#" class="text-white bg-[#FA8232] uppercase w-[162px] h-[48px] flex items-center justify-center rounded-[2px] ltr:ml-6 rtl:mr-6 mt-6 hover:shadow-xl">Change Passowrd</a>
+                                            </div>
+                                        </div>
+                                </div>                    
+                            </section>
                         </div>
-                        <div class="overflow-x-auto">
-                            <table class="w-[984px] md:w-full bg-white">
-                                <thead>
-                                    <tr class="bg-[#E4E7E9]">
-                                        <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Order ID</th>
-                                        <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Status</th>
-                                        <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Date</th>
-                                        <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Total</th>
-                                        <th class="py-2 px-4 ltr:text-left rtl:text-right text-[#475156] font-medium text-[12px] uppercase">Action</th>
-                                    </tr>
-                                </thead>
-                                <tbody class="text-gray-700">
-                                    <tr>
-                                        <td class="py-3 px-4 text-[#191C1F] font-medium">#96459761</td>
-                                        <td class="py-3 px-4 text-[#FA8232] font-semibold">IN PROGRESS</td>
-                                        <td class="py-3 px-4 text-[#5F6C72]">Dec 30, 2019 05:18</td>
-                                        <td class="py-3 px-4 text-[#475156]">$1,500 (5 Products)</td>
-                                        <td class="py-3 px-4">
-                                            <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
-                                                <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td class="py-3 px-4 text-[#191C1F] font-medium">#71667167</td>
-                                        <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
-                                        <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
-                                        <td class="py-3 px-4 text-[#475156]">$80 (11 Products)</td>
-                                        <td class="py-3 px-4">
-                                            <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
-                                                <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td class="py-3 px-4 text-[#191C1F] font-medium">#95214362</td>
-                                        <td class="py-3 px-4 text-[#EE5858] font-semibold">CANCELED</td>
-                                        <td class="py-3 px-4 text-[#5F6C72]">Mar 20, 2019 23:14</td>
-                                        <td class="py-3 px-4 text-[#475156]">$160 (3 Products)</td>
-                                        <td class="py-3 px-4">
-                                            <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
-                                                <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td class="py-3 px-4 text-[#191C1F] font-medium">#71667167</td>
-                                        <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
-                                        <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
-                                        <td class="py-3 px-4 text-[#475156]">$80 (1 Product)</td>
-                                        <td class="py-3 px-4">
-                                            <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
-                                                <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td class="py-3 px-4 text-[#191C1F] font-medium">#51746385</td>
-                                        <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
-                                        <td class="py-3 px-4 text-[#5F6C72]">Feb 2, 2019 19:28</td>
-                                        <td class="py-3 px-4 text-[#475156]">$2,300 (2 Products)</td>
-                                        <td class="py-3 px-4">
-                                            <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
-                                                <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td class="py-3 px-4 text-[#191C1F] font-medium">#51746385</td>
-                                        <td class="py-3 px-4 text-[#EE5858] font-semibold">CANCELED</td>
-                                        <td class="py-3 px-4 text-[#5F6C72]">Dec 30, 2019 07:52</td>
-                                        <td class="py-3 px-4 text-[#475156]">$70 (1 Product)</td>
-                                        <td class="py-3 px-4">
-                                            <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
-                                                <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
-                                            </a>
-                                        </td>
-                                    </tr>
-                                    <tr>
-                                        <td class="py-3 px-4 text-[#191C1F] font-medium">#673971743</td>
-                                        <td class="py-3 px-4 text-[#2DB224] font-semibold">COMPLETED</td>
-                                        <td class="py-3 px-4 text-[#5F6C72]">Dec 7, 2019 23:26</td>
-                                        <td class="py-3 px-4 text-[#475156]">$220 (1 Product)</td>
-                                        <td class="py-3 px-4">
-                                            <a href="./orderDetails.html" class="flex items-center gap-2 font-medium text-[#2DA5F3]">View Details 
-                                                <img src="../assets/images/blueArrow.svg" class="transform ltr:scale-x-100 rtl:scale-x-[-1]" alt="Arrow">
-                                            </a>
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                    <!-- Setting -->
+
+                    <!-- Setting -->
+                    <div x-show="activePage === './orderDetails.html'" x-transition>
+                    
                     </div>
+                <!-- Setting -->
                 </div>
             </div>
+            
         </section>
     <!-- End Content -->