diff --git a/src/App.tsx b/src/App.tsx
index 6e77501..7f63f04 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { AiFillStar, AiOutlineStar, AiOutlineShoppingCart } from "react-icons/ai";
 
 import Headers from "./components/Headers";
+import Home from "./Pages/home/Home";
 import "./App.css";
 import { useRoutes } from "react-router-dom";
 import routes from "./routes";
@@ -14,52 +15,7 @@ function App() {
     <div className="app">
       {/* Start Content */}
       <Headers />
-      <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>
+      {router}
 
       {/* Finish Content */}
 
diff --git a/src/Pages/home/Home.tsx b/src/Pages/home/Home.tsx
new file mode 100644
index 0000000..34de71a
--- /dev/null
+++ b/src/Pages/home/Home.tsx
@@ -0,0 +1,57 @@
+import React from 'react'
+import { AiFillStar, AiOutlineStar } from 'react-icons/ai'
+
+const Home = () => {
+  return (
+    <>
+      <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>
+    </>
+  )
+}
+
+export default Home
diff --git a/src/components/Headers.tsx b/src/components/Headers.tsx
index 8a6d434..26e9c1d 100644
--- a/src/components/Headers.tsx
+++ b/src/components/Headers.tsx
@@ -1,17 +1,18 @@
 import React from 'react'
 
-import { AiOutlineShoppingCart } from 'react-icons/ai'
+import { AiOutlineShoppingCart } from 'react-icons/ai';
+import { Link } from "react-router-dom";
 
 const Headers = () => {
   return (
     <header>
-      <a className="logo" href="#">
+      <Link className="logo" to="/">
         shop cart
-      </a>
-      <a href="#">
+      </Link>
+      <Link to="/cart">
         <AiOutlineShoppingCart className="shop-icon" />
         <span>2</span>
-      </a>
+      </Link>
     </header>
   )
 }
diff --git a/src/main.tsx b/src/main.tsx
index 76f0a98..3738ebe 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,14 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
-import Cart from "./Pages/Cart";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import { BrowserRouter } from 'react-router-dom'
+import Cart from './Pages/Cart'
 
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
     {/* <Cart /> */}
-  </React.StrictMode>
-);
+  </React.StrictMode>,
+)
diff --git a/src/routes.tsx b/src/routes.tsx
index cfb156d..b12c3be 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -1,8 +1,9 @@
-import App from "./App";
+import React from "react";
 import Cart from "./Pages/Cart";
+import Home from "./Pages/home/Home";
 
 const routes = [
-    { path: "/", element: <App /> },
+    { path: "/", element: <Home /> },
     { path: "/cart", element: <Cart /> }
 ];