diff --git a/package-lock.json b/package-lock.json
index d2e3ad7..d746228 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@radix-ui/react-accordion": "^1.2.1",
         "@radix-ui/react-avatar": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-separator": "^1.1.0",
@@ -24,7 +25,8 @@
         "react": "^18",
         "react-dom": "^18",
         "tailwind-merge": "^2.5.3",
-        "tailwindcss-animate": "^1.0.7"
+        "tailwindcss-animate": "^1.0.7",
+        "vaul": "^1.1.0"
       },
       "devDependencies": {
         "@babel/runtime": "7.25.7",
@@ -592,6 +594,41 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -606,6 +643,70 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-icons": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
@@ -653,6 +754,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-presence": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
@@ -768,6 +892,23 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
@@ -1187,6 +1328,17 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "dev": true
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz",
@@ -1776,6 +1928,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2670,6 +2827,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-symbol-description": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
@@ -2952,6 +3117,14 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-arguments": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
@@ -4262,6 +4435,73 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "dev": true
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz",
+      "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "invariant": "^2.2.4",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -5128,11 +5368,64 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.2.tgz",
+      "integrity": "sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/use-sidecar": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz",
+      "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/vaul": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.0.tgz",
+      "integrity": "sha512-YhO/bikcauk48hzhMhvIvT+U87cuCbNbKk9fF4Ou5UkI9t2KkBMernmdP37pCzF15hrv55fcny1YhexK8h6GVQ==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index ef2bf27..d34a0e0 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-separator": "^1.1.0",
@@ -25,7 +26,8 @@
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.5.3",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.0"
   },
   "devDependencies": {
     "@babel/runtime": "7.25.7",
diff --git a/src/components/HeroButtons.tsx b/src/components/HeroButtons.tsx
new file mode 100644
index 0000000..2a7b6b1
--- /dev/null
+++ b/src/components/HeroButtons.tsx
@@ -0,0 +1,31 @@
+import { cn } from '@/lib/utils';
+import { LinkExternal02 } from '@untitled-ui/icons-react';
+import { FC } from 'react';
+import { Button } from './ui/button';
+
+type TProps = {
+  className?: string;
+  onClick?: () => void;
+};
+
+const HeroButtons: FC<TProps> = (props) => {
+  const { className, onClick } = props;
+
+  return (
+    <div
+      className={cn('flex items-center justify-center gap-4 w-full', className)}
+    >
+      <Button variant="secondary" size="lg" onClick={onClick}>
+        <LinkExternal02 width={18} height={18} className="mr-2" />
+        Demo
+      </Button>
+      <a href="#contact-us">
+        <Button size="lg" onClick={onClick}>
+          Contact us
+        </Button>
+      </a>
+    </div>
+  );
+};
+
+export default HeroButtons;
diff --git a/src/components/SectionTitle.tsx b/src/components/SectionTitle.tsx
index 84b85a2..eee1644 100644
--- a/src/components/SectionTitle.tsx
+++ b/src/components/SectionTitle.tsx
@@ -9,9 +9,9 @@ const SectionTitle: FC<TProps> = (props) => {
   const { title, description } = props;
 
   return (
-    <div className="prose">
+    <div className="prose md:prose-md">
       {!!title && <h2 className="text-center text-blue-500">{title}</h2>}
-      <p className="text-center text-4xl font-semibold leading-[44px]">
+      <p className="text-center text-3xl md:text-4xl font-semibold leading-[32px] md:leading-[44px]">
         {description}
       </p>
     </div>
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
index b735d9f..a47c187 100644
--- a/src/components/footer/index.tsx
+++ b/src/components/footer/index.tsx
@@ -4,8 +4,8 @@ import Image from 'next/image';
 
 const Footer = () => {
   return (
-    <footer className="w-full h-[88px] flex items-center justify-center">
-      <div className="container flex items-center justify-between">
+    <footer className="w-full h-[108px] sm:h-[88px] flex items-center justify-center">
+      <div className="container flex flex-col-reverse sm:flex-row items-center justify-between gap-5">
         <span className="text-sm text-gray-500 font-light">
           © Copyright Low-Ops. All rights Reserved
         </span>
diff --git a/src/components/header/HeaderNav.tsx b/src/components/header/HeaderNav.tsx
index 58cf984..613988d 100644
--- a/src/components/header/HeaderNav.tsx
+++ b/src/components/header/HeaderNav.tsx
@@ -1,13 +1,8 @@
+import { menu } from '@/data/header';
 import React from 'react';
 import HeaderNavItem from './HeaderNavItem';
 
-const menu = [
-  { name: 'Features', id: 'features' },
-  { name: 'Testimonials', id: 'testimonials' },
-  { name: 'Problems we solve', id: 'problems' },
-  { name: 'FAQ', id: 'faq' },
-  { name: 'Contact', id: 'contact' },
-];
+
 
 const HeaderNav: React.FC = () => {
   // Renders
diff --git a/src/components/header/HeaderNavItem.tsx b/src/components/header/HeaderNavItem.tsx
index d98d52a..6e819ca 100644
--- a/src/components/header/HeaderNavItem.tsx
+++ b/src/components/header/HeaderNavItem.tsx
@@ -1,18 +1,25 @@
+import { cn } from '@/lib/utils';
 import { FC, ReactNode } from 'react';
 
 type TProps = {
   href: string;
   children: ReactNode;
+  className?: string;
+  onClick?: () => void;
 };
 
 const HeaderNavItem: FC<TProps> = (props) => {
-  const { href, children } = props;
+  const { href, children, className, onClick } = props;
 
   return (
     <li>
       <a
         href={href}
-        className="text-gray-600 hover:text-gray-900 transition-colors font-medium text-base"
+        className={cn(
+          'text-gray-600 hover:text-gray-900 transition-colors font-medium text-base',
+          className
+        )}
+        onClick={onClick}
       >
         {children}
       </a>
diff --git a/src/components/header/MobileHeaderNav.tsx b/src/components/header/MobileHeaderNav.tsx
new file mode 100644
index 0000000..947ca85
--- /dev/null
+++ b/src/components/header/MobileHeaderNav.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { menu } from '@/data/header';
+import { cn } from '@/lib/utils';
+import { Menu01, XClose } from '@untitled-ui/icons-react';
+import { useState } from 'react';
+import HeroButtons from '../HeroButtons';
+import { Button } from '../ui/button';
+import AppLogo from './AppLogo';
+import HeaderNavItem from './HeaderNavItem';
+
+const MobileHeaderNav = () => {
+  const [open, setOpen] = useState(false);
+
+  // Handlers
+  const handleToggle = () => {
+    setOpen((prevState) => !prevState);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  // Renders
+  const renderMenu = () => {
+    return menu.map((item) => (
+      <HeaderNavItem
+        key={item.name}
+        href={`#${item.id}`}
+        className="flex items-center px-5 py-6 hover:bg-gray-50 active:bg-gray-50 text-lg text-gray-700 font-semibold"
+        onClick={handleClose}
+      >
+        {item.name}
+      </HeaderNavItem>
+    ));
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleToggle}
+        variant="ghost"
+        size="icon"
+        className="flex md:hidden"
+      >
+        <Menu01 width={28} height={28} />
+      </Button>
+      <div
+        className={cn(
+          'flex flex-col justify-between md:hidden fixed z-50 w-screen h-screen overflow-hidden left-0 top-0 border bg-white transition-transform duration-500',
+          open ? 'translate-y-0' : '-translate-y-[1200px]'
+        )}
+      >
+        <div>
+          <div className="flex items-center justify-between p-4">
+            <AppLogo />
+            <Button variant="ghost" size="icon" onClick={handleToggle}>
+              <XClose />
+            </Button>
+          </div>
+          <nav className="py-4">
+            <ul className="flex flex-col">{renderMenu()}</ul>
+          </nav>
+        </div>
+
+        <HeroButtons className="justify-self-end p-4" onClick={handleClose} />
+      </div>
+    </>
+  );
+};
+
+export default MobileHeaderNav;
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 33ee3f2..547c989 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -4,6 +4,7 @@ import { cn } from '@/lib/utils';
 import { useEffect, useState } from 'react';
 import AppLogo from './AppLogo';
 import HeaderNav from './HeaderNav';
+import MobileHeaderNav from './MobileHeaderNav';
 
 const Header = () => {
   const [isScrolled, setIsScrolled] = useState(false);
@@ -26,6 +27,7 @@ const Header = () => {
         <div className="w-full flex items-center justify-between py-6">
           <AppLogo />
           <HeaderNav />
+          <MobileHeaderNav />
         </div>
       </div>
     </header>
diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
index 46cde96..58a2706 100644
--- a/src/components/ui/accordion.tsx
+++ b/src/components/ui/accordion.tsx
@@ -28,7 +28,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        'flex flex-1 items-center justify-between py-4 text-base font-medium transition-all hover:opacity-80 group',
+        'flex flex-1 items-center justify-between py-4 text-base transition-all hover:opacity-80 group text-left font-semibold',
         className
       )}
       {...props}
diff --git a/src/data/header.ts b/src/data/header.ts
new file mode 100644
index 0000000..fcf2c12
--- /dev/null
+++ b/src/data/header.ts
@@ -0,0 +1,7 @@
+export const menu = [
+  { name: 'Features', id: 'features' },
+  { name: 'Testimonials', id: 'testimonials' },
+  { name: 'Problems we solve', id: 'problems' },
+  { name: 'FAQ', id: 'faq' },
+  { name: 'Contact', id: 'contact' },
+];
\ No newline at end of file
diff --git a/src/sections/contact/ContactSection.tsx b/src/sections/contact/ContactSection.tsx
index c787624..a4815c0 100644
--- a/src/sections/contact/ContactSection.tsx
+++ b/src/sections/contact/ContactSection.tsx
@@ -7,8 +7,8 @@ import ContactItem from './ContactItem';
 const ContactSection: React.FC = () => {
   // Renders
   return (
-    <section className="py-28" id="contact">
-      <div className="container flex flex-col items-center gap-20">
+    <section className="py-20 md:py-28" id="contact">
+      <div className="container flex flex-col items-center gap-12 md:gap-20">
         <SectionTitle title="Contact" description="Our contact information" />
 
         <div className="flex flex-col lg:flex-row items-center justify-between gap-10 w-full prose">
diff --git a/src/sections/faq/FaqSection.tsx b/src/sections/faq/FaqSection.tsx
index fbddc9d..0512704 100644
--- a/src/sections/faq/FaqSection.tsx
+++ b/src/sections/faq/FaqSection.tsx
@@ -15,15 +15,15 @@ const FaqSection: React.FC = () => {
   const renderFaqItems = () => {
     return faq.map((item) => (
       <AccordionItem key={item.title} value={item.title}>
-        <AccordionTrigger className="text-left">{item.title}</AccordionTrigger>
+        <AccordionTrigger>{item.title}</AccordionTrigger>
         <AccordionContent>{item.description}</AccordionContent>
       </AccordionItem>
     ));
   };
 
   return (
-    <section className="py-28" id="faq">
-      <div className="container flex flex-col items-center gap-20 border-gray-100">
+    <section className="py-20 md:py-28" id="faq">
+      <div className="container flex flex-col items-center gap-12 md:gap-20 border-gray-100">
         <SectionTitle
           title="Frequently asked questions"
           description="All you need to know about our solution"
@@ -38,9 +38,11 @@ const FaqSection: React.FC = () => {
           <p className="font-light text-sm">
             Can’t find the answer you’re looking for?
           </p>
-          <Button className="w-fit" size="default">
-            Contact us
-          </Button>
+          <a href="#contact-us">
+            <Button className="w-fit" size="default">
+              Contact us
+            </Button>
+          </a>
         </div>
       </div>
     </section>
diff --git a/src/sections/features/FeaturesItem.tsx b/src/sections/features/FeaturesItem.tsx
index 8f10d1c..83b3469 100644
--- a/src/sections/features/FeaturesItem.tsx
+++ b/src/sections/features/FeaturesItem.tsx
@@ -11,7 +11,7 @@ const FeaturesItem: FC<TProps> = (props) => {
   const { title, description, icon } = props;
 
   return (
-    <div className="flex flex-col items-center gap-4 prose">
+    <div className="flex flex-col items-center gap-3 md:gap-4 prose">
       <IconWrapper icon={icon} />
       <h3 className="text-center leading-none text-xl">{title}</h3>
       <p className="text-center text-base font-light">{description}</p>
diff --git a/src/sections/features/FeaturesSection.tsx b/src/sections/features/FeaturesSection.tsx
index c0b83cd..2a0e592 100644
--- a/src/sections/features/FeaturesSection.tsx
+++ b/src/sections/features/FeaturesSection.tsx
@@ -13,14 +13,14 @@ const FeaturesSection: React.FC = () => {
   };
 
   return (
-    <section className="py-28" id="features">
-      <div className="container flex flex-col items-center gap-20">
+    <section className="py-20 md:py-28" id="features">
+      <div className="container flex flex-col items-center gap-12 md:gap-20">
         <SectionTitle
           title="Features"
           description="Seamless Mendix Management Made Easy"
         />
 
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-20">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-10 gap-y-12 md:gap-y-20">
           {renderFeatures()}
         </div>
       </div>
diff --git a/src/sections/form/FormSection.tsx b/src/sections/form/FormSection.tsx
index ef36656..b9a51f1 100644
--- a/src/sections/form/FormSection.tsx
+++ b/src/sections/form/FormSection.tsx
@@ -25,8 +25,8 @@ const FormSection: React.FC = () => {
 
   // Renders
   return (
-    <section className="py-28 bg-gray-50" id="form">
-      <div className="container flex flex-col items-center gap-20">
+    <section className="py-20 md:py-28 bg-gray-50" id="contact-us">
+      <div className="container flex flex-col items-center gap-12 md:gap-20">
         <SectionTitle
           title="Contact us"
           description="We’d love to hear from you"
diff --git a/src/sections/hero/HeroSection.tsx b/src/sections/hero/HeroSection.tsx
index 18b289c..67c9c7a 100644
--- a/src/sections/hero/HeroSection.tsx
+++ b/src/sections/hero/HeroSection.tsx
@@ -1,7 +1,6 @@
 import heroImage from '@/assets/hero-image.png';
-import { Button } from '@/components/ui/button';
+import HeroButtons from '@/components/HeroButtons';
 import { cn } from '@/lib/utils';
-import { LinkExternal02 } from '@untitled-ui/icons-react';
 import Image from 'next/image';
 import { FC } from 'react';
 
@@ -15,24 +14,18 @@ const HeroSection: FC = () => {
       id="hero"
     >
       <div className="container flex flex-col items-center justify-center">
-        <div className="prose mb-10 flex flex-col items-center justify-center">
+        <div className="prose md:prose-md mb-10 flex flex-col items-center justify-center">
           <h1 className="text-center max-w-[856px]">
             Private Cloud Infrastructure for Mendix
           </h1>
-          <p className="text-center max-w-[564px] text-xl text-gray-600 font-light">
+          <p className="text-center max-w-[564px] text-base md:text-xl text-gray-600 font-light">
             Low-Ops is an Internal Developer Platform (IDP) for private clouds,
             managing Mendix app development, deployment, scaling, and security,
             so you can focus on building.
           </p>
         </div>
 
-        <div className="flex items-center justify-center gap-4 mb-14">
-          <Button variant="secondary" size="lg">
-            <LinkExternal02 width={18} height={18} className="mr-2" />
-            Demo
-          </Button>
-          <Button size="lg">Contact us</Button>
-        </div>
+        <HeroButtons className="mb-20" />
 
         <Image
           src={heroImage}
diff --git a/src/sections/problems/ProblemsItem.tsx b/src/sections/problems/ProblemsItem.tsx
index 8d6bb06..d5f58c2 100644
--- a/src/sections/problems/ProblemsItem.tsx
+++ b/src/sections/problems/ProblemsItem.tsx
@@ -37,9 +37,11 @@ const ProblemsItem: FC<TProps> = (props) => {
       <div className="flex-1 flex flex-col gap-4 max-w-1/2">
         <IconWrapper icon={icon} />
         <h3>{title}</h3>
-        <ul className="flex flex-col p-0 m-0 gap-4">{renderSolutions()}</ul>
+        <ul className="flex flex-col p-0 m-0 gap-2 md:gap-4">
+          {renderSolutions()}
+        </ul>
       </div>
-      <div className="flex-1 relative">
+      <div className="hidden md:block flex-1 relative">
         <div className={cn('absolute inset-0', isEven ? '-mr-60' : '-ml-60')}>
           <Image
             src={imagePath}
diff --git a/src/sections/problems/ProblemsSection.tsx b/src/sections/problems/ProblemsSection.tsx
index 5a14beb..0a3575d 100644
--- a/src/sections/problems/ProblemsSection.tsx
+++ b/src/sections/problems/ProblemsSection.tsx
@@ -12,14 +12,17 @@ const ProblemsSection: React.FC = () => {
   };
 
   return (
-    <section className="py-28 max-w-full overflow-hidden" id="problems">
-      <div className="container flex flex-col items-center gap-20">
+    <section
+      className="py-20 md:py-28 max-w-full overflow-hidden"
+      id="problems"
+    >
+      <div className="container flex flex-col items-center gap-12 md:gap-20">
         <SectionTitle
           title="Problems we solve"
           description="Solutions to Your Pain Points"
         />
 
-        <div className="flex flex-col gap-20">{renderFeatures()}</div>
+        <div className="flex flex-col gap-12 md:gap-20">{renderFeatures()}</div>
       </div>
     </section>
   );
diff --git a/src/sections/testimonials/TestimonialsCarousel.tsx b/src/sections/testimonials/TestimonialsCarousel.tsx
index 9a3acbf..ed1e3a7 100644
--- a/src/sections/testimonials/TestimonialsCarousel.tsx
+++ b/src/sections/testimonials/TestimonialsCarousel.tsx
@@ -16,8 +16,12 @@ const TestimonialsCarousel = () => {
     return testimonials.map((testimonial, index) => (
       <CarouselItem key={index}>
         <div className="p-1 prose flex flex-col items-center select-none">
-          <Image src={quoteSvg} alt="quote-icon" className="m-0" />
-          <p className="text-center text-2xl font-semibold text-gray-500">
+          <Image
+            src={quoteSvg}
+            alt="quote-icon"
+            className="m-0 w-10 md:w-auto"
+          />
+          <p className="text-center text-xl md:text-2xl font-semibold text-gray-500">
             {testimonial.text}
           </p>
 
diff --git a/src/sections/testimonials/TestimonialsSection.tsx b/src/sections/testimonials/TestimonialsSection.tsx
index 64f7aca..9d73996 100644
--- a/src/sections/testimonials/TestimonialsSection.tsx
+++ b/src/sections/testimonials/TestimonialsSection.tsx
@@ -4,8 +4,8 @@ import TestimonialsCarousel from './TestimonialsCarousel';
 
 const TestimonialsSection: React.FC = () => {
   return (
-    <section className="py-28 bg-gray-50" id="testimonials">
-      <div className="container flex flex-col items-center gap-20">
+    <section className="py-20 md:py-28 bg-gray-50" id="testimonials">
+      <div className="container flex flex-col items-center gap-12 md:gap-20">
         <SectionTitle
           title="Testimonials"
           description="Hear from our satisfied customers"
diff --git a/tailwind.config.ts b/tailwind.config.ts
index a13d04d..71e0b1f 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -18,20 +18,20 @@ const config: Config = {
           css: {
             maxWidth: '100%',
             h1: {
-              fontSize: '60px',
-              lineHeight: '72px',
+              fontSize: '48px',
+              lineHeight: '54px',
               margin: '0',
               fontWeight: '700',
             },
             h2: {
-              fontSize: '16px',
-              lineHeight: '24px',
+              fontSize: '14px',
+              lineHeight: '20px',
               margin: '0',
               fontWeight: '500',
             },
             h3: {
-              fontSize: '30px',
-              lineHeight: '38px',
+              fontSize: '26px',
+              lineHeight: '32px',
               margin: '0',
               fontWeight: '600',
             },
@@ -43,6 +43,18 @@ const config: Config = {
             },
           },
         },
+        md: {
+          css: {
+            h1: {
+              fontSize: '60px',
+              lineHeight: '72px',
+            },
+            h3: {
+              fontSize: '30px',
+              lineHeight: '38px',
+            },
+          },
+        },
       },
       fontFamily: {
         sans: ['var(--font-sans)', ...fontFamily.sans],