diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 2e9d6c3..0684eb4 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -2,7 +2,8 @@
   "permissions": {
     "allow": [
       "Bash(yarn add:*)",
-      "Bash(yarn build)"
+      "Bash(yarn build)",
+      "Bash(copy \"D:\\\\Development\\\\Dasnuve\\\\TCM Sales\\\\landing-page\\\\public\\\\assets\\\\isotype.png\" \"D:\\\\Development\\\\Dasnuve\\\\TCM Sales\\\\landing-page\\\\app\\\\icon.png\")"
     ]
   }
 }
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index e612894..c101908 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -61,7 +61,7 @@ export default function Footer() {
                     alt="TCM Sales & Marketing"
                     width={50}
                     height={50}
-                    className="w-12 h-12 object-contain brightness-0 invert"
+                    className="w-12 h-12 object-contain"
                   />
                   <div>
                     <span className="font-bold text-xl">TCM</span>
diff --git a/app/favicon.ico b/app/favicon.ico
deleted file mode 100644
index 718d6fe..0000000
Binary files a/app/favicon.ico and /dev/null differ
diff --git a/app/layout.tsx b/app/layout.tsx
index f6503fd..2c4dddc 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -28,6 +28,10 @@ export const metadata: Metadata = {
     "sustainability",
     "green products",
   ],
+  icons: {
+    icon: "/assets/isotype.png",
+    apple: "/assets/isotype.png",
+  },
   openGraph: {
     title: "TCM Sales & Marketing",
     description: "Your Foodservice and Janitorial Sales Experts",
diff --git a/app/products/page.tsx b/app/products/page.tsx
new file mode 100644
index 0000000..c1041cf
--- /dev/null
+++ b/app/products/page.tsx
@@ -0,0 +1,580 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useState } from "react";
+import Navigation from "../components/Navigation";
+import Footer from "../components/Footer";
+import AnimatedButton from "../components/AnimatedButton";
+import FadeIn, { StaggerContainer, StaggerItem } from "../components/FadeIn";
+import {
+  ArrowRightIcon,
+  PackageIcon,
+  LeafIcon,
+  SparklesIcon,
+  TruckIcon,
+  CheckIcon,
+} from "../components/Icons";
+
+const categories = [
+  {
+    id: "packaging",
+    icon: PackageIcon,
+    title: "Foodservice Packaging",
+    description:
+      "Complete range of containers, cutlery, and packaging solutions for restaurants, caterers, and food service operations.",
+    color: "from-orange-500 to-red-500",
+    bgColor: "bg-orange-50 dark:bg-orange-950/20",
+    products: [
+      "Foam Containers",
+      "PETE Deli Containers",
+      "Foil Rounds",
+      "Microwavable Containers",
+      "Disposable Cutlery & Cutlery Kits",
+      "Dual Ovenable",
+      "Straws",
+      "Clear Hinged Containers",
+    ],
+  },
+  {
+    id: "green",
+    icon: LeafIcon,
+    title: "Green Products",
+    description:
+      "Eco-friendly, sustainable alternatives including compostable and recyclable options for environmentally conscious businesses.",
+    color: "from-emerald-500 to-teal-500",
+    bgColor: "bg-emerald-50 dark:bg-emerald-950/20",
+    products: [
+      "Dinnerware",
+      "Hinged Containers",
+      "Compostable Cutlery",
+      "Compostable Cups",
+      "Compostable Can Liners",
+      "Recyclable PETE & PP Containers",
+      "PLA Lined Containers",
+    ],
+  },
+  {
+    id: "catering",
+    icon: SparklesIcon,
+    title: "Catering & Specialty",
+    description:
+      "Premium solutions for catering operations including custom printed options and specialty containers.",
+    color: "from-purple-500 to-pink-500",
+    bgColor: "bg-purple-50 dark:bg-purple-950/20",
+    products: [
+      "Printed Containers",
+      "Printed Wraps & Bags",
+      "Specialty Catering Containers",
+      "Premium Serving Trays",
+      "Custom Branded Solutions",
+    ],
+  },
+  {
+    id: "janitorial",
+    icon: TruckIcon,
+    title: "Janitorial Supplies",
+    description:
+      "Essential cleaning and maintenance supplies to keep your facilities spotless and hygienic.",
+    color: "from-blue-500 to-cyan-500",
+    bgColor: "bg-blue-50 dark:bg-blue-950/20",
+    products: [
+      "Can Liners",
+      "Toilet Seat Covers",
+      "Urinal Blocks",
+      "Urinal Screens",
+      "Gloves",
+    ],
+  },
+];
+
+export default function ProductsPage() {
+  const [activeCategory, setActiveCategory] = useState<string | null>(null);
+
+  return (
+    <main className="relative">
+      <Navigation />
+
+      {/* Hero Section */}
+      <section className="relative min-h-[60vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-neutral-50 via-white to-neutral-100 dark:from-neutral-950 dark:via-neutral-900 dark:to-neutral-950">
+        {/* Animated background */}
+        <div className="absolute inset-0 overflow-hidden">
+          <motion.div
+            className="absolute top-0 left-1/4 w-[600px] h-[600px] bg-[hsl(0,100%,70%)] rounded-full filter blur-[180px] opacity-10"
+            animate={{
+              scale: [1, 1.2, 1],
+              x: [0, 30, 0],
+            }}
+            transition={{
+              duration: 10,
+              repeat: Infinity,
+              ease: "easeInOut",
+            }}
+          />
+          <motion.div
+            className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-emerald-500 rounded-full filter blur-[150px] opacity-10"
+            animate={{
+              scale: [1.2, 1, 1.2],
+              x: [0, -30, 0],
+            }}
+            transition={{
+              duration: 12,
+              repeat: Infinity,
+              ease: "easeInOut",
+            }}
+          />
+        </div>
+
+        {/* Floating product icons */}
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          {[
+            { Icon: PackageIcon, top: "20%", left: "10%", delay: 0 },
+            { Icon: LeafIcon, top: "60%", left: "5%", delay: 0.5 },
+            { Icon: SparklesIcon, top: "30%", right: "8%", delay: 1 },
+            { Icon: TruckIcon, top: "70%", right: "12%", delay: 1.5 },
+          ].map((item, i) => (
+            <motion.div
+              key={i}
+              className="absolute"
+              style={{
+                top: item.top,
+                left: item.left,
+                right: item.right,
+              }}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 0.2, y: 0 }}
+              transition={{ delay: item.delay, duration: 0.8 }}
+            >
+              <motion.div
+                animate={{ y: [0, -15, 0], rotate: [0, 5, 0] }}
+                transition={{
+                  duration: 4,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                  delay: item.delay,
+                }}
+              >
+                <item.Icon
+                  size={48}
+                  className="text-neutral-300 dark:text-neutral-700"
+                />
+              </motion.div>
+            </motion.div>
+          ))}
+        </div>
+
+        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6 }}
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[hsl(0,100%,40%)]/10 border border-[hsl(0,100%,40%)]/20 mb-8"
+          >
+            <PackageIcon size={16} className="text-[hsl(0,100%,40%)]" />
+            <span className="text-sm font-medium text-[hsl(0,100%,35%)] dark:text-[hsl(0,100%,60%)]">
+              Our Product Range
+            </span>
+          </motion.div>
+
+          <motion.h1
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.1 }}
+            className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-bold text-neutral-900 dark:text-white mb-6"
+          >
+            Everything You{" "}
+            <span className="bg-gradient-to-r from-[hsl(0,100%,35%)] via-[hsl(0,100%,45%)] to-[hsl(0,100%,55%)] bg-clip-text text-transparent">
+              Need
+            </span>
+          </motion.h1>
+
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="max-w-2xl mx-auto text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 mb-10 leading-relaxed"
+          >
+            From foodservice packaging to janitorial supplies, we offer
+            comprehensive solutions for your business needs.
+          </motion.p>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.8, delay: 0.3 }}
+            className="flex flex-wrap items-center justify-center gap-3"
+          >
+            {categories.map((cat, index) => (
+              <motion.a
+                key={cat.id}
+                href={`#${cat.id}`}
+                whileHover={{ scale: 1.05, y: -2 }}
+                whileTap={{ scale: 0.95 }}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.4 + index * 0.1 }}
+                className={`inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-gradient-to-r ${cat.color} text-white text-sm font-medium shadow-lg hover:shadow-xl transition-shadow`}
+              >
+                <cat.icon size={16} />
+                {cat.title.split(" ")[0]}
+              </motion.a>
+            ))}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Category Navigation */}
+      <section className="sticky top-20 z-30 bg-white/80 dark:bg-neutral-900/80 backdrop-blur-xl border-b border-neutral-200 dark:border-neutral-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center gap-2 py-4 overflow-x-auto scrollbar-hide">
+            {categories.map((cat) => (
+              <motion.a
+                key={cat.id}
+                href={`#${cat.id}`}
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+                onClick={() => setActiveCategory(cat.id)}
+                className={`flex items-center gap-2 px-4 py-2 rounded-full whitespace-nowrap text-sm font-medium transition-all ${
+                  activeCategory === cat.id
+                    ? "bg-[hsl(0,100%,40%)] text-white"
+                    : "bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+                }`}
+              >
+                <cat.icon size={16} />
+                {cat.title}
+              </motion.a>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Product Categories */}
+      {categories.map((category, categoryIndex) => (
+        <section
+          key={category.id}
+          id={category.id}
+          className={`section-padding ${
+            categoryIndex % 2 === 0
+              ? "bg-white dark:bg-neutral-900"
+              : "bg-neutral-50 dark:bg-neutral-950"
+          }`}
+        >
+          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div className="grid lg:grid-cols-2 gap-12 lg:gap-20 items-start">
+              {/* Category Info */}
+              <div
+                className={
+                  categoryIndex % 2 === 1 ? "lg:order-2" : "lg:order-1"
+                }
+              >
+                <FadeIn>
+                  <motion.div
+                    whileHover={{ scale: 1.05, rotate: 5 }}
+                    className={`inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-gradient-to-br ${category.color} text-white mb-6`}
+                  >
+                    <category.icon size={32} />
+                  </motion.div>
+                </FadeIn>
+
+                <FadeIn delay={0.1}>
+                  <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold text-neutral-900 dark:text-white mb-6 leading-tight">
+                    {category.title}
+                  </h2>
+                </FadeIn>
+
+                <FadeIn delay={0.2}>
+                  <p className="text-lg text-neutral-600 dark:text-neutral-400 mb-8 leading-relaxed">
+                    {category.description}
+                  </p>
+                </FadeIn>
+
+                <FadeIn delay={0.3}>
+                  <AnimatedButton
+                    href="/contact"
+                    icon={<ArrowRightIcon size={18} />}
+                  >
+                    Request Information
+                  </AnimatedButton>
+                </FadeIn>
+              </div>
+
+              {/* Products Grid */}
+              <div
+                className={
+                  categoryIndex % 2 === 1 ? "lg:order-1" : "lg:order-2"
+                }
+              >
+                <FadeIn
+                  delay={0.2}
+                  direction={categoryIndex % 2 === 1 ? "left" : "right"}
+                >
+                  <div className={`${category.bgColor} rounded-3xl p-8`}>
+                    <h3 className="text-sm font-semibold text-neutral-500 dark:text-neutral-400 uppercase tracking-wider mb-6">
+                      Available Products
+                    </h3>
+                    <div className="grid gap-3">
+                      {category.products.map((product, index) => (
+                        <motion.div
+                          key={product}
+                          initial={{ opacity: 0, x: -20 }}
+                          whileInView={{ opacity: 1, x: 0 }}
+                          viewport={{ once: true }}
+                          transition={{ delay: index * 0.05 }}
+                          whileHover={{ x: 10, scale: 1.02 }}
+                          className="group flex items-center gap-4 p-4 bg-white dark:bg-neutral-800 rounded-xl shadow-sm hover:shadow-md transition-all cursor-default"
+                        >
+                          <motion.div
+                            whileHover={{ scale: 1.2, rotate: 360 }}
+                            transition={{ duration: 0.3 }}
+                            className={`w-10 h-10 rounded-lg bg-gradient-to-br ${category.color} flex items-center justify-center flex-shrink-0`}
+                          >
+                            <CheckIcon size={18} className="text-white" />
+                          </motion.div>
+                          <span className="font-medium text-neutral-800 dark:text-neutral-200 group-hover:text-[hsl(0,100%,40%)] transition-colors">
+                            {product}
+                          </span>
+                          <motion.div
+                            initial={{ opacity: 0, x: -10 }}
+                            whileHover={{ opacity: 1, x: 0 }}
+                            className="ml-auto"
+                          >
+                            <ArrowRightIcon
+                              size={16}
+                              className="text-neutral-400"
+                            />
+                          </motion.div>
+                        </motion.div>
+                      ))}
+                    </div>
+                  </div>
+                </FadeIn>
+              </div>
+            </div>
+          </div>
+        </section>
+      ))}
+
+      {/* Features Section */}
+      <section className="section-padding bg-neutral-900 dark:bg-neutral-950 text-white">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-16">
+            <FadeIn>
+              <span className="inline-block px-4 py-1.5 rounded-full bg-white/10 text-white/80 text-sm font-medium mb-6">
+                Why Choose Us
+              </span>
+            </FadeIn>
+            <FadeIn delay={0.1}>
+              <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
+                Quality You Can{" "}
+                <span className="text-[hsl(0,100%,55%)]">Trust</span>
+              </h2>
+            </FadeIn>
+            <FadeIn delay={0.2}>
+              <p className="max-w-2xl mx-auto text-lg text-neutral-400">
+                We partner with leading manufacturers to bring you the best
+                products at competitive prices.
+              </p>
+            </FadeIn>
+          </div>
+
+          <StaggerContainer className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
+            {[
+              {
+                title: "Premium Quality",
+                description:
+                  "Products from trusted manufacturers meeting industry standards.",
+                icon: "01",
+              },
+              {
+                title: "Competitive Pricing",
+                description:
+                  "Volume discounts and competitive rates for all customers.",
+                icon: "02",
+              },
+              {
+                title: "Fast Delivery",
+                description:
+                  "Efficient distribution network across 10 states.",
+                icon: "03",
+              },
+              {
+                title: "Expert Support",
+                description:
+                  "Dedicated team to help you find the right solutions.",
+                icon: "04",
+              },
+            ].map((feature) => (
+              <StaggerItem key={feature.title}>
+                <motion.div
+                  whileHover={{ y: -10 }}
+                  className="group relative bg-white/5 backdrop-blur-sm p-8 rounded-3xl border border-white/10 hover:border-[hsl(0,100%,40%)]/50 transition-all h-full"
+                >
+                  <motion.span
+                    whileHover={{ scale: 1.1 }}
+                    className="inline-block text-4xl font-bold text-[hsl(0,100%,40%)] mb-4"
+                  >
+                    {feature.icon}
+                  </motion.span>
+                  <h3 className="text-xl font-bold mb-3 group-hover:text-[hsl(0,100%,55%)] transition-colors">
+                    {feature.title}
+                  </h3>
+                  <p className="text-neutral-400 leading-relaxed">
+                    {feature.description}
+                  </p>
+                </motion.div>
+              </StaggerItem>
+            ))}
+          </StaggerContainer>
+        </div>
+      </section>
+
+      {/* Sustainability Banner */}
+      <section className="section-padding bg-gradient-to-br from-emerald-500 to-teal-600 text-white relative overflow-hidden">
+        {/* Background decoration */}
+        <motion.div
+          className="absolute top-0 right-0 w-96 h-96 bg-white rounded-full filter blur-[150px] opacity-10"
+          animate={{
+            scale: [1, 1.2, 1],
+            x: [0, 50, 0],
+          }}
+          transition={{
+            duration: 8,
+            repeat: Infinity,
+            ease: "easeInOut",
+          }}
+        />
+
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <FadeIn>
+                <motion.div
+                  whileHover={{ rotate: 360 }}
+                  transition={{ duration: 0.5 }}
+                  className="inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-white/20 mb-6"
+                >
+                  <LeafIcon size={32} />
+                </motion.div>
+              </FadeIn>
+              <FadeIn delay={0.1}>
+                <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
+                  Going Green?
+                </h2>
+              </FadeIn>
+              <FadeIn delay={0.2}>
+                <p className="text-xl text-white/90 mb-8 leading-relaxed">
+                  Explore our comprehensive range of sustainable, compostable,
+                  and eco-friendly products. We can help you meet environmental
+                  regulations and reduce your carbon footprint.
+                </p>
+              </FadeIn>
+              <FadeIn delay={0.3}>
+                <div className="flex flex-wrap gap-4">
+                  <AnimatedButton
+                    href="/sustainability"
+                    variant="secondary"
+                    icon={<ArrowRightIcon size={18} />}
+                  >
+                    Learn About Sustainability
+                  </AnimatedButton>
+                  <AnimatedButton href="/state-ordinances" variant="outline">
+                    <span className="text-white">View State Ordinances</span>
+                  </AnimatedButton>
+                </div>
+              </FadeIn>
+            </div>
+
+            <FadeIn direction="right" delay={0.2}>
+              <div className="relative">
+                <div className="grid grid-cols-2 gap-4">
+                  {[
+                    "Compostable",
+                    "Recyclable",
+                    "Biodegradable",
+                    "Eco-Friendly",
+                  ].map((label, i) => (
+                    <motion.div
+                      key={label}
+                      initial={{ opacity: 0, scale: 0.8 }}
+                      whileInView={{ opacity: 1, scale: 1 }}
+                      viewport={{ once: true }}
+                      transition={{ delay: i * 0.1 }}
+                      whileHover={{ scale: 1.05, y: -5 }}
+                      className="bg-white/10 backdrop-blur-sm p-6 rounded-2xl text-center border border-white/20 hover:bg-white/20 transition-colors"
+                    >
+                      <motion.div
+                        whileHover={{ rotate: 360 }}
+                        transition={{ duration: 0.5 }}
+                        className="w-12 h-12 rounded-full bg-white/20 flex items-center justify-center mx-auto mb-3"
+                      >
+                        <LeafIcon size={24} />
+                      </motion.div>
+                      <span className="font-medium">{label}</span>
+                    </motion.div>
+                  ))}
+                </div>
+              </div>
+            </FadeIn>
+          </div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="section-padding bg-[hsl(0,100%,40%)] text-white relative overflow-hidden">
+        {/* Background pattern */}
+        <div className="absolute inset-0 opacity-10">
+          <svg
+            className="w-full h-full"
+            viewBox="0 0 100 100"
+            preserveAspectRatio="none"
+          >
+            <pattern
+              id="grid-products"
+              width="10"
+              height="10"
+              patternUnits="userSpaceOnUse"
+            >
+              <path
+                d="M 10 0 L 0 0 0 10"
+                fill="none"
+                stroke="white"
+                strokeWidth="0.5"
+              />
+            </pattern>
+            <rect width="100%" height="100%" fill="url(#grid-products)" />
+          </svg>
+        </div>
+
+        <div className="relative max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <FadeIn>
+            <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold mb-6">
+              Need Help Finding the Right Products?
+            </h2>
+          </FadeIn>
+          <FadeIn delay={0.1}>
+            <p className="text-xl text-white/90 mb-10 leading-relaxed">
+              Our experts are ready to help you find the perfect solutions for
+              your business. Get in touch for personalized recommendations.
+            </p>
+          </FadeIn>
+          <FadeIn delay={0.2}>
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+              <AnimatedButton
+                href="/contact"
+                variant="secondary"
+                size="lg"
+                icon={<ArrowRightIcon size={18} />}
+              >
+                Contact Our Team
+              </AnimatedButton>
+              <AnimatedButton href="/what-we-do" variant="outline" size="lg">
+                <span className="text-white">How We Work</span>
+              </AnimatedButton>
+            </div>
+          </FadeIn>
+        </div>
+      </section>
+
+      <Footer />
+    </main>
+  );
+}
diff --git a/public/assets/isotype.png b/public/assets/isotype.png
new file mode 100644
index 0000000..0e5c0a1
Binary files /dev/null and b/public/assets/isotype.png differ