diff --git a/package-lock.json b/package-lock.json
index 1f09d87..5252044 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "react-scripts": "5.0.1",
         "react-slick": "^0.29.0",
         "reactjs-image-zoom": "^1.0.8",
+        "redux-persist": "^6.0.0",
         "rn-range-slider": "^2.2.2",
         "styled-components": "^5.3.11",
         "uuidv4": "^6.2.13",
@@ -17818,6 +17819,14 @@
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="
     },
+    "node_modules/redux-persist": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
+      "integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==",
+      "peerDependencies": {
+        "redux": ">4.0.0"
+      }
+    },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
diff --git a/package.json b/package.json
index 99e5dac..2677a1c 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "reactjs-image-zoom": "^1.0.8",
+    "redux-persist": "^6.0.0",
     "rn-range-slider": "^2.2.2",
     "styled-components": "^5.3.11",
     "uuidv4": "^6.2.13",
diff --git a/src/App.js b/src/App.js
index 620122a..678f909 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,6 +1,11 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
-import { getDatabase, onValue, ref } from 'firebase/database';
-import React, { createContext, useEffect, useState } from 'react';
+
+import "bootstrap/dist/css/bootstrap.min.css";
+import {
+  getDatabase,
+  onValue,
+  ref
+} from "firebase/database";
+import React, { createContext, useEffect, useState } from "react";
 import {
   createBrowserRouter,
   HashRouter,
@@ -10,23 +15,23 @@ import {
   RouterProvider,
   Routes
 } from 'react-router-dom';
-import './App.css';
-import Loader from './assets/images/loading.gif';
-import Footer from './components/footer/footer';
-import Header from './components/header/header';
-import About from './pages/About';
-import AddProductForm from './pages/AddProd';
-import DetailsPage from './pages/Details';
-import Home from './pages/Home/index';
-import Listing from './pages/Listing';
-import NotFound from './pages/NotFound';
-import SignIn from './pages/SignIn';
+import "./App.css";
+import Loader from "./assets/images/loading.gif";
+import Footer from "./components/footer/footer";
+import Header from "./components/header/header";
+import About from "./pages/About";
+import AddProductForm from "./pages/AddProd";
+import DetailsPage from "./pages/Details";
+import Home from "./pages/Home/index";
+import Listing from "./pages/Listing";
+import NotFound from "./pages/NotFound";
+import SignIn from "./pages/SignIn";
+import SignUp from "./pages/SignUp";
+import Cart from "./pages/cart";
+import Wishlist from "./pages/wishList";
+import "./responsive.css";
+import {useSelector} from "react-redux"
 import ResetPassword from './pages/ResetPassword';
-import SignUp from './pages/SignUp';
-import Cart from './pages/cart';
-import Wishlist from './pages/wishList';
-import './responsive.css';
-
 // import data from './data';
 import { collection, doc, getDocs } from 'firebase/firestore';
 import MapComponent from './components/map/ITEMmap';
@@ -36,67 +41,30 @@ import SearchResults from './components/search/SearchResults';
 import GoToTop from './components/GoToTop/GoToTop';
 import Contributors from './pages/Contributors/Contributors';
 
-const MyContext = createContext();
+
 
 function App() {
   const [productData, setProductData] = useState([]);
 
   const [cartItems, setCartItems] = useState([]);
-  const [wishlistItems, setWishlistItems] = useState([]);
 
   const [isLoading, setIsloading] = useState(true);
 
-  const [loading, setLoading] = useState(true);
-
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-
-  const [isopenNavigation, setIsopenNavigation] = useState(false);
-
   const [isLogin, setIsLogin] = useState();
-  const [isOpenFilters, setIsopenFilters] = useState(false);
   const [data, setData] = useState([]);
-  const [cartCount, setCartCount] = useState(0);
-  const [wishlistCount, setWishlistCount] = useState(0);
 
-  useEffect(() => {
-    fetchCartProducts();
-    fetchWishlistProducts();
-  }, [isLogin]);
+  const uid = useSelector((state)=>state.authReducer.uid)
+  const logged = useSelector((state)=>state.authReducer.isAuth)
+
+  function replaceSpecialCharacters(inputString) {
+    // Use a regular expression to replace special characters with underscore _
+    const replacedString = inputString.replace(/[#$\[\].]/g, "_");
+
+    return replacedString;
+  }
+  const email = replaceSpecialCharacters(useSelector((state)=>state.authReducer.email))
 
-  const fetchCartProducts = async () => {
-    try {
-      const cartRef = doc(db, 'carts', localStorage.getItem('uid'));
-      const productsCollectionRef = collection(cartRef, 'products');
-      const querySnapshot = await getDocs(productsCollectionRef);
-      const products = [];
-      querySnapshot.forEach((doc) => {
-        products.push({ id: doc.id, ...doc.data() });
-      });
-      setCartItems(products);
-      setCartCount(products.length); // Set the product count
-    } catch (error) {
-      console.error('Error fetching cart products:', error);
-    }
-  };
 
-  const fetchWishlistProducts = async () => {
-    console.log('fetchWishlistProducts');
-    try {
-      const wishlistRef = doc(db, 'wishlists', localStorage.getItem('uid'));
-      const productsCollectionRef = collection(wishlistRef, 'products');
-      const querySnapshot = await getDocs(productsCollectionRef);
-      console.log(querySnapshot);
-      const products = [];
-      querySnapshot.forEach((doc) => {
-        products.push({ id: doc.id, ...doc.data() });
-      });
-      console.log(products);
-      setWishlistItems(products);
-      setWishlistCount(products.length); // Set the product count
-    } catch (error) {
-      console.error('Error fetching wishlist products:', error);
-    }
-  };
 
   useEffect(() => {
     const fetchData = async () => {
@@ -121,8 +89,7 @@ function App() {
   useEffect(() => {
     getData();
 
-    const is_Login = localStorage.getItem('isLogin');
-    setIsLogin(is_Login);
+    setIsLogin(logged);
 
     setTimeout(() => {
       setProductData(data[1]);
@@ -136,7 +103,8 @@ function App() {
       const db = getDatabase();
 
       // Reference to the node or path you want to fetch data from
-      const dataRef = ref(db, localStorage.getItem('user'));
+
+      const dataRef = ref(db, email);
 
       // Fetch data from the specified path
       onValue(
@@ -180,66 +148,6 @@ function App() {
     }
   };
 
-  const addToCart = async (item) => {
-    try {
-      const user = localStorage.getItem('user');
-      // Initialize Firebase database with the provided database URL
-      const db = getDatabase();
-      const cartRef = ref(db, user);
-      // Generate a unique key using the user's email and item details
-      const uniqueKey = user + item.id; // Modify as per your requirement
-      // Add item to the cart in Firebase
-      setCartItems([...cartItems, { ...item, quantity: 1 }]);
-      //console.log('Item added to cart successfully');
-    } catch (error) {
-      console.error('Error adding item to cart:', error);
-    }
-  };
-
-  const removeItemsFromCart = (id) => {
-    const arr = cartItems.filter((obj) => obj.id !== id);
-    setCartItems(arr);
-  };
-
-  const emptyCart = () => {
-    setCartItems([]);
-  };
-
-  const signIn = () => {
-    const is_Login = localStorage.getItem('isLogin');
-    setIsLogin(is_Login);
-  };
-
-  const signOut = () => {
-    localStorage.removeItem('isLogin');
-    setIsLogin(false);
-  };
-
-  const openFilters = () => {
-    setIsopenFilters(!isOpenFilters);
-  };
-
-  const value = {
-    cartItems,
-    isLogin,
-    windowWidth,
-    isOpenFilters,
-    addToCart,
-    removeItemsFromCart,
-    emptyCart,
-    signOut,
-    signIn,
-    openFilters,
-    isopenNavigation,
-    setIsopenNavigation,
-    cartCount,
-    setCartCount,
-    wishlistCount,
-    setWishlistCount,
-    fetchCartProducts,
-    fetchWishlistProducts
-  };
-
   useEffect(() => {
     if (window.botpressWebChat) {
       window.botpressWebChat.init({
@@ -249,11 +157,11 @@ function App() {
     }
   }, []);
 
-  const router = createBrowserRouter([
+const router = createBrowserRouter([
     {
       path: '/',
       element: (
-        <MyContext.Provider value={value}>
+        <>
           {isLoading === true && (
             <div className="loader">
               <img src={Loader} />
@@ -263,7 +171,7 @@ function App() {
           <Outlet />
           <Footer />
           <GoToTop />
-        </MyContext.Provider>
+        </>
       ),
       children: [
         {
@@ -336,16 +244,13 @@ function App() {
   ]);
 
   return data && data.productData ? (
-    <MyContext.Provider value={value}>
       <RouterProvider router={router} />
-    </MyContext.Provider>
   ) : (
     <div className="loader">
       <img src={Loader} />
     </div>
   );
 }
-
+          
 export default App;
 
-export { MyContext };
diff --git a/src/Redux/auth-slice.js b/src/Redux/auth-slice.js
index 278c414..d02b968 100644
--- a/src/Redux/auth-slice.js
+++ b/src/Redux/auth-slice.js
@@ -1,28 +1,32 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
-  value: {
-    isAuth: false,
-    email: ''
-  }
+  isAuth: false,
+  phoneNumber: null,
+  photoURL: "",
+  uid: "",
+  displayName: "",
+  email: "",
+  emailVerified: "",
 };
 
 export const auth = createSlice({
-  name: 'auth',
+  name: "auth",
   initialState,
   reducers: {
     logOut: () => {
       return initialState;
     },
     logIn: (state, action) => {
-      return {
-        value: {
-          isAuth: true,
-          email: action.payload.email
-        }
-      };
-    }
-  }
+      state.isAuth = true;
+      state.phoneNumber = action.payload.phoneNumber;
+      state.photoURL = action.payload.photoURL;
+      state.uid = action.payload.uid;
+      state.displayName = action.payload.dispalyName;
+      state.email = action.payload.email;
+      state.emailVerified = action.payload.emailVerified;
+    },
+  },
 });
 
 export const { logIn, logOut } = auth.actions;
diff --git a/src/Redux/cart-slice.js b/src/Redux/cart-slice.js
new file mode 100644
index 0000000..284f3ee
--- /dev/null
+++ b/src/Redux/cart-slice.js
@@ -0,0 +1,119 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { db } from "../firebase";
+import { doc, setDoc, deleteDoc, getDocs, collection } from "firebase/firestore";
+
+const initialState = {
+  items: [],
+  isAdding: false,
+  isRemoving: false,
+  isLoading: false,
+};
+
+export const checkIsItemInCart = (state, itemId) => {
+  if (!state.cart || !state.cart.items) {
+    return false; // Return false if cart or items is undefined
+  }
+  return state.cart.items.some((item) => item.id === itemId);
+};
+
+export const getAddToCart = createAsyncThunk(
+  "cart/add",
+  async ({ item, uid }) => {
+    try {
+      const cartRef = doc(db, "carts", uid);
+      const productRef = doc(cartRef, "products", `${item.id}`);
+      await setDoc(productRef, { ...item, quantity: 1 });
+      return item;
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
+
+export const getDeleteCartItem = createAsyncThunk(
+  "cart/delete",
+  async ({ itemId, uid }) => {
+    try {
+      const cartItemRef = doc(db, "carts", uid, "products", itemId);
+      await deleteDoc(cartItemRef);
+      return itemId;
+    } catch (e) {
+      console.log(e);
+    }
+  }
+);
+
+export const getDeleteAllCartItem = createAsyncThunk(
+  "cart/deleteAll",
+  async ({ uid },fetchCartProducts) => {
+    console.log(uid)
+    try {
+      const productsCollectionRef = collection(db, "carts", uid, "products");
+      const querySnapshot = await getDocs(productsCollectionRef);
+      querySnapshot.forEach(async (doc) => {
+        await deleteDoc(doc.ref);
+      });
+    } catch (error) {
+      console.error("Error deleting cart items:", error);
+    }
+  }
+);
+
+export const cartSlice = createSlice({
+  name: "cart",
+  initialState,
+  reducers: {
+    addToCart: (state, action) => {
+      state.items.push(action.payload.item);
+      state.total += action.payload.price;
+    },
+    removeFromCart: (state, action) => {
+      state.items = state.items.filter((item) => item.id != action.payload.id);
+      console.log(state.items);
+    },
+    clearCart: (state) => {
+      state.items = [];
+      state.total = 0;
+    },
+  },
+  extraReducers: (builder) => {
+    builder
+      .addCase(getAddToCart.fulfilled, (state, action) => {
+        state.items.push(action.payload);
+        state.isAdding = false;
+      })
+      .addCase(getAddToCart.pending, (state, action) => {
+        state.isAdding = true;
+      })
+      .addCase(getAddToCart.rejected, (state, action) => {
+        console.log("rejected");
+      })
+      .addCase(getDeleteCartItem.fulfilled, (state, action) => {
+        state.items = state.items.filter((item) => item.id != action.payload);
+        console.log(state.items);
+        state.isRemoving = false;
+      })
+      .addCase(getDeleteCartItem.pending, (state) => {
+        state.isRemoving = true;
+      })
+      .addCase(getDeleteCartItem.rejected, (state, action) => {
+        console.log("rejected", action.payload);
+        state.isRemoving = false;
+      })
+
+      .addCase(getDeleteAllCartItem.fulfilled, (state, action) => {
+        state.items = []
+        state.isRemoving = false;
+      })
+      .addCase(getDeleteAllCartItem.pending, (state) => {
+        state.isRemoving = true;
+      })
+      .addCase(getDeleteAllCartItem.rejected, (state, action) => {
+        console.log("rejected", action.payload);
+        state.isRemoving = false;
+      });
+  },
+});
+
+export const { addToCart, clearCart, removeFromCart } = cartSlice.actions;
+export default cartSlice.reducer;
diff --git a/src/Redux/filter-slice.js b/src/Redux/filter-slice.js
new file mode 100644
index 0000000..7d0acbd
--- /dev/null
+++ b/src/Redux/filter-slice.js
@@ -0,0 +1,23 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const initialState = {
+  windowWidth:window.innerWidth,
+  openFilters:false,
+  openNavigation:false
+};
+
+export const filter = createSlice({
+  name: "filter",
+  initialState,
+  reducers: {
+    setOpenFilters: (state,action) => {
+        state.openFilters = (!state.openFilters);
+    },
+    setOpenNavigation: (state,action) => {
+        state.openNavigation = action.payload;
+    }
+  },
+});
+
+export const {setOpenFilters,setOpenNavigation} = filter.actions;
+export default filter.reducer;
\ No newline at end of file
diff --git a/src/Redux/store.js b/src/Redux/store.js
index 92a67e4..db4b533 100644
--- a/src/Redux/store.js
+++ b/src/Redux/store.js
@@ -1,9 +1,25 @@
-import { configureStore } from '@reduxjs/toolkit';
-import authReducer from './auth-slice';
+import { configureStore } from "@reduxjs/toolkit";
+import authReducer from "./auth-slice"
+import storage from 'redux-persist/lib/storage';
+import {persistReducer} from "redux-persist"
+import { combineReducers } from "@reduxjs/toolkit";
+import cartReducer from "./cart-slice";
+import filterReduer from "./filter-slice";
+
+const persistConfig = {
+    key: 'root',
+    storage
+}
+
+const reducer = combineReducers({
+    authReducer,
+    cart:cartReducer,
+    filter:filterReduer
+})
+
+const persistedReducer = persistReducer(persistConfig,reducer)
 
 export const store = configureStore({
-  //Reducer is a function that takes an action and updates the previous state
-  reducer: {
-    authReducer
-  }
-});
+    //Reducer is a function that takes an action and updates the previous state 
+    reducer: persistedReducer
+})
\ No newline at end of file
diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js
index 25c8e0a..a6d0c1e 100644
--- a/src/components/Sidebar/index.js
+++ b/src/components/Sidebar/index.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from 'react';
+import React, { useEffect, useState } from 'react';
 import Slider from '@mui/material/Slider';
 import Checkbox from '@mui/material/Checkbox';
 import Radio from '@mui/material/Radio';
@@ -13,8 +13,8 @@ import FormLabel from '@mui/material/FormLabel';
 
 import RangeSlider from 'react-range-slider-input';
 import 'react-range-slider-input/dist/style.css';
-
-import { MyContext } from '../../App';
+import { useDispatch, useSelector } from 'react-redux';
+import { setOpenFilters } from '../../Redux/filter-slice';
 
 function valuetext(value) {
   return `${value}°C`;
@@ -22,209 +22,198 @@ function valuetext(value) {
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 const Sidebar = (props) => {
-  const [value, setValue] = useState([100, 60000]);
-  const [value2, setValue2] = useState(0);
-  const [brandFilters, setBrandFilters] = React.useState([]);
-  const [ratingsArr, setRatings] = React.useState([]);
-  const [totalLength, setTotalLength] = useState([]);
-
-  const context = useContext(MyContext);
-
-  let { id } = useParams();
-
-  var brands = [];
-  var ratings = [];
-
-  var catLength = 0;
-  var lengthArr = [];
-  useEffect(() => {
-    props.data.length !== 0 &&
-      props.data.map((item, index) => {
-        item.items.length !== 0 &&
-          item.items.map((item_) => {
-            catLength += item_.products.length;
-          });
-        lengthArr.push(catLength);
-        catLength = 0;
-      });
-
-    const list = lengthArr.filter(
-      (item, index) => lengthArr.indexOf(item) === index
-    );
-    setTotalLength(list);
-  }, []);
-
-  useEffect(() => {
-    brands = [];
-    ratings = [];
-    props.currentCatData.length !== 0 &&
-      props.currentCatData.map((item) => {
-        brands.push(item.brand);
-        ratings.push(parseFloat(item.rating));
-      });
-
-    const brandList = brands.filter(
-      (item, index) => brands.indexOf(item) === index
-    );
-    setBrandFilters(brandList);
-
-    const ratings_ = ratings.filter(
-      (item, index) => ratings.indexOf(item) === index
-    );
-    setRatings(ratings_);
-  }, [id]);
-
-  useEffect(() => {
-    var price = 0;
-    props.currentCatData.length !== 0 &&
-      props.currentCatData.map((item, index) => {
-        let prodPrice = parseInt(item.price.toString().replace(/,/g, ''));
-        if (prodPrice > price) {
-          price = prodPrice;
-        }
-      });
-
-    setValue2(price);
-
-    //setValue(price);
-    //filterByPrice(price[0], price[1]);
-  }, [props.currentCatData]);
-
-  const filterByBrand = (keyword) => {
-    props.filterByBrand(keyword);
-  };
-
-  const filterByRating = (keyword) => {
-    props.filterByRating(parseFloat(keyword));
-  };
-
-  useEffect(() => {
-    filterByPrice(value[0], value[1]);
-  }, [value]);
-
-  const filterByPrice = (minValue, maxValue) => {
-    props.filterByPrice(minValue, maxValue);
-  };
-
-  return (
-    <>
-      <div className={`sidebar ${context.isOpenFilters === true && 'open'}`}>
-        <div className="card border-0 shadow res-hide">
-          <h3>Category</h3>
-          <div className="catList">
-            {props.data.length !== 0 &&
-              props.data.map((item, index) => {
-                return (
-                  <Link to={`/cat/${item.cat_name.toLowerCase()}`}>
-                    <div className="catItem d-flex align-items-center">
-                      <span className="img">
-                        <img
-                          src="https://wp.alithemes.com/html/nest/demo/assets/imgs/theme/icons/category-1.svg"
-                          width={30}
-                        />
-                      </span>
-                      <h4 className="mb-0 ml-3 mr-3 text-capitalize">
-                        {item.cat_name}
-                      </h4>
-                      <span className="d-flex align-items-center justify-content-center rounded-circle ml-auto">
-                        {totalLength[index]}
-                      </span>
+    const [value, setValue] = useState([100, 60000]);
+    const [value2, setValue2] = useState(0);
+    const [brandFilters, setBrandFilters] = React.useState([]);
+    const [ratingsArr, setRatings] = React.useState([]);
+    const [totalLength, setTotalLength] = useState([]);
+
+    const isOpenFilters = useSelector((state)=>state.filter.openFilters);
+    const dispatch = useDispatch();
+
+    let { id } = useParams();
+
+
+    var brands = [];
+    var ratings = [];
+
+
+    var catLength = 0;
+    var lengthArr = [];
+    useEffect(() => {
+        props.data.length !== 0 &&
+        props.data.map((item, index) => {
+                item.items.length !== 0 &&
+                    item.items.map((item_) => {
+                        catLength += item_.products.length
+                    })
+                lengthArr.push(catLength)
+                catLength = 0;
+            })
+
+        const list = lengthArr.filter((item, index) => lengthArr.indexOf(item) === index);
+        setTotalLength(list)
+
+
+    }, []);
+
+
+
+    useEffect(() => {
+        brands = [];
+        ratings=[];
+        props.currentCatData.length !== 0 &&
+            props.currentCatData.map((item) => {
+                brands.push(item.brand);
+                ratings.push(parseFloat(item.rating))
+            })
+
+        const brandList = brands.filter((item, index) => brands.indexOf(item) === index);
+        setBrandFilters(brandList);
+
+        const ratings_ = ratings.filter((item, index) => ratings.indexOf(item) === index);
+        setRatings(ratings_)
+
+    }, [id])
+
+
+
+
+    useEffect(() => {
+        var price = 0;
+        props.currentCatData.length !== 0 &&
+            props.currentCatData.map((item, index) => {
+                let prodPrice = parseInt(item.price.toString().replace(/,/g, ""));
+                if (prodPrice > price) {
+                    price = prodPrice
+                }
+            })
+
+
+        setValue2(price)
+
+        //setValue(price);
+        //filterByPrice(price[0], price[1]);
+
+
+
+    }, [props.currentCatData]);
+
+
+    const filterByBrand = (keyword) => {
+        props.filterByBrand(keyword)
+    }
+
+    const filterByRating = (keyword) => {
+        props.filterByRating(parseFloat(keyword))
+    }
+
+    useEffect(() => {
+        filterByPrice(value[0], value[1]);
+    }, [value]);
+
+    const filterByPrice = (minValue, maxValue) => {
+        props.filterByPrice(minValue, maxValue)
+    }
+
+
+    return (
+        <>
+            <div className={`sidebar ${isOpenFilters===true && 'open'}`}>
+                <div className='card border-0 shadow res-hide'>
+                    <h3>Category</h3>
+                    <div className='catList'>
+                        {
+                            props.data.length !== 0 && props.data.map((item, index) => {
+                                return (
+                                    <Link to={`/cat/${item.cat_name.toLowerCase()}`}>
+                                        <div className='catItem d-flex align-items-center'>
+                                            <span className='img'><img src='https://wp.alithemes.com/html/nest/demo/assets/imgs/theme/icons/category-1.svg' width={30} /></span>
+                                            <h4 className='mb-0 ml-3 mr-3 text-capitalize'>{item.cat_name}</h4>
+                                            <span className='d-flex align-items-center justify-content-center rounded-circle ml-auto'>
+                                            {totalLength[index]}</span>
+                                        </div>
+                                    </Link>
+                                )
+                            })
+
+                        }
+
                     </div>
-                  </Link>
-                );
-              })}
-          </div>
-        </div>
-
-        <div className="card border-0 shadow">
-          <h3>Fill by price</h3>
-
-          <RangeSlider
-            value={value}
-            onInput={setValue}
-            min={100}
-            max={60000}
-            step={5}
-          />
-
-          <div className="d-flex pt-2 pb-2 priceRange">
-            <span>
-              From: <strong className="text-success">Rs: {value[0]}</strong>
-            </span>
-            <span className="ml-auto">
-              From: <strong className="text-success">Rs: {value[1]}</strong>
-            </span>
-          </div>
-
-          <div className="filters pt-5">
-            <h5>Filter By Brand</h5>
-
-            <ul className="mb-0">
-              <RadioGroup
-                aria-labelledby="demo-radio-buttons-group-label"
-                defaultValue="female"
-                name="radio-buttons-group"
-              >
-                {brandFilters.length !== 0 &&
-                  brandFilters.map((item, index) => {
-                    return (
-                      <li key={index}>
-                        {' '}
-                        <FormControlLabel
-                          value={item}
-                          control={
-                            <Radio onChange={() => filterByBrand(item)} />
-                          }
-                          label={item}
-                        />
-                      </li>
-                    );
-                  })}
-              </RadioGroup>
-            </ul>
-          </div>
-
-          <div className="filters pt-0">
-            <h5>Filter By Ratings</h5>
-            <ul>
-              <RadioGroup
-                aria-labelledby="demo-radio-buttons-group-label"
-                defaultValue="female"
-                name="radio-buttons-group"
-              >
-                {ratingsArr.length !== 0 &&
-                  ratingsArr.map((item, index) => {
-                    return (
-                      <li key={index}>
-                        {' '}
-                        <FormControlLabel
-                          value={item}
-                          control={
-                            <Radio onChange={() => filterByRating(item)} />
-                          }
-                          label={item}
-                        />
-                      </li>
-                    );
-                  })}
-              </RadioGroup>
-            </ul>
-          </div>
-
-          <div className="d-flex filterWrapper">
-            <Button
-              className="btn btn-g w-100"
-              onClick={() => context.openFilters()}
-            >
-              <FilterAltOutlinedIcon /> Filter
-            </Button>
-          </div>
-        </div>
-
-        <img src={bannerImg} className="w-100" />
-      </div>
-    </>
-  );
-};
+                </div>
+
+
+                <div className='card border-0 shadow'>
+                    <h3>Fill by price</h3>
+
+                    <RangeSlider value={value} onInput={setValue} min={100} max={60000} step={5} />
+
+
+                    <div className='d-flex pt-2 pb-2 priceRange'>
+                        <span>From: <strong className='text-success'>Rs: {value[0]}</strong></span>
+                        <span className='ml-auto'>From: <strong className='text-success'>Rs: {value[1]}</strong></span>
+                    </div>
+
+                 
+                    <div className='filters pt-5'>
+                        <h5>Filter By Brand</h5>
+
+                        <ul className='mb-0'>
+                            <RadioGroup
+                                aria-labelledby="demo-radio-buttons-group-label"
+                                defaultValue="female"
+                                name="radio-buttons-group"
+                            >
+                                {
+                                    brandFilters.length !== 0 &&
+                                    brandFilters.map((item, index) => {
+                                        return (
+                                            <li key={index}> <FormControlLabel value={item} control={<Radio onChange={() => filterByBrand(item)} />} label={item} /></li>
+                                        )
+                                    })
+
+                                }
+                            </RadioGroup>
+
+                        </ul>
+                    </div>
+
+
+                    <div className='filters pt-0'>
+                        <h5>Filter By Ratings</h5>
+                        <ul>
+                            <RadioGroup
+                                aria-labelledby="demo-radio-buttons-group-label"
+                                defaultValue="female"
+                                name="radio-buttons-group"
+                            >
+                                {
+                                    ratingsArr.length !== 0 &&
+                                    ratingsArr.map((item, index) => {
+                                        return (
+                                            <li key={index}> <FormControlLabel value={item} control={<Radio onChange={() => filterByRating(item)} />} label={item} /></li>
+                                        )
+                                    })
+
+                                }
+                            </RadioGroup>
+                        </ul>
+                    </div>
+
+
+                    <div className='d-flex filterWrapper'>
+                        <Button className='btn btn-g w-100'  onClick={() => dispatch(setOpenFilters())}><FilterAltOutlinedIcon /> Filter</Button>
+                    </div>
+
+                </div>
+
+
+
+                <img src={bannerImg} className='w-100' />
+
+            </div>
+        </>
+    )
+}
 
 export default Sidebar;
diff --git a/src/components/catSlider/index.js b/src/components/catSlider/index.js
index e6088a0..cda5f19 100644
--- a/src/components/catSlider/index.js
+++ b/src/components/catSlider/index.js
@@ -1,113 +1,119 @@
-import React, { useEffect, useRef, useState, useContext } from 'react';
-import Slider from 'react-slick';
+import React, { useEffect, useRef, useState } from 'react';
+import Slider from "react-slick";
 import './style.css';
 import { Link } from 'react-router-dom';
+import { useSelector } from 'react-redux';
 
-import { MyContext } from '../../App';
 const CatSlider = (props) => {
-  const [allData, setAllData] = useState(props.data);
-  const [totalLength, setTotalLength] = useState([]);
-  const context = useContext(MyContext);
-
-  const [itemBg, setItemBg] = useState([
-    '#fffceb',
-    '#ecffec',
-    '#feefea',
-    '#fff3eb',
-    '#fff3ff',
-    '#f2fce4',
-    '#feefea',
-    '#fffceb',
-    '#feefea',
-    '#ecffec',
-    '#feefea',
-    '#fff3eb',
-    '#fff3ff',
-    '#f2fce4',
-    '#feefea',
-    '#fffceb',
-    '#feefea',
-    '#ecffec'
-  ]);
-
-  const slider = useRef();
-
-  var settings = {
-    dots: false,
-    infinite: false,
-    speed: 500,
-    slidesToShow: 10,
-    slidesToScroll: 1,
-    fade: false,
-    arrows: context.windowWidth > 992 ? true : false,
-    autoplay: context.windowWidth > 992 ? 2000 : false,
-    centerMode: context.windowWidth > 992 ? true : false
-  };
-
-  var catLength = 0;
-  var lengthArr = [];
-  useEffect(() => {
-    allData.length !== 0 &&
-      allData.map((item, index) => {
-        item.items.length !== 0 &&
-          item.items.map((item_) => {
-            catLength += item_.products.length;
-          });
-        lengthArr.push(catLength);
-        catLength = 0;
-      });
-
-    const list = lengthArr.filter(
-      (item, index) => lengthArr.indexOf(item) === index
-    );
-    setTotalLength(list);
-  }, []);
-
-  return (
-    <>
-      <div className="catSliderSection">
-        <div className="container-fluid" ref={slider}>
-          <h2 className="hd">Featured Categories</h2>
-          <Slider
-            {...settings}
-            className="cat_slider_Main"
-            id="cat_slider_Main"
-          >
-            {allData.length !== 0 &&
-              allData.map((item, index) => {
-                return (
-                  <div className="item" key={index}>
-                    <Link to={`/cat/${item.cat_name.toLowerCase()}`}>
-                      <div
-                        className="info"
-                        style={{ background: itemBg[index] }}
-                      >
-                        <img src={item.image} width="80" />
-                        <h5 className="text-capitalize mt-3">
-                          {item.cat_name}
-                        </h5>
-                        <p>{totalLength[index]} items</p>
-                      </div>
-                    </Link>
-                  </div>
-                );
-              })}
-
-            {
-              //    itemBg.length!==0 && itemBg.map((item,index)=>{
-              //     return(
-              //         <div className='item'>
-              //         <div className='info'  style={{background:item}}>
-              //             <img src='https://wp.alithemes.com/html/nest/demo/assets/imgs/shop/cat-13.png'/>
-              //             <h5>Cake & Milk</h5>
-              //             <p>26 items</p>
-              //         </div>
-              //     </div>
-              //     )
-              //    })
-            }
-
-            {/* <div className='item'>
+    const [allData, setAllData] = useState(props.data);
+    const [totalLength, setTotalLength] = useState([]);
+    const windowWidth = useSelector((state)=>state.filter.windowWidth);
+
+    const [itemBg, setItemBg] = useState([
+        '#fffceb',
+        '#ecffec',
+        '#feefea',
+        '#fff3eb',
+        '#fff3ff',
+        '#f2fce4',
+        '#feefea',
+        '#fffceb',
+        '#feefea',
+        '#ecffec',
+        '#feefea',
+        '#fff3eb',
+        '#fff3ff',
+        '#f2fce4',
+        '#feefea',
+        '#fffceb',
+        '#feefea',
+        '#ecffec'
+    ]);
+
+    const slider = useRef();
+
+
+    var settings = {
+        dots: false,
+        infinite: false,
+        speed: 500,
+        slidesToShow: 10,
+        slidesToScroll: 1,
+        fade: false,
+        arrows: windowWidth>992 ? true : false,
+        autoplay: windowWidth>992 ? 2000 : false,
+        centerMode: windowWidth>992 ? true : false
+    };
+
+
+    var catLength = 0;
+    var lengthArr = [];
+    useEffect(() => {
+        allData.length !== 0 &&
+            allData.map((item, index) => {
+                item.items.length !== 0 &&
+                    item.items.map((item_) => {
+                        catLength += item_.products.length
+                    })
+                lengthArr.push(catLength)
+                catLength = 0;
+            })
+
+        const list = lengthArr.filter((item, index) => lengthArr.indexOf(item) === index);
+        setTotalLength(list)
+
+
+    }, []);
+
+
+    return (
+        <>
+            <div className='catSliderSection'>
+                <div className='container-fluid' ref={slider}>
+                    <h2 className='hd'>Featured Categories</h2>
+                    <Slider {...settings} className='cat_slider_Main' id="cat_slider_Main" >
+
+
+                        {
+                            allData.length !== 0 &&
+                            allData.map((item, index) => {
+                                return (
+                                    <div className='item' key={index} >
+                                        <Link to={`/cat/${item.cat_name.toLowerCase()}`}>
+                                            <div className='info' style={{ background: itemBg[index] }}>
+                                                <img src={item.image} width="80" />
+                                                <h5 className='text-capitalize mt-3'>{item.cat_name}</h5>
+                                                <p>{totalLength[index]} items</p>
+                                            </div>
+                                        </Link>
+
+                                    </div>
+                                )
+                            })
+                        }
+
+
+
+
+
+
+
+                        {
+                            //    itemBg.length!==0 && itemBg.map((item,index)=>{
+                            //     return(
+                            //         <div className='item'>
+                            //         <div className='info'  style={{background:item}}>
+                            //             <img src='https://wp.alithemes.com/html/nest/demo/assets/imgs/shop/cat-13.png'/>
+                            //             <h5>Cake & Milk</h5>
+                            //             <p>26 items</p>
+                            //         </div>
+                            //     </div>
+                            //     )
+                            //    }) 
+                        }
+
+
+                        {/* <div className='item'>
                             <div className='info'>
                                 <img src='https://wp.alithemes.com/html/nest/demo/assets/imgs/shop/cat-12.png'/>
                                 <h5>Cake & Milk</h5>
diff --git a/src/components/header/header.js b/src/components/header/header.js
index cf05d83..59a518a 100644
--- a/src/components/header/header.js
+++ b/src/components/header/header.js
@@ -18,34 +18,38 @@ import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
 
 import { ClickAwayListener } from '@mui/base/ClickAwayListener';
 
-import Nav from './nav/nav';
-import { Link } from 'react-router-dom';
-import { useContext } from 'react';
-
-import { MyContext } from '../../App';
-import { useNavigate } from 'react-router-dom';
-import MenuIcon from '@mui/icons-material/Menu';
-import FmdGoodOutlinedIcon from '@mui/icons-material/FmdGoodOutlined';
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
-import { Satellite } from '@mui/icons-material';
-import { getDatabase, ref, onValue } from 'firebase/database';
+import Nav from "./nav/nav";
+import { Link } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
+import MenuIcon from "@mui/icons-material/Menu";
+import FmdGoodOutlinedIcon from "@mui/icons-material/FmdGoodOutlined";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
+import { Satellite } from "@mui/icons-material";
+import { getDatabase, ref, onValue } from "firebase/database";
+import { useDispatch, useSelector } from "react-redux";
+import { logOut } from "../../Redux/auth-slice";
+import { setOpenNavigation } from "../../Redux/filter-slice";
 import { cities } from './cities';
 
+
 const Header = (props) => {
   const [isOpenDropDown, setisOpenDropDown] = useState(false);
   const [isOpenAccDropDown, setisOpenAccDropDown] = useState(false);
-
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const logged = useSelector((state)=>state.authReducer.isAuth)
   const [isopenSearch, setOpenSearch] = useState(false);
   const [isOpenNav, setIsOpenNav] = useState(false);
-  const { cartCount, setCartCount } = useContext(MyContext);
-  const { wishlistCount, setWishlistCount } = useContext(MyContext);
+  // const { cartCount, setCartCount } = useContext(MyContext);
+  let wishlistCount = 0;
 
   const headerRef = useRef();
-  const [profile, setProfile] = useState('');
+  const searchInput = useRef();
+  const windowWidth = useSelector((state)=>state.filter.windowWidth);
+  const profile = useSelector((state)=>state.authReducer.photoURL)
+  const cartCount = useSelector((state)=>state.cart.items.length);
+  const items = useSelector((state)=>state.cart.items);
+  const dispatch = useDispatch()
 
-  const context = useContext(MyContext);
   const history = useNavigate();
 
   const [categories, setcategories] = useState([
@@ -84,19 +88,15 @@ const Header = (props) => {
   //   getCountry("https://countriesnow.space/api/v0.1/countries/");
   // }, []);
 
-  useEffect(() => {
-    setProfile(localStorage.getItem('userImage'));
-  }, [context.isLogin]);
-  // const getCountry = async (url) => {
-  //   try {
-  //     await axios.get(url).then((res) => {
-  //       if (res !== null) {
-  //         ////console.log(res.data.data);
-  //         res.data.data.map((item, index) => {
-  //           countryList.push(item.country);
-  //           ////console.log(item.country)
-  //         });
-
+ // const getCountry = async (url) => {
+ //   try {
+ //     await axios.get(url).then((res) => {
+ //       if (res !== null) {
+ //         ////console.log(res.data.data);
+ //         res.data.data.map((item, index) => {
+ //           countryList.push(item.country);
+ //           ////console.log(item.country)
+ //        });
   //         ////console.log(res.data.data[0].country)
   //       }
   //     });
@@ -117,9 +117,8 @@ const Header = (props) => {
   // }, [])
 
   const signOut = () => {
-    context.signOut();
-    localStorage.setItem('userImage', '');
-    history('/');
+    dispatch(logOut());
+    history("/");
   };
 
   const openSearch = () => {
@@ -135,13 +134,13 @@ const Header = (props) => {
 
   const openNav = () => {
     setIsOpenNav(true);
-    context.setIsopenNavigation(true);
+    dispatch(setOpenNavigation(true));
   };
 
   const closeNav = () => {
     setIsOpenNav(false);
     setisOpenAccDropDown(false);
-    context.setIsopenNavigation(false);
+    dispatch(setOpenNavigation(false));
   };
 
   return (
@@ -175,7 +174,7 @@ const Header = (props) => {
                     <div className="navbarToggle mr-2" onClick={openNav}>
                       <MenuIcon />
                     </div>
-                    {context.isLogin === 'true' && (
+                    {logged === true && (
                       <div
                         onClick={() => setisOpenAccDropDown(!isOpenAccDropDown)}
                       >
@@ -308,8 +307,7 @@ const Header = (props) => {
                           </Link>
                         </span>
                       </li>
-
-                      {context.isLogin === 'true' ? (
+                      {logged ? (
                         <li className="list-inline-item">
                           <span
                             onClick={() => setisOpenDropDown(!isOpenDropDown)}
diff --git a/src/components/header/nav/nav.js b/src/components/header/nav/nav.js
index fa03986..9afbf30 100644
--- a/src/components/header/nav/nav.js
+++ b/src/components/header/nav/nav.js
@@ -1,11 +1,11 @@
-import React, { useEffect, useContext, useState } from 'react';
+import React, { useEffect } from 'react';
 import './nav.css';
 import { Link } from 'react-router-dom';
 import Button from '@mui/material/Button';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import GridViewIcon from '@mui/icons-material/GridView';
 import HeadphonesOutlinedIcon from '@mui/icons-material/HeadphonesOutlined';
-import { MyContext } from '../../../App';
+import { useState } from 'react';
 import { useSelector } from 'react-redux';
 
 //BROWSE ALL CATEGORY ICONS
@@ -32,15 +32,15 @@ import rice from '../../../assets/images/rice.svg';
 //END OF BROWSE ALL CATEGORY ICONS
 
 const Nav = (props) => {
-  const logged = useSelector((state) => state.authReducer.value.isAuth);
-
-  const [navData, setNavData] = useState([]);
-  const [isOpenNav, setIsOpenNav] = useState(false);
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
-  const [openDropdownMenu, setDropdownMenu] = useState(false);
-  const [openDropdownMenuIndex, setDropdownMenuIndex] = useState(null);
-  const [openMegaMenu, setOpenMegaMenu] = useState(false);
-  const context = useContext(MyContext);
+    const [navData, setNavData] = useState([]);
+    const [isOpenNav, setIsOpenNav] = useState(false);
+    const [openDropdownMenu, setDropdownMenu] = useState(false);
+    const [openDropdownMenuIndex, setDropdownMenuIndex] = useState(null);
+    
+    const [openMegaMenu, setOpenMegaMenu] = useState(false);
+    
+    const windowWidth = useSelector((state)=>state.filter.windowWidth);
+    const logged = useSelector((state)=>state.authReducer.isAuth)
 
   //BROWSE ALL CATEGORY CONTENT
   const initialItems = [
@@ -78,6 +78,7 @@ const Nav = (props) => {
   const [items, setItems] = useState(initialItems);
   const [expanded, setExpanded] = useState(false);
 
+
   const handleShowMore = () => {
     setItems([...initialItems, ...moreItems]);
     setExpanded(true);
@@ -323,10 +324,27 @@ const Nav = (props) => {
                                         </div>
 
                                     </li> */}
-                    <Button>
-                      <Link>Blog</Link>
-                    </Button>
-                  </li>
+                                    <li className='list-inline-item'>
+                                        <Button><Link>Contact</Link></Button>
+                                    </li>
+                                </ul>
+
+                                {
+                                    windowWidth < 992 &&
+                                    <>
+                                    {
+                                        logged!==true &&
+                                         <div className='pl-3 pr-3'>
+                                            <br />
+                                            <Link to={'/signIn'}>
+                                                <Button className="btn btn-g btn-lg w-100" onClick={closeNav}>Sign In</Button>
+                                            </Link>
+                                        </div>
+                                    }
+                                       
+                                    </>
+                                }
+
 
                   <li className="list-inline-item">
                     <Button>
diff --git a/src/components/product/index.js b/src/components/product/index.js
index f211884..4702d24 100644
--- a/src/components/product/index.js
+++ b/src/components/product/index.js
@@ -1,12 +1,13 @@
-import React, { useEffect, useState, useContext } from 'react';
-import './style.css';
-import Rating from '@mui/material/Rating';
-import { Button } from '@mui/material';
-import { Link } from 'react-router-dom';
-import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
-import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined';
-import CompareArrowsOutlinedIcon from '@mui/icons-material/CompareArrowsOutlined';
-import RemoveRedEyeOutlinedIcon from '@mui/icons-material/RemoveRedEyeOutlined';
+import React, { useEffect, useState } from "react";
+import "./style.css";
+import Rating from "@mui/material/Rating";
+import { Button } from "@mui/material";
+import { Link } from "react-router-dom";
+import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
+import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
+import CompareArrowsOutlinedIcon from "@mui/icons-material/CompareArrowsOutlined";
+import RemoveRedEyeOutlinedIcon from "@mui/icons-material/RemoveRedEyeOutlined";
+
 import {
   getDatabase,
   ref,
@@ -17,9 +18,10 @@ import {
   remove
 } from 'firebase/database';
 
-import { MyContext } from '../../App';
-import { db } from '../../firebase';
-import { doc, setDoc } from 'firebase/firestore';
+import { db } from "../../firebase";
+import { doc, setDoc } from "firebase/firestore";
+import {useDispatch, useSelector} from "react-redux"
+import { checkIsItemInCart, getAddToCart } from "../../Redux/cart-slice";
 
 const Product = (props) => {
   const [productData, setProductData] = useState();
@@ -27,7 +29,11 @@ const Product = (props) => {
   const [userLocation, setUserLocation] = useState(null);
   const [loading, setLoading] = useState(true);
   const [drivingDistance, setDrivingDistance] = useState(null);
-  const context = useContext(MyContext);
+  const logged = useSelector((state)=>state.authReducer.isAuth);
+  const dispatch = useDispatch()
+  const uid = useSelector((state)=>state.authReducer.uid);
+  const {item} = props;
+  const isItemInCart = useSelector((state)=> checkIsItemInCart(state,item.id))
 
   useEffect(() => {
     setProductData(props.item);
@@ -49,7 +55,7 @@ const Product = (props) => {
         console.error('Error getting user location:', error);
       }
     );
-  }, [context.isLogin]);
+  }, [logged]);
 
   // const getDrivingDistance = async (start, end) => {
   //     const response = await fetch(`https://router.project-osrm.org/route/v1/driving/${start.longitude},${start.latitude};${end.longitude},${end.latitude}`);
@@ -98,28 +104,15 @@ const Product = (props) => {
     }
   }, [userLocation, productData]);
 
-  const addToCart = async (item) => {
-    try {
-      const user = localStorage.getItem('uid');
-      const cartRef = doc(db, 'carts', user);
-      const productRef = doc(cartRef, 'products', `${item.id}`);
-      await setDoc(productRef, { ...item, quantity: 1 });
-      setIsadded(true);
-      context.fetchCartProducts();
-    } catch (error) {
-      console.error('Error adding item to cart:', error);
-    }
-  };
 
   const addToWishlist = async (item) => {
     console.log('addToWishlist');
     try {
-      const user = localStorage.getItem('uid');
-      const wishlistRef = doc(db, 'wishlists', user);
-      const productRef = doc(wishlistRef, 'products', `${item.id}`);
+      const user = uid;
+      const wishlistRef = doc(db, "wishlists", user);
+      const productRef = doc(wishlistRef, "products", `${item.id}`);
       await setDoc(productRef, { ...item, quantity: 1 });
       setIsadded(true);
-      context.fetchWishlistProducts();
     } catch (error) {
       console.error('Error adding item to wishlist:', error);
     }
@@ -200,11 +193,12 @@ const Product = (props) => {
             </div>
 
             <Button
+              disabled={isItemInCart}
               className="w-100 transition mt-3"
-              onClick={() => addToCart(productData)}
+              onClick={() => dispatch(getAddToCart({item:productData,uid}))}
             >
               <ShoppingCartOutlinedIcon />
-              {isAdded === true ? 'Added' : 'Add'}
+              {isItemInCart === true ? "Added" : "Add"}
             </Button>
           </div>
         </>
diff --git a/src/components/product/style.css b/src/components/product/style.css
index 52cfa9e..2c77ea7 100644
--- a/src/components/product/style.css
+++ b/src/components/product/style.css
@@ -102,6 +102,7 @@
   transform: scale(1.1);
 }
 
+
 .productThumb .catName {
   color: #000;
   opacity: 0.8;
diff --git a/src/components/quantityBox/index.js b/src/components/quantityBox/index.js
index bbc1901..97fc3f7 100644
--- a/src/components/quantityBox/index.js
+++ b/src/components/quantityBox/index.js
@@ -1,14 +1,14 @@
 import React, { useState, useEffect } from 'react';
-
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import { db } from '../../firebase';
-import { doc, updateDoc } from 'firebase/firestore';
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { db } from "../../firebase";
+import { doc, updateDoc } from "firebase/firestore";
+import {useSelector} from "react-redux"
 
 const QuantityBox = (props) => {
   const [inputValue, setinputValue] = useState(props.quantity);
   const [inputItems, setInputItems] = useState([]);
-  const uid = localStorage.getItem('uid');
+  const uid = useSelector((state)=>state.authReducer.uid);
   useEffect(() => {
     setInputItems(props.inputItems);
     //setinputValue(props.item.quantity)
diff --git a/src/index.js b/src/index.js
index a69b5f2..64ea30f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,12 +4,18 @@ import './index.css';
 import App from './App';
 import { Provider } from 'react-redux';
 import { store } from './Redux/store';
+import {PersistGate} from 'redux-persist/integration/react'
+import {persistStore} from 'redux-persist';
+
+const persistor = persistStore(store)
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <Provider store={store}>
-      <App />
+      <PersistGate persistor={persistor}>
+        <App />
+      </PersistGate>
     </Provider>
   </React.StrictMode>
 );
diff --git a/src/pages/AddProd/index.js b/src/pages/AddProd/index.js
index 12ba11d..05514d9 100644
--- a/src/pages/AddProd/index.js
+++ b/src/pages/AddProd/index.js
@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
-import { Typography, Container, Grid, TextField, Button } from '@mui/material';
-import { addDoc, collection } from 'firebase/firestore';
-import { db, storage } from '../../firebase';
-import { uploadBytes, getDownloadURL, ref } from 'firebase/storage';
+import React, { useState } from "react";
+import { Typography, Container, Grid, TextField, Button } from "@mui/material";
+import { addDoc, collection } from "firebase/firestore";
+import { db, storage } from "../../firebase";
+import {uploadBytes,getDownloadURL,ref} from "firebase/storage"
+import { useSelector } from "react-redux";
 
 export default function AddProductForm() {
   const [formData, setFormData] = useState({
@@ -19,6 +20,7 @@ export default function AddProductForm() {
   const handleChange = (e) => {
     setFormData({ ...formData, [e.target.id]: e.target.value });
   };
+  const uid = useSelector((state)=>state.authReducer.uid)
 
   const handleMainImageChange = (e) => {
     const file = e.target.files[0];
@@ -73,22 +75,13 @@ export default function AddProductForm() {
   const handleSubmit = async () => {
     setIsSubmit(true);
     //Upload the main image to firebase storage and get url
-    const imageRef = ref(
-      storage,
-      `productImages/${localStorage.getItem('uid')}/${
-        formData.productName
-      }/mainImage`
-    );
+
+    const imageRef = ref(storage, `productImages/${uid}/${formData.productName}/mainImage`);
     await uploadBytes(imageRef, formData.mainImage);
     const imageUrl = await getDownloadURL(imageRef);
 
     //Upload the subsidiary image to firebase storage and get url
-    const imageRef1 = ref(
-      storage,
-      `productImages/${localStorage.getItem('uid')}/${
-        formData.productName
-      }/subsidiaryImages`
-    );
+    const imageRef1 = ref(storage, `productImages/${uid}/${formData.productName}/subsidiaryImages`);
     await uploadBytes(imageRef1, formData.subsidiaryImages);
     const imageUrl1 = await getDownloadURL(imageRef1);
 
diff --git a/src/pages/Details/index.js b/src/pages/Details/index.js
index f274b2b..b675c10 100644
--- a/src/pages/Details/index.js
+++ b/src/pages/Details/index.js
@@ -1,18 +1,20 @@
-import React, { useContext } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import Rating from '@mui/material/Rating';
-import InnerImageZoom from 'react-inner-image-zoom';
-import 'react-inner-image-zoom/lib/InnerImageZoom/styles.css';
-import Slider from 'react-slick';
-import { useRef } from 'react';
-import { useState } from 'react';
-import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import { useEffect } from 'react';
-import { Button } from '@mui/material';
-import ShoppingCartOutlinedIcon from '@mui/icons-material/ShoppingCartOutlined';
-import FavoriteBorderOutlinedIcon from '@mui/icons-material/FavoriteBorderOutlined';
-import CompareArrowsIcon from '@mui/icons-material/CompareArrows';
+
+import React from "react";
+import { Link, useParams } from "react-router-dom";
+import Rating from "@mui/material/Rating";
+import InnerImageZoom from "react-inner-image-zoom";
+import "react-inner-image-zoom/lib/InnerImageZoom/styles.css";
+import Slider from "react-slick";
+import { useRef } from "react";
+import { useState } from "react";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import { useEffect } from "react";
+import { Button } from "@mui/material";
+import ShoppingCartOutlinedIcon from "@mui/icons-material/ShoppingCartOutlined";
+import FavoriteBorderOutlinedIcon from "@mui/icons-material/FavoriteBorderOutlined";
+import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
+
 import {
   getDatabase,
   ref,
@@ -20,22 +22,23 @@ import {
   set,
   push,
   child,
-  remove
-} from 'firebase/database';
-import Product from '../../components/product';
-import axios from 'axios';
-import { MyContext } from '../../App';
-import MapComponent from '../../components/map/ITEMmap';
-import { Email } from '@mui/icons-material';
-import useLoggedInUserEmail from '../../Hooks/useLoggedInUserEmail';
-import { db } from '../../firebase';
+  remove,
+} from "firebase/database";
+import Product from "../../components/product";
+import axios from "axios";
+import MapComponent from "../../components/map/ITEMmap";
+import { Email } from "@mui/icons-material";
+import useLoggedInUserEmail from "../../Hooks/useLoggedInUserEmail";
+import { db } from "../../firebase";
 import {
   collection,
   doc,
   getDocs,
   setDoc,
-  deleteDoc
-} from 'firebase/firestore';
+  deleteDoc,
+} from "firebase/firestore";
+import {useDispatch, useSelector} from "react-redux"
+import { checkIsItemInCart, getAddToCart } from "../../Redux/cart-slice";
 
 const DetailsPage = (props) => {
   const [zoomInage, setZoomImage] = useState(
@@ -57,8 +60,6 @@ const DetailsPage = (props) => {
   const [isWishlistItemAdded, setIsWishlistItemAdded] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
 
-  const context = useContext(MyContext);
-
   const [prodCat, setProdCat] = useState({
     parentCat: sessionStorage.getItem('parentCat'),
     subCatName: sessionStorage.getItem('subCatName')
@@ -86,7 +87,11 @@ const DetailsPage = (props) => {
   const zoomSliderBig = useRef();
   const zoomSlider = useRef();
 
-  let { id } = useParams();
+  let { id} = useParams();
+  const isItemInCart = useSelector((state)=> checkIsItemInCart(state,parseInt(id)))
+  const windowWidth = useSelector((state)=>state.filter.windowWidth);
+  const uid = useSelector((state)=>state.authReducer.uid);
+  const dispatch = useDispatch()
 
   var settings2 = {
     dots: false,
@@ -105,7 +110,7 @@ const DetailsPage = (props) => {
     slidesToShow: 5,
     slidesToScroll: 1,
     fade: false,
-    arrows: context.windowWidth > 992 ? true : false
+    arrows: windowWidth > 992 ? true : false,
   };
 
   var related = {
@@ -115,7 +120,7 @@ const DetailsPage = (props) => {
     slidesToShow: 4,
     slidesToScroll: 1,
     fade: false,
-    arrows: context.windowWidth > 992 ? true : false
+    arrows: windowWidth > 992 ? true : false,
   };
 
   const goto = (index) => {
@@ -256,44 +261,42 @@ const DetailsPage = (props) => {
     }
   };
 
-  const addToCart = async (item) => {
-    try {
-      const user = localStorage.getItem('uid');
-      const cartRef = doc(db, 'carts', user);
-      const productRef = doc(cartRef, 'products', `${item.id}`);
-      await setDoc(productRef, { ...item, quantity: 1 });
-      setIsadded(true);
-      context.setCartCount(context.cartCount + 1);
-    } catch (error) {
-      console.error('Error adding item to cart:', error);
-    }
-  };
+  // const addToCart = async (item) => {
+  //   try {
+  //     const user = uid;
+  //     const cartRef = doc(db, "carts", user);
+  //     const productRef = doc(cartRef, "products", `${item.id}`);
+  //     await setDoc(productRef, { ...item, quantity: 1 });
+  //     setIsadded(true);
+  //     context.setCartCount(context.cartCount + 1);
+  //   } catch (error) {
+  //     console.error("Error adding item to cart:", error);
+  //   }
+  // };
+
 
   const toggleWishlistItem = async (item) => {
     if (!isAlreadyAddedInWishlist) {
       try {
-        const user = localStorage.getItem('uid');
-        const wishlistRef = doc(db, 'wishlists', user);
-        const productRef = doc(wishlistRef, 'products', `${item.id}`);
+        const user = uid;
+        const wishlistRef = doc(db, "wishlists", user);
+        const productRef = doc(wishlistRef, "products", `${item.id}`);
         await setDoc(productRef, { ...item, quantity: 1 });
         setIsWishlistItemAdded(true);
         setisAlreadyAddedInWishlist(true);
-        context.setWishlistCount(context.wishlistCount + 1);
       } catch (error) {
         console.error('Error adding item to wishlist:', error);
       }
     } else {
       console.log('isAlreadyAddedInWishlist');
-
-      const user = localStorage.getItem('uid');
-
+      const user = uid;
       const wishlistItemRef = doc(db, `wishlists/${user}/products/${item.id}`);
 
       try {
         await deleteDoc(wishlistItemRef);
         setisAlreadyAddedInWishlist(false);
-        context.setWishlistCount(context.wishlistCount - 1);
-        console.log('Wishlist item deleted successfully.');
+        console.log("Wishlist item deleted successfully.");
+
       } catch (error) {
         console.error('Error deleting wishlist item:', error);
       }
@@ -330,8 +333,8 @@ const DetailsPage = (props) => {
 
   const fetchCartProducts = async () => {
     try {
-      const cartRef = doc(db, 'carts', localStorage.getItem('uid'));
-      const productsCollectionRef = collection(cartRef, 'products');
+      const cartRef = doc(db, "carts", uid);
+      const productsCollectionRef = collection(cartRef, "products");
       const querySnapshot = await getDocs(productsCollectionRef);
       querySnapshot.forEach((doc) => {
         if (parseInt(doc.data()?.id) === parseInt(id)) {
@@ -345,8 +348,9 @@ const DetailsPage = (props) => {
 
   const fetchWishlistProducts = async () => {
     try {
-      const wishlistRef = doc(db, 'wishlists', localStorage.getItem('uid'));
-      const productsCollectionRef = collection(wishlistRef, 'products');
+      const wishlistRef = doc(db, "wishlists", uid);
+      const productsCollectionRef = collection(wishlistRef, "products");
+
       const querySnapshot = await getDocs(productsCollectionRef);
       querySnapshot.forEach((doc) => {
         if (parseInt(doc.data()?.id) === parseInt(id)) {
@@ -375,15 +379,16 @@ const DetailsPage = (props) => {
 
   return (
     <>
-      {context.windowWidth < 992 && (
+      {windowWidth < 992 && (
         <Button
           className={`btn-g btn-lg w-100 filterBtn {isAlreadyAddedInCart===true && 'no-click'}`}
-          onClick={() => addToCart(currentProduct)}
+          onClick={() => dispatch(getAddToCart({item:currentProduct,uid}))}
         >
           <ShoppingCartOutlinedIcon />
-          {isAdded === true || isAlreadyAddedInCart === true
-            ? 'Added'
-            : 'Add To Cart'}
+          {isItemInCart
+            ? "Added"
+            : "Add To Cart"}
+
         </Button>
       )}
       <div className="p-5">
@@ -391,7 +396,7 @@ const DetailsPage = (props) => {
       </div>
 
       <section className="detailsPage mb-5">
-        {context.windowWidth > 992 && (
+        {windowWidth > 992 && (
           <div className="breadcrumbWrapper mb-4">
             <div className="container-fluid">
               <ul className="breadcrumb breadcrumb2 mb-0">
@@ -580,17 +585,17 @@ const DetailsPage = (props) => {
 
               <div className="d-flex align-items-center">
                 <div className="d-flex align-items-center">
-                  {context.windowWidth > 992 && (
+                  {windowWidth > 992 && (
                     <Button
                       className={`btn-g btn-lg addtocartbtn ${
                         isAlreadyAddedInCart === true && 'no-click'
                       }`}
-                      onClick={() => addToCart(currentProduct)}
+                      onClick={() => dispatch(getAddToCart({item:currentProduct,uid}))}
                     >
                       <ShoppingCartOutlinedIcon />
-                      {isAdded === true || isAlreadyAddedInCart === true
-                        ? 'Added'
-                        : 'Add To Cart'}
+                      {isItemInCart
+                        ? "Added"
+                        : "Add To Cart"}
                     </Button>
                   )}
                   <Button
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
index 42360bc..7b7762a 100644
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, useContext } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import SliderBanner from './slider/index';
 import CatSlider from '../../components/catSlider';
 import DealofDay from '../../components/DealofDay/DealofDay';
@@ -11,91 +11,98 @@ import Banner4 from '../../assets/images/banner4.webp';
 
 import Slider from 'react-slick';
 import TopProducts from './TopProducts';
-import axios from 'axios';
-import { MyContext } from '../../App';
+import { useSelector } from 'react-redux';
 
 const Home = (props) => {
-  const [prodData, setprodData] = useState(props.data);
-  const [catArray, setcatArray] = useState([]);
-  const [activeTab, setactiveTab] = useState();
-  const [activeTabIndex, setactiveTabIndex] = useState(0);
-  const [activeTabData, setActiveTabData] = useState([]);
-
-  const [bestSells, setBestSells] = useState([]);
-  const [isLoadingProducts, setIsLoadingProducts] = useState(false);
-
-  const productRow = useRef();
-  const context = useContext(MyContext);
-
-  var settings = {
-    dots: false,
-    infinite: context.windowWidth < 992 ? false : true,
-    speed: 500,
-    slidesToShow: 3,
-    slidesToScroll: 1,
-    fade: false,
-    arrows: context.windowWidth < 992 ? false : true
-  };
-
-  const catArr = [];
-  useEffect(() => {
-    prodData.length !== 0 &&
-      prodData.map((item) => {
-        item.items.length !== 0 &&
-          item.items.map((item_) => {
-            catArr.push(item_.cat_name);
-          });
-      });
 
-    const list2 = catArr.filter(
-      (item, index) => catArr.indexOf(item) === index
-    );
-    setcatArray(list2);
+    const [prodData, setprodData] = useState(props.data)
+    const [catArray, setcatArray] = useState([])
+    const [activeTab, setactiveTab] = useState();
+    const [activeTabIndex, setactiveTabIndex] = useState(0);
+    const [activeTabData, setActiveTabData] = useState([]);
 
-    setactiveTab(list2[0]);
+    const [bestSells, setBestSells] = useState([]);
+    const [isLoadingProducts, setIsLoadingProducts] = useState(false);
 
-    window.scrollTo(0, 0);
-  }, []);
+    const productRow=useRef();
+    const windowWidth = useSelector((state)=>state.filter.windowWidth);
 
-  useEffect(() => {
-    var arr = [];
-    setActiveTabData(arr);
-    prodData.length !== 0 &&
-      prodData.map((item, index) => {
-        item.items.map((item_, index_) => {
-          if (item_.cat_name === activeTab) {
-            {
-              item_.products.length !== 0 &&
-                item_.products.map((product) => {
-                  arr.push({
-                    ...product,
-                    parentCatName: item.cat_name,
-                    subCatName: item_.cat_name
-                  });
-                });
-
-              setActiveTabData(arr);
-              setTimeout(() => {
-                setIsLoadingProducts(false);
-              }, [1000]);
-            }
-          }
-        });
-      });
-  }, [activeTab, activeTabData]);
-
-  const bestSellsArr = [];
-
-  useEffect(() => {
-    prodData.length !== 0 &&
-      prodData.map((item) => {
-        if (item.cat_name === 'Electronics') {
-          item.items.length !== 0 &&
-            item.items.map((item_) => {
-              item_.products.length !== 0 &&
-                item_.products.map((product, index) => {
-                  bestSellsArr.push(product);
-                });
+    var settings = {
+        dots: false,
+        infinite: windowWidth<992 ? false : true,
+        speed: 500,
+        slidesToShow: 3,
+        slidesToScroll: 1,
+        fade: false,
+        arrows: windowWidth<992 ? false : true,
+    };
+
+    const catArr = [];
+
+    useEffect(() => {
+
+        prodData.length !== 0 &&
+            prodData.map((item) => {
+                item.items.length !== 0 &&
+                    item.items.map((item_) => {
+                        catArr.push(item_.cat_name);
+                    })
+            })
+
+        const list2 = catArr.filter((item, index) => catArr.indexOf(item) === index);
+        setcatArray(list2)
+
+        setactiveTab(list2[0])
+
+        window.scrollTo(0,0);
+    }, [])
+
+
+
+
+    useEffect(() => {
+        var arr = [];
+        setActiveTabData(arr);
+        prodData.length !== 0 &&
+            prodData.map((item, index) => {
+                item.items.map((item_, index_) => {
+                    if (item_.cat_name === activeTab) {
+                        {
+                            item_.products.length !== 0 &&
+                                item_.products.map((product) => {
+                                    arr.push({ ...product, parentCatName: item.cat_name, subCatName: item_.cat_name })
+                                })
+
+                            setActiveTabData(arr)
+                            setTimeout(()=>{
+                                setIsLoadingProducts(false);
+                            },[1000]);
+                        }
+                    }
+                })
+
+            })
+
+    }, [activeTab, activeTabData])
+
+
+
+
+
+    const bestSellsArr = [];
+
+    useEffect(() => {
+        prodData.length !== 0 &&
+            prodData.map((item) => {
+                if (item.cat_name === "Electronics") {
+                    item.items.length !== 0 &&
+                        item.items.map((item_) => {
+                            item_.products.length !== 0 &&
+                                item_.products.map((product, index) => {
+                                    bestSellsArr.push(product);
+                                })
+                        })
+                }
             });
         }
       });
diff --git a/src/pages/Home/slider/index.js b/src/pages/Home/slider/index.js
index 65c2068..e6f30ef 100644
--- a/src/pages/Home/slider/index.js
+++ b/src/pages/Home/slider/index.js
@@ -1,5 +1,6 @@
-import React, { useEffect, useContext } from 'react';
-import Slider from 'react-slick';
+import React from 'react';
+import Slider from "react-slick";
+
 import './index.css';
 
 import Slide1 from '../../../assets/images/slider-1.webp';
@@ -11,21 +12,23 @@ import Button from '@mui/material/Button';
 
 import Newsletter from '../../../components/newsletter';
 
-import { MyContext } from '../../../App';
+
+import { useSelector } from 'react-redux';
 
 const HomeSlider = () => {
-  const context = useContext(MyContext);
+    const windowWidth = useSelector((state)=>state.filter.windowWidth);
+
+    var settings = {
+        dots: true,
+        infinite: true,
+        speed: 500,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        fade: true,
+        arrows: windowWidth>992 ? true : false,
+        autoplay:true
+    };
 
-  var settings = {
-    dots: true,
-    infinite: true,
-    speed: 500,
-    slidesToShow: 1,
-    slidesToScroll: 1,
-    fade: true,
-    arrows: context.windowWidth > 992 ? true : false,
-    autoplay: true
-  };
 
   return (
     <section className="homeSlider">
@@ -88,7 +91,7 @@ const HomeSlider = () => {
           </div>
         </Slider>
 
-        {context.windowWidth > 992 && <Newsletter />}
+        {windowWidth > 992 && <Newsletter />}
       </div>
     </section>
   );
diff --git a/src/pages/Listing/index.js b/src/pages/Listing/index.js
index 4a4078e..8bcd74a 100644
--- a/src/pages/Listing/index.js
+++ b/src/pages/Listing/index.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useContext } from 'react';
+import React, { useState, useEffect } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import Sidebar from '../../components/Sidebar';
 import Product from '../../components/product';
@@ -7,70 +7,83 @@ import GridViewOutlinedIcon from '@mui/icons-material/GridViewOutlined';
 import FilterListOutlinedIcon from '@mui/icons-material/FilterListOutlined';
 import MapComponent from '../../components/map/ITEMmap';
 
-import { MyContext } from '../../App';
+import { useDispatch, useSelector } from 'react-redux';
+import { setOpenFilters } from '../../Redux/filter-slice';
 
 const Listing = (props) => {
-  const [isOpenDropDown, setisOpenDropDown] = useState(false);
-  const [isOpenDropDown2, setisOpenDropDown2] = useState(false);
-  const [showPerPage, setHhowPerPage] = useState(3);
+    const [isOpenDropDown, setisOpenDropDown] = useState(false);
+    const [isOpenDropDown2, setisOpenDropDown2] = useState(false);
+    const [showPerPage, setHhowPerPage] = useState(3);
 
-  const [data, setData] = useState([]);
+    const [data, setData] = useState([]);
 
-  const context = useContext(MyContext);
+    const windowWidth = useSelector((state)=>state.filter.windowWidth);
+    const isOpenNavigation = useSelector((state)=>state.filter.openNavigation);
+    const isOpenFilters = useSelector((state)=>state.filter.openFilters);
 
-  const [currentId, setCurrentId] = useState();
+    const dispatch = useDispatch()
 
-  let { id } = useParams();
+    const [currentId, setCurrentId] = useState()
+
+    let { id } = useParams();
+
+    var itemsData = [];
+
+
+    useEffect(() => {
+
+        props.data.length !== 0 &&
+            props.data.map((item, index) => {
+
+                //page == single cat
+                if (props.single === true) {
+
+                    if (item.cat_name.toLowerCase() == id.toLowerCase()) {
+
+                        item.items.length !== 0 &&
+                            item.items.map((item_) => {
+                                item_.products.map((item__, index__) => {
+                                    itemsData.push({ ...item__, parentCatName: item.cat_name, subCatName: item_.cat_name })
+                                })
+
+                            })
+
+
+                    }
+                }
+                //page == double cat
+                else {
+                    item.items.length !== 0 &&
+                        item.items.map((item_, index_) => {
+                            // //console.log(item_.cat_name.replace(/[^A-Za-z]/g,"-").toLowerCase())
+                            if (item_.cat_name.split(' ').join('-').toLowerCase() == id.split(' ').join('-').toLowerCase()) {
+                                item_.products.map((item__, index__) => {
+
+                                    itemsData.push({ ...item__, parentCatName: item.cat_name, subCatName: item_.cat_name })
+
+                                })
+
+                            }
+                        })
+                }
+
+            })
+
+
+
+
+        const list2 = itemsData.filter((item, index) => itemsData.indexOf(item) === index);
+
+        setData(list2);
+
+        window.scrollTo(0,0);
+
+    }, [id])
 
-  var itemsData = [];
 
-  useEffect(() => {
-    props.data.length !== 0 &&
-      props.data.map((item, index) => {
-        //page == single cat
-        if (props.single === true) {
-          if (item.cat_name.toLowerCase() == id.toLowerCase()) {
-            item.items.length !== 0 &&
-              item.items.map((item_) => {
-                item_.products.map((item__, index__) => {
-                  itemsData.push({
-                    ...item__,
-                    parentCatName: item.cat_name,
-                    subCatName: item_.cat_name
-                  });
-                });
-              });
-          }
-        }
-        //page == double cat
-        else {
-          item.items.length !== 0 &&
-            item.items.map((item_, index_) => {
-              // //console.log(item_.cat_name.replace(/[^A-Za-z]/g,"-").toLowerCase())
-              if (
-                item_.cat_name.split(' ').join('-').toLowerCase() ==
-                id.split(' ').join('-').toLowerCase()
-              ) {
-                item_.products.map((item__, index__) => {
-                  itemsData.push({
-                    ...item__,
-                    parentCatName: item.cat_name,
-                    subCatName: item_.cat_name
-                  });
-                });
-              }
-            });
-        }
-      });
 
-    const list2 = itemsData.filter(
-      (item, index) => itemsData.indexOf(item) === index
-    );
 
-    setData(list2);
 
-    window.scrollTo(0, 0);
-  }, [id]);
 
   const filterByBrand = (keyword) => {
     props.data.length !== 0 &&
@@ -243,80 +256,66 @@ const Listing = (props) => {
 
   return (
     <>
-      {context.windowWidth < 992 && (
+      {windowWidth < 992 && (
         <>
-          {context.isopenNavigation === false && (
-            <Button
-              className="btn-g btn-lg w-100 filterBtn"
-              onClick={() => context.openFilters()}
-            >
-              Filters
-            </Button>
-          )}
-        </>
-      )}
-
-      <section className="listingPage">
-        <div className="container-fluid">
-          {
-            <div className="breadcrumb flex-column">
-              <h1 className="text-capitalize">{id.split('-').join(' ')}</h1>
-              <ul className="list list-inline mb-0">
-                <li className="list-inline-item">
-                  <Link to={''}>Home </Link>
-                </li>
-                <li className="list-inline-item">
-                  <Link
-                    to={`/cat/${sessionStorage.getItem('cat')}`}
-                    className="text-capitalize"
-                  >
-                    {sessionStorage.getItem('cat')}{' '}
-                  </Link>
-                </li>
-                {props.single === false && (
-                  <li className="list-inline-item">
-                    <Link to={''} class="text-capitalize">
-                      {id.split('-').join(' ')}
-                    </Link>
-                  </li>
-                )}
-              </ul>
-            </div>
-          }
+            {
+                windowWidth < 992 &&
+                <>
+                    {
+                        isOpenNavigation===false &&
+                        <Button className='btn-g btn-lg w-100 filterBtn' onClick={() => dispatch(setOpenFilters())}>Filters</Button>
+                    }
+                </>
+              
+            }
+
+            <section className='listingPage'>
+
+                <div className='container-fluid'>
+
+                    {
+                        <div className='breadcrumb flex-column'>
+                            <h1 className="text-capitalize">{id.split('-').join(' ')}</h1>
+                            <ul className='list list-inline mb-0'>
+                                <li className='list-inline-item'>
+                                    <Link to={''}>Home </Link>
+                                </li>
+                                <li className='list-inline-item'>
+                                    <Link to={`/cat/${sessionStorage.getItem('cat')}`} className='text-capitalize'>{sessionStorage.getItem('cat')} </Link>
+                                </li>
+                                {
+                                    props.single === false &&
+                                    <li className='list-inline-item'>
+                                        <Link to={''} class="text-capitalize">{id.split('-').join(' ')}</Link>
+                                    </li>
+                                }
+                            </ul>
+                        </div>
 
-          <div className="listingData">
-            <div className="row">
-              <div
-                className={`col-md-3 sidebarWrapper ${
-                  context.isOpenFilters === true && 'click'
-                }`}
-              >
-                {data.length !== 0 && (
-                  <Sidebar
-                    data={props.data}
-                    currentCatData={data}
-                    filterByBrand={filterByBrand}
-                    filterByPrice={filterByPrice}
-                    filterByRating={filterByRating}
-                  />
-                )}
-              </div>
+                    }
 
-              <div className="col-md-9 rightContent homeProducts pt-0">
-                <div className="topStrip d-flex align-items-center">
-                  <p className="mb-0">
-                    We found <span className="text-success">{data.length}</span>{' '}
-                    items for you!
-                  </p>
-                  <div className="ml-auto d-flex align-items-center">
-                    <div className="tab_ position-relative">
-                      <Button
-                        className="btn_"
-                        onClick={() => setisOpenDropDown(!isOpenDropDown)}
-                      >
-                        <GridViewOutlinedIcon /> Show: {showPerPage * 5}
-                      </Button>
-                      {isOpenDropDown !== false && (
+
+
+                    <div className='listingData'>
+                        <div className='row'>
+                            <div className={`col-md-3 sidebarWrapper ${isOpenFilters===true && 'click'}`}>
+
+                                {
+                                    data.length !== 0 && <Sidebar data={props.data} currentCatData={data} filterByBrand={filterByBrand} filterByPrice={filterByPrice} filterByRating={filterByRating} />
+                                }
+
+                            </div>
+
+
+                            <div className='col-md-9 rightContent homeProducts pt-0'>
+
+
+                                <div className='topStrip d-flex align-items-center'>
+                                    <p className='mb-0'>We found <span className='text-success'>{data.length}</span> items for you!</p>
+                                    <div className='ml-auto d-flex align-items-center'>
+                                        <div className='tab_ position-relative'>
+                                            <Button className='btn_' onClick={() => setisOpenDropDown(!isOpenDropDown)}><GridViewOutlinedIcon /> Show: {showPerPage * 5}</Button>
+                                            {isOpenDropDown !== false && (
                         <ul className="dropdownMenu">
                           <li>
                             <Button
diff --git a/src/pages/SellerRegistration/index.js b/src/pages/SellerRegistration/index.js
index b5aad55..cc5c2ab 100644
--- a/src/pages/SellerRegistration/index.js
+++ b/src/pages/SellerRegistration/index.js
@@ -1,13 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import { Typography, Container, Grid, TextField, Button } from '@mui/material';
 //import { getDatabase, ref, push, set, child } from "firebase/database";
-import { useNavigate } from 'react-router-dom';
-import { db, storage } from '../../firebase';
-import { doc, getDoc, setDoc } from 'firebase/firestore';
-import { uploadBytes, getDownloadURL, ref } from 'firebase/storage';
+import { useNavigate } from "react-router-dom";
+import { db, storage } from "../../firebase";
+import { doc, getDoc, setDoc } from "firebase/firestore";
+import {uploadBytes,getDownloadURL, ref} from "firebase/storage"
+import {useSelector} from "react-redux"
+
 
 const SellerForm = () => {
   const navigate = useNavigate();
+  const uid = useSelector((state)=>state.authReducer.uid);
 
   const [formFields, setFormFields] = useState({
     ownerName: '',
@@ -101,13 +104,11 @@ const SellerForm = () => {
     e.preventDefault();
     setIsSubmit(true);
     // Generate a unique key
-    const uniqueKey = localStorage.getItem('uid');
-
+    const uniqueKey = uid;
+    
     //Upload the shop photo image to firebase storage and get url
-    const imageRef = ref(
-      storage,
-      `sellerImages/${localStorage.getItem('uid')}/shopPhoto`
-    );
+    const imageRef = ref(storage, `sellerImages/${uid}/shopPhoto`);
+
     await uploadBytes(imageRef, formFields.shopPhoto);
     const imageUrl = await getDownloadURL(imageRef);
 
@@ -117,9 +118,10 @@ const SellerForm = () => {
     setIsSubmit(false);
   };
 
-  useEffect(() => {
-    checkUserInSellers(localStorage.getItem('uid'));
-  }, []);
+  useEffect(()=>{
+    checkUserInSellers(uid)
+  },[])
+
 
   return (
     <Container
diff --git a/src/pages/SignIn/index.js b/src/pages/SignIn/index.js
index d84cf75..2d44575 100644
--- a/src/pages/SignIn/index.js
+++ b/src/pages/SignIn/index.js
@@ -1,26 +1,25 @@
-import React, { useState, useContext } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import './style.css';
-import Box from '@mui/material/Box';
-import TextField from '@mui/material/TextField';
-import VisibilityOutlinedIcon from '@mui/icons-material/VisibilityOutlined';
-import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined';
-import { Button, Snackbar, Typography } from '@mui/material';
+import React, { useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import "./style.css";
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
+import { Button, Snackbar, Typography } from "@mui/material";
 import {
   getAuth,
   signInWithEmailAndPassword,
   GoogleAuthProvider,
   signInWithPopup,
-  sendPasswordResetEmail
-} from 'firebase/auth';
-import { app } from '../../firebase';
-import Backdrop from '@mui/material/Backdrop';
-import CircularProgress from '@mui/material/CircularProgress';
-import { MyContext } from '../../App';
-import GoogleImg from '../../assets/images/google.webp';
-import useLoggedInUserEmail from '../../Hooks/useLoggedInUserEmail';
-import { useDispatch } from 'react-redux';
-import { logIn } from '../../Redux/auth-slice';
+  sendPasswordResetEmail,
+} from "firebase/auth";
+import { app } from "../../firebase";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import GoogleImg from "../../assets/images/google.png";
+import useLoggedInUserEmail from "../../Hooks/useLoggedInUserEmail";
+import { useDispatch } from "react-redux";
+import { logIn } from "../../Redux/auth-slice";
 const auth = getAuth(app);
 const googleProvider = new GoogleAuthProvider();
 
@@ -32,8 +31,9 @@ const SignIn = () => {
     email: '',
     password: ''
   });
-  const [error, setError] = useState('');
-  const context = useContext(MyContext);
+
+  const [error, setError] = useState("");
+
   const history = useNavigate();
   const [snackbarOpen, setSnackbarOpen] = useState(false);
   const [loggedInUserEmail, setLoggedInUseEmail] = useLoggedInUserEmail(); //get_email hook
@@ -105,14 +105,17 @@ const SignIn = () => {
           email: '',
           password: ''
         });
-        localStorage.setItem('isLogin', true);
         const udata = replaceSpecialCharacters(user.email);
-        localStorage.setItem('user', udata);
-        context.signIn();
-        dispatch(logIn({ email: user.email }));
+        dispatch(logIn({
+          phoneNumber:user.phoneNumber,
+          photoURL:user.photoURL,
+          uid:user.uid,
+          displayName:user.displayName,
+          email:user.email,
+          emailVerified:user.emailVerified
+        }))
         setLoggedInUseEmail(user.email);
-        localStorage.setItem('uid', userCredential.user.uid);
-        localStorage.setItem('userImage', '');
+
         //console.log(loggedInUserEmail);
         history('/');
       })
@@ -128,15 +131,19 @@ const SignIn = () => {
     signInWithPopup(auth, googleProvider)
       .then((result) => {
         setShowLoader(false);
-        localStorage.setItem('isLogin', true);
+
         const udata = replaceSpecialCharacters(result.user.email);
-        localStorage.setItem('user', udata);
-        localStorage.setItem('uid', result.user.uid);
-        context.signIn();
+        dispatch(logIn({
+          phoneNumber:result.user.phoneNumber,
+          photoURL:result.user.photoURL,
+          uid:result.user.uid,
+          displayName:result.user.displayName,
+          email:result.user.email,
+          emailVerified:result.user.emailVerified
+        }))
         setLoggedInUseEmail(udata);
-        localStorage.setItem('userImage', result.user.photoURL);
-        //console.log(loggedInUserEmail);
-        history('/');
+        history("/");
+
       })
       .catch((error) => {
         setShowLoader(false);
diff --git a/src/pages/cart/index.js b/src/pages/cart/index.js
index 302e539..3d6890d 100644
--- a/src/pages/cart/index.js
+++ b/src/pages/cart/index.js
@@ -1,39 +1,47 @@
-import React, { useContext, useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import './style.css';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import Rating from '@mui/material/Rating';
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import "./style.css";
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import Rating from "@mui/material/Rating";
+
 import {
   Button,
   Card,
   CardActions,
   CardContent,
-  Typography
-} from '@mui/material';
-import QuantityBox from '../../components/quantityBox';
-import { MyContext } from '../../App';
-import { getDatabase, ref, onValue, remove } from 'firebase/database';
-import { useNavigate } from 'react-router-dom';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
-import MapComponent from '../../components/map/ITEMmap';
-import { db } from '../../firebase';
+  Typography,
+} from "@mui/material";
+import QuantityBox from "../../components/quantityBox";
+import { getDatabase, ref, onValue, remove } from "firebase/database";
+import { useNavigate } from "react-router-dom";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import MapComponent from "../../components/map/ITEMmap";
+import { db } from "../../firebase";
 import {
   collection,
   deleteDoc,
   doc,
   getDocs,
-  onSnapshot
-} from 'firebase/firestore';
+  onSnapshot,
+} from "firebase/firestore";
+import {useSelector,useDispatch} from "react-redux"
+import { getDeleteAllCartItem, getDeleteCartItem } from "../../Redux/cart-slice";
+
+
 const Cart = () => {
   const [cartItems, setCartItems] = useState([]);
   const [error, setError] = useState(null);
   const [totalPrice, setTotalPrice] = useState(0);
-  const context = useContext(MyContext);
   const navigate = useNavigate();
-  const [uid, setUid] = useState(localStorage.getItem('uid'));
+  const uid = useSelector((state)=>state.authReducer.uid)
+  const logged = useSelector((state)=>state.authReducer.isAuth)
+  const dispatch = useDispatch();
+  const isDeleteing = useSelector((state)=>state.cart.isRemoving)
+  const windowWidth = useSelector((state)=>state.filter.windowWidth);
+
   useEffect(() => {
     try {
-      if (context.isLogin === 'true') {
+      if (logged === true) {
         fetchCartProducts();
       } else {
         navigate('/signIn'); // Navigate to About Us page if not logged in
@@ -47,8 +55,10 @@ const Cart = () => {
   }, []);
 
   useEffect(() => {
-    fetchCartProducts();
-  }, [db, uid]);
+    if(!isDeleteing){
+      fetchCartProducts();
+    }
+  }, [db, uid, isDeleteing]);
 
   const fetchCartProducts = async () => {
     try {
@@ -56,12 +66,13 @@ const Cart = () => {
       const productsCollectionRef = collection(cartRef, 'products');
       const querySnapshot = await getDocs(productsCollectionRef);
       let products = [];
+      
       let price = 0;
       querySnapshot.forEach((doc) => {
         products.push({ id: doc.id, ...doc.data() });
         price += parseInt(doc.data()?.price) * doc.data()?.quantity;
       });
-      context.setCartCount(products.length);
+      // context.setCartCount(products.length);
       setCartItems(products);
       setTotalPrice(price);
     } catch (error) {
@@ -69,11 +80,9 @@ const Cart = () => {
     }
   };
 
-  const deleteCartItem = async (uid, cartItemId) => {
-    const cartItemRef = doc(db, 'carts', uid, 'products', cartItemId);
-
+  const deleteCartItem = async (cartItemId,price) => {
     try {
-      await deleteDoc(cartItemRef);
+      dispatch(getDeleteCartItem({itemId:cartItemId,uid}))
       fetchCartProducts();
       console.log('Cart item deleted successfully.');
     } catch (error) {
@@ -81,16 +90,10 @@ const Cart = () => {
     }
   };
 
-  const deleteAllCartItems = async (uid) => {
-    const productsCollectionRef = collection(db, 'carts', uid, 'products');
-
+  const deleteAllCartItems = () => {
     try {
-      const querySnapshot = await getDocs(productsCollectionRef);
-      querySnapshot.forEach(async (doc) => {
-        await deleteDoc(doc.ref);
-      });
-      await fetchCartProducts();
-      console.log('All cart items deleted successfully.');
+      dispatch(getDeleteAllCartItem({uid}));
+      console.log("All cart items deleted successfully.");
     } catch (error) {
       console.error('Error deleting cart items:', error);
     }
@@ -105,7 +108,7 @@ const Cart = () => {
       {cartItems.length > 0 ? (
         // Render cart section if cartItems array is not empty
         <>
-          {context.windowWidth > 992 && (
+          {windowWidth > 992 && (
             <div className="breadcrumbWrapper mb-4">
               <div className="container-fluid">
                 <ul className="breadcrumb breadcrumb2 mb-0">
@@ -138,7 +141,7 @@ const Cart = () => {
 
                     <span
                       className="ml-auto clearCart d-flex align-items-center cursor "
-                      onClick={() => deleteAllCartItems(uid)}
+                      onClick={() => deleteAllCartItems()}
                     >
                       <DeleteOutlineOutlinedIcon /> Clear Cart
                     </span>
@@ -231,7 +234,7 @@ const Cart = () => {
                                     <span
                                       className="cursor"
                                       onClick={() =>
-                                        deleteCartItem(uid, `${item?.id}`)
+                                        deleteCartItem(`${item?.id}`)
                                       }
                                     >
                                       <DeleteOutlineOutlinedIcon />
diff --git a/src/pages/wishList/index.js b/src/pages/wishList/index.js
index f6a9ed9..451036c 100644
--- a/src/pages/wishList/index.js
+++ b/src/pages/wishList/index.js
@@ -1,45 +1,53 @@
-import React, { useContext, useState, useEffect } from 'react';
-import { Link } from 'react-router-dom';
-import './style.css';
-import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
-import Rating from '@mui/material/Rating';
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import "./style.css";
+import DeleteOutlineOutlinedIcon from "@mui/icons-material/DeleteOutlineOutlined";
+import Rating from "@mui/material/Rating";
+
 import {
   Button,
   Card,
   CardActions,
   CardContent,
-  Typography
-} from '@mui/material';
-import QuantityBox from '../../components/quantityBox';
-import { MyContext } from '../../App';
-import { useNavigate } from 'react-router-dom';
-import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace';
-import MapComponent from '../../components/map/ITEMmap';
-import { db } from '../../firebase';
+  Typography,
+} from "@mui/material";
+import QuantityBox from "../../components/quantityBox";
+import { getDatabase, ref, onValue, remove } from "firebase/database";
+import { useNavigate } from "react-router-dom";
+import KeyboardBackspaceIcon from "@mui/icons-material/KeyboardBackspace";
+import MapComponent from "../../components/map/ITEMmap";
+import { db } from "../../firebase";
+
 import Snackbar from '@mui/material/Snackbar';
+
 import {
   collection,
   deleteDoc,
   doc,
   getDocs,
-  getDoc,
   setDoc,
   updateDoc,
   onSnapshot
-} from 'firebase/firestore';
+  onSnapshot,
+} from "firebase/firestore";
+import {useSelector} from "react-redux"
+
 
 const WishList = () => {
   const [wishlistItems, setWishlistItems] = useState([]);
   const [buttonStatus, setButtonStatus] = useState({});
   const [error, setError] = useState(null);
   const [totalPrice, setTotalPrice] = useState(0);
-  const context = useContext(MyContext);
   const navigate = useNavigate();
-  const [uid, setUid] = useState(localStorage.getItem('uid'));
+  const uid = useSelector((state)=>state.authReducer.uid);
+  const logged = useSelector((state)=>state.authReducer.isAuth);
+  const windowWidth = useSelector((state)=>state.filter.windowWidth);
+
 
   useEffect(() => {
     try {
-      if (context.isLogin === 'true') {
+      if (logged === true) {
+
         fetchWishlistProducts();
       } else {
         navigate('/signIn');
@@ -67,7 +75,6 @@ const WishList = () => {
         products.push({ id: doc.id, ...doc.data() });
         price += parseInt(doc.data()?.price) * doc.data()?.quantity;
       });
-      context.setWishlistCount(products.length);
       setWishlistItems(products);
       setTotalPrice(price);
     } catch (error) {
@@ -147,7 +154,7 @@ const WishList = () => {
     <>
       {wishlistItems.length > 0 ? (
         <>
-          {context.windowWidth > 992 && (
+          {windowWidth > 992 && (
             <div className="breadcrumbWrapper mb-4">
               <div className="container-fluid">
                 <ul className="breadcrumb breadcrumb2 mb-0">
diff --git a/yarn.lock b/yarn.lock
index e07daa6..41e24d3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1824,6 +1824,18 @@
   dependencies:
     "@fortawesome/fontawesome-common-types" "6.5.2"
 
+"@fortawesome/fontawesome-common-types@6.5.1":
+  version "6.5.1"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz"
+  integrity sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==
+
+"@fortawesome/fontawesome-svg-core@~1 || ~6":
+  version "6.5.1"
+  resolved "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz"
+  integrity sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "6.5.1"
+
 "@fortawesome/react-fontawesome@^0.2.0":
   version "0.2.0"
   resolved "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz"
@@ -3337,6 +3349,7 @@ ajv@^6.12.2, ajv@^6.12.5, ajv@^6.9.1:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+
 ajv@^6.12.4, ajv@^6.9.1:
   version "6.12.6"
   resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
@@ -9512,11 +9525,17 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
+redux-persist@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz"
+  integrity sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ==
+
 redux-thunk@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz"
   integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
 
+
 redux@^5.0.0, redux@^5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz"