diff --git a/package-lock.json b/package-lock.json
index 7a4ab34..d43ab2d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "axios-app",
       "version": "0.1.0",
       "dependencies": {
         "@emotion/react": "^11.7.0",
@@ -18,8 +19,10 @@
         "react": "^17.0.2",
         "react-cookie": "^4.1.1",
         "react-dom": "^17.0.2",
+        "react-icons": "^4.3.1",
         "react-router-dom": "^6.0.2",
         "react-scripts": "4.0.3",
+        "use-force-update": "^1.0.7",
         "web-vitals": "^1.0.1"
       }
     },
@@ -14638,6 +14641,14 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "node_modules/react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -17983,6 +17994,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/use-force-update": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/use-force-update/-/use-force-update-1.0.7.tgz",
+      "integrity": "sha512-k5dppYhO+I5X/cd7ildbrzeMZJkWwdAh5adaIk0qKN2euh7J0h2GBGBcB4QZ385eyHHnp7LIygvebdRx3XKdwA=="
+    },
     "node_modules/util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -30680,6 +30696,12 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",
       "integrity": "sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew=="
     },
+    "react-icons": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz",
+      "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
+      "requires": {}
+    },
     "react-is": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
@@ -33290,6 +33312,11 @@
       "resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
     },
+    "use-force-update": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/use-force-update/-/use-force-update-1.0.7.tgz",
+      "integrity": "sha512-k5dppYhO+I5X/cd7ildbrzeMZJkWwdAh5adaIk0qKN2euh7J0h2GBGBcB4QZ385eyHHnp7LIygvebdRx3XKdwA=="
+    },
     "util": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
diff --git a/package.json b/package.json
index 2c613e9..82d3be4 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,10 @@
     "react": "^17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.3.1",
     "react-router-dom": "^6.0.2",
     "react-scripts": "4.0.3",
+    "use-force-update": "^1.0.7",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
diff --git a/public/index.html b/public/index.html
index aa069f2..cbb4fe7 100644
--- a/public/index.html
+++ b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>React App</title>
   </head>
-  <body>
+  <body style="background-color: azure;">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--
diff --git a/src/App.css b/src/App.css
index 74b5e05..7f7315b 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,38 +1,53 @@
 .App {
-  text-align: center;
+	text-align: center;
 }
 
 .App-logo {
-  height: 40vmin;
-  pointer-events: none;
+	height: 40vmin;
+	pointer-events: none;
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
+	.App-logo {
+		animation: App-logo-spin infinite 20s linear;
+	}
 }
 
 .App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+	background-color: #282c34;
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: calc(10px + 2vmin);
+	color: white;
 }
 
 .App-link {
-  color: #61dafb;
+	color: #61dafb;
 }
 
 @keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+.cartTotal {
+	display: flex;
+	flex-direction: row;
+}
+.divPaperh3 {
+	padding-right: 10px;
+	color: gray;
+}
+.checkoutBtn {
+	width: 100%;
+	color: white;
+	background-color: green;
+	cursor: pointer;
+	height: 45px;
 }
diff --git a/src/App.js b/src/App.js
index 7a13708..ef828a1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,26 @@
-import logo from './logo.svg';
 import './App.css';
-import Dashboard from './pages/Dashboard'
-import Categories from './pages/Categories'
-import Products from './pages/Products'
 import Login from './pages/Login'
-import {Navigate, Route, Routes} from 'react-router-dom'
-import {useEffect,useState} from 'react'
+import { Route, Routes} from 'react-router-dom'
 import Drawer from './components/Drawer'
+import { AuthProvider } from "./contexts/AuthContext";
+
 
 
 function App(props) {
 
 
-  return  <Routes>
+  return  ( <AuthProvider>
+
+  <Routes>
+   <Route path="/" element={<Drawer/>}/>
    <Route path="/dashboard" element={<Drawer/>}/>
    <Route path="/categories" element={<Drawer   {...props}/>}/>
-   <Route path="/products" element={<Drawer/>}/>
+   <Route path="/product" element={<Drawer/>}/>
+   <Route path="/cart" element={<Drawer/>}/>
    <Route path="/login" element={<Login/>}/>
+  </Routes>
 
-</Routes>
+</AuthProvider>)
 }
 
 export default App;
diff --git a/src/components/Drawer.jsx b/src/components/Drawer.jsx
index 9e615f1..2f7e0e2 100644
--- a/src/components/Drawer.jsx
+++ b/src/components/Drawer.jsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react'
 import { styled, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
 import Drawer from '@mui/material/Drawer';
@@ -16,13 +15,10 @@ import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ListItem from '@mui/material/ListItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
-import InboxIcon from '@mui/icons-material/MoveToInbox';
-import MailIcon from '@mui/icons-material/Mail';
-import { Routes, Link, Route, useLocation, useNavigate } from 'react-router-dom'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
 import Dashboard from '../pages/Dashboard'
 import Categories from '../pages/Categories'
-import Products from '../pages/Products'
-import LogoutIcon from '@mui/icons-material/Logout';
+import Product from "../pages/ProductPage/Product";
 import GridViewIcon from '@mui/icons-material/GridView';
 import CategoryIcon from '@mui/icons-material/Category';
 import ProductionQuantityLimitsIcon from '@mui/icons-material/ProductionQuantityLimits';
@@ -31,8 +27,14 @@ import Avatar from './Avatar'
 import MenuItem from '@mui/material/MenuItem';
 import Menu from '@mui/material/Menu';
 import Tooltip from '@mui/material/Tooltip';
-import {navigate} from 'react-router-dom'
-import {TOKEN_KEY} from '../utils/Constants'
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+import Cart from '../pages/cart/Cart';
+import Badge from '@mui/material/Badge';
+import  { useEffect } from 'react';
+import useLogout from '../hooks/useLogout'
+import useAuth from '../hooks/useAuth';
+
+
 
 const drawerWidth = 240;
 
@@ -84,12 +86,23 @@ const DrawerHeader = styled('div')(({ theme }) => ({
 }));
 
 function PersistentDrawerLeft(props) {
+  
   const location = useLocation()
   const navigate = useNavigate()
   const theme = useTheme();
   const [open, setOpen] = React.useState(false);
+  const {logout} = useLogout()
+  const auth = useAuth().isAuth
+
+    useEffect(() => {
+        if(!auth) navigate('/login')
+    }, )
+
 
   const [anchorElUser, setAnchorElUser] = React.useState(null);
+var length = 0
+  let cart = JSON.parse(localStorage.getItem('CartData'))
+  if (cart) length = cart.length
 
   const handleDrawerOpen = () => {
     setOpen(true);
@@ -99,27 +112,30 @@ function PersistentDrawerLeft(props) {
     setOpen(false);
   };
 
-  const logout = () => {
-    localStorage.removeItem(TOKEN_KEY)
-    navigate('/login')
-    handleCloseUserMenu()
-  }
+  
   useEffect(() => {
-
   }, [])
   const renderContent = (routeName) => {
-    console.log(routeName)
     switch (routeName) {
+      case '/':
+        return <Dashboard />
       case '/login':
         return <Login />
-      case '/products':
-        return <Products />
+      case '/product':
+        return <Product />
       case '/dashboard':
         return <Dashboard />
       case '/categories':
         return <Categories />
+      case '/cart':
+        return <Cart />
+        default:
+           
     }
   }
+  const cartBtn = () => {
+    navigate('/cart')
+  }
   const handleOpenUserMenu = (event) => {
     setAnchorElUser(event.currentTarget);
   };
@@ -148,13 +164,28 @@ function PersistentDrawerLeft(props) {
               <MenuIcon />
             </IconButton>
             <Typography variant="h6" noWrap component="div">
-
             </Typography>
+            <Box>
+              <Tooltip title="My Cart">
+              <IconButton onClick={cartBtn} 
+              sx={{ color: 'white',
+                border: '1px solid gray',
+                borderRadius: '5px',
+                margin: '10px' }}>
+                  <Badge badgeContent={length} color="secondary">
+                <ShoppingCartIcon />
+                </Badge>
+              </IconButton>
+            </Tooltip>
+
             <Tooltip title="Logout">
               <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                 <Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
               </IconButton>
             </Tooltip>
+            </Box>
+            
+              
 
             <Menu
               sx={{ mt: '45px' }}
@@ -172,7 +203,7 @@ function PersistentDrawerLeft(props) {
               open={Boolean(anchorElUser)}
               onClose={handleCloseUserMenu}
             >
-              <MenuItem key='Logout' onClick={logout}>
+              <MenuItem key='Logout' onClick={()=> logout()}>
                 <Typography textAlign="center">Logout</Typography>
               </MenuItem>
             </Menu>
@@ -212,20 +243,20 @@ function PersistentDrawerLeft(props) {
             </ListItemIcon>
             <ListItemText primary='Categories' />
           </ListItem>
-          <ListItem component={Link} to="/products" key='products'>
+          <ListItem component={Link} to="/product" key='product'>
             <ListItemIcon>
               <ProductionQuantityLimitsIcon />
             </ListItemIcon>
-            <ListItemText primary='Products' />
+            <ListItemText primary='Product' />
           </ListItem>
         </List>
         <Divider />
         <List>
-          <ListItem component={Link} to="/login" key='logout'>
+          <ListItem component={Link} to="/cart">
             <ListItemIcon>
-              <LogoutIcon />
+              <ShoppingCartIcon />
             </ListItemIcon>
-            <ListItemText primary='Logout' />
+            <ListItemText primary='My Cart' />
           </ListItem>
         </List>
       </Drawer>
diff --git a/src/contexts/AuthContext.js b/src/contexts/AuthContext.js
new file mode 100644
index 0000000..9fc65e6
--- /dev/null
+++ b/src/contexts/AuthContext.js
@@ -0,0 +1,87 @@
+import { createContext, useEffect, useReducer } from "react";
+import { useNavigate } from "react-router-dom";
+import axios from '../utils/axios'
+const authCheck = localStorage.getItem('Token')
+if (authCheck) var auth = true
+else auth = false
+let initState = {
+    isAuth:auth,
+    user:null,
+    login:()=>{},
+    logout: ()=>{}
+}
+let AuthContext = createContext(initState)
+
+const reducer = (oldState,action)=>{
+    switch(action.type)
+    {
+        case 'LOGIN':
+            return {
+                ...oldState,
+                isAuth:true
+            }
+        case 'LOGOUT':
+            return {
+                ...oldState,
+                isAuth:false
+            }
+            default:
+    }
+}
+
+
+export const AuthProvider = ({children})=>{
+    const [state, dispatch] = useReducer(reducer,initState)
+    const navigate = useNavigate()
+
+        const logout = ()=>{
+            localStorage.removeItem('Token');
+            dispatch({
+                type:'LOGOUT'
+            })
+        }
+         const login = (email, password)=>{
+            if (!email || !password) return alert('Please enter Email and Password')
+            else{
+                axios({
+                    method: 'post',
+                    url: 'https://fakestoreapi.com/auth/login',
+                    data: {
+                        username: email,
+                        password: password
+                    }
+                  })
+        .then((response)=>{
+            let token = response.data.token;
+            localStorage.setItem('Token', JSON.stringify(token))
+            dispatch({
+                type:'LOGIN'
+            })
+            navigate('/dashboard')
+        })
+        .catch((err)=>{
+            console.log(err)
+            
+        })}
+    }
+        useEffect(()=>{
+            let token = JSON.parse(localStorage.getItem('Token'))
+            if(token)
+            {
+                dispatch({
+                    type:'LOGIN'
+                })
+            }
+        },[])
+        return <AuthContext.Provider
+        value={{
+            ...state,
+            login,
+            logout
+        }}
+        >
+
+            {children}
+        </AuthContext.Provider>
+}
+export default AuthContext;
\ No newline at end of file
diff --git a/src/hooks/useAuth.jsx b/src/hooks/useAuth.jsx
new file mode 100644
index 0000000..8807169
--- /dev/null
+++ b/src/hooks/useAuth.jsx
@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import AuthContext from '../contexts/AuthContext';
+
+const useAuth = () => useContext(AuthContext);
+
+export default useAuth;
\ No newline at end of file
diff --git a/src/hooks/useLogout.jsx b/src/hooks/useLogout.jsx
new file mode 100644
index 0000000..4b02653
--- /dev/null
+++ b/src/hooks/useLogout.jsx
@@ -0,0 +1,5 @@
+import {useContext} from 'react'
+import AuthContext from "../contexts/AuthContext";
+
+const useLogout = () => useContext(AuthContext)
+export default useLogout;
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index bb29a24..6714bc6 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,8 +4,7 @@ import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {BrowserRouter} from 'react-router-dom'
-import Drawer from './components/Drawer'
-import { createTheme, ThemeProvider, styled } from '@mui/material/styles';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
 
 const theme = createTheme({
 
diff --git a/src/pages/Categories.jsx b/src/pages/Categories.jsx
index 0e9ce54..a734954 100644
--- a/src/pages/Categories.jsx
+++ b/src/pages/Categories.jsx
@@ -1,12 +1,18 @@
-import React, { useEffect } from 'react';
+import useAuth from '../hooks/useAuth';
+import { useNavigate } from 'react-router-dom'
+import { useEffect } from 'react'
 
-function Categories(props) {
-    console.log(props)
-    useEffect(()=>{
-        console.log('use effect')
-        let userData = JSON.parse(localStorage.getItem('myData'))
-        console.log(userData)
-    },[])
+
+function Categories() {
+    const navigate = useNavigate()
+    const auth = useAuth().isAuth
+
+    useEffect(() => {
+        if(!auth) navigate('/login')
+        console.log('effect')
+    }, )
+
+    
     return (
         <div>
             Categories
diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 3c13707..29722c7 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -1,26 +1,15 @@
-import React, { useEffect, useState } from 'react';
-import {Navigate} from 'react-router-dom'
-function Dashboard(props) {
-    const [isLogged, setIsLogged] = React.useState(true)
-    useEffect(()=>{
-        console.log('1')
-        let token;
-        try {
-        token = JSON.parse(localStorage.getItem('token'))
-        console.log('2')
-        if(!token)
-         setIsLogged(false)
+import React, { useEffect } from 'react';
+import useAuth from '../hooks/useAuth';
+import { useNavigate } from 'react-router-dom'
 
-        } catch (error) {
-            console.log(error)
-            setIsLogged(false)
-        }
+function Dashboard() {
     
-    },[])
-    console.log('3')
+    const navigate = useNavigate()
+    const auth = useAuth().isAuth
 
-    if(!isLogged)
-        return <Navigate to="/login"/>
+    useEffect(() => {
+        if(!auth) navigate('/login')
+    }, )
 
     return (
         <div>
diff --git a/src/pages/Login.css b/src/pages/Login.css
new file mode 100644
index 0000000..fcb0743
--- /dev/null
+++ b/src/pages/Login.css
@@ -0,0 +1,56 @@
+@media (min-width: 1000px) {
+	.css-123re6j {
+		padding-top: 120px;
+		padding-bottom: 120px;
+	}
+}
+@media (min-width: 0px) {
+	.css-123re6j {
+		padding-top: 60px;
+		padding-bottom: 60px;
+	}
+}
+@media (min-width: 600px) {
+	.css-123re6j {
+		max-width: 600px;
+	}
+}
+@media (min-width: 600px) {
+	.css-123re6j {
+		padding-left: 24px;
+		padding-right: 24px;
+	}
+}
+.css-123re6j {
+	width: 100%;
+	margin-left: auto;
+	box-sizing: border-box;
+	margin-right: auto;
+	display: block;
+	padding-left: 16px;
+	padding-right: 16px;
+}
+.css-xilcp4 {
+	background-color: rgb(17, 24, 39) !important;
+	color: rgb(237, 242, 247) !important ;
+	transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms !important;
+	border-radius: 8px !important;
+	box-shadow: rgb(0 0 0 / 24%) 0px 10px 15px !important;
+	background-image: none;
+	overflow: hidden;
+	padding: 32px;
+}
+.Boxclass {
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+}
+.formStyle {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	height: 206px;
+}
+.css-1t8l2tu-MuiInputBase-input-MuiOutlinedInput-input {
+	color: white !important;
+}
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index cf8b851..bf1a6de 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -1,39 +1,68 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import axios from '../utils/axios'
-import {TOKEN_KEY} from '../utils/Constants'
+import * as React from 'react'
+import {useState , useContext } from 'react'
+import './Login.css'
+import Box from '@mui/material/Box'
+import Container from '@mui/material/Container'
+import axios from 'axios'
+import Paper from '@mui/material/Paper';
+import TextField from '@mui/material/TextField';
+import Button from '@mui/material/Button';
+import AuthContext from '../contexts/AuthContext'
+
 function Login(props) {
-    const navigate = useNavigate()
-    const [email, setEmail] = React.useState('')
-    const [password, setPassword] = React.useState('')
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const {login} = useContext(AuthContext)
 
-    const login = (e)=>{
-        e.preventDefault()
-        axios.post('/api/academy/auth/login',
-        {
-            email:email,
-            password:password
-        }
-        )
-        .then((response)=>{
-            console.log(response)
-            let token = response.data.token.access_token;
+        axios({
+            method: 'get',
+            url: 'https://fakestoreapi.com/products',
+          })
+          .then((response)=>{
             let data = response.data;
-            localStorage.setItem(TOKEN_KEY, JSON.stringify(data))
-            navigate('/dashboard')
-        })
-        .catch((err)=>{
+            localStorage.setItem('data', JSON.stringify(data))
+          })
+          .catch((err)=>{
             console.log(err)
-        })
-    }
+          })
+
     return (
-        <div>
-          <form>
-              <input value={email} onChange={(e)=>setEmail(e.target.value)} type="email" />
-              <input value={password} onChange={(e)=>setPassword(e.target.value)} type="password" />
-              <input type="submit" onClick={login}/>
-          </form>
-        </div>
+        <Box sx={{
+            boxSizing: 'border-box',
+            backgroundColor: 'rgb(11, 15, 25)',
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+        }} >
+            <Container className='MuiContainer-root MuiContainer-maxWidthSm css-123re6j'>
+              <Paper className='MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation16 MuiCard-root css-xilcp4'>
+                <Box className='Boxclass'>
+                    <img src={'https://board.computiq.tech/assets/logo.b3f1408e.png'} alt='Comutiq logo' height='40px'/>
+                    <h4>Login</h4>
+                    <p>Sign in on the internal platform</p>
+                </Box>
+                <Box>
+                <form 
+                className='formStyle' 
+                onSubmit={(e)=> {
+                    e.preventDefault()
+                    login(email,password)
+                    }}>
+
+                    <TextField  label="Email" variant="outlined" value={email} onChange={(e)=>setEmail(e.target.value)} type="email" />
+                    <TextField  label="Password" variant="outlined" value={password} onChange={(e)=>setPassword(e.target.value)} type="password" />
+                    <Button 
+                    variant="contained"
+                     type="submit"
+                     onClick={(e)=> {
+                     e.preventDefault()
+                     login(email,password)
+                     }}>Login</Button>
+                 </form>
+                </Box>
+               </Paper>
+            </Container>
+      </Box>
     );
 }
 
diff --git a/src/pages/ProductPage/AddItem.js b/src/pages/ProductPage/AddItem.js
new file mode 100644
index 0000000..d7567d8
--- /dev/null
+++ b/src/pages/ProductPage/AddItem.js
@@ -0,0 +1,21 @@
+import { useState } from 'react';
+import Button from './Button'
+import Popup from './Popup';
+
+function AddItem({onAdd}) {
+  const [isOpen, setIsOpen] = useState(false);
+ 
+  const togglePopup = () => {
+  setIsOpen(!isOpen);}
+
+  return (
+    <div>
+      <Button name='Add Item' onClick={togglePopup} styles={'btnHeader'} /> 
+      {isOpen && <Popup
+      handleClose={togglePopup}
+      onAdd={onAdd} onComplete={togglePopup} />}
+    </div>
+  );
+}
+
+export default AddItem;
\ No newline at end of file
diff --git a/src/pages/ProductPage/AddItemComp.js b/src/pages/ProductPage/AddItemComp.js
new file mode 100644
index 0000000..e4e60da
--- /dev/null
+++ b/src/pages/ProductPage/AddItemComp.js
@@ -0,0 +1,115 @@
+import { useState } from 'react'
+import Button from './Button'
+import Input from './Input'
+
+const AddItemComp = ({onAdd, onComplete}) => {
+
+    const [title, setTitle] = useState()
+    const [price, setPrice] = useState()
+    const [category, setCategory] = useState()
+    const [count, setCount] = useState()
+    const [rate, setRate] = useState()
+    const [description, setDescription] = useState()
+    const [image, setImage] = useState(null)
+    
+    const onSubmit = (e) => {
+        e.preventDefault()
+        if(!title){
+            alert('Please Add Product Title')
+            return
+        }
+        if(!price){
+            alert('Please Add Product price')
+            return
+        }
+        if(!description){
+            alert('Please Add Product description')
+            return
+        }
+        let rating = {
+            count : count,
+            rate : rate,
+        }
+        const id = Math.floor(Math.random()*10000)+1
+        onAdd({category,description,id,image,price,rating,title})
+        setTitle('')
+        setPrice('')
+        setCategory('')
+        setCount('')
+        setRate('')
+        setDescription('')
+        setImage(null)
+        onComplete()
+    }
+    return (
+
+        <form className={'addItem'} onSubmit={onSubmit}>
+
+            <Input type='text'
+             disc='Please add  a product Title...' 
+             inputName='Product' 
+             styles='addItemInput' 
+             label='Product Title: ' 
+             text={title} 
+             onChange={(e)=>setTitle(e.target.value)}
+             class={'AddText'} />
+
+            <Input type='text'
+             disc='Please add  Price...' 
+             inputName='Product' 
+             styles='addItemInput' 
+             label='Product Price: ' 
+             text={price} 
+             onChange={(e)=>setPrice(e.target.value)}
+             class={'AddText'} />
+
+            <Input type='text' 
+            disc='Please add  Description...' 
+            inputName='Product' 
+            styles='addItemInput' 
+            label='Product Description: ' 
+            text={description} 
+            onChange={(e)=>setDescription(e.target.value)}
+            class={'AddText'} />
+
+            <Input type='text' 
+            disc='Please add  Category...' 
+            inputName='Product' 
+            styles='addItemInput' 
+            label='Product Category: ' 
+            text={category} 
+            onChange={(e)=>setCategory(e.target.value)}
+            class={'AddText'} />
+
+            <Input type='text' 
+            disc='Please add  Count...' 
+            inputName='Product' 
+            styles='addItemInput' 
+            label='Product Count: ' 
+            text={count} 
+            onChange={(e)=>setCount(e.target.value)}
+            class={'AddText'} />
+
+            <Input type='text' 
+            disc='Please add  Rate...' 
+            inputName='Product' 
+            styles='addItemInput' 
+            label='Product Rate: ' 
+            text={rate} 
+            onChange={(e)=>setRate(e.target.value)}
+            class={'AddText'} />
+
+            <Input type='file'
+            inputName='Product image: '
+            styles='addItemInput'
+            label='Product Image: '
+            onChange={(e) => setImage(URL.createObjectURL(e.target.files[0]))}
+            class={'AddText'} />
+
+            <Button name='Add New' styles='btnAdd' type='submit' />
+
+        </form>
+    )
+}
+
+export default AddItemComp;
diff --git a/src/pages/ProductPage/Button.js b/src/pages/ProductPage/Button.js
new file mode 100644
index 0000000..df57caf
--- /dev/null
+++ b/src/pages/ProductPage/Button.js
@@ -0,0 +1,13 @@
+const Button = (props) => {
+    return (
+        <button 
+            type={props.type}
+            name={props.name}
+            onClick={props.onClick}
+            className={props.styles}> 
+            {props.name}
+        </button>
+    )
+}
+
+export default Button
diff --git a/src/pages/ProductPage/Content.js b/src/pages/ProductPage/Content.js
new file mode 100644
index 0000000..c03154a
--- /dev/null
+++ b/src/pages/ProductPage/Content.js
@@ -0,0 +1,49 @@
+import pic1 from './assisst/1.jpg'
+import pic2 from './assisst/2.jpg'
+import pic3 from './assisst/3.jpg'
+import pic4 from './assisst/4.jpg'
+import pic5 from './assisst/5.jpg'
+
+const Content = () => {
+    return (
+        [
+            {
+                id:1,
+                productName:'Headphone',
+                productPrice:'25000 IQD',
+                productDiscription:'red Headphone',
+                productImg:pic1,
+            },
+            {
+                id:2,
+                productName:'Realme Gt 5G',
+                productPrice:'700000 IQD',
+                productDiscription:'Realme phone',
+                productImg:pic5,
+            },
+            {
+                id:3,
+                productName:'Laptop',
+                productPrice:'400000 IQD',
+                productDiscription:'Huawi laptop',
+                productImg:pic4,
+            },
+            {
+                id:4,
+                productName:'Sunglasses',
+                productPrice:'50000 IQD',
+                productDiscription:'black sunglasses',
+                productImg:pic2,
+            },
+            {
+                id:5,
+                productName:'Watch',
+                productPrice:'20000 IQD',
+                productDiscription:'Beautiful woman watch',
+                productImg:pic3,
+            }
+        ]
+    )
+}
+
+export default Content
diff --git a/src/pages/ProductPage/DeleteProduct.jsx b/src/pages/ProductPage/DeleteProduct.jsx
new file mode 100644
index 0000000..05388c4
--- /dev/null
+++ b/src/pages/ProductPage/DeleteProduct.jsx
@@ -0,0 +1,10 @@
+import ClearIcon from '@mui/icons-material/Clear';
+const DeleteProduct = ({product,onDelete}) => {
+    return (
+        <div className={'deleteDiv'}>
+        <ClearIcon style={{cursor:'pointer', color:'red'}} onClick={() => onDelete(product)} className={'deletex'} />
+     </div>
+    )
+}
+
+export default DeleteProduct
diff --git a/src/pages/ProductPage/Header.js b/src/pages/ProductPage/Header.js
new file mode 100644
index 0000000..dc839c4
--- /dev/null
+++ b/src/pages/ProductPage/Header.js
@@ -0,0 +1,21 @@
+import React from 'react'
+import AddItem from './AddItem'
+import Input from './Input'
+
+const Header = ({onAdd, onChange}) => {
+    return (
+        <header className='headerCls'>
+            <div className='headerDiv'>
+              <div>
+                <Input disc='Search for products here...' type='text' styles='searchTxt' onChange={onChange} id='searchId'/>
+              </div>
+              <div>
+                <AddItem onAdd={onAdd} />
+              </div>
+            </div>
+        </header>
+
+    )
+}
+
+export default Header
diff --git a/src/pages/ProductPage/Input.js b/src/pages/ProductPage/Input.js
new file mode 100644
index 0000000..e4c12ad
--- /dev/null
+++ b/src/pages/ProductPage/Input.js
@@ -0,0 +1,21 @@
+import React from 'react'
+
+const Input = (props) => {
+    return (
+        <div className={'inputDiv'}>
+          {props.label ? <label htmlFor={props.inputName} className={props.class}>
+            {props.label}
+          </label> : ''}
+
+          <input type={props.type}
+                 name={props.inputName}
+                 placeholder={props.disc}
+                 className={props.styles}
+                 onChange={props.onChange}
+                 value={props.text}
+                 id={props.id} />
+        </div>
+    )
+}
+
+export default Input
diff --git a/src/pages/ProductPage/OneProduct.js b/src/pages/ProductPage/OneProduct.js
new file mode 100644
index 0000000..6c858ec
--- /dev/null
+++ b/src/pages/ProductPage/OneProduct.js
@@ -0,0 +1,53 @@
+import Button from './Button'
+import DeleteProduct from './DeleteProduct'
+import ProductDetials from './ProductDetials'
+import ProductImage from './ProductImage'
+import Snackbar from '@mui/material/Snackbar';
+import { Alert } from '@mui/material';
+import { useState } from 'react';
+
+const Product = ({product, onDelete,name}) => {
+    const [open, setOpen] = useState(false);
+    const onClick = () => {
+        let getData = JSON.parse(localStorage.getItem('CartData'))
+        if (!getData){
+            let addCart = [product]
+            localStorage.setItem('CartData', JSON.stringify(addCart) )
+            setOpen(true)
+        }
+        else{
+            let obj = getData.find(o => o.title === product.title);
+                if(!obj) {
+                    getData.push(product)
+            localStorage.setItem('CartData', JSON.stringify(getData) )
+            setOpen(true)
+        }
+        else {
+            alert('Item Alredy Added')
+    }
+            
+        }
+    }
+    const handleClose = () => {
+        setOpen(false);
+    }
+    return (
+        <div className={'product'}>
+         <div> 
+           <DeleteProduct onDelete={onDelete} product={product.id} />
+            <ProductImage productImage={product.image} />
+         </div>
+            <ProductDetials product={product} />
+            <div>
+                <Button name={name} styles='btnAddCart'  onClick={onClick} />
+            <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+                <Alert onClose={handleClose}>
+                    Item Added to your cart
+                </Alert>
+            </Snackbar>
+            </div>
+        </div>
+    )
+}
+
+export default Product
\ No newline at end of file
diff --git a/src/pages/ProductPage/Popup.js b/src/pages/ProductPage/Popup.js
new file mode 100644
index 0000000..e41abef
--- /dev/null
+++ b/src/pages/ProductPage/Popup.js
@@ -0,0 +1,16 @@
+import React from "react";
+import AddItemComp from "./AddItemComp";
+
+
+const Popup = ({handleClose, onAdd, onComplete}) => {
+  return (
+    <div className="popup-box">
+      <div className="box">
+        <span className="close-icon" onClick={handleClose}>x</span>
+        <AddItemComp onAdd={onAdd} onComplete={onComplete} />
+      </div>
+    </div>
+  );
+};
+
+export default Popup;
\ No newline at end of file
diff --git a/src/pages/ProductPage/Product.js b/src/pages/ProductPage/Product.js
new file mode 100644
index 0000000..d64929a
--- /dev/null
+++ b/src/pages/ProductPage/Product.js
@@ -0,0 +1,51 @@
+import Header from './Header';
+import './styles.css'
+import { useEffect, useState } from 'react';
+import Products from './Products';
+import useAuth from '../../hooks/useAuth';
+import { useNavigate } from 'react-router-dom'
+
+
+function Product() {
+  const [products,setProducts] = useState(JSON.parse(localStorage.getItem('data')))
+  const [itemFound,setItemFound] = useState(products)
+  const navigate = useNavigate()
+    const auth = useAuth().isAuth
+
+    useEffect(() => {
+        if(!auth) navigate('/login')
+    }, )
+
+
+  useEffect(() => {
+    setItemFound(products)
+
+  },[products])
+
+
+    const deleteProduct = (id) => {
+      setProducts(products.filter((product) => product.id !== id ))
+      document.getElementById('searchId').value=''
+    }
+    
+    const addProduct = (product) => {
+      setProducts([...products,product])
+      document.getElementById('searchId').value=''
+  }
+
+  const searchHandler = (e) => {
+     let filteredProduct= products.filter((item) => {
+         return  item.title.toLowerCase().includes(e.target.value.toLowerCase())
+       })
+       setItemFound(filteredProduct)
+  }
+
+  return (
+    <div>
+      <Header onAdd={addProduct} onChange={searchHandler} />
+      {itemFound.length>0 ? <Products products={itemFound} onDelete={deleteProduct}  /> : 'No products to show' }
+    </div>
+  );
+}
+
+export default Product;
diff --git a/src/pages/ProductPage/ProductDetials.jsx b/src/pages/ProductPage/ProductDetials.jsx
new file mode 100644
index 0000000..d858e79
--- /dev/null
+++ b/src/pages/ProductPage/ProductDetials.jsx
@@ -0,0 +1,25 @@
+const ProductDetials = ({product}) => {
+    return (
+        <div className={'prodName'}>
+        <div className={'DiscDiv'}>{product.description}</div>
+
+        <div style={{ display:'flex',alignItems: 'flex-end',    justifyContent: 'space-between',width:'100%'}}>
+            <div className={'nameDiv'}>
+            <p style={{fontWeight: 'bold', fontSize: '13px' }}>{product.title}</p>
+            </div>
+            
+        </div>
+        <div className={'Rating'}>
+            <div> Qty: {product.rating.count}</div>
+            <div> Rate: {product.rating.rate}</div>
+        </div>
+        <div className={'PriceDiv'}>
+     <p style={{ fontSize: '17px',color: 'red'}}>{product.price} $ </p>
+    </div>
+            
+    </div>
+
+    )
+}
+
+export default ProductDetials
diff --git a/src/pages/ProductPage/ProductImage.jsx b/src/pages/ProductPage/ProductImage.jsx
new file mode 100644
index 0000000..61fca75
--- /dev/null
+++ b/src/pages/ProductPage/ProductImage.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const ProductImage = ({productImage}) => {
+    return (
+        <img src={productImage} alt='' height='180px' width='100%' />
+
+    )
+}
+
+export default ProductImage
diff --git a/src/pages/ProductPage/Products.js b/src/pages/ProductPage/Products.js
new file mode 100644
index 0000000..29118bf
--- /dev/null
+++ b/src/pages/ProductPage/Products.js
@@ -0,0 +1,25 @@
+import OneProduct from "./OneProduct"
+
+const Products = ({products, onDelete}) => {
+  const onClick = (product) => {
+    let getData = JSON.parse(localStorage.getItem('CartData'))
+    if (!getData){
+        let addCart = [product]
+        localStorage.setItem('CartData', JSON.stringify(addCart) )
+    }
+    else{
+        getData.push(product)
+        localStorage.setItem('CartData', JSON.stringify(getData) )
+    }
+}
+    return (
+        <div className={'productsDiv'}>
+          {products.map((product)=>(
+           <OneProduct key={product.id} product={product} onDelete={onDelete} name={'Add to Cart'} onClick={onClick} />
+          )
+          )}  
+        </div>
+    )
+}
+
+export default Products
diff --git a/src/pages/ProductPage/assisst/1.jpg b/src/pages/ProductPage/assisst/1.jpg
new file mode 100644
index 0000000..1ad2762
Binary files /dev/null and b/src/pages/ProductPage/assisst/1.jpg differ
diff --git a/src/pages/ProductPage/assisst/2.jpg b/src/pages/ProductPage/assisst/2.jpg
new file mode 100644
index 0000000..929cb7a
Binary files /dev/null and b/src/pages/ProductPage/assisst/2.jpg differ
diff --git a/src/pages/ProductPage/assisst/3.jpg b/src/pages/ProductPage/assisst/3.jpg
new file mode 100644
index 0000000..cae9deb
Binary files /dev/null and b/src/pages/ProductPage/assisst/3.jpg differ
diff --git a/src/pages/ProductPage/assisst/4.jpg b/src/pages/ProductPage/assisst/4.jpg
new file mode 100644
index 0000000..d6796a9
Binary files /dev/null and b/src/pages/ProductPage/assisst/4.jpg differ
diff --git a/src/pages/ProductPage/assisst/5.jpg b/src/pages/ProductPage/assisst/5.jpg
new file mode 100644
index 0000000..a314aa6
Binary files /dev/null and b/src/pages/ProductPage/assisst/5.jpg differ
diff --git a/src/pages/ProductPage/styles.css b/src/pages/ProductPage/styles.css
new file mode 100644
index 0000000..1eb75f1
--- /dev/null
+++ b/src/pages/ProductPage/styles.css
@@ -0,0 +1,195 @@
+/* Popup style */
+.popup-box {
+	position: fixed;
+	background: #00000050;
+	width: 100%;
+	height: 100vh;
+	top: 0;
+	left: 0;
+}
+
+.box {
+	position: relative;
+	width: 70%;
+	margin: 0 auto;
+	height: auto;
+	max-height: 70vh;
+	margin-top: calc(100vh - 85vh - 20px);
+	background: #cccc;
+	border-radius: 4px;
+	padding: 20px;
+	border: 1px solid #999;
+	overflow: auto;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.close-icon {
+	content: "x";
+	cursor: pointer;
+	position: fixed;
+	right: calc(15% - 30px);
+	top: calc(100vh - 85vh - 33px);
+	background: #ededed;
+	width: 25px;
+	height: 25px;
+	border-radius: 50%;
+	line-height: 20px;
+	text-align: center;
+	border: 1px solid #999;
+	font-size: 20px;
+}
+.addItem {
+	display: flex;
+	flex-direction: column;
+	height: 350px;
+	justify-content: space-between;
+	width: 480px;
+	align-items: center;
+}
+.addItemInput {
+	width: 300px;
+	height: 30px;
+	font-size: large;
+	font-weight: bold;
+	color: black;
+}
+.addItemInput:hover {
+	cursor: text;
+}
+.btnAdd {
+	width: 200px;
+	height: 50px;
+	background-color: rgb(8 8 8);
+	color: white;
+	cursor: pointer;
+	border: 1px solid #cccccc;
+	border-radius: 20px;
+	font-weight: bold;
+	font-size: 18px;
+}
+
+.inputDiv {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	width: 570px;
+	font-weight: 900;
+	color: white;
+}
+.headerCls {
+	background-color: azure;
+	padding: 50px;
+}
+.headerDiv {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+.searchTxt {
+	width: 270px;
+	height: 30px;
+	border: 1px solid #cccccc;
+	border-radius: 7px;
+}
+.product {
+	display: flex;
+	flex-direction: column;
+	width: 235px;
+	height: 400px;
+	padding: 2px;
+	background-color: white;
+	border-radius: 15px 15px 0 0;
+	box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
+	margin-bottom: 30px;
+	justify-content: space-between;
+	border: 1px solid #cccccc;
+}
+.deletex {
+	cursor: pointer;
+	width: 10px;
+}
+.prodName {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	flex-direction: column;
+	padding-left: 10px;
+}
+.nameDiv {
+	justify-content: space-between;
+	align-items: center;
+	float: left;
+	text-align: center;
+	overflow-y: clip;
+	display: -webkit-inline-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+.productsDiv {
+	display: flex;
+	min-width: 1024px;
+	justify-content: space-between;
+	padding: 50px;
+	flex-wrap: wrap;
+	background-color: azure;
+}
+.deleteDiv {
+	display: flex;
+	justify-content: flex-end;
+}
+.btnAddCart {
+	height: 40px;
+	background-color: #000;
+	color: white;
+	border: none;
+	bottom: -40px;
+	width: 100%;
+	left: 0;
+	cursor: pointer;
+}
+.btnHeader {
+	width: 200px;
+	height: 50px;
+	background-color: rgb(8 8 8);
+	color: white;
+	cursor: pointer;
+	border: 1px solid #cccccc;
+	border-radius: 20px;
+	font-weight: bold;
+	font-size: 18px;
+}
+.DiscDiv {
+	color: rgb(112, 112, 112);
+	float: left;
+	font-size: 10px;
+	font-style: italic;
+	width: 100%;
+	overflow-y: clip;
+	display: -webkit-inline-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+.PriceDiv {
+	display: flex;
+	height: 16px;
+	width: 95%;
+	align-content: space-between;
+	justify-content: center;
+	flex-direction: column;
+	align-items: flex-end;
+	font-weight: bolder;
+}
+.AddText {
+	color: black;
+}
+.Rating {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	width: 95%;
+	padding-bottom: 4%;
+}
diff --git a/src/pages/Products.jsx b/src/pages/Products.jsx
deleted file mode 100644
index e3fcba4..0000000
--- a/src/pages/Products.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { useEffect } from 'react';
-
-function Products(props) {
-    
-    return (
-        <div>
-            Products
-        </div>
-    );
-}
-
-export default Products;
\ No newline at end of file
diff --git a/src/pages/cart/Cart.jsx b/src/pages/cart/Cart.jsx
new file mode 100644
index 0000000..7b75079
--- /dev/null
+++ b/src/pages/cart/Cart.jsx
@@ -0,0 +1,61 @@
+import Box from '@mui/material/Box';
+import DetailsPaper from './DetailsPaper'
+import ItemsCart from './ItemsCart'
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom'
+import useAuth from '../../hooks/useAuth';
+
+
+
+const Cart = () => {
+const [productCart,setProductCart] = useState(JSON.parse(localStorage.getItem('CartData')))
+const navigate = useNavigate()
+    const auth = useAuth().isAuth
+
+    useEffect(() => {
+        if(!auth) navigate('/login')
+    }, )
+
+   
+    let cart = JSON.parse(localStorage.getItem('CartData'))
+    var price = 0
+    if(cart){
+        var length = cart.length
+        cart.map((item)=>(
+         price+=item.price
+        ))
+    }
+    else {
+         length = 0
+    }
+    
+    
+    
+
+
+
+    const onClick = (id) => {
+        
+ 
+        let filter = productCart.filter((product) => product.id !== id.id )
+        setProductCart(filter)
+       localStorage.setItem('CartData', JSON.stringify(filter) )
+    //    setOpen(true)
+     }
+
+
+
+    return (
+        <Box sx={{
+            display:'flex',
+            width:'100%',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+        }}>
+        <ItemsCart onClick={onClick} productCart={productCart} />
+        <DetailsPaper length={length} price={price.toFixed(3)} />
+        </Box>
+    )
+}
+
+export default Cart
diff --git a/src/pages/cart/CountItems.jsx b/src/pages/cart/CountItems.jsx
new file mode 100644
index 0000000..5eda575
--- /dev/null
+++ b/src/pages/cart/CountItems.jsx
@@ -0,0 +1,29 @@
+import Box from '@mui/material/Box';
+
+const CountItems = ({length,price}) => {
+
+   
+
+    return (
+        <Box sx={{
+            display:'flex',
+            width:'100%',
+            flexDirection: 'column',
+        }}>
+            <Box className={'cartTotal'}>
+                <h3 className={'divPaperh3'}>Items Number :</h3> 
+                <h3>{length}</h3> 
+            </Box>
+            <Box className={'cartTotal'}>
+                <h3 className={'divPaperh3'}>total Amount :</h3>
+                <h3>{price}$</h3>
+            </Box>
+            <Box className={'cartTotal'}>
+                <h3 className={'divPaperh3'}>Discount:</h3>
+                    <h3 style={{color:'red'}}> Sorry you dont have DIscount Now</h3>
+            </Box>
+        </Box>
+    )
+}
+
+export default CountItems
diff --git a/src/pages/cart/DetailsPaper.jsx b/src/pages/cart/DetailsPaper.jsx
new file mode 100644
index 0000000..bc25646
--- /dev/null
+++ b/src/pages/cart/DetailsPaper.jsx
@@ -0,0 +1,36 @@
+import Box from '@mui/material/Box';
+import CountItems from './CountItems';
+import TotalAmount from './TotalAmount';
+
+
+const DetailsPaper = ({length,price}) => {
+
+
+    
+    return (
+        <Box sx={{
+            display:'flex',
+            width:'20%',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            border: '1px solid #dadada',
+            borderRadius: '10px',
+            padding: '20px',
+            backgroundColor: '#f8f8f8',
+        }}>
+            <Box>
+            <h1>Details</h1>
+            <Box>
+            <CountItems length={length} price={price} />
+            </Box>
+            </Box>
+            <Box>
+                <TotalAmount price={price} />
+            </Box>
+
+
+        </Box>
+    )
+}
+
+export default DetailsPaper
diff --git a/src/pages/cart/ItemsCart.jsx b/src/pages/cart/ItemsCart.jsx
new file mode 100644
index 0000000..52ad894
--- /dev/null
+++ b/src/pages/cart/ItemsCart.jsx
@@ -0,0 +1,57 @@
+import Box from '@mui/material/Box';
+import ProductImage from '../ProductPage/ProductImage'
+import ProductDetials from '../ProductPage/ProductDetials'
+import Button from '../ProductPage/Button'
+import { useState } from 'react';
+import { Link } from 'react-router-dom';
+import Snackbar from '@mui/material/Snackbar';
+import { Alert } from '@mui/material';
+
+
+
+const ItemsCart = ({onClick,productCart}) => {
+    
+    const [open, setOpen] = useState(false);
+    var length = 0
+    if(productCart) length = productCart.length
+    
+    const handleClose = () => {
+        setOpen(false);
+    }
+    return (
+        <Box sx={{
+            width:'75%',
+            marginRight: '50px',
+            
+        }}>
+              <div className={'productsDiv'} style={{border: '1px solid gray',
+            borderRadius: '10px',
+            backgroundColor: '#f8f8f8',}}>
+                
+             {length>0 ? productCart.map((product, index)=>(
+                 
+                 <div className={'product'} key={index}>
+         <div> 
+            <ProductImage productImage={product.image} />
+         </div>
+            <ProductDetials product={product} />
+            <div>
+                <Button name={'Remove item from Cart'} styles='btnAddCart'  onClick={() => onClick(product)} />
+                <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
+                <Alert onClose={handleClose} severity="error"  sx={{ width: '100%' }}>
+                    Product removed
+                </Alert>
+            </Snackbar>
+
+            </div>
+        </div>
+
+                 )
+                 ): <Link to='/product'>Your Cart is empty Go to Shop</Link>  }
+                 </div>
+                 </Box>
+        
+    )
+}
+
+export default ItemsCart
diff --git a/src/pages/cart/TotalAmount.jsx b/src/pages/cart/TotalAmount.jsx
new file mode 100644
index 0000000..88144d6
--- /dev/null
+++ b/src/pages/cart/TotalAmount.jsx
@@ -0,0 +1,25 @@
+import Box from '@mui/material/Box';
+import Button from '../ProductPage/Button'
+
+const TotalAmount = ({price}) => {
+    return (
+        <Box sx={{display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            height: '390px',}}>
+           <Box sx={{display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            }}>
+                <h1>Final Amount</h1>
+                <h1 style={{color:'red'}}>{price}$</h1>
+            </Box>
+        <Box>
+            <Button name = {'Checkout'} styles={'checkoutBtn'} />
+        </Box>
+        </Box>
+    )
+}
+
+export default TotalAmount
diff --git a/yarn.lock b/yarn.lock
index 113be34..6842187 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9556,6 +9556,11 @@
   "resolved" "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   "version" "6.0.9"
 
+"react-icons@^4.3.1":
+  "integrity" "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ=="
+  "resolved" "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz"
+  "version" "4.3.1"
+
 "react-is@^16.7.0":
   "integrity" "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
   "resolved" "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@@ -11519,6 +11524,11 @@
     "punycode" "1.3.2"
     "querystring" "0.2.0"
 
+"use-force-update@^1.0.7":
+  "integrity" "sha512-k5dppYhO+I5X/cd7ildbrzeMZJkWwdAh5adaIk0qKN2euh7J0h2GBGBcB4QZ385eyHHnp7LIygvebdRx3XKdwA=="
+  "resolved" "https://registry.npmjs.org/use-force-update/-/use-force-update-1.0.7.tgz"
+  "version" "1.0.7"
+
 "use@^3.1.0":
   "integrity" "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
   "resolved" "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
