diff --git a/src/app/data.ts b/src/app/data.ts
index 98bd6c9..4a2d275 100644
--- a/src/app/data.ts
+++ b/src/app/data.ts
@@ -1,119 +1,4 @@
-export const categories = [
-  "Abrasives & Polishing",
-  "Building & Grounds",
-  "Electrical & Lighting",
-  "Fabricating",
-  "Fastening & Joining",
-  "Filtering",
-  "Flow & Level Control",
-  "Furniture & Storage",
-  "Hand Tools",
-  "Hardware",
-  "Heating & Cooling",
-  "Lubricating",
-  "Material Handling",
-  "Measuring & Inspecting",
-  "Office Supplies & Signs",
-  "Pipe, Tubing, Hose & Fittings",
-  "Plumbing & Janitorial",
-  "Power Transmission",
-  "Pressure & Temperature Control",
-  "Pulling & Lifting",
-  "Raw Materials",
-  "Safety Supplies",
-  "Sealing & Cutting",
-  "Sealing",
-  "Shipping",
-  "Suspending",
-];
 
-export const productCategories = [
-  {
-    name: "Fastening & Joining",
-    subcategories: [
-      { name: "Screws & Bolts", icon: "/placeholder.svg?height=50&width=50" },
-      {
-        name: "Threaded Rods & Studs",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Eyebolts", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "U-Bolts", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Nuts", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Washers", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Shims", icon: "/placeholder.svg?height=50&width=50" },
-      {
-        name: "Helical & Threaded Inserts",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      {
-        name: "Spacers & Standoffs",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Pins", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Anchors", icon: "/placeholder.svg?height=50&width=50" },
-    ],
-  },
-  {
-    name: "Pipe, Tubing, Hose & Fittings",
-    subcategories: [
-      {
-        name: "Pipe Fittings & Pipe",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Pipe Hangers", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Pipe Joints", icon: "/placeholder.svg?height=50&width=50" },
-      {
-        name: "Pipe & Tube Repair Tools",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      {
-        name: "Pipe Flange Spreaders",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Tubing", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Tube Fittings", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Tube Cutters", icon: "/placeholder.svg?height=50&width=50" },
-      {
-        name: "Tube Flaring Tools",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Tube Benders", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Manifolds", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Hose", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Hose Fittings", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Hose Nozzles", icon: "/placeholder.svg?height=50&width=50" },
-      {
-        name: "Hose & Tube Clamps",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Hose Reels", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Tank Fittings", icon: "/placeholder.svg?height=50&width=50" },
-    ],
-  },
-  {
-    name: "Power Transmission",
-    subcategories: [
-      { name: "Bearings", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Bushings", icon: "/placeholder.svg?height=50&width=50" },
-      {
-        name: "Bearing & Gear Pullers",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Bearing Heaters", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Motors", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Speed Reducers", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Clutches", icon: "/placeholder.svg?height=50&width=50" },
-      {
-        name: "Brake & Clutch Lining",
-        icon: "/placeholder.svg?height=50&width=50",
-      },
-      { name: "Shafts", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Shaft Couplings", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "Shaft Collars", icon: "/placeholder.svg?height=50&width=50" },
-      { name: "U-Joints", icon: "/placeholder.svg?height=50&width=50" },
-    ],
-  },
-];
 
 
 
@@ -223,12 +108,13 @@ export const artSupplies = [
     collectionName: "Painting Supplies",
     categories: [{
       categoryName: "Acrylic Paints (Basic and Professional Grades)",
+      icon: "/images/acrylic-paint-icon.png",
       categoryItems: [
         {
           subCollectionName: "Basic Acrylic Paints",
           subcategories: [
             {
-              name: "Student Grade",
+              subcategoryName: "Student Grade",
               products: [
                 {
                   name: "Basics Acrylic Paint Set",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 7a745ff..3fa61b8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -3,7 +3,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import { Input } from "@/components/ui/input";
 import { Search } from "lucide-react";
-import { categories } from "./data";
+// import { artSupplies } from "./data";
 import Link from "next/link";
 
 const helvetica = localFont({
@@ -36,7 +36,7 @@ export default function RootLayout({
         className={`${helvetica.variable} ${helveticaRoman.variable} ${futura.variable} flex min-h-full flex-col antialiased`}
       >
         <div className="flex flex-grow flex-col">
-          <header className="font-futura flex items-center justify-between border-b-2 border-yellow-300 p-4">
+          <header className="flex items-center justify-between border-b-2 border-yellow-300 p-4 font-futura">
             <div className="flex items-center space-x-4">
               <Link href="/" className="text-4xl font-bold text-green-800">
                 NextMaster
@@ -70,7 +70,7 @@ export default function RootLayout({
                 Choose a Category
               </h2>
               <ul className="">
-                {categories.map((category) => (
+                {/* {categories.map((category) => (
                   <li key={category} className="group pb-2 hover:bg-yellow-200">
                     <a
                       href="#"
@@ -79,7 +79,7 @@ export default function RootLayout({
                       {category}
                     </a>
                   </li>
-                ))}
+                ))} */}
               </ul>
             </aside>
             <main className="flex-grow">{children}</main>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c7046dc..3a14839 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,27 +1,29 @@
 import Link from "next/link";
-import { productCategories } from "./data";
+import { artSupplies } from "./data";
 
 export default function Home() {
   return (
     <main className="flex-1 p-4">
-      {productCategories.map((category) => (
-        <div key={category.name} className="mb-8">
-          <h2 className="mb-4 text-xl font-semibold">{category.name}</h2>
+      {artSupplies.map((collection) => (
+        <div key={collection.collectionName} className="mb-8">
+          <h2 className="mb-4 text-xl font-semibold">
+            {collection.collectionName}
+          </h2>
           <div className="grid grid-cols-2 gap-4 border-b-2 pb-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-            {category.subcategories.map((subcategory) => (
+            {collection.categories.map((category) => (
               <Link
-                key={subcategory.name}
+                key={category.categoryName}
                 className="flex flex-col items-center text-center"
-                href={`/products/${subcategory.name}`}
+                href={`/products/${category.categoryName}`}
               >
                 <img
-                  src={subcategory.icon}
-                  alt={subcategory.name}
+                  src={category.icon}
+                  alt={category.categoryName}
                   className="mb-2 h-14 w-14 border hover:bg-yellow-200"
                   width={48}
                   height={48}
                 />
-                <span className="text-xs">{subcategory.name}</span>
+                <span className="text-xs">{category.categoryName}</span>
               </Link>
             ))}
           </div>
diff --git a/src/app/products/[category]/[subcategory]/page.tsx b/src/app/products/[category]/[subcategory]/page.tsx
index fb7af52..f8c335f 100644
--- a/src/app/products/[category]/[subcategory]/page.tsx
+++ b/src/app/products/[category]/[subcategory]/page.tsx
@@ -1,35 +1,7 @@
 import Link from "next/link";
 import Image from "next/image";
-const screwTypes = [
-  {
-    name: "Socket Head Screws",
-    items: [
-      {
-        name: "Alloy Steel Socket Head Screws",
-        description: "The standard for high-strength fastening.",
-        imageUrl: "/placeholder.svg?height=50&width=50",
-      },
-      {
-        name: "Mil. Spec. Alloy Steel Socket Head Screws",
-        description:
-          "Choose these screws for their adherence to strict military standards for material and construction.",
-        imageUrl: "/placeholder.svg?height=50&width=50",
-      },
-      {
-        name: "Torx Alloy Steel Socket Head Screws",
-        description:
-          "A Torx-Plus drive has more points of contact than a hex drive, allowing you to tighten these screws with less slippage or damage to the recess.",
-        imageUrl: "/placeholder.svg?height=50&width=50",
-      },
-      {
-        name: "Left-Hand Threaded Alloy Steel Socket Head Screws",
-        description:
-          "Tighten these screws by turning them to the left; once fastened, they prevent counterclockwise-moving parts from loosening.",
-        imageUrl: "/placeholder.svg?height=50&width=50",
-      },
-    ],
-  },
-];
+import { artSupplies } from "@/app/data";
+import { notFound } from "next/navigation";
 
 export default async function Page(props: {
   params: Promise<{
@@ -38,43 +10,51 @@ export default async function Page(props: {
   }>;
 }) {
   const { subcategory, category } = await props.params;
+  const urlDecodedCategory = decodeURIComponent(category);
+  const categoryData = artSupplies.find((c) =>
+    c.categories.find((cat) => cat.categoryName === urlDecodedCategory),
+  );
+  const cat = categoryData?.categories.find(
+    (cat) => cat.categoryName === urlDecodedCategory,
+  );
+  const urlDecodedSubcategory = decodeURIComponent(subcategory);
+  const screwTypes = cat?.categoryItems.find((collection) =>
+    collection.subcategories.find(
+      (sub) => sub.subcategoryName === urlDecodedSubcategory,
+    ),
+  );
+  const sub = screwTypes?.subcategories.find(
+    (sub) => sub.subcategoryName === urlDecodedSubcategory,
+  );
+  if (!sub) {
+    return notFound();
+  }
   return (
     <div className="container mx-auto p-4">
       <h1 className="mb-2 border-b-2 text-sm font-bold">690 Products</h1>
-      <div className="space-y-4">
-        {screwTypes.map((collection, index) => (
-          <div key={index}>
-            <h2 className="mb-2 border-b-2 text-lg font-semibold">
-              {collection.name}
-            </h2>
-            <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
-              {collection.items.map((item, subcategoryIndex) => (
-                <Link
-                  key={subcategoryIndex}
-                  className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
-                  href={`/products/${category}/${subcategory}/${item.name}`}
-                >
-                  <div className="py-2">
-                    <Image
-                      src="/placeholder.svg?height=48&width=48"
-                      alt={item.name}
-                      width={48}
-                      height={48}
-                      className="h-12 w-12 flex-shrink-0 object-cover"
-                    />
-                  </div>
-                  <div className="flex h-24 flex-grow flex-col items-start py-2">
-                    <div className="text-sm font-medium text-gray-700 group-hover:underline">
-                      {item.name}
-                    </div>
-                    <p className="overflow-hidden text-xs">
-                      {item.description}
-                    </p>
-                  </div>
-                </Link>
-              ))}
+      <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
+        {sub.products.map((item) => (
+          <Link
+            key={item.name}
+            className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
+            href={`/products/${category}/${subcategory}/${item.name}`}
+          >
+            <div className="py-2">
+              <Image
+                src="/placeholder.svg?height=48&width=48"
+                alt={item.name}
+                width={48}
+                height={48}
+                className="h-12 w-12 flex-shrink-0 object-cover"
+              />
+            </div>
+            <div className="flex h-24 flex-grow flex-col items-start py-2">
+              <div className="text-sm font-medium text-gray-700 group-hover:underline">
+                {item.name}
+              </div>
+              <p className="overflow-hidden text-xs">{item.description}</p>
             </div>
-          </div>
+          </Link>
         ))}
       </div>
     </div>
diff --git a/src/app/products/[category]/page.tsx b/src/app/products/[category]/page.tsx
index e82ab7c..3c26d59 100644
--- a/src/app/products/[category]/page.tsx
+++ b/src/app/products/[category]/page.tsx
@@ -1,143 +1,43 @@
 import Image from "next/image";
 import Link from "next/link";
-
-const adhesiveCategories = [
-  {
-    title: "Epoxy Structural Adhesives",
-    products: [
-      {
-        name: "Epoxy Structural Adhesives",
-        description:
-          "Epoxies are the strongest and most weather- and chemical-resistant structural adhesives. They work especially well on metals.",
-      },
-      {
-        name: "Quick-Set Epoxy Structural Adhesives",
-        description:
-          "For quick repairs, these epoxies begin to harden in 5 minutes or less.",
-      },
-      {
-        name: "Toughened Epoxy Structural Adhesives",
-        description:
-          "Toughened adhesives are blended with rubber particles for better impact resistance than standard epoxies. They form flexible, resilient bonds.",
-      },
-      {
-        name: "Epoxy Structural Adhesive Assortments",
-        description:
-          "Assortments include eight different epoxies in 0.1-oz. packets to handle a variety of small jobs.",
-      },
-      {
-        name: "Slow-Set Epoxy Structural Adhesives",
-        description:
-          "To allow time to adjust and position parts, these epoxies remain workable for at least 90 minutes.",
-      },
-      {
-        name: "Optically Clear Epoxy Structural Adhesives",
-        description: "For invisible bond lines, these adhesives dry clear.",
-      },
-      {
-        name: "Waterproof Epoxy Structural Adhesives",
-        description:
-          "Even when used under water, these adhesives maintain their strength.",
-      },
-      {
-        name: "Epoxy Structural Adhesives for Hard-to-Bond Materials",
-        description:
-          "Fasten hard-to-bond plastics, such as polypropylene and polyethylene, with these epoxies.",
-      },
-    ],
-  },
-  {
-    title: "Acrylic Structural Adhesives",
-    products: [
-      {
-        name: "Toughened Acrylic Structural Adhesives",
-        description:
-          "Toughened adhesives are blended with rubber particles for better impact resistance than standard acrylics. They form resilient bonds.",
-      },
-      {
-        name: "No-Mix Acrylic Structural Adhesives",
-        description:
-          "No need to mix these acrylics— apply adhesive to one surface and activator to the other, then bring surfaces together to bond.",
-      },
-      {
-        name: "High-Strength Acrylic Structural Adhesives",
-        description:
-          "With excellent shear strength, these acrylics form bonds at least 25% stronger than standard acrylic structural adhesives.",
-      },
-      {
-        name: "Acrylic Structural Adhesives for Hard-to-Bond Materials",
-        description:
-          "Fasten hard-to-bond plastics, such as polypropylene and polyethylene, with these adhesives.",
-      },
-    ],
-  },
-  {
-    title: "Urethane Structural Adhesives",
-    products: [
-      {
-        name: "Urethane Structural Adhesives",
-        description:
-          "Urethane adhesives are the most flexible, so they bond dissimilar materials and damp vibration.",
-      },
-      {
-        name: "High-Strength Urethane Structural Adhesives",
-        description:
-          "With high shear strength and peel strength, these form the strongest bonds of our urethane adhesives.",
-      },
-    ],
-  },
-  {
-    title: "Instant-Bond Adhesives",
-    products: [
-      {
-        name: "Instant-Bond Adhesives",
-        description: "Also known as super glue, these adhesives bond quickly.",
-      },
-      {
-        name: "Instant-Bond Adhesives for Hard-to-Bond Materials",
-        description:
-          "Fasten hard-to-bond plastics, such as polypropylene and polyethylene.",
-      },
-      {
-        name: "Toughened Instant-Bond Adhesives",
-        description:
-          "Mixed with rubber for better impact resistance than standard instant-bond adhesives, these adhesives form strong, resilient bonds.",
-      },
-      {
-        name: "Flexible Instant-Bond Adhesives",
-        description:
-          "Accommodate joint movement with these adhesives that remain pliable when cured.",
-      },
-    ],
-  },
-];
-
+import { artSupplies } from "../../data";
+import { notFound } from "next/navigation";
 export default async function Page(props: {
   params: Promise<{
     category: string;
   }>;
 }) {
   const { category } = await props.params;
+  const urlDecoded = decodeURIComponent(category);
+  const categoryData = artSupplies.find((c) =>
+    c.categories.find((cat) => cat.categoryName === urlDecoded),
+  );
+  const cat = categoryData?.categories.find(
+    (cat) => cat.categoryName === urlDecoded,
+  );
+  if (!categoryData || !cat) {
+    return notFound();
+  }
   return (
     <div className="container mx-auto p-4">
       <h1 className="mb-2 border-b-2 text-sm font-bold">690 Products</h1>
       <div className="space-y-4">
-        {adhesiveCategories.map((collection, index) => (
+        {cat.categoryItems.map((collection, index) => (
           <div key={index}>
             <h2 className="mb-2 border-b-2 text-lg font-semibold">
-              {collection.title}
+              {collection.subCollectionName}
             </h2>
             <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-4">
-              {collection.products.map((subcategory, subcategoryIndex) => (
+              {collection.subcategories.map((subcategory, subcategoryIndex) => (
                 <Link
                   key={subcategoryIndex}
                   className="group flex h-full flex-row border px-4 py-2 hover:bg-gray-100"
-                  href={`/products/${category}/${subcategory.name}`}
+                  href={`/products/${category}/${subcategory.subcategoryName}`}
                 >
                   <div className="py-2">
                     <Image
                       src="/placeholder.svg?height=48&width=48"
-                      alt={subcategory.name}
+                      alt={subcategory.subcategoryName}
                       width={48}
                       height={48}
                       className="h-12 w-12 flex-shrink-0 object-cover"
@@ -145,11 +45,8 @@ export default async function Page(props: {
                   </div>
                   <div className="flex h-24 flex-grow flex-col items-start py-2">
                     <div className="text-sm font-medium text-gray-700 group-hover:underline">
-                      {subcategory.name}
+                      {subcategory.subcategoryName}
                     </div>
-                    <p className="overflow-hidden text-xs">
-                      {subcategory.description}
-                    </p>
                   </div>
                 </Link>
               ))}