diff --git a/app/layout.tsx b/app/layout.tsx
index f9c9c38..3bab0d4 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -5,6 +5,7 @@ import Footer from "@/components/footer";
 import localFont from 'next/font/local';
 import { CartProvider } from "@/components/context/cartcontext";
 import { categoryService } from "@/public/src/services/categories/api";
+import { CategoryProvider } from "@/components/context/categoryprovider";
 
 const Yekanbakh = localFont({
   src: [
@@ -35,8 +36,12 @@ export default async function RootLayout({
     <html lang="fa" dir="rtl" className={Yekanbakh.variable}>
       <body>
       <CartProvider>
-      <Header categories={categories}/>
+      <CategoryProvider>
+
+      <Header />
       {children}
+      </CategoryProvider>
+
       </CartProvider>
 
       <Footer/>
diff --git a/app/page.tsx b/app/page.tsx
index 761ba4a..4e1c77a 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,13 +1,20 @@
 "use client";
 import { useState } from "react";
-import { Headphones, FileText, Truck, ShieldCheck, Square, MoreVertical, Circle, Target, CookingPot, Settings, CircleDashed, Disc, Hexagon, Droplets, Wrench, Minus, MessageCircleCheckIcon, } from "lucide-react";
+import {
+  Headphones, FileText, Truck, ShieldCheck, CircleDashed,
+  Disc,
+  Hexagon,
+  Settings,
+  Wrench,
+  Droplets, Square, MoreVertical, Circle, Target, CookingPot, Minus, MessageCircleCheckIcon,
+} from "lucide-react";
 import ProductCard from "@/components/productcard";
 import ArticleCard from "@/components/articlecard";
 import FAQItem from "@/components/faq";
 import { products } from "@/lib/data";
 import { articles } from "@/lib/data";
 import Link from "next/link";
-
+import { useCategories } from "@/components/context/categoryprovider";
 
 
 const features = [
@@ -60,28 +67,35 @@ export default function Home() {
   const [activeTab, setActiveTab] = useState(0);
   const brands = ["NTN", "KOYO", "NACHI", "TIMKEN", "FAG", "SKF"];
   const latestArticles = articles.slice(-4);
+  const { rootCategories } = useCategories();
 
-  const uniqueCategories = Array.from(new Set(products.map((p) => p.category)));
-  const getCategoryIcon = (categoryName: string) => {
-    switch (categoryName) {
-      case "شیار عمیق":
-        return CircleDashed;
-      case "مخروطی":
-        return Disc;
-      case "شبکه ای":
-        return Hexagon;
-      case "سوزنی":
-        return Settings;
-      case "یاتاقان":
-        return Wrench;
-      case "گریس و روانکار":
-        return Droplets;
-      default:
-        return Settings; // آیکون پیش‌فرض
-    }
-  };
-
+  // const uniqueCategories = Array.from(new Set(products.map((p) => p.category)));
+  // const getCategoryIcon = (categoryName: string) => {
+  //   switch (categoryName) {
+  //     case "شیار عمیق":
+  //       return CircleDashed;
+  //     case "مخروطی":
+  //       return Disc;
+  //     case "شبکه ای":
+  //       return Hexagon;
+  //     case "سوزنی":
+  //       return Settings;
+  //     case "یاتاقان":
+  //       return Wrench;
+  //     case "گریس و روانکار":
+  //       return Droplets;
+  //     default:
+  //       return Settings; // آیکون پیش‌فرض
+  //   }
+  // };
 
+  const categoryIcons = [
+    CircleDashed,
+    Disc,
+    Hexagon,
+    Wrench,
+    Droplets
+  ];
 
   return (
     <main className=" bg-gray-50">
@@ -225,26 +239,26 @@ export default function Home() {
 
 
           {/* cards */}
-          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
-            {uniqueCategories.map((category, index) => {
-              const Icon = getCategoryIcon(category);
+          <div className="grid justify-center grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-6">
 
-              // فقط فاصله‌ها را به خط تیره تبدیل می‌کنیم
-              const categorySlug = category.replace(/\s+/g, "-");
+        
+
+            {rootCategories.map((cat, index) => {
+              const Icon = categoryIcons[index % categoryIcons.length];
 
               return (
                 <Link
-                  href={`/category/${categorySlug}`}
-                  key={index}
-                  className="bg-white border border-gray-200 rounded-xl shadow-sm hover:shadow-md hover:border-blue-400 transition-all duration-300 flex flex-col items-center justify-center py-8 cursor-pointer group"
+                  key={cat.id}
+                  href={`/category/${cat.slug}`}
+                  className="bg-white border gap-2 border-gray-200 rounded-xl shadow-sm hover:shadow-md hover:border-blue-400 transition-all duration-300 flex flex-col items-center justify-center py-8 cursor-pointer group"
                 >
-                  <Icon size={34} className="text-gray-400 mb-3 group-hover:text-blue-500 transition-colors" />
-                  <p className="text-sm font-medium text-gray-700 group-hover:text-blue-600">
-                    {category}
-                  </p>
+                  <Icon size={34} strokeWidth={1} className="text-gray-400 mb-3 group-hover:text-blue-500 transition-colors" />
+                  <span className="text-sm font-medium text-gray-700 group-hover:text-blue-600">{cat.name}</span>
+                  
                 </Link>
               );
             })}
+
           </div>
         </div>
       </section>
diff --git a/components/context/categoryprovider.tsx b/components/context/categoryprovider.tsx
new file mode 100644
index 0000000..1b3c63f
--- /dev/null
+++ b/components/context/categoryprovider.tsx
@@ -0,0 +1,34 @@
+"use client";
+import { createContext, useContext, useEffect, useState } from "react";
+import { getAllCategories } from "@/public/src/services/categories/store";
+import { Category } from "@/public/src/types/categories";
+
+interface CategoryContextType {
+  categories: Category[];
+  rootCategories: Category[];
+}
+
+const CategoryContext = createContext<CategoryContextType>({
+  categories: [],
+  rootCategories: [],
+});
+
+export function CategoryProvider({ children }: { children: React.ReactNode }) {
+  const [categories, setCategories] = useState<Category[]>([]);
+
+  useEffect(() => {
+    getAllCategories().then((data) => setCategories(data));
+  }, []);
+
+  const rootCategories = categories.filter((c) => !c.parent);
+
+  return (
+    <CategoryContext.Provider value={{ categories, rootCategories }}>
+      {children}
+    </CategoryContext.Provider>
+  );
+}
+
+export function useCategories() {
+  return useContext(CategoryContext);
+}
diff --git a/components/header.tsx b/components/header.tsx
index 94fee39..03e40ec 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -3,13 +3,13 @@ import React, { useState, useEffect, useRef } from 'react';
 import { usePathname, useRouter } from 'next/navigation';
 import Link from 'next/link';
 import Image from 'next/image';
-import { registerUser } from '@/public/src/services/auth/api';
-import { Category } from '@/public/src/types/categories';
-
 import { ShoppingCart, Trash2, Search, X, ChevronDown } from "lucide-react";
 import { useCart } from './context/cartcontext';
 import { products } from '@/lib/data';
 import '@/public/src/css/header.css';
+import { registerUser } from '@/public/src/services/auth/api';
+import { loginUser } from '@/public/src/services/auth/api';
+import { useCategories } from './context/categoryprovider';
 
 const topBarLinks = [
     { label: "بخش صنعتی", href: "/" },
@@ -25,7 +25,7 @@ const mainNavLinks = [
 ];
 
 
-export function Header({ categories }: { categories: Category[] }) {
+export function Header() {
     const [menuOpen, setMenuOpen] = useState(false);
     const pathname = usePathname();
     const { cart, removeFromCart } = useCart();
@@ -34,54 +34,143 @@ export function Header({ categories }: { categories: Category[] }) {
     const [filteredProducts, setFilteredProducts] = useState<any[]>([]);
     const searchRef = useRef<HTMLDivElement>(null);
     const router = useRouter();
-    const safeCategories = categories || [];
     const [isOpen, setIsOpen] = useState(false);
     const [formType, setFormType] = useState("mobile");
     const [activeTab, setActiveTab] = useState("login");
-    const [registerForm, setRegisterForm] = useState({
-        phone: "",
+    const [registerError, setRegisterError] = useState("");
+    const [loginError, setLoginError] = useState("");
+    const { rootCategories } = useCategories();
+    const [loginForm, setLoginForm] = useState({
         username: "",
-        firstName: "",
-        lastName: "",
         password: "",
-        confirmPassword: "",
     });
 
-    const handleRegisterChange = (e: any) => {
-        const { name, value } = e.target;
+    const [registerForm, setRegisterForm] = useState({
+        phone: "",
+        fullName: "",
+        username: "",
+        password: "",
+    });
 
-        setRegisterForm((prev) => ({
-            ...prev,
-            [name]: value,
-        }));
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setRegisterForm({
+            ...registerForm,
+            [e.target.name]: e.target.value,
+        });
     };
 
-
-
     const handleRegister = async () => {
+
+        setRegisterError("");
+
+        const phone = registerForm.phone.trim();
+        const username = registerForm.username.trim();
+        const password = registerForm.password.trim();
+        const fullName = registerForm.fullName.trim();
+
+        // ✅ بررسی خالی بودن فیلدها
+        if (!phone || !username || !password || !fullName) {
+            setRegisterError("لطفاً فیلدها را پر کنید");
+            return;
+        }
+
         try {
 
             const payload = {
-                phone: registerForm.phone,
-                username: registerForm.username,
-                password: registerForm.password,
+                phone,
+                username,
+                password,
+                fullName,
             };
 
             const res = await registerUser(payload);
 
-            console.log("ثبت نام موفق", res);
+            localStorage.setItem("accessToken", res.data.accessToken);
+            localStorage.setItem("refreshToken", res.data.refreshToken);
 
-        } catch (err) {
-            console.log("خطا:", err);
+            setIsOpen(false);
+            router.push("/dashboard");
+
+        } catch (error: any) {
+
+            const message = error?.message?.toLowerCase() || "";
+
+            const usernameDuplicate = message.includes("username");
+            const phoneDuplicate = message.includes("phone");
+
+            if (usernameDuplicate && phoneDuplicate) {
+                setRegisterError("نام کاربری و شماره موبایل قبلاً ثبت شده‌اند");
+            }
+            else if (usernameDuplicate) {
+                setRegisterError("این نام کاربری قبلاً ثبت شده است");
+            }
+            else if (phoneDuplicate) {
+                setRegisterError("این شماره موبایل قبلاً ثبت شده است");
+            }
+            else {
+                setRegisterError("خطا در ثبت نام");
+            }
         }
     };
 
-    const rootCategories = safeCategories.filter(cat => cat.parent === null);
+    const handleLogin = async () => {
+        setLoginError("");
+
+        const username = loginForm.username.trim();
+        const password = loginForm.password.trim();
+
+        if (!username || !password) {
+            setLoginError("لطفاً نام کاربری و رمز عبور را وارد کنید");
+            return;
+        }
+
+        try {
+            const res = await loginUser({ username, password });
+
+            localStorage.setItem("accessToken", res.data.accessToken);
+            localStorage.setItem("refreshToken", res.data.refreshToken);
+            setIsOpen(false);
+            router.push("/dashboard");
+
+        } catch (error: any) {
+            const msg = error?.message?.toLowerCase() || "";
+
+            console.log("LOGIN ERROR RAW:", msg);  // این خیلی مهمه
+
+            // 1) اول بررسی کنیم که نام کاربری وجود ندارد
+            if (
+                msg.includes("not found") ||
+                msg.includes("user") && msg.includes("not") ||
+                msg.includes("username") && msg.includes("not")
+            ) {
+                setLoginError("این نام کاربری وجود ندارد");
+                return;
+            }
+
+            // 2) سپس رمز عبور اشتباه
+            if (
+                msg.includes("password") ||
+                msg.includes("invalid") ||
+                msg.includes("incorrect")
+            ) {
+                setLoginError("رمز عبور اشتباه است");
+                return;
+            }
+
+            // 3) خطای عمومی
+            setLoginError("خطا در ورود. لطفاً دوباره تلاش کنید.");
+        }
+    };
+
+
+
+
     const parsePrice = (priceStr?: string | null) => {
         if (!priceStr) return 0;
         return Number(priceStr.toString().replace(/,/g, ''));
     };
 
+
     const totalPrice = cart.reduce((total, item) => total + (parsePrice(item.price) * item.quantity), 0);
 
     useEffect(() => {
@@ -422,7 +511,7 @@ export function Header({ categories }: { categories: Category[] }) {
 
                                                 <button
                                                     onClick={() => setActiveTab("register")}
-                                                    className={`flex-1 py-2 text-sm rounded-lg transition ${activeTab === "register"
+                                                    className={`flex-1 cursor-pointer py-2 text-sm rounded-lg transition ${activeTab === "register"
                                                         ? "bg-white shadow text-[#1A2332] font-semibold"
                                                         : "text-gray-500"
                                                         }`}
@@ -467,19 +556,38 @@ export function Header({ categories }: { categories: Category[] }) {
 
                                                             <input
                                                                 type="text"
+                                                                value={loginForm.username}
+                                                                onChange={(e) =>
+                                                                    setLoginForm((prev) => ({
+                                                                        ...prev,
+                                                                        username: e.target.value,
+                                                                    }))
+                                                                }
                                                                 placeholder="نام کاربری"
                                                                 className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
                                                             />
 
                                                             <input
                                                                 type="password"
+                                                                value={loginForm.password}
+                                                                onChange={(e) =>
+                                                                    setLoginForm((prev) => ({
+                                                                        ...prev,
+                                                                        password: e.target.value,
+                                                                    }))
+                                                                }
                                                                 placeholder="رمز عبور"
                                                                 className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
                                                             />
 
-                                                            <button className="w-full cursor-pointer py-3.5 bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] font-semibold rounded-2xl text-sm">
+                                                            <button onClick={handleLogin} className="w-full cursor-pointer py-3.5 bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] font-semibold rounded-2xl text-sm">
                                                                 ورود
                                                             </button>
+                                                            {loginError && (
+                                                                <div className="text-red-500 text-sm text-center mt-2">
+                                                                    {loginError}
+                                                                </div>
+                                                            )}
 
                                                             <button
                                                                 onClick={() => setFormType("mobile")}
@@ -495,40 +603,30 @@ export function Header({ categories }: { categories: Category[] }) {
                                             )}
 
                                             {/* ---------------- REGISTER ---------------- */}
-
                                             {activeTab === "register" && (
                                                 <div className="w-full space-y-4">
-
                                                     <input
                                                         name="phone"
                                                         value={registerForm.phone}
-                                                        onChange={handleRegisterChange}
+                                                        onChange={handleChange}
                                                         type="tel"
                                                         placeholder="شماره موبایل"
                                                         className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
                                                     />
 
                                                     <input
-                                                        name="firstName"
-                                                        value={registerForm.firstName}
-                                                        onChange={handleRegisterChange}
+                                                        name="fullName"
+                                                        value={registerForm.fullName}
+                                                        onChange={handleChange}
                                                         type="text"
                                                         placeholder="نام"
                                                         className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
                                                     />
 
-                                                    <input
-                                                        name="lastName"
-                                                        value={registerForm.lastName}
-                                                        onChange={handleRegisterChange}
-                                                        type="text"
-                                                        placeholder="نام خانوادگی"
-                                                        className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
-                                                    />
                                                     <input
                                                         name="username"
                                                         value={registerForm.username}
-                                                        onChange={handleRegisterChange}
+                                                        onChange={handleChange}
                                                         type="text"
                                                         placeholder="نام کاربری"
                                                         className='w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]'
@@ -536,20 +634,19 @@ export function Header({ categories }: { categories: Category[] }) {
                                                     <input
                                                         name="password"
                                                         value={registerForm.password}
-                                                        onChange={handleRegisterChange}
-                                                        type="password"
+                                                        onChange={handleChange} type="password"
                                                         placeholder="رمز عبور"
                                                         className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
                                                     />
 
-                                                    <input
+                                                    {/* <input
                                                         name="confirmPassword"
                                                         value={registerForm.confirmPassword}
-                                                        onChange={handleRegisterChange}
+                                                        onChange={handleChange}
                                                         type="password"
                                                         placeholder="تکرار رمز عبور"
                                                         className="w-full px-4 py-3.5 bg-gray-50 border border-gray-200 rounded-2xl text-sm text-right focus:outline-none focus:border-[#ffb900]"
-                                                    />
+                                                    /> */}
 
                                                     <button
                                                         onClick={handleRegister}
@@ -558,6 +655,11 @@ export function Header({ categories }: { categories: Category[] }) {
                                                         ثبت نام
                                                     </button>
 
+                                                    {registerError && (
+                                                        <div className="text-red-500 text-sm text-center mt-2">
+                                                            {registerError}
+                                                        </div>
+                                                    )}
 
                                                 </div>
                                             )}
@@ -590,21 +692,13 @@ export function Header({ categories }: { categories: Category[] }) {
 
                                 <div className="absolute top-[calc(100%+16px)] right-0 w-56 bg-white border border-gray-200 rounded-xl shadow-lg p-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 flex flex-col gap-1 z-50">
 
-                                    {rootCategories.length > 0 ? (
-                                        rootCategories.map((category) => (
-                                            <Link
-                                                key={category.id}
-                                                href={`/category/${category.slug}`}
-                                                className="block w-full text-right px-3 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-blue-600 rounded-md transition-colors"
-                                            >
-                                                {category.name}
-                                            </Link>
-                                        ))
-                                    ) : (
-                                        <div className="text-center text-xs text-gray-500 py-2">
-                                            در حال بارگذاری...
-                                        </div>
-                                    )}
+
+                                    {rootCategories.map(cat => (
+                                        <Link className='className="block w-full text-right px-3 py-2 text-xs font-medium text-gray-600 hover:bg-gray-100 hover:text-blue-600 rounded-md transition-colors'
+                                            href={`/category/${cat.slug}`} key={cat.id}>
+                                            {cat.name}
+                                        </Link>
+                                    ))}
 
                                 </div>
                             </div>
diff --git a/public/src/services/auth/api.tsx b/public/src/services/auth/api.tsx
index 6af579b..9cae78b 100644
--- a/public/src/services/auth/api.tsx
+++ b/public/src/services/auth/api.tsx
@@ -1,13 +1,55 @@
 import { API_BASE_URL } from "../config";
 
-export async function registerUser(data: any) {
-  const res = await fetch(`${API_BASE_URL}/auth/register/password`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(data),
-  });
-console.log( API_BASE_URL);
-  return res.json();
+export interface RegisterPayload {
+  phone: string;
+  username: string;
+  password: string;
+  fullName: string;
 }
+export interface LoginPayload {
+    username: string;
+    password: string;
+  }
+  
+export async function registerUser(data: RegisterPayload) {
+    const response = await fetch(`${API_BASE_URL}/auth/register/password`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+  
+    const result = await response.json();
+  
+    if (!response.ok) {
+      throw new Error(result.message || "Register failed");
+    }
+  
+    return result;
+  }
+  
+
+  
+  export async function loginUser(data: LoginPayload) {
+  
+    const response = await fetch(
+      `${API_BASE_URL}/auth/login/password`,
+      {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(data),
+      }
+    );
+  
+    const result = await response.json();
+  
+    if (!response.ok) {
+      throw new Error(result.message || "Login failed");
+    }
+  
+    return result;
+  }
+  
\ No newline at end of file
diff --git a/public/src/services/categories/api.tsx b/public/src/services/categories/api.tsx
index 9ea7fe6..dda29ad 100644
--- a/public/src/services/categories/api.tsx
+++ b/public/src/services/categories/api.tsx
@@ -1,32 +1,18 @@
-// src/services/categories/categories.service.ts
-import { ApiResponse } from '../../types/global';
-import { Category } from '../../types/categories';
-
-const BASE_URL = 'https://parsshop-back.mugit.ir';
+import { API_BASE_URL } from "../config";
+import { Category } from "../../types/categories";
 
 export const categoryService = {
-  /**
-   * دریافت تمام دسته‌بندی‌ها با استفاده از کش Next.js
-   */
   getCategories: async (): Promise<Category[]> => {
     try {
-      const response = await fetch(`${BASE_URL}/api/categories`, {
-        // بهینه‌ترین حالت: داده‌ها تا ۱ ساعت کش می‌شوند (3600 ثانیه)
-        // اگر تغییرات شما لحظه‌ای است، این عدد را کمتر کنید یا از تگ‌های On-Demand Revalidation استفاده کنید
+      const response = await fetch(`${API_BASE_URL}/categories`, {
         next: { revalidate: 3600 },
       });
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
-
-      const result: ApiResponse<Category[]> = await response.json();
-      
-      // ما فقط به آرایه data نیاز داریم
-      return result.data;
+      const json = await response.json();
+      return json.data || [];
     } catch (error) {
-      console.error('Error fetching categories:', error);
-      return []; // در صورت خطا، یک آرایه خالی برمی‌گردانیم تا صفحه کرش نکند
+      console.error("Category API Error:", error);
+      return [];
     }
   },
 };
diff --git a/public/src/services/categories/store.tsx b/public/src/services/categories/store.tsx
new file mode 100644
index 0000000..c2ac699
--- /dev/null
+++ b/public/src/services/categories/store.tsx
@@ -0,0 +1,19 @@
+import { Category } from "../../types/categories";
+import { categoryService } from "./api";
+
+
+let cachedCategories: Category[] | null = null;
+
+export async function getAllCategories(): Promise<Category[]> {
+  if (cachedCategories) {
+    return cachedCategories;
+  }
+
+  const categories = await categoryService.getCategories();
+  cachedCategories = categories;
+  return categories;
+}
+
+export function clearCategoryCache() {
+  cachedCategories = null; 
+}
