diff --git a/.gitignore b/.gitignore
index 6240da8..da64c7b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,8 @@
 dist/
 # generated types
 .astro/
+.idea/
+.vscode/
 
 # dependencies
 node_modules/
diff --git a/.idea/.gitignore b/.idea/.gitignore
deleted file mode 100644
index b58b603..0000000
--- a/.idea/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
diff --git a/.idea/ScrewFast.iml b/.idea/ScrewFast.iml
deleted file mode 100644
index 24643cc..0000000
--- a/.idea/ScrewFast.iml
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
deleted file mode 100644
index 416694e..0000000
--- a/.idea/modules.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/ScrewFast.iml" filepath="$PROJECT_DIR$/.idea/ScrewFast.iml" />
-    </modules>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
deleted file mode 100644
index 94a25f7..0000000
--- a/.idea/vcs.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index 22a1505..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}
diff --git a/.vscode/launch.json b/.vscode/launch.json
deleted file mode 100644
index d642209..0000000
--- a/.vscode/launch.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}
diff --git a/src/components/Authentication.astro b/src/components/Authentication.astro
index 2bc2334..7e0a8fd 100644
--- a/src/components/Authentication.astro
+++ b/src/components/Authentication.astro
@@ -1,8 +1,8 @@
 ---
 // Import the necessary dependencies from individual component files
-import LoginModal from "./ui/authentication/LoginModal.astro";
-import RegisterModal from "./ui/authentication/RegisterModal.astro";
-import RecoverModal from "./ui/authentication/RecoverModal.astro";
+import LoginModal from "./ui/forms/LoginModal.astro";
+import RegisterModal from "./ui/forms/RegisterModal.astro";
+import RecoverModal from "./ui/forms/RecoverModal.astro";
 import LoginBtn from "./ui/buttons/LoginBtn.astro";
 ---
 
diff --git a/src/components/ClientsSection.astro b/src/components/ClientsSection.astro
index 3822cfb..d099ef4 100644
--- a/src/components/ClientsSection.astro
+++ b/src/components/ClientsSection.astro
@@ -14,12 +14,12 @@ 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-balance text-xl font-semibold text-neutral-800 dark:text-neutral-200 md:text-2xl md:leading-tight"
+      class="text-balance text-xl font-bold text-neutral-800 dark:text-neutral-200 md:text-2xl leading-tight"
     >
       {title}
     </h2>
 
-    <p class="text-pretty text-neutral-600 dark:text-neutral-400">
+    <p class="text-pretty text-neutral-600 dark:text-neutral-400 leading-tight">
       {subTitle}
     </p>
   </div>
diff --git a/src/components/FAQ.astro b/src/components/FAQ.astro
index 8a91c26..9162e0a 100644
--- a/src/components/FAQ.astro
+++ b/src/components/FAQ.astro
@@ -58,7 +58,7 @@ const faqs = [
 ];
 ---
 
-<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
   <div class="grid gap-10 md:grid-cols-5">
     <div class="md:col-span-2">
       <div class="max-w-xs">
diff --git a/src/components/FooterSection.astro b/src/components/FooterSection.astro
index abc2ba5..451aa6b 100644
--- a/src/components/FooterSection.astro
+++ b/src/components/FooterSection.astro
@@ -1,7 +1,7 @@
 ---
 // Import the necessary dependencies from individual component files
 import FooterSocialLink from "./ui/links/FooterSocialLink.astro";
-import EmailFooterInput from "./ui/authentication/input/EmailFooterInput.astro";
+import EmailFooterInput from "./ui/forms/input/EmailFooterInput.astro";
 
 // Footer Section Names
 const sectionOne: string = "Product";
@@ -56,73 +56,69 @@ const company: Links[] = [
 ---
 
 <footer class="w-full bg-neutral-300 dark:bg-neutral-900">
-  <div class="mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:pt-20">
+  <div
+    class="mx-auto w-full max-w-[85rem] px-4 py-10 sm:px-6 lg:px-16 lg:pt-20 2xl:max-w-screen-2xl"
+  >
     <div class="grid grid-cols-2 gap-6 md:grid-cols-4 lg:grid-cols-5">
       <div class="col-span-full lg:col-span-1">
-        <a
-          class="flex-none rounded-lg text-xl font-semibold outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200 dark:focus:outline-none"
-          href="/"
-          aria-label="Brand"
-        >
-          <!-- Brand Logo -->
-          <svg class="h-auto w-32" viewBox="0 0 521 226" fill="none">
-            <rect
-              width="78.937"
-              height="18.485"
-              x="269"
-              y="154.911"
-              class="fill-current text-yellow-500 dark:text-yellow-400"
-              fill="currentColor"
-              rx="9.242"
-              transform="rotate(-43.075 269 154.911)"></rect>
-            <rect
-              width="78.937"
-              height="18.485"
-              x="319"
-              y="154.911"
-              class="fill-current text-yellow-500 dark:text-yellow-400"
-              fill="currentColor"
-              rx="9.242"
-              transform="rotate(-43.075 319 154.911)"></rect>
-            <rect
-              width="78.937"
-              height="18.485"
-              x="369.285"
-              y="154.911"
-              class="fill-current text-yellow-500 dark:text-yellow-400"
-              fill="currentColor"
-              rx="9.242"
-              transform="rotate(-43.075 369.285 154.911)"></rect>
-            <rect
-              width="28.464"
-              height="18.485"
-              x="419.57"
-              y="154.911"
-              class="fill-current text-yellow-500 dark:text-yellow-400"
-              fill="currentColor"
-              rx="9.242"
-              transform="rotate(-43.075 419.57 154.911)"></rect>
-            <path
-              class="fill-current text-yellow-500 dark:text-yellow-400"
-              fill="currentColor"
-              d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
-            ></path>
-            <path
-              class="fill-current text-neutral-700 dark:text-neutral-300"
-              fill="currentColor"
-              d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
-            ></path>
-            <path
-              class="fill-current text-neutral-700 dark:text-neutral-300"
-              fill="currentColor"
-              d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
-            ></path>
-          </svg>
-        </a>
+        <!-- Brand Logo -->
+        <svg class="h-auto w-32" viewBox="0 0 521 226" fill="none">
+          <rect
+            width="78.937"
+            height="18.485"
+            x="269"
+            y="154.911"
+            class="fill-current text-yellow-500 dark:text-yellow-400"
+            fill="currentColor"
+            rx="9.242"
+            transform="rotate(-43.075 269 154.911)"></rect>
+          <rect
+            width="78.937"
+            height="18.485"
+            x="319"
+            y="154.911"
+            class="fill-current text-yellow-500 dark:text-yellow-400"
+            fill="currentColor"
+            rx="9.242"
+            transform="rotate(-43.075 319 154.911)"></rect>
+          <rect
+            width="78.937"
+            height="18.485"
+            x="369.285"
+            y="154.911"
+            class="fill-current text-yellow-500 dark:text-yellow-400"
+            fill="currentColor"
+            rx="9.242"
+            transform="rotate(-43.075 369.285 154.911)"></rect>
+          <rect
+            width="28.464"
+            height="18.485"
+            x="419.57"
+            y="154.911"
+            class="fill-current text-yellow-500 dark:text-yellow-400"
+            fill="currentColor"
+            rx="9.242"
+            transform="rotate(-43.075 419.57 154.911)"></rect>
+          <path
+            class="fill-current text-yellow-500 dark:text-yellow-400"
+            fill="currentColor"
+            d="M499.804 128.068c7.03 2.636 6.885 12.63-.219 15.061l-18.951 6.483c-5.238 1.792-10.669-2.15-10.589-7.686l.196-13.514c.081-5.535 5.624-9.318 10.808-7.374l18.755 7.03Z"
+          ></path>
+          <path
+            class="fill-current text-neutral-700 dark:text-neutral-300"
+            fill="currentColor"
+            d="M141.808 83.584c.171 5.803-1.024 10.837-3.584 15.104-5.717 9.387-15.701 14.336-29.952 14.848-6.485.256-13.61-1.323-21.376-4.736l.256-19.328c1.28 1.024 2.944 2.219 4.992 3.584 3.67 2.475 7.808 3.712 12.416 3.712 12.203 0 18.304-4.352 18.304-13.056v-.256c0-4.01-2.219-7.296-6.656-9.856-2.389-1.365-6.827-2.987-13.312-4.864a137.675 137.675 0 0 1-8.32-2.816c-10.496-5.888-15.744-14.421-15.744-25.6v-.768c0-5.12 1.408-9.899 4.224-14.336 2.816-4.523 6.528-8.021 11.136-10.496 4.693-2.56 9.728-3.925 15.104-4.096 7.253-.17 14.08 1.195 20.48 4.096v18.304c-4.693-4.096-10.88-6.144-18.56-6.144-2.816 0-5.419.725-7.808 2.176-3.67 2.219-5.504 5.461-5.504 9.728 0 5.803 4.267 9.984 12.8 12.544 1.536.512 4.565 1.45 9.088 2.816 7.68 2.304 13.184 5.76 16.512 10.368 3.413 4.608 5.248 10.965 5.504 19.072Zm66.758 20.736c-6.656 6.4-14.549 9.6-23.68 9.6-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984 8.704 0 16.299 2.944 22.784 8.832l-10.368 13.952c-3.328-3.67-7.467-5.504-12.416-5.504-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904 0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992 5.12 0 9.344-1.963 12.672-5.888l11.008 13.568Zm42.82-41.6c-4.693 0-8.704 1.664-12.032 4.992-3.328 3.243-4.992 7.21-4.992 11.904V112h-17.28V79.616c0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984v17.28Zm77.051 16.896a34.47 34.47 0 0 1-.384 5.12h-50.048c1.109 3.584 3.157 6.485 6.144 8.704 2.987 2.133 6.357 3.2 10.112 3.2 5.205 0 9.515-2.005 12.928-6.016l10.496 13.952c-6.571 6.229-14.379 9.344-23.424 9.344-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448 0-9.557 3.328-17.621 9.984-24.192 6.656-6.656 14.763-9.984 24.32-9.984s17.621 3.328 24.192 9.984c6.656 6.57 9.984 14.635 9.984 24.192Zm-19.328-7.808c-3.157-6.059-8.107-9.088-14.848-9.088-6.827 0-11.819 3.03-14.976 9.088h29.824Zm145.596 7.936c0 9.643-3.328 17.792-9.984 24.448-6.571 6.571-14.677 9.856-24.32 9.856-9.472 0-17.579-3.413-24.32-10.24-6.741 6.827-14.848 10.24-24.32 10.24-9.643 0-17.792-3.285-24.448-9.856-6.571-6.656-9.856-14.805-9.856-24.448V45.568h17.28v34.176c0 4.693 1.664 8.704 4.992 12.032 3.328 3.328 7.339 4.992 12.032 4.992s8.661-1.664 11.904-4.992c3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v43.008h-.128c3.328 5.461 8.149 8.192 14.464 8.192 4.693 0 8.661-1.664 11.904-4.992 3.328-3.328 4.992-7.339 4.992-12.032l.128-34.176h17.28v34.176Z"
+          ></path>
+          <path
+            class="fill-current text-neutral-700 dark:text-neutral-300"
+            fill="currentColor"
+            d="M56.064 163.616H26.24V212H8.832V110.624h47.232v14.848H26.24v20.096h29.824v18.048ZM147.389 212h-18.304l-3.712-9.984c-6.827 8.021-15.531 12.032-26.112 12.032-9.557 0-17.664-3.328-24.32-9.984-6.57-6.656-9.856-14.72-9.856-24.192 0-7.253 2.048-13.781 6.144-19.584 4.096-5.888 9.557-10.069 16.384-12.544 4.01-1.451 7.936-2.176 11.776-2.176 7.253 0 13.781 2.091 19.584 6.272 5.888 4.096 10.069 9.557 12.544 16.384L147.389 212Zm-31.104-32.128c0-5.973-2.432-10.624-7.296-13.952-2.816-1.963-6.059-2.944-9.728-2.944-5.973 0-10.581 2.389-13.824 7.168-2.048 2.987-3.072 6.229-3.072 9.728 0 5.888 2.432 10.496 7.296 13.824 2.987 2.048 6.187 3.072 9.6 3.072 4.693 0 8.704-1.621 12.032-4.864 3.328-3.328 4.992-7.339 4.992-12.032Zm92.015 12.544c0 4.096-1.365 7.808-4.096 11.136-5.461 6.656-13.227 9.856-23.296 9.6-4.011-.085-8.405-.981-13.184-2.688-4.693-1.707-8.533-3.84-11.52-6.4l9.6-12.416c4.608 4.352 9.515 6.528 14.72 6.528h.384c2.133 0 4.053-.384 5.76-1.152 2.219-1.024 3.328-2.475 3.328-4.352v-.512c-.256-1.963-1.579-3.371-3.968-4.224-.939-.171-2.944-.555-6.016-1.152-3.84-.768-7.083-1.707-9.728-2.816-7.765-3.328-11.648-9.173-11.648-17.536 0-8.021 3.968-14.037 11.904-18.048 3.499-1.792 7.296-2.731 11.392-2.816 4.267-.085 8.704.64 13.312 2.176 5.291 1.792 9.045 4.139 11.264 7.04l-11.52 10.368c-2.987-2.987-6.229-4.48-9.728-4.48-5.461 0-8.192 1.792-8.192 5.376v.256c0 1.707 2.219 3.157 6.656 4.352.341.085 3.157.64 8.448 1.664 10.752 2.048 16.128 8.619 16.128 19.712v.384ZM251.511 212c-9.557 0-17.664-3.285-24.32-9.856-6.656-6.656-9.984-14.763-9.984-24.32v-67.2h17.28v34.944h17.024v14.72h-17.024v17.536c0 4.693 1.664 8.704 4.992 12.032 3.328 3.243 7.339 4.864 12.032 4.864V212Z"
+          ></path>
+        </svg>
       </div>
 
       <div class="col-span-1">
-        <h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
+        <h4 class="font-bold text-neutral-800 dark:text-neutral-200">
           {sectionOne}
         </h4>
 
@@ -131,7 +127,7 @@ const company: Links[] = [
             product.map((item) => (
               <p>
                 <a
-                  class="inline-flex gap-x-2 text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
+                  class="inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
                   href={item.url}
                 >
                   {item.title}
@@ -143,7 +139,7 @@ const company: Links[] = [
       </div>
 
       <div class="col-span-1">
-        <h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
+        <h4 class="font-bold text-neutral-800 dark:text-neutral-200">
           {sectionTwo}
         </h4>
 
@@ -152,7 +148,7 @@ const company: Links[] = [
             company.map((item, index) => (
               <p>
                 <a
-                  class="inline-flex gap-x-2 text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
+                  class="inline-flex gap-x-2 rounded-lg text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-neutral-500 focus-visible:ring dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-neutral-300 dark:focus:outline-none dark:focus:ring-1"
                   href={item.url}
                 >
                   {item.title}
@@ -169,7 +165,7 @@ const company: Links[] = [
       </div>
 
       <div class="col-span-2">
-        <h4 class="font-semibold text-neutral-800 dark:text-neutral-200">
+        <h4 class="font-bold text-neutral-800 dark:text-neutral-200">
           {sectionThree}
         </h4>
 
diff --git a/src/components/HeroSection.astro b/src/components/HeroSection.astro
index 52f15d9..710e12f 100644
--- a/src/components/HeroSection.astro
+++ b/src/components/HeroSection.astro
@@ -8,15 +8,16 @@ import Avatar from "./ui/avatars/Avatar.astro";
 import FullStar from "./ui/stars/FullStar.astro";
 import HalfStar from "./ui/stars/HalfStar.astro";
 
-/* `title` variable used to customise the main heading. */
+// Variables for customization of the HeroSection Component
+// Main heading
 const title:string = `Equip Your Projects with <span
         class="text-yellow-500 dark:text-yellow-400">ScrewFast</span>`;
 
-/* `subTitle` variable used to customise the sub-heading text. */
+// Main heading
 const subTitle:string =
   "Top-quality hardware tools and expert construction services for every project need.";
 
-/* `primaryBtn` and `primaryBtnURL` variables used to customise the text and target link of the primary button. */
+// Sub-heading text
 const primaryBtn:string = "Start Exploring";
 const primaryBtnURL:string = "/products";
 
@@ -33,9 +34,6 @@ const starCount:number = 4;
 /* `reviews` variable used to customise the number of reviews. */
 const reviews:string = "12.8k";
 
-/*
-  In the above, the title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL, rating, starCount, reviews, and imageSource attributes are variables part of the HeroSection component.
-*/
 ---
 
 <div
diff --git a/src/components/HeroSection2.astro b/src/components/HeroSection2.astro
index 4498dad..56ec313 100644
--- a/src/components/HeroSection2.astro
+++ b/src/components/HeroSection2.astro
@@ -2,7 +2,7 @@
 // Import the necessary dependencies from individual component files
 import GithubBtn from "./ui/buttons/GithubBtn.astro";
 
-// Variables for customization of the LoginModal Component
+// Variables for customization of the HeroSection2 Component
 // Main heading
 const title: string = "Let's Build Together";
 
diff --git a/src/components/Meta.astro b/src/components/Meta.astro
index 63d5f78..f132269 100644
--- a/src/components/Meta.astro
+++ b/src/components/Meta.astro
@@ -5,6 +5,7 @@ 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 ogDescription: string = "Equip your projects with ScrewFast's top-quality hardware tools and expert construction services. Trusted by industry leaders, ScrewFast offers simplicity, affordability, and reliability. Experience the difference with user-centric design and cutting-edge tools. Start exploring now!"; // Replace with your site description for social media
 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
 ---
@@ -19,7 +20,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replac
     }
 </script>
 
-
+<meta charset="utf-8" />
 <meta
         content={description}
         name="description"
@@ -35,7 +36,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replac
 <meta property="og:type" content="website">
 <meta property="og:title" content={ogTitle}>
 <meta property="og:site_name" content={title}/>
-<meta property="og:description" content={description}>
+<meta property="og:description" content={ogDescription}>
 <meta property="og:image" content={socialImage}>
 <meta content="1200" property="og:image:width"/>
 <meta content="600" property="og:image:height"/>
@@ -46,7 +47,7 @@ const socialImage:string = "https://screw-fast.vercel.app/social.png"; // Replac
 <meta property="twitter:domain" content={URL}>
 <meta property="twitter:url" content={URL}>
 <meta name="twitter:title" content={ogTitle}>
-<meta name="twitter:description" content={description}>
+<meta name="twitter:description" content={ogDescription}>
 <meta name="twitter:image" content={socialImage}>
 
 <link rel="manifest" href="/manifest.webmanifest" />
diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
index afec18a..9dc495f 100644
--- a/src/components/Navbar.astro
+++ b/src/components/Navbar.astro
@@ -14,7 +14,7 @@ import Authentication from "./Authentication.astro";
   >
     <div class="flex items-center justify-between">
       <a
-        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"
+        class="flex-none text-xl outline-none rounded-lg font-bold dark:focus:outline-none ring-zinc-500 focus-visible:ring dark:ring-zinc-200"
         href="/"
         aria-label="Brand"
       >
@@ -76,7 +76,7 @@ import Authentication from "./Authentication.astro";
       <div class="ml-auto mr-5 md:hidden">
         <button
           type="button"
-          class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
+          class="hs-collapse-toggle flex h-8 w-8 items-center justify-center rounded-full text-sm font-bold text-neutral-600 transition duration-300 hover:bg-neutral-200 disabled:pointer-events-none disabled:opacity-50 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:outline-none"
           data-hs-collapse="#navbar-collapse-with-animation"
           aria-controls="navbar-collapse-with-animation"
           aria-label="Toggle navigation"
diff --git a/src/components/PricingSection.astro b/src/components/PricingSection.astro
index 9005ab5..633c345 100644
--- a/src/components/PricingSection.astro
+++ b/src/components/PricingSection.astro
@@ -25,7 +25,7 @@ type Product = {
 const starterKit: Product = {
   name: "Starter Kit",
   description: "Best option for DIY projects",
-  price: "$29",
+  price: "$49",
   cents: ".00",
   billingFrequency: "USD / monthly",
   features: [
@@ -40,7 +40,7 @@ const starterKit: Product = {
 const professionalToolbox: Product = {
   name: "Professional Toolbox",
   description: "Best for large scale uses",
-  price: "$49",
+  price: "$89",
   cents: ".00",
   billingFrequency: "USD / monthly",
   features: [
@@ -75,7 +75,7 @@ const professionalToolbox: Product = {
       class="w-full rounded-xl bg-gray-800 p-6 sm:w-1/2 sm:rounded-r-none sm:p-8 lg:w-1/3"
     >
       <div class="mb-4">
-        <h3 class="text-2xl font-semibold text-neutral-100 sm:text-3xl">
+        <h3 class="text-2xl font-bold text-neutral-100 sm:text-3xl">
           {starterKit.name}
         </h3>
         <p class="text-indigo-300">{starterKit.description}</p>
@@ -117,7 +117,7 @@ const professionalToolbox: Product = {
       <!-- CTA for purchasing the product -->
       <a
         href={starterKit.purchaseLink}
-        class="block rounded-lg bg-gray-500 px-8 py-3 text-center text-sm font-semibold text-gray-100 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-600 focus-visible:ring active:text-gray-300 md:text-base"
+        class="block rounded-lg bg-gray-500 px-8 py-3 text-center text-sm font-bold text-gray-100 outline-none ring-indigo-300 transition duration-100 hover:bg-gray-600 focus-visible:ring active:text-gray-300 md:text-base"
         >{starterKit.purchaseBtnTitle}</a
       >
     </div>
@@ -129,14 +129,14 @@ const professionalToolbox: Product = {
         class="mb-4 flex flex-col items-start justify-between gap-4 lg:flex-row"
       >
         <div>
-          <h3 class="text-2xl font-semibold text-neutral-100 sm:text-3xl">
+          <h3 class="text-2xl font-bold text-neutral-100 sm:text-3xl">
             {professionalToolbox.name}
           </h3>
           <p class="text-orange-200">{professionalToolbox.description}</p>
         </div>
 
         <span
-          class="order-first inline-block rounded-full bg-orange-200 bg-opacity-50 px-3 py-1 text-xs font-semibold uppercase tracking-wider text-orange-600 lg:order-none"
+          class="order-first inline-block rounded-full bg-orange-200 bg-opacity-50 px-3 py-1 text-xs font-bold uppercase tracking-wider text-orange-600 lg:order-none"
           >Best value</span
         >
       </div>
@@ -177,7 +177,7 @@ const professionalToolbox: Product = {
       <!-- CTA for purchasing the product -->
       <a
         href={professionalToolbox.purchaseLink}
-        class="block rounded-lg bg-orange-200 bg-opacity-50 px-8 py-3 text-center text-sm font-semibold text-neutral-100 outline-none ring-orange-300 transition duration-100 hover:bg-orange-300 hover:bg-opacity-50 focus-visible:ring active:bg-orange-400 md:text-base"
+        class="block rounded-lg bg-orange-200 bg-opacity-50 px-8 py-3 text-center text-sm font-bold text-neutral-100 outline-none ring-orange-300 transition duration-100 hover:bg-orange-300 hover:bg-opacity-50 focus-visible:ring active:bg-orange-400 md:text-base"
         >{professionalToolbox.purchaseBtnTitle}</a
       >
     </div>
diff --git a/src/components/TestimonialsSection.astro b/src/components/TestimonialsSection.astro
index 828e509..f1af0c6 100644
--- a/src/components/TestimonialsSection.astro
+++ b/src/components/TestimonialsSection.astro
@@ -55,7 +55,7 @@ const statistics: StatProps[] = [
 ];
 ---
 
-<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+<div class="mx-auto max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 2xl:max-w-full">
   <div
     class="lg:grid lg:grid-cols-12 lg:items-center lg:justify-between lg:gap-16"
   >
@@ -106,7 +106,7 @@ const statistics: StatProps[] = [
                   />
                 </div>
                 <div class="ms-4 grow">
-                  <div class="font-semibold text-neutral-800 dark:text-neutral-200">
+                  <div class="font-bold text-neutral-800 dark:text-neutral-200">
                     {testimonial.author}
                   </div>
                   <div class="text-xs text-neutral-500">{testimonial.role}</div>
diff --git a/src/components/ui/authentication/LoginModal.astro b/src/components/ui/authentication/LoginModal.astro
deleted file mode 100644
index 2c7e70f..0000000
--- a/src/components/ui/authentication/LoginModal.astro
+++ /dev/null
@@ -1,83 +0,0 @@
----
-// Import the necessary dependencies from individual component files
-import GoogleBtn from "../buttons/GoogleBtn.astro";
-import AuthBtn from "../buttons/AuthBtn.astro";
-import EmailInput from "./input/EmailInput.astro";
-import PasswordInput from "./input/PasswordInput.astro";
-import Checkbox from "./input/Checkbox.astro";
-
-// Variables for customization of the LoginModal Component
-// Modal identifier
-const id = "hs-toggle-between-modals-login-modal";
-
-// Main heading
-const title: string = "Sign in";
-
-// Sub-heading text
-const subTitle: string = "Don't have an account yet?";
-
-// Text for registration button
-const registerBtn: string = "Sign up here";
-
-// Target link for registration button
-const registerBtnDataHS: string = "#hs-toggle-between-modals-register-modal";
----
-
-<div
-  id={id}
-  class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
->
-  <div
-    class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
-  >
-    <div class="mx-auto w-full max-w-md p-6">
-      <div
-        class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
-      >
-        <div class="p-4 sm:p-7">
-          <div class="text-center">
-            <h1
-              class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
-            >
-              {title}
-            </h1>
-            <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-              {subTitle}
-              <button
-                class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
-                data-hs-overlay={registerBtnDataHS}
-              >
-                {registerBtn}
-              </button>
-            </p>
-          </div>
-          <div class="mt-5">
-            <GoogleBtn title="Sign in with Google" />
-
-            <div
-              class="flex items-center py-3 text-xs uppercase text-neutral-400 before:me-6 before:flex-[1_1_0%] before:border-t before:border-neutral-200 after:ms-6 after:flex-[1_1_0%] after:border-t after:border-neutral-200 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600"
-            >
-              Or
-            </div>
-
-            <form>
-              <div class="grid gap-y-4">
-                <EmailInput />
-
-                <PasswordInput
-                  forgot={true}
-                  id="password-error"
-                  content="8+ characters required"
-                />
-
-                <Checkbox id="remember-me" />
-
-                <AuthBtn title="Sign in" />
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/ui/authentication/RecoverModal.astro b/src/components/ui/authentication/RecoverModal.astro
deleted file mode 100644
index 39288a6..0000000
--- a/src/components/ui/authentication/RecoverModal.astro
+++ /dev/null
@@ -1,64 +0,0 @@
----
-// Import the necessary dependencies from individual component files
-import AuthBtn from "../buttons/AuthBtn.astro";
-import EmailInput from "./input/EmailInput.astro";
-
-// Variables to customize the RecoverModal Component
-
-// Modal identifier
-const id = "hs-toggle-between-modals-recover-modal";
-
-// Main heading
-const title: string = "Forgot password?";
-
-// Sub-heading text
-const subTitle: string = "Remember your password?";
-
-// Text and target link for the login button
-const loginBtn: string = "Sign in here";
-const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
----
-
-<div
-  id={id}
-  class="hs-overlay absolute start-0 top-0 z-50 hidden h-full w-full hs-overlay-backdrop-open:bg-neutral-900/90"
->
-  <div
-    class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
-  >
-    <div class="mx-auto w-full max-w-md p-6">
-      <div
-        class="mt-7 rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
-      >
-        <div class="p-4 sm:p-7">
-          <div class="text-center">
-            <h1
-              class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
-            >
-              {title}
-            </h1>
-            <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-              {subTitle}
-              <button
-                class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
-                data-hs-overlay={loginBtnDataHS}
-              >
-                {loginBtn}
-              </button>
-            </p>
-          </div>
-
-          <div class="mt-5">
-            <!-- Form -->
-            <form>
-              <div class="grid gap-y-4">
-                <EmailInput />
-                <AuthBtn title="Reset password" />
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/ui/authentication/RegisterModal.astro b/src/components/ui/authentication/RegisterModal.astro
deleted file mode 100644
index 9aa0ce0..0000000
--- a/src/components/ui/authentication/RegisterModal.astro
+++ /dev/null
@@ -1,92 +0,0 @@
----
-// Import the necessary dependencies from individual component files
-import GoogleBtn from "../buttons/GoogleBtn.astro";
-import AuthBtn from "../buttons/AuthBtn.astro";
-import EmailInput from "./input/EmailInput.astro";
-import PasswordInput from "./input/PasswordInput.astro";
-import Checkbox from "./input/Checkbox.astro";
-
-// Variables to customize the RegisterModal Component
-
-// Modal identifier
-const id = "hs-toggle-between-modals-register-modal";
-
-// Main title
-const title: string = "Sign up";
-
-// Subtitle text
-const subTitle: string = "Already have an account?";
-
-// Text and target link for the login button
-const loginBtn: string = "Sign in here";
-const loginBtnDataHS: string = "#hs-toggle-between-modals-login-modal";
----
-
-<div
-  id={id}
-  class="hs-overlay hs-overlay-backdrop-open:bg-neutral-900/90 absolute start-0 top-0 z-50 hidden h-full w-full"
->
-  <div
-    class="m-3 mt-0 opacity-0 transition-all ease-out hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 sm:mx-auto sm:w-full sm:max-w-lg"
-  >
-    <div class="mx-auto w-full max-w-md p-6">
-      <div
-        class="mt-7 max-h-full overflow-hidden rounded-xl border border-neutral-200 bg-neutral-100 shadow-sm dark:border-neutral-700 dark:bg-neutral-800"
-      >
-        <div class="p-4 sm:p-7">
-          <div class="text-center">
-            <h1
-              class="block text-2xl font-bold text-neutral-800 dark:text-neutral-200"
-            >
-              {title}
-            </h1>
-            <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-400">
-              {subTitle}
-              <button
-                class="rounded-lg p-1 font-medium text-[#fa5a15] decoration-2 outline-none ring-zinc-500 hover:underline focus-visible:ring dark:text-[#fa5a15] dark:ring-zinc-200 dark:focus:outline-none"
-                data-hs-overlay={loginBtnDataHS}
-              >
-                {loginBtn}
-              </button>
-            </p>
-          </div>
-
-          <div class="mt-5">
-            <GoogleBtn title="Sign up with Google" />
-
-            <div
-              class="flex items-center py-3 text-xs uppercase text-neutral-400 before:me-6 before:flex-[1_1_0%] before:border-t before:border-neutral-200 after:ms-6 after:flex-[1_1_0%] after:border-t after:border-neutral-200 dark:text-neutral-500 dark:before:border-neutral-600 dark:after:border-neutral-600"
-            >
-              Or
-            </div>
-
-            <form>
-              <div class="grid gap-y-4">
-                <EmailInput />
-                <PasswordInput
-                  id="password-error"
-                  content="8+ characters required"
-                />
-                <PasswordInput
-                label="Confirm Password"
-                  id="confirm-password-error"
-                  aria="confirm-password-error"
-                  content="Password does not match the password"
-                />
-
-                <Checkbox label="I accept the " , id="terms-agree">
-                  <a
-                    class="font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none"
-                    href="#">Terms and Conditions</a
-                  >
-                </Checkbox>
-
-                <AuthBtn title="Sign up" />
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/src/components/ui/authentication/input/Checkbox.astro b/src/components/ui/authentication/input/Checkbox.astro
deleted file mode 100644
index 8c4aebb..0000000
--- a/src/components/ui/authentication/input/Checkbox.astro
+++ /dev/null
@@ -1,16 +0,0 @@
----
-const { label = "Remember me", id } = Astro.props;
-
-interface Props {
-  label?: string;
-  id?: string;
-}
----
-<div class="flex items-center">
-    <div class="flex">
-      <input id={id} name="remember-me" type="checkbox" class="shrink-0 mt-0.5 border-neutral-200 rounded   text-neutral-600 pointer-events-none focus:ring-yellow-400 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-yellow-400 dark:checked:border-yellow-400 dark:focus:ring-offset-neutral-800">
-    </div>
-    <div class="ms-3">
-      <label for={id} class="text-sm text-neutral-800 dark:text-neutral-200">{label} <slot /> </label>
-    </div>
-  </div>
diff --git a/src/components/ui/authentication/input/EmailFooterInput.astro b/src/components/ui/authentication/input/EmailFooterInput.astro
deleted file mode 100644
index b88b590..0000000
--- a/src/components/ui/authentication/input/EmailFooterInput.astro
+++ /dev/null
@@ -1,29 +0,0 @@
----
-const { label = "Search", title = "Subscribe" } = Astro.props;
-
-interface Props {
-  label?: string;
-  title?: string;
-}
----
-
-<div
-  class="mt-4 flex flex-col items-center gap-2 rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800 sm:flex-row sm:gap-3"
->
-  <div class="w-full">
-    <label for="hero-input" class="sr-only">{label}</label>
-    <input
-      type="text"
-      id="hero-input"
-      name="hero-input"
-      class="block w-full rounded-lg border-transparent bg-neutral-100 px-4 py-3 text-sm text-neutral-600 focus:border-[#fa5a15] focus:ring-[#fa5a15] disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:bg-neutral-700 dark:text-gray-300"
-      placeholder="Enter your email"
-    />
-  </div>
-  <a
-    class="inline-flex w-full items-center justify-center gap-x-2 whitespace-nowrap rounded-lg border border-transparent bg-[#fa5a15] p-3 text-sm font-semibold text-neutral-50 outline-none ring-zinc-500 transition duration-300 hover:bg-[#e14d0b] focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:focus:outline-none dark:focus:ring-1 sm:w-auto"
-    href="#"
-  >
-    {title}
-  </a>
-</div>
diff --git a/src/components/ui/authentication/input/EmailInput.astro b/src/components/ui/authentication/input/EmailInput.astro
deleted file mode 100644
index d501fdc..0000000
--- a/src/components/ui/authentication/input/EmailInput.astro
+++ /dev/null
@@ -1,42 +0,0 @@
----
-const { label = "Email address" } = Astro.props;
-
-interface Props {
-  label?: string;
-}
----
-
-<div>
-  <label
-    for="email"
-    class="mb-2 block text-sm text-neutral-800 dark:text-neutral-200"
-    >{label}</label
-  >
-  <div class="relative">
-    <input
-      type="email"
-      id="email"
-      name="email"
-      class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:focus:ring-1 dark:text-neutral-400"
-      required
-      aria-describedby="email-error"
-    />
-    <div class="pointer-events-none absolute inset-y-0 end-0 hidden pe-3">
-      <svg
-        class="h-5 w-5 text-red-500"
-        width="16"
-        height="16"
-        fill="currentColor"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-      >
-        <path
-          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
-        ></path>
-      </svg>
-    </div>
-  </div>
-  <p class="mt-2 hidden text-xs text-red-600" id="email-error">
-    Please include a valid email address so we can get back to you
-  </p>
-</div>
diff --git a/src/components/ui/authentication/input/PasswordInput.astro b/src/components/ui/authentication/input/PasswordInput.astro
deleted file mode 100644
index a7be111..0000000
--- a/src/components/ui/authentication/input/PasswordInput.astro
+++ /dev/null
@@ -1,66 +0,0 @@
----
-const {
-  label = "Password",
-  forgot,
-  id,
-  content,
-  aria = "password-error",
-} = Astro.props;
-
-interface Props {
-  label?: string;
-  forgot?: boolean;
-  id?: string;
-  content?: string;
-  aria?: string;
-}
----
-
-<div>
-  <div class="flex items-center justify-between">
-    <label
-      for="password"
-      class="mb-2 block text-sm text-neutral-800 dark:text-neutral-200"
-      >{label}</label
-    >
-    {
-      forgot ? (
-        <button
-          class="text-sm font-medium text-[#fa5a15] decoration-2 hover:underline dark:text-[#fa5a15] dark:focus:outline-none dark:focus:ring-1 focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200"
-          data-hs-overlay="#hs-toggle-between-modals-recover-modal"
-        >
-          Forgot password?
-        </button>
-      ) : (
-        ""
-      )
-    }
-  </div>
-  <div class="relative">
-    <input
-      type="password"
-      id="password"
-      name="password"
-      class="block w-full rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm focus:outline-none focus:ring focus:ring-neutral-400 disabled:pointer-events-none disabled:opacity-50 dark:border-neutral-600 dark:bg-neutral-700/30 dark:focus:ring-1 dark:text-neutral-400"
-      required
-      aria-describedby={aria}
-    />
-    <div class="pointer-events-none absolute inset-y-0 end-0 hidden pe-3">
-      <svg
-        class="h-5 w-5 text-red-500"
-        width="16"
-        height="16"
-        fill="currentColor"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-      >
-        <path
-          d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2z"
-        ></path>
-      </svg>
-    </div>
-  </div>
-  <p class="mt-2 hidden text-xs text-red-600" id={id}>
-    {content}
-  </p>
-</div>
diff --git a/src/components/ui/blocks/AccordionItem.astro b/src/components/ui/blocks/AccordionItem.astro
index 2e55267..20b67e6 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 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"
+    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-bold 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}
diff --git a/src/components/ui/blocks/IconBlock.astro b/src/components/ui/blocks/IconBlock.astro
index 7b91698..ea8f14a 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-balance text-lg font-semibold text-gray-800 dark:text-neutral-200"
+      class="text-balance text-lg font-bold 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 6d10da2..a1d8906 100644
--- a/src/components/ui/blocks/TabNav.astro
+++ b/src/components/ui/blocks/TabNav.astro
@@ -32,7 +32,7 @@ Example:
     <slot />
     <span class="ms-6 grow">
       <span
-        class="block text-lg font-semibold text-neutral-800 hs-tab-active:text-[#fa5a15] dark:text-neutral-200 dark:hs-tab-active:text-[#fb713b]"
+        class="block text-lg font-bold text-neutral-800 hs-tab-active:text-[#fa5a15] dark:text-neutral-200 dark:hs-tab-active:text-[#fb713b]"
         >{heading}</span
       >
       <span
diff --git a/src/components/ui/buttons/AuthBtn.astro b/src/components/ui/buttons/AuthBtn.astro
index 41b1226..34f7b15 100644
--- a/src/components/ui/buttons/AuthBtn.astro
+++ b/src/components/ui/buttons/AuthBtn.astro
@@ -8,6 +8,6 @@ interface Props {
 
 <button
   type="submit"
-  class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-transparent bg-yellow-400 px-4 py-3 text-sm font-semibold text-neutral-700 hover:bg-yellow-500 disabled:pointer-events-none disabled:opacity-50 dark:focus:outline-none 2xl:text-base focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200 transition duration-300"
+  class="inline-flex w-full items-center justify-center gap-x-2 rounded-lg border border-transparent bg-yellow-400 px-4 py-3 text-sm font-bold text-neutral-700 hover:bg-yellow-500 disabled:pointer-events-none disabled:opacity-50 dark:focus:outline-none 2xl:text-base focus-visible:ring outline-none ring-zinc-500 dark:ring-zinc-200 transition duration-300"
   >{title}</button
 >
diff --git a/src/components/ui/buttons/LoginBtn.astro b/src/components/ui/buttons/LoginBtn.astro
index 626b57f..7d36c92 100644
--- a/src/components/ui/buttons/LoginBtn.astro
+++ b/src/components/ui/buttons/LoginBtn.astro
@@ -8,7 +8,7 @@ interface Props {
 
 <button
   type="button"
-  class="flex items-center gap-x-2 font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none md:my-6 md:border-s md:border-neutral-300 md:ps-6 2xl:text-base"
+  class="flex items-center gap-x-2 text-base md:text-sm font-medium text-neutral-600 outline-none ring-zinc-500 transition duration-300 hover:text-[#fa5a15] focus-visible:ring dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:text-[#fb713b] dark:focus:outline-none md:my-6 md:border-s md:border-neutral-300 md:ps-6 2xl:text-base"
   data-hs-overlay="#hs-toggle-between-modals-login-modal"
 >
   <svg
diff --git a/src/components/ui/links/FooterLink.astro b/src/components/ui/links/FooterLink.astro
deleted file mode 100644
index e69de29..0000000
diff --git a/src/components/ui/links/FooterSocialLink.astro b/src/components/ui/links/FooterSocialLink.astro
index 0ccccd1..5f0b690 100644
--- a/src/components/ui/links/FooterSocialLink.astro
+++ b/src/components/ui/links/FooterSocialLink.astro
@@ -7,7 +7,7 @@ interface Props {
 ---
 
 <a
-  class="inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-semibold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
+  class="inline-flex h-10 w-10 items-center justify-center gap-x-2 rounded-lg border border-transparent text-sm font-bold text-neutral-700 outline-none ring-zinc-500 hover:bg-neutral-500/10 focus:outline-none focus:ring-1 focus:ring-zinc-500 focus-visible:ring disabled:pointer-events-none disabled:opacity-50 dark:ring-zinc-200 dark:hover:bg-neutral-50/10 dark:focus:outline-none"
   href={url}
   target="_blank"
 >
diff --git a/src/components/ui/links/NavLink.astro b/src/components/ui/links/NavLink.astro
index b93f923..72fe7b9 100644
--- a/src/components/ui/links/NavLink.astro
+++ b/src/components/ui/links/NavLink.astro
@@ -16,7 +16,7 @@ If URL is '/' (home page), assign ID as 'home'
 <a
   id={url === "/" ? "home" : url.split("/")[1]}
   href={url}
-  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"
+  class="rounded-lg text-base 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 md:text-sm 2xl:text-base"
 >
   {name}
 </a>
@@ -34,8 +34,8 @@ If URL is '/' (home page), assign ID as 'home'
         "hover:text-neutral-500",
         "dark:hover:text-neutral-500",
       );
-      nav.classList.add("text-[#fa5a15]", "dark:text-[#fa5a15]");
+      nav.classList.add("text-[#fa5a15]", "dark:text-[#fb713b]");
       nav.setAttribute("aria-current", "page");
     }
   };
-</script>
+</script>
\ No newline at end of file
diff --git a/src/layouts/MainLayout.astro b/src/layouts/MainLayout.astro
index 85e0510..e1f615c 100644
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -12,13 +12,10 @@ interface Props {
 
 <html lang="en" class="scrollbar-hide">
   <head>
-    <meta charset="utf-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="viewport" content="width=device-width" />
-    <title>{title}</title>
     <Meta />
+    <title>{title}</title>
     <script is:inline>
-      // This script is to handle theme according to user preference or system setting
+      // This script is to handle theme according to user preference
       if (
         localStorage.getItem("hs_theme") === "dark" ||
         (!("hs_theme" in localStorage) &&
@@ -71,14 +68,13 @@ interface Props {
     <script is:inline src="/assets/vendor/lenis/lenis.js"></script>
     <script is:inline>
       // This script is to handle lenis library settings and behaviors, like the smooth scrolling
-      const lenis = new Lenis();
-      lenis.on("scroll", (e) => {
-        console.log(e);
-      });
+      const lenis = new Lenis({ smooth: true, smoothTouch: false });
+
       function raf(time) {
         lenis.raf(time);
         requestAnimationFrame(raf);
       }
+
       requestAnimationFrame(raf);
     </script>
     <script is:inline src="/assets/vendor/preline/preline.js"></script>
diff --git a/src/pages/contact.astro b/src/pages/contact.astro
index 650e264..284a03b 100644
--- a/src/pages/contact.astro
+++ b/src/pages/contact.astro
@@ -1,10 +1,10 @@
 ---
+// Import section components
 import MainLayout from "../layouts/MainLayout.astro";
-import Navbar from "../components/Navbar.astro";
 
+import ContactSection from "../components/ContactSection.astro";
 ---
 
 <MainLayout>
-  <Navbar />
-
-</MainLayout>
\ No newline at end of file
+  <ContactSection />
+</MainLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 37cf8d0..e481744 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,4 +1,5 @@
 ---
+// Import section components
 import MainLayout from "../layouts/MainLayout.astro";
 import HeroSection from "../components/HeroSection.astro";
 import HeroSection2 from "../components/HeroSection2.astro";
diff --git a/src/pages/services.astro b/src/pages/services.astro
index e69de29..65c9318 100644
--- a/src/pages/services.astro
+++ b/src/pages/services.astro
@@ -0,0 +1,75 @@
+---
+// Import section components
+import MainLayout from "../layouts/MainLayout.astro";
+import MainSection from "../components/ui/blocks/MainSection.astro";
+import LeftSection from "../components/ui/blocks/LeftSection.astro";
+import RightSection from "../components/ui/blocks/RightSection.astro";
+import FeaturesStats from "../components/FeaturesStats.astro";
+
+import blueprints from "../images/blueprints-image.avif";
+import personWorking from "../images/person-working.avif";
+import beforeAfter from "../images/before-after.avif";
+import constructionWorkers from "../images/construction-workers.avif";
+import aerialView from "../images/aerial-view.avif";
+import usingTools from "../images/using-tools.avif";
+import progressBuilding from "../images/progress-building.avif";
+import underConstruction from "../images/under-construction.avif";
+---
+
+<MainLayout>
+  <MainSection
+    title="Uniting Expertise with Your Vision"
+    subTitle="At ScrewFast, we take pride in providing comprehensive solutions and exceptional service in the hardware and construction industry. Our experienced team is dedicated to supporting your project from inception to completion with a range of specialized services."
+    btn={true}
+    btnTitle="Schedule a Consultation"
+    btnURL="#"
+  />
+
+  <RightSection
+    title="Delivering Expert Guidance"
+    subTitle="Embarking on a construction project can be overwhelming. With our professional consultation services, we guide you through every stage, ensuring you make informed decisions. Whether you are a DIY enthusiast or a skilled contractor, our experts are on hand to offer tailored advice on product selection, project scope, and compliance with local regulations."
+    imgOne={blueprints}
+    imgOneAlt={"Blueprints and digital tablet with construction plans."}
+    imgTwo={personWorking}
+    imgTwoAlt={"Person working in the office"}
+  />
+  <LeftSection
+    title="Transforming Designs into Reality"
+    subTitle="Our skilled craftsmen bring precision and excellence to every construction project. From minor installations to substantial structural work, ScrewFast offers reliable construction services to turn your plans into tangible outcomes. We ensure the highest standards of safety and workmanship, utilizing top-quality tools and materials from our extensive inventory."
+    btn={true}
+    btnTitle="Learn More"
+    btnURL="#"
+    img={beforeAfter}
+    imgAlt={"Construction site before and after"}
+  />
+  <RightSection
+    title="Navigating Projects with Professional Oversight"
+    subTitle="Effective project management is at the heart of any successful build. ScrewFast provides thorough planning and robust management services that keep your project on time and within budget. Let us handle the complexities of workflow coordination, resource allocation, and stakeholder communication while you focus on your vision."
+    imgOne={constructionWorkers}
+    imgOneAlt={"Construction workers orchestrating a project"}
+    imgTwo={aerialView}
+    imgTwoAlt={"Aerial view of managed construction"}
+  />
+  <LeftSection
+    title="Ensuring Long-lasting Performance"
+    subTitle="Our commitment to your project doesn't end at completion. ScrewFast offers ongoing maintenance and support services to ensure your construction's longevity and performance. From regular check-ups to emergency assistance, our responsive team is there to provide seamless support."
+    img={usingTools}
+    imgAlt={"Man in orange and black vest wearing white helmet holding yellow and black power tool"}
+  />
+  <RightSection
+    title="Crafting Bespoke Strategies for Unique Challenges"
+    subTitle="For our larger enterprise clients, ScrewFast offers custom solutions designed to meet specific industry challenges. By understanding your unique needs, we engineer tailored strategies aimed at optimizing your operations, enhancing efficiency, and driving your business forward."
+    btn={true}
+    btnTitle="Read more"
+    btnURL="#"
+    imgOne={progressBuilding}
+    imgOneAlt={"In progress building structure"}
+    imgTwo={underConstruction}
+    imgTwoAlt={"Brown and gray building under construction"}
+  />
+
+  <FeaturesStats
+    title="By the Numbers"
+    subTitle="Our commitment to quality and reliability is evident in every project we undertake. At ScrewFast, we are dedicated to delivering industry-leading services that ensure your construction projects are built to last."
+  />
+</MainLayout>