diff --git a/package-lock.json b/package-lock.json
index 8d5449e..738a0ac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "typescript": "^5.3.3"
       },
       "devDependencies": {
+        "@tailwindcss/forms": "^0.5.7",
         "prettier": "^3.2.5",
         "prettier-plugin-astro": "^0.13.0",
         "prettier-plugin-tailwindcss": "^0.5.11"
@@ -1236,6 +1237,18 @@
         "win32"
       ]
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.7.tgz",
+      "integrity": "sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -4591,6 +4604,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
diff --git a/package.json b/package.json
index 3395f29..013ddba 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "typescript": "^5.3.3"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "prettier": "^3.2.5",
     "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-tailwindcss": "^0.5.11"
diff --git a/src/components/ClientsSection.astro b/src/components/ClientsSection.astro
index 68dc1c1..3822cfb 100644
--- a/src/components/ClientsSection.astro
+++ b/src/components/ClientsSection.astro
@@ -1,14 +1,11 @@
 ---
-/* `title` variable used to customise the heading. */
+// Variables for customization of the LoginModal Component
+// Main heading
 const title: string = "Trusted by Industry Leaders";
 
-/* `subTitle` variable used to customise the sub-heading text. */
+// Sub-heading text
 const subTitle: string =
   "Experience the reliability chosen by industry giants.";
-
-/*
-  In the above, the title and subTitle attributes are variables part of the ClientsSection component.
-*/
 ---
 
 <div
@@ -17,7 +14,7 @@ const subTitle: string =
   <!-- Title and description -->
   <div class="mx-auto mb-6 w-2/3 space-y-1 text-center sm:w-1/2 lg:w-1/3">
     <h2
-      class="text-balanced text-xl font-semibold text-neutral-800 dark:text-neutral-200 md:text-2xl md:leading-tight"
+      class="text-balance text-xl font-semibold text-neutral-800 dark:text-neutral-200 md:text-2xl md:leading-tight"
     >
       {title}
     </h2>
diff --git a/src/components/FeaturesGeneral.astro b/src/components/FeaturesGeneral.astro
index 02dd9c1..26044bc 100644
--- a/src/components/FeaturesGeneral.astro
+++ b/src/components/FeaturesGeneral.astro
@@ -1,19 +1,15 @@
 ---
-// import necessary dependencies
+// Import the necessary dependencies from individual component files
 import { Image } from "astro:assets";
 import featureImage from "../images/features-image.avif";
 import IconBlock from "./ui/blocks/IconBlock.astro";
 
-/* `title` variable used to customise the heading. */
+// Main heading
 const title: string = "Meeting Industry Demands";
 
-/* `subTitle` variable used to customise the sub-heading text. */
+// Sub-heading text
 const subTitle: string =
   "At ScrewFast, we tackle the unique challenges encountered in the hardware and construction sectors. From cutting-edge tools to expert services, we're dedicated to helping you overcome obstacles and achieve your goals.";
-
-/*
-  In the above, the title and subTitle attributes are variables part of the FeaturesGeneral component.
-*/
 ---
 
 <div
@@ -34,7 +30,7 @@ const subTitle: string =
     <div class="lg:col-span-1">
       <!-- Title Block -->
       <h2
-        class="text-balanced text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl"
+        class="text-balance text-2xl font-bold text-neutral-800 dark:text-neutral-200 md:text-3xl"
       >
         {title}
       </h2>
diff --git a/src/components/FeaturesNavs.astro b/src/components/FeaturesNavs.astro
index ff0eaf8..7d16874 100644
--- a/src/components/FeaturesNavs.astro
+++ b/src/components/FeaturesNavs.astro
@@ -1,17 +1,13 @@
 ---
+// Import the necessary dependencies from individual component files
 import TabNav from "./ui/blocks/TabNav.astro";
 import TabContent from "./ui/blocks/TabContent.astro";
-import { Image } from "astro:assets";
 import construction from "../images/construction-image.avif";
 import tools from "../images/automated-tools.avif";
 import dashboard from "../images/dashboard-image.avif";
 
-/* `title` variable used to customise the heading. */
+// Main heading
 const title: string = `Customize <span class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>'s offerings to perfectly suit your hardware and construction needs.`;
-
-/*
-  In the above, the title attribute is a variable part of the FeaturesNavs component.
-*/
 ---
 
 <div
diff --git a/src/components/HeroSection.astro b/src/components/HeroSection.astro
index 65c6105..52f15d9 100644
--- a/src/components/HeroSection.astro
+++ b/src/components/HeroSection.astro
@@ -18,11 +18,11 @@ const subTitle:string =
 
 /* `primaryBtn` and `primaryBtnURL` variables used to customise the text and target link of the primary button. */
 const primaryBtn:string = "Start Exploring";
-const primaryBtnURL:string = "#";
+const primaryBtnURL:string = "/products";
 
 /* `secondaryBtn` and `secondaryBtnURL` variables used to customise the text and target link of the secondary button. */
 const secondaryBtn:string = "Contact Sales Team";
-const secondaryBtnURL:string = "#";
+const secondaryBtnURL:string = "/contact";
 
 /* `rating` variable used to customise the rating. */
 const rating:number = 4.8;
@@ -44,7 +44,7 @@ const reviews:string = "12.8k";
   <!-- Title and description -->
   <div>
     <h1
-      class="text-balanced block text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 sm:text-4xl lg:text-6xl lg:leading-tight"
+      class="text-balance block text-3xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 sm:text-4xl lg:text-6xl lg:leading-tight"
     >
       <!-- About Fragment: https://docs.astro.build/en/basics/astro-syntax/#fragments -->
       <Fragment set:html={title} />
@@ -126,9 +126,11 @@ const reviews:string = "12.8k";
     <div class="top-12 overflow-hidden">
       <Image
         src={heroImage}
-        alt=""
+        alt="Stack of ScrewFast product boxes containing assorted hardware tools"
         class="h-full w-full scale-110 object-cover object-center"
         draggable={"false"}
+        loading={"eager"}
+        format={"avif"}
       />
     </div>
   </div>
diff --git a/src/components/Meta.astro b/src/components/Meta.astro
index 44cb457..65fa26e 100644
--- a/src/components/Meta.astro
+++ b/src/components/Meta.astro
@@ -1,19 +1,22 @@
 ---
-const title: string = "ScrewFast";
-const author:string = "Emil Gulamov"
-const description:string = "";
-const URL:string = "https://screw-fast.vercel.app";
-const socialImage:string = "https://screw-fast.vercel.app/social.png";
+// Customize the following metadata for your landing page
+
+const title: string = "ScrewFast"; // Replace with your website title
+const ogTitle: string = "ScrewFast: Hardware Tools & Construction Services"; // Replace with your Open Graph title
+const author:string = "Emil Gulamov" // Replace with the author's name
+const description:string = "ScrewFast offers top-tier hardware tools and expert construction services to meet all your project needs. Start exploring and contact our sales team for superior quality and reliability."; // Replace with your site description
+const URL:string = "https://screw-fast.vercel.app"; // Replace with your website URL
+const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replace with the URL to your social media image
 ---
 
 <script type="application/ld+json">
-    {
+    {{
         "@context": "https://schema.org",
         "@type": "WebSite",
-        "name": "{title}",
-        "url": "{URL}",
-        "description": "{description}"
-    }
+        "name": title,
+        "url": URL,
+        "description": description
+    }}
 </script>
 
 <meta
@@ -29,7 +32,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png";
 <meta property="og:locale" content="en_US" />
 <meta property="og:url" content={URL}>
 <meta property="og:type" content="website">
-<meta property="og:title" content={title}>
+<meta property="og:title" content={ogTitle}>
 <meta property="og:site_name" content={title}/>
 <meta property="og:description" content={description}>
 <meta property="og:image" content={socialImage}>
@@ -41,13 +44,16 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png";
 <meta name="twitter:card" content="summary_large_image">
 <meta property="twitter:domain" content={URL}>
 <meta property="twitter:url" content={URL}>
-<meta name="twitter:title" content={title}>
+<meta name="twitter:title" content={ogTitle}>
 <meta name="twitter:description" content={description}>
 <meta name="twitter:image" content={socialImage}>
 
 <link rel="manifest" href="/manifest.webmanifest" />
+
+<!-- https://docs.astro.build/en/guides/integrations-guide/sitemap/ -->
 <link rel="sitemap" href="/sitemap-index.xml" />
 
+<!-- Add your favicon and apple touch icon links -->
 <link href="/favicon.ico" rel="icon" sizes="any" type="image/x-icon"/>
 <link href="/icon.svg" rel="icon" type="image/svg+xml" sizes="any"/>
 <meta name="mobile-web-app-capable" content="yes">
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index c3435d8..afec18a 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -1,6 +1,8 @@
 ---
+// Import the necessary dependencies from individual component files
 import ThemeIcon from "./ThemeIcon.astro";
 import NavLink from "./ui/links/NavLink.astro";
+import Authentication from "./Authentication.astro";
 ---
 
 <header
@@ -12,7 +14,7 @@ import NavLink from "./ui/links/NavLink.astro";
   >
     <div class="flex items-center justify-between">
       <a
-        class="flex-none text-xl font-semibold dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600"
+        class="flex-none text-xl outline-none rounded-lg font-semibold dark:focus:outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200"
         href="/"
         aria-label="Brand"
       >
@@ -126,27 +128,8 @@ import NavLink from "./ui/links/NavLink.astro";
         <NavLink url="/services" name="Services" />
         <NavLink url="/blog" name="Blog" />
         <NavLink url="/contact" name="Contact" />
-
-        <a
-          class="flex items-center gap-x-2 font-medium text-neutral-500 hover:text-[#fa5a15] dark:border-neutral-700 dark:text-neutral-400 dark:hover:text-[#fb713b] md:my-6 md:border-s md:border-neutral-300 md:ps-6"
-          href="#"
-        >
-          <svg
-            class="h-4 w-4 flex-shrink-0"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          >
-            <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
-            <circle cx="12" cy="7" r="4"></circle>
-          </svg>
-          Log in
-        </a>
+        
+        <Authentication />
         <span class="hidden md:inline-block">
           <ThemeIcon />
         </span>
diff --git a/src/components/PricingSection.astro b/src/components/PricingSection.astro
index f94e635..9005ab5 100644
--- a/src/components/PricingSection.astro
+++ b/src/components/PricingSection.astro
@@ -1,17 +1,15 @@
 ---
-// import necessary dependencies
+// Import the necessary dependencies from individual component files
 import SecondaryCTA from "./ui/buttons/SecondaryCTA.astro";
-/* `title` variable used to customise the heading. */
+
+// Variables for customization of the LoginModal Component
+// Main heading
 const title: string = "Simple, Transparent Pricing";
 
-/* `subTitle` variable used to customise the sub-heading text. */
+// Sub-heading text
 const subTitle: string =
   "Boost efficiency with ScrewFast's clear, value-driven plans.";
 
-/*
-  In the above, the title and subTitle attributes are variables part of the PricingSection component.
-*/
-
 /* TypeScript type for product. */
 type Product = {
   name: string;
@@ -62,7 +60,7 @@ const professionalToolbox: Product = {
   <!-- Title and description -->
   <div class="mx-auto mb-10 max-w-2xl text-center lg:mb-14">
     <h2
-      class="text-balanced text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
+      class="text-balance text-2xl font-bold tracking-tight text-neutral-800 dark:text-neutral-200 md:text-4xl md:leading-tight"
     >
       {title}
     </h2>
diff --git a/src/components/TestimonialsSection.astro b/src/components/TestimonialsSection.astro
index c5c33fb..828e509 100644
--- a/src/components/TestimonialsSection.astro
+++ b/src/components/TestimonialsSection.astro
@@ -1,8 +1,9 @@
 ---
-/* `title` variable used to customise the main heading. */
+// Variables for customization of the LoginModal Component
+// Main heading
 const title: string = "Fast-Track Your Projects";
 
-/* `subTitle` variable used to customise the sub-heading text. */
+// Sub-heading text
 const subTitle: string =
   "At ScrewFast, we ensure a swift start with instant account setup. Experience the speed of construction redefined.";
 
@@ -22,7 +23,7 @@ const testimonials: Testimonial[] = [
     author: "Samantha Ruiz",
     role: "Chief Operating Officer | ConstructIt Inc.",
     avatarSrc:
-      "https://images.unsplash.com/photo-1542206395-9feb3edaa68d?q=80&w=1528&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+      "https://images.unsplash.com/photo-1669837401587-f9a4cfe3126e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=320&h=320&q=80",
   },
 ];
 
diff --git a/src/components/ThemeIcon.astro b/src/components/ThemeIcon.astro
index c2d8766..9af55bc 100644
--- a/src/components/ThemeIcon.astro
+++ b/src/components/ThemeIcon.astro
@@ -1,67 +1,43 @@
-<div
-  class="hs-dropdown"
-  data-hs-dropdown-placement="bottom-right"
-  data-hs-dropdown-offset="30"
+<button
+  type="button"
+  aria-label="Dark Theme Toggle"
+  class="hs-dark-mode group flex items-center font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:hidden dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  data-hs-theme-click-value="dark"
 >
-  <button
-    type="button"
-    class="hs-dropdown-toggle hs-dark-mode group flex items-center rounded-lg font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-[#fa5a15] dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  <svg
+    class="h-4 w-4 flex-shrink-0"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    ><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg
   >
-    <svg
-      class="block h-4 w-4 hs-dark-mode-active:hidden"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      ><path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z"></path></svg
-    >
-    <svg
-      class="hidden h-4 w-4 hs-dark-mode-active:block"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      ><circle cx="12" cy="12" r="4"></circle><path d="M12 8a2 2 0 1 0 4 4"
-      ></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path
-        d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
-      ></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
-        d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"
-      ></path></svg
-    >
-  </button>
-
-  <div
-    id="selectThemeDropdown"
-    class="hs-dropdown-menu z-10 mb-2 mt-2 hidden origin-bottom-left space-y-1 rounded-lg bg-neutral-100 p-2 opacity-0 shadow-md transition-[margin,opacity] duration-300 hs-dropdown-open:opacity-100 dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-700"
+</button>
+<button
+  type="button"
+  aria-label="Light Theme Toggle"
+  class="hs-dark-mode group hidden items-center font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] hs-dark-mode-active:block dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none"
+  data-hs-theme-click-value="light"
+>
+  <svg
+    class="h-4 w-4 flex-shrink-0"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    ><circle cx="12" cy="12" r="4"></circle><path d="M12 8a2 2 0 1 0 4 4"
+    ></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path
+      d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"
+    ></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path
+      d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"
+    ></path></svg
   >
-    <button
-      type="button"
-      class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
-      data-hs-theme-click-value="auto"
-    >
-      Auto (system default)
-    </button>
-    <button
-      type="button"
-      class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
-      data-hs-theme-click-value="default"
-    >
-      Default (light mode)
-    </button>
-    <button
-      type="button"
-      class="flex w-full items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm text-neutral-800 hover:bg-neutral-200 hs-auto-mode-active:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-300"
-      data-hs-theme-click-value="dark"
-    >
-      Dark
-    </button>
-  </div>
-</div>
+</button>
diff --git a/src/components/ui/blocks/AccordionItem.astro b/src/components/ui/blocks/AccordionItem.astro
index fe1cc0c..2e55267 100644
--- a/src/components/ui/blocks/AccordionItem.astro
+++ b/src/components/ui/blocks/AccordionItem.astro
@@ -15,7 +15,7 @@ interface Props {
   id={id}
 >
   <button
-    class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 rounded-lg pb-3 text-start font-semibold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
+    class="hs-accordion-toggle group inline-flex w-full items-center justify-between gap-x-3 text-balance rounded-lg pb-3 text-start font-semibold text-neutral-800 outline-none ring-zinc-500 transition hover:text-neutral-500 focus-visible:ring dark:text-neutral-200 dark:ring-zinc-200 dark:hover:text-neutral-400 dark:focus:outline-none md:text-lg"
     aria-controls={collapseId}
   >
     {heading}
@@ -51,7 +51,7 @@ interface Props {
     class="hs-accordion-content w-full overflow-hidden transition-[height] duration-300"
     aria-labelledby="hs-basic-with-title-and-arrow-stretched-heading-one"
   >
-    <p class="text-neutral-600 dark:text-neutral-400">
+    <p class="text-pretty text-neutral-600 dark:text-neutral-400">
       {content}
     </p>
   </div>
diff --git a/src/components/ui/blocks/IconBlock.astro b/src/components/ui/blocks/IconBlock.astro
index a40a610..7b91698 100644
--- a/src/components/ui/blocks/IconBlock.astro
+++ b/src/components/ui/blocks/IconBlock.astro
@@ -11,7 +11,7 @@ interface Props {
   <slot />
   <div class="grow">
     <h3
-      class="text-balanced text-lg font-semibold text-gray-800 dark:text-neutral-200"
+      class="text-balance text-lg font-semibold text-gray-800 dark:text-neutral-200"
     >
       {heading}
     </h3>
diff --git a/src/components/ui/blocks/TabNav.astro b/src/components/ui/blocks/TabNav.astro
index 8f8cfa4..6d10da2 100644
--- a/src/components/ui/blocks/TabNav.astro
+++ b/src/components/ui/blocks/TabNav.astro
@@ -22,7 +22,7 @@ Example:
 
 <button
   type="button"
-  class={`${first ? "active dark:hover:bg-neutral-700 dark:focus:ring-neutral-600 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 dark:hs-tab-active:bg-neutral-700/60 md:p-5" : "dark:hover:bg-neutral-700 dark:focus:ring-neutral-600 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 dark:hs-tab-active:bg-neutral-700/60 md:p-5"}`}
+  class={`${first ? "active dark:hover:bg-neutral-700 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none  dark:hs-tab-active:bg-neutral-700/60 md:p-5" : "dark:hover:bg-neutral-700 rounded-xl p-4 text-start outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-200 focus-visible:ring hs-tab-active:bg-neutral-50 hs-tab-active:shadow-md hs-tab-active:hover:border-transparent dark:ring-zinc-200 dark:focus:outline-none  dark:hs-tab-active:bg-neutral-700/60 md:p-5"}`}
   id={id}
   data-hs-tab={dataTab}
   aria-controls={aria}
diff --git a/src/components/ui/buttons/PrimaryCTA.astro b/src/components/ui/buttons/PrimaryCTA.astro
index 3c23fb8..bc014c8 100644
--- a/src/components/ui/buttons/PrimaryCTA.astro
+++ b/src/components/ui/buttons/PrimaryCTA.astro
@@ -8,7 +8,7 @@ interface Props {
 ---
 
 <a
-  class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 2xl:text-base"
+  class="group inline-flex items-center justify-center gap-x-2 rounded-lg border border-transparent bg-[#fa5a15] px-4 py-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring active:bg-[#e14d0b] disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none 2xl:text-base"
   href={url}
 >
   {title}
diff --git a/src/components/ui/buttons/SecondaryCTA.astro b/src/components/ui/buttons/SecondaryCTA.astro
index 0b1453e..52abccb 100644
--- a/src/components/ui/buttons/SecondaryCTA.astro
+++ b/src/components/ui/buttons/SecondaryCTA.astro
@@ -8,7 +8,7 @@ interface Props {
 ---
 
 <a
-  class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-500 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 2xl:text-base"
+  class="inline-flex items-center justify-center gap-x-2 rounded-lg border border-neutral-200 bg-neutral-300 px-4 py-3 text-center text-sm font-medium text-neutral-600 shadow-sm outline-none ring-zinc-500 transition duration-300 hover:bg-neutral-400/50 hover:text-neutral-600 focus-visible:ring active:text-neutral-700 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-700 dark:bg-zinc-700 dark:text-neutral-300 dark:ring-zinc-200 dark:hover:bg-zinc-600 dark:focus:outline-none 2xl:text-base"
   href={url}
 >
   {title}
diff --git a/src/components/ui/links/NavLink.astro b/src/components/ui/links/NavLink.astro
index ca76e07..b93f923 100644
--- a/src/components/ui/links/NavLink.astro
+++ b/src/components/ui/links/NavLink.astro
@@ -6,6 +6,7 @@ interface Props {
   name: string;
 }
 ---
+
 <!--
 Re-usable link component for navigation bar. Highlights the active link
 by comparing the current URL with the href of each link.
@@ -15,7 +16,7 @@ If URL is '/' (home page), assign ID as 'home'
 <a
   id={url === "/" ? "home" : url.split("/")[1]}
   href={url}
-  class="font-medium text-neutral-500 hover:text-neutral-400 dark:text-neutral-400 dark:hover:text-neutral-500 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-neutral-600 md:py-6"
+  class="rounded-lg font-medium text-neutral-600 outline-none ring-zinc-500 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-500 dark:focus:outline-none md:py-3 2xl:text-base"
 >
   {name}
 </a>
@@ -28,9 +29,9 @@ If URL is '/' (home page), assign ID as 'home'
     if (nav) {
       // If a matching link found, update its styles and set aria-current attribute
       nav.classList.remove(
-        "text-neutral-500",
+        "text-neutral-600",
         "dark:text-neutral-400",
-        "hover:text-neutral-400",
+        "hover:text-neutral-500",
         "dark:hover:text-neutral-500",
       );
       nav.classList.add("text-[#fa5a15]", "dark:text-[#fa5a15]");
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index d043696..85e0510 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -1,5 +1,8 @@
 ---
 import Meta from "../components/Meta.astro";
+import Navbar from "../components/Navbar.astro";
+import FooterSection from "../components/FooterSection.astro";
+
 const { title = "ScrewFast" } = Astro.props;
 
 interface Props {
@@ -31,8 +34,10 @@ interface Props {
     class="bg-neutral-200 selection:bg-yellow-400 selection:text-neutral-700 dark:bg-neutral-800"
   >
     <div class="mx-auto max-w-screen-2xl px-4 sm:px-6 lg:px-8">
+      <Navbar />
       <slot />
     </div>
+    <FooterSection />
     <style>
       // These css rules are for the page scrollbar and scrolling experience with lenis library
       .scrollbar-hide::-webkit-scrollbar {
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index e69de29..650e264 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -0,0 +1,10 @@
+---
+import MainLayout from "../layouts/MainLayout.astro";
+import Navbar from "../components/Navbar.astro";
+
+---
+
+<MainLayout>
+  <Navbar />
+
+</MainLayout>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index af71b03..37cf8d0 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,7 +1,7 @@
 ---
 import MainLayout from "../layouts/MainLayout.astro";
-import Navbar from "../components/Navbar.astro";
 import HeroSection from "../components/HeroSection.astro";
+import HeroSection2 from "../components/HeroSection2.astro";
 import ClientsSection from "../components/ClientsSection.astro";
 import FeaturesGeneral from "../components/FeaturesGeneral.astro";
 import FeaturesNavs from "../components/FeaturesNavs.astro";
@@ -11,7 +11,7 @@ import FAQ from "../components/FAQ.astro";
 ---
 
 <MainLayout>
-  <Navbar />
+
   <HeroSection />
   <ClientsSection />
   <FeaturesGeneral />
@@ -19,4 +19,5 @@ import FAQ from "../components/FAQ.astro";
   <TestimonialsSection />
   <PricingSection />
   <FAQ />
+  <HeroSection2 />
 </MainLayout>
diff --git a/src/pages/robots.txt.ts b/src/pages/robots.txt.ts
index 9649a44..6595005 100644
--- a/src/pages/robots.txt.ts
+++ b/src/pages/robots.txt.ts
@@ -1,3 +1,4 @@
+// https://docs.astro.build/en/guides/integrations-guide/sitemap/#usage
 import type { APIRoute } from 'astro';
 
 const robotsTxt = `
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index e35b85b..3f8cc89 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -8,5 +8,8 @@ export default {
   theme: {
     extend: {},
   },
-  plugins: [require("preline/plugin")],
+  plugins: [
+    require("preline/plugin"),
+    require("@tailwindcss/forms")
+  ],
 };