diff --git a/.gitignore b/client/.gitignore
similarity index 100%
rename from .gitignore
rename to client/.gitignore
diff --git a/README.md b/client/README.md
similarity index 100%
rename from README.md
rename to client/README.md
diff --git a/eslint.config.mjs b/client/eslint.config.mjs
similarity index 100%
rename from eslint.config.mjs
rename to client/eslint.config.mjs
diff --git a/next.config.ts b/client/next.config.ts
similarity index 100%
rename from next.config.ts
rename to client/next.config.ts
diff --git a/package.json b/client/package.json
similarity index 78%
rename from package.json
rename to client/package.json
index 6f968124..3bf97afc 100644
--- a/package.json
+++ b/client/package.json
@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "lucide-react": "^0.544.0",
+    "next": "15.4.5",
     "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "next": "15.4.5"
+    "react-dom": "19.1.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.4.5",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/pnpm-lock.yaml b/client/pnpm-lock.yaml
similarity index 99%
rename from pnpm-lock.yaml
rename to client/pnpm-lock.yaml
index fbeef25e..27fbd1b5 100644
--- a/pnpm-lock.yaml
+++ b/client/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      lucide-react:
+        specifier: ^0.544.0
+        version: 0.544.0(react@19.1.0)
       next:
         specifier: 15.4.5
         version: 15.4.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1347,6 +1350,11 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lucide-react@0.544.0:
+    resolution: {integrity: sha512-t5tS44bqd825zAW45UQxpG2CvcC4urOwn2TrwSH8u+MjeE+1NnWl6QqeQ/6NdjMqdOygyiT9p3Ev0p1NJykxjw==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   magic-string@0.30.17:
     resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==}
 
@@ -3200,6 +3208,10 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lucide-react@0.544.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.4
diff --git a/postcss.config.mjs b/client/postcss.config.mjs
similarity index 100%
rename from postcss.config.mjs
rename to client/postcss.config.mjs
diff --git a/public/cards.png b/client/public/cards.png
similarity index 100%
rename from public/cards.png
rename to client/public/cards.png
diff --git a/public/featured.png b/client/public/featured.png
similarity index 100%
rename from public/featured.png
rename to client/public/featured.png
diff --git a/client/public/grand_seiko_banner.webp b/client/public/grand_seiko_banner.webp
new file mode 100644
index 00000000..0f916369
Binary files /dev/null and b/client/public/grand_seiko_banner.webp differ
diff --git a/public/klarna.png b/client/public/klarna.png
similarity index 100%
rename from public/klarna.png
rename to client/public/klarna.png
diff --git a/public/logo.png b/client/public/logo.png
similarity index 100%
rename from public/logo.png
rename to client/public/logo.png
diff --git a/public/products/1g.png b/client/public/products/1g.png
similarity index 100%
rename from public/products/1g.png
rename to client/public/products/1g.png
diff --git a/public/products/1gr.png b/client/public/products/1gr.png
similarity index 100%
rename from public/products/1gr.png
rename to client/public/products/1gr.png
diff --git a/public/products/1p.png b/client/public/products/1p.png
similarity index 100%
rename from public/products/1p.png
rename to client/public/products/1p.png
diff --git a/public/products/2g.png b/client/public/products/2g.png
similarity index 100%
rename from public/products/2g.png
rename to client/public/products/2g.png
diff --git a/public/products/2gr.png b/client/public/products/2gr.png
similarity index 100%
rename from public/products/2gr.png
rename to client/public/products/2gr.png
diff --git a/public/products/3b.png b/client/public/products/3b.png
similarity index 100%
rename from public/products/3b.png
rename to client/public/products/3b.png
diff --git a/public/products/3bl.png b/client/public/products/3bl.png
similarity index 100%
rename from public/products/3bl.png
rename to client/public/products/3bl.png
diff --git a/public/products/3gr.png b/client/public/products/3gr.png
similarity index 100%
rename from public/products/3gr.png
rename to client/public/products/3gr.png
diff --git a/public/products/4p.png b/client/public/products/4p.png
similarity index 100%
rename from public/products/4p.png
rename to client/public/products/4p.png
diff --git a/public/products/4w.png b/client/public/products/4w.png
similarity index 100%
rename from public/products/4w.png
rename to client/public/products/4w.png
diff --git a/public/products/5bl.png b/client/public/products/5bl.png
similarity index 100%
rename from public/products/5bl.png
rename to client/public/products/5bl.png
diff --git a/public/products/5o.png b/client/public/products/5o.png
similarity index 100%
rename from public/products/5o.png
rename to client/public/products/5o.png
diff --git a/public/products/5r.png b/client/public/products/5r.png
similarity index 100%
rename from public/products/5r.png
rename to client/public/products/5r.png
diff --git a/public/products/6g.png b/client/public/products/6g.png
similarity index 100%
rename from public/products/6g.png
rename to client/public/products/6g.png
diff --git a/public/products/6w.png b/client/public/products/6w.png
similarity index 100%
rename from public/products/6w.png
rename to client/public/products/6w.png
diff --git a/public/products/7g.png b/client/public/products/7g.png
similarity index 100%
rename from public/products/7g.png
rename to client/public/products/7g.png
diff --git a/public/products/7p.png b/client/public/products/7p.png
similarity index 100%
rename from public/products/7p.png
rename to client/public/products/7p.png
diff --git a/public/products/8b.png b/client/public/products/8b.png
similarity index 100%
rename from public/products/8b.png
rename to client/public/products/8b.png
diff --git a/public/products/8gr.png b/client/public/products/8gr.png
similarity index 100%
rename from public/products/8gr.png
rename to client/public/products/8gr.png
diff --git a/public/stripe.png b/client/public/stripe.png
similarity index 100%
rename from public/stripe.png
rename to client/public/stripe.png
diff --git a/src/app/favicon.ico b/client/src/app/favicon.ico
similarity index 100%
rename from src/app/favicon.ico
rename to client/src/app/favicon.ico
diff --git a/src/app/globals.css b/client/src/app/globals.css
similarity index 100%
rename from src/app/globals.css
rename to client/src/app/globals.css
diff --git a/src/app/layout.tsx b/client/src/app/layout.tsx
similarity index 72%
rename from src/app/layout.tsx
rename to client/src/app/layout.tsx
index f7fa87eb..21b0c2e6 100644
--- a/src/app/layout.tsx
+++ b/client/src/app/layout.tsx
@@ -1,6 +1,8 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,7 +29,11 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <div className="mx-auto p-4 sm:max-w-xl md:max-w-2xl lg:max-w-3xl xl:max-w-6xl">
+          <Navbar />
+          {children}
+          <Footer />
+        </div>
       </body>
     </html>
   );
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
new file mode 100644
index 00000000..60469335
--- /dev/null
+++ b/client/src/app/page.tsx
@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+const Homepage = () => {
+  return (
+    <div className="">
+      <div className="relative aspect-[3/1]">
+        <Image
+          src="/grand_seiko_banner.webp"
+          alt="ساعت گرند سیکو"
+          fill
+          className="object-cover -"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Homepage;
diff --git a/client/src/components/Footer.tsx b/client/src/components/Footer.tsx
new file mode 100644
index 00000000..84c25980
--- /dev/null
+++ b/client/src/components/Footer.tsx
@@ -0,0 +1,48 @@
+import { Watch } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+const Footer = () => {
+  return (
+    <div className="mt-16 flex flex-col items-center gap-8 md:gap-0 md:flex-row md:items-start md:justify-between bg-gray-800 p-8 rounded-lg">
+      <div className="flex flex-col gap-4 items-center md:items-start">
+        <Link href={"/"} className="flex items-center text-white">
+          <Watch
+            width={36}
+            height={36}
+            className="
+        w-6 h-6 md:w-9 md:h-9"
+          />
+          <p className="hidden md:block font-medium text-md tracking-wider">
+            SilverWatch
+          </p>
+        </Link>
+        <p className="text-sm text-gray-400">© 2025 Alikhanix</p>
+        <p className="text-sm text-gray-400">All rights reserved</p>
+      </div>
+      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
+        <p className="text-sm text-amber-50">Links</p>
+        <Link href={"/"}>Homepage</Link>
+        <Link href={"/"}>Contact</Link>
+        <Link href={"/"}>Terms of Service</Link>
+        <Link href={"/"}>Privacy policy</Link>
+      </div>
+      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
+        <p className="text-sm text-amber-50">Links</p>
+        <Link href={"/"}>Homepage</Link>
+        <Link href={"/"}>Contact</Link>
+        <Link href={"/"}>Terms of Service</Link>
+        <Link href={"/"}>Privacy policy</Link>
+      </div>
+      <div className="flex flex-col gap-4 text-sm text-gray-400 items-center md:items-start">
+        <p className="text-sm text-amber-50">Links</p>
+        <Link href={"/"}>Homepage</Link>
+        <Link href={"/"}>Contact</Link>
+        <Link href={"/"}>Terms of Service</Link>
+        <Link href={"/"}>Privacy policy</Link>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
new file mode 100644
index 00000000..0f845b04
--- /dev/null
+++ b/client/src/components/Navbar.tsx
@@ -0,0 +1,48 @@
+import Image from "next/image";
+import Link from "next/link";
+import SearchBar from "./SearchBar";
+import { Bell, Home, ShoppingCart, Watch } from "lucide-react";
+
+const Navbar = () => {
+  return (
+    <nav className="w-full flex justify-between items-center border-b border-gray-200 pb-4">
+      {/* Left */}
+      <Link href={"/"} className="flex items-center">
+        {/* <Image
+          src={"/logo.png"}
+          alt="Trend Lama"
+          width={36}
+          height={36}
+          className="w-6 h-6 md:w-9 md:h-9"
+        /> */}
+        <Watch
+          width={36}
+          height={36}
+          className="
+        w-6 h-6 md:w-9 md:h-9"
+        />
+        <p className="hidden md:block font-medium text-md tracking-wider">
+          SilverWatch
+        </p>
+      </Link>
+
+      {/* Right */}
+      <div className="flex items-center gap-6">
+        <SearchBar />
+        <Link href={"/"}>
+          <Home className="w-4 h-4 text-gray-600" />
+        </Link>
+        <Link href={"/"}>
+          <Bell className="w-4 h-4 text-gray-600" />
+        </Link>
+        <Link href={"/"}>
+          <ShoppingCart className="w-4 h-4 text-gray-600" />
+        </Link>
+
+        <Link href={"/login"}>Sign In</Link>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/client/src/components/ProductList.tsx b/client/src/components/ProductList.tsx
new file mode 100644
index 00000000..6e538928
--- /dev/null
+++ b/client/src/components/ProductList.tsx
@@ -0,0 +1,117 @@
+// TEMPORARY
+const products = [
+  {
+    id: 1,
+    name: "Adidas CoreFit T-Shirt",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 39.9,
+    sizes: ["s", "m", "l", "xl", "xxl"],
+    colors: ["gray", "purple", "green"],
+    images: {
+      gray: "/products/1g.png",
+      purple: "/products/1p.png",
+      green: "/products/1gr.png",
+    },
+  },
+  {
+    id: 2,
+    name: "Puma Ultra Warm Zip",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 59.9,
+    sizes: ["s", "m", "l", "xl"],
+    colors: ["gray", "green"],
+    images: { gray: "/products/2g.png", green: "/products/2gr.png" },
+  },
+  {
+    id: 3,
+    name: "Nike Air Essentials Pullover",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 69.9,
+    sizes: ["s", "m", "l"],
+    colors: ["green", "blue", "black"],
+    images: {
+      green: "/products/3gr.png",
+      blue: "/products/3b.png",
+      black: "/products/3bl.png",
+    },
+  },
+  {
+    id: 4,
+    name: "Nike Dri Flex T-Shirt",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 29.9,
+    sizes: ["s", "m", "l"],
+    colors: ["white", "pink"],
+    images: { white: "/products/4w.png", pink: "/products/4p.png" },
+  },
+  {
+    id: 5,
+    name: "Under Armour StormFleece",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 49.9,
+    sizes: ["s", "m", "l"],
+    colors: ["red", "orange", "black"],
+    images: {
+      red: "/products/5r.png",
+      orange: "/products/5o.png",
+      black: "/products/5bl.png",
+    },
+  },
+  {
+    id: 6,
+    name: "Nike Air Max 270",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 59.9,
+    sizes: ["40", "42", "43", "44"],
+    colors: ["gray", "white"],
+    images: { gray: "/products/6g.png", white: "/products/6w.png" },
+  },
+  {
+    id: 7,
+    name: "Nike Ultraboost Pulse ",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 69.9,
+    sizes: ["40", "42", "43"],
+    colors: ["gray", "pink"],
+    images: { gray: "/products/7g.png", pink: "/products/7p.png" },
+  },
+  {
+    id: 8,
+    name: "Levi’s Classic Denim",
+    shortDescription:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    description:
+      "Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit. Lorem ipsum dolor sit amet consect adipisicing elit lorem ipsum dolor sit.",
+    price: 59.9,
+    sizes: ["s", "m", "l"],
+    colors: ["blue", "green"],
+    images: { blue: "/products/8b.png", green: "/products/8gr.png" },
+  },
+];
+
+const ProductList = () => {
+  return <div>ProductList</div>;
+};
+
+export default ProductList;
diff --git a/client/src/components/SearchBar.tsx b/client/src/components/SearchBar.tsx
new file mode 100644
index 00000000..4d555405
--- /dev/null
+++ b/client/src/components/SearchBar.tsx
@@ -0,0 +1,16 @@
+import { Search } from "lucide-react";
+
+const SearchBar = () => {
+  return (
+    <div className="hidden sm:flex items-center gap-2 rounded-md ring-1 ring-gray-200 px-2 py-1 shadow-md">
+      <Search className="w-4 h-4 text-gray-500" />
+      <input
+        id="search"
+        placeholder="Search..."
+        className="text-sm outline-0"
+      />
+    </div>
+  );
+};
+
+export default SearchBar;
diff --git a/tsconfig.json b/client/tsconfig.json
similarity index 100%
rename from tsconfig.json
rename to client/tsconfig.json
diff --git a/src/app/page.tsx b/src/app/page.tsx
deleted file mode 100644
index 3d365a49..00000000
--- a/src/app/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-const Homepage = () => {
-  return (
-    <div className=''>Homepage</div>
-  )
-}
-
-export default Homepage
\ No newline at end of file