diff --git a/assets/icons/search.png b/assets/icons/search.png
new file mode 100644
index 0000000..57ece34
Binary files /dev/null and b/assets/icons/search.png differ
diff --git a/assets/images/blog_thumb_1.png b/assets/images/blog_thumb_1.png
new file mode 100644
index 0000000..9896f63
Binary files /dev/null and b/assets/images/blog_thumb_1.png differ
diff --git a/blog.html b/blog.html
index 39e3988..e1ee29e 100644
--- a/blog.html
+++ b/blog.html
@@ -9,6 +9,18 @@
       content="Read our latest blog posts about furniture design and interior styling."
     />
     <link rel="stylesheet" href="styles/main.css" />
+    <style>
+      /* Smooth scrolling for the entire page */
+      html {
+        scroll-behavior: smooth;
+      }
+
+      /* Active navigation link styling */
+      .nav-link.active {
+        color: #b8873f !important;
+        font-weight: 500;
+      }
+    </style>
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
       rel="stylesheet"
@@ -35,56 +47,56 @@
             <li>
               <a
                 href="index.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Home</a
               >
             </li>
             <li>
               <a
-                href="products.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="index.html#products"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Products</a
               >
             </li>
             <li>
               <a
-                href="projects.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-colors text-shadow-default"
+                href="index.html#projects-button"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Projects</a
               >
             </li>
             <li>
               <a
-                href="clients.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="index.html#clients"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Clients</a
               >
             </li>
             <li>
               <a
-                href="about.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="index.html#about"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >About</a
               >
             </li>
             <li>
               <a
                 href="contact.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Contact</a
               >
             </li>
             <li>
               <a
                 href="blog.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Blog</a
               >
             </li>
             <li>
               <a
                 href="quote.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Quote</a
               >
             </li>
@@ -126,9 +138,9 @@
         <div class="max-w-7xl mx-auto px-5">
           <div class="grid grid-cols-1 lg:grid-cols-3 gap-16">
             <!-- Main Blog Content -->
-            <div class="lg:col-span-2">
+            <div id="main-blog-content" class="lg:col-span-2">
               <!-- Blog Post -->
-              <article class="mb-16">
+              <article class="mb-16" data-tags="wood" data-date="2022-10-14">
                 <!-- Featured Image -->
                 <div class="mb-8">
                   <img
@@ -202,33 +214,79 @@
                 </p>
 
                 <!-- Read More Link -->
-                <a
-                  href="#"
-                  class="inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors"
+                <button
+                  type="button"
+                  class="read-more-toggle inline-block font-playfair font-normal text-base text-black border-b border-black hover:text-gray-600 hover:border-gray-600 transition-colors"
                 >
                   Read more
-                </a>
+                </button>
+
+                <!-- Full content (initially hidden) -->
+                <div
+                  class="full-content hidden font-playfair font-normal text-base leading-relaxed text-gray-500 mt-6 text-justify"
+                >
+                  <p class="mb-4">
+                    Quis hendrerit dolor magna eget est lorem ipsum. Bibendum
+                    arcu vitae elementum curabitur vitae nunc sed velit
+                    dignissim sodales. Non tellus orci ac auctor augue mauris
+                    augue neque gravida in. Nisl condimentum id venenatis a
+                    condimentum vitae sapien pellentesque habitant. Sit amet
+                    volutpat consequat mauris nunc congue nisi vitae suscipit.
+                    Integer enim neque volutpat ac tincidunt vitae semper quis
+                    lectus. Nibh tellus molestie nunc non blandit massa enim
+                    nec. Amet consectetur adipiscing elit ut aliquam purus sit
+                    amet luctus.
+                  </p>
+                  <p class="mb-4">
+                    At tellus at urna condimentum mattis pellentesque id nibh
+                    tortor id. Non quam lacus suspendisse faucibus interdum.
+                    Interdum velit euismod in pellentesque massa placerat duis
+                    ultricies. Platea dictumst quisque sagittis purus sit amet
+                    volutpat consequat. Sem viverra aliquet eget sit amet tellus
+                    cras adipiscing. Eget lorem dolor sed viverra ipsum nunc
+                    aliquet bibendum enim facilisis gravida neque convallis a
+                    cras.
+                  </p>
+                  <p>
+                    Mattis rhoncus urna neque viverra justo nec. Aliquet
+                    porttitor lacus luctus accumsan tortor posuere ac ut
+                    consequat semper viverra nam libero justo laoreet sit amet
+                    cursus sit amet dictum sit amet justo. Risus at ultrices mi
+                    tempus imperdiet nulla malesuada pellentesque elit.
+                  </p>
+                </div>
               </article>
 
               <!-- Pagination -->
-              <div class="flex items-center justify-center space-x-4">
+              <div
+                id="blog-pagination"
+                class="flex items-center justify-center space-x-4"
+              >
                 <button
-                  class="w-15 h-15 bg-uc-gold text-white font-playfair font-normal text-xl rounded-lg"
+                  type="button"
+                  data-page="1"
+                  class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-uc-gold text-white font-playfair font-normal text-xl rounded-full shadow-sm"
                 >
                   1
                 </button>
                 <button
-                  class="w-15 h-15 bg-linen text-black font-playfair font-normal text-xl rounded-lg hover:bg-uc-gold hover:text-white transition-all"
+                  type="button"
+                  data-page="2"
+                  class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
                 >
                   2
                 </button>
                 <button
-                  class="w-15 h-15 bg-linen text-black font-playfair font-normal text-xl rounded-lg hover:bg-uc-gold hover:text-white transition-all"
+                  type="button"
+                  data-page="3"
+                  class="blog-page-btn inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
                 >
                   3
                 </button>
                 <button
-                  class="px-8 h-15 bg-linen text-black font-playfair font-normal text-xl rounded-lg hover:bg-uc-gold hover:text-white transition-all"
+                  type="button"
+                  id="blog-next-btn"
+                  class="inline-flex items-center justify-center px-6 py-2 bg-linen text-black font-playfair font-normal text-xl rounded-full hover:bg-uc-gold hover:text-white transition-all shadow-sm"
                 >
                   Next
                 </button>
@@ -241,6 +299,7 @@
               <div class="bg-white p-6 rounded-lg shadow-sm mb-8">
                 <div class="relative">
                   <input
+                    id="blog-search-input"
                     type="text"
                     placeholder="Search..."
                     class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold pr-12"
@@ -259,56 +318,19 @@
                   Categories
                 </h3>
                 <div class="space-y-4">
-                  <div class="flex justify-between items-center">
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >Crafts</span
-                    >
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >(2)</span
-                    >
-                  </div>
-                  <div class="flex justify-between items-center">
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >Design</span
-                    >
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >(8)</span
-                    >
-                  </div>
-                  <div class="flex justify-between items-center">
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >Handmade</span
-                    >
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >(7)</span
-                    >
-                  </div>
-                  <div class="flex justify-between items-center">
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >Interior</span
-                    >
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >(1)</span
-                    >
-                  </div>
-                  <div class="flex justify-between items-center">
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >Wood</span
-                    >
-                    <span
-                      class="font-playfair font-normal text-base text-gray-500"
-                      >(6)</span
-                    >
-                  </div>
+                  <button
+                    type="button"
+                    class="flex justify-between items-center w-full text-left tag-filter px-4 py-3 rounded-lg border border-gray-300 hover:border-uc-gold hover:bg-gray-50 transition-colors"
+                    data-tag="wood"
+                    aria-pressed="false"
+                  >
+                    <span class="font-playfair font-normal text-base">
+                      Wood
+                    </span>
+                    <span class="font-playfair font-normal text-base">
+                      (1)
+                    </span>
+                  </button>
                 </div>
               </div>
 
@@ -321,7 +343,7 @@
                   <!-- Recent Post 1 -->
                   <div class="flex space-x-4">
                     <img
-                      src="assets/images/blog_thumb_1.jpg"
+                      src="assets/images/blog_thumb_1.png"
                       alt="Blog thumbnail"
                       class="w-20 h-20 object-cover rounded-lg"
                     />
@@ -347,32 +369,40 @@
     </main>
 
     <!-- Footer -->
-    <footer class="bg-white">
+    <footer class="bg-white border-t border-black border-opacity-20">
       <!-- Main Footer Content -->
       <div class="max-w-7xl mx-auto px-5 py-16">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           <!-- Company Information -->
-          <div class="space-y-2">
+          <div class="space-y-1">
             <!-- Logo -->
-            <div class="w-16 h-20">
-              <img
-                src="assets/images/khy_logo.png"
-                alt="khy"
-                class="w-full h-full object-contain"
-              />
+            <div class="w-16 h-20 -mt-6">
+              <a
+                href="index.html"
+                aria-label="Go to KHY home"
+                title="KHY Home"
+                class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
+              >
+                <img
+                  src="assets/images/khy_logo.png"
+                  alt="KHY logo"
+                  loading="lazy"
+                  class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
+                />
+              </a>
             </div>
 
             <!-- Address -->
             <p
-              class="font-playfair font-normal text-base leading-relaxed text-gray-600"
+              class="font-playfair font-normal text-base leading-relaxed text-gray-600 -mt-4"
             >
               5 Labone Crescent, Greater Accra, Ghana
             </p>
 
             <!-- Contact Info -->
-            <div class="space-y-1">
+            <div class="space-y-1 -mt-2">
               <!-- Phone -->
-              <div class="flex items-center space-x-3">
+              <div class="flex items-center space-x-3 -mt-1">
                 <img
                   src="assets/images/phone.png"
                   alt="Phone"
@@ -384,7 +414,7 @@
               </div>
 
               <!-- Email -->
-              <div class="flex items-center space-x-3">
+              <div class="flex items-center space-x-3 -mt-1">
                 <img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
                 <span class="font-playfair font-normal text-base text-gray-800">
                   design@khyltd.com
diff --git a/contact.html b/contact.html
index dd1b8d4..eb5f055 100644
--- a/contact.html
+++ b/contact.html
@@ -9,6 +9,18 @@
       content="Get in touch with KHY for professional furniture and design services."
     />
     <link rel="stylesheet" href="styles/main.css" />
+    <style>
+      /* Smooth scrolling for the entire page */
+      html {
+        scroll-behavior: smooth;
+      }
+
+      /* Active navigation link styling */
+      .nav-link.active {
+        color: #b8873f !important;
+        font-weight: 500;
+      }
+    </style>
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
       rel="stylesheet"
@@ -35,56 +47,56 @@
             <li>
               <a
                 href="index.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Home</a
               >
             </li>
             <li>
               <a
-                href="products.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="index.html#products"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Products</a
               >
             </li>
             <li>
               <a
-                href="projects.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-colors text-shadow-default"
+                href="index.html#projects-button"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Projects</a
               >
             </li>
             <li>
               <a
-                href="clients.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="index.html#clients"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Clients</a
               >
             </li>
             <li>
               <a
-                href="about.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="index.html#about"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >About</a
               >
             </li>
             <li>
               <a
                 href="contact.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Contact</a
               >
             </li>
             <li>
               <a
                 href="blog.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Blog</a
               >
             </li>
             <li>
               <a
                 href="quote.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Quote</a
               >
             </li>
@@ -214,7 +226,7 @@
 
             <!-- Contact Form -->
             <div class="bg-white p-8 rounded-lg shadow-sm">
-              <form class="space-y-6">
+              <form id="contact-form" class="space-y-6">
                 <!-- Name -->
                 <div>
                   <label
@@ -224,8 +236,11 @@
                   </label>
                   <input
                     type="text"
-                    placeholder="Abc"
+                    id="contact-name"
+                    name="name"
+                    placeholder="First name last name"
                     class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
+                    required
                   />
                 </div>
 
@@ -238,8 +253,11 @@
                   </label>
                   <input
                     type="email"
-                    placeholder="Abc@def.com"
+                    id="contact-email"
+                    name="email"
+                    placeholder="your@email.com"
                     class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
+                    required
                   />
                 </div>
 
@@ -252,8 +270,11 @@
                   </label>
                   <input
                     type="text"
-                    placeholder="This is an optional"
+                    id="contact-subject"
+                    name="subject"
+                    placeholder="Title of your message"
                     class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold"
+                    required
                   />
                 </div>
 
@@ -266,14 +287,36 @@
                   </label>
                   <textarea
                     rows="5"
-                    placeholder="Hi! I'd like to ask about"
+                    id="contact-message"
+                    name="message"
+                    placeholder="Type your message here ..."
                     class="w-full px-4 py-3 font-playfair font-normal text-base text-gray-500 bg-white border border-gray-300 rounded-lg focus:outline-none focus:border-uc-gold resize-none"
+                    required
                   ></textarea>
                 </div>
 
+                <!-- Success Message -->
+                <div
+                  id="contact-success"
+                  class="hidden bg-green-50 border border-green-200 text-green-800 px-4 py-3 rounded-lg font-playfair font-normal text-base mb-4"
+                  style="display: none"
+                >
+                  Thank you for your message! We will reply to you shortly.
+                </div>
+
+                <!-- Error Message -->
+                <div
+                  id="contact-error"
+                  class="hidden bg-red-50 border border-red-200 text-red-800 px-4 py-3 rounded-lg font-playfair font-normal text-base mb-4"
+                  style="display: none"
+                >
+                  Please fill in all required fields before submitting.
+                </div>
+
                 <!-- Submit Button -->
                 <button
                   type="submit"
+                  id="contact-submit"
                   class="bg-uc-gold text-white font-playfair font-normal text-base px-8 py-3 rounded-lg hover:bg-opacity-90 transition-all"
                 >
                   Submit
@@ -519,5 +562,166 @@
     </footer>
 
     <script src="scripts/main.js"></script>
+    <script>
+      // Contact form validation and submission
+      document.addEventListener("DOMContentLoaded", function () {
+        const contactForm = document.getElementById("contact-form");
+        const successMessage = document.getElementById("contact-success");
+        const errorMessage = document.getElementById("contact-error");
+        const submitButton = document.getElementById("contact-submit");
+
+        if (contactForm) {
+          contactForm.addEventListener("submit", function (e) {
+            e.preventDefault();
+
+            // Get form fields
+            const name = document.getElementById("contact-name").value.trim();
+            const email = document.getElementById("contact-email").value.trim();
+            const subject = document
+              .getElementById("contact-subject")
+              .value.trim();
+            const message = document
+              .getElementById("contact-message")
+              .value.trim();
+
+            // Hide any existing messages
+            successMessage.classList.add("hidden");
+            errorMessage.classList.add("hidden");
+
+            // Validate all fields
+            if (!name || !email || !subject || !message) {
+              // Show error message
+              errorMessage.classList.remove("hidden");
+              errorMessage.style.display = "block";
+
+              // Highlight empty fields with red border
+              const fields = [name, email, subject, message];
+              const fieldIds = [
+                "contact-name",
+                "contact-email",
+                "contact-subject",
+                "contact-message",
+              ];
+
+              fieldIds.forEach((fieldId, index) => {
+                const field = document.getElementById(fieldId);
+                if (!fields[index]) {
+                  field.classList.add("border-red-500");
+                  field.classList.remove("border-gray-300");
+                } else {
+                  field.classList.remove("border-red-500");
+                  field.classList.add("border-gray-300");
+                }
+              });
+
+              // Scroll to error message
+              errorMessage.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+              });
+
+              // Hide error message after 3 seconds
+              setTimeout(() => {
+                errorMessage.classList.add("hidden");
+                errorMessage.style.display = "none";
+              }, 3000);
+
+              return;
+            }
+
+            // Validate email format
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            if (!emailRegex.test(email)) {
+              errorMessage.textContent = "Please enter a valid email address.";
+              errorMessage.classList.remove("hidden");
+              errorMessage.style.display = "block";
+              document
+                .getElementById("contact-email")
+                .classList.add("border-red-500");
+              document
+                .getElementById("contact-email")
+                .classList.remove("border-gray-300");
+
+              // Hide error message after 3 seconds
+              setTimeout(() => {
+                errorMessage.classList.add("hidden");
+                errorMessage.style.display = "none";
+              }, 3000);
+
+              return;
+            }
+
+            // All validation passed - show success message
+            successMessage.classList.remove("hidden");
+            successMessage.style.display = "block";
+
+            // Reset form
+            contactForm.reset();
+
+            // Reset all field borders
+            const allFields = [
+              "contact-name",
+              "contact-email",
+              "contact-subject",
+              "contact-message",
+            ];
+            allFields.forEach((fieldId) => {
+              const field = document.getElementById(fieldId);
+              field.classList.remove("border-red-500");
+              field.classList.add("border-gray-300");
+            });
+
+            // Scroll to success message
+            successMessage.scrollIntoView({
+              behavior: "smooth",
+              block: "center",
+            });
+
+            // Hide success message after 3 seconds
+            setTimeout(() => {
+              successMessage.classList.add("hidden");
+              successMessage.style.display = "none";
+            }, 3000);
+
+            // Optional: Disable submit button temporarily
+            submitButton.disabled = true;
+            submitButton.textContent = "Message Sent!";
+            submitButton.classList.add("bg-green-600");
+            submitButton.classList.remove("bg-uc-gold");
+
+            // Re-enable button after 3 seconds
+            setTimeout(() => {
+              submitButton.disabled = false;
+              submitButton.textContent = "Submit";
+              submitButton.classList.remove("bg-green-600");
+              submitButton.classList.add("bg-uc-gold");
+            }, 3000);
+          });
+
+          // Real-time validation feedback
+          const formFields = [
+            "contact-name",
+            "contact-email",
+            "contact-subject",
+            "contact-message",
+          ];
+          formFields.forEach((fieldId) => {
+            const field = document.getElementById(fieldId);
+            if (field) {
+              field.addEventListener("input", function () {
+                // Remove error styling when user starts typing
+                this.classList.remove("border-red-500");
+                this.classList.add("border-gray-300");
+
+                // Hide error message when user starts correcting
+                if (this.value.trim()) {
+                  errorMessage.classList.add("hidden");
+                }
+              });
+            }
+          });
+        }
+      });
+    </script>
   </body>
 </html>
diff --git a/index.html b/index.html
index 2bc57d5..d429429 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,90 @@
         background-color: currentColor;
         display: inline-block;
       }
+
+      /* Enhanced hover effects for curated cards */
+      .curated-card {
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+      }
+
+      .curated-card:hover .curated-card-image {
+        transform: scale(1.08) translateY(-12px);
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+      }
+
+      .curated-card-image {
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+      }
+
+      .curated-card img {
+        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .curated-card:hover img {
+        transform: scale(1.15);
+      }
+
+      .curated-card-title {
+        transition: color 0.3s ease;
+      }
+
+      .curated-card:hover .curated-card-title {
+        color: #b8873f;
+      }
+
+      /* Smooth scrolling for the entire page */
+      html {
+        scroll-behavior: smooth;
+      }
+
+      /* Active navigation link styling */
+      .nav-link.active {
+        color: #b8873f !important;
+        font-weight: 500;
+      }
+
+      /* Product card hover effects */
+      .product-card {
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        will-change: transform;
+        cursor: pointer;
+      }
+
+      .product-card:hover {
+        transform: translateY(-8px) scale(1.02);
+        box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
+      }
+
+      .product-card-image {
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        overflow: hidden;
+      }
+
+      .product-card:hover .product-card-image img {
+        transform: scale(1.1);
+      }
+
+      .product-card-image img {
+        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      .product-card-title {
+        transition: color 0.3s ease;
+      }
+
+      .product-card:hover .product-card-title {
+        color: #b8873f;
+      }
+
+      .product-card-description {
+        transition: color 0.3s ease;
+      }
+
+      .product-card:hover .product-card-description {
+        color: #666;
+      }
     </style>
     <link
       href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@100;200;300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap"
@@ -44,35 +128,35 @@
             <li>
               <a
                 href="index.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Home</a
               >
             </li>
             <li>
               <a
-                href="products.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="#products"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Products</a
               >
             </li>
             <li>
               <a
-                href="projects.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="#projects-button"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Projects</a
               >
             </li>
             <li>
               <a
-                href="clients.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="#clients"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >Clients</a
               >
             </li>
             <li>
               <a
-                href="about.html"
-                class="text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
+                href="#about"
+                class="nav-link text-black hover:text-gray-600 font-playfair text-md font-extralight tracking-wider transition-colors text-shadow-default"
                 >About</a
               >
             </li>
@@ -177,9 +261,9 @@
           <!-- Image Cards -->
           <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
             <!-- Lounge Areas Card -->
-            <div class="text-center">
+            <div class="text-center cursor-pointer curated-card">
               <div
-                class="bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
+                class="curated-card-image bg-black rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
               >
                 <img
                   src="assets/images/google_accra.jpg"
@@ -188,16 +272,16 @@
                 />
               </div>
               <h3
-                class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
+                class="font-playfair font-semibold text-2xl leading-tight text-gray-800 curated-card-title"
               >
                 Lounge Areas
               </h3>
             </div>
 
             <!-- Workstations Card -->
-            <div class="text-center">
+            <div class="text-center cursor-pointer curated-card">
               <div
-                class="bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
+                class="curated-card-image bg-gray-100 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
               >
                 <img
                   src="assets/images/workstation.jpg"
@@ -206,16 +290,16 @@
                 />
               </div>
               <h3
-                class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
+                class="font-playfair font-semibold text-2xl leading-tight text-gray-800 curated-card-title"
               >
                 Workstations
               </h3>
             </div>
 
             <!-- Conference Rooms Card -->
-            <div class="text-center">
+            <div class="text-center cursor-pointer curated-card">
               <div
-                class="bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
+                class="curated-card-image bg-blue-50 rounded-lg overflow-hidden mb-8 w-full max-w-sm h-96 md:h-[484px] mx-auto"
               >
                 <img
                   src="assets/images/conference_room.jpg"
@@ -224,7 +308,7 @@
                 />
               </div>
               <h3
-                class="font-playfair font-semibold text-2xl leading-tight text-gray-800"
+                class="font-playfair font-semibold text-2xl leading-tight text-gray-800 curated-card-title"
               >
                 Conference Rooms
               </h3>
@@ -234,7 +318,7 @@
       </section>
 
       <!-- Our Story Section -->
-      <section class="relative bg-white pt-8 pb-16">
+      <section id="about" class="relative bg-white pt-8 pb-16">
         <div class="max-w-7xl mx-auto px-5">
           <!-- Section Header -->
           <div class="text-center mb-16">
@@ -256,11 +340,12 @@
               />
               <!-- Navigation Arrow -->
               <div class="absolute top-1/2 right-4 transform -translate-y-1/2">
-                <div
-                  class="bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg"
+                <button
+                  id="story-arrow-button"
+                  class="bg-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hover:bg-uc-gold hover:shadow-xl hover:scale-110 transition-all duration-300 cursor-pointer group"
                 >
                   <svg
-                    class="w-6 h-6"
+                    class="w-6 h-6 transition-all duration-300 group-hover:stroke-white group-hover:scale-110"
                     fill="none"
                     stroke="currentColor"
                     viewBox="0 0 24 24"
@@ -272,7 +357,7 @@
                       d="M9 5l7 7-7 7"
                     ></path>
                   </svg>
-                </div>
+                </button>
               </div>
             </div>
 
@@ -298,6 +383,7 @@
               </p>
 
               <button
+                id="projects-button"
                 class="bg-black bg-opacity-70 text-white font-playfair font-normal text-xl md:text-2xl lg:text-3xl leading-tight tracking-wider px-8 py-4 rounded-lg hover:bg-opacity-80 transition-all text-center max-w-sm"
               >
                 Explore past projects
@@ -323,7 +409,7 @@
       </section>
 
       <!-- Our Products Section -->
-      <section class="relative bg-white pt-12 pb-20">
+      <section id="products" class="relative bg-white pt-12 pb-20">
         <div class="max-w-7xl mx-auto px-5">
           <!-- Section Header -->
           <div class="text-center mb-16">
@@ -345,8 +431,10 @@
             class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12"
           >
             <!-- Product Card 1: Lounge Chairs -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/lounge_chair.jpg"
                   alt="Lounge Chairs"
@@ -355,19 +443,23 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Lounge Chairs
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Stylish cafe chair
                 </p>
               </div>
             </div>
 
             <!-- Product Card 2: Office Chairs -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/office_chair.jpg"
                   alt="Office Chairs"
@@ -376,19 +468,23 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Office Chairs
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Luxury big sofa
                 </p>
               </div>
             </div>
 
             <!-- Product Card 3: Conference Room -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/conference_rooms.jpg"
                   alt="Conference Room"
@@ -397,19 +493,23 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Conference Room
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Tables
                 </p>
               </div>
             </div>
 
             <!-- Product Card 4: Storage -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/storage.jpg"
                   alt="Storage"
@@ -418,19 +518,23 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Storage
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Outdoor bar table and stool
                 </p>
               </div>
             </div>
 
             <!-- Product Card 5: Kitchen -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/kitchen.jpg"
                   alt="Kitchen"
@@ -439,19 +543,23 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Kitchen
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Night lamp
                 </p>
               </div>
             </div>
 
             <!-- Product Card 6: Chairs -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/chairs.jpg"
                   alt="Chairs"
@@ -460,19 +568,23 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Chairs
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Small mug
                 </p>
               </div>
             </div>
 
             <!-- Product Card 7: Pods -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/pods.jpg"
                   alt="Pods"
@@ -481,19 +593,23 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Pods
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Cute bed set
                 </p>
               </div>
             </div>
 
             <!-- Product Card 8: Potty -->
-            <div class="bg-light-bg rounded-lg overflow-hidden h-[446px]">
-              <div class="h-[301px] bg-gray-200">
+            <div
+              class="product-card bg-light-bg rounded-lg overflow-hidden h-[446px]"
+            >
+              <div class="product-card-image h-[301px] bg-gray-200">
                 <img
                   src="assets/images/potty.jpg"
                   alt="Potty"
@@ -502,11 +618,13 @@
               </div>
               <div class="p-4 h-[145px] flex flex-col justify-center">
                 <h3
-                  class="font-poppins font-semibold text-xl text-gray-800 mb-2"
+                  class="product-card-title font-poppins font-semibold text-xl text-gray-800 mb-2"
                 >
                   Potty
                 </h3>
-                <p class="font-poppins font-medium text-sm text-gray-500">
+                <p
+                  class="product-card-description font-poppins font-medium text-sm text-gray-500"
+                >
                   Minimalist flower pot
                 </p>
               </div>
@@ -633,7 +751,7 @@
       </section>
 
       <!-- Trusted by Leading Brands Section -->
-      <section class="relative bg-floral-white py-12">
+      <section id="clients" class="relative bg-floral-white py-12">
         <div class="max-w-7xl mx-auto px-5">
           <div class="text-center">
             <!-- Section Title -->
@@ -703,27 +821,35 @@
       <div class="max-w-7xl mx-auto px-5 py-16">
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
           <!-- Company Information -->
-          <div class="space-y-2">
+          <div class="space-y-1">
             <!-- Logo -->
-            <div class="w-16 h-20">
-              <img
-                src="assets/images/khy_logo.png"
-                alt="khy"
-                class="w-full h-full object-contain"
-              />
+            <div class="w-16 h-20 -mt-6">
+              <a
+                href="index.html"
+                aria-label="Go to KHY home"
+                title="KHY Home"
+                class="inline-block w-full h-full group focus:outline-none focus-visible:ring-2 focus-visible:ring-uc-gold rounded-md transition"
+              >
+                <img
+                  src="assets/images/khy_logo.png"
+                  alt="KHY logo"
+                  loading="lazy"
+                  class="w-full h-full object-contain transition-transform duration-300 group-hover:scale-105"
+                />
+              </a>
             </div>
 
             <!-- Address -->
             <p
-              class="font-playfair font-normal text-base leading-relaxed text-gray-600"
+              class="font-playfair font-normal text-base leading-relaxed text-gray-600 -mt-4"
             >
               5 Labone Crescent, Greater Accra, Ghana
             </p>
 
             <!-- Contact Info -->
-            <div class="space-y-1">
+            <div class="space-y-1 -mt-2">
               <!-- Phone -->
-              <div class="flex items-center space-x-3">
+              <div class="flex items-center space-x-3 -mt-1">
                 <img
                   src="assets/images/phone.png"
                   alt="Phone"
@@ -735,7 +861,7 @@
               </div>
 
               <!-- Email -->
-              <div class="flex items-center space-x-3">
+              <div class="flex items-center space-x-3 -mt-1">
                 <img src="assets/images/mail.png" alt="Email" class="w-4 h-4" />
                 <span class="font-playfair font-normal text-base text-gray-800">
                   design@khyltd.com
diff --git a/scripts/main.js b/scripts/main.js
index a1f297a..aded1c4 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -1,8 +1,366 @@
-// Update year in footer
+// Update year in footer and handle smooth scrolling
 document.addEventListener("DOMContentLoaded", function () {
+  // Update footer year
   const footer = document.querySelector("footer p");
   if (footer) {
     const currentYear = new Date().getFullYear();
     footer.innerHTML = footer.innerHTML.replace("2024", currentYear);
   }
+
+  // Smooth scrolling for navigation links
+  const navLinks = document.querySelectorAll('.nav-link[href^="#"]');
+
+  navLinks.forEach((link) => {
+    link.addEventListener("click", function (e) {
+      e.preventDefault();
+
+      const targetId = this.getAttribute("href").substring(1);
+      const targetElement = document.getElementById(targetId);
+
+      if (targetElement) {
+        // Calculate offset for header height (112px = 28 * 4)
+        const headerHeight = 112;
+        const targetPosition = targetElement.offsetTop - headerHeight;
+
+        window.scrollTo({
+          top: targetPosition,
+          behavior: "smooth",
+        });
+      }
+    });
+  });
+
+  // Handle cross-page navigation links (links that point to other pages with anchors)
+  const crossPageLinks = document.querySelectorAll('.nav-link[href*=".html#"]');
+
+  crossPageLinks.forEach((link) => {
+    link.addEventListener("click", function (e) {
+      // Don't prevent default - let the browser handle the navigation
+      // The smooth scrolling will work on the target page
+    });
+  });
+
+  // Highlight current page link
+  const currentPage = window.location.pathname.split("/").pop() || "index.html";
+  const currentPageLink = document.querySelector(
+    `.nav-link[href="${currentPage}"]`
+  );
+  if (currentPageLink) {
+    currentPageLink.classList.add("active");
+  }
+
+  // Active link highlighting on scroll
+  const sections = document.querySelectorAll("section[id]");
+  const navItems = document.querySelectorAll('.nav-link[href^="#"]');
+
+  function updateActiveLink() {
+    const scrollPosition = window.scrollY + 150; // Offset for better detection
+
+    sections.forEach((section) => {
+      const sectionTop = section.offsetTop;
+      const sectionHeight = section.offsetHeight;
+      const sectionId = section.getAttribute("id");
+
+      if (
+        scrollPosition >= sectionTop &&
+        scrollPosition < sectionTop + sectionHeight
+      ) {
+        // Remove active class from all nav links
+        navItems.forEach((item) => item.classList.remove("active"));
+
+        // Add active class to corresponding nav link
+        const activeLink = document.querySelector(
+          `.nav-link[href="#${sectionId}"]`
+        );
+        if (activeLink) {
+          activeLink.classList.add("active");
+        }
+      }
+    });
+  }
+
+  // Listen for scroll events
+  window.addEventListener("scroll", updateActiveLink);
+
+  // Initial call to set active link on page load
+  updateActiveLink();
+
+  // Blog search functionality (only runs on blog page)
+  const blogSearchInput = document.getElementById("blog-search-input");
+  if (blogSearchInput) {
+    const pagination = document.getElementById("blog-pagination");
+    const pageButtons = document.querySelectorAll(
+      "#blog-pagination .blog-page-btn"
+    );
+    const nextButton = document.getElementById("blog-next-btn");
+    const tagButtons = document.querySelectorAll(".tag-filter");
+    let activeTag = ""; // empty = no tag filter
+    let currentPage = 1;
+    const pageSize = 4; // number of posts per page
+
+    function normalize(text) {
+      return (text || "")
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, " ")
+        .trim();
+    }
+
+    function getFilteredArticles() {
+      const articles = Array.from(
+        document.querySelectorAll("#main-blog-content article")
+      );
+      // Sort by date descending if data-date is present (YYYY-MM-DD)
+      articles.sort((a, b) => {
+        const ad = a.getAttribute("data-date") || "";
+        const bd = b.getAttribute("data-date") || "";
+        // Fallback: keep original order if dates missing
+        if (!ad && !bd) return 0;
+        return bd.localeCompare(ad);
+      });
+      const query = normalize(blogSearchInput.value.trim());
+      return articles.filter((article) => {
+        const title = article.querySelector("h2")?.textContent || "";
+        const excerpt = article.querySelector("p")?.textContent || "";
+        const haystack = normalize(`${title} ${excerpt}`);
+        const tagList = (article.getAttribute("data-tags") || "")
+          .split(",")
+          .map((t) => normalize(t));
+        const matchesQuery = query === "" || haystack.includes(query);
+        const matchesTag = activeTag === "" || tagList.includes(activeTag);
+        return matchesQuery && matchesTag;
+      });
+    }
+
+    function renderPage() {
+      const filtered = getFilteredArticles();
+      const total = filtered.length;
+      const totalPages = Math.max(1, Math.ceil(total / pageSize));
+      currentPage = Math.min(Math.max(1, currentPage), totalPages);
+
+      // Show only items for current page
+      const start = (currentPage - 1) * pageSize;
+      const end = start + pageSize;
+      const toShow = new Set(filtered.slice(start, end));
+      document.querySelectorAll("#main-blog-content article").forEach((a) => {
+        a.style.display = toShow.has(a) ? "" : "none";
+      });
+
+      // Update pagination visibility and active state
+      if (pagination) {
+        const hasQuery = blogSearchInput.value.trim().length > 0;
+        pagination.style.display = hasQuery ? "none" : "flex";
+
+        pageButtons.forEach((btn) => {
+          const p = Number(btn.getAttribute("data-page"));
+          btn.classList.toggle("bg-uc-gold", p === currentPage);
+          btn.classList.toggle("text-white", p === currentPage);
+          btn.classList.toggle("bg-linen", p !== currentPage);
+          btn.classList.toggle("text-black", p !== currentPage);
+          btn.style.display = p <= totalPages ? "inline-flex" : "none";
+        });
+
+        if (nextButton) {
+          nextButton.style.display = totalPages > 1 ? "inline-flex" : "none";
+          nextButton.disabled = currentPage >= totalPages;
+        }
+      }
+    }
+
+    function filterPosts() {
+      // Reset to first page when filters change
+      currentPage = 1;
+      renderPage();
+    }
+
+    blogSearchInput.addEventListener("input", filterPosts);
+
+    // Tag filtering
+    tagButtons.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const clickedTag = normalize(btn.getAttribute("data-tag"));
+        // Toggle logic: clicking active tag clears it
+        activeTag = activeTag === clickedTag ? "" : clickedTag;
+
+        // Visual active state
+        tagButtons.forEach((b) => {
+          b.classList.remove("border-uc-gold", "bg-gray-50", "text-uc-gold");
+          b.setAttribute("aria-pressed", "false");
+        });
+        if (activeTag) {
+          btn.classList.add("border-uc-gold", "bg-gray-50", "text-uc-gold");
+          btn.setAttribute("aria-pressed", "true");
+        }
+
+        filterPosts();
+      });
+    });
+
+    // Pagination handlers
+    pageButtons.forEach((btn) =>
+      btn.addEventListener("click", () => {
+        currentPage = Number(btn.getAttribute("data-page")) || 1;
+        renderPage();
+      })
+    );
+    if (nextButton) {
+      nextButton.addEventListener("click", () => {
+        currentPage += 1;
+        renderPage();
+      });
+    }
+    // Ensure correct initial state on load
+    renderPage();
+  }
+
+  // Inline "Read more" expansion for blog posts
+  const articlesForExcerpt = document.querySelectorAll(
+    "#main-blog-content article"
+  );
+
+  function truncateToWords(text, maxWords) {
+    const words = (text || "").trim().split(/\s+/);
+    if (words.length <= maxWords) return { text, truncated: false };
+    return { text: words.slice(0, maxWords).join(" ") + "…", truncated: true };
+  }
+
+  articlesForExcerpt.forEach((article) => {
+    const excerptP = article.querySelector("p");
+    const readMoreBtn = article.querySelector(".read-more-toggle");
+    if (!excerptP || !readMoreBtn) return;
+
+    const fullExcerpt = excerptP.textContent || "";
+    const { text: truncated, truncated: isTruncated } = truncateToWords(
+      fullExcerpt,
+      80
+    );
+
+    if (isTruncated) {
+      // Store full text and show truncated preview
+      excerptP.dataset.excerptFull = fullExcerpt;
+      excerptP.textContent = truncated;
+      readMoreBtn.style.display = "inline-block";
+    } else {
+      // Nothing to expand; hide the control
+      readMoreBtn.style.display = "none";
+    }
+
+    // Click to expand (delegated fallback added below as well)
+    readMoreBtn.addEventListener("click", (ev) => {
+      ev.preventDefault();
+      if (excerptP.dataset.excerptFull) {
+        excerptP.textContent = excerptP.dataset.excerptFull;
+        delete excerptP.dataset.excerptFull;
+      }
+      const fullBlock = article.querySelector(".full-content");
+      if (fullBlock) fullBlock.classList.remove("hidden");
+      readMoreBtn.style.display = "none";
+    });
+  });
+
+  // Safety net: delegated handler in case markup changes
+  document.addEventListener("click", (e) => {
+    const trigger = e.target.closest(".read-more-toggle");
+    if (!trigger) return;
+    e.preventDefault();
+    const article = trigger.closest("article");
+    if (!article) return;
+    const excerptP = article.querySelector("p");
+    if (excerptP?.dataset?.excerptFull) {
+      excerptP.textContent = excerptP.dataset.excerptFull;
+      delete excerptP.dataset.excerptFull;
+    }
+    const fullBlock = article.querySelector(".full-content");
+    if (fullBlock) fullBlock.classList.remove("hidden");
+    trigger.style.display = "none";
+  });
+
+  // Footer newsletter subscribe validation and feedback (works on all pages)
+  const siteFooter = document.querySelector("footer");
+  if (siteFooter) {
+    const emailInputs = siteFooter.querySelectorAll('input[type="email"]');
+    emailInputs.forEach((emailInput) => {
+      const inputRow = emailInput.closest(".flex") || emailInput.parentElement;
+      let subscribeButton = inputRow ? inputRow.querySelector("button") : null;
+      if (!subscribeButton) {
+        subscribeButton = emailInput.parentElement?.querySelector("button");
+      }
+      if (!subscribeButton) return;
+
+      // Ensure non-submitting behavior
+      subscribeButton.type = "button";
+
+      // Create or reuse feedback element right after the row
+      let feedback = inputRow ? inputRow.nextElementSibling : null;
+      if (!(feedback instanceof HTMLElement) || !feedback.dataset.feedback) {
+        feedback = document.createElement("div");
+        feedback.dataset.feedback = "newsletter";
+        if (inputRow && inputRow.parentElement) {
+          inputRow.parentElement.insertBefore(feedback, inputRow.nextSibling);
+        }
+      }
+      feedback.className =
+        "hidden mt-3 rounded-lg px-4 py-3 font-playfair text-base";
+
+      function showMessage(text, type) {
+        feedback.textContent = text;
+        feedback.className =
+          "mt-3 rounded-lg px-4 py-3 font-playfair text-base";
+        if (type === "success") {
+          feedback.classList.add(
+            "bg-green-50",
+            "border",
+            "border-green-200",
+            "text-green-800"
+          );
+        } else {
+          feedback.classList.add(
+            "bg-red-50",
+            "border",
+            "border-red-200",
+            "text-red-800"
+          );
+        }
+        feedback.classList.remove("hidden");
+        setTimeout(() => feedback.classList.add("hidden"), 3000);
+      }
+
+      subscribeButton.addEventListener("click", (e) => {
+        e.preventDefault();
+        const value = (emailInput.value || "").trim();
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+        // Reset error styles
+        emailInput.classList.remove("border-red-500");
+
+        if (!emailRegex.test(value)) {
+          emailInput.classList.add("border-red-500");
+          showMessage("Please enter a valid email address.", "error");
+          emailInput.focus();
+          return;
+        }
+
+        showMessage("Thank you for subscribing!", "success");
+        emailInput.value = "";
+        subscribeButton.disabled = true;
+        setTimeout(() => (subscribeButton.disabled = false), 1200);
+      });
+    });
+  }
+  // Story arrow button functionality
+  const storyArrowButton = document.getElementById("story-arrow-button");
+  if (storyArrowButton) {
+    storyArrowButton.addEventListener("click", function () {
+      // You can customize this action - for now, let's scroll to the products section
+      const productsSection = document.getElementById("products");
+      if (productsSection) {
+        const headerHeight = 112;
+        const targetPosition = productsSection.offsetTop - headerHeight;
+
+        window.scrollTo({
+          top: targetPosition,
+          behavior: "smooth",
+        });
+      }
+    });
+  }
 });
diff --git a/styles/main.css b/styles/main.css
index 188587d..64b39be 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -598,6 +598,10 @@ video {
   z-index: 50;
 }
 
+.col-span-2 {
+  grid-column: span 2 / span 2;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -651,6 +655,50 @@ video {
   margin-top: 0.25rem;
 }
 
+.mt-4 {
+  margin-top: 1rem;
+}
+
+.mb-3 {
+  margin-bottom: 0.75rem;
+}
+
+.mt-8 {
+  margin-top: 2rem;
+}
+
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
+.mt-6 {
+  margin-top: 1.5rem;
+}
+
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
+.-mt-6 {
+  margin-top: -1.5rem;
+}
+
+.-mt-4 {
+  margin-top: -1rem;
+}
+
+.-mt-1 {
+  margin-top: -0.25rem;
+}
+
+.-mt-3 {
+  margin-top: -0.75rem;
+}
+
+.-mt-5 {
+  margin-top: -1.25rem;
+}
+
 .block {
   display: block;
 }
@@ -663,6 +711,10 @@ video {
   display: flex;
 }
 
+.inline-flex {
+  display: inline-flex;
+}
+
 .table {
   display: table;
 }
@@ -671,6 +723,10 @@ video {
   display: grid;
 }
 
+.hidden {
+  display: none;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -795,6 +851,22 @@ video {
   width: 1.25rem;
 }
 
+.w-32 {
+  width: 8rem;
+}
+
+.w-\[140px\] {
+  width: 140px;
+}
+
+.w-\[200px\] {
+  width: 200px;
+}
+
+.w-\[240px\] {
+  width: 240px;
+}
+
 .max-w-4xl {
   max-width: 56rem;
 }
@@ -845,6 +917,10 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .resize-none {
   resize: none;
 }
@@ -967,6 +1043,18 @@ video {
   margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-6 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
+.space-y-0 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0px * var(--tw-space-y-reverse));
+}
+
 .overflow-hidden {
   overflow: hidden;
 }
@@ -987,6 +1075,14 @@ video {
   border-radius: 0.75rem;
 }
 
+.rounded {
+  border-radius: 0.25rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
 .border {
   border-width: 1px;
 }
@@ -1019,6 +1115,26 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-green-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
+}
+
+.border-red-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
+}
+
+.border-red-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(239 68 68 / var(--tw-border-opacity, 1));
+}
+
+.border-gray-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+}
+
 .border-opacity-20 {
   --tw-border-opacity: 0.2;
 }
@@ -1077,6 +1193,36 @@ video {
   background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1));
 }
 
+.bg-green-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
+}
+
+.bg-red-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
+}
+
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-400 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1));
+}
+
+.bg-blue-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
+}
+
+.bg-gray-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+}
+
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1117,6 +1263,14 @@ video {
   padding: 1.5rem;
 }
 
+.p-2 {
+  padding: 0.5rem;
+}
+
+.p-3 {
+  padding: 0.75rem;
+}
+
 .px-5 {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
@@ -1167,6 +1321,16 @@ video {
   padding-right: 1rem;
 }
 
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
+.px-16 {
+  padding-left: 4rem;
+  padding-right: 4rem;
+}
+
 .pb-16 {
   padding-bottom: 4rem;
 }
@@ -1195,6 +1359,14 @@ video {
   padding-right: 3rem;
 }
 
+.pt-6 {
+  padding-top: 1.5rem;
+}
+
+.text-left {
+  text-align: left;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1358,6 +1530,21 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.text-green-800 {
+  --tw-text-opacity: 1;
+  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
+}
+
+.text-red-800 {
+  --tw-text-opacity: 1;
+  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
+}
+
 .text-opacity-90 {
   --tw-text-opacity: 0.9;
 }
@@ -1415,16 +1602,79 @@ video {
   transition-duration: 150ms;
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.ease-in-out {
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.hover\:scale-110:hover {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .hover\:border-gray-600:hover {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
 }
 
+.hover\:border-uc-gold:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(184 135 63 / var(--tw-border-opacity, 1));
+}
+
 .hover\:bg-uc-gold:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(184 135 63 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-gray-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-50:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-blue-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-gray-900:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-green-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-opacity-80:hover {
   --tw-bg-opacity: 0.8;
 }
@@ -1448,6 +1698,17 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
+.hover\:text-uc-gold:hover {
+  --tw-text-opacity: 1;
+  color: rgb(184 135 63 / var(--tw-text-opacity, 1));
+}
+
+.hover\:shadow-xl:hover {
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 .focus\:border-black:focus {
   --tw-border-opacity: 1;
   border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
@@ -1463,6 +1724,49 @@ video {
   outline-offset: 2px;
 }
 
+.focus-visible\:ring-2:focus-visible {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-uc-gold:focus-visible {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(184 135 63 / var(--tw-ring-opacity, 1));
+}
+
+.group:hover .group-hover\:-translate-y-2 {
+  --tw-translate-y: -0.5rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:scale-105 {
+  --tw-scale-x: 1.05;
+  --tw-scale-y: 1.05;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:scale-110 {
+  --tw-scale-x: 1.1;
+  --tw-scale-y: 1.1;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.group:hover .group-hover\:stroke-white {
+  stroke: #FFFFFF;
+}
+
+.group:hover .group-hover\:text-uc-gold {
+  --tw-text-opacity: 1;
+  color: rgb(184 135 63 / var(--tw-text-opacity, 1));
+}
+
+.group:hover .group-hover\:shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
 @media (min-width: 768px) {
   .md\:top-\[24rem\] {
     top: 24rem;