diff --git a/src/Components/CheckoutOurNew/BaseSwiperForTabs.tsx b/src/Components/CheckoutOurNew/BaseSwiperForTabs.tsx
index b018ecd..476793e 100644
--- a/src/Components/CheckoutOurNew/BaseSwiperForTabs.tsx
+++ b/src/Components/CheckoutOurNew/BaseSwiperForTabs.tsx
@@ -5,7 +5,6 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";import { A11y, Autoplay, Navigation,Scrollbar } from 'swiper/modules';
 import Spinner from '../Utils/Loading/Spinner';
-import TeamCard from '../Ui/TeamCard';
 import CheckoutCard from './CheckoutCard';
 
 
diff --git a/src/Components/Distributor/CollapsChildren.tsx b/src/Components/Distributor/CollapsChildren.tsx
index f6277be..257ddec 100644
--- a/src/Components/Distributor/CollapsChildren.tsx
+++ b/src/Components/Distributor/CollapsChildren.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { CiMail } from "react-icons/ci";
 import { FaPhoneFlip } from "react-icons/fa6";
 import { SlPrinter } from "react-icons/sl";
diff --git a/src/Components/Distributor/Distributor.tsx b/src/Components/Distributor/Distributor.tsx
index 67ce1e2..b59d6dd 100644
--- a/src/Components/Distributor/Distributor.tsx
+++ b/src/Components/Distributor/Distributor.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { DistributorArray, DistributorArray2 } from '../../data/Distributor'
 import DistributorWord from '../Ui/DistributorWord'
 import AnimationButton from '../Ui/AnimationButton'
diff --git a/src/Components/Distributor/DistributorCollaps.tsx b/src/Components/Distributor/DistributorCollaps.tsx
index b7773d8..a4bf776 100644
--- a/src/Components/Distributor/DistributorCollaps.tsx
+++ b/src/Components/Distributor/DistributorCollaps.tsx
@@ -1,7 +1,5 @@
 import type { CollapseProps } from "antd";
 import { Collapse } from "antd";
-import React, { useState } from 'react';
-import { useTranslation } from "react-i18next";
 import classNames from 'classnames';
 import CollapsChildren from "./CollapsChildren";
 
diff --git a/src/Components/Document/Document.tsx b/src/Components/Document/Document.tsx
index 8682728..b5f0256 100644
--- a/src/Components/Document/Document.tsx
+++ b/src/Components/Document/Document.tsx
@@ -1,8 +1,5 @@
-import React, { useState, useEffect } from 'react';
 import { Pagination } from 'antd';
 import DocumentCard from './DocumentCard';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
 import { useWindowResize } from '../../Hooks/useWindowResize';
 import { useGetCertificate } from '../../api/certificate';
 
diff --git a/src/Components/Document/DocumentCard.tsx b/src/Components/Document/DocumentCard.tsx
index 524d8d2..1368ff0 100644
--- a/src/Components/Document/DocumentCard.tsx
+++ b/src/Components/Document/DocumentCard.tsx
@@ -1,16 +1,12 @@
-import React from 'react'
 
-const DocumentCard = ({name,text,image}:any) => {
-  
+const DocumentCard = ({name,image}:any) => {
   
   return (
     <div className='Document_card'>
         <div className="image_container">
             <img src={image} alt="document_card" />
         </div>
-
         <h1>{name}</h1>
-        {/* <p>{text}</p> */}
     </div>
   )
 }
diff --git a/src/Components/HOC/SearchWithDrawer.tsx b/src/Components/HOC/SearchWithDrawer.tsx
index f3ae48e..ea75e17 100644
--- a/src/Components/HOC/SearchWithDrawer.tsx
+++ b/src/Components/HOC/SearchWithDrawer.tsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import type { DrawerProps } from 'antd';
 import { Drawer, Space } from 'antd';
 import { TiDeleteOutline } from "react-icons/ti";
diff --git a/src/Components/Home/ComprehensivePurchase.tsx b/src/Components/Home/ComprehensivePurchase.tsx
index 1a746c9..ebba656 100644
--- a/src/Components/Home/ComprehensivePurchase.tsx
+++ b/src/Components/Home/ComprehensivePurchase.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { IoIosArrowForward } from "react-icons/io";
 
 const ComprehensivePurchase = () => {
diff --git a/src/Components/Home/HeroSection.tsx b/src/Components/Home/HeroSection.tsx
index b4e52dd..3c4da1a 100644
--- a/src/Components/Home/HeroSection.tsx
+++ b/src/Components/Home/HeroSection.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import HeroSwiper from './HeroSwiper'
 import AnimationButton from '../Ui/AnimationButton';
 
diff --git a/src/Components/OurTeam/TeamSwiper.tsx b/src/Components/OurTeam/TeamSwiper.tsx
index cc9e0b1..7cbe9c7 100644
--- a/src/Components/OurTeam/TeamSwiper.tsx
+++ b/src/Components/OurTeam/TeamSwiper.tsx
@@ -5,7 +5,6 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";import { A11y, Autoplay, Navigation,Scrollbar } from 'swiper/modules';
 import Spinner from '../Utils/Loading/Spinner';
-import TeamCard from '../Ui/TeamCard';
 
 
 
diff --git a/src/Components/Pagination/usePagination.ts b/src/Components/Pagination/usePagination.ts
index deaa454..d08222e 100644
--- a/src/Components/Pagination/usePagination.ts
+++ b/src/Components/Pagination/usePagination.ts
@@ -1,5 +1,3 @@
-import { useState, useEffect } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
 import { PaginationAntd, PaginationMeta } from "../../type/pagination";
 
 interface Data {
@@ -8,7 +6,6 @@ interface Data {
 
 const usePagination = (data: Data) => {
   const navigate = useNavigate();
-  const location = useLocation();
 
   const [pagination, setPagination] = useState<PaginationAntd>({
     current: data?.meta?.current_page || 1,
diff --git a/src/Components/Partner/Partner.tsx b/src/Components/Partner/Partner.tsx
index 0da2a77..708631a 100644
--- a/src/Components/Partner/Partner.tsx
+++ b/src/Components/Partner/Partner.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { partnerArray } from '../../data/Partner';
 
 const Partner = () => {
diff --git a/src/Components/Products/BrandFilter.tsx b/src/Components/Products/BrandFilter.tsx
index 2cde62a..9cc8988 100644
--- a/src/Components/Products/BrandFilter.tsx
+++ b/src/Components/Products/BrandFilter.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Checkbox } from "antd";
 import type { CheckboxProps } from "antd";
 import { useFilterStateState } from "../../zustand/Filter";
diff --git a/src/Components/Products/ProductCard.tsx b/src/Components/Products/ProductCard.tsx
index 99a31a0..7f508ae 100644
--- a/src/Components/Products/ProductCard.tsx
+++ b/src/Components/Products/ProductCard.tsx
@@ -1,11 +1,9 @@
-import { useNavigate } from 'react-router-dom';
 import { languageObject } from '../Utils/languageObject';
 
 const ProductCard = ({data}:any) => {
 
     const navigate = useNavigate();
     const productLink = `/product/${data?.id}` 
-    console.log(data);
     
   return (
     <div className="product_card">
diff --git a/src/Components/Products/SingleProductSwiper.tsx b/src/Components/Products/SingleProductSwiper.tsx
index c67497d..901e61a 100644
--- a/src/Components/Products/SingleProductSwiper.tsx
+++ b/src/Components/Products/SingleProductSwiper.tsx
@@ -5,20 +5,21 @@ import "swiper/css/navigation";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";import { A11y, Autoplay, Navigation,Scrollbar } from 'swiper/modules';
 import Spinner from '../Utils/Loading/Spinner';
-import ProductCard from './ProductCard';
 
 
 
-const SingleProductSwiper = ({data,isLoading}:{data:any,isLoading:boolean}) => {
-  const [mainImage, setMainImage] = useState(data?.file);
-console.log(data?.data?.attachment);
+const SingleProductSwiper = ({data,isLoading,changeMainImage,mainImage}:{data:any,isLoading:boolean,changeMainImage:any,mainImage:any}) => {
 
-  const handleImageClick = (image:any) => {
-    setMainImage(image);
-  };
-  return (
-    <div className='single_product_Swiper'>
-      <Swiper
+    const handleImageClick = (image:any) => {
+      changeMainImage(image);
+    };
+    
+    return (
+      <div className='single_product_Swiper'>
+        {/* <div className="return_to_main_image_container " onClick={() => handleImageClick(data?.data?.file)}>
+          <img src={''} alt="Main Product Image" className='multi_image' />
+        </div> */}
+        <Swiper
         dir={'ltr'}
         slidesPerView={3}
         spaceBetween={66}
@@ -41,11 +42,13 @@ console.log(data?.data?.attachment);
           return(
             <SwiperSlide key={id}>
               <div key={id} className="image_container" onClick={() => handleImageClick(attachment)}>
+                
                 <img src={attachment} alt={`product_multi_image_${id}`} className='multi_image' />
               </div>
             </SwiperSlide>
           )
         })}
+        {/* <img src={data?.data?.file} className='multi_image' /> */}
       </Swiper>
     </div>
   );
diff --git a/src/Components/Service/Service.tsx b/src/Components/Service/Service.tsx
index a0e8288..3db8185 100644
--- a/src/Components/Service/Service.tsx
+++ b/src/Components/Service/Service.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-import { ServicesArray } from '../../data/Service';
 
 const Service = () => {
     const {t} = useTranslation();
@@ -12,22 +10,6 @@ const Service = () => {
           <source className="service_image" srcSet="/Service/ServicesRes.png" media="(max-width: 600px)" />
           <img className="service_image" src="/Service/Services.png" alt="MDN" />
         </picture>
-        {/* <ServiceImage/> */}
-        {/* <picture>
-          <source className="service_image" srcSet="/Service/serviceRes.svg" media="(max-width: 600px)" />
-          <img className="service_image" src="/Service/service.svg" alt="MDN" />
-          <div className='single_services_container'>
-          {
-            ServicesArray.map((e) =>(
-              <div className='single_service'>
-                <h1>{t(e.title)}</h1>
-                <p>{t(e.text)}</p>
-              </div>
-            ))
-          }
-          </div>
-        </picture> */}
-        {/* <img src="/Service/service.svg" alt="" /> */}
     </div>
   )
 }
diff --git a/src/Components/Utils/TalabeeField/TalabeeField.scss b/src/Components/Utils/TalabeeField/TalabeeField.scss
deleted file mode 100644
index dbed0c6..0000000
--- a/src/Components/Utils/TalabeeField/TalabeeField.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.TalabeeField{
-  >*{
-    width: 100%;
-  }
-    .text,.ant-form-item{
-       margin-bottom:7px !important;
-
-    }
-
-  >span{
-    margin-bottom: 0px !important;
-      &:focus-within{
-        border-color: var(--primary) ;
-            box-shadow: 0 0 0 1px var(--primary);
-            cursor: pointer;
-      }
-      &:has(.is-invalid){
-                border-color: red !important;
-
-      }
-      input{
-              color: var(--text);
-      background: var(--bg);
-      }
-    
-input:-webkit-autofill,
-input:-webkit-autofill:hover, 
-input:-webkit-autofill:focus, 
-input:-webkit-autofill:active{
-    -webkit-box-shadow: 0 0 0 30px white inset !important;
-}
-  }
-}
-
-.ant-upload-select{
-  width: 100%;
-}
-.Checkboxs{
-  padding: 4%;
-}
-.SearchField{
-    button{
-      background: var(--primary);
-    }
-}
-.text{
-  color: var(--text);
-}
-
-input:disabled{
-  color: var(--text) !important;
-}
-
-
-.error{
-  color: red;
-}
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/TalabeeField.tsx b/src/Components/Utils/TalabeeField/TalabeeField.tsx
deleted file mode 100644
index 0dfe6c0..0000000
--- a/src/Components/Utils/TalabeeField/TalabeeField.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import "./TalabeeField.scss";
-import { Date, Time, File, DataRange, SelectField, Default, CheckboxField } from './View';
-
-export interface TalabeeFieldProps {
-  name: string;
-  type?: "text" | "Select" | "DataRange" | "Date" | "Time" | "File" | "number" | "Checkbox" | "password";
-  placeholder?: string;
-  label?: string;
-  className?: string;
-  option?: any[];
-  isMulti?: boolean;
-  isDisabled?: boolean;
-  picker?: "data" | "week" | "month" | "quarter" | "year";
-  Format?: "YYYY/MM/DD" | "MM/DD" | "YYYY/MM";
-  onChange?: (value: any) => void;
-  Group?: boolean
-  dir?:'ltr' | "rtl"
-  inputType?:String
-}
-
-const TalabeeField = (props: TalabeeFieldProps) => {
-  switch (props?.type) {
-    case 'Select':
-      return <SelectField {...props} />;
-    case "DataRange":
-      return <DataRange {...props} />;
-    case "Date":
-      return <Date {...props} />;
-    case "Time":
-      return <Time {...props} />;
-    case "File":
-      return <File {...props} />;
-       case "Checkbox":
-      return <CheckboxField {...props} />;
-    default:
-      return <Default {...props} />;
-  }
-};
-
-TalabeeField.defaultProps = {
-  type: "text",
-  className: 'default-class',
-  option: [],
-  isMulti: false,
-  isDisabled: false,
-  picker: "date",
-  Format: "YYYY/MM/DD",
-  onChange: undefined,
-  Group:false,
-  dir : "ltr",
-  inputType: "text"
-
-};
-
-export default TalabeeField;
diff --git a/src/Components/Utils/TalabeeField/View/CheckboxField.tsx b/src/Components/Utils/TalabeeField/View/CheckboxField.tsx
deleted file mode 100644
index 8807b30..0000000
--- a/src/Components/Utils/TalabeeField/View/CheckboxField.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react'
-import useFormField from '../../../../Hooks/useFormField';
-import { Checkbox } from 'antd';
-
-const CheckboxField = ({ name, label, placeholder, isDisabled, option, isMulti, onChange,Group, props }: any) => {
-
-  const { t, formik } = useFormField(name, props)
-  const CheckboxhandleChange = (value:any) => {
-    console.log(value.target.checked);
-    
-    formik.setFieldValue(name, value.target.checked)
-
-  };
-  return (
-    <div className={Group ? "d-inline mt-3 Checkboxs" :``}>
-      <Checkbox
-        onChange={onChange || CheckboxhandleChange}
-        disabled={isDisabled}
-        checked={formik.getFieldProps(name).value}
-
-      >
-        {t(label)}
-      </Checkbox>
-
-    </div>
-  )
-}
-
-export default CheckboxField
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/View/DataRange.tsx b/src/Components/Utils/TalabeeField/View/DataRange.tsx
deleted file mode 100644
index 1bd5968..0000000
--- a/src/Components/Utils/TalabeeField/View/DataRange.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Form, DatePicker } from 'antd'
-
-import React from 'react'
-import useFormField from '../../../../Hooks/useFormField';
-
-const { RangePicker } = DatePicker;
-
-const DataRange = ({ name, label, isDisabled, option, isMulti,Format ,props }: any) => {
-
-  const { errorMsg, isError, t, formik } = useFormField(name, props)
-  const onCalendarChange = (value: any) => {
-    
-    formik.setFieldValue(name, value)
-
-  };
-  return (
-
-    <div className='TalabeeField'>
-      <label htmlFor={name} className="text">
-        {t(`${label}`)}
-      </label>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
-            <RangePicker
-            allowClear
-            className='w-100'
-            format={Format}
-            onCalendarChange={onCalendarChange}
-            />
-
-
-      </Form.Item>
-    </div>
-  )
-}
-
-export default DataRange
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/View/Date.tsx b/src/Components/Utils/TalabeeField/View/Date.tsx
deleted file mode 100644
index 25e5299..0000000
--- a/src/Components/Utils/TalabeeField/View/Date.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { Form, DatePicker } from 'antd'
-import React from 'react'
-import useFormField from '../../../../Hooks/useFormField';
-import dayjs from 'dayjs';
-
-const Date = ({ name, label, isDisabled, option, isMulti,picker="date" ,props }: any) => {
-
-  const { errorMsg, isError, t, formik } = useFormField(name, props)
-  const onCalendarChange = (value: any) => {
-    
-    formik.setFieldValue(name, value)
-
-  };
-  return (
-
-    <div className='TalabeeField'>
-      <label htmlFor={name} className="text">
-        {t(`${label}`)}
-      </label>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
-              <DatePicker
-              picker={picker}
-                allowClear
-                className='w-100'
-                // defaultValue={formik.values[name]}
-                
-              onChange={onCalendarChange} />
-
-
-
-      </Form.Item>
-    </div>
-  )
-}
-
-export default Date
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/View/Default.tsx b/src/Components/Utils/TalabeeField/View/Default.tsx
deleted file mode 100644
index eafeef3..0000000
--- a/src/Components/Utils/TalabeeField/View/Default.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Form, Input } from 'antd'
-import React from 'react'
-import useFormField from '../../../../Hooks/useFormField';
-
-const Default = ({ name, label, placeholder, isDisabled, onChange, props,inputType }: any) => {
-  const { Field, formik, isError, errorMsg, t } = useFormField(name, props);
-  
-  
-  return (
-    <div className="TalabeeField">
-        <label htmlFor={name} className="text">
-          {t(`${label ?  label : name}`)}
-        </label>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? 'error' : ''}
-        help={isError ? t(name)+ ' ' + t('is requierd') : ''}
-      >
-        <Field
-          as={Input}
-          type={inputType ? inputType : 'text'}
-          placeholder={t(`${placeholder ?placeholder  : name}`)}
-          name={name}
-          disabled={isDisabled}
-        //  onChange={onChange ? onChange : handleChange}
-        />
-      </Form.Item>
-    </div>
-  );
-};
-
-export default Default;
diff --git a/src/Components/Utils/TalabeeField/View/File.tsx b/src/Components/Utils/TalabeeField/View/File.tsx
deleted file mode 100644
index 08be889..0000000
--- a/src/Components/Utils/TalabeeField/View/File.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Button, Upload, UploadFile } from 'antd'
-import useFormField from '../../../../Hooks/useFormField';
-import { UploadOutlined } from '@ant-design/icons';
-import { BaseURL, IMAGE_BASE_URL } from '../../../../api/config';
-import { useTranslation } from 'react-i18next';
-import { ErrorMessage } from 'formik';
-
-
-const File = ({ name, label, onChange, isDisabled, props }: any) => {
-  const { formik, t } = useFormField(name, props)
-  const imageUrl = formik.values[name] ? IMAGE_BASE_URL + formik.values[name] : '';
-
-  const fileList: UploadFile[] = [
-
-    {
-      uid: '-1',
-      name: '',
-      status: 'done',
-      url: imageUrl,
-      thumbUrl: imageUrl,
-    }
-  ];
-  const FilehandleChange = (value: any) => {
-
-    formik.setFieldValue(name, value.file.originFileObj)
-
-  };
-  const customRequest = async ({ onSuccess }: any) => {
-    onSuccess();
-  };
-  return (
-    <div className="TalabeeField">
-      <label htmlFor={name} className="text">
-        {t(`${label || name}`)}
-      </label>
-
-      <Upload
-        disabled={isDisabled}
-        listType="picture"
-        maxCount={1}
-        className='w-100'
-        defaultFileList={[...fileList]}
-        onChange={onChange || FilehandleChange}
-        customRequest={customRequest}
-
-      >
-        <Button className='w-100' icon={<UploadOutlined />}>{t("upload_image")}</Button>
-        <ErrorMessage name={name}>{msg => <div className='error'>{t(msg)}</div>}</ErrorMessage>
-
-      </Upload>
-
-
-
-    </div>
-  )
-}
-
-export default File
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/View/SearchField.tsx b/src/Components/Utils/TalabeeField/View/SearchField.tsx
deleted file mode 100644
index caccf79..0000000
--- a/src/Components/Utils/TalabeeField/View/SearchField.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Input } from 'antd';
-import { SearchProps } from 'antd/es/input'
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-const { Search } = Input;
-
-const SearchField = () => {
-    const navigate = useNavigate()
-    const [searchParams,] = useSearchParams();
-    const location   =useLocation()  
-    const {t} = useTranslation();
-        
-    const [searchValue, setSearchValue] = useState(searchParams.get('search')|| "");
-
-    const onSearch: SearchProps['onSearch'] = (value, _e, info) => {
-        // console.log(value);
-
-        navigate(`${location?.pathname}?search=${value}`, { replace: true });
-    }
-    const onChange = (e :any) => {
-        setSearchValue(e.target.value);
-
-    }
-
-
-    return (
-        <div className='SearchField'>
-            <Search
-                allowClear
-                enterButton={t("search")}
-                size="middle"
-                placeholder={t("search")}
-                onSearch={onSearch}
-                style={{ width: 250 }} 
-                value={searchValue}
-                onChange={onChange}
-                />
-
-        </div>
-    )
-}
-
-export default SearchField
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/View/SelectField.tsx b/src/Components/Utils/TalabeeField/View/SelectField.tsx
deleted file mode 100644
index 04f8002..0000000
--- a/src/Components/Utils/TalabeeField/View/SelectField.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Form, Select } from 'antd'
-import React from 'react'
-import useFormField from '../../../../Hooks/useFormField';
-
-const SelectField = ({ name, label, placeholder, isDisabled,option,isMulti,onChange, props}: any) => {
-
-  const {  errorMsg, isError, t ,formik} = useFormField(name, props)
-  const SelecthandleChange = (value: { value: string; label: React.ReactNode }) => {
-     formik.setFieldValue(name, value)
-
-  };
-  return (
-     <div className='TalabeeField'>
-        <label htmlFor={name} className="text">
-        {t(`${label? label : ''}`)}
-        </label>
-        <Form.Item
-          hasFeedback
-          validateStatus={isError ? "error" : ""}
-          help={isError ? errorMsg : ""}
-        >
-          <Select
-          placeholder={t(`${placeholder ?placeholder  : name}`)}
-            disabled={isDisabled}
-            options={option}
-            defaultValue={formik.values[name]}
-            allowClear
-            {...(isMulti && { mode: "multiple" })}
-            onChange={onChange || SelecthandleChange}
-
-          />
-        </Form.Item>
-      </div>
-  )
-}
-
-export default SelectField
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/View/Time.tsx b/src/Components/Utils/TalabeeField/View/Time.tsx
deleted file mode 100644
index f186670..0000000
--- a/src/Components/Utils/TalabeeField/View/Time.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Form, TimePicker } from 'antd'
-import React from 'react'
-import useFormField from '../../../../Hooks/useFormField';
-
-const Time = ({ name, label,props }: any) => {
-
-  const { errorMsg, isError, t, formik } = useFormField(name, props)
-  const onCalendarChange = (value: any) => {
-    
-    formik.setFieldValue(name, value)
-
-  };
-  return (
-
-    <div className='TalabeeField'>
-      <label htmlFor={name} className="text">
-        {t(`${label}`)}
-      </label>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
-              <TimePicker
-                allowClear
-                className='w-100'
-                defaultValue={formik.values[name]}
-              onChange={onCalendarChange} />
-              
-
-
-
-      </Form.Item>
-    </div>
-  )
-}
-
-export default Time
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/View/index.tsx b/src/Components/Utils/TalabeeField/View/index.tsx
deleted file mode 100644
index ca46bc9..0000000
--- a/src/Components/Utils/TalabeeField/View/index.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import Time from "./Time";
-import SelectField from "./SelectField";
-import Date from "./Date";
-import DataRange from "./DataRange";
-import CheckboxField from "./CheckboxField";
-import Default from "./Default";
-import File from "./File";
-
-
-
-
-
-export {
-    Time,
-    SelectField,
-    Date,
-    DataRange,
-    CheckboxField,
-    Default,
-    File
-
-}
\ No newline at end of file
diff --git a/src/Components/Utils/TalabeeField/index.tsx b/src/Components/Utils/TalabeeField/index.tsx
deleted file mode 100644
index 0691755..0000000
--- a/src/Components/Utils/TalabeeField/index.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import  { useState } from 'react';
-import { ErrorMessage, useField, Field, useFormikContext } from 'formik';
-import { useTranslation } from 'react-i18next';
-import { FaExclamationCircle } from 'react-icons/fa';
-
-
-
-
-
-export {
-    useState,
-    ErrorMessage, useField, Field, useFormikContext,
-    useTranslation,
-    FaExclamationCircle    
-
-}
\ No newline at end of file
diff --git a/src/Components/Works/Works.tsx b/src/Components/Works/Works.tsx
deleted file mode 100644
index 7798f27..0000000
--- a/src/Components/Works/Works.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Works = () => {
-  return (
-    <div>Works</div>
-  )
-}
-
-export default Works
\ No newline at end of file
diff --git a/src/Components/Works/WorksSwiper.tsx b/src/Components/Works/WorksSwiper.tsx
deleted file mode 100644
index d216b38..0000000
--- a/src/Components/Works/WorksSwiper.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import { useRef, useState } from 'react';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import 'swiper/css';
-import 'swiper/css/free-mode';
-import 'swiper/css/pagination';
-import { A11y, Autoplay, Navigation, Scrollbar } from 'swiper/modules';
-import { IMAGE_BASE_URL } from '../../api/config';
-import Spinner from '../Utils/Loading/Spinner';
-
-
-
-const WorksSwiper = ({ data, isLoading }: { data: any, isLoading: boolean }) => {
-
-  return (
-    <div className='works_Swiper'>
-      <Swiper
-        dir={'ltr'}
-        slidesPerView={5}
-        spaceBetween={66}
-        breakpoints={{
-          0: { slidesPerView: 1 },
-          400: { slidesPerView: 1 },
-          600: { slidesPerView: 3 },
-          900: { slidesPerView: 4 },
-          1200: { slidesPerView: 5 },
-          1500: { slidesPerView: 5 },
-        }}
-        autoplay={true}
-        modules={[Navigation, Scrollbar, A11y, Autoplay]}
-        pagination={{ clickable: true }}
-        className="mySwiper"
-      >
-        {
-          isLoading ? <Spinner /> :
-            data?.map((item: any, index: number) => (
-              <SwiperSlide key={index}>
-                <img src={IMAGE_BASE_URL + item?.image} alt="Works" />
-
-              </SwiperSlide>
-            ))}
-      </Swiper>
-    </div>
-  );
-}
-
-export default WorksSwiper;
diff --git a/src/Components/contact/FormUtils.tsx b/src/Components/contact/FormUtils.tsx
index b560ec6..c24b5db 100644
--- a/src/Components/contact/FormUtils.tsx
+++ b/src/Components/contact/FormUtils.tsx
@@ -1,9 +1,6 @@
 import * as Yup from 'yup';
 
   export const getInitialValues = (values:any)=>{
-    
-    // Implemnt Your Auth Code 
-    // navigate('/', { replace: true })
   }
 
 export   const getValidationSchema = (t:any) => {
diff --git a/src/Layout/Layout.tsx b/src/Layout/Layout.tsx
index 5296e07..cd19868 100644
--- a/src/Layout/Layout.tsx
+++ b/src/Layout/Layout.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import Header from './NavBar/Header';
 import NavBar from './NavBar/NavBar';
 import Footer from './Footer/Footer';
diff --git a/src/Layout/NavBar/NavBar.tsx b/src/Layout/NavBar/NavBar.tsx
index d4f9163..9036436 100644
--- a/src/Layout/NavBar/NavBar.tsx
+++ b/src/Layout/NavBar/NavBar.tsx
@@ -1,7 +1,5 @@
 import { HedaerLinksArray } from '../../data/HeaderLinks'
-import AnimationButton from '../../Components/Ui/AnimationButton';
 import NavBarMenu from './NavBarMenu';
-import ViewSearch from '../../Components/Utils/Search/Search';
 import SearchButton from '../../Components/Utils/Search/SearchButton';
 
 const NavBar = () => {
@@ -12,13 +10,10 @@ const NavBar = () => {
     <div className='header_container'>
 
         <div className='image_container'>
-        {/* { isLoading ? <Spinner/> : */}
           <img src={'/Logo/Logo.png'} alt='Logo'/>
-        {/* } */}
         </div>
         <div className='Header_links'>
           {
-            // isLoading ? <Spinner/> :
             HedaerLinksArray.map((link,index) => {
               const drawerLinkClass = link.isOnlyDrawer ? 'only_drawer' : '';
               return (
diff --git a/src/Layout/NavBar/NavBarMenu.tsx b/src/Layout/NavBar/NavBarMenu.tsx
index 0d26459..8035995 100644
--- a/src/Layout/NavBar/NavBarMenu.tsx
+++ b/src/Layout/NavBar/NavBarMenu.tsx
@@ -4,7 +4,6 @@ import { MenuOutlined } from '@ant-design/icons';
 import { HedaerLinksArray } from '../../data/HeaderLinks';
 import DrawerLink from '../../Components/Ui/DrawerLink';
 import { THeaderPage } from '../../type/app';
-import { IMAGE_BASE_URL } from '../../api/config';
 import Spinner from '../../Components/Utils/Loading/Spinner';
 import SearchButton from '../../Components/Utils/Search/SearchButton';
 
diff --git a/src/Layout/NotFound.tsx b/src/Layout/NotFound.tsx
index 3ba0e12..ea60cf8 100644
--- a/src/Layout/NotFound.tsx
+++ b/src/Layout/NotFound.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import AnimationButton from '../Components/Ui/AnimationButton';
 
 const NotFound = () => {
diff --git a/src/Pages/About/Page.tsx b/src/Pages/About/Page.tsx
index 6abb4a3..aa9639b 100644
--- a/src/Pages/About/Page.tsx
+++ b/src/Pages/About/Page.tsx
@@ -2,10 +2,8 @@ import About from '../../Components/about/About'
 import OurTeam from '../../Components/OurTeam/OurTeam';
 import Partner from '../../Components/Partner/Partner';
 import HeaderLink from '../../Components/Ui/HeaderLink';
-import { useFetchData } from '../../Hooks/useFetchData';
 
 const AboutUS = () => {
-  const { data, isLoading } = useFetchData('api/home');
 
   return (
     <>
diff --git a/src/Pages/Contact/Page.tsx b/src/Pages/Contact/Page.tsx
index d587863..9fd6358 100644
--- a/src/Pages/Contact/Page.tsx
+++ b/src/Pages/Contact/Page.tsx
@@ -1,9 +1,7 @@
 import Contact from "../../Components/contact/Contact"
 import HeaderLink from "../../Components/Ui/HeaderLink";
-import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  const { data, isLoading } = useFetchData('api/home');
 
   return (
     <div className='contact_container'>
diff --git a/src/Pages/Distributors/Page.tsx b/src/Pages/Distributors/Page.tsx
index 650aa9f..49180cd 100644
--- a/src/Pages/Distributors/Page.tsx
+++ b/src/Pages/Distributors/Page.tsx
@@ -1,10 +1,7 @@
 import DistributorCollaps from "../../Components/Distributor/DistributorCollaps";
-import DistributorWord from "../../Components/Ui/DistributorWord";
 import HeaderLink from "../../Components/Ui/HeaderLink";
-import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  const { data, isLoading } = useFetchData('api/home');
   const {t} = useTranslation();
   return (
     <div className='Distributors_page'>
diff --git a/src/Pages/Document/Page.tsx b/src/Pages/Document/Page.tsx
index 70d29fc..a2648bd 100644
--- a/src/Pages/Document/Page.tsx
+++ b/src/Pages/Document/Page.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import DocumentCard from '../../Components/Document/DocumentCard'
 import HeaderLink from '../../Components/Ui/HeaderLink'
 import { useGetCertificate } from '../../api/certificate'
diff --git a/src/Pages/Privacy/Page.tsx b/src/Pages/Privacy/Page.tsx
index c5a2bda..61ea765 100644
--- a/src/Pages/Privacy/Page.tsx
+++ b/src/Pages/Privacy/Page.tsx
@@ -1,11 +1,6 @@
 import Info from "../../Components/Info/Info"
-import { PrivacyData } from "../../data/Info";
-import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  // const { data, isLoading } = useFetchData('api/home');
-
-  
   return (
     <Info
       headerText="Privacy Policy"
diff --git a/src/Pages/Products/FilterSection.tsx b/src/Pages/Products/FilterSection.tsx
index f6ef625..7ddfb13 100644
--- a/src/Pages/Products/FilterSection.tsx
+++ b/src/Pages/Products/FilterSection.tsx
@@ -1,9 +1,5 @@
-import React from "react";
-import type { CollapseProps } from "antd";
 import { Collapse } from "antd";
-import { IoIosArrowDown } from "react-icons/io";
 import { SlArrowDown } from "react-icons/sl";
-import { useTranslation } from "react-i18next";
 import BrandFilter from "../../Components/Products/BrandFilter";
 import SearchButton from "../../Components/Utils/Search/SearchButton";
 import { useGetCategory } from "../../api/category";
@@ -13,9 +9,7 @@ const FilterSection = ({isLoading}:{isLoading:boolean}) => {
   const [noDataFound, setNoDataFound] = useState(false);
   const [openSearch, setOpenSearch] = useState(false);
 
-  // console.log(data?.data);
   const {data:category} = useGetCategory();
-  // console.log(category?.data);
   
   const items = category?.data?.map((e:any)=>({
     key:e.id,
diff --git a/src/Pages/Products/Page.tsx b/src/Pages/Products/Page.tsx
index 638d2e7..7805dfa 100644
--- a/src/Pages/Products/Page.tsx
+++ b/src/Pages/Products/Page.tsx
@@ -1,13 +1,9 @@
 import HeaderLink from '../../Components/Ui/HeaderLink'
 import ProductCard from '../../Components/Products/ProductCard'
-import React, { useState, useEffect } from "react";
-import { MdOutlineCancel } from "react-icons/md";
-import { Drawer, Pagination, Select, Spin } from "antd";
-import { IoIosArrowForward } from "react-icons/io";
+import { Drawer, Pagination} from "antd";
 import { useSearchParams } from "react-router-dom";
 import { useFilterStateState } from '../../zustand/Filter';
 import FilterSection from './FilterSection';
-import SearchButton from '../../Components/Utils/Search/SearchButton';
 import { FaFilter } from "react-icons/fa";
 import { useGetProducts } from '../../api/products';
 import Spinner from '../../Components/Utils/Loading/Spinner';
@@ -20,8 +16,7 @@ const Page = () => {
     const [currentPage, setCurrentPage] = useState(1);
     const [totalItems, setTotalItems] = useState(0);
     const [perPage, setPerPage] = useState(10);
-    const [noDataFound, setNoDataFound] = useState(false);
-    const [openSearch, setOpenSearch] = useState(false);
+    
     const categories = Filter?.filter((item:any)=> item.select !== true)?.map((item:any)=> item?.id)
 
     const { data , isLoading } = useGetProducts({
@@ -30,31 +25,7 @@ const Page = () => {
       category_id:categories
     });
     
-    // useEffect(() => {
-    //   setType(type_param);
-    // }, [type_param]);
-
-
-    // const handel_filter_delete = (index: number) => {
-    //   setFilter(Filter.filter((_: any, i: number) => i !== index));
-    // };
-
-    // const handel_filter_reset = () => {
-    //   setFilter([]);
-    // };
-
-    // const handleChange = (value: string) => {
-    //   const newArray = Filter?.filter((item: any) => item.select !== true);
-    //   setFilter([
-    //     ...newArray,
-    //     { name: value, index: Filter.length, select: true },
-    //   ]);
-    //   if (type_param) {
-    //     searchParams.delete('type');
-    //     setSearchParams(searchParams);
-    //   }
-    //   setType(value);
-    // };
+  
 
     const handlePageChange = (page: number) => {
       setCurrentPage(page);
@@ -70,10 +41,6 @@ const Page = () => {
       setOpen(false);
     };
 
-    // const products = Filter?.filter((item:any)=> item.select !== true)?.map((item:any)=> item?.id)
-    
-    //   console.log(products);
-      
     useEffect(() => {
       if (data?.meta) {
         setTotalItems(data.meta?.total);
diff --git a/src/Pages/Services/Page.tsx b/src/Pages/Services/Page.tsx
index 6677739..becea6d 100644
--- a/src/Pages/Services/Page.tsx
+++ b/src/Pages/Services/Page.tsx
@@ -1,10 +1,7 @@
-import Contact from "../../Components/contact/Contact"
 import Service from "../../Components/Service/Service";
 import HeaderLink from "../../Components/Ui/HeaderLink";
-import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  const { data, isLoading } = useFetchData('api/home');
 
   return (
     <div className='contact_container'>
diff --git a/src/Pages/Services/ServiceImage.tsx b/src/Pages/Services/ServiceImage.tsx
deleted file mode 100644
index e69de29..0000000
diff --git a/src/Pages/SingleProduct/Page.tsx b/src/Pages/SingleProduct/Page.tsx
index 1411957..f22e572 100644
--- a/src/Pages/SingleProduct/Page.tsx
+++ b/src/Pages/SingleProduct/Page.tsx
@@ -1,6 +1,4 @@
 import { languageObject } from '../../Components/Utils/languageObject';
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
 import Similar from "./Similar";
 import { Spin } from "antd";
 import HeaderLink from "../../Components/Ui/HeaderLink";
@@ -28,9 +26,9 @@ const Page = () => {
   
   const [mainImage, setMainImage] = useState(product?.file);
 
-  const handleImageClick = (image:any) => {
-    setMainImage(image);
-  };
+  // const handleImageClick = (image:any) => {
+  //   setMainImage(image);
+  // };
   
   useEffect(() => {
     setMainImage(product?.file);
@@ -59,7 +57,7 @@ const Page = () => {
                     <img src={attachment} alt={`product_multi_image_${index}`} className='multi_image' />
                   </div>
                 ))} */}
-                <SingleProductSwiper data={data} isLoading={isLoading}/>
+                <SingleProductSwiper data={data} isLoading={isLoading} changeMainImage={setMainImage} mainImage={mainImage}/>
                 
               </div>
             </div>
diff --git a/src/Pages/SingleProduct/Similar.tsx b/src/Pages/SingleProduct/Similar.tsx
index 1cf8a9c..7f2434b 100644
--- a/src/Pages/SingleProduct/Similar.tsx
+++ b/src/Pages/SingleProduct/Similar.tsx
@@ -1,4 +1,3 @@
-import { useTranslation } from "react-i18next";
 import { useGetProducts } from "../../api/products";
 import ProductSwiper from '../../Components/Products/ProductSwiper';
 
diff --git a/src/Pages/Terms/Page.tsx b/src/Pages/Terms/Page.tsx
index 0397f03..8d2e70a 100644
--- a/src/Pages/Terms/Page.tsx
+++ b/src/Pages/Terms/Page.tsx
@@ -1,10 +1,7 @@
 import Info from "../../Components/Info/Info"
-import { useFetchData } from "../../Hooks/useFetchData";
 
 const Page = () => {
-  const { data, isLoading } = useFetchData('api/home');
 
-  const TermsData = data?.Static_info[1];
   return (
     <Info
       headerText="Terms and Conditions"
diff --git a/src/ProviderContainer.tsx b/src/ProviderContainer.tsx
index 8ee5bd7..99de9af 100644
--- a/src/ProviderContainer.tsx
+++ b/src/ProviderContainer.tsx
@@ -1,8 +1,7 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import QueryProvider from './lib/ReactQueryProvider'
 import { BrowserRouter } from 'react-router-dom'
 import ToastProvider from './lib/ToastProvider'
-import ReduxT from './lib/ReduxT'
 
 type ProviderContainerProps =  {
     children:ReactNode
diff --git a/src/Styles/AppStyle/Variables.scss b/src/Styles/AppStyle/Variables.scss
index 0680ba6..db92d9d 100644
--- a/src/Styles/AppStyle/Variables.scss
+++ b/src/Styles/AppStyle/Variables.scss
@@ -13,7 +13,7 @@
     --whiteOpacity: #d4d4d433;
     --titleFsize: 22px;
 
-
+////////////////////////////////
     --fifthly: #35c6c2;
     --sixthly: #fff;
     --seven: #d90217;
diff --git a/src/Styles/Component/FooterTItleWithSeparator.scss b/src/Styles/Component/FooterTItleWithSeparator.scss
index 5101b8e..22fb052 100644
--- a/src/Styles/Component/FooterTItleWithSeparator.scss
+++ b/src/Styles/Component/FooterTItleWithSeparator.scss
@@ -18,7 +18,6 @@
             position: absolute;
             background: var(--primary);
             content: "";
-            // bottom: 0px !important;
             left:0;
           }
     }
diff --git a/src/Styles/Component/ProductCard.scss b/src/Styles/Component/ProductCard.scss
index 5ec49be..9e157a5 100644
--- a/src/Styles/Component/ProductCard.scss
+++ b/src/Styles/Component/ProductCard.scss
@@ -13,7 +13,6 @@
         overflow: hidden;
         img{
             width: 290px;
-            // max-height: 200px;
             transition: ease-in-out .3s;
             border-radius: 20px;
             object-fit: fill;
@@ -22,7 +21,7 @@
     }
     .truncate-text{
         width: 90%;
-        max-width: 100%; /* Adjust as needed */
+        max-width: 100%;
         font-size: 16px !important;
         padding-block: 10px;
         text-align: center;
@@ -51,7 +50,6 @@
             min-height: 220px;
             img{
                 width: 260px;
-                // min-height: 160px;
             }
         }
         .truncate-text{
diff --git a/src/Styles/Component/SingleLink.scss b/src/Styles/Component/SingleLink.scss
index ef94c14..82e740b 100644
--- a/src/Styles/Component/SingleLink.scss
+++ b/src/Styles/Component/SingleLink.scss
@@ -11,7 +11,6 @@
             font-size: 20px;
         }
         h5{
-            // opacity: .9;
             color: rgba(43, 43, 43, 1);
             font-weight: 600;
             text-transform: capitalize;
diff --git a/src/Styles/Layout/Layout.scss b/src/Styles/Layout/Layout.scss
index 29afc52..e69de29 100644
--- a/src/Styles/Layout/Layout.scss
+++ b/src/Styles/Layout/Layout.scss
@@ -1,3 +0,0 @@
-.Layout_Body{
-    // height: 200vh;
-}
\ No newline at end of file
diff --git a/src/Styles/Pages/Contact.scss b/src/Styles/Pages/Contact.scss
index f221178..fb64978 100644
--- a/src/Styles/Pages/Contact.scss
+++ b/src/Styles/Pages/Contact.scss
@@ -157,7 +157,6 @@
 
                     .button_container{
                         width: 50%;
-                        // @include Flex;
                         margin-inline: auto;
                         .contact_button{
                             display: flex !important;justify-content: center !important;align-items: center !important;
diff --git a/src/Styles/Pages/Distributor.scss b/src/Styles/Pages/Distributor.scss
index 4d1f4d9..5da1aa9 100644
--- a/src/Styles/Pages/Distributor.scss
+++ b/src/Styles/Pages/Distributor.scss
@@ -110,7 +110,6 @@
     .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
       font-size: max(20px,1.8vw);
       font-weight: 500;
-    //   width: 10px !important;
     }
     .ant-collapse-item{
         @include Flex; flex-direction: column;
@@ -217,7 +216,6 @@
         .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
           font-size: 18px !important;
           font-weight: 500;
-        //   width: 1px !important;
         }
         .ant-collapse-item{
             @include Flex; flex-direction: column;
diff --git a/src/Styles/Pages/Products.scss b/src/Styles/Pages/Products.scss
index f88fd49..f532006 100644
--- a/src/Styles/Pages/Products.scss
+++ b/src/Styles/Pages/Products.scss
@@ -38,7 +38,6 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        // padding-inline: 16px;
         border-bottom: 1px solid var(--gray);
         .InputAutoComplete {
             width: 100% !important;
diff --git a/src/Styles/Pages/Service.scss b/src/Styles/Pages/Service.scss
index 3a515e7..3a6f15c 100644
--- a/src/Styles/Pages/Service.scss
+++ b/src/Styles/Pages/Service.scss
@@ -24,30 +24,6 @@
             width: 100%;
         }
     }
-    // picture{
-    //     width: 90%;
-    //     position: relative;
-    //     // display: flex;
-    //     .single_services_container{
-    //         display: flex;align-items: center;justify-content:space-between;
-    //         width: 90%;
-    //         margin-inline: auto ;
-    //         .single_service{
-    //             width: 100%;
-    //             text-align: center;
-    //             width: 21%;
-    //             position: absolute;
-    //             top: 40%;
-    //             h1{
-    //                 font-size: 20px;
-    //             }
-    //             p{
-    //                 font-size: 16px;
-    //                 color: var(--gray);
-    //             }
-    //         }
-    //     }
-    // }
 }
 
 @media screen and  (max-width:900px) {
diff --git a/src/Styles/Pages/SingleProduct.scss b/src/Styles/Pages/SingleProduct.scss
index fc1f9b9..b47454a 100644
--- a/src/Styles/Pages/SingleProduct.scss
+++ b/src/Styles/Pages/SingleProduct.scss
@@ -73,7 +73,27 @@
                 }
             }
         }
-
+        .return_to_main_image_container{
+            @include Flex;text-align: center;
+            width: 100px ;
+            height: 100px;
+            border: 2px solid var(--gray);
+            background: var(--white);
+            border-radius: 20px;
+            cursor: pointer;
+            overflow: hidden;
+            margin-right: 40px;
+            img{
+                transition: ease-in-out .3s;
+                border-radius: 20px;
+                width: 100% !important;
+                object-fit: fill !important;
+                border: 0 !important;
+                &:hover{
+                    transform: scale(1.1);
+                }
+            }
+        }
         .single_product_right{
             width: 48%;
             line-height: 35px;
@@ -184,7 +204,6 @@
             text-align: center !important;  
         }
     }
-    
 }
 
 @media screen and (max-width:800px) {
@@ -198,8 +217,7 @@
             .single_product_left{
                 width: 90%;
                 .main_image_container{
-                    // height: 400px;
-                    img{
+k                    img{
                         object-fit: fill;
                         height: 100% !important;
                     }
@@ -272,4 +290,29 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+
+
+.single_product_Swiper {
+    display: flex;
+    align-items: center;
+  }
+  
+  .main-image-square {
+    width: 80px;
+    height: 80px;
+    margin-right: 10px;
+    cursor: pointer;
+    border: 2px solid #ccc;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+  
+  .main-image-thumbnail {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: cover;
+  }
\ No newline at end of file
diff --git a/src/helper/HelperInterfaces.ts b/src/helper/HelperInterfaces.ts
index f98fcf3..ad01989 100644
--- a/src/helper/HelperInterfaces.ts
+++ b/src/helper/HelperInterfaces.ts
@@ -1,5 +1,3 @@
-import { Component } from "react"
-import {  IconType } from "react-icons"
 
 export interface ChangeModeProps{
     // useCallbackDependency:Function
diff --git a/src/lib/ReactQueryProvider.tsx b/src/lib/ReactQueryProvider.tsx
index 7989b53..19f2289 100644
--- a/src/lib/ReactQueryProvider.tsx
+++ b/src/lib/ReactQueryProvider.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 
 function QueryProvider({ children }: any) {
diff --git a/src/lib/ReduxT.tsx b/src/lib/ReduxT.tsx
deleted file mode 100644
index 7defed0..0000000
--- a/src/lib/ReduxT.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-//// redux provider comp ////
-
-// import { store } from '../Redux/store'
-import { Provider } from 'react-redux'
-import { Tchildren } from '../Layout/NavBar/Types'
-
-function ReduxT({ children }: Tchildren) {
-
-  return (
-    ''
-    // <Provider store={store}>
-    //     {children}
-    // </Provider>
-
-  )
-}
-
-export default ReduxT
\ No newline at end of file
diff --git a/src/lib/ToastProvider.tsx b/src/lib/ToastProvider.tsx
index 2937558..478186b 100644
--- a/src/lib/ToastProvider.tsx
+++ b/src/lib/ToastProvider.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { ToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css';