diff --git a/package.json b/package.json
index 6f968124..28ed9084 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@hookform/resolvers": "^5.2.1",
+    "lucide-react": "^0.541.0",
+    "next": "15.4.5",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "next": "15.4.5"
+    "react-hook-form": "^7.62.0",
+    "react-toastify": "^11.0.5",
+    "zod": "^4.1.5",
+    "zustand": "^5.0.8"
   },
   "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/pnpm-lock.yaml
index fbeef25e..be788fa5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,12 @@ importers:
 
   .:
     dependencies:
+      '@hookform/resolvers':
+        specifier: ^5.2.1
+        version: 5.2.1(react-hook-form@7.62.0(react@19.1.0))
+      lucide-react:
+        specifier: ^0.541.0
+        version: 0.541.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)
@@ -17,6 +23,18 @@ importers:
       react-dom:
         specifier: 19.1.0
         version: 19.1.0(react@19.1.0)
+      react-hook-form:
+        specifier: ^7.62.0
+        version: 7.62.0(react@19.1.0)
+      react-toastify:
+        specifier: ^11.0.5
+        version: 11.0.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      zod:
+        specifier: ^4.1.5
+        version: 4.1.5
+      zustand:
+        specifier: ^5.0.8
+        version: 5.0.8(@types/react@19.1.9)(react@19.1.0)
     devDependencies:
       '@eslint/eslintrc':
         specifier: ^3
@@ -103,6 +121,11 @@ packages:
     resolution: {integrity: sha512-Ul5l+lHEcw3L5+k8POx6r74mxEYKG5kOb6Xpy2gCRW6zweT6TEhAf8vhxGgjhqrd/VO/Dirhsb+1hNpD1ue9hw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@hookform/resolvers@5.2.1':
+    resolution: {integrity: sha512-u0+6X58gkjMcxur1wRWokA7XsiiBJ6aK17aPZxhkoYiK5J+HcTx0Vhu9ovXe6H+dVpO6cjrn2FkJTryXEMlryQ==}
+    peerDependencies:
+      react-hook-form: ^7.55.0
+
   '@humanfs/core@0.19.1':
     resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
     engines: {node: '>=18.18.0'}
@@ -341,6 +364,9 @@ packages:
   '@rushstack/eslint-patch@1.12.0':
     resolution: {integrity: sha512-5EwMtOqvJMMa3HbmxLlF74e+3/HhwBTMcvt3nqVJgGCozO6hzIPOBlwm8mGVNR9SN2IJpxSnlxczyDjcn7qIyw==}
 
+  '@standard-schema/utils@0.3.0':
+    resolution: {integrity: sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==}
+
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
@@ -727,6 +753,10 @@ packages:
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
@@ -1347,6 +1377,11 @@ packages:
     resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
     hasBin: true
 
+  lucide-react@0.541.0:
+    resolution: {integrity: sha512-s0Vircsu5WaGv2KoJZ5+SoxiAJ3UXV5KqEM3eIFDHaHkcLIFdIWgXtZ412+Gh02UsdS7Was+jvEpBvPCWQISlg==}
+    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==}
 
@@ -1527,9 +1562,21 @@ packages:
     peerDependencies:
       react: ^19.1.0
 
+  react-hook-form@7.62.0:
+    resolution: {integrity: sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==}
+    engines: {node: '>=18.0.0'}
+    peerDependencies:
+      react: ^16.8.0 || ^17 || ^18 || ^19
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
+  react-toastify@11.0.5:
+    resolution: {integrity: sha512-EpqHBGvnSTtHYhCPLxML05NLY2ZX0JURbAdNYa6BUkk+amz4wbKBQvoKQAB0ardvSarUBuY4Q4s1sluAzZwkmA==}
+    peerDependencies:
+      react: ^18 || ^19
+      react-dom: ^18 || ^19
+
   react@19.1.0:
     resolution: {integrity: sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==}
     engines: {node: '>=0.10.0'}
@@ -1797,6 +1844,27 @@ packages:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
 
+  zod@4.1.5:
+    resolution: {integrity: sha512-rcUUZqlLJgBC33IT3PNMgsCq6TzLQEG/Ei/KTCU0PedSWRMAXoOUN+4t/0H+Q8bdnLPdqUYnvboJT0bn/229qg==}
+
+  zustand@5.0.8:
+    resolution: {integrity: sha512-gyPKpIaxY9XcO2vSMrLbiER7QMAMGOQZVRdJ6Zi782jkbzZygq5GI9nG8g+sMgitRtndwaBSl7uiqC49o1SSiw==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
 snapshots:
 
   '@alloc/quick-lru@5.2.0': {}
@@ -1866,6 +1934,11 @@ snapshots:
       '@eslint/core': 0.15.1
       levn: 0.4.1
 
+  '@hookform/resolvers@5.2.1(react-hook-form@7.62.0(react@19.1.0))':
+    dependencies:
+      '@standard-schema/utils': 0.3.0
+      react-hook-form: 7.62.0(react@19.1.0)
+
   '@humanfs/core@0.19.1': {}
 
   '@humanfs/node@0.16.6':
@@ -2038,6 +2111,8 @@ snapshots:
 
   '@rushstack/eslint-patch@1.12.0': {}
 
+  '@standard-schema/utils@0.3.0': {}
+
   '@swc/helpers@0.5.15':
     dependencies:
       tslib: 2.8.1
@@ -2434,6 +2509,8 @@ snapshots:
 
   client-only@0.0.1: {}
 
+  clsx@2.1.1: {}
+
   color-convert@2.0.1:
     dependencies:
       color-name: 1.1.4
@@ -3200,6 +3277,10 @@ snapshots:
     dependencies:
       js-tokens: 4.0.0
 
+  lucide-react@0.541.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   magic-string@0.30.17:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.4
@@ -3374,8 +3455,18 @@ snapshots:
       react: 19.1.0
       scheduler: 0.26.0
 
+  react-hook-form@7.62.0(react@19.1.0):
+    dependencies:
+      react: 19.1.0
+
   react-is@16.13.1: {}
 
+  react-toastify@11.0.5(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      clsx: 2.1.1
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   react@19.1.0: {}
 
   reflect.getprototypeof@1.0.10:
@@ -3771,3 +3862,10 @@ snapshots:
   yallist@5.0.0: {}
 
   yocto-queue@0.1.0: {}
+
+  zod@4.1.5: {}
+
+  zustand@5.0.8(@types/react@19.1.9)(react@19.1.0):
+    optionalDependencies:
+      '@types/react': 19.1.9
+      react: 19.1.0
diff --git a/src/app/cart/page.tsx b/src/app/cart/page.tsx
new file mode 100644
index 00000000..26b7ee70
--- /dev/null
+++ b/src/app/cart/page.tsx
@@ -0,0 +1,193 @@
+"use client"
+
+import PaymentForm from "@/components/PaymentForm"
+import ShippingForm from "@/components/ShippinForm"
+import useCartStore from "@/stores/cartStore"
+import { CartItemsType, shippingFormInputs } from "@/types"
+import { ArrowRight, Trash2 } from "lucide-react"
+import Image from "next/image"
+import { useRouter, useSearchParams } from "next/navigation"
+import { useState } from "react"
+
+const steps =[
+    {id:1,
+    title:"Shipping Cart"
+    },
+    {id:2,
+    title:"Shipping Address"
+    },
+    {id:3,
+    title:"Shipping Method"
+    }
+]
+
+
+// const cartItems:CartItemsType =[
+//     {
+//         id:1,
+//         name:"Product 1",
+//         shortDescription:"This is product 1",
+//         description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+//         price:9.99,
+//         sizes:["S","M","L","XL"],
+//         colors:["gray","purple","green"],
+//         images:{
+//             gray:"/products/1g.png",
+//             purple:"/products/1p.png",
+//             green:"/products/1gr.png"
+//         },
+//         quantity:1,
+//         selectedSize:"M",
+//         selectedColor:"gray"
+//     },
+
+//     {
+//         id:2,
+//         name:"Product 2",
+//         shortDescription:"This is product 2",
+//         description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+//         price:19.99,
+//         sizes:["S","M","L","XL"],
+//         colors:["gray","green"],
+//         images:{
+//             gray:"/products/2g.png",
+//             green:"/products/2gr.png"
+//         },
+//         quantity:3,
+//         selectedSize:"L",
+//         selectedColor:"green"
+//     },
+
+//     {
+//         id:3,
+//         name:"Product 3",
+//         shortDescription:"This is product 3",
+//         description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+//         price:29.99,
+//         sizes:["S","M","L","XL"],
+//         colors:["green","black","blue"],
+//         images:{
+//             green:"/products/3gr.png",
+//             black:"/products/3bl.png",
+//             blue:"/products/3b.png"
+//         },
+//         quantity:1,
+//         selectedSize:"XL",
+//         selectedColor:"black"
+//     },
+// ]
+
+const CartPage =() =>{
+    const searchParams = useSearchParams()
+    const router = useRouter()
+    const [shippingForm,setShippingForm] = useState<shippingFormInputs>()
+
+    const activeStep = parseInt(searchParams.get("step")|| "1")
+
+    const {cart, removeFromCart} = useCartStore();
+    return(
+        <div className="flex flex-col gap-4 items-center justify-center mt-12">
+            {/* title */}
+            <h1 className="text-2xl font-medium">Your Shopping Cart</h1>
+            {/* steps */}
+            <div className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
+                {steps.map(step=>(
+                    <div className={`flex items-center gap-2 border-b-2 pb-4 ${
+                        step.id ===activeStep ? "border-gray-800": "border-gray-400"
+                    }`} key={step.id}>
+                        <div className={`w-4 h-4 rounded-full text-white p-4 flex items-center justify-center ${
+                            step.id === activeStep ? "bg-gray-800": "bg-gray-400"
+                        }`}>{step.id}
+                        </div>
+                        <p className={`text-sm font-medium ${
+                            step.id === activeStep ? "text-gray-800": "text-gray-400"   
+                        }`}>
+                            {step.title}
+                        </p>
+                    </div>   
+                ))}
+
+            </div>
+            {/* steps and details */}
+            <div className="flex flex-col lg:flex-row gap-8 lg:gap-16 w-full">
+                {/* steps */}
+                <div className="w-full lg:w-7/12 flex flex-col gap-8 shadow-lg border-1 border-gray-100 rounded-lg p-4">
+                    {activeStep===1 ? (
+                        cart.map((item)=>(
+                            //Single Cart Item
+                            <div className ="flex items-center justify-between"
+                            key={item.id+item.selectedColor+item.selectedSize}>
+                                {/* Image and details */}
+                                <div className="flex gap-8">
+                                    {/* Image */}
+                                    <div className="relative w-32 h-32 bg-gray-50 roulg overflow-hidden">
+                                        <Image src={item.images[item.selectedColor]} alt={item.name} fill className="w-24 h-24 object-contain"/>
+                                    </div>
+                                    {/* item details */}
+                                    <div className="flex flex-col justify-between">
+                                        <div className="flex flex-col gap-1">
+                                            <p className="text-sm font-medium">{item.name}</p>
+                                            <p className="text-sm text-gray-500">Quantity: {" "}{item.quantity}</p>
+                                            <p className="text-sm text-gray-500">Size: {item.selectedSize}</p>
+                                            <p className="text-sm text-gray-500">Color: {item.selectedColor}</p>
+
+                                        </div>
+                                        <p className="font-medium">${item.price.toFixed(2)}</p>
+
+                                    </div>
+                                    
+                                </div>
+                                {/* delete button */}
+                                <button onClick={()=>removeFromCart(item)} className="w-8 h-8 bg-red-100 rounded-full hover:bg-red-200 transition-all duration-300 text-red-400 flex items-center justify-center">
+                                    <Trash2 className="w-3 h-3" />
+                                </button>
+                            </div>
+                        ))
+                    ):
+                    activeStep===2 ?(<ShippingForm setShippingForm={setShippingForm} />):
+                    activeStep===3 && shippingForm? (<PaymentForm/>):
+                    (<p className="text-sm text-gray-500">Please fill the shipping form to continue</p>)}
+                </div>
+                {/* details */}
+                <div className="w-full lg:w-5/12 flex flex-col gap-8 shadow-lg border-1 border-gray-100 rounded-lg h-max p-4">
+                    <h2 className="font-semibold">Cart Details</h2>
+                    <div className="flex flex-col gap-4">
+                        <div className="flex justify-between text-sm">
+                            <p className=" text-gray-500">Subtotal</p>
+                            <p className="font-medium">
+                                ${cart.reduce((acc,item)=> acc + item.price*item.quantity,0).toFixed(2)}
+                            </p>
+                        </div>
+                        <div className="flex justify-between text-sm">
+                            <p className=" text-gray-500">Discount (10%)</p>
+                            <p className="font-medium"> $10</p>
+                               
+                        </div>
+                        <div className="flex justify-between text-sm">
+                            <p className=" text-gray-500">Shipping Fee</p>
+                            <p className="font-medium"> $10</p>
+                               
+                        </div>
+                        <hr className=" border-gray-200" />
+                        <div className="flex justify-between">
+                            <p className=" text-gray-800 font-semibold">Total</p>
+                            <p className="font-medium"> ${cart.reduce((acc,item)=> acc + item.price*item.quantity,0).toFixed(2)
+                            }
+                            </p>
+                               
+                        </div>
+                    </div>
+                    {activeStep===1 &&
+                    <button 
+                    onClick={()=>router.push("/cart?step=2")}
+                    className="w-full bg-gray-800 hover:bg-gray-900 transition-all duration-300 text-white flex items-center justify-center gap-2 rounded-lg p-2 cursor-pointer">
+                        Continue
+                        <ArrowRight className="w-3 h-3"/>
+                    </button>}
+                </div>
+            </div>
+        </div>
+    )
+}
+ 
+export default CartPage;
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87eb..cdea476c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,9 @@
 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";
+import { ToastContainer } from "react-toastify";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -13,8 +16,8 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Zeinab Store - the best clothes",
+  description: "the best place to find high quality clothes",
 };
 
 export default function RootLayout({
@@ -27,7 +30,12 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <div className="mx-auto p-4 sm:px-0 sm:max-w-xl md:max-w-2xl xl:max-w-6xl">
+          <Navbar />
+          {children}
+          <Footer/>
+        </div>
+        <ToastContainer position="bottom-right"/>
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3d365a49..72eb6271 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,18 @@
-const Homepage = () => {
+import ProductList from "@/components/ProductList"
+import Image from "next/image"
+
+const Homepage = async({searchParams}:{searchParams:Promise<{category:string}>;}) => {
+  
+  const category = (await searchParams).category;
   return (
-    <div className=''>Homepage</div>
+    
+    <div className="">
+      
+      <div className="aspect-[3/1] mb-12 relative">
+        <Image src="/featured.png" alt="featured" fill />
+      </div>
+      <ProductList category={category} params="homePage" />
+    </div>
   )
 }
 
diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
new file mode 100644
index 00000000..26b8d072
--- /dev/null
+++ b/src/app/products/[id]/page.tsx
@@ -0,0 +1,72 @@
+import ProductInteraction from "@/components/ProductInteraction";
+import { ProductType } from "@/types";
+import Image from "next/image";
+import { title } from "process";
+
+
+//Temporary data
+const product : ProductType ={
+        id:1,
+        name:"Product 1",
+        shortDescription:"This is product 1",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:9.99,
+        sizes:["S","M","L","XL"],
+        colors:["gray","purple","green"],
+        images:{
+            gray:"/products/1g.png",
+            purple:"/products/1p.png",
+            green:"/products/1gr.png"
+        },
+}
+
+export const generateMetadata = async ({params}:{params: {id:string}})=>{
+    //todo: fetch product data from database
+    //temporary
+    return{
+        title: product.name,
+        description:product.description,
+    }
+}
+
+const ProductPage = async ({param, searchParams}:{param: Promise<{id:string}> ;searchParams:Promise<{color:string ; size:string}>})=>{
+
+    const {size, color} = await searchParams
+
+    const selectedSize = (size || product.sizes[0] as string)
+    const selectedColor = (color || product.colors[0] as string)
+    return (
+        <div className="flex flex-col gap-4 lg:flex-row md:gap-12 mt-12">
+            {/* Image */}
+            <div className="w-full lg:w-5/12 relative aspect-[2/3]">
+                <Image src={product.images[selectedColor]} alt={product.name} fill className="object-contain rounded-md"/>
+            </div>
+            {/* Details */}
+            <div className="w-full lg:w-7/12 flex flex-col gap-4">
+                <h1 className="text-2xl font-medium">{product.name}</h1>
+                <p className="text-gray-500">{product.description}</p>
+                <h2 className="text-2xl font-semibold">${product.price.toFixed(2)}</h2>
+
+                <ProductInteraction product={product} selectedSize={selectedSize} selectedColor={selectedColor} />
+
+                {/* Card Info */}
+                <div className="flex items-center gap-2 mt-4">
+                    <Image src="/klarna.png" alt="klarna" width={50} height={25} className="rounded-md"/>
+                          <Image src="/cards.png" alt="cards" width={50} height={25} className="rounded-md"/>
+                          <Image src="/stripe.png" alt="stripe" width={50} height={25} className="rounded-md"/>
+                </div>
+
+                <p className="text-gray-500 text-xs">
+                    by completing your purchase you agree to our Terms of 
+                    Service and Privacy Policy 
+                    you authorize us to charge your card or other payment method 
+                    for this purchase and future purchases according to our terms. 
+                    You agree that you are responsible for any additional fees 
+                    imposed by your bank or card issuer.
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default ProductPage;
\ No newline at end of file
diff --git a/src/app/products/page.tsx b/src/app/products/page.tsx
new file mode 100644
index 00000000..486f83ee
--- /dev/null
+++ b/src/app/products/page.tsx
@@ -0,0 +1,13 @@
+import ProductList from "@/components/ProductList"
+
+const ProductsPage = async({searchParams}:{searchParams:Promise<{category:string}>}) =>{
+    
+    const category = (await searchParams).category;
+    return (
+        <div>
+            <ProductList category={category} params="products" />
+        </div>
+    )
+
+}
+export default ProductsPage
\ No newline at end of file
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
new file mode 100644
index 00000000..27aebc1c
--- /dev/null
+++ b/src/components/Categories.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { Briefcase, Footprints, Glasses, Hand, Shirt, ShoppingBasket, Venus } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+const categories = [
+  {
+    name: "All",
+    icon: <ShoppingBasket className="w-4 h-4" />,
+    slug: "all",
+  },
+  {
+    name: "T-shirts",
+    icon: <Shirt className="w-4 h-4" />,
+    slug: "t-shirts",
+  },
+  {
+    name: "Shoes",
+    icon: <Footprints className="w-4 h-4" />,
+    slug: "shoes",
+  },
+  {
+    name: "Accessories",
+    icon: <Glasses className="w-4 h-4" />,
+    slug: "accessories",
+  },
+  {
+    name: "Bags",
+    icon: <Briefcase className="w-4 h-4" />,
+    slug: "bags",
+  },
+  {
+    name: "Dresses",
+    icon: <Venus className="w-4 h-4" />,
+    slug: "dresses",
+  },
+  {
+    name: "Jackets",
+    icon: <Shirt className="w-4 h-4" />,
+    slug: "jackets",
+  },
+  {
+    name: "Gloves",
+    icon: <Hand className="w-4 h-4" />,
+    slug: "gloves",
+  },
+];
+
+
+
+const Categories = () => {
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const selectedCategory = searchParams.get("category");
+    const handleChange = (value:string |null)=>{
+        const params = new URLSearchParams(searchParams);
+        params.set("category",value || "all");
+        router.push(`${pathname}?${params.toString()}` , {scroll:false} )
+    }
+
+
+  return <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2 bg-gray-100 p-2 mb-4 text-sm rounded-lg">
+    {categories.map(category=>(
+        <div className={`flex items-center justify-center gap-2 cursor-pointer px-2 py-1 rounded-md ${category.slug===selectedCategory ? "bg-white": "text-gray-500"}`}
+        key={category.name}
+        onClick={()=>handleChange(category.slug)}
+        >
+            {category.icon}
+            {category.name}
+        </div>
+
+
+    ))}
+  </div>
+}
+export default Categories
\ No newline at end of file
diff --git a/src/components/Filter.tsx b/src/components/Filter.tsx
new file mode 100644
index 00000000..238c1f75
--- /dev/null
+++ b/src/components/Filter.tsx
@@ -0,0 +1,30 @@
+"use client"
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+const Filter = () =>{
+
+    const searchParams = useSearchParams();
+    const router = useRouter();
+    const pathname = usePathname();
+
+    const handleFilter = (value:string)=>{
+    const params = new URLSearchParams(searchParams);
+    params.set("sort",value);
+    router.push(`${pathname}?${params.toString()}` , {scroll:false} )
+    }
+
+    return(
+        <div className="flex items-center justify-end gap-2 my-6 text-sm text-gray-500">
+            <span>Sort by:</span>
+            <select name="sort" id="sort" className="ring-1 ring-gray-200 rounded-sm shadow-md" onChange={(e)=>handleFilter(e.target.value)}>
+                <option value="newest">Newest</option>
+                <option value="oldest">Oldest</option>
+                <option value="asc">Price (asc)</option>
+                <option value="desc">Price (desc)</option>
+            </select>
+        </div>
+    )
+    
+}
+export default Filter
\ No newline at end of file
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 00000000..c6b3af22
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,47 @@
+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">
+            <Image
+            src="/logo.png" alt="TrendLama"
+            width={36} height={36}
+             />
+            <p className=" hidden md:block text-md font-medium tracking-wider text-white">TRENDLAMA.</p>
+            </Link>
+            <p className="text-sm text-gray-400">o 2025 Trendlama</p>
+            <p className="text-sm text-gray-400">All rights reserved</p>
+           </div>
+
+
+           <div className="flex flex-col gap-4 items-center md:items-start text-sm text-gray-400">
+            <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 items-center md:items-start text-sm text-gray-400">
+            <p className="text-sm text-amber-50">Products</p>
+            <Link href="/">All Products</Link>
+            <Link href="/">New Arrival</Link>
+            <Link href="/">Best Sellers</Link>
+            <Link href="/">Sale</Link>
+           </div>
+
+
+            <div className="flex flex-col gap-4 items-center md:items-start text-sm text-gray-400">
+                <p className="text-sm text-amber-50">Support</p>
+                <Link href="/">FAQs</Link>
+                <Link href="/">Shipping</Link>
+                <Link href="/">Returns</Link>
+                <Link href="/">Order Status</Link>
+            </div>
+        </div>
+    )
+}
+export default Footer;
\ No newline at end of file
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 00000000..b2c97615
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,33 @@
+import Image from "next/image";
+import Link from "next/link";
+import SearchBar from "./SearchBar";
+import { Bell, Home, ShoppingCart } from "lucide-react";
+import ShopingCartIcon from "./ShopingCartIcon";
+
+const Navbar = () => {
+  return (
+    <nav className=" w-full flex items-center justify-between border-b border-gray-200 pb-4">
+        {/* left */}
+        <Link href="/" className="flex items-center">
+        <Image
+            src="/logo.png" alt="TrendLama"
+            width={36} height={36}
+            className="w-6 h-6 md:w-9 md:h-9" />
+            <p className=" hidden md:block text-md font-medium tracking-wider">TRENDLAMA.</p>
+        </Link>
+        
+
+        {/* right */}
+        <div className=" flex items-center gap-6">
+            <SearchBar />
+            <Link href="/">
+            <Home className="w-4 h-4 text-gray-600" />
+            </Link>
+            <Bell className="w-4 h-4 text-gray-600"/>
+            <ShopingCartIcon />
+            <Link href="/login">Sign in</Link>
+        </div>
+    </nav>
+  ) 
+}
+export default Navbar;
\ No newline at end of file
diff --git a/src/components/PaymentForm.tsx b/src/components/PaymentForm.tsx
new file mode 100644
index 00000000..f20f7ead
--- /dev/null
+++ b/src/components/PaymentForm.tsx
@@ -0,0 +1,112 @@
+import { PaymentFormInputs, paymentFormSchema} from "@/types";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight, ShoppingCart } from "lucide-react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+
+
+const PaymentForm = () => {
+  const {
+    register,
+    handleSubmit,
+    formState:{errors}
+  } = useForm<PaymentFormInputs>({
+    resolver: zodResolver(paymentFormSchema),
+  });
+  const router = useRouter();
+  const handlePaymentForm: SubmitHandler<PaymentFormInputs> = (data)=>{
+    
+    
+  }
+  return (
+  <form className="flex flex-col gap-4" onSubmit={handleSubmit(handlePaymentForm)}>
+    <div className="flex flex-col gap-1">
+      <label htmlFor="cardHolder" className="text-xs text-gray-500 font-medium">
+        Name on card
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="cardHolder"
+        placeholder="Zeinab mahmoud"
+        {...register("cardHolder")}
+      />
+      {errors.cardHolder &&(
+        <p className="text-xs text-red-500">{errors.cardHolder?.message}</p>
+      )}
+    </div>
+
+    <div className="flex flex-col gap-1">
+      <label htmlFor="cardNumber" className="text-xs text-gray-500 font-medium">
+        Card Number
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="cardNumber"
+        placeholder="123456712345678"
+        {...register("cardNumber")}
+      />
+      {errors.cardNumber &&(
+        <p className="text-xs text-red-500">{errors.cardNumber?.message}</p>
+      )}
+    </div>
+
+    <div className="flex flex-col gap-1">
+      <label htmlFor="expirationDate" className="text-xs text-gray-500 font-medium">
+        Expiration Date
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="expirationDate"
+        placeholder="01/22"
+        {...register("expirationDate")}
+      />
+      {errors.expirationDate &&(
+        <p className="text-xs text-red-500">{errors.expirationDate?.message}</p>
+      )}
+    </div>
+
+    <div className="flex flex-col gap-1">
+      <label htmlFor="cvv" className="text-xs text-gray-500 font-medium">
+        CVV
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="cvv"
+        placeholder="123"
+        {...register("cvv")}
+      />
+      {errors.cvv &&(
+        <p className="text-xs text-red-500">{errors.cvv?.message}</p>
+      )}
+
+
+    </div>
+    
+    <div className="flex items-center gap-2 mt-4">
+      <Image src="/klarna.png" alt="klarna" width={50} height={25} className="rounded-md"/>
+      <Image src="/cards.png" alt="cards" width={50} height={25} className="rounded-md"/>
+      <Image src="/stripe.png" alt="stripe" width={50} height={25} className="rounded-md"/>
+
+
+    </div>
+
+    <button 
+      type="submit"
+      className="w-full bg-gray-800 hover:bg-gray-900 transition-all duration-300 text-white flex items-center justify-center gap-2 rounded-lg p-2 cursor-pointer">
+          Checkout
+          <ShoppingCart className="w-3 h-3"/>
+    </button>
+
+
+
+
+  </form>
+  );
+}
+export default PaymentForm;
\ No newline at end of file
diff --git a/src/components/ProductCard.tsx b/src/components/ProductCard.tsx
new file mode 100644
index 00000000..caedca65
--- /dev/null
+++ b/src/components/ProductCard.tsx
@@ -0,0 +1,100 @@
+"use client";
+
+import useCartStore from "@/stores/cartStore";
+import { ProductType } from "@/types";
+import { ShoppingCart } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+const ProductCard = ({product}:{product:ProductType}) => {
+  
+  const [productTypes, setProductTypes] =useState({
+    size: product.sizes[0],
+    color: product.colors[0], 
+  });
+
+  const {addToCart} = useCartStore();
+
+  const handleProductType = ({type,value}:{type:"size" | "color", value:string})=>{
+    setProductTypes(prev=>({
+      ...prev,
+      [type]:value
+    }))
+  };
+
+  const handleAddToCart = ()=>{
+  addToCart({
+    ...product,
+    quantity:1,
+    selectedSize:productTypes.size,
+    selectedColor:productTypes.color,
+  });
+    toast.success("Product added to cart");
+  }
+
+
+  return(
+    <div className="shadow-lg rounded-lg overflow-hidden">
+      {/* Image */}
+      <Link href={`/products/${product.id}`}>
+      <div className="relative aspect-[2/3]">
+      <Image src={product.images[productTypes.color]} alt={product.name} fill
+      className="object-cover hover:scale-105 transition-all duration-300"/>
+      </div>
+     </Link>
+
+     {/* product detail */}
+     <div className="flex flex-col gap-4 p-4">
+      <h1 className="font-medium">{product.name}</h1>
+      <p className="text-sm text-gray-500">{product.shortDescription}</p>
+
+      {/* product types */}
+      <div className="flex items-center gap-4 text-sm">
+        {/* Sizes */}
+        <div className="flex flex-col gap-1">
+          <span className="text-gray-500">Size</span>
+          <select name="size" id="size"
+          className="ring ring-gray-300 rounded-md px-2 py-1"
+          onChange={e=>handleProductType({type:"size", value:e.target.value})}>
+            {product.sizes.map(size=>(
+              <option key={size} value={size}>{size.toUpperCase()}</option>
+            ))}
+          </select>
+
+        </div>
+
+        {/* Colors */}
+        <div className="flex flex-col gap-1">
+          <span className="text-gray-500">Colors</span>
+          <div className="flex items-center gap-2">
+            {product.colors.map(color=>(
+              <div
+              className={`cursor-pointer border-1 ${productTypes.color===color ? "border-gray-400" : "border-gray-200"} rounded-full p-[1.2px]`} key={color}
+              onClick={()=>handleProductType({type:"color", value:color})}>
+                <div className="w-[14px] h-[14px] rounded-full"
+                style={{backgroundColor:color}}/>
+              </div>
+            ))}
+          </div>
+
+        </div>
+      </div>
+
+      {/* prices and add to Carts */}
+      <div className="flex items-center justify-between">
+        <p className="font-medium">${product.price.toFixed(2)}</p>
+        <button onClick={handleAddToCart} className="flex items-center gap-2 ring-1 ring-gray-200 shadow-lg rounded-md px-2 py-1 text-sm cursor-pointer hover:text-white hover:bg-black transition-all duration-300">
+          <ShoppingCart className="w-4 h-4"/>
+          Add to Cart
+        </button>
+
+      </div>
+
+     </div>
+
+    </div>
+  )
+}
+export default ProductCard
\ No newline at end of file
diff --git a/src/components/ProductInteraction.tsx b/src/components/ProductInteraction.tsx
new file mode 100644
index 00000000..6e3fc873
--- /dev/null
+++ b/src/components/ProductInteraction.tsx
@@ -0,0 +1,120 @@
+"use client"
+
+import useCartStore from "@/stores/cartStore";
+import { ProductType } from "@/types"
+import { Minus, Plus, ShoppingCart } from "lucide-react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useState } from "react";
+import { toast } from "react-toastify";
+
+
+const ProductInteraction = ({
+    product,
+    selectedSize,
+    selectedColor
+}:{
+    product:ProductType;
+    selectedSize:string;
+    selectedColor:string
+}) => {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchparams = useSearchParams();
+
+    const [quantity, setQuantity] = useState(1)
+
+    const {addToCart} = useCartStore()
+
+    const handleTypeChange = (type:string, value:string) =>{
+        const params = new URLSearchParams(searchparams.toString());
+        params.set(type, value);
+        router.push(`${pathname}?${params.toString()}`, {scroll:false});
+    };
+
+    const handleQuantityChange= (type: "increment" | "decrement")=>{
+        if(type==="increment"){
+            setQuantity((prev)=>prev+1);
+        }else{
+            if(quantity>1){
+                setQuantity((prev)=>prev-1);
+            }
+        }
+    };
+
+    const handleAddToCart = ()=>{
+        addToCart({
+            ...product,
+            quantity,
+            selectedColor,
+            selectedSize,
+        });
+        toast.success("Product added to the cart")
+    }
+
+
+    return(
+        <div className="flex flex-col gap-4 mt-4">
+            {/* SIZE */}
+            <div className="flex flex-col gap-2 text-xs">
+                <span className="text-gray-500">Size</span>
+                <div className="flex items-center gap-2">
+                    {product.sizes.map((size) => (
+                        <div className={`cursor-pointer border-1 p-[2px]
+                        ${selectedSize===size? "border-gray-600":"border-gray-300"}`}
+                        key={size}
+                        onClick={()=>handleTypeChange("size",size)}>
+                            <div className={`w-6 h-6 text-center flex items-center justify-center ${selectedSize===size?
+                                "bg-black text-white":"bg-white text-black"
+                            }`}>{size.toUpperCase()}</div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+
+            {/* COLOR */}
+            <div className="flex flex-col gap-2 text-sm">
+                <span className="text-gray-500">Color</span>
+                <div className="flex items-center gap-2">
+                    {product.colors.map((color) => (
+                        <div className={`cursor-pointer border-1 p-[2px]
+                        ${selectedSize===color? "border-gray-300":"border-white"}`}
+                        key={color}
+                        onClick={()=>handleTypeChange("color",color)}>
+                            <div className={`w-6 h-6}`}
+                            style={{backgroundColor:color}}/>
+                        </div>
+                    ))}
+                </div>
+            </div>
+            
+            {/* QUANTITY */}
+            <div className="flex flex-col gap-2 text-sm">
+                <span className="text-gray-500">Quantity</span>
+                <div className="flex items-center gap-2">
+                    <button className="cursor-pointer border-1 border-gray-300 p-1"
+                    onClick={()=>handleQuantityChange("decrement")}>
+                        <Minus className="w-4 h-4" />
+                    </button>
+
+                    <span>{quantity}</span>
+
+                    <button className="cursor-pointer border-1 border-gray-300 p-1"
+                    onClick={()=>handleQuantityChange("increment")}>
+                        <Plus className="w-4 h-4" />
+                    </button>
+                </div>
+            </div>
+            {/* BUTTONS */}
+            <button onClick={handleAddToCart} className="bg-gray-800 text-sm font-medium text-white rounded-md shadow-lg cursor-pointer px-4 py-2 flex items-center justify-center gap-2">
+                <Plus className="w-4 h-4" />
+                Add to Cart
+            </button>
+            <button className="ring-1 text-sm font-medium ring-gray-400 shadow-lg text-gray-800 px-4 py-2 rounded-md flex items-center justify-center gap-2 cursor-pointer">
+                <ShoppingCart className="w-4 h-4" />
+                Buy it Now
+            </button>
+
+        </div>
+    )
+}
+export default ProductInteraction
\ No newline at end of file
diff --git a/src/components/ProductList.tsx b/src/components/ProductList.tsx
new file mode 100644
index 00000000..b9151187
--- /dev/null
+++ b/src/components/ProductList.tsx
@@ -0,0 +1,144 @@
+import { ProductsType } from "@/types"
+import Categories from "./Categories"
+import ProductCard from "./ProductCard"
+import Link from "next/link"
+import Filter from "./Filter"
+
+const products:ProductsType = [
+    {
+        id:1,
+        name:"Product 1",
+        shortDescription:"This is product 1",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:9.99,
+        sizes:["S","M","L","XL"],
+        colors:["gray","purple","green"],
+        images:{
+            gray:"/products/1g.png",
+            purple:"/products/1p.png",
+            green:"/products/1gr.png"
+        },
+    },
+
+    {
+        id:2,
+        name:"Product 2",
+        shortDescription:"This is product 2",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:19.99,
+        sizes:["S","M","L","XL"],
+        colors:["gray","green"],
+        images:{
+            gray:"/products/2g.png",
+            green:"/products/2gr.png"
+        },
+    },
+
+    {
+        id:3,
+        name:"Product 3",
+        shortDescription:"This is product 3",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:29.99,
+        sizes:["S","M","L","XL"],
+        colors:["green","black","blue"],
+        images:{
+            green:"/products/3gr.png",
+            black:"/products/3bl.png",
+            blue:"/products/3b.png"
+        },
+    },
+
+    {
+        id:4,
+        name:"Product 4",
+        shortDescription:"This is product 4",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:39.99,
+        sizes:["S","M","L","XL"],
+        colors:["white","purple"],
+        images:{
+            purple:"/products/4p.png",
+            white:"/products/4w.png",
+            
+        },
+    },
+
+
+    {
+        id:5,
+        name:"Product 5",
+        shortDescription:"This is product 5",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:49.99,
+        sizes:["S","M","L","XL"],
+        colors:["orange","red","balck"],
+        images:{
+            orange:"/products/5o.png",
+            red:"/products/5r.png",
+            black:"/products/5bl.png",
+            
+        },
+    },
+
+    {
+        id:6,
+        name:"Product 6",
+        shortDescription:"This is product 6",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:59.99,
+        sizes:["S","M","L","XL"],
+        colors:["gray","white"],
+        images:{
+            gray:"/products/6g.png",
+            white:"/products/6w.png",
+        },
+    },
+
+
+    {
+        id:7,
+        name:"Product 7",
+        shortDescription:"This is product 7",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:69.99,
+        sizes:["S","M","L","XL"],
+        colors:["gray","purple"],
+        images:{
+            gray:"/products/7g.png",
+            purple:"/products/7p.png",
+        },
+    },
+
+    {
+        id:8,
+        name:"Product 8",
+        shortDescription:"This is product 8",
+        description:"lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+        price:79.99,
+        sizes:["S","M","L","XL"],
+        colors:["black","green"],
+        images:{
+            black:"/products/8b.png",
+            green:"/products/8gr.png",
+        },
+    }
+]
+
+
+const ProductList = ({category, params}:{category:string ,params:"homePage" | "products"}) => {
+  return (
+    <div className="w-full">
+        <Categories />
+        {params === "products" && <Filter />}
+        <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-12">
+            {products.map(product=>(
+                <ProductCard key={product.id} product={product} />
+            ))}
+        </div>
+        <Link href={category? `/products/?category=${category}` : "/products"}
+        className="flex justify-end mt-4 underline text-sm text-gray-500">View all products</Link>
+    </div>
+  )
+}
+export default ProductList
\ No newline at end of file
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
new file mode 100644
index 00000000..68708a1b
--- /dev/null
+++ b/src/components/SearchBar.tsx
@@ -0,0 +1,11 @@
+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" type="text" placeholder="Search..." className="text-sm outline-0"/>
+        </div>
+    )
+}
+export default SearchBar;
\ No newline at end of file
diff --git a/src/components/ShippinForm.tsx b/src/components/ShippinForm.tsx
new file mode 100644
index 00000000..1dbc9208
--- /dev/null
+++ b/src/components/ShippinForm.tsx
@@ -0,0 +1,119 @@
+import { shippingFormInputs, shippingFormSchema } from "@/types";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowRight } from "lucide-react";
+import { useRouter } from "next/navigation";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+
+
+const ShippingForm = ({setShippingForm}:{setShippingForm:(data:shippingFormInputs)=>void}) => {
+  const {
+    register,
+    handleSubmit,
+    formState:{errors}
+  } = useForm<shippingFormInputs>({
+    resolver: zodResolver(shippingFormSchema),
+  });
+  const router = useRouter();
+  const handleShippingForm: SubmitHandler<shippingFormInputs> = (data)=>{
+    setShippingForm(data);
+    router.push("/cart?step=3" , {scroll:false});
+    
+  }
+  return (
+  <form className="flex flex-col gap-4" onSubmit={handleSubmit(handleShippingForm)}>
+    <div className="flex flex-col gap-1">
+      <label htmlFor="name" className="text-xs text-gray-500 font-medium">
+        Name
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="name"
+        placeholder="Zeinab mahmoud"
+        {...register("name")}
+      />
+      {errors.name &&(
+        <p className="text-xs text-red-500">{errors.name?.message}</p>
+      )}
+    </div>
+
+    <div className="flex flex-col gap-1">
+      <label htmlFor="email" className="text-xs text-gray-500 font-medium">
+        Email
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="email"
+        id="email"
+        placeholder="Zeinab_mahmoud@gmail.com"
+        {...register("email")}
+      />
+      {errors.email &&(
+        <p className="text-xs text-red-500">{errors.email?.message}</p>
+      )}
+    </div>
+
+    <div className="flex flex-col gap-1">
+      <label htmlFor="phone" className="text-xs text-gray-500 font-medium">
+        Phone
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="phone"
+        placeholder="Zeinab mahmoud"
+        {...register("phone")}
+      />
+      {errors.phone &&(
+        <p className="text-xs text-red-500">{errors.phone?.message}</p>
+      )}
+    </div>
+
+    <div className="flex flex-col gap-1">
+      <label htmlFor="address" className="text-xs text-gray-500 font-medium">
+        Address
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="address"
+        placeholder="33 mahmoud st, cairo"
+        {...register("address")}
+      />
+      {errors.address &&(
+        <p className="text-xs text-red-500">{errors.address?.message}</p>
+      )}
+
+
+    </div>
+    <div className="flex flex-col gap-1">
+      <label htmlFor="city" className="text-xs text-gray-500 font-medium">
+        City
+      </label>
+      <input
+        className="border-b border-gray-200 py-2 outline-none text-sm"
+        type="text"
+        id="city"
+        placeholder="Cairo"
+        {...register("city")}
+      />
+      {errors.city &&(
+        <p className="text-xs text-red-500">{errors.city?.message}</p>
+      )}
+    </div>
+
+    <button 
+      type="submit"
+      className="w-full bg-gray-800 hover:bg-gray-900 transition-all duration-300 text-white flex items-center justify-center gap-2 rounded-lg p-2 cursor-pointer">
+          Continue
+          <ArrowRight className="w-3 h-3"/>
+    </button>
+
+
+
+
+  </form>
+  );
+}
+export default ShippingForm;
\ No newline at end of file
diff --git a/src/components/ShopingCartIcon.tsx b/src/components/ShopingCartIcon.tsx
new file mode 100644
index 00000000..ae273941
--- /dev/null
+++ b/src/components/ShopingCartIcon.tsx
@@ -0,0 +1,20 @@
+
+"use client"
+import useCartStore from "@/stores/cartStore"
+import { ShoppingCart } from "lucide-react"
+import Link from "next/link"
+
+const ShopingCartIcon = () => {
+
+    const {cart, hasHydrated} = useCartStore()
+    if(!hasHydrated) return null;
+    return (
+        <Link href="/cart" className="relative">
+            <ShoppingCart className="w-4 h-4 text-gray-600"/>
+            <span className="absolute -top-3 -right-3 bg-amber-400 text-gray-600 rounded-full w-4 h-4 flex items-center justify-center text-xs font-medium">
+                {cart.reduce((acc,item)=> acc +item.quantity,0)}
+            </span>
+        </Link>
+    )
+}
+export default ShopingCartIcon;
\ No newline at end of file
diff --git a/src/stores/cartStore.ts b/src/stores/cartStore.ts
new file mode 100644
index 00000000..df05dfbe
--- /dev/null
+++ b/src/stores/cartStore.ts
@@ -0,0 +1,55 @@
+import { CartStoreActionsType, CartStoreStateType } from '@/types'
+import { create } from 'zustand'
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+const useCartStore = create<CartStoreStateType & CartStoreActionsType>()(
+persist(
+  (set) => ({
+    cart: [],
+    hasHydrated: false,
+    addToCart: (product) => set((state) => {
+      const existingIndex = state.cart.findIndex((p) =>
+        p.id === product.id &&
+        p.selectedColor === product.selectedColor &&
+        p.selectedSize === product.selectedSize
+      );
+
+      if (existingIndex !== -1) {
+        const updatedCart = [...state.cart];
+        updatedCart[existingIndex].quantity += product.quantity || 1;
+        return { cart: updatedCart };
+      }
+
+      return {
+        cart: [
+          ...state.cart,
+          {
+            ...product,
+            quantity:product.quantity|| 1,
+            selectedColor: product.selectedColor,
+            selectedSize: product.selectedSize
+          },
+        ]
+      }
+    }),
+    removeFromCart: (product) => set((state) => ({
+      cart: state.cart.filter((p) => !(
+        p.id === product.id &&
+        p.selectedColor === product.selectedColor &&
+        p.selectedSize === product.selectedSize
+      ))
+    })),
+    clearCart: () => set({ cart: [] }),
+  }),
+  {
+    name: "cart",
+    storage: createJSONStorage(() => localStorage),
+    onRehydrateStorage:()=>(state)=>{
+      if(state)
+      state.hasHydrated = true;
+    }
+  },
+),
+
+);
+export default useCartStore;
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..f8fed036
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,55 @@
+import { Car, Phone } from "lucide-react";
+import { z } from "zod";
+
+export type ProductType = {
+    id: number;
+    name: string;
+    shortDescription: string;
+    description: string;
+    price: number;
+    sizes: string[];
+    colors: string[];
+    images: Record<string, string>;
+};
+
+export type ProductsType = ProductType[]
+
+export type CartItemType = ProductType & {
+    quantity: number;
+    selectedSize: string;
+    selectedColor: string;
+};
+export type CartItemsType = CartItemType[]
+
+
+export const shippingFormSchema = z.object({
+    name: z.string().min(2,"Name must be at least 2 characters long"),
+    email: z.string().min(1,"Email is required"),
+    phone: z.string().min(7, "Phone number must be at least 10 digits").max(10,"Phone number must be between 7 and 10 digits").regex(/^\d+$/,"Phone number must contain only digits"),
+    address: z.string().min(5, "Address is required"),
+    city: z.string().min(1,"City is required"), 
+
+});
+export type shippingFormInputs=z.infer<typeof shippingFormSchema>;
+
+export const paymentFormSchema = z.object({
+    cardHolder: z.string().min(2,"Card holder is required"),
+    cardNumber: z.string().length(16, "Card number must be 16 digits"),
+    expirationDate: z.string().regex(/^(0[1-9]|1[0-2])\/\d{2}$/, "Expiration date must be in MM/YY format"),
+    cvv: z.string().length(3, "CVV must be 3 digits"),
+});
+
+export type PaymentFormInputs = z.infer<typeof paymentFormSchema>;
+
+
+export type CartStoreStateType = {
+    cart:CartItemsType;
+    hasHydrated: boolean;
+};
+
+export type CartStoreActionsType = {
+    addToCart:(product:CartItemType) =>void;
+    removeFromCart:(product:CartItemType) =>void;
+    clearCart:() =>void;
+
+};
\ No newline at end of file