diff --git a/src/Components/HOC/CartWithDrawer.tsx b/src/Components/HOC/CartWithDrawer.tsx
index 2cea1d0..e98f7cf 100644
--- a/src/Components/HOC/CartWithDrawer.tsx
+++ b/src/Components/HOC/CartWithDrawer.tsx
@@ -64,7 +64,7 @@ const CartWithDrawer = () => {
         onClose={() => setOpen(false)}
         open={open}
         key={placement}
-        width={550}
+        width={450}
         style={{maxHeight:"60%", minHeight:"500px"}}
       >
         <div className="cart_first_section">
diff --git a/src/Components/HOC/ChangeMode.tsx b/src/Components/HOC/ChangeMode.tsx
index e41fe5f..42e295a 100644
--- a/src/Components/HOC/ChangeMode.tsx
+++ b/src/Components/HOC/ChangeMode.tsx
@@ -16,7 +16,7 @@ export const ChangeModeComp = ({onClickFunction, src, modeText,icon, isImage = t
     const ModeContainer = memo(() => (
         <div className="MenuChange" onClick={onClickFunction}>
             {isImage
-            ? <img alt='ModeImage' src={src} width={20} height={20} />
+            ? <img className="mode_image" alt='ModeImage' src={src} width={20} height={20} />
             : icon
             }
             {t(modeText)}
diff --git a/src/Components/HOC/SearchWithDrawer.tsx b/src/Components/HOC/SearchWithDrawer.tsx
index 53a8c7a..03db1bd 100644
--- a/src/Components/HOC/SearchWithDrawer.tsx
+++ b/src/Components/HOC/SearchWithDrawer.tsx
@@ -1,33 +1,23 @@
-import React, { useState, ReactNode } from 'react';
+import { useState } from 'react';
 import type { DrawerProps } from 'antd';
-import {  Badge, Button, Drawer, Space } from 'antd';
-import CardItem from '../Cart/CardItem';
-import { BsArrowLeft, BsCart, BsSearch } from 'react-icons/bs';
-import { Link } from 'react-router-dom';
-import { ShoppingCartOutlined } from '@ant-design/icons';
-import { useCartData } from '../../Redux/DispatchData';
-import { useTranslation } from 'react-i18next';
+import { Drawer, Space } from 'antd';
 import { TiDeleteOutline } from "react-icons/ti";
 import SearchButton from '../Utils/Search/SearchButton';
-import { GoClock } from "react-icons/go";
-import { FiDelete } from "react-icons/fi";
-import { RiSearch2Line, RiSearchLine } from "react-icons/ri";
-
-
+import { RiSearchLine } from "react-icons/ri";
+import Empty from '../Utils/Search/Empty';
 
 const SearchWithDrawer = () => {
   const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
-  const { DataCart,count} = useCartData()
-  const {t} = useTranslation();
-
-
+  const [noDataFound, setNoDataFound] = useState(true);
+  console.log(noDataFound);
+  
   return (
     <>
       <Space>
-          <div onClick={()=>setOpen(true)} className="icon_navbar">
-             <RiSearchLine  />
-          </div>
+        <div onClick={() => setOpen(true)} className="icon_navbar">
+          <RiSearchLine />
+        </div>
       </Space>
 
       <Drawer
@@ -37,20 +27,19 @@ const SearchWithDrawer = () => {
         onClose={() => setOpen(false)}
         open={open}
         key={placement}
-        width ={700}
-        style={{maxHeight:"40%"}}
+        width={720}
+        style={{ maxHeight: "40%" }}
       >
         <div className="search_first_section">
-          <SearchButton/>
-          <span className='delete_icon' onClick={()=>setOpen(false)}><TiDeleteOutline/></span>
+          <SearchButton setOpen={setOpen} setNoDataFound={setNoDataFound} />
+          <span className='delete_icon' onClick={() => setOpen(false)}><TiDeleteOutline /></span>
+        </div>
+        <div className='not_found_section'>
+          {noDataFound && <Empty />}
         </div>
-
-
-          
       </Drawer>
     </>
   );
 };
 
 export default SearchWithDrawer;
-
diff --git a/src/Components/Home/BoseHeadphones.tsx b/src/Components/Home/BoseHeadphones.tsx
index c80b953..23faf71 100644
--- a/src/Components/Home/BoseHeadphones.tsx
+++ b/src/Components/Home/BoseHeadphones.tsx
@@ -1,6 +1,5 @@
-import React from "react";
 import { useTranslation } from "react-i18next";
-import { GoArrowUpRight } from "react-icons/go";
+import { RiArrowRightUpFill } from "react-icons/ri";
 
 const BoseHeadphones = () => {
   const {t} = useTranslation();
@@ -12,7 +11,7 @@ const BoseHeadphones = () => {
         <h1>{t("Smarter than your average headphones")}</h1>
         <button className="button">
           {t("Shop now")}
-          <GoArrowUpRight />
+          <RiArrowRightUpFill />
         </button>
       </div>
     </div>
diff --git a/src/Components/Home/ProductSwiper.tsx b/src/Components/Home/ProductSwiper.tsx
index d749813..5e78386 100644
--- a/src/Components/Home/ProductSwiper.tsx
+++ b/src/Components/Home/ProductSwiper.tsx
@@ -1,11 +1,10 @@
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import 'swiper/css/free-mode';
 import 'swiper/css/pagination';
 import ProductCard from './ProductCard';
 import { Product } from '../../types/item';
-import { useGetBaseProduct } from '../../api/baseProduct';
 import { A11y, Autoplay, Navigation, Pagination, Scrollbar } from 'swiper/modules';
 import { Spin } from 'antd';
 
@@ -13,7 +12,6 @@ import { Spin } from 'antd';
 
 const ProductSwiper = ({data,isLoading}:any) => {
   const language = localStorage.getItem('language') ;
-  console.log(language);
   
   const [swiperDirection, setSwiperDirection] = useState(language === "ar" ? "rtl" : "ltr");
   const swiperRef = useRef<any>(null);
@@ -28,7 +26,7 @@ const ProductSwiper = ({data,isLoading}:any) => {
         spaceBetween={50}
         breakpoints={{
           0: { slidesPerView: 1 },
-          400: { slidesPerView: 2 },
+          400: { slidesPerView: 1 },
           600: { slidesPerView: 2 },
           900: { slidesPerView: 4 },
           1200: { slidesPerView: 4 },
diff --git a/src/Components/Utils/Search/SearchButton.tsx b/src/Components/Utils/Search/SearchButton.tsx
index 16c2ae9..4dbbe4b 100644
--- a/src/Components/Utils/Search/SearchButton.tsx
+++ b/src/Components/Utils/Search/SearchButton.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Select, Spin } from 'antd';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -6,7 +6,12 @@ import { LuSearch } from 'react-icons/lu';
 import { useGetBaseProduct } from '../../../api/baseProduct';
 import { Product } from '../../../types/item';
 
-const SearchButton: React.FC = () => {
+interface SearchButtonProps {
+  setOpen: (open: boolean) => void;
+  setNoDataFound: (noData: boolean) => void;
+}
+
+const SearchButton: React.FC<SearchButtonProps> = ({ setOpen, setNoDataFound }) => {
   const navigate = useNavigate();
   const { t } = useTranslation();
   const [searchParams] = useSearchParams();
@@ -17,9 +22,13 @@ const SearchButton: React.FC = () => {
   });
   const BaseProducts = (data?.products as Product[]) || [];
 
+  useEffect(() => {
+    setNoDataFound(!isLoading && BaseProducts.length <= 0);
+  }, [isLoading, BaseProducts, setNoDataFound]);
+
   const options = BaseProducts.map((product: any) => ({
     value: product.base_product_id,
-    label: product?.name as string, // Ensuring the label is a string
+    label: product?.name as string,
   }));
 
   const handleSearchChange = (value: string) => {
@@ -32,22 +41,21 @@ const SearchButton: React.FC = () => {
   const handleSelectChange = (value: number) => {
     const selectedProduct = BaseProducts.find(product => product.base_product_id === value);
     if (selectedProduct) {
+      setOpen(false);
       navigate(`/product/${selectedProduct.base_product_id}`);
     }
   };
 
   const filterOption = (input: string, option?: { label: string }) => {
     if (!option) return false;
-    const filteredData = option?.label.toLowerCase().includes(input.toLowerCase());
-
-    return filteredData;
+    return option?.label.toLowerCase().includes(input.toLowerCase());
   };
 
   return (
     <Select
       className='InputAutoComplete'
       suffixIcon={<LuSearch />}
-      placeholder={t('Search Product Name') as string} // Ensuring the placeholder is a string
+      placeholder={t('Search Product Name') as string}
       allowClear
       showSearch
       loading={isLoading}
@@ -56,9 +64,7 @@ const SearchButton: React.FC = () => {
       options={options}
       optionFilterProp="label"
       filterOption={filterOption}
-      notFoundContent={
-        isLoading ? <Spin/> : "not found data" 
-      }
+      notFoundContent={isLoading ? <Spin /> : null}
     />
   );
 };
diff --git a/src/Components/Utils/SearchBar/SearchBar.scss b/src/Components/Utils/SearchBar/SearchBar.scss
index d9fc6c8..1966e7e 100755
--- a/src/Components/Utils/SearchBar/SearchBar.scss
+++ b/src/Components/Utils/SearchBar/SearchBar.scss
@@ -35,7 +35,7 @@
   .InputAutoComplete{
     width: 78%;
     height: 48px;
-    margin-top: 0px;margin-bottom: 38px;
+    margin-top: 12px;margin-bottom: 38px;
     .ant-select-arrow{
       font-size: 32px;
       color: var(--DarkGray) !important; 
@@ -95,18 +95,23 @@
           }
         }
       }
-          
-          .ViewSearch{
-            .ant-drawer .ant-drawer-content {
-                height: 50% !important ;width: 100% ;
-                min-height: 50% !important;
-                display: flex; flex-direction: column;
-                border-radius: 5px 0 0 5px; 
-            }
-            
-          }
+      .not_found_section{
+        @include Flex;
+        .Empty{
+          @include Flex; flex-direction: column;
+        }
+      }
+.ViewSearch{
+  .ant-drawer .ant-drawer-content {
+      height: 50% !important ;width: 100% ;
+      min-height: 50% !important;
+      display: flex; flex-direction: column;
+      border-radius: 5px 0 0 5px; 
+  }
+  
+}
 
-          .search_comp{
-            display: flex;
-            flex-direction: column;
-          }
\ No newline at end of file
+.search_comp{
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/src/Pages/Faqs/CollapseGroup.tsx b/src/Pages/Faqs/CollapseGroup.tsx
index b5ae6d1..9967f21 100644
--- a/src/Pages/Faqs/CollapseGroup.tsx
+++ b/src/Pages/Faqs/CollapseGroup.tsx
@@ -1,11 +1,20 @@
 import type { CollapseProps } from "antd";
 import { Collapse } from "antd";
-import React from 'react'
+import React, { useState } from 'react';
 import { useTranslation } from "react-i18next";
-
+import classNames from 'classnames';
 
 const CollapseGroup = () => {
-  const {t} = useTranslation();
+  const { t } = useTranslation();
+  const [activeKey, setActiveKey] = useState<string[]>(["1"]);
+
+  const onChange = (key: string | string[]) => {
+    if (typeof key === 'string') {
+      setActiveKey([key]);
+    } else {
+      setActiveKey(key);
+    }
+  };
 
   const items: CollapseProps["items"] = [
     {
@@ -22,7 +31,7 @@ const CollapseGroup = () => {
       label: t("How can I engage with the magazine content on DM?"),
       children: (
         <p>
-          {t("You can actively engage with the magazine content by leaving comments and participating in the question-and-answer section. Feel free to share your thoughts, ask questions, and interact with  enthusiastsin the community")}.
+          {t("You can actively engage with the magazine content by leaving comments and participating in the question-and-answer section. Feel free to share your thoughts, ask questions, and interact with enthusiasts in the community")}.
         </p>
       ),
     },
@@ -49,7 +58,7 @@ const CollapseGroup = () => {
       label: t("How can I get assistance with my purchase or any other inquiries?"),
       children: (
         <p>
-          {t("If you need assistance with your purchase or have any questions, our dicated customer  is here to help. You  out to us through the contact page on our website, and we'll be happy to assist you promptly")}.
+          {t("If you need assistance with your purchase or have any questions, our dedicated customer support is here to help. You can reach out to us through the contact page on our website, and we'll be happy to assist you promptly")}.
         </p>
       ),
     },
@@ -57,12 +66,26 @@ const CollapseGroup = () => {
 
   return (
     <Collapse
+    className="faqs_collaps"
       defaultActiveKey={["1"]}
       expandIconPosition="right"
       bordered={false}
-      items={items}
+      activeKey={activeKey}
+      onChange={onChange}
+      items={items.map(item => ({
+        ...item,
+        label: (
+          <span
+            className={classNames({
+              'label-active': activeKey.includes(item.key as string)
+            })}
+          >
+            {item.label}
+          </span>
+        )
+      }))}
     />
-  )
-}
+  );
+};
 
-export default CollapseGroup
\ No newline at end of file
+export default CollapseGroup;
diff --git a/src/Pages/Product/Page.tsx b/src/Pages/Product/Page.tsx
index 3392f8c..ed6f56f 100644
--- a/src/Pages/Product/Page.tsx
+++ b/src/Pages/Product/Page.tsx
@@ -72,24 +72,13 @@ const Page = () => {
             <div>
 
               <span>
-                <h6>category</h6> <h5>{languageObject(product?.category?.name)}</h5>
+                <h6>{t("Category")}</h6> <h5>{languageObject(product?.category?.name)}</h5>
               </span>
               <span>
-                <h6>price</h6> <h5>{product?.price}</h5>
+                <h6>{t("Price")}</h6> <h5>{product?.price}</h5>
               </span>
               <span>
-                <h6>brand</h6> <h5>SAMSUNG</h5>
-              </span>
-            
-                {info?.map((item:any)=>{
-                  return (
-                    <span>
-                    <h6>item</h6> <h5>SAMSUNG</h5>
-                  </span>
-                  )
-                })}
-                  <span>
-                <h6>description</h6> <h5>{languageObject(product?.description)}</h5>
+                <h6>{t("Description")}</h6> <h5>{languageObject(product?.description)}</h5>
               </span>
             </div>
           </div>
diff --git a/src/Pages/Product/Similar.tsx b/src/Pages/Product/Similar.tsx
index 20c0f58..271abdc 100644
--- a/src/Pages/Product/Similar.tsx
+++ b/src/Pages/Product/Similar.tsx
@@ -1,15 +1,17 @@
+import { useTranslation } from "react-i18next";
 import { useGetBaseProduct } from "../../api/baseProduct";
 import ProductSwiper from "../../Components/Home/ProductSwiper";
 
 const Similar = ({category_id}:any) => {
   const { data,isLoading } = useGetBaseProduct({
-    category_id:category_id
+    category_id:[category_id]
   });
-
+  const {t} = useTranslation();
+  
   return (
     <div className="Products">
       <header>
-        <h1>Similar Products</h1>
+        <h1>{t("Similar Products")}</h1>
       </header>
       <main className="ProductCards">
         <ProductSwiper data={data} isLoading={isLoading} />
diff --git a/src/Styles/App/Mixing.scss b/src/Styles/App/Mixing.scss
index 93918ac..2825059 100644
--- a/src/Styles/App/Mixing.scss
+++ b/src/Styles/App/Mixing.scss
@@ -112,16 +112,17 @@
   }
 }
 
-@mixin Scrollbar($color) {
+@mixin Scrollbar() {
   scroll-behavior: smooth;
   scroll-padding: 10rem;
   &::-webkit-scrollbar {
     width: 8px;
+    height: 5px;
   }
 
   /* Handle */
   &::-webkit-scrollbar-thumb {
-    background-color: $color;
+    background-color: var(--primary);
     border-radius: 3px; /* Adjust border-radius as needed */
   }
 
diff --git a/src/Styles/App/className.scss b/src/Styles/App/className.scss
index ea4e93c..8b4ac61 100644
--- a/src/Styles/App/className.scss
+++ b/src/Styles/App/className.scss
@@ -29,8 +29,8 @@
   justify-content: center;
   gap: 15px;
   padding-inline: 2vw;
-  font-size: 1vw;
-  font-weight: bold;
+  font-size: 1.2vw;
+  font-weight: 500;
 }
 
 @media screen and (max-width: 1000px) {
diff --git a/src/Styles/Auth/Auth.scss b/src/Styles/Auth/Auth.scss
index 0fb1698..1816384 100644
--- a/src/Styles/Auth/Auth.scss
+++ b/src/Styles/Auth/Auth.scss
@@ -5,8 +5,8 @@
       border-radius: var(--border-radius);
       width: fit-content;
       white-space: nowrap;
-      background: var(--primary);
-      color: var(--white);
+      background: var(--white);
+      color: var(--primary);
       display: flex;
       align-items: center;
       justify-content: center;
@@ -16,12 +16,12 @@
       &:hover{
           background: var(--DarkPrimary) !important;
       } 
-  }
+   }
+}
+.ant-drawer .ant-drawer-content {
+    display: flex; flex-direction: column;
+    border-radius: 5px 0 0 5px; 
 }
-  .ant-drawer .ant-drawer-content {
-      display: flex; flex-direction: column;
-      border-radius: 5px 0 0 5px; 
-  }
 .auth_first_section{
   width: 100%;
   display: flex;justify-content: end;align-items: end;
diff --git a/src/Styles/Layout/Layout.scss b/src/Styles/Layout/Layout.scss
index 7e411af..46c6ebd 100755
--- a/src/Styles/Layout/Layout.scss
+++ b/src/Styles/Layout/Layout.scss
@@ -68,7 +68,9 @@ a:hover{
 .pointer{
   cursor: pointer;
 }
-
+.mode_image{
+  margin-inline: 5px;
+}
 @media screen and (max-width:600px) {
     .header_link{
         font-size: 12px;
diff --git a/src/Styles/Layout/NavBar.scss b/src/Styles/Layout/NavBar.scss
index 99f92cc..7ab402e 100755
--- a/src/Styles/Layout/NavBar.scss
+++ b/src/Styles/Layout/NavBar.scss
@@ -2,7 +2,6 @@
     .navbar{
         position: absolute;
         border: none;
-       
     }
 }
 
@@ -11,37 +10,28 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  color: var(--secondary);
+  color: var(--text);
   padding-inline: 5.5vw;
   height: var(--navbar-height);
   width: 100%;
   z-index: 999;
   border-bottom: .8px solid var(--primary);
-  
-
   >img{
     width: 4.7vw;  
   }
   .navbar_links{
       display: flex;
       gap: 3vw;
-      
       .navbar_link{
           color: var(--text);
-          opacity: .5;
-          
+        //   opacity: .5;
           cursor: pointer;
           &:hover{
               opacity: 1;
-
           }
-
-          
       }
       .active{
-
           opacity: 1;
-        //   border-bottom: .1vw solid var(--primary);
           color: var(--primary);
       }
   }
@@ -53,14 +43,13 @@
   .menu{
       display: none;
   }
-  
+
   article{
       display: flex;
       gap: 5%;
       align-items: center;
       >.icon_navbar{
           padding: 10px;
-        //   background: var(--primary);
           @include Flex;
           border-radius: 50%;
           width: 30px;
@@ -90,6 +79,7 @@
       }
      .menu{
       display: inline;
+      margin-inline: 10px;
       svg{
           color: var(--text);
       }
diff --git a/src/Styles/Page/About.scss b/src/Styles/Page/About.scss
index 5567aae..6944d1c 100644
--- a/src/Styles/Page/About.scss
+++ b/src/Styles/Page/About.scss
@@ -68,6 +68,9 @@
         color: var(--primary);
         font-size: 4vw;
       }
+      h6{
+        font-weight: 400 !important;
+      }
       p {
         color: var(--secondary);
         font-size: 2vw;
diff --git a/src/Styles/Page/Cart.scss b/src/Styles/Page/Cart.scss
index 0b20900..251df85 100644
--- a/src/Styles/Page/Cart.scss
+++ b/src/Styles/Page/Cart.scss
@@ -47,7 +47,6 @@
 }
 .ViewCart_Button{
   width: 100%;
-  margin-top: 20px;
   display: flex;justify-content: space-between;
   p{
       text-align: center;
@@ -69,7 +68,10 @@
   }    
 }
 
-
+.Drawer_Body{
+    height: 70vh;
+    display: flex; flex-direction: column; justify-content: space-between;align-items: center;
+}
 .ar{
     .cart_first_section{
         display: flex;justify-content: space-between;
@@ -95,8 +97,27 @@
       p{
           font-size: 12px;
       }
+    .cart_checkout_button{
+        font-size: 15px;
+        padding: 20px 10px;
+    }
+  }
+}
+
+.EmptyCard{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 5%;
+    gap: 20px;
+    img{
+        width: 40%;
+    }
+    p{
+        font-size: max(1.5vw,15px);
+    }
           .cart_checkout_button{
               font-size: 15px;
           }
   }
-}
\ No newline at end of file
diff --git a/src/Styles/Page/Categories.scss b/src/Styles/Page/Categories.scss
index 726f50f..2629500 100644
--- a/src/Styles/Page/Categories.scss
+++ b/src/Styles/Page/Categories.scss
@@ -18,18 +18,15 @@
     display: flex;
     flex-direction: column;
     background: var(--bg);
-    // gap: 20px;
     padding: 10px;
     > header {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      // height: 40px;
       padding-inline: 16px;
-      // margin-inline: auto;
       h4 {
         font-size: 1.4vw;
-        font-weight: bold;
+        font-weight: 500;
         color: var(--text);
       }
       h6 {
@@ -57,7 +54,7 @@
       }
 
       .ant-collapse-item{
-
+        font-weight: 500 !important;
       }
     }
   }
@@ -109,7 +106,6 @@
     }
     > main {
       display: flex;
-      // justify-content: center;
       flex-wrap: wrap;
       gap: 40px;
     }
@@ -129,7 +125,16 @@
 .show_on_responsive {
   display: none;
 }
+.ant-collapse-header-text{
+  font-weight: 500 !important;
+}
 
+.ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector{
+  padding: 0px 28px ;
+}
+.ant-pagination .ant-pagination-item a{
+  color: var(--white);
+}
 @media screen and (max-width: 1000px) {
   .show_on_responsive {
     display: inline;
@@ -161,7 +166,7 @@
         height: 40px;
         h4 {
           font-size: 1.7vw;
-          font-weight: bold;
+          font-weight: 500;
           color: var(--text);
         }
         h6 {
diff --git a/src/Styles/Page/Faqs.scss b/src/Styles/Page/Faqs.scss
index ded6a0a..7ff1457 100644
--- a/src/Styles/Page/Faqs.scss
+++ b/src/Styles/Page/Faqs.scss
@@ -1,122 +1,83 @@
-.faqs_container{
-  display: flex;flex-direction: column;
+.faqs_container {
+  display: flex;
+  flex-direction: column;
   width: 90vw;
   margin-inline: auto;
 
-  .faqs_image_section{
+  .faqs_image_section {
+    width: 100%;
+    margin-top: 50px;
+    position: relative;
+    z-index: 0;
+
+    img {
       width: 100%;
-      margin-top: 50px;
-      position: relative;
-      z-index: 0;
-      img{
-          width: 100%;
-          border-radius: 10px;
-      }
-          h6{
-              position: absolute;
-              top: 43%;
-              left: 50px;
-              color: #021736;
-              font-size: 3vw;
-          }
+      border-radius: 10px;
+    }
+
+    h6 {
+      position: absolute;
+      top: 43%;
+      left: 50px;
+      color: #021736;
+      font-size: 3vw;
+    }
   }
 
-  .faqs_body{
-      width: 100%;
-      display: flex;justify-content: space-between;
-      margin-block:40px;
-      .left{
-        width: 20%;  
-        h1{
-          font-size: 27px;
-          color: #0C0C0C;
-          margin-bottom: 20px;
+  .faqs_body {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    margin-block: 40px;
+
+    .left {
+      width: 20%;
+
+      h1 {
+        font-size: 18px;
+        color: #0c0c0c;
+        margin-bottom: 20px;
+      }
+
+      p {
+        color: #0c0c0c;
+        font-size: 16px;
+
+        &:nth-child(2) {
+          color: var(--primary) !important;
         }
-        p{
-          color: #0C0C0C;
-          font-size: 20px;
-          &:nth-child(2) {
-            color: var(--primary) !important;
-          }
       }
-  }
+    }
 
-      .right{
-          width: 80%;
-      }
-      
+    .right {
+      width: 80%;
+    }
   }
 }
 
-
-
-.ant-collapse [class^="ant-collapse"], .ant-collapse [class*=" ant-collapse"]{
+.ant-collapse [class^="ant-collapse"],
+.ant-collapse [class*=" ant-collapse"] {
   background: #fff;
 }
 
-.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-header-text{
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
   font-size: 1.8vw;
   font-weight: 500;
 }
 
-.ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow svg{
+.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow svg {
   font-size: 1.7vw;
 }
 
-.ant-collapse .ant-collapse-content{
-  p{
-      font-size: 1.4vw;
-      color: var(--primary);
-      margin-bottom: 0;
+.ant-collapse .ant-collapse-content {
+  p {
+    font-size: 1.4vw;
+    color: var(--text);
+    margin-bottom: 0;
   }
 }
 
-@media screen and (max-width:800px) {
-  .faqs_container{
-      .faqs_image_section{
-          margin-top: 30px;
-              h6{
-                  width: 50%;
-                  left: 20px;
-                  font-size: 3.5vw;
-              }
-      }
-
-      .faqs_body{
-          @include Flex; flex-direction: column;
-          width: 100%;
-          .left{
-              text-align: center;
-              width: 90%;  
-            h1{
-              font-size: 22px;
-              margin-bottom: 12px;
-            }
-            p{
-              font-size: 18px;
-          }
-      }
-          .right{
-              width: 95%;
-          }
-          
-      }
-  }
-  
-
-
-  .ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-header-text{
-      font-size: 20px;
-  }
-
-  .ant-collapse>.ant-collapse-item >.ant-collapse-header .ant-collapse-arrow svg{
-      font-size: 15px;
-  }
-
-  .ant-collapse .ant-collapse-content{
-      p{
-          font-size: 16px;
-      }
-  }
-
-}
\ No newline at end of file
+.label-active {
+  color: var(--primary);
+  transition: ease-in-out .4s;
+}
diff --git a/src/Styles/Page/Home.scss b/src/Styles/Page/Home.scss
index 02d30d5..80d1171 100644
--- a/src/Styles/Page/Home.scss
+++ b/src/Styles/Page/Home.scss
@@ -27,7 +27,7 @@
       gap: 20px;
 
       h1 {
-        font-size: 4vw;
+        font-size: 4.4vw;
         font-weight: bold;
       }
 
@@ -256,26 +256,25 @@
 
   .BatteryLife,
   .PerfectSound {
+    width: 100%;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    justify-content: center;
-
-    > div {
-      width: 40%;
+    img{
+      width: 54%;
+    }
+     div {
+      width: 46%;
 
       h1 {
         font-size: 5vw;
-        font-weight: bold;
+        font-weight: 500;
       }
 
       p {
-        font-size: 1vw;
+        font-size: 1.24vw;
       }
     }
-
-    > img {
-    }
   }
 
   .PerfectSound {
@@ -289,6 +288,13 @@
       }
     }
   }
+  .BatteryLife{
+    width: 84%;
+    margin-inline: auto;
+    p{
+      font-size: 1.38vw !important;
+    }
+  }
 }
 
 @media screen and (max-width: 1000px) {
@@ -335,15 +341,15 @@
         > div {
           display: flex;
           flex-direction: column;
-          gap: 30px;
-          display: none;
+          gap: 10px;
+          // display: none;
 
           h3 {
             font-weight: bold;
           }
 
           button {
-            font-size: 30px;
+            font-size: 20px;
             padding-inline: 10%;
             border-radius: 2vw;
           }
@@ -352,7 +358,7 @@
 
       > span {
         img {
-          width: 50vw;
+          width: 50VW;
         }
       }
     }
@@ -497,7 +503,9 @@
       max-width: 100vw;
       flex-wrap: wrap;
       text-align: center;
-
+      img{
+        width: 100%;
+      }
       > div {
         width: 80%;
 
@@ -537,59 +545,22 @@
 
   .home_page{
      .HeroSection {
-    display: flex;
-    padding: 10% 6%;
-    position: relative;
-    width: 100%;
-    z-index: 99;
-    min-height: 100vh;
-
-    &::after {
-      position: absolute;
-      content: "";
-      right: auto;
-      scale: -1;
-      left: 0;
-      top: 0;
-      background: url("../../../public/Home/HeroShape.svg");
-      background-size: cover;
-      background-repeat: no-repeat;
-      width: 40%;
-      height: 100%;
-      z-index: -1;
-    }
-
     > div {
       display: flex;
       flex-direction: column;
-      width: 45%;
-      gap: 20px;
+      width: 60%;
 
       h1 {
-        font-size: 4vw;
+        font-size: 6vw;
         font-weight: bold;
       }
 
       > div {
         display: flex;
-        gap: 30px;
-
-        h3 {
-          font-weight: bold;
-        }
-
-        button {
-          padding-inline: 10%;
-          border-radius: 2vw;
-        }
+        gap: 30px
       }
     }
 
-    > span {
-      img {
-        width: 25vw;
-      }
-    }
   }
   }
  
diff --git a/src/Styles/Page/setting.scss b/src/Styles/Page/setting.scss
index 65584e1..fab2df4 100644
--- a/src/Styles/Page/setting.scss
+++ b/src/Styles/Page/setting.scss
@@ -26,7 +26,7 @@
           width: 100%;
           .ant-tabs .ant-tabs-tab{
               justify-content: start;align-items: start;
-              font-size: 24px;
+              font-size: 20px;
               width: 100% !important;
               color: #717171;
               
@@ -36,7 +36,7 @@
                   justify-content: space-around !important;
                   margin-bottom: 50px;
                   .left{
-                      width: 36%;height: 500px !important;
+                      width: 36%;height: 400px !important;
                       .social_info{
                           .Single_info{
                               span{
@@ -80,7 +80,7 @@
                   }
                   .personl_data_form_button{
                       width: 20% !important;
-                      padding: 12px 0 !important;
+                      padding: 10px 0 !important;
                       background: var(--primary);
                       color: var(--white);
                       font-size: 20px;
@@ -101,11 +101,11 @@
                   }
               }
               .personl_data_form_button{
-                  width: 20% !important;
-                  padding: 12px 0 !important;
+                  width: 16% !important;
+                  padding: 5px 0 !important;
                   background: var(--primary);
                   color: var(--white);
-                  font-size: 20px;
+                  font-size: 16px;
                   border: none;
                   &:hover{
                       background: var(--DarkPrimary);
@@ -241,12 +241,6 @@
             display: flex;flex-direction: row-reverse;align-items: center;
         }
     }
-    .personl_data_form{
-        span{
-            // display: flex;align-items: end;justify-content: end;
-            // text-align: end;
-        }
-    }
 }
 
 @media screen and (max-width:1100px) {
diff --git a/src/Styles/components/Card.scss b/src/Styles/components/Card.scss
index c2af35f..ac101ca 100644
--- a/src/Styles/components/Card.scss
+++ b/src/Styles/components/Card.scss
@@ -5,20 +5,20 @@
   align-items: center;
   border-radius: 7px;
   .ant-card-body {
-    @include Flex;
+    display: flex;justify-content: space-between;align-items: center;
     padding: 10px 5px;
     width: 100%;
     box-shadow: 10px 10px 20px 15px rgba(0, 0, 0, 0.1);
     border-radius: 7px;
   }
   .Card_Img {
-    width: 40%;
+    width: 20%;
     img {
-      width: 40%;
+      width: 80%;
     }
   }
   .Card_Info {
-    width: 50%;
+    width: 70%;
     h5 {
       font-size: 14px;
       text-wrap: nowrap;
@@ -72,7 +72,7 @@
 @media screen and (max-width: 650px) {
   .CardItem {
     .ant-card-body {
-      @include Flex;
+      // @include Flex;
       padding: 10px 0px;
       width: 100%;
       box-shadow: 10px 10px 20px 15px rgba(0, 0, 0, 0.1);
diff --git a/src/Styles/components/antd.scss b/src/Styles/components/antd.scss
index b1c7d61..4dc7a1d 100644
--- a/src/Styles/components/antd.scss
+++ b/src/Styles/components/antd.scss
@@ -14,4 +14,15 @@
     box-shadow: none !important;
 }.ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header{
     border-radius: 0;
+}
+
+.setting_container .ant-tabs > .ant-tabs-nav .ant-tabs-nav-list, .setting_container .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list{
+  overflow-x: auto  ;
+  @include Scrollbar;
+}
+
+
+.ant-tabs-tab.ant-tabs-tab-active.ant-tabs-tab-disabled{
+       
+
 }
\ No newline at end of file
diff --git a/src/translate/ar.json b/src/translate/ar.json
index 2bbe86e..e43a464 100755
--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@@ -386,7 +386,8 @@
 "verify code": "تحقق من الرمز",
 "verify": "تحقق",
 "sub_categories": "الفئات الفرعية",
-"Clear_All": "مسح الكل"
-
+"Clear_All": "مسح الكل",
+"Track, return or purchase items":"تتبع أو إرجاع أو شراء العناصر",
+"Order History":"تاريخ الطلب"
 
 }
\ No newline at end of file
diff --git a/src/translate/ch.json b/src/translate/ch.json
index 3d333ff..fcbc5a5 100644
--- a/src/translate/ch.json
+++ b/src/translate/ch.json
@@ -372,5 +372,7 @@
     "verify code": "验证代码",
     "verify": "验证",
     "sub_categories": "子类别",
-    "Clear_All": "清除所有"
+    "Clear_All": "清除所有",
+    "Track, return or purchase items":"跟踪、退货或购买物品",
+    "Order History":"订单历史"
 }
\ No newline at end of file
diff --git a/src/translate/en.json b/src/translate/en.json
index e4114e6..f2ebab7 100755
--- a/src/translate/en.json
+++ b/src/translate/en.json
@@ -371,8 +371,7 @@
 "Security settings":"Security settings",
 "See your favorites list here":"See your favorites list here",
 "Change Password":"Change Password",
-"Quite Comfort 35 wireless headphones II":"Quite Comfort 35 wireless headphones II",
-
+"Quite Comfort 35 wireless headphones II":"QuiteComfort 35 wireless headphones II",
 
 "Verify":"Verify",
 "Create Your Account":"Create Your Account",
@@ -384,7 +383,9 @@
 "verify":"Verify",
 "Login / Sign Up":"Login / Sign Up",
   "sub_categories": "sub categories",
-  "Clear_All": "Clear All"
+  "Clear_All": "Clear All",
+  "Track, return or purchase items":"Track, return or purchase items",
+  "Order History":"Order History"
   
 
 }
\ No newline at end of file