diff --git a/app/category/[categoryName]/page.tsx b/app/category/[categoryName]/page.tsx
index 1b47aea..6a988a4 100644
--- a/app/category/[categoryName]/page.tsx
+++ b/app/category/[categoryName]/page.tsx
@@ -1,91 +1,40 @@
-import { products } from "@/lib/data";
-import ProductCard from "@/components/productcard";
+import { getProductsByCategory } from "@/public/src/services/products/api";
 
-interface PageProps {
-  params: Promise<{ categoryName: string }>;
-}
+export default async function CategoryPage({ params }:any) {
 
-export default async function CategoryPage({ params }: PageProps) {
-  try {
-    // ۱. دریافت پارامترها
-    const resolvedParams = await params;
-    const rawCategoryName = resolvedParams.categoryName;
-    
-    
-    // ۲. دیکد کردن آدرس
-    const decodedUrl = decodeURIComponent(rawCategoryName);
+  const { categoryName } = await params;
 
-    // ۳. آماده‌سازی رشته برای مقایسه
-    const categoryNameToMatch = decodedUrl.replace(/-/g, " ").trim();
+  console.log("🔎 CategoryPage slug:", categoryName);
 
-    // استخراج تمام دسته‌بندی‌های موجود در دیتابیس (برای بررسی چشمی)
-    const allCategoriesInDb = Array.from(new Set(products.map(p => p.category)));
+  const products = await getProductsByCategory(categoryName);
 
-    // ۴. فیلتر کردن (با حذف فاصله‌های اضافی از دو طرف برای اطمینان)
-    const filteredProducts = products.filter(
-      (p) => p.category.trim() === categoryNameToMatch
-    );
+  return (
+    <div className="p-8">
 
-    // ۵. اگر پیدا نشد، صفحه دیباگ را در مرورگر نمایش بده
-    if (!filteredProducts || filteredProducts.length === 0) {
-      return (
-        <main className="container mx-auto px-4 py-10" dir="rtl">
-          <div className="bg-red-50 border border-red-200 text-red-800 p-6 rounded-lg">
-            <h1 className="text-2xl font-bold mb-4">محصولی پیدا نشد (حالت دیباگ)</h1>
-            
-            <div className="mb-6 space-y-2">
-              <p>پارامتر دریافت شده از URL: <strong className="font-mono bg-white px-2 py-1 rounded">{rawCategoryName}</strong></p>
-              <p>رشته‌ی آماده شده برای جستجو: <strong className="font-mono bg-white px-2 py-1 rounded">{categoryNameToMatch}</strong> (طول: {categoryNameToMatch.length} کاراکتر)</p>
-            </div>
+      <h1 className="text-xl font-bold mb-6">
+        دسته‌بندی: {categoryName}
+      </h1>
 
-            <h2 className="text-xl font-bold mb-2">لیست دسته‌بندی‌های موجود در دیتابیس شما:</h2>
-            <ul className="list-disc list-inside space-y-1 bg-white p-4 rounded-md">
-              {allCategoriesInDb.map((cat, index) => (
-                <li key={index} className="font-mono">
-                  "{cat}" (طول: {cat.length} کاراکتر)
-                </li>
-              ))}
-            </ul>
-            
-            <p className="mt-4 text-sm text-gray-600">
-              لطفا طول کاراکترها و املای کلمات را در لیست بالا مقایسه کنید. (آیا نیم‌فاصله یا فاصله اضافه وجود دارد؟)
-              <br />
-              <strong>نکته مهم:</strong> برای دیدن لاگ‌های بیشتر، ترمینال (کنسول) محیط توسعه (مثلاً VSCode) را چک کنید، نه کنسول مرورگر را.
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+
+        {products.items.map((product:any) => (
+          <div key={product.id} className="border p-4 rounded-xl">
+
+            <div className="h-32 bg-gray-100 rounded mb-3" />
+
+            <h3 className="text-sm font-medium">
+              {product.title}
+            </h3>
+
+            <p className="text-xs text-gray-500">
+              {product.brand}
             </p>
+
           </div>
-        </main>
-      );
-    }
+        ))}
 
-    const categoryTitle = filteredProducts[0].category;
-
-    // رندر حالت موفق
-    return (
-      <main className="container mx-auto px-4 py-10" dir="rtl">
-        <div className="mb-8 border-b pb-4">
-          <h1 className="text-2xl font-bold text-gray-800">
-            دسته‌بندی: {categoryTitle}
-          </h1>
-          <p className="text-gray-500 mt-2">
-            تعداد محصولات یافت شده: {filteredProducts.length} مورد
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-          {filteredProducts.map((product) => (
-            <ProductCard key={product.id} product={product} />
-          ))}
-        </div>
-      </main>
-    );
-
-  } catch (error) {
-    // هندلینگ خطاهای غیرمنتظره
-    console.error("Critical Error in Category Page:", error);
-    return (
-      <div className="p-10 text-center text-red-500 font-bold">
-        خطای پردازشی رخ داد. لطفا ترمینال VSCode را بررسی کنید.
       </div>
-    );
-  }
+
+    </div>
+  );
 }
diff --git a/app/page.tsx b/app/page.tsx
index 709922e..5f5fe37 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -15,16 +15,29 @@ import { products } from "@/lib/data";
 import { articles } from "@/lib/data";
 import Link from "next/link";
 import { useCategories } from "@/components/context/categoryprovider";
+import { getProducts } from "@/public/src/services/products/api";
 
 
 
 
-export default function Home() {
+export default async function Home() {
   const [activeTab, setActiveTab] = useState(0);
   const brands = ["NTN", "KOYO", "NACHI", "TIMKEN", "FAG", "SKF"];
   const latestArticles = articles.slice(-4);
   const { rootCategories } = useCategories();
-  
+  const data = await getProducts(1, 20);
+
+  const products = data.items.map((p: any) => ({
+    id: p.id,
+    title: p.title,
+    brand: p.brand,
+    slug: p.slug, 
+    price: p.calculated_price,
+    stock: p.stock,
+    image: p.mainImageUrl || "/placeholder.png",
+    attributes: p.attributes
+  }));
+
   const features = [
     {
       icon: Headphones,
@@ -281,13 +294,13 @@ export default function Home() {
             </div>
           </div>
 
-          {/* products → فقط ۴ تای آخر */}
           <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-            {products.slice(-4).map((product, i) => (
-              <ProductCard key={i} product={product} />
+            {products.slice(-4).map((product: any) => (
+              <ProductCard key={product.id} product={product} />
             ))}
           </div>
 
+
         </div>
       </section>
 
diff --git a/app/products/[id]/[slug]/page.tsx b/app/product/[slug]/page.tsx
similarity index 70%
rename from app/products/[id]/[slug]/page.tsx
rename to app/product/[slug]/page.tsx
index 5600471..d400efd 100644
--- a/app/products/[id]/[slug]/page.tsx
+++ b/app/product/[slug]/page.tsx
@@ -1,28 +1,57 @@
 import ScrollToTop from '@/components/scrolltop';
-import { products } from '@/lib/data';
 import { notFound } from 'next/navigation';
 import Image from "next/image";
 import ProductCartAction from '@/components/cartaction';
+import { getProductBySlug } from "@/public/src/services/products/api";
 
 interface PageProps {
-  params: Promise<{
-    id: string;
-    slug: string;
-  }>;
+  params: Promise<{ slug: string }>;
 }
 
 export default async function SingleProductPage({ params }: PageProps) {
-  const resolvedParams = await params;
-  const product = products.find((p) => p.id.toString() === resolvedParams.id);
+  // --------------------------------------------------------
+  // ۱. منطق دریافت داده‌ها (دقیقا مشابه درخواست شما)
+  // --------------------------------------------------------
+  const resolvedParams = await params; 
+  const slug = resolvedParams.slug;
+
+  console.log("👉 Extracted slug from URL:", slug);
+
+  if (!slug) {
+    return notFound();
+  }
+
+  const product = await getProductBySlug(slug);
 
   if (!product) {
-    notFound();
+    console.log(`🔴 Product not found or API failed for slug: ${slug}`);
+    return notFound();
   }
+
+  // --------------------------------------------------------
+  // ۲. آماده‌سازی و مپ کردن داده‌های API برای UI
+  // --------------------------------------------------------
   
-  const formattedPrice = product.price
-    ? Number(product.price.toString().replace(/,/g, '')).toLocaleString('fa-IR')
+  // فرمت کردن قیمت
+  const formattedPrice = product.display_price
+    ? product.display_price.toLocaleString('fa-IR')
     : null;
 
+  // وضعیت موجودی
+  const hasStock = product.stock && product.stock > 0;
+
+  // تصویر محصول (جلوگیری از خطای null در next/image)
+  const imageUrl = product.mainImageUrl || '/placeholder-image.png'; // می‌توانید آدرس یک عکس پیش‌فرض را اینجا بگذارید
+
+  // دریافت ویژگی‌ها (Attributes) از آرایه دیتابیس با تابع کمکی
+  const getAttribute = (attrName: string) => {
+    const attr = product.attributes?.find((a: any) => a.name === attrName);
+    return attr ? attr.valueText : "-";
+  };
+
+  // --------------------------------------------------------
+  // ۳. خروجی UI (بدون تغییر در ساختار و استایل‌ها)
+  // --------------------------------------------------------
   return (
     <div className="bg-[#f8f9fc] min-h-screen py-8" dir="rtl">
       <div className="mx-auto px-4 lg:px-8 container max-w-7xl">
@@ -33,28 +62,20 @@ export default async function SingleProductPage({ params }: PageProps) {
           <span>خانه</span> &gt; <span>محصولات</span> &gt; <span className="text-gray-800 font-semibold">{product.title}</span>
         </div>
 
-        {/* 
-          کانتینر اصلی گرید (Grid)
-          موبایل: 1 ستون
-          دسکتاپ: 12 ستون
-        */}
         <div className="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
           
-          {/* ========================================= */}
-          {/* بخش 1: معرفی محصول (بالای ستون راست) */}
-          {/* دسکتاپ: 8 ستون عرض دارد. موبایل: اولین آیتم نمایش داده می‌شود */}
-          {/* ========================================= */}
+          {/* بخش 1: معرفی محصول */}
           <div className="lg:col-span-8 order-1 lg:order-none">
             <div className="bg-white rounded-3xl shadow-sm p-6 md:p-8 flex flex-col md:flex-row gap-8 items-center border border-gray-100">
               {/* باکس تصویر */}
               <div className="w-full md:w-[52%] h-72 rounded-2xl bg-[linear-gradient(135deg,#f8f9fc_0%,#e2e8f0_100%)] flex items-center justify-center p-6 relative">
-                {product.badge && (
+                {product.featured && (
                   <span className="absolute top-4 right-4 bg-orange-500 text-white text-xs font-bold px-2 py-1 rounded-md">
-                    {product.badge}
+                    پیشنهاد ویژه
                   </span>
                 )}
                 <Image
-                  src={product.image}
+                  src={imageUrl}
                   width={250}
                   height={250}
                   alt={product.title}
@@ -71,44 +92,37 @@ export default async function SingleProductPage({ params }: PageProps) {
                 </h1>
 
                 <p className='text-gray-500 text-[13px] mb-8'>
-                  طراحی شده برای عملکرد در دورهای بالا با آب‌بندی کامل پلاستیکی (Rubber Seal). مناسب برای الکتروموتور و گیربکس.
+                  {product.meta?.shortDescription || 'توضیحات کوتاهی برای این محصول ثبت نشده است.'}
                 </p>
 
                 <div className="grid grid-cols-2 gap-4">
-                  <div className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
-                    <span className="text-gray-500 text-sm mb-2">تحمل بار ($C$)</span>
-                    <span className="font-bold text-gray-800 text-lg" dir="ltr">{product.loadCapacity}</span>
-                  </div>
-                  <div className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
-                    <span className="text-gray-500 text-sm mb-2">سرعت نهایی</span>
-                    <span className="font-bold text-gray-800 text-lg" dir="ltr">{product.maxSpeed}</span>
-                  </div>
-                  <div className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
-                    <span className="text-gray-500 text-sm mb-2">نوع آب‌بند</span>
-                    <span className="font-bold text-gray-800 text-lg" dir="ltr">{product.sealType}</span>
-                  </div>
-                  <div className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
-                    <span className="text-gray-500 text-sm mb-2">محدوده دما</span>
-                    <span className="font-bold text-gray-800 text-lg" dir="ltr">{product.tempRange}</span>
-                  </div>
-                </div>
+  {/* رندر داینامیک ۳ ویژگی اول از API */}
+  {product.attributes?.slice(0, 3).map((attr: any) => (
+    <div key={attr.id} className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
+      <span className="text-gray-500 text-sm mb-2">{attr.name}</span>
+      <span className="font-bold text-gray-800 text-sm" dir="ltr">{attr.valueText || '-'}</span>
+    </div>
+  ))}
+
+  {/* آیتم چهارم: دسته‌بندی (برای حفظ ظاهر گرید ۴ تایی) */}
+  <div className="bg-gray-50 p-4 rounded-2xl flex flex-col items-center justify-center text-center border border-gray-100">
+    <span className="text-gray-500 text-sm mb-2">دسته‌بندی</span>
+    <span className="font-bold text-gray-800 text-sm" dir="ltr">{product.primaryCategory?.name || '-'}</span>
+  </div>
+</div>
+
               </div>
             </div>
           </div>
 
-          {/* ========================================= */}
-          {/* بخش 2: سایدبار و دکمه خرید (ستون چپ) */}
-          {/* دسکتاپ: 4 ستون عرض دارد و 2 ردیف طول دارد (row-span-2) تا کنار هر دو بخش راست بماند */}
-          {/* موبایل: با order-2 بین بخش معرفی و مشخصات قرار می‌گیرد */}
-          {/* ========================================= */}
+          {/* بخش 2: سایدبار و دکمه خرید */}
           <div className="lg:col-span-4 col-span-2 lg:row-span-2 order-2 lg:order-none relative h-full">
-            {/* کانتینر استیکی */}
             <div className="flex flex-col gap-4 lg:sticky lg:top-[20px] pb-8">
 
               <div className="bg-white rounded-[2rem] shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)] p-5 border border-gray-100 text-center">
-                {product.stock ? (
+                {hasStock ? (
                   <div className="bg-[#eaf8ee] text-[#28a745] py-3 rounded-2xl text-sm font-bold mb-4">
-                    موجود در انبار شیراز
+                    موجود در انبار ({product.stock} عدد)
                   </div>
                 ) : (
                   <div className="bg-red-50 text-red-500 py-3 rounded-2xl text-sm font-bold mb-4">
@@ -121,7 +135,7 @@ export default async function SingleProductPage({ params }: PageProps) {
                   {formattedPrice ? (
                     <>
                       <span className="text-3xl font-extrabold text-[#1a2332] tracking-tight">{formattedPrice}</span>
-                      <span className="text-gray-500 text-sm mt-2">تومان</span>
+                      <span className="text-gray-500 text-sm mt-2"> {product.currency_label}</span>
                     </>
                   ) : (
                     <span className="text-2xl font-extrabold text-[#1a2332]">استعلام قیمت</span>
@@ -143,6 +157,7 @@ export default async function SingleProductPage({ params }: PageProps) {
                 </div>
               </div>
 
+              {/* دکمه‌های دانلود دیتاشیت و مشاوره */}
               <div className="bg-white rounded-3xl p-5 shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)] border border-gray-100 hidden lg:flex justify-between items-center cursor-pointer hover:bg-gray-50 transition-colors">
                 <div className="flex flex-col gap-1 text-right">
                   <span className="font-extrabold text-[#1a2332] text-sm">دانلود دیتاشیت</span>
@@ -171,11 +186,7 @@ export default async function SingleProductPage({ params }: PageProps) {
             </div>
           </div>
 
-          {/* ========================================= */}
-          {/* بخش 3: مشخصات ابعادی (پایین ستون راست) */}
-          {/* دسکتاپ: 8 ستون عرض دارد و به طور خودکار زیر بخش معرفی قرار می‌گیرد */}
-          {/* موبایل: با order-3 در انتهای صفحه قرار می‌گیرد */}
-          {/* ========================================= */}
+          {/* بخش 3: مشخصات ابعادی */}
           <div className="lg:col-span-8 order-3 lg:order-none">
             <div className="bg-white rounded-3xl shadow-sm p-6 md:p-8 border border-gray-100">
               <div className="flex justify-between items-center mb-8 border-b border-gray-100 pb-4">
@@ -191,10 +202,10 @@ export default async function SingleProductPage({ params }: PageProps) {
                     <div className="absolute h-1/2 w-[1px] bg-orange-500 top-1/2 right-1/2"></div>
 
                     <div className="absolute top-1/2 -mt-5 left-[60%] text-orange-400 text-xs font-mono px-1 z-10" dir="ltr">
-                      {"$D=" + (product.l ? product.l.replace('mm', '').trim() : '') + "$"}
+                      {"$D=" + getAttribute('قطر خارجی').replace('mm', '').trim() + "$"}
                     </div>
                     <div className="absolute top-[60%] right-1/2 text-orange-400 text-xs font-mono px-1 z-10" dir="ltr">
-                      {"$d=" + (product.d ? product.d.replace('mm', '').trim() : '') + "$"}
+                      {"$d=" + getAttribute('قطر داخلی').replace('mm', '').trim() + "$"}
                     </div>
                   </div>
                 </div>
@@ -204,27 +215,27 @@ export default async function SingleProductPage({ params }: PageProps) {
                     <tbody>
                       <tr className="border-b border-gray-50">
                         <td className="py-3 text-gray-500">قطر داخلی ($d$)</td>
-                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.d}</td>
+                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('قطر داخلی')}</td>
                       </tr>
                       <tr className="border-b border-gray-50">
                         <td className="py-3 text-gray-500">قطر خارجی ($D$)</td>
-                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.l}</td>
+                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('قطر خارجی')}</td>
                       </tr>
                       <tr className="border-b border-gray-50">
                         <td className="py-3 text-gray-500">پهنا ($B$)</td>
-                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.width}</td>
+                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('پهنا')}</td>
                       </tr>
                       <tr className="border-b border-gray-50">
                         <td className="py-3 text-gray-500">وزن خالص</td>
-                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.weight}</td>
+                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('وزن')}</td>
                       </tr>
                       <tr className="border-b border-gray-50">
                         <td className="py-3 text-gray-500">جنس قفسه</td>
-                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.cageMaterial}</td>
+                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{getAttribute('جنس قفسه')}</td>
                       </tr>
                       <tr>
                         <td className="py-3 text-gray-500">کد بین‌المللی</td>
-                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.intCode}</td>
+                        <td className="py-3 font-bold text-gray-800 text-left" dir="ltr">{product.technicalCode}</td>
                       </tr>
                     </tbody>
                   </table>
diff --git a/app/products/page.tsx b/app/products/page.tsx
index 7c0ca36..e109338 100644
--- a/app/products/page.tsx
+++ b/app/products/page.tsx
@@ -1,15 +1,29 @@
 // app/products/page.tsx
-import ProductCard from '@/components/productcard'; // مسیر را با توجه به ساختار خود اصلاح کنید
-import { products } from '@/lib/data'; // ایمپورت دیتای مرکزی
+import ProductCard from '@/components/productcard';
+import { getProducts } from '@/public/src/services/products/api';
+
+export default async function ProductsPage() {
+  const data = await getProducts(1, 20);
+
+  const products = data.items.map((p: any) => ({
+    id: p.id,
+    title: p.title,
+    brand: p.brand,
+    price: p.calculated_price,
+    stock: p.stock,
+    slug: p.slug,
+    image: p.mainImageUrl || "/placeholder.png",
+    attributes: p.attributes
+  }));
 
-export default function ProductsPage() {
   return (
     <div className="container mx-auto p-4">
       <h1 className="text-2xl font-bold mb-6">همه محصولات</h1>
-      
+
+
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-        {products.map((product) => (
-          <ProductCard key={product.title} product={product} />
+        {products.map((product: any) => (
+          <ProductCard key={product.id} product={product} />
         ))}
       </div>
     </div>
diff --git a/components/context/cartcontext.tsx b/components/context/cartcontext.tsx
index b069a22..9294bb6 100644
--- a/components/context/cartcontext.tsx
+++ b/components/context/cartcontext.tsx
@@ -1,18 +1,19 @@
 'use client';
 
 import { createContext, useContext, useState, useEffect, ReactNode } from 'react';
+import { Product } from '@/public/src/types/product';
 
-export interface Product {
-    id: string;
-    title: string;
-    image: string;
-    l: string;
-    d: string;
-    brand: string;
-    price?: string | null;
-    badge?: string;
-    stock: boolean;
-}
+// export interface Product {
+//     id: string;
+//     title: string;
+//     image: string;
+//     l: string;
+//     d: string;
+//     brand: string;
+//     price?: string | null;
+//     badge?: string;
+//     stock: boolean;
+// }
 
 export interface CartItem extends Product {
     quantity: number;
diff --git a/components/productcard.tsx b/components/productcard.tsx
index 29a33b8..4613286 100644
--- a/components/productcard.tsx
+++ b/components/productcard.tsx
@@ -1,31 +1,24 @@
-'use client'; 
+'use client';
 
 import { Phone, Plus, ShoppingCart, Minus, Trash2 } from "lucide-react";
 import Image from "next/image";
 import Link from 'next/link';
-import { useCart, Product } from "./context/cartcontext"; 
+import { useCart } from "./context/cartcontext";
+import { Product } from "@/public/src/types/product";
+
 
 interface ProductCardProps {
     product: Product;
 }
 
+
 export default function ProductCard({ product }: ProductCardProps) {
     const { addToCart, decreaseQuantity, cart } = useCart();
-    
-    // پیدا کردن محصول در سبد خرید
+
     const cartItem = cart.find(item => item.id === product.id);
     const quantity = cartItem ? cartItem.quantity : 0;
+    const slug = product.slug;
 
-    const generateSlug = (text: string) => {
-        if (!text) return "";
-        return text
-          .trim()
-          .replace(/[\s\u200c]+/g, '-')
-          .replace(/[^\w\u0600-\u06FF0-9\-]/g, '')
-          .replace(/\-\-+/g, '-');
-    };
-      
-    const slug = generateSlug(product.title);
 
     const handleIncrease = (e: React.MouseEvent) => {
         e.preventDefault();
@@ -39,13 +32,14 @@ export default function ProductCard({ product }: ProductCardProps) {
         decreaseQuantity(product.id);
     };
 
-    // پاکسازی قیمت از ویرگول و تبدیل به عدد برای نمایش صحیح
-    const formattedPrice = product.price 
-        ? Number(product.price.toString().replace(/,/g, '')).toLocaleString('fa-IR') 
+    const formattedPrice = product.price
+        ? Number(product.price.toString().replace(/,/g, '')).toLocaleString('fa-IR')
         : null;
-      
+
+
+
     return (
-        <Link href={`/products/${product.id}/${slug}`} scroll={true} className="bg-white gap-1 flex flex-col justify-between border border-gray-200 rounded-xl shadow-sm p-4 transition-all hover:shadow-md">
+        <Link href={`/product/${slug}`} scroll={true} className="bg-white gap-1 flex flex-col justify-between border border-gray-200 rounded-xl shadow-sm p-4 transition-all hover:shadow-md">
 
             <div className="relative flex justify-center mb-4">
                 <span
@@ -55,7 +49,7 @@ export default function ProductCard({ product }: ProductCardProps) {
                 </span>
 
                 <Image
-                    src={product.image}
+                    src={product.image || "/placeholder.png"}
                     width={150}
                     height={150}
                     alt={product.title}
@@ -64,48 +58,58 @@ export default function ProductCard({ product }: ProductCardProps) {
 
             <p className="text-[#808080] text-sm">{product.brand}</p>
             <h3 className="text-sm font-semibold">{product.title}</h3>
-
             <div className="text-xs text-gray-500 mt-2">
-                <div className="flex border-b border-[#dfdfdf] mb-2 pb-2 justify-between">
-                    <p>قطر داخلی (L):</p>
-                    <p dir="ltr" className="font-semibold text-black">{product.l}</p>
-                </div>
+                {/* 
+                  ✅ این بخش را تغییر می‌دهیم تا نام attribute ها را بگیریم
+                  اگر attribute اول وجود داشت، نامش را بگیر و نمایش بده
+                  اگر attribute اول نبود، نمایش نده
+                */}
+                {product.attributes?.[0] && (
+                    <div className="flex border-b border-[#dfdfdf] mb-2 pb-2 justify-between">
+                        <p>{product.attributes[0].name}:</p> {/* 👈 نام attribute اول */}
+                        <p dir="ltr" className="font-semibold text-black">{product.attributes[0].valueText || "-"}</p> {/* 👈 مقدار attribute اول */}
+                    </div>
+                )}
 
-                <div className="flex justify-between">
-                    <p>قطر خارجی (D):</p>
-                    <p dir="ltr" className="font-semibold text-black">{product.d}</p>
-                </div>
+                {/* 
+                  ✅ مشابه بالا برای attribute دوم
+                */}
+                {product.attributes?.[1] && (
+                    <div className="flex justify-between">
+                        <p>{product.attributes[1].name}:</p> {/* 👈 نام attribute دوم */}
+                        <p dir="ltr" className="font-semibold text-black">{product.attributes[1].valueText || "-"}</p> {/* 👈 مقدار attribute دوم */}
+                    </div>
+                )}
             </div>
 
-            {/* بخش قیمت و دکمه خرید */}
+
             {product.price ? (
                 <div className="flex justify-between mt-3 items-center min-h-[32px]">
                     <span className="text-[0.85em] font-bold text-gray-800">
                         {formattedPrice} تومان
                     </span>
 
-                    {/* بررسی موجودی برای نمایش دکمه سبد خرید */}
                     {product.stock ? (
                         quantity > 0 ? (
-                            <div 
+                            <div
                                 className="flex items-center gap-3 bg-white border border-gray-200 rounded-lg py-1 px-2 shadow-sm"
                                 onClick={(e) => {
                                     e.preventDefault();
                                     e.stopPropagation();
                                 }}
                             >
-                                <button 
+                                <button
                                     onClick={handleIncrease}
                                     className="text-gray-500 hover:text-green-600 transition-colors"
                                 >
                                     <Plus size={16} />
                                 </button>
-                                
+
                                 <span className="text-xs font-bold text-gray-800 w-3 text-center">
                                     {quantity}
                                 </span>
-                                
-                                <button 
+
+                                <button
                                     onClick={handleDecrease}
                                     className="text-gray-500 hover:text-red-500 transition-colors"
                                 >
@@ -113,7 +117,7 @@ export default function ProductCard({ product }: ProductCardProps) {
                                 </button>
                             </div>
                         ) : (
-                            <button 
+                            <button
                                 onClick={handleIncrease}
                                 className="rounded-lg border border-[#e6e6e6] bg-gray-50 flex items-center p-2 text-gray-600 hover:bg-gray-200 transition-colors"
                                 title="افزودن به سبد خرید"
@@ -122,7 +126,6 @@ export default function ProductCard({ product }: ProductCardProps) {
                             </button>
                         )
                     ) : (
-                        // جایگزین دکمه خرید وقتی محصول ناموجود است
                         <span className="text-[10px] text-red-500 font-medium bg-red-50 px-2 py-1 rounded-md">
                             عدم موجودی
                         </span>
diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c..c4b7818 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/public/src/services/auth/api.tsx b/public/src/services/auth/api.tsx
index 756a364..c6a9403 100644
--- a/public/src/services/auth/api.tsx
+++ b/public/src/services/auth/api.tsx
@@ -30,7 +30,6 @@ export async function registerUser(data: RegisterPayload) {
   }
   
 
-  
 export async function loginUser(data: LoginPayload) {
   
     const response = await fetch(
diff --git a/public/src/services/products/api.tsx b/public/src/services/products/api.tsx
index 4bb41dd..f74723c 100644
--- a/public/src/services/products/api.tsx
+++ b/public/src/services/products/api.tsx
@@ -1,49 +1,95 @@
-import { ProductsResponse } from "../../types/product";
 
-const BASE_URL = "https://parsshop-back.mugit.ir/api";
+import { API_BASE_URL } from "../config";
 
-export const productService = {
-  /**
-   * دریافت لیست تمام محصولات
-   * @param page شماره صفحه (پیش‌فرض: 1)
-   * @param limit تعداد در هر صفحه (پیش‌فرض: 20)
-   * @returns ProductsResponse
-   */
-  async getProducts(page: number = 1, limit: number = 20): Promise<ProductsResponse> {
-    try {
-      // استفاده از URLSearchParams برای مدیریت تمیزتر کوئری پارامترها (در صورت نیاز)
-      const url = new URL(`${BASE_URL}/products`);
-      // اگر API شما از کوئری پشتیبانی می‌کند، می‌توانید به این شکل ارسال کنید:
-      // url.searchParams.append('page', page.toString());
-      // url.searchParams.append('limit', limit.toString());
+export async function getProductsByCategory(
+  slug: string,
+  page = 1,
+  limit = 20
+) {
+  try {
+    const url = `${API_BASE_URL}/products/categories/${slug}?page=${page}&limit=${limit}`;
 
-      const response = await fetch(url.toString(), {
-        method: "GET",
-        headers: {
-          // هدرهای ضروری بر اساس مستندات شما (معمولاً کلاینت فقط Accept را می‌فرستد)
-          "Accept": "application/json",
-          "Content-Type": "application/json; charset=utf-8",
-        },
-        // در Next.js برای کشینگ می‌توانید از گزینه‌های زیر استفاده کنید:
-        // cache: 'no-store', // اگر داده‌ها مدام تغییر می‌کنند (مثل موجودی)
-        next: { revalidate: 60 } // کش کردن داده‌ها برای 60 ثانیه (مناسب برای محصولات)
-      });
+    console.log("📡 Fetching:", url);
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`);
-      }
+    const res = await fetch(url, {
+      method: "GET",
+      headers: {
+        "Accept": "application/json",
+      },
+      cache: "no-store",
+    });
 
-      const data: ProductsResponse = await response.json();
-      return data;
-    } catch (error) {
-      console.error("Error fetching products:", error);
-      // مدیریت خطا (بسته به سیاست پروژه شما می‌تواند throw شود یا مقدار پیش‌فرض برگردد)
-      throw new Error("مشکلی در دریافت اطلاعات محصولات به وجود آمد.");
+    if (!res.ok) {
+      const errorText = await res.text();
+      console.error("❌ API error:", errorText);
+      throw new Error("API Error " + res.status);
     }
-  },
 
-  /**
-   * دریافت محصول بر اساس Slug یا ID (برای استفاده در صفحات سینگل پروداکت در آینده)
-   */
-  // async getProductBySlug(slug: string) { ... }
-};
+    const json = await res.json();
+
+    return json.data;
+  } catch (err) {
+    console.error("🔥 getProductsByCategory Error:", err);
+    return { items: [], meta: { total: 0, page: 1, limit: 20 } };
+  }
+}
+
+
+export async function getProducts(page = 1, limit = 20) {
+  try {
+    const url = `${API_BASE_URL}/products?page=${page}&limit=${limit}`;
+
+    console.log("📡 Fetching products:", url);
+
+    const res = await fetch(url, {
+      method: "GET",
+      headers: {
+        Accept: "application/json",
+      },
+      cache: "no-store",
+    });
+
+    if (!res.ok) {
+      const errorText = await res.text();
+      console.error("❌ API Error:", errorText);
+      throw new Error(`API Error ${res.status}`);
+    }
+
+    const json = await res.json();
+
+    return json.data;
+  } catch (error) {
+    console.error("🔥 getProducts error:", error);
+
+    return {
+      items: [],
+      meta: {
+        total: 0,
+        page: 1,
+        limit: 20,
+      },
+    };
+  }
+}
+
+
+export async function getProductBySlug(slug: string) {
+  try {
+    const url = `${API_BASE_URL}/product/${slug}`;
+
+    const res = await fetch(url, { cache: "no-store" });
+
+    if (!res.ok) {
+      const errorText = await res.text();
+      console.error("❌ API Error:", errorText);
+      throw new Error(`API Error ${res.status}`);
+    }
+
+    const json = await res.json();
+    return json.data;
+
+  } catch (err) {
+    console.error("🔥 getProductBySlug error:", err);
+    return null;
+  }
+}
diff --git a/public/src/types/product.tsx b/public/src/types/product.tsx
index 52699fd..ccf0562 100644
--- a/public/src/types/product.tsx
+++ b/public/src/types/product.tsx
@@ -1,32 +1,32 @@
-// ساختار هر محصول (Product) بر اساس بادی ریسپانس
-export interface Product {
-    id: string;
-    sku: string;
-    title: string;
-    slug: string;
-    technicalCode: string;
-    brand: string;
-    brandEntity: any | null; // اگر ساختار مشخصی دارد، بجای any از تایپ مناسب استفاده کنید
-    basePriceUSD: number;
-    salePriceUSD: number;
-    stock: number;
-    featured: boolean;
-    type: string;
-    status: string;
-    mainImageUrl: string | null;
-    threeDModelUrl: string | null;
-    imageGalleryUrls: string[];
-    tags: string[];
-    averageRating: number;
-    reviewsCount: number;
-    primaryCategory: any | null;
-    categories: any[];
-    meta: any | null;
-    createdAt: string;
-    updatedAt: string;
-    brandInfo: any | null;
-    attributes: any[];
-  }
+// // ساختار هر محصول (Product) بر اساس بادی ریسپانس
+// export interface Product {
+//     id: string;
+//     sku: string;
+//     title: string;
+//     slug: string;
+//     technicalCode: string;
+//     brand: string;
+//     brandEntity: any | null; // اگر ساختار مشخصی دارد، بجای any از تایپ مناسب استفاده کنید
+//     basePriceUSD: number;
+//     salePriceUSD: number;
+//     stock: number;
+//     featured: boolean;
+//     type: string;
+//     status: string;
+//     mainImageUrl: string | null;
+//     threeDModelUrl: string | null;
+//     imageGalleryUrls: string[];
+//     tags: string[];
+//     averageRating: number;
+//     reviewsCount: number;
+//     primaryCategory: any | null;
+//     categories: any[];
+//     meta: any | null;
+//     createdAt: string;
+//     updatedAt: string;
+//     brandInfo: any | null;
+//     attributes: any[];
+//   }
   
   // ساختار متادیتا (Paginagtion)
   export interface PaginationMeta {
@@ -35,15 +35,32 @@ export interface Product {
     limit: number;
   }
   
-  // ساختار نهایی ریسپانس (Response Body)
-  export interface ProductsResponse {
-    success: boolean;
-    statusCode: number;
-    path: string;
-    timestamp: string;
-    data: {
-      items: Product[];
-      meta: PaginationMeta;
-    };
-  }
+
+
+export interface ProductAttribute {
+  id: string;
+  name: string;
+  slug: string;
+  valueText: string | null;
+}
+
+export interface Product {
+  id: string;
+  title: string;
+  brand: string;
+  price?: number;
+  stock: number;
+  image: string;
+  slug: string;
+  attributes?: ProductAttribute[];
+}
+
+export interface ProductsResponse {
+  items: Product[];
+  meta: {
+    total: number;
+    page: number;
+    limit: number;
+  };
+}
   
\ No newline at end of file