diff --git a/src/components/ui/buttons/ProductTabBtn.astro b/src/components/ui/buttons/ProductTabBtn.astro
new file mode 100644
index 0000000..d431485
--- /dev/null
+++ b/src/components/ui/buttons/ProductTabBtn.astro
@@ -0,0 +1,31 @@
+---
+const { id, dataTab, title, first } = Astro.props;
+
+interface Props {
+  id: string;
+  dataTab: string;
+  title: string;
+  first?: boolean;
+}
+
+const BUTTON_CLASS =
+  "flex w-full justify-center rounded-xl border border-transparent p-3 outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-100 focus-visible:ring dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:focus:outline-none md:p-5";
+
+  const HEADING_CLASS = "block text-center font-semibold";
+  const INACTIVE_HEADING_CLASS = "text-neutral-800 dark:text-neutral-200";
+---
+
+<button
+type="button"
+class={`${BUTTON_CLASS} ${first ? "active bg-neutral-100 hover:border-transparent dark:bg-white/[.05]" : ""}`}
+id={id}
+data-tab-target={dataTab}
+role="tab"
+>
+<h2
+    class={`${HEADING_CLASS} ${first ? "text-[#fa5a15] dark:text-[#fb713b]" : INACTIVE_HEADING_CLASS}`}
+>
+    {title}
+</h2>
+</button>
+
diff --git a/src/content/products/b203.json b/src/content/products/b203.json
new file mode 100644
index 0000000..889f941
--- /dev/null
+++ b/src/content/products/b203.json
@@ -0,0 +1,63 @@
+{
+    "main": {
+        "title": "SF-BN B203",
+        "subTitle": "Tap Bolts and Nuts Set",
+        "content": "Meet the SF-BN B203 – your reliable companion for professional-grade fastening. This comprehensive box set comes with a versatile selection of tap bolts and nuts, meticulously crafted to provide the strongest hold for your construction and assembly projects.",
+        "img": "../images/product-main.avif",
+        "imgAlt": "Mockup boxes of a tap bolts and nuts set"
+    },
+    "tabs": [
+        {
+            "id": "tabs-with-card-item-1",
+            "dataTab": "#tabs-with-card-1",
+            "title": "Product Description"
+        },
+        {
+            "id": "tabs-with-card-item-2",
+            "dataTab": "#tabs-with-card-2",
+            "title": "Specifications"
+        },
+        {
+            "id": "tabs-with-card-item-3",
+            "dataTab": "#tabs-with-card-3",
+            "title": "Blueprints"
+        }
+    ],
+    "description": {
+        "title": "Strength Meets Precision",
+        "subTitle": "The SF-BN B203 Tap Bolts and Nuts Set offers robust durability and precision for construction professionals, ensuring reliable performance in every application, from house framing to machinery assembly.",
+        "btnTitle": "Contact sales to learn more",
+        "btnURL": "#"
+    },
+    "descriptionList": [
+        {
+            "title": "Corrosion Resistance",
+            "subTitle": "Zinc coating not only provides a polished look but also shields against corrosion, ensuring longevity."
+        },
+        {
+            "title": "Improved Safety",
+            "subTitle": "A secure fitting translates to safer structures with reduced risk of component failure."
+        },
+        {
+            "title": "Convenience",
+            "subTitle": "This all-in-one set means you have the right size on hand, cutting down on project delays and additional trips to the hardware store."
+        }
+    ],
+    "specifications": [
+        {
+            "id": "tabs-with-card-item-1",
+            "dataTab": "#tabs-with-card-1",
+            "title": "Product Description"
+        },
+        {
+            "id": "tabs-with-card-item-2",
+            "dataTab": "#tabs-with-card-2",
+            "title": "Specifications"
+        },
+        {
+            "id": "tabs-with-card-item-3",
+            "dataTab": "#tabs-with-card-3",
+            "title": "Blueprints"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/images/blueprint-1.avif b/src/images/blueprint-1.avif
new file mode 100644
index 0000000..97d156c
Binary files /dev/null and b/src/images/blueprint-1.avif differ
diff --git a/src/images/blueprint-2.avif b/src/images/blueprint-2.avif
new file mode 100644
index 0000000..1d4346a
Binary files /dev/null and b/src/images/blueprint-2.avif differ
diff --git a/src/images/product-main.avif b/src/images/product-main.avif
new file mode 100644
index 0000000..2a5e2d8
Binary files /dev/null and b/src/images/product-main.avif differ
diff --git a/src/pages/prod.astro b/src/pages/prod.astro
new file mode 100644
index 0000000..9c0dabf
--- /dev/null
+++ b/src/pages/prod.astro
@@ -0,0 +1,341 @@
+---
+// Import section components
+import MainLayout from "../layouts/MainLayout.astro";
+import productData from "../content/products/b203.json";
+import ProductTabBtn from "../components/ui/buttons/ProductTabBtn.astro";
+import PrimaryCTA from "../components/ui/buttons/PrimaryCTA.astro";
+
+declare global {
+  interface Window {
+    gsap: any;
+  }
+}
+import { Image } from "astro:assets";
+---
+
+<MainLayout>
+  <div id="overlay" class="fixed inset-0 bg-neutral-200 dark:bg-neutral-800">
+  </div>
+
+  <div
+    class="mx-auto flex max-w-[85rem] flex-col px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full"
+  >
+    <div>
+      <p
+        id="fadeText"
+        class="mb-8 max-w-prose text-pretty font-light text-neutral-700 dark:text-neutral-300 sm:text-xl"
+      >
+        {productData.main.content}
+      </p>
+    </div>
+    <div class="flex items-center justify-between">
+      <div id="fadeInUp">
+        <h1
+          class="block text-4xl font-bold tracking-tighter text-neutral-800 dark:text-neutral-200 sm:text-5xl md:text-6xl lg:text-7xl"
+        >
+          {productData.main.title}
+        </h1>
+        <p class="text-lg text-neutral-600 dark:text-neutral-400">
+          {productData.main.subTitle}
+        </p>
+      </div>
+      <div>
+        <img
+          id="fadeInMoveRight"
+          src="src/images/product-main.avif"
+          class="w-[600px]"
+          alt={productData.main.imgAlt}
+        />
+      </div>
+    </div>
+  </div>
+
+  <!-- Features -->
+  <div class="mx-auto max-w-[85rem] px-4 pt-10 sm:px-6 lg:px-8 lg:pt-14">
+    <!-- Tab Nav -->
+    <nav
+      class="mx-auto grid max-w-6xl gap-y-px sm:flex sm:gap-x-4 sm:gap-y-0"
+      aria-label="Tabs"
+      role="tablist"
+    >
+      {
+        productData.tabs.map((tab, index) => (
+          <ProductTabBtn
+            title={tab.title}
+            id={tab.id}
+            dataTab={tab.dataTab}
+            first={index === 0}
+          />
+        ))
+      }
+    </nav>
+    <!-- End Tab Nav -->
+
+    <div class="mt-12 md:mt-16">
+      <div id="tabs-with-card-1" role="tabpanel">
+        <div class="mx-auto max-w-[85rem] px-4 pb-10 sm:px-6 lg:px-8 lg:pb-14">
+          <div class="grid gap-12 md:grid-cols-2">
+            <div class="lg:w-3/4">
+              <h2
+                class="text-balance text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:leading-tight lg:text-4xl"
+              >
+                {productData.description.title}
+              </h2>
+              <p
+                class="mt-3 text-pretty text-neutral-600 dark:text-neutral-400"
+              >
+                {productData.description.subTitle}
+              </p>
+              <p class="mt-5">
+                <PrimaryCTA
+                  title={productData.description.btnTitle}
+                  url={productData.description.btnURL}
+                />
+              </p>
+            </div>
+            <!-- End Col -->
+
+            <div class="space-y-6 lg:space-y-10">
+              <!-- Icon Block -->
+              {
+                productData.descriptionList.map((list) => (
+                  <div class="flex">
+                    <div class="ms-5 sm:ms-8">
+                      <h3 class="text-base font-semibold text-gray-800 dark:text-gray-200 sm:text-lg">
+                        {list.title}
+                      </h3>
+                      <p class="mt-1 text-gray-600 dark:text-gray-400">
+                        {list.subTitle}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              }
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="tabs-with-card-2" class="hidden" role="tabpanel">
+        <!-- Icon Blocks -->
+        <div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+          <div class="mx-auto max-w-2xl">
+            <div class="grid grid-cols-2 place-content-evenly gap-x-8">
+              <div>
+                <div>
+                  <h3 class="block font-bold text-gray-800 dark:text-white">
+                    Build your portfolio
+                  </h3>
+                  <p class="text-gray-600 dark:text-gray-400">
+                    The simplest way to keep your portfolio always up-to-date.
+                  </p>
+                </div>
+                <div>
+                  <h3 class="block font-bold text-gray-800 dark:text-white">
+                    Build your portfolio
+                  </h3>
+                  <p class="text-gray-600 dark:text-gray-400">
+                    The simplest way to keep your portfolio always up-to-date.
+                  </p>
+                </div>
+                <div>
+                  <h3 class="block font-bold text-gray-800 dark:text-white">
+                    Build your portfolio
+                  </h3>
+                  <p class="text-gray-600 dark:text-gray-400">
+                    The simplest way to keep your portfolio always up-to-date.
+                  </p>
+                </div>
+                <div>
+                  <h3 class="block font-bold text-gray-800 dark:text-white">
+                    Build your portfolio
+                  </h3>
+                  <p class="text-gray-600 dark:text-gray-400">
+                    The simplest way to keep your portfolio always up-to-date.
+                  </p>
+                </div>
+              </div>
+              <div>
+                <h3 class="block font-bold text-gray-800 dark:text-white">
+                  Build your portfolio
+                </h3>
+                <p class="text-gray-600 dark:text-gray-400">
+                  The simplest way to keep your portfolio always up-to-date.
+                </p>
+              </div>
+              <div>
+                <h3 class="block font-bold text-gray-800 dark:text-white">
+                  Build your portfolio
+                </h3>
+                <p class="text-gray-600 dark:text-gray-400">
+                  The simplest way to keep your portfolio always up-to-date.
+                </p>
+              </div>
+              <div>
+                <h3 class="block font-bold text-gray-800 dark:text-white">
+                  Build your portfolio
+                </h3>
+                <p class="text-gray-600 dark:text-gray-400">
+                  The simplest way to keep your portfolio always up-to-date.
+                </p>
+              </div>
+              <div>
+                <h3 class="block font-bold text-gray-800 dark:text-white">
+                  Build your portfolio
+                </h3>
+                <p class="text-gray-600 dark:text-gray-400">
+                  The simplest way to keep your portfolio always up-to-date.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- End Grid -->
+    </div>
+  </div>
+  <!-- End Icon Blocks -->
+
+  <div id="tabs-with-card-3" class="hidden" role="tabpanel">
+    <div class="mx-auto mb-12 flex w-full md:mb-28">
+      <div
+        class="relative left-12 top-12 z-10 -ml-12 overflow-hidden rounded-xl shadow-lg md:left-12 md:top-16 lg:ml-0"
+      >
+        <img
+          src="src/images/blueprint-1.avif"
+          loading="lazy"
+          alt="Photo by Kaung Htet"
+          class="h-full w-full object-cover object-center"
+        />
+      </div>
+
+      <div class="relative right-12 overflow-hidden rounded-lg shadow-xl">
+        <img
+          src="src/images/blueprint-2.avif"
+          loading="lazy"
+          alt="Photo by Manny Moreno"
+          class="h-full w-full object-cover object-center"
+        />
+      </div>
+    </div>
+  </div>
+
+  <script
+    is:inline
+    src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
+  ></script>
+  <script>
+    window.addEventListener("load", (event) => {
+      if (window.gsap) {
+        const gsap = window.gsap;
+        gsap.set("#fadeText", { autoAlpha: 0, y: 50 });
+        gsap.set("#fadeInUp", { autoAlpha: 0, y: 50 });
+        gsap.set("#fadeInMoveRight", { autoAlpha: 0, x: 300 });
+
+        let timeline = gsap.timeline();
+
+        timeline.to("#fadeText", {
+          duration: 2,
+          autoAlpha: 1,
+          y: 0,
+          delay: 1,
+          ease: "power2.out",
+        });
+
+        timeline.to(
+          "#fadeInUp",
+          { duration: 2, autoAlpha: 1, y: 0, ease: "power2.out" },
+          "-=1",
+        );
+
+        timeline.to(
+          "#fadeInMoveRight",
+          { duration: 2, autoAlpha: 1, x: 0, ease: "power2.out" },
+          "-=1.5",
+        );
+
+        timeline.to("#overlay", { duration: 1, autoAlpha: 0, delay: 0.5 });
+      }
+    });
+  </script>
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      function setButtonInactive(btn: any, activeButton: any) {
+        if (btn !== activeButton) {
+          btn.classList.remove(
+            "active",
+            "bg-neutral-100",
+            "hover:border-transparent",
+            "dark:bg-white/[.05]",
+          );
+
+          const contentId = btn.getAttribute("data-tab-target");
+          if (contentId) {
+            const contentElement = document.querySelector(contentId);
+            if (contentElement) {
+              contentElement.classList.add("hidden");
+            }
+          }
+
+          changeHeadingStyle(
+            btn,
+            ["text-neutral-800", "dark:text-neutral-200"],
+            ["text-[#fa5a15]", "dark:text-[#fb713b]"],
+          );
+        }
+      }
+
+      function activateButton(button: any) {
+        button.classList.add(
+          "active",
+          "bg-neutral-100",
+          ",hover:border-transparent",
+          "dark:bg-white/[.05]",
+        );
+
+        const tabId = button.getAttribute("data-tab-target");
+        if (tabId) {
+          const contentElementToShow = document.querySelector(tabId);
+          if (contentElementToShow) {
+            contentElementToShow.classList.remove("hidden");
+          }
+        }
+
+        changeHeadingStyle(
+          button,
+          ["text-[#fa5a15]", "dark:text-[#fb713b]"],
+          ["text-neutral-800", "dark:text-neutral-200"],
+        );
+      }
+
+      function changeHeadingStyle(
+        button: any,
+        addClasses: any,
+        removeClasses: any,
+      ) {
+        let heading = button.querySelector("h2");
+        if (heading) {
+          heading.classList.remove(...removeClasses);
+          heading.classList.add(...addClasses);
+        }
+      }
+
+      const tabButtons = document.querySelectorAll("[data-tab-target]");
+
+      if (tabButtons.length > 0) {
+        changeHeadingStyle(
+          tabButtons[0],
+          ["text-[#fa5a15]", "dark:text-[#fb713b]"],
+          [],
+        );
+      }
+
+      tabButtons.forEach((button) => {
+        button.addEventListener("click", () => {
+          tabButtons.forEach((btn) => setButtonInactive(btn, button));
+          activateButton(button);
+        });
+      });
+    });
+  </script>
+</MainLayout>