diff --git a/app/[carType]/page.tsx b/app/[carType]/page.tsx
new file mode 100644
index 0000000..0e741d3
--- /dev/null
+++ b/app/[carType]/page.tsx
@@ -0,0 +1,13 @@
+"use client"
+
+import CarType_Header from "@/components/carTypePageParts/carType_head";
+import { useParams } from "next/navigation"
+
+export default function CartType() {
+    const router = useParams();
+  return (
+    <div>
+        <CarType_Header/>
+    </div>
+  )
+}
diff --git a/components/carTypePageParts/carType_head.tsx b/components/carTypePageParts/carType_head.tsx
new file mode 100644
index 0000000..f080151
--- /dev/null
+++ b/components/carTypePageParts/carType_head.tsx
@@ -0,0 +1,10 @@
+"use client"
+
+import { useParams } from "next/navigation"
+
+export default function CarType_Header() {
+  const router = useParams();
+  return (
+    <div>Header</div>
+  )
+}
diff --git a/components/carTypePageParts/productCard.tsx b/components/carTypePageParts/productCard.tsx
new file mode 100644
index 0000000..d1a3fe3
--- /dev/null
+++ b/components/carTypePageParts/productCard.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import { ProductTypes } from "@/types";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function ProductCard({data}:{data: ProductTypes}) {
+    return (
+    <Link href={`/${data.path}`} className="flex flex-col items-center justify-between rounded-sm hover:scale-105 hover:cursor-pointer hover:shadow-[0px_0px_5px_10px_#ebebeb]">
+      <div className="rounded-t-lg bg-white py-15 px-2" >
+        <Image
+          src={data.image}
+          alt={data.truck_name}
+          width={200}
+          className="object-contain h-auto"
+        />
+      </div>
+      <div className="bg-[#fafafa] w-full py-5 rounded-b-lg flex flex-col items-center justify-center ">
+        <p>{data.truck_name}</p>
+        <p className="text-secondary">{data.desc}</p>
+      </div>
+    </Link>
+  );
+}
diff --git a/components/pageParts/products.tsx b/components/pageParts/products.tsx
index c59ef98..56a2210 100644
--- a/components/pageParts/products.tsx
+++ b/components/pageParts/products.tsx
@@ -5,7 +5,9 @@ import Title from "../title";
 import Text from "../text";
 import { Asphalt, Ekskavator, Forklift, Kran, Truck } from "@/assets";
 import Image from "next/image";
-import type {productFilterTypes}  from "@/types";
+import type {productFilterTypes, ProductTypes}  from "@/types";
+import { allProducts } from "@/data";
+import ProductCard from "../carTypePageParts/productCard";
 
 const productFilterTypes: productFilterTypes[] = [
   { name: "trucks", image: Truck },
@@ -19,7 +21,7 @@ export default function Products() {
   //product type togle states
   const [productFilter, setProductFilter] = useState<string | null>(null);
   return (
-    <div>
+    <div className="max-w-[1200px] w-full mx-auto">
       {/* title part */}
       <div className="flex flex-col md:gap-8 gap-4">
         <div className="flex items-center justify-center w-full ">
@@ -55,7 +57,11 @@ export default function Products() {
       </div>
 
       {/* products */}
-      <div></div>
+      <div className="grid gap-5 grid-cols-1 min-sm:grid-cols-2 min-lg:grid-cols-4 min-[1210px]:grid-cols-4" >
+        {allProducts.map((item:ProductTypes)=>(
+          <ProductCard data={item} />
+        ))}
+      </div>
     </div>
   );
 }
diff --git a/data/index.ts b/data/index.ts
index e69de29..74c6888 100644
--- a/data/index.ts
+++ b/data/index.ts
@@ -0,0 +1,187 @@
+import {
+  Balon,
+  Buldozer,
+  Digger,
+  Forkliftlar,
+  Gazel,
+  Grayder,
+  Kat,
+  Kompressor,
+  Kran1,
+  Kran2,
+  Kran3,
+  Kran4,
+  Kran5,
+  Mikser,
+  Mini,
+  Old,
+  Paletli,
+  Samasval,
+  Teleskop,
+  Treyler,
+} from "@/assets";
+import { ProductTypes } from "@/types";
+import { StaticImageData } from "next/image";
+
+export const trucks: ProductTypes[] = [
+  {
+    id: 1,
+    truck_name: "cement-truck",
+    desc: "agreement",
+    path: "cement-truck",
+    image: Mikser,
+  },
+  {
+    id: 2,
+    truck_name: "dumb-truck",
+    desc: "agreement",
+    path: "dumb-truck",
+    image: Samasval,
+  },
+  {
+    id: 3,
+    truck_name: "trailers",
+    desc: "agreement",
+    path: "trailers",
+    image: Treyler,
+  },
+  {
+    id: 4,
+    truck_name: "gazels",
+    desc: "agreement",
+    path: "gazels",
+    image: Gazel,
+  },
+];
+
+export const cranes: ProductTypes[] = [
+  {
+    id: 1,
+    truck_name: "avtotowers",
+    desc: "agreement",
+    path: "avtotowers",
+    image: Kran1,
+  },
+  {
+    id: 2,
+    truck_name: "crawler-cranes",
+    desc: "agreement",
+    path: "crawler-cranes",
+    image: Kran2,
+  },
+  {
+    id: 3,
+    truck_name: "tower-cranes",
+    desc: "agreement",
+    path: "tower-cranes",
+    image: Kran3,
+  },
+  {
+    id: 4,
+    truck_name: "lifters",
+    desc: "agreement",
+    path: "lifters",
+    image: Kran4,
+  },
+  {
+    id: 5,
+    truck_name: "lifters",
+    desc: "agreement",
+    path: "lifters",
+    image: Kran5,
+  },
+];
+
+export const forklift: ProductTypes[] = [
+  {
+    id: 1,
+    truck_name: "front-loaders",
+    desc: "agreement",
+    path: "front-loaders",
+    image: Old,
+  },
+  {
+    id: 2,
+    truck_name: "tele-loaders",
+    desc: "agreement",
+    path: "tele-loaders",
+    image: Teleskop,
+  },
+  {
+    id: 3,
+    truck_name: "forklift-trucks",
+    desc: "agreement",
+    path: "forklift-trucks",
+    image: Forkliftlar,
+  },
+];
+
+export const excavators: ProductTypes[] = [
+  {
+    id: 1,
+    truck_name: "crawler-excavators",
+    desc: "agreement",
+    path: "crawler-excavators",
+    image: Paletli,
+  },
+  {
+    id: 2,
+    truck_name: "wheel-excavators",
+    desc: "agreement",
+    path: "wheel-excavators",
+    image: Balon,
+  },
+  {
+    id: 3,
+    truck_name: "mini-excavators",
+    desc: "agreement",
+    path: "mini-excavators",
+    image: Mini,
+  },
+  {
+    id: 4,
+    truck_name: "excavator-loaders",
+    desc: "agreement",
+    path: "excavator-loaders",
+    image: Digger,
+  },
+];
+
+export const road_repairs: ProductTypes[] = [
+  {
+    id: 1,
+    truck_name: "avtograders",
+    desc: "agreement",
+    path: "avtograders",
+    image: Grayder,
+  },
+  {
+    id: 2,
+    truck_name: "buldozers",
+    desc: "agreement",
+    path: "buldozers",
+    image: Buldozer,
+  },
+  {
+    id: 3,
+    truck_name: "katkas",
+    desc: "agreement",
+    path: "katkas",
+    image: Kat,
+  },
+  {
+    id: 4,
+    truck_name: "compressors",
+    desc: "agreement",
+    path: "compressors",
+    image: Kompressor,
+  },
+];
+
+export const allProducts : ProductTypes[] = [
+  ...trucks,
+  ...cranes,
+  ...forklift,
+  ...excavators,
+  ...road_repairs,
+];
diff --git a/types/index.ts b/types/index.ts
index 12ce4fe..b885003 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -30,4 +30,12 @@ export interface ProductCardType extends MainProductCard{
     turboDizel?:string;
     ogirlig?:string;
     bomUzunlik?:string;
+}
+
+export interface ProductTypes {
+  id: number;
+  truck_name: string;
+  desc: string;
+  path: string;
+  image: string | StaticImageData;
 }
\ No newline at end of file