diff --git a/package-lock.json b/package-lock.json
index d63a3d2..fd4a83b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "react-icons": "^4.10.1"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -1182,6 +1183,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.10.1.tgz",
+      "integrity": "sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz",
diff --git a/package.json b/package.json
index b6d50b2..ae2996c 100644
--- a/package.json
+++ b/package.json
@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.10.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
diff --git a/src/App.css b/src/App.css
index b9d355d..98e0787 100644
--- a/src/App.css
+++ b/src/App.css
@@ -1,42 +1,239 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+.app header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  z-index: 999;
+  position: relative;
+}
+
+.shop-icon {
+  font-size: 1.6rem;
+}
+.app header a {
+  cursor: pointer;
+  position: relative;
+  color: black;
+}
+.app header span {
+  position: absolute;
+  right: -6px;
+  top: 11px;
+  color: white;
+  font-size: 0.7rem;
+  width: 4px;
+  background: green;
+  padding: 0.1rem 0.4rem;
+  border-radius: 14px;
+}
+.app header .logo {
+  font-size: 2rem;
+  text-decoration: none;
+  margin-top: 12px;
+  font-family: cursive;
+}
+
+/* <<<<<<<< end header >>>>>>>> */
+.app {
+  padding: 0rem 2rem;
+  min-height: 97vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+.app section {
+  position: relative;
+  z-index: 999;
+}
+/* <<<<<<<< start footer >>>>>>>> */
+.app footer a {
+  text-decoration: none;
+  color: green;
+}
+.app footer {
   text-align: center;
+  position: fixed;
+  width: 100%;
+  bottom: 0px;
+  z-index: 999;
+  background-color: white;
+  left: 0;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin-top: auto;
+  border-top: 1px solid black;
 }
 
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
+/* <<<<<<<< end footer >>>>>>>> */
+
+/* <<<<<<<<<<< swal >>>>>>>>>>> */
+.swal-footer {
+  text-align: center !important;
 }
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+.swal-button--confirm {
+  background-color: green !important;
 }
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+
+.swal-button--cancel {
+  background-color: #c3c1c1 !important;
+  color: black !important;
+}
+.swal-title {
+  font-family: cursive;
+  padding-bottom: 31px;
 }
 
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.emptyBasket {
+  margin-top: 2rem;
+  text-align: center;
+}
+.emptyBasket p {
+  margin-left: 2rem;
+  font-size: 1.5rem;
+  font-family: cursive;
+}
+.emptyBasket img {
+  width: 300px;
+  margin: 0rem auto;
+  display: block;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.card-index {
+  display: flex;
+  position: relative;
+  z-index: 999;
+  justify-content: left;
+  flex-wrap: wrap;
+  padding-top: 4rem;
+  margin-bottom: 4rem;
+  gap: 60px;
+}
+.cart-topbar .title {
+  margin-left: 0rem !important;
+}
+.cart-topbar button {
+  background-color: green;
+  color: white;
+  width: 300px;
+  border-radius: 5px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  padding: 0.7rem;
+  border: 1px solid white;
+}
+.cart-topbar {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.delete-icon {
+  font-size: 1.2rem;
+  margin-left: 0.5rem;
+}
+.product-count span {
+  width: 100px;
+  cursor: pointer;
+  text-align: center;
+}
+.product-count p {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.product-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: rgba(239, 235, 235, 0.542);
 }
 
+.card img {
+  width: 49%;
+  object-fit: contain;
+  /* height: -webkit-fill-available; */
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  width: 200px;
+  height: 200px;
+}
+.card p {
+  font-size: 1.3rem;
+  font-family: cursive;
+}
 .card {
-  padding: 2em;
+  width: 300px;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  background-color: white;
+  border-radius: 10px;
+  border: 1px solid green;
+}
+.card main {
+  padding: 0.5rem 1rem;
+}
+.card button:hover {
+  background-color: green;
+  color: white;
+  border: 1px solid green;
+}
+.card button {
+  width: 100%;
+  padding: 0.7rem;
+  outline: 0;
+  color: green;
+  background-color: transparent;
+  cursor: pointer;
+  border: 1px solid black;
+  margin: 1rem 0rem;
+  border-radius: 5px;
+  transition: 0.2s all ease-in;
+}
+.card-details p {
+  margin-top: 0px;
+}
+.card-details {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
 }
 
-.read-the-docs {
-  color: #888;
+.index-first-bg {
+  position: absolute;
+  right: -7px;
+  top: -14px;
+  width: 100%;
+}
+
+.main-index {
+  display: flex;
+  position: relative;
+  z-index: 999;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  padding-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.app section,
+.main-index section {
+  position: relative;
+  z-index: 999;
+}
+.title {
+  background: white;
+  margin-top: 4rem;
+  border-radius: 500px;
+  font-size: 2rem;
+  font-family: cursive;
+  width: max-content;
+  padding: 3rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 776eaa0..e93bd5b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,35 +1,79 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
-
+import React from "react";
+import "./App.css";
+import { AiFillStar, AiOutlineStar } from "react-icons/ai";
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <div className="App">
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
+    // <ContextDataProvider>
+    <div className="app">
+      <header>
+        <a className="logo" href="#">
+          shop cart
         </a>
-        <a href="https://reactjs.org" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
+        <a href="#">
+          {/* <AiOutlineShoppingCart className="shop-icon" /> */}
+          <span>2</span>
+        </a>
+      </header>
+
+      {/* Start Content */}
+
+      <section>
+        <p className="title">All Products:</p>
+      </section>
+      <img className="index-first-bg" src="/hero-gradient.svg" alt="" />
+      <main className="main-index">
+        <div className="card">
+          <img
+            src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
+            alt=""
+          />
+          <main>
+            <p>Test Title ...</p>
+            <div className="card-details">
+              <div>
+                <AiOutlineStar style={{ color: "orange" }} />
+                <AiOutlineStar style={{ color: "orange" }} />
+                <AiOutlineStar style={{ color: "orange" }} />
+                <AiOutlineStar style={{ color: "orange" }} />
+                <AiOutlineStar style={{ color: "orange" }} />
+              </div>
+              <p>231$</p>
+            </div>
+            <button>Add to Basket</button>
+          </main>
+        </div>
+        <div className="card">
+          <img
+            src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
+            alt=""
+          />
+          <main>
+            <p>Test Title ...</p>
+            <div className="card-details">
+              <div>
+                <AiFillStar style={{ color: "orange" }} />
+                <AiFillStar style={{ color: "orange" }} />
+                <AiFillStar style={{ color: "orange" }} />
+                <AiFillStar style={{ color: "orange" }} />
+                <AiFillStar style={{ color: "orange" }} />
+              </div>
+              <p>231$</p>
+            </div>
+            <button>Add to Basket</button>
+          </main>
+        </div>
+      </main>
+
+      {/* Finish Content */}
+
+      <footer>
+        <a target={"_blank"}>
+          mohammad
         </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
+      </footer>
     </div>
-  )
+    // </ContextDataProvider>
+  );
 }
 
-export default App
+export default App;
diff --git a/src/Pages/Cart.css b/src/Pages/Cart.css
new file mode 100644
index 0000000..98e0787
--- /dev/null
+++ b/src/Pages/Cart.css
@@ -0,0 +1,239 @@
+.app header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  z-index: 999;
+  position: relative;
+}
+
+.shop-icon {
+  font-size: 1.6rem;
+}
+.app header a {
+  cursor: pointer;
+  position: relative;
+  color: black;
+}
+.app header span {
+  position: absolute;
+  right: -6px;
+  top: 11px;
+  color: white;
+  font-size: 0.7rem;
+  width: 4px;
+  background: green;
+  padding: 0.1rem 0.4rem;
+  border-radius: 14px;
+}
+.app header .logo {
+  font-size: 2rem;
+  text-decoration: none;
+  margin-top: 12px;
+  font-family: cursive;
+}
+
+/* <<<<<<<< end header >>>>>>>> */
+.app {
+  padding: 0rem 2rem;
+  min-height: 97vh;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+.app section {
+  position: relative;
+  z-index: 999;
+}
+/* <<<<<<<< start footer >>>>>>>> */
+.app footer a {
+  text-decoration: none;
+  color: green;
+}
+.app footer {
+  text-align: center;
+  position: fixed;
+  width: 100%;
+  bottom: 0px;
+  z-index: 999;
+  background-color: white;
+  left: 0;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  margin-top: auto;
+  border-top: 1px solid black;
+}
+
+/* <<<<<<<< end footer >>>>>>>> */
+
+/* <<<<<<<<<<< swal >>>>>>>>>>> */
+.swal-footer {
+  text-align: center !important;
+}
+.swal-button--confirm {
+  background-color: green !important;
+}
+
+.swal-button--cancel {
+  background-color: #c3c1c1 !important;
+  color: black !important;
+}
+.swal-title {
+  font-family: cursive;
+  padding-bottom: 31px;
+}
+
+.emptyBasket {
+  margin-top: 2rem;
+  text-align: center;
+}
+.emptyBasket p {
+  margin-left: 2rem;
+  font-size: 1.5rem;
+  font-family: cursive;
+}
+.emptyBasket img {
+  width: 300px;
+  margin: 0rem auto;
+  display: block;
+}
+
+.card-index {
+  display: flex;
+  position: relative;
+  z-index: 999;
+  justify-content: left;
+  flex-wrap: wrap;
+  padding-top: 4rem;
+  margin-bottom: 4rem;
+  gap: 60px;
+}
+.cart-topbar .title {
+  margin-left: 0rem !important;
+}
+.cart-topbar button {
+  background-color: green;
+  color: white;
+  width: 300px;
+  border-radius: 5px;
+  display: flex;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  padding: 0.7rem;
+  border: 1px solid white;
+}
+.cart-topbar {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.delete-icon {
+  font-size: 1.2rem;
+  margin-left: 0.5rem;
+}
+.product-count span {
+  width: 100px;
+  cursor: pointer;
+  text-align: center;
+}
+.product-count p {
+  text-align: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.product-count {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  background-color: rgba(239, 235, 235, 0.542);
+}
+
+.card img {
+  width: 49%;
+  object-fit: contain;
+  /* height: -webkit-fill-available; */
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  width: 200px;
+  height: 200px;
+}
+.card p {
+  font-size: 1.3rem;
+  font-family: cursive;
+}
+.card {
+  width: 300px;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  background-color: white;
+  border-radius: 10px;
+  border: 1px solid green;
+}
+.card main {
+  padding: 0.5rem 1rem;
+}
+.card button:hover {
+  background-color: green;
+  color: white;
+  border: 1px solid green;
+}
+.card button {
+  width: 100%;
+  padding: 0.7rem;
+  outline: 0;
+  color: green;
+  background-color: transparent;
+  cursor: pointer;
+  border: 1px solid black;
+  margin: 1rem 0rem;
+  border-radius: 5px;
+  transition: 0.2s all ease-in;
+}
+.card-details p {
+  margin-top: 0px;
+}
+.card-details {
+  align-items: baseline;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.index-first-bg {
+  position: absolute;
+  right: -7px;
+  top: -14px;
+  width: 100%;
+}
+
+.main-index {
+  display: flex;
+  position: relative;
+  z-index: 999;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  padding-top: 4rem;
+  margin-bottom: 4rem;
+}
+
+.app section,
+.main-index section {
+  position: relative;
+  z-index: 999;
+}
+.title {
+  background: white;
+  margin-top: 4rem;
+  border-radius: 500px;
+  font-size: 2rem;
+  font-family: cursive;
+  width: max-content;
+  padding: 3rem;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+}
diff --git a/src/Pages/Cart.tsx b/src/Pages/Cart.tsx
new file mode 100644
index 0000000..cc9d66e
--- /dev/null
+++ b/src/Pages/Cart.tsx
@@ -0,0 +1,55 @@
+import React, { useContext } from "react";
+import "./Cart.css";
+import { AiFillStar, AiOutlineDelete, AiOutlineStar } from "react-icons/ai";
+export default function Cart() {
+  return (
+    <>
+      {true ? ( // if shoppping cart is not empty
+        <>
+          <section className="cart-topbar">
+            <p className="title">All Products In Basket:</p>
+            <button>
+              Remove All Product <AiOutlineDelete className="delete-icon" />
+            </button>
+          </section>
+          <main className="card-index">
+            <div className="card">
+              <img
+                src="https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg"
+                alt=""
+              />
+              <main>
+                <p>Test Title ...</p>
+                <div className="card-details">
+                  <div>
+                    <AiFillStar style={{ color: "orange" }} />
+                    <AiFillStar style={{ color: "orange" }} />
+                    <AiFillStar style={{ color: "orange" }} />
+                    <AiFillStar style={{ color: "orange" }} />
+                    <AiFillStar style={{ color: "orange" }} />
+
+                    <AiOutlineStar style={{ color: "orange" }} />
+                    <AiOutlineStar style={{ color: "orange" }} />
+                    <AiOutlineStar style={{ color: "orange" }} />
+                    <AiOutlineStar style={{ color: "orange" }} />
+                    <AiOutlineStar style={{ color: "orange" }} />
+                  </div>
+                  <p>111$</p>
+                </div>
+                <div className="product-count">
+                  <p>Count: 22</p>
+                </div>
+                <button>Remove From Basket</button>
+              </main>
+            </div>
+          </main>
+        </>
+      ) : (
+        <div className="emptyBasket">
+          <img src="/empty.webp" alt="" />
+          <p>Your Basket Is Empty :((</p>
+        </div>
+      )}
+    </>
+  );
+}
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 2c3fac6..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,69 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: 100%;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
diff --git a/src/main.tsx b/src/main.tsx
index 791f139..76f0a98 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import Cart from "./Pages/Cart";
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
-)
+    {/* <Cart /> */}
+  </React.StrictMode>
+);