diff --git a/car-ui-react/src/components/Elements/ProductCard.js b/car-ui-react/src/components/Elements/ProductCard.js
index 2745c3ae..ea92af5e 100644
--- a/car-ui-react/src/components/Elements/ProductCard.js
+++ b/car-ui-react/src/components/Elements/ProductCard.js
@@ -1,12 +1,27 @@
-import React from 'react';
-import carPicture from "../../assets/images/10001.avif"
+import React, {useEffect, useState}  from 'react';
+import {useCart} from "../../context";
+
 
 export const ProductCard = ({ product }) => {
+    const { brand, model, year, color, mileage, price, quantity, tax, poster, in_stock } = product;
+    const { cartList, addToCart, removeFromCart } = useCart();
+    const [inCart, setInCart] = useState(false);
+
+    useEffect(() => {
+        if (product) {
+            const productInCart = cartList.find(item => item.id === product.id);
+            if (productInCart) {
+                setInCart(true);
+            } else {
+                setInCart(false);
+            }
+        }
+    }, [cartList, product]);
+
     if (!product) {
-      return null; // Or handle the case where product is undefined
+        return null;
     }
-    const { carId, brand, model, year, color, mileage, price, quantity, tax, poster, in_stock } = product;
-  
+
     return (
       <div className="m-3 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
         <a href="/" className="relative">
@@ -40,7 +55,8 @@ export const ProductCard = ({ product }) => {
             <span className="text-2xl dark:text-gray-200">
               <span>INR </span><span>{price}</span>
             </span>
-            <button className='inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800'>Add To Cart +</button>
+              { !inCart && <button onClick={() => addToCart(product)} className={"inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800"}>Add To Cart <i className="ml-1 bi bi-plus-lg"></i></button>}
+              { inCart && <button onClick={() => removeFromCart(product)} className={"inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-800"}>Remove Item <i className="ml-1 bi bi-trash3"></i></button> }
           </p>
         </div>
       </div>
diff --git a/car-ui-react/src/components/Layout/Header.js b/car-ui-react/src/components/Layout/Header.js
index ff8b1012..52907aa2 100644
--- a/car-ui-react/src/components/Layout/Header.js
+++ b/car-ui-react/src/components/Layout/Header.js
@@ -1,9 +1,11 @@
 import { useEffect, useState } from "react";
 import { Link } from "react-router-dom";
 import Logo from "../../assets/logo.png";
+import {useCart} from "../../context";
 
 export const Header = () => {
   const [darkMode, setDarkMode] = useState(JSON.parse(localStorage.getItem("darkMode")) || false);
+  const {cartList} = useCart();
 
   useEffect(() => {
     localStorage.setItem("darkMode", JSON.stringify(darkMode));
@@ -28,7 +30,7 @@ export const Header = () => {
                   <span className="cursor-pointer text-xl text-gray-700 dark:text-white mr-5 bi bi-search"></span>
                   <Link to="/cart" className="text-gray-700 dark:text-white mr-5">
                     <span className="text-2xl bi bi-cart-fill relative">
-                      <span className="text-white text-sm absolute -top-1 left-2.5 bg-rose-500 px-1 rounded-full ">0</span>
+                      <span className="text-white text-sm absolute -top-1 left-2.5 bg-rose-500 px-1 rounded-full ">{cartList.length}</span>
                     </span>                    
                   </Link>
                   <span className="bi bi-person-circle cursor-pointer text-2xl text-gray-700 dark:text-white"></span>
diff --git a/car-ui-react/src/context/.gitkeep b/car-ui-react/src/context/.gitkeep
deleted file mode 100644
index e69de29b..00000000
diff --git a/car-ui-react/src/context/CartContext.js b/car-ui-react/src/context/CartContext.js
new file mode 100644
index 00000000..3437daf6
--- /dev/null
+++ b/car-ui-react/src/context/CartContext.js
@@ -0,0 +1,68 @@
+import { createContext, useContext, useReducer } from "react";
+import { cartReducer } from "../reducers";
+
+const cartInitialState = {
+    cartList: [],
+    total: 0
+}
+
+const CartContext = createContext(cartInitialState);
+
+export const CartProvider = ({children}) => {
+    const [state, dispatch] = useReducer(cartReducer, cartInitialState);
+
+    function addToCart(product){
+        const updatedList = state.cartList.concat(product);
+        const updatedTotal = state.total + product.price;
+
+        dispatch({
+            type: "ADD_TO_CART",
+            payload: {
+                products: updatedList,
+                total: updatedTotal
+            }
+        })
+    }
+
+    function removeFromCart(product){
+        const updatedList = state.cartList.filter(item => item.id !== product.id);
+        const updatedTotal = state.total - product.price;
+
+        dispatch({
+            type: "REMOVE_FROM_CART",
+            payload: {
+                products: updatedList,
+                total: updatedTotal
+            }
+        })
+    }
+
+    function clearCart(){
+        dispatch({
+            type: "CLEAR_CART",
+            payload: {
+                products: [],
+                total: 0
+            }
+        })
+    }
+
+    const value = {
+        cartList: state.cartList,
+        total: state.total,
+        addToCart,
+        removeFromCart,
+        clearCart
+    }
+
+    return (
+        <CartContext.Provider value={value}>
+            {children}
+        </CartContext.Provider>
+    )
+}
+
+export const useCart = () => {
+    const context = useContext(CartContext);
+    return context;
+}
\ No newline at end of file
diff --git a/car-ui-react/src/context/FilterContext.js b/car-ui-react/src/context/FilterContext.js
new file mode 100644
index 00000000..4d87c6f6
--- /dev/null
+++ b/car-ui-react/src/context/FilterContext.js
@@ -0,0 +1,78 @@
+import { createContext, useContext, useReducer } from "react"
+import { filterReducer } from "../reducers";
+
+const filterInitialState = {
+    productList: [],
+    onlyInStock: false,
+    bestSellerOnly: false,
+    sortBy: null,
+    ratings: null
+}
+
+const FilterContext = createContext(filterInitialState);
+
+export const FilterProvider = ({children}) => {
+    const [state, dispatch] = useReducer(filterReducer, filterInitialState);
+
+    function initialProductList(products){
+        dispatch({
+            type: "PRODUCT_LIST",
+            payload: {
+                products: products
+            }
+        });
+    }
+
+    function bestSeller(products){
+        return state.bestSellerOnly ? products.filter(product => product.best_seller === true) : products;
+    }
+
+    function inStock(products){
+        return state.onlyInStock ? products.filter(product => product.in_stock === true) : products;
+    }
+    
+    function sort(products){
+        if(state.sortBy === "lowtohigh"){
+            return products.sort((a, b) => Number(a.price) - Number(b.price));
+        }
+        if(state.sortBy === "hightolow"){
+            return products.sort((a, b) => Number(b.price) - Number(a.price));
+        }
+        return products;
+    }
+
+    function rating(products){
+        if(state.ratings === "4STARSABOVE"){
+            return products.filter(product => product.rating >= 4);
+        }
+        if(state.ratings === "3STARSABOVE"){
+            return products.filter(product => product.rating >= 3);
+        }
+        if(state.ratings === "2STARSABOVE"){
+            return products.filter(product => product.rating >= 2);
+        }
+        if(state.ratings === "1STARSABOVE"){
+            return products.filter(product => product.rating >= 1);
+        }
+        return products;
+    }
+
+    const filteredProductList = rating(sort(inStock(bestSeller(state.productList))));
+
+    const value = {
+        state, 
+        dispatch,
+        products: filteredProductList,
+        initialProductList
+    }
+    return (
+        <FilterContext.Provider value={value}>
+            {children}
+        </FilterContext.Provider>
+    )
+}
+
+export const useFilter = () => {
+    const context = useContext(FilterContext);
+    return context;
+}
\ No newline at end of file
diff --git a/car-ui-react/src/context/index.js b/car-ui-react/src/context/index.js
new file mode 100644
index 00000000..1e5031da
--- /dev/null
+++ b/car-ui-react/src/context/index.js
@@ -0,0 +1,2 @@
+export { useFilter, FilterProvider } from "./FilterContext";
+export { useCart, CartProvider } from "./CartContext";
\ No newline at end of file
diff --git a/car-ui-react/src/data/db.json b/car-ui-react/src/data/db.json
deleted file mode 100644
index 348d132a..00000000
--- a/car-ui-react/src/data/db.json
+++ /dev/null
@@ -1,139 +0,0 @@
-{
-  "products": [
-    {
-        "carId": 4371,
-        "brand": "Ford",
-        "model": "Contour",
-        "year": 1198,
-        "color": "Teal",
-        "mileage": 70.811136,
-        "price": 1500000,
-        "quantity": 100,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://i.pinimg.com/736x/fa/be/08/fabe082d7ca96325961ddd6019583cb7--mystique-ford-contour.jpg",
-        "in_stock": true
-    },
-    {
-        "carId": 4548,
-        "brand": "Mahindra",
-        "model": "XUV 700",
-        "year": 1950,
-        "color": "Black",
-        "mileage": 13.5465,
-        "price": 2000000,
-        "quantity": 200,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://www.cartoq.com/wp-content/uploads/2021/09/XUV700-Dark-Knight-edition-featured.jpg",
-        "in_stock": true
-      },
-      {
-        "carId": 1556,
-        "brand": "Mahindra",
-        "model": "Scorpio N",
-        "year": 1950,
-        "color": "Black",
-        "mileage": 13.5465,
-        "price": 15000000,
-        "quantity": 200,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://static.autox.com/uploads/2022/06/Mahindra-Scorpio-N-exterior.png",
-        "in_stock": true
-      },
-      {
-        "carId": 4752,
-        "brand": "Hundai",
-        "model": "i20 Grand",
-        "year": 1925,
-        "color": "Blue",
-        "mileage": 13.5465,
-        "price": 12000000,
-        "quantity": 100,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://paultan.org/image/2020/10/2021-Hyundai-i20-N-Exterior-7.jpg",
-        "in_stock": true
-      },
-      {
-        "carId": 4654,
-        "brand": "Tata",
-        "model": "Harrier",
-        "year": 1900,
-        "color": "Orange",
-        "mileage": 13.5465,
-        "price": 18000000,
-        "quantity": 100,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://th.bing.com/th/id/OIP.5i-hWiOn_6RnqXoDoA-H2QHaEo?rs=1&pid=ImgDetMain",
-        "in_stock": false
-      },
-      {
-        "carId": 1458,
-        "brand": "Tata",
-        "model": "Safari",
-        "year": 1900,
-        "color": "Grey",
-        "mileage": 13.5465,
-        "price": 25000000,
-        "quantity": 200,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://english.cdn.zeenews.com/sites/default/files/2022/10/31/1110417-tata-safari-classic-front.jpg",
-        "in_stock": true
-      },
-      {
-        "carId": 5467,
-        "brand": "Toyota",
-        "model": "Fortuner",
-        "year": 1900,
-        "color": "White",
-        "mileage": 13.5465,
-        "price": 6000000,
-        "quantity": 300,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://th.bing.com/th/id/OIP.qzSsXvyXs_A9WpKfF97yJQHaFJ?rs=1&pid=ImgDetMain",
-        "in_stock": false
-      },
-      {
-        "carId": 4567,
-        "brand": "Tata",
-        "model": "Tigor",
-        "year": 1900,
-        "color": "White",
-        "mileage": 13.5465,
-        "price": 12000000,
-        "quantity": 100,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://th.bing.com/th/id/OIP.EL6O-LdJztIEA7BuFBQWtwHaEK?rs=1&pid=ImgDetMain",
-        "in_stock": true
-      },
-      {
-        "carId": 6424,
-        "brand": "Hundai",
-        "model": "Verna",
-        "year": 1985,
-        "color": "Black",
-        "mileage": 13.5465,
-        "price": 2000000,
-        "quantity": 50,
-        "tax": 1.4,
-        "timestamp": "2004-10-19 10: 23: 54",
-        "poster": "https://imgd.aeplcdn.com/642x336/n/cw/ec/121943/verna-facelift-exterior-right-front-three-quarter.jpeg?isig=0&q=75",
-        "in_stock": false
-      }
-  ],
-  "featured_products": [
-    {}
-  ],
-  "orders": [
-    {}
-  ],
-  "users": [
-    {}
-  ]
-}
diff --git a/car-ui-react/src/data/routes.json b/car-ui-react/src/data/routes.json
deleted file mode 100644
index d82a3846..00000000
--- a/car-ui-react/src/data/routes.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-    "/products*": "/444/",
-    "/featured_products*": "/444/",
-    "/orders*": "/660/",
-    "/users*": "/600/"
-}
\ No newline at end of file
diff --git a/car-ui-react/src/index.js b/car-ui-react/src/index.js
index 79884b16..fbe070a7 100644
--- a/car-ui-react/src/index.js
+++ b/car-ui-react/src/index.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
+import {CartProvider, FilterProvider} from "./context";
 import './index.css';
 import App from './App';
 
@@ -8,7 +9,11 @@ const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <Router>
-      <App />
+        <CartProvider>
+        <FilterProvider>
+        <App />
+        </FilterProvider>
+        </CartProvider>
     </Router>
   </React.StrictMode>
 );
diff --git a/car-ui-react/src/pages/Cart/CartPage.js b/car-ui-react/src/pages/Cart/CartPage.js
index bef2e616..edb0112a 100644
--- a/car-ui-react/src/pages/Cart/CartPage.js
+++ b/car-ui-react/src/pages/Cart/CartPage.js
@@ -1,11 +1,13 @@
 import { CartEmpty } from "./components/CartEmpty";
 import { CartList } from "./components/CartList";
+import {useCart} from "../../context"
 
 export const CartPage = () => {
-  const carListLength = 0;
+  const { cartList } = useCart();
+
   return (
     <main>       
-      { carListLength ? <CartList /> : <CartEmpty /> }
+      { cartList.length ? <CartList /> : <CartEmpty /> }
     </main>
   )
 }
diff --git a/car-ui-react/src/pages/Cart/components/CartCard.js b/car-ui-react/src/pages/Cart/components/CartCard.js
index e69de29b..ec9c28cc 100644
--- a/car-ui-react/src/pages/Cart/components/CartCard.js
+++ b/car-ui-react/src/pages/Cart/components/CartCard.js
@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom"
+import {useCart} from "../../../context";
+
+export const CartCard = ({product}) => {
+    const { removeFromCart } = useCart();
+
+    return (
+        <div className="flex flex-wrap justify-between border-b dark:border-slate-700 max-w-4xl m-auto p-2 mb-5 ">
+            <div className="flex">
+                <Link to={`products/${product.id}`}>
+                    <img className="w-32 rounded" src={product.poster} alt={product.name} />
+                </Link>
+                <div className="">
+                    <Link to={`products/${product.id}`}>
+                        <p className="text-lg ml-2 dark:text-slate-200">{product.brand} {product.model}</p>
+                    </Link>
+                    <button onClick={() => removeFromCart(product)} className="text-base ml-2 text-red-400">Remove</button>
+                </div>
+            </div>
+            <div className="text-lg m-2 dark:text-slate-200">
+                <span>${product.price}</span>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/car-ui-react/src/pages/Cart/components/CartList.js b/car-ui-react/src/pages/Cart/components/CartList.js
index 833609d5..9f6fbcde 100644
--- a/car-ui-react/src/pages/Cart/components/CartList.js
+++ b/car-ui-react/src/pages/Cart/components/CartList.js
@@ -1,20 +1,31 @@
 import { useState } from "react"
+import {CartCard} from "./CartCard";
+import {Checkout} from "./Checkout";
+import {useCart} from "../../../context";
 
 export const CartList = () => {
     const [checkout, setCheckout] = useState(false);
+    const {cartList , total} = useCart();
 
     return (
         <>
             <section>
                 <p className="text-2xl text-center font-semibold dark:text-slate-100 my-10 underline underline-offset-8">
-                    My Cart ({2})
+                    My Cart ({cartList.length})
                 </p>
             </section>
 
+            <section>
+                { cartList.map((product) => (
+                    <CartCard key={product.id} product={product} />
+                )) }
+            </section>
+
             <section className="max-w-4xl m-auto">
                 <div className="flex flex-col p-2 border-b dark:border-slate-700 text-lg dark:text-slate-100">
                     <p className="flex justify-between my-2">
                         <span className="font-semibold">Total Amount:</span>
+                        <span>${total}</span>
                     </p>
                 </div>
                 <div className="text-right my-5">
@@ -23,6 +34,7 @@ export const CartList = () => {
                     </button>
                 </div>
             </section>
+            {checkout && <Checkout setCheckout = {setCheckout}/>}
         </>
     )
 }
\ No newline at end of file
diff --git a/car-ui-react/src/pages/Cart/components/Checkout.js b/car-ui-react/src/pages/Cart/components/Checkout.js
index e69de29b..2b6974fd 100644
--- a/car-ui-react/src/pages/Cart/components/Checkout.js
+++ b/car-ui-react/src/pages/Cart/components/Checkout.js
@@ -0,0 +1,52 @@
+export const Checkout = ( {setCheckout}) => {
+    return (
+        <section>
+            <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50"></div>
+            <div id="authentication-modal" tabIndex="-1" className="mt-5 overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center flex" aria-modal="true" role="dialog" >
+                <div className="relative p-4 w-full max-w-md h-full md:h-auto overflow-y-auto">
+                    <div className="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                        <button onClick={() => setCheckout(false)} type="button" className="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-toggle="authentication-modal" >
+                            <svg aria-hidden="true" className="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" >
+                                <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd"></path>
+                            </svg>
+                            <span className="sr-only">Close modal</span>
+                        </button>
+                        <div className="py-6 px-6 lg:px-8">
+                            <h3 className="mb-4 text-xl font-medium text-gray-900 dark:text-white">
+                                <i className="bi bi-credit-card mr-2"></i>CARD PAYMENT
+                            </h3>
+                            <form className="space-y-6" >
+                                <div>
+                                    <label htmlFor="name" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Name:</label>
+                                    <input type="text" name="name" id="name" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:value-gray-400 dark:text-white"  disabled required="" />
+                                </div>
+                                <div>
+                                    <label htmlFor="email" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Email:</label>
+                                    <input type="text" name="email" id="email" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:value-gray-400 dark:text-white" disabled required="" />
+                                </div>
+                                <div>
+                                    <label htmlFor="card" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Card Number:</label>
+                                    <input type="number" name="card" id="card" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:value-gray-400 dark:text-white" value="4215625462597845" disabled required="" />
+                                </div>
+                                <div className="">
+                                    <label htmlFor="code" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300">Expiry Date:</label>
+                                    <input type="number" name="month" id="month" className="inline-block w-20 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:value-gray-400 dark:text-white" value="03" disabled required="" />
+                                    <input type="number" name="year" id="year" className="inline-block w-20 ml-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:value-gray-400 dark:text-white" value="27" disabled required="" />
+                                </div>
+                                <div>
+                                    <label htmlFor="code" className="block mb-2 text-sm font-medium text-gray-900 dark:text-gray-300" >Security Code:</label>
+                                    <input type="number" name="code" id="code" className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:value-gray-400 dark:text-white" value="523" disabled required="" />
+                                </div>
+                                <p className="mb-4 text-2xl font-semibold text-lime-500 text-center">
+                                </p>
+                                <button type="submit" className="w-full text-white bg-blue-700 hover:bg-blue-800 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700" >
+                                    <i className="mr-2 bi bi-lock-fill"></i>PAY NOW
+                                </button>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
\ No newline at end of file
diff --git a/car-ui-react/src/pages/Products/ProductsList.js b/car-ui-react/src/pages/Products/ProductsList.js
index 233a77f5..75c77c00 100644
--- a/car-ui-react/src/pages/Products/ProductsList.js
+++ b/car-ui-react/src/pages/Products/ProductsList.js
@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 import { ProductCard } from "../../components";
-import {Link} from "react-router-dom";
-
 
 export const ProductsList = () => {
 
diff --git a/car-ui-react/src/reducers/cartReducers.js b/car-ui-react/src/reducers/cartReducers.js
new file mode 100644
index 00000000..00c95851
--- /dev/null
+++ b/car-ui-react/src/reducers/cartReducers.js
@@ -0,0 +1,18 @@
+export const cartReducer = (state, action) => {
+    const { type, payload } = action;
+
+    switch(type){
+
+        case "ADD_TO_CART":
+            return {...state, cartList: payload.products, total: payload.total}
+        
+        case "REMOVE_FROM_CART":
+            return {...state, cartList: payload.products, total: payload.total}
+        
+        case "CLEAR_CART":
+            return {...state, cartList: payload.products, total: payload.total}
+
+        default:
+            throw new Error("No case found!");
+    }
+}
\ No newline at end of file
diff --git a/car-ui-react/src/reducers/filterReducers.js b/car-ui-react/src/reducers/filterReducers.js
new file mode 100644
index 00000000..2bbc09e1
--- /dev/null
+++ b/car-ui-react/src/reducers/filterReducers.js
@@ -0,0 +1,33 @@
+export const filterReducer = (state, action) => {
+    const {type, payload} = action;
+
+    switch(type){
+
+        case "PRODUCT_LIST":
+            return { productList: payload.products }
+        
+        case "SORT_BY":
+            return {...state, sortBy: payload.sortBy}
+        
+        case "RATINGS":
+            return {...state, ratings: payload.ratings}
+        
+        case "BEST_SELLER_ONLY":
+            return {...state, bestSellerOnly: payload.bestSellerOnly}
+        
+        case "ONLY_IN_STOCK":
+            return {...state, onlyInStock: payload.onlyInStock}
+
+        case "CLEAR_FILTER":
+            return {
+                ...state, 
+                onlyInStock: false,
+                bestSellerOnly: false,
+                sortBy: null,
+                ratings: null
+            }
+        
+        default:
+            throw new Error("No Cae Found!");
+    }
+}
\ No newline at end of file
diff --git a/car-ui-react/src/reducers/index.js b/car-ui-react/src/reducers/index.js
new file mode 100644
index 00000000..992eeeee
--- /dev/null
+++ b/car-ui-react/src/reducers/index.js
@@ -0,0 +1,2 @@
+export { filterReducer } from "./filterReducers";
+export { cartReducer } from "./cartReducers";
\ No newline at end of file