diff --git a/package-lock.json b/package-lock.json
index fd4a83b..d1bf7ca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,9 @@
       "dependencies": {
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-icons": "^4.10.1"
+        "react-icons": "^4.10.1",
+        "react-router-dom": "^6.15.0",
+        "sweetalert": "^2.1.2"
       },
       "devDependencies": {
         "@types/react": "^18.0.28",
@@ -760,6 +762,14 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+      "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.5",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
@@ -939,6 +949,11 @@
       "integrity": "sha512-LF2IQit4B0VrUHFeQkWhZm97KuJSGF2WJqq1InpY+ECpFRkXd8yTIaTtJxsO0OKDmiBYwWqcrNaXOurn2T2wiA==",
       "dev": true
     },
+    "node_modules/es6-object-assign": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es6-object-assign/-/es6-object-assign-1.1.0.tgz",
+      "integrity": "sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw=="
+    },
     "node_modules/esbuild": {
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -1160,6 +1175,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/promise-polyfill": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/promise-polyfill/-/promise-polyfill-6.1.0.tgz",
+      "integrity": "sha512-g0LWaH0gFsxovsU7R5LrrhHhWAWiHRnh1GPrhXnPgYsDkIqjRYUYSZEsej/wtleDrz5xVSIDbeKfidztp2XHFQ=="
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -1200,6 +1220,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+      "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.15.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+      "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+      "dependencies": {
+        "@remix-run/router": "1.8.0",
+        "react-router": "6.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/rollup": {
       "version": "3.28.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
@@ -1254,6 +1304,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/sweetalert": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/sweetalert/-/sweetalert-2.1.2.tgz",
+      "integrity": "sha512-iWx7X4anRBNDa/a+AdTmvAzQtkN1+s4j/JJRWlHpYE8Qimkohs8/XnFcWeYHH2lMA8LRCa5tj2d244If3S/hzA==",
+      "dependencies": {
+        "es6-object-assign": "^1.1.0",
+        "promise-polyfill": "^6.0.2"
+      }
+    },
     "node_modules/to-fast-properties": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
diff --git a/package.json b/package.json
index ae2996c..dedbefd 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.10.1"
+    "react-icons": "^4.10.1",
+    "react-router-dom": "^6.15.0",
+    "sweetalert": "^2.1.2"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
diff --git a/src/App.tsx b/src/App.tsx
index e93bd5b..6e77501 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,22 +1,19 @@
 import React from "react";
+import { AiFillStar, AiOutlineStar, AiOutlineShoppingCart } from "react-icons/ai";
+
+import Headers from "./components/Headers";
 import "./App.css";
-import { AiFillStar, AiOutlineStar } from "react-icons/ai";
+import { useRoutes } from "react-router-dom";
+import routes from "./routes";
 function App() {
+
+  const router = useRoutes(routes);
+
   return (
     // <ContextDataProvider>
     <div className="app">
-      <header>
-        <a className="logo" href="#">
-          shop cart
-        </a>
-        <a href="#">
-          {/* <AiOutlineShoppingCart className="shop-icon" /> */}
-          <span>2</span>
-        </a>
-      </header>
-
       {/* Start Content */}
-
+      <Headers />
       <section>
         <p className="title">All Products:</p>
       </section>
diff --git a/src/components/Headers.tsx b/src/components/Headers.tsx
new file mode 100644
index 0000000..8a6d434
--- /dev/null
+++ b/src/components/Headers.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+
+import { AiOutlineShoppingCart } from 'react-icons/ai'
+
+const Headers = () => {
+  return (
+    <header>
+      <a className="logo" href="#">
+        shop cart
+      </a>
+      <a href="#">
+        <AiOutlineShoppingCart className="shop-icon" />
+        <span>2</span>
+      </a>
+    </header>
+  )
+}
+
+export default Headers
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 0000000..cfb156d
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,9 @@
+import App from "./App";
+import Cart from "./Pages/Cart";
+
+const routes = [
+    { path: "/", element: <App /> },
+    { path: "/cart", element: <Cart /> }
+];
+
+export default routes;
\ No newline at end of file