diff --git a/app/page.tsx b/app/page.tsx
index 623f50b..e7f6dba 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,8 @@ import Hero from '@/components/shared/Hero';
 import HowItWorks from '@/components/shared/HowItWorks';
 import Newsletter from '@/components/shared/Newsletter';
 
+
+
 const RootPage = () => {
   return (
     <>
@@ -10,6 +12,7 @@ const RootPage = () => {
       <HowItWorks />
       <About />
       <Newsletter />
+      <Faq />
     </>
   );
 };
diff --git a/components/shared/FAQ.tsx b/components/shared/FAQ.tsx
index 559e42a..a282715 100644
--- a/components/shared/FAQ.tsx
+++ b/components/shared/FAQ.tsx
@@ -1,7 +1,39 @@
+import { questions } from "@/constants";
 import React from "react";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "../ui/accordion";
 
 const Faq = () => {
-  return <div>Faq</div>;
+  return (
+    <section id="faq" className="wrapper container py-24 md:py-28">
+      <h2 className="text-3xl md:text-5xl font-bold mb-4 text-black dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
+        Frequently Asked Question
+      </h2>
+      <p className="textlg text-muted-foreground text-start mt-4 mb-8">
+        Find answers to common questions about SVRJS
+      </p>
+      <Accordion
+        type="single"
+        collapsible={true}
+        className="w-full AccordionRoot"
+      >
+        {questions.map(({ question, answer, key }) => (
+          <AccordionItem key={key} value={key} className="border-b">
+            <AccordionTrigger className="text-left text-lg">
+              {question}
+            </AccordionTrigger>
+            <AccordionContent className="text-[1rem] text-muted-foreground">
+              {answer}
+            </AccordionContent>
+          </AccordionItem>
+        ))}
+      </Accordion>
+    </section>
+  );
 };
 
 export default Faq;
diff --git a/components/shared/Footer.tsx b/components/shared/Footer.tsx
new file mode 100644
index 0000000..6c261a9
--- /dev/null
+++ b/components/shared/Footer.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const Footer = () => {
+  return <div>Footer</div>;
+};
+
+export default Footer;
diff --git a/components/shared/Hero.tsx b/components/shared/Hero.tsx
index 9a15521..f110f6d 100644
--- a/components/shared/Hero.tsx
+++ b/components/shared/Hero.tsx
@@ -45,7 +45,7 @@ const Hero = () => {
 
   return (
     <section className="relative container grid lg:grid-cols-2 place-items-center py-20 md:py-24 gap-10">
-      {/* <GridPattern
+      <GridPattern
         squares={[
           [4, 4],
           [5, 1],
@@ -56,9 +56,9 @@ const Hero = () => {
         ]}
         className={cn(
           "[mask-image:radial-gradient(300px_circle_at_center,white,transparent)]",
-          "inset-x-0 inset-y-[-50%] h-[200%] opacity-20"
+          "inset-x-0 inset-y-[-50%] h-[200%] opacity-30"
         )}
-      /> */}
+      />
       <div className="text-center lg:text-start space-y-6">
         <AnimatedGradientText className="mx-auto lg:mx-0">
           🎉{" "}
diff --git a/components/shared/Navbar.tsx b/components/shared/Navbar.tsx
index f15a109..221a7fa 100644
--- a/components/shared/Navbar.tsx
+++ b/components/shared/Navbar.tsx
@@ -66,7 +66,9 @@ const Navbar = () => {
                 key={label}
                 href={href}
                 target={target}
-                className={`border ${buttonVariants({ variant: 'ghost' })}`}
+                className={`border ${buttonVariants({
+                  variant: "ghost",
+                })} px-0 w-11`}
               >
                 <Image
                   src="/next.svg"
diff --git a/components/shared/Newsletter.tsx b/components/shared/Newsletter.tsx
index 48e7b38..47ed963 100644
--- a/components/shared/Newsletter.tsx
+++ b/components/shared/Newsletter.tsx
@@ -1,6 +1,16 @@
 "use client";
 
 import { useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import Image from "next/image";
+import { Happy_Monkey } from "next/font/google";
+
+const happyMonkey = Happy_Monkey({
+  preload: true,
+  weight: "400",
+  subsets: ["latin"],
+});
 
 const Newsletter = () => {
   const [submission, setSubmission] = useState<
@@ -15,21 +25,50 @@ const Newsletter = () => {
     <section id="newsletter">
       <hr className="w-11/12 mx-auto" />
       <div className="container py-24 md:py-32">
-        <h3 className="text-center text-4xl md:text-5xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-neutral-200 to-neutral-600">
+        <h3 className="text-center text-4xl md:text-5xl text-black font-bold dark:bg-clip-text dark:text-transparent dark:bg-gradient-to-b dark:from-white dark:to-neutral-400">
           Join The Newsletter!
         </h3>
         <p className="text-lg text-muted-foreground text-center mt-4 mb-8">
           Choosing the right website deployment option is important when
           creating a website, because it directly impacts the user experience
-          and the resources required to run your website. Website deployment is
-          a process of publishing a website into a production hosting
-          environment
+          and the resources required to run your website.
         </p>
         <form
           className="relative flex flex-col w-full md:flex-row md:w-6/12 lg:w-4/12 mx-auto gap-4 md:gap-2"
           onSubmit={handleSubmit}
-        ></form>
+        >
+          <Input placeholder="example@subscribe.com"></Input>
+
+          <Button disabled={submission === "loading"}>Subscribe</Button>
+          <div className="pointer-events-none dark:invert -scale-x-100 absolute -bottom-14 right-1/2 md:right-14 inline-flex justify-center items-center gap-1">
+            <Image
+              src="/curly-arrow.png"
+              alt="see here"
+              width={35}
+              height={35}
+            />
+            <span
+              className={`mt-10 font-bold text-black -scale-x-100 text-[15px] ${happyMonkey.className}`}
+            >
+              {submission === "idle" && "Subscribe Now"}
+              {submission === "loading" && (
+                <p className="text-sm text-center">Subscribing...</p>
+              )}
+              {submission === "success" && (
+                <p className="dark:invert text-sm text-center text-green-500">
+                  🎉 Subscribed successfully...
+                </p>
+              )}
+              {submission === "error" && (
+                <p className="dark:invert text-sm text-center text-red-500">
+                  😥 Something went wrong...
+                </p>
+              )}
+            </span>
+          </div>
+        </form>
       </div>
+      <hr className="w-11/12 mx-auto" />
     </section>
   );
 };
diff --git a/components/ui/accordion.tsx b/components/ui/accordion.tsx
new file mode 100644
index 0000000..24c788c
--- /dev/null
+++ b/components/ui/accordion.tsx
@@ -0,0 +1,58 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
new file mode 100644
index 0000000..677d05f
--- /dev/null
+++ b/components/ui/input.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }
diff --git a/constants/index.tsx b/constants/index.tsx
index 854ace1..919df52 100644
--- a/constants/index.tsx
+++ b/constants/index.tsx
@@ -77,3 +77,42 @@ export const Features = [
       "lorem ipsum dolor sit amet, consectetur adip lorem ipsum dolor lorem ipsum dolor",
   },
 ];
+
+export const questions = [
+  {
+    key: "item-1",
+    question: "What is a web server?",
+    answer:
+      "A web server is computer software that accepts HTTP requests and serves websites. Web servers can also be underlying hardware running web server software.",
+  },
+  {
+    key: "item-2",
+    question: "What is SVR.JS?",
+    answer:
+      "SVR.JS is web server software running on Node.JS that can host both static and dynamic content. With additional mods, SVR.JS can be used for different types of dynamic content and can even be used as a forward or reverse proxy. SVR.JS is licensed under a permissive MIT/X11 license",
+  },
+  {
+    key: "item-3",
+    question: "How was SVR.JS created?",
+    answer:
+      "Someone in 2018 wanted to create a website, but he didn't know about setting up popular web server software like Apache httpd, NGINX, or IIS... So he created his own web server in Node.JS to serve his website! And he saved it in a file called svr.js. Since then, this web server has been gradually turned from a web server intended for one website into a general-purpose web server, which is what SVR.JS is today!",
+  },
+  {
+    key: "item-4",
+    question: "How did SVR.JS get its name?",
+    answer:
+      "SVR.JS got its name from the original name of the server script: svr.js, one of many generic file names for a server written in JavaScript.",
+  },
+  {
+    key: "item-5",
+    question: "What is Node.JS?",
+    answer:
+      "Node.JS is an asynchronous event-driven JavaScript runtime built on Chromium's V8 engine. Node.JS is designed to build scalable network applications.",
+  },
+  {
+    key: "item-6",
+    question: "How can I use SVR.JS?",
+    answer:
+      "You can <a href='/docs' className='text-white'>read its documentation</a> to learn how to use the SVR.JS web server.",
+  },
+];
diff --git a/package-lock.json b/package-lock.json
index 5335101..0ce0143 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-regular-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
+        "@radix-ui/react-accordion": "^1.1.2",
         "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-navigation-menu": "^1.1.4",
@@ -550,6 +551,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-accordion": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.1.2.tgz",
+      "integrity": "sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-collapsible": "1.0.3",
+        "@radix-ui/react-collection": "1.0.3",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-alert-dialog": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.0.5.tgz",
@@ -680,6 +713,37 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-collapsible": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.0.3.tgz",
+      "integrity": "sha512-UBmVDkmR6IvDsloHVN+3rtx4Mi5TFvylYXpluuv0f37dtaz3H99bp8No0LGXRigVpl3UAT4l9j6bIchh42S/Gg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "@radix-ui/react-use-layout-effect": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-collection": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz",
diff --git a/package.json b/package.json
index d3b288e..40ae0d3 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-navigation-menu": "^1.1.4",