diff --git a/Frontend/app/(admin)/blogs/page.tsx b/Frontend/app/(admin)/blogs/page.tsx
index 916e894..229e407 100644
--- a/Frontend/app/(admin)/blogs/page.tsx
+++ b/Frontend/app/(admin)/blogs/page.tsx
@@ -24,7 +24,7 @@ export default async function BlogsPage() {
           subtitle={
             <>
               {" "}
-              <h2 className="text-base-content  font-bold text-2xl lg:text-3xl text-center max-w-5xl mx-auto px-6">
+              <h2 className="text-base-content text-2xl font-medium text-center max-w-5xl mx-auto px-6">
                 Join us for the journey as we make great food. Learn and grow
                 together
               </h2>
diff --git a/Frontend/app/(admin)/contact/page.tsx b/Frontend/app/(admin)/contact/page.tsx
index a21f685..ba8e525 100644
--- a/Frontend/app/(admin)/contact/page.tsx
+++ b/Frontend/app/(admin)/contact/page.tsx
@@ -2,13 +2,24 @@ import Footer from "@/components/Footer";
 import Background from "@/components/Utilities/Background";
 import Spacer from "@/components/Utilities/Spacer";
 import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
+import PageHeader from "@/sections/PageHeader";
 import React from "react";
 
 const page = () => {
   return (
     <div className="flex flex-col h-full w-full bg-base-100 ">
       <Background>
-        <Spacer className="pt-28" />
+        <PageHeader
+          title="Contact Us"
+          subtitle={
+            <>
+              {" "}
+              <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
+                We&apos;d love to talk about how we can help you.
+              </h2>
+            </>
+          }
+        />
         <FormLeftDescriptionRightContactUs />
         <Spacer className="mt-auto" />
         <Footer />
diff --git a/Frontend/app/(admin)/pricing/page.tsx b/Frontend/app/(admin)/pricing/page.tsx
index 8305c07..2c3b14d 100644
--- a/Frontend/app/(admin)/pricing/page.tsx
+++ b/Frontend/app/(admin)/pricing/page.tsx
@@ -42,7 +42,7 @@ export default function PricingPage() {
           subtitle={
             <>
               {" "}
-              <h2 className="text-base-content  content text-center max-w-6xl mx-auto px-6">
+              <h2 className="text-base-content text-2xl font-medium content text-center max-w-6xl mx-auto px-6">
                 Are you ready for fresh South West produce to be delivered to
                 your door?
               </h2>
@@ -158,8 +158,8 @@ function PriceCard({
         </div>
         <div className="flex flex-col mx-auto mt-auto">
           {!loading && (
-            <div className="flex flex-row mx-auto gap-x-4 justify-center items-center mb-2">
-              <h1 className="text-base-content ">
+            <div className="flex flex-row mx-auto gap-x-2 justify-center items-center mb-2">
+              <h1 className="text-base-content text-4xl font-bold">
                 $
                 {isAnnual
                   ? (product?.yearlyPrice?.unit_amount ?? 0) / 100
@@ -177,7 +177,7 @@ function PriceCard({
                   isAnnual ? product.yearlyPrice : product.monthlyPrice
                 )
               }
-              className=" mx-auto flex text-sm font-semibold py-2 px-20 m-2  bg-gradient-to-r from-primary to-secondary rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
+              className="btn btn-primary rounded-full bg-gradient-to-r from-primary to-secondary"
             >
               Try it!
             </button>
diff --git a/Frontend/app/globals.css b/Frontend/app/globals.css
index dad9ac6..3026545 100644
--- a/Frontend/app/globals.css
+++ b/Frontend/app/globals.css
@@ -4,26 +4,6 @@
 @tailwind components;
 @tailwind utilities;
 
-:root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-  }
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--heading-font);
+}
\ No newline at end of file
diff --git a/Frontend/app/layout.tsx b/Frontend/app/layout.tsx
index a1af263..6558934 100644
--- a/Frontend/app/layout.tsx
+++ b/Frontend/app/layout.tsx
@@ -1,6 +1,6 @@
 import "./globals.css";
 import type { Metadata } from "next";
-import "@/styles/style.css";
+import "../app/globals.css";
 import { Arimo, Raleway } from "next/font/google";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
@@ -11,7 +11,7 @@ import { GTagProvider, PHProvider, ThemeProvider } from "./providers";
 import PrelineScript from "@/components/Utilities/PrelineScript";
 
 const raleway = Raleway({
-  variable: "--display-font",
+  variable: "--heading-font",
   subsets: ["latin"],
 });
 
@@ -33,7 +33,11 @@ export default async function RootLayout({
   const isUserLoggedIn = await isAuthenticated(cookies());
 
   return (
-    <html lang="en" className="h-full" suppressHydrationWarning>
+    <html
+      lang="en"
+      className={`h-full ${raleway.variable} ${arimo.variable}`}
+      suppressHydrationWarning
+    >
       <PHProvider>
         <GTagProvider />
         <body className={`${arimo.className} bg-base-100 flex`}>
diff --git a/Frontend/components/BlogCard.tsx b/Frontend/components/BlogCard.tsx
index 6c169be..88eba47 100644
--- a/Frontend/components/BlogCard.tsx
+++ b/Frontend/components/BlogCard.tsx
@@ -30,7 +30,9 @@ function BlogCard({
           />
         </div>
         <div className="w-full h-2/5 ">
-          <h1 className="pt-4 pb-2 xl:pt-8 text-base-content ">{title}</h1>
+          <h1 className="pt-4 pb-2 xl:pt-8 text-base-content text-xl font-bold ">
+            {title}
+          </h1>
           <p className="text-base-content ">{subtitle}</p>
         </div>
       </Link>
diff --git a/Frontend/components/Button.tsx b/Frontend/components/Button.tsx
deleted file mode 100644
index 6581c5d..0000000
--- a/Frontend/components/Button.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { ModalStatus } from "@/types";
-import React from "react";
-
-interface ButtonProps {
-  status: ModalStatus;
-  text: string;
-}
-export const Button = ({ status, text }: ButtonProps) => {
-  const className = (() => {
-    switch (status) {
-      case ModalStatus.Loading:
-        return "btn text-primary-base-content bg-base-100 hover:bg-base-100 shadow disabled:bg-base-content disabled:shadow-none";
-
-      case ModalStatus.Success:
-        return "btn text-primary-base-content bg-base-100 hover:bg-base-100 shadow disabled:bg-base-content disabled:shadow-none";
-
-      case ModalStatus.Default:
-        return "btn text-primary-base-content bg-base-100 hover:bg-base-100 shadow";
-
-      default:
-        return "btn text-primary-base-content bg-base-100 hover:bg-base-100 shadow";
-    }
-  })();
-  return (
-    <button
-      type="submit"
-      className={className}
-      disabled={
-        status === ModalStatus.Success || status === ModalStatus.Loading
-      }
-    >
-      {status === ModalStatus.Loading ? (
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          className="animate-spin -ml-1 mr-3 h-5 w-5 bg-base-content"
-          viewBox="0 0 24 24"
-        >
-          <circle
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-            className="opacity-25"
-          ></circle>
-          <path
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            className="opacity-75"
-          ></path>
-        </svg>
-      ) : (
-        <></>
-      )}
-      {text}
-    </button>
-  );
-};
-
-export default Button;
diff --git a/Frontend/components/Footer.tsx b/Frontend/components/Footer.tsx
index 8db25f4..8c3c3fb 100644
--- a/Frontend/components/Footer.tsx
+++ b/Frontend/components/Footer.tsx
@@ -1,6 +1,6 @@
 "use client";
 import React from "react";
-import Icon from "./icon";
+import Icon from "./Icon";
 
 function Footer() {
   return (
diff --git a/Frontend/components/Header.tsx b/Frontend/components/Header.tsx
index 4346903..c6f9512 100644
--- a/Frontend/components/Header.tsx
+++ b/Frontend/components/Header.tsx
@@ -2,8 +2,8 @@
 
 import React from "react";
 import Navigation from "./Navigation";
-import ModalSignUp from "@/sections/ModalSignUp/ModalSignUp";
-import ModalSignIn from "@/sections/ModalSignIn/ModalSignIn";
+import ModalSignUp from "@/components/Modals/ModalSignUp";
+import ModalSignIn from "@/components/Modals/ModalSignIn";
 import { logout } from "@/app/(auth)/actions";
 import { getAuthCookie } from "@/app/(auth)/actions";
 import { SourceModal } from "@/types";
diff --git a/Frontend/components/Logo.tsx b/Frontend/components/Logo.tsx
index bf1f45a..4e0e72f 100644
--- a/Frontend/components/Logo.tsx
+++ b/Frontend/components/Logo.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "./icon";
+import Icon from "./Icon";
 import Link from "next/link";
 
 interface LogoProps {
diff --git a/Frontend/components/Modal.tsx b/Frontend/components/Modal.tsx
deleted file mode 100644
index c8bffc1..0000000
--- a/Frontend/components/Modal.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-
-const Modal = () => {
-  return (
-    <>
-      {/* You can open the modal using document.getElementById('ID').showModal() method */}
-      <button
-        className="btn"
-        onClick={() => document.getElementById("my_modal_4").showModal()}
-      >
-        open modal
-      </button>
-      <dialog id="my_modal_4" className="modal">
-        <div className="modal-box w-11/12 max-w-5xl">
-          <h3 className="font-bold text-lg">Hello!</h3>
-          <p className="py-4">Click the button below to close</p>
-          <div className="modal-action">
-            <form method="dialog">
-              {/* if there is a button, it will close the modal */}
-              <button className="btn">Close</button>
-            </form>
-          </div>
-        </div>
-      </dialog>
-    </>
-  );
-};
-
-export default Modal;
diff --git a/Frontend/sections/ModalSignIn/ModalSignIn.tsx b/Frontend/components/Modals/ModalSignIn.tsx
similarity index 87%
rename from Frontend/sections/ModalSignIn/ModalSignIn.tsx
rename to Frontend/components/Modals/ModalSignIn.tsx
index 85067ff..d491e11 100644
--- a/Frontend/sections/ModalSignIn/ModalSignIn.tsx
+++ b/Frontend/components/Modals/ModalSignIn.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import Icon from "@/components/icon";
+import Icon from "@/components/Icon";
 import { useTheme } from "next-themes";
 import colors from "@/utils/colors";
 import { useForm } from "react-hook-form";
@@ -7,8 +7,6 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import { signInValidationSchema } from "@/utils/form";
 
 function ModalSignIn() {
-  const { theme } = useTheme();
-  const color = colors[theme ?? "light"]["base-content"];
   const {
     register,
     handleSubmit,
@@ -19,23 +17,27 @@ function ModalSignIn() {
   });
   return (
     <>
-      <input type="checkbox" id="sign-in-modal" className="modal-toggle" />
+      <input
+        type="checkbox"
+        id="sign-in-modal"
+        className="modal-toggle"
+        onClick={() => {
+          reset();
+        }}
+      />
       <label htmlFor="sign-in-modal" className="modal cursor-pointer">
         <label className="modal-box relative bg-base-100  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
           <div className="flex justify-end pb-2 select-none">
             <label
               htmlFor="sign-in-modal"
-              className="cursor-pointer"
-              onClick={() => {
-                reset();
-              }}
+              className="cursor-pointer text-base-content"
             >
-              <Icon name="Dismiss20Filled" size="medium" color={color} />
+              <Icon name="Dismiss20Filled" size="medium" />
             </label>
           </div>
           <div>
             <div
-              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg"
+              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg text-primary-content"
               data-aos="fade-up"
             >
               <h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
diff --git a/Frontend/sections/ModalSignUp/ModalSignUp.tsx b/Frontend/components/Modals/ModalSignUp.tsx
similarity index 95%
rename from Frontend/sections/ModalSignUp/ModalSignUp.tsx
rename to Frontend/components/Modals/ModalSignUp.tsx
index 730415c..4e5733f 100644
--- a/Frontend/sections/ModalSignUp/ModalSignUp.tsx
+++ b/Frontend/components/Modals/ModalSignUp.tsx
@@ -1,10 +1,5 @@
-"use client";
-// TODO: Needs a complete rework to use the DaisyUI component
-
-import React, { useRef, useState } from "react";
-import { ModalStatus } from "@/types";
-import { FormRefMethods } from "../ModalSignIn/ModalSignInForm";
-import Icon from "@/components/icon";
+import React from "react";
+import Icon from "@/components/Icon";
 import { useForm } from "react-hook-form";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { signUpValidationSchema } from "@/utils/form";
@@ -26,14 +21,11 @@ function ModalSignUp() {
         id="sign-up-modal"
         className="modal-toggle"
         name=""
-      />
-      <label
-        htmlFor="sign-up-modal"
-        className="modal cursor-pointer"
         onClick={() => {
           reset();
         }}
-      >
+      />
+      <label htmlFor="sign-up-modal" className="modal cursor-pointer">
         <label className="modal-box relative  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
           <div className="flex justify-end pb-2 select-none">
             <label
@@ -48,7 +40,7 @@ function ModalSignUp() {
           </div>
           <div className="flex flex-grow flex-col h-[30rem] lg:h-full overflow-y-scroll">
             <div
-              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 mt-3 pb-6 rounded-lg"
+              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 mt-3 pb-6 rounded-lg text-primary-content"
               data-aos="fade-up"
             >
               <h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
diff --git a/Frontend/components/Navigation.tsx b/Frontend/components/Navigation.tsx
index 6c71e54..c2082c5 100644
--- a/Frontend/components/Navigation.tsx
+++ b/Frontend/components/Navigation.tsx
@@ -31,7 +31,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
           </div>
 
           <div className="flex-none hidden lg:block">
-            <ul className="menu menu-horizontal items-center text-base-content">
+            <ul className="menu menu-horizontal items-center text-base-content font-medium">
               {/* Site branding */}
               <div className="shrink-0 mr-4">
                 {/* Logo */}
diff --git a/Frontend/sections/AccountContent.tsx b/Frontend/sections/AccountContent.tsx
index 51cea02..05205e6 100644
--- a/Frontend/sections/AccountContent.tsx
+++ b/Frontend/sections/AccountContent.tsx
@@ -4,12 +4,11 @@ import {
   createManagementSubscriptionSession,
   getSubscriptions,
 } from "@/app/(auth)/actions";
-import { ModalStatus, Subscription, User } from "@/types";
+import { Subscription, User } from "@/types";
 import React from "react";
 import { useState, useEffect } from "react";
 import { toast } from "react-toastify";
 import { useRouter } from "next/navigation";
-import Button from "@/components/Button";
 import { useQRCode } from "next-qrcode";
 
 interface ManageSubscriptionProps {
@@ -69,9 +68,7 @@ function AccountContent({ user }: ManageSubscriptionProps) {
   };
 
   return loading ? (
-    <div className="flex flex-col">
-      <Button status={ModalStatus.Loading} text="Loading..." />
-    </div>
+    <div className="flex flex-col"></div>
   ) : (
     <div className="flex flex-col">
       {/* //TODO: Create Application Component */}
diff --git a/Frontend/sections/BlogContent.tsx b/Frontend/sections/BlogContent.tsx
index 87239d1..7fccf59 100644
--- a/Frontend/sections/BlogContent.tsx
+++ b/Frontend/sections/BlogContent.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 function BlogContent({ post }: { post: any }) {
   return (
     <div className="bg-base-200 mx-4 lg:mx-0 px-8 py-12 rounded-lg">
-      <h1 className="prose text-4xl font-bold text-base-content">
+      <h1 className="font-heading text-4xl font-bold text-base-content">
         {post.title}
       </h1>
       <div className="flex items-center gap-2">
diff --git a/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx b/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx
index f5e4414..fb20270 100644
--- a/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx
+++ b/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx
@@ -30,14 +30,6 @@ const FormLeftDescriptionRightContactUs = () => {
       {/* Contact Us */}
       <div className="max-w-[85rem] px-4 sm:px-6 lg:px-8 mx-auto pb-10">
         <div className="max-w-2xl lg:max-w-5xl mx-auto">
-          <div className="text-center">
-            <h1 className="font-bold text-base-content sm:text-4xl ">
-              Contact us
-            </h1>
-            <p className="mt-1 text-base-content ">
-              We&apos;d love to talk about how we can help you.
-            </p>
-          </div>
           <div className="mt-12 grid items-start lg:grid-cols-2 gap-6 lg:gap-16">
             {/* Card */}
             <div className="flex flex-col rounded-xl p-4 sm:p-6 lg:p-8  bg-base-100 min-h-[20rem]">
diff --git a/Frontend/sections/Hero/WaitingListWithImageHero.tsx b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
index fa14746..1fda14d 100644
--- a/Frontend/sections/Hero/WaitingListWithImageHero.tsx
+++ b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
@@ -4,7 +4,7 @@ import { yupResolver } from "@hookform/resolvers/yup";
 import React, { useEffect } from "react";
 import { useForm } from "react-hook-form";
 
-import Icon from "@/components/icon";
+import Icon from "@/components/Icon";
 import colors, { hexToRgb } from "@/utils/colors";
 import Footer from "@/components/Footer";
 import { useTheme } from "next-themes";
@@ -38,7 +38,7 @@ const WaitingListWithImageHero = () => {
     >
       <div className="h-screen  w-full bg-clip flex items-center justify-center">
         <div className="text-center py-8 px-4 sm:px-6 lg:px-8">
-          <h1 className="text-3xl text-base-content  sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
+          <h1 className="font-semibold text-3xl sm:text-6xl text-base-content font-heading whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
             <Icon name="LeafThree24Filled" size="xlarge" />
             Bethel Farms
           </h1>
@@ -186,7 +186,7 @@ const WaitingListWithImageHero = () => {
               </form>
             </>
           ) : (
-            <h2 className="text-2xl text-base-content  sm:text-4xl">
+            <h2 className="sm:text-3xl font-body text-base-content">
               You are on our waiting list. We will be in touch!
             </h2>
           )}
diff --git a/Frontend/sections/HeroHome.tsx b/Frontend/sections/HeroHome.tsx
deleted file mode 100755
index 6f9e45f..0000000
--- a/Frontend/sections/HeroHome.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React from "react";
-import ModalLearnMore from "./ModalLearnMore/ModalLearnMore";
-import { SourceModal } from "@/types";
-import { Raleway } from "next/font/google";
-
-const raleway = Raleway({
-  variable: "--display-font",
-  subsets: ["latin"],
-});
-
-function HeroHome() {
-  const bookDemoOnClick = () => {
-    const signUpModal = document.getElementById("sign-up-modal");
-    if (!signUpModal) return;
-    signUpModal.setAttribute("name", SourceModal.BookDemo);
-    signUpModal.removeAttribute("price_id");
-    signUpModal.click();
-  };
-
-  const learnMoreOnClick = () => {
-    const learnMoreModal = document.getElementById("learn-more-modal");
-    if (!learnMoreModal) return;
-    learnMoreModal.click();
-  };
-
-  return (
-    <section>
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 relative">
-        {/* Hero content */}
-        <div className="relative pt-[12rem] pb-10 md:pt-40 md:pb-16">
-          {/* Section header */}
-          <div className="max-w-3xl mx-auto text-center pb-12 md:pb-10">
-            <h1
-              className={`${raleway.className} text-black  font-raleway text-3xl leading-10   lg:py-12 tracking-[-1px] select-none w-[fit-content] md:leading-[6rem] m-auto  mb-4 lg:mb-0 md:text-[5.5rem]`}
-              data-aos="fade-up"
-            >
-              Your Offline Digital Forms Simplified.
-            </h1>
-            <p
-              className="text-lg font-semibold pb-12  mb-8 md:text-4xl text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary w-[fit-content]  mx-auto"
-              data-aos="fade-up"
-              data-aos-delay="200"
-            >
-              Sign365
-            </p>
-            <div className="max-w-xs mx-auto mt-[8rem] sm:max-w-none sm:flex sm:justify-center md:mt-auto">
-              <div data-aos="fade-up" data-aos-delay="400">
-                <button
-                  onClick={bookDemoOnClick}
-                  className="btn text-base capitalize rounded bg-base-content bg-secondary hover:bg-pink-700 w-full mb-4 sm:w-auto sm:mb-0"
-                >
-                  Book Demo
-                </button>
-              </div>
-              <div data-aos="fade-up" data-aos-delay="600">
-                <button
-                  onClick={learnMoreOnClick}
-                  className="btn text-base capitalize rounded bg-base-content bg-gray-825 hover:bg-gray-650 w-full sm:w-auto sm:ml-4"
-                >
-                  Learn more
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <ModalLearnMore />
-    </section>
-  );
-}
-
-export default HeroHome;
diff --git a/Frontend/sections/ModalLearnMore/ModalLearnMore.tsx b/Frontend/sections/ModalLearnMore/ModalLearnMore.tsx
deleted file mode 100644
index b94fa5f..0000000
--- a/Frontend/sections/ModalLearnMore/ModalLearnMore.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import SuccessModal from "../../sections/SuccessModal";
-import LoadingModal from "../../sections/LoadingModal";
-import xButton from "@/images/icon-x.svg";
-import ModalLearnMoreForm from "../../sections/ModalLearnMore/ModalLearnMoreForm";
-import Image from "next/image";
-import { ModalStatus } from "@/types";
-
-function ModalLearnMore() {
-  const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
-  const whenModalOpens = () =>
-    setTimeout(() => setStatus(ModalStatus.Default), 500);
-
-  return (
-    <>
-      <input
-        type="checkbox"
-        id="learn-more-modal"
-        className="modal-toggle"
-        onChange={whenModalOpens}
-      />
-      <label htmlFor="learn-more-modal" className="modal cursor-pointer">
-        <label className="modal-box relative bg-gray-850 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
-          <div className="flex justify-end pb-2 select-none">
-            <label
-              onClick={() => setStatus(ModalStatus.Default)}
-              htmlFor="learn-more-modal"
-              className="cursor-pointer"
-            >
-              <Image
-                className="rounded-full p-1 hover:bg-gray-500"
-                src={xButton}
-                alt="learnmore"
-              />
-            </label>
-          </div>
-          <div className={status === "default" ? "block" : "hidden"}>
-            <div
-              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
-              data-aos="fade-up"
-            >
-              <h3 className="bg-base-content pt-4 pb-2 text-lg md:text-3xl pt-6">
-                Want to learn more? Get the no-nonsense facts straight from the
-                source
-              </h3>
-              <p className="text-xs bg-base-content md:text-base">
-                Enter your email and we will email you a copy of our Whitepaper
-              </p>
-            </div>
-
-            <ModalLearnMoreForm setStatus={setStatus} />
-          </div>
-          {status === ModalStatus.Success && <SuccessModal />}
-          {status === ModalStatus.Loading && <LoadingModal />}
-        </label>
-      </label>
-    </>
-  );
-}
-
-export default ModalLearnMore;
diff --git a/Frontend/sections/ModalLearnMore/ModalLearnMoreForm.tsx b/Frontend/sections/ModalLearnMore/ModalLearnMoreForm.tsx
deleted file mode 100644
index 139bc54..0000000
--- a/Frontend/sections/ModalLearnMore/ModalLearnMoreForm.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-"use client";
-
-import React, { useState } from "react";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { learnMoreValidationSchema } from "@/utils/form";
-import { LearnMoreForm, ModalStatus, SourceModal } from "@/types";
-import { mailchimp } from "@/app/(auth)/actions";
-import { toast } from "react-toastify";
-
-interface ModalLearnMoreFormProps {
-  setStatus: React.Dispatch<React.SetStateAction<ModalStatus>>;
-}
-
-const ModalLearnMoreForm = ({ setStatus }: ModalLearnMoreFormProps) => {
-  const [email, setEmail] = useState("");
-
-  const {
-    register,
-    handleSubmit,
-    reset,
-    formState: { errors },
-  } = useForm({
-    resolver: yupResolver(learnMoreValidationSchema),
-  });
-
-  const submitForm = async (data: LearnMoreForm) => {
-    setEmail(data.email);
-    if (!data.email) {
-      return;
-    }
-    setStatus(ModalStatus.Loading);
-
-    try {
-      await sendMailchimpRequest(data);
-      setEmail("");
-      reset();
-      //   await handleSendgridSubmit(data.email);
-      setStatus(ModalStatus.Success);
-    } catch (error) {
-      if (error instanceof Error) {
-        toast.error(error.message, {
-          position: "bottom-left",
-          autoClose: 5000,
-          hideProgressBar: false,
-          closeOnClick: true,
-          pauseOnHover: true,
-          draggable: true,
-          progress: undefined,
-          theme: "colored",
-        });
-      }
-      setStatus(ModalStatus.Default);
-    }
-  };
-
-  const sendMailchimpRequest = async (data: LearnMoreForm) => {
-    console.log("sendMailchimpRequest call initiated");
-    await mailchimp({
-      email: data.email,
-      first_name: "",
-      last_name: "",
-      phone_number: "",
-      company_size: "",
-      source: SourceModal.LearnMore,
-    });
-    console.log("sendMailchimpRequest call success");
-  };
-
-  const handleSendgridSubmit = async (email: string) => {
-    const data = {
-      subscriberEmail: email,
-    };
-    //call to the Netlify Function you created
-    return fetch("./.netlify/functions/triggerLearnMoreEmail", {
-      method: "POST",
-      body: JSON.stringify({
-        subscriberEmail: data.subscriberEmail,
-      }),
-    });
-  };
-
-  return (
-    <form onSubmit={handleSubmit(submitForm)} className="w-full md:w-1/2">
-      <div className="relative mt-3 mb-2">
-        <input
-          {...register("email")}
-          id="learnMoreEmail"
-          type="text"
-          className="w-full appearance-none bg-transparent border border-white focus:border-white rounded-sm px-4 mr-2 bg-base-content placeholder-white"
-          placeholder="Your best email…"
-          aria-label="Your best email…"
-          autoComplete="on"
-        />
-        <label
-          className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          htmlFor="learnMoreEmail"
-        >
-          {errors.email ? "*" + errors.email.message : ""}
-        </label>
-      </div>
-
-      <button
-        type="submit"
-        className="btn capitalize font-bold text-black bg-base-100 hover:bg-white shadow"
-      >
-        Submit
-      </button>
-    </form>
-  );
-};
-
-export default ModalLearnMoreForm;
diff --git a/Frontend/sections/ModalSignIn/ModalSignInForm.tsx b/Frontend/sections/ModalSignIn/ModalSignInForm.tsx
deleted file mode 100644
index 19cd193..0000000
--- a/Frontend/sections/ModalSignIn/ModalSignInForm.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-"use client";
-
-import React, { useState, forwardRef, useImperativeHandle } from "react";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { signInValidationSchema } from "@/utils/form";
-import { login } from "@/app/(auth)/actions";
-import { ModalStatus, SignInForm, TextOnUse } from "@/types";
-import { useRouter } from "next/navigation";
-export interface FormRefMethods {
-  resetForm: () => void;
-}
-
-interface ModalSignInFormProps {
-  textOnUse: TextOnUse;
-  setStatus: React.Dispatch<React.SetStateAction<ModalStatus>>;
-}
-
-const ModalSignInForm = forwardRef<FormRefMethods, ModalSignInFormProps>(
-  ({ textOnUse, setStatus }: ModalSignInFormProps, ref) => {
-    // const context = useContext(Context);
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [organisation, setOrganisation] = useState("");
-    const router = useRouter();
-
-    const {
-      register,
-      handleSubmit,
-      reset,
-      setError,
-      clearErrors,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(signInValidationSchema),
-    });
-
-    const submitForm = async (data: SignInForm) => {
-      console.log("data", data);
-      clearErrors();
-      setEmail(data.email);
-      setPassword(!data.password ? "" : data.password);
-      setStatus(ModalStatus.Loading);
-      if (!data.password) return;
-      let response = undefined;
-      try {
-        console.log("before login");
-        response = await login({ email: data.email, password: data.password });
-        if (!response.success) {
-          throw new Error(response.error);
-        }
-        const signInModal = document.getElementById("sign-in-modal");
-        if (!!signInModal) signInModal.click();
-        router.push("/account");
-      } catch (error) {
-        setStatus(ModalStatus.Default);
-        console.log(error);
-        setError("email", { type: "custom", message: "Invalid Credentials" });
-      }
-    };
-    useImperativeHandle(ref, () => ({
-      resetForm: () => {
-        reset();
-        setEmail("");
-        setPassword("");
-        setOrganisation("");
-      },
-    }));
-    return (
-      <form onSubmit={handleSubmit(submitForm)} className="w-full md:w-1/2">
-        <div className="relative mt-3">
-          <input
-            {...register("email")}
-            id="SignInEmail"
-            type="text"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Your email…"
-            aria-label="Your email…"
-            autoComplete="on"
-          />
-          <label
-            htmlFor="SignInEmail"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.email ? "*" + errors.email.message : ""}
-          </label>
-        </div>
-        <div className="relative mt-1 mb-4">
-          <input
-            {...register("password")}
-            id="SignInPwd"
-            type="password"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Your password..."
-            aria-label="Your password..."
-          />
-          <label
-            htmlFor="SignInPwd"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.password ? "*" + errors.password.message : ""}
-          </label>
-        </div>
-
-        <button
-          type="submit"
-          className="btn capitalize font-bold text-black bg-base-100 hover:bg-base-100 shadow"
-        >
-          {textOnUse.buttonText}
-        </button>
-      </form>
-    );
-  }
-);
-ModalSignInForm.displayName = "ModalSignInForm";
-
-export default ModalSignInForm;
diff --git a/Frontend/sections/ModalSignUp/ModalSignUpForm.tsx b/Frontend/sections/ModalSignUp/ModalSignUpForm.tsx
deleted file mode 100644
index f3242a7..0000000
--- a/Frontend/sections/ModalSignUp/ModalSignUpForm.tsx
+++ /dev/null
@@ -1,317 +0,0 @@
-"use client";
-
-import React, {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from "react";
-import { useForm } from "react-hook-form";
-import { yupResolver } from "@hookform/resolvers/yup";
-import { signUpValidationSchema } from "@/utils/form";
-import {
-  login,
-  signup,
-  createCheckoutSession,
-  mailchimp,
-} from "@/app/(auth)/actions";
-import { CheckoutSession, ModalStatus, SignUpForm, TextOnUse } from "@/types";
-import { toast } from "react-toastify";
-import { useRouter } from "next/navigation";
-import { FormRefMethods } from "../ModalSignIn/ModalSignInForm";
-
-interface ModalSignUpFormProps {
-  generateCheckoutSession: boolean;
-  textOnUse: TextOnUse;
-  companySizeList: string[];
-  setStatus: React.Dispatch<React.SetStateAction<ModalStatus>>;
-  getPriceId: () => string | undefined;
-}
-
-const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
-  (
-    {
-      generateCheckoutSession,
-      companySizeList,
-      textOnUse,
-      setStatus,
-      getPriceId,
-    }: ModalSignUpFormProps,
-    ref
-  ) => {
-    const router = useRouter();
-    const [email, setEmail] = useState("");
-    const [password, setPassword] = useState("");
-    const [organisation, setOrganisation] = useState("");
-
-    const {
-      register,
-      handleSubmit,
-      reset,
-      formState: { errors },
-    } = useForm({
-      resolver: yupResolver(signUpValidationSchema),
-    });
-
-    const submitForm = async (data: SignUpForm) => {
-      setEmail(data.email);
-      setPassword(data.password!);
-      setOrganisation(data.organisation);
-      setStatus(ModalStatus.Loading);
-      try {
-        await sendMailchimpRequest(data);
-        await sendSignUpRequest(data);
-        await sendSignInRequest(data);
-        const price_id = getPriceId();
-        console.log("price_id", price_id);
-        const checkoutSession = await checkoutSessionRequest(price_id);
-        setEmail("");
-        setPassword("");
-        setOrganisation("");
-        reset();
-        setStatus(ModalStatus.Success);
-        if (!!checkoutSession) {
-          router.push(checkoutSession.url);
-        }
-      } catch (error) {
-        if (error instanceof Error) {
-          toast.error(error.message, {
-            position: "bottom-left",
-            autoClose: 5000,
-            hideProgressBar: false,
-            closeOnClick: true,
-            pauseOnHover: true,
-            draggable: true,
-            progress: undefined,
-            theme: "colored",
-          });
-        }
-        setStatus(ModalStatus.Default);
-      }
-    };
-
-    const sendMailchimpRequest = async (data: SignUpForm) => {
-      console.log("sendMailchimpRequest call initiated");
-      await mailchimp({
-        email: data.email,
-        first_name: data.first_name,
-        last_name: data.last_name,
-        phone_number: !data.phone_number ? "" : data.phone_number,
-        company_size: data.company_size,
-        source: textOnUse.source,
-      });
-      console.log("sendMailchimpRequest call success");
-    };
-
-    const checkoutSessionRequest = async (price_id?: string) => {
-      if (!price_id) {
-        return;
-      }
-      console.log("createCheckoutSession call initiated");
-      const checkoutSession = await createCheckoutSession(price_id);
-      console.log("createCheckoutSession successful");
-      return checkoutSession;
-    };
-
-    const sendSignUpRequest = async (data: SignUpForm) => {
-      try {
-        console.log("Signup call initiated");
-        await signup(data);
-        console.log("Signup successful");
-      } catch (error) {
-        if (error instanceof Error) {
-          console.error(
-            "Error during the signup or email process:",
-            error.message
-          );
-        }
-        throw error; // This will allow .catch block outside this function to capture the error
-      }
-    };
-
-    const sendSignInRequest = async (data: SignUpForm) => {
-      try {
-        console.log("SignIn call initiated");
-        await login({ email: data.email, password: data.password! });
-        console.log("SignIn successful");
-      } catch (error) {
-        if (error instanceof Error) {
-          console.error(
-            "Error during the SignIn or email process:",
-            error.message
-          );
-        }
-        throw error; // This will allow .catch block outside this function to capture the error
-      }
-    };
-    useImperativeHandle(ref, () => ({
-      resetForm: () => {
-        reset();
-        setEmail("");
-        setPassword("");
-        setOrganisation("");
-      },
-    }));
-
-    return (
-      <form onSubmit={handleSubmit(submitForm)} className="w-full md:w-1/2">
-        <div className="relative mt-3">
-          <input
-            {...register("email")}
-            type="text"
-            id="SignUpEmail"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Email…"
-            aria-label="Email…"
-            autoComplete="on"
-          />
-          <label
-            htmlFor="SignUpEmail"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.email ? "*" + errors.email.message : ""}
-          </label>
-        </div>
-        <div className="relative mt-1">
-          <input
-            {...register("first_name")}
-            id="SignUpFirstName"
-            type="text"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black"
-            placeholder="First Name…"
-            aria-label="First Name…"
-            autoComplete="on"
-          />
-          <label
-            htmlFor="SignUpFirstName"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.first_name ? "*" + errors.first_name.message : ""}
-          </label>
-        </div>
-        <div className="relative mt-1">
-          <input
-            {...register("last_name")}
-            id="SignUpLastName"
-            type="text"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Last Name…"
-            aria-label="Last Name…"
-          />
-          <label
-            htmlFor="SignUpLastName"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.last_name ? "*" + errors.last_name.message : ""}
-          </label>
-        </div>
-
-        <div className="relative mt-1">
-          <input
-            {...register("phone_number")}
-            id="SignUpPhoneNumber"
-            type="text"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Phone Number…"
-            aria-label="Phone Number…"
-          />
-          <label
-            htmlFor="SignUpPhoneNumber"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.phone_number ? "*" + errors.phone_number.message : ""}
-          </label>
-        </div>
-        <div className="relative mt-1">
-          <input
-            {...register("organisation")}
-            id="SignUpOrganisation"
-            type="text"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Organisation…"
-            aria-label="Organisation…"
-          />
-          <label
-            htmlFor="SignUpOrganisation"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.organisation ? "*" + errors.organisation.message : ""}
-          </label>
-        </div>
-        <div className="relative mt-1">
-          <select
-            {...register("company_size")}
-            id="SignUpCompanySize"
-            defaultValue={""}
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-          >
-            <option className="bg-gray-850" value={""} disabled>
-              Company Size…
-            </option>
-            {companySizeList.map((companySizeOption, i) => {
-              return (
-                <option
-                  className="bg-gray-850"
-                  value={companySizeOption}
-                  key={i}
-                >
-                  {companySizeOption}
-                </option>
-              );
-            })}
-          </select>
-          <label
-            htmlFor="SignUpCompanySize"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.company_size ? "*" + errors.company_size.message : ""}
-          </label>
-        </div>
-        <div className="relative mt-1">
-          <input
-            {...register("password")}
-            id="SignUpPwd"
-            type="password"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Password..."
-            aria-label="Password"
-          />
-          <label
-            htmlFor="SignUpPwd"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.password ? "*" + errors.password.message : ""}
-          </label>
-        </div>
-        <div className="relative mt-1 mb-4">
-          <input
-            {...register("passwordConfirmation")}
-            id="SignUpPwdConfirm"
-            type="password"
-            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black  dark:placeholder-white dark:border-white"
-            placeholder="Confirmed Password..."
-            aria-label="Confirmed Password"
-          />
-          <label
-            htmlFor="SignUpPwd"
-            className="md:absolute top-[50%] translate-y-[-50%] left-[105%] w-[220px] text-red-400"
-          >
-            {errors.passwordConfirmation
-              ? "*" + errors.passwordConfirmation.message
-              : ""}
-          </label>
-        </div>
-
-        <button
-          type="submit"
-          className="btn capitalize font-bold text-black bg-base-100 hover:bg-base-100 shadow"
-        >
-          {textOnUse.buttonText}
-        </button>
-      </form>
-    );
-  }
-);
-
-ModalSignUpForm.displayName = "ModalSignUpForm";
-export default ModalSignUpForm;
diff --git a/Frontend/sections/ModalSignUp/useTextsBasedOnActivityState.tsx b/Frontend/sections/ModalSignUp/useTextsBasedOnActivityState.tsx
deleted file mode 100644
index 7b90895..0000000
--- a/Frontend/sections/ModalSignUp/useTextsBasedOnActivityState.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import { ModalStatus, SourceModal } from '@/types';
-import { useState } from 'react';
-
-function useTextsBasedOnActivityState(setStatus: React.Dispatch<React.SetStateAction<ModalStatus>>){
-    const signUpTexts = {
-        title: "We Are Growing Fast, and We Want You To Join The Party!",
-        subTitle: "Join our super awesome waitlist and be one of the first to know when spots open up!",
-        buttonText: "Sign Up",
-        netlifyFunction: "triggerSignUpEmail",
-        source: SourceModal.SignUp
-    }
-
-    const signUpViaPurchaseTexts = {
-        title: "Get Ready For Ultimate Productivity",
-        subTitle: "Excited to see what we've got! Signup and get started!",
-        buttonText: "Sign Up",
-        netlifyFunction: "triggerSignUpEmail",
-        source: SourceModal.SignUpViaPurchase
-    }
-    
-    const bookDemoTexts = {
-        title: "Get Ready For Ultimate Productivity",
-        subTitle: "Excited to see what we've got! Signup and get started!",
-        buttonText: "Book Now",
-        netlifyFunction: "triggerBookNowEmail",
-        source: SourceModal.BookDemo
-    }
-
-    const TryItTexts = {
-        title: "Get Ready For Ultimate Productivity",
-        subTitle: "Excited to see what we've got! Send us your details and our marketing rep will schedule a demo ASAP.",
-        buttonText: "Try It",
-        netlifyFunction: "triggerBookNowEmail",
-        source: SourceModal.TryIt
-    }
-    
-    const [textOnUse, setTextOnUse] = useState(signUpTexts)
-    
-    const companySizeList = [
-        "1-10 employees",
-        "10-30 employees",
-        "30-70 employees",
-        "70-100 employees",
-        "100+ employees"
-    ]
-    
-    const whenModalOpens = () => {
-        const signUpModal = document.getElementById("sign-up-modal");
-        if (!signUpModal) return;
-        const nameAttribute = signUpModal.getAttribute("name"); 
-        switch(nameAttribute){
-            case SourceModal.BookDemo:
-                setTextOnUse(bookDemoTexts);
-                break;
-            case SourceModal.TryIt:
-                setTextOnUse(TryItTexts);
-                break;
-            case SourceModal.SignUp:
-                setTextOnUse(signUpTexts);
-                break;
-            case SourceModal.SignUpViaPurchase:
-                setTextOnUse(signUpViaPurchaseTexts)
-                break;
-            default:
-                setTextOnUse(bookDemoTexts);
-                break;
-        }
-        setTimeout(() => setStatus(ModalStatus.Default), 500);
-    }
-
-    const getPriceId = () => {
-        const signUpModal = document.getElementById("sign-up-modal");
-        if (!signUpModal) return undefined;
-        const price_id = signUpModal.getAttribute("price_id");
-        if (!price_id) return undefined;
-        return price_id;
-    }
-
-    return {textOnUse, companySizeList, whenModalOpens, getPriceId}
-}
-
-export default useTextsBasedOnActivityState;
\ No newline at end of file
diff --git a/Frontend/sections/Newsletter/NewsletterForm.tsx b/Frontend/sections/Newsletter/NewsletterForm.tsx
index 3d48e15..fe4929c 100644
--- a/Frontend/sections/Newsletter/NewsletterForm.tsx
+++ b/Frontend/sections/Newsletter/NewsletterForm.tsx
@@ -5,7 +5,6 @@ import { NewsLetterForm, SourceModal } from "@/types";
 import { mailchimp } from "@/app/(auth)/actions";
 import { toast } from "react-toastify";
 import { ModalStatus } from "@/types";
-import Button from "@/components/Button";
 
 const NewsletterForm = () => {
   const [status, setStatus] = useState<ModalStatus>(ModalStatus.Default);
@@ -77,7 +76,7 @@ const NewsletterForm = () => {
 
   return (
     <>
-      <div className="mb-6 lg:mr-16 lg:mb-0 text-center lg:text-left lg:w-1/2">
+      <div className="mb-6 lg:mr-16 lg:mb-0 text-center lg:text-left lg:w-1/2 text-primary-content">
         <h3 className=" mb-2 text-3xl font-black">
           {status !== ModalStatus.Success
             ? "Stay Ahead of the Curve"
@@ -93,9 +92,17 @@ const NewsletterForm = () => {
       <div className="w-full lg:w-1/2">
         <form
           onSubmit={(e) => submitForm(e)}
-          className="flex flex-col sm:flex-row justify-center max-w-xs mx-auto sm:max-w-md lg:max-w-none"
+          className="flex flex-col sm:flex-row justify-center max-w-xs mx-auto sm:max-w-md lg:max-w-none gap-x-2"
         >
           <input
+            id="NewsletterEmail"
+            type="text"
+            className="py-3 px-4 block w-full text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
+            placeholder="Email…"
+            aria-label="Email…"
+            // {...register("email")}
+          />
+          {/* <input
             required
             name="email"
             type="email"
@@ -106,22 +113,8 @@ const NewsletterForm = () => {
             aria-label="Your best email…"
             disabled={status === ModalStatus.Success}
             autoComplete="on"
-          />
-          <Button
-            status={status}
-            text={(() => {
-              switch (status) {
-                case ModalStatus.Loading:
-                  return "Sending...";
-                case ModalStatus.Success:
-                  return "Success";
-                case ModalStatus.Default:
-                  return "Subscribe";
-                default:
-                  return "default-class";
-              }
-            })()}
-          />
+          /> */}
+          <button className="btn btn-primary">Subscribe</button>
         </form>
       </div>
     </>
diff --git a/Frontend/sections/PageHeader.tsx b/Frontend/sections/PageHeader.tsx
index 0c625da..a6535ac 100644
--- a/Frontend/sections/PageHeader.tsx
+++ b/Frontend/sections/PageHeader.tsx
@@ -7,7 +7,7 @@ interface PageHeaderProps {
 function PageHeader({ title, subtitle }: PageHeaderProps) {
   return (
     <div className="pt-28 max-w-screen flex flex-col">
-      <h1 className="text-5xl font-black text-base-content  mb-12 mx-auto">
+      <h1 className="text-5xl font-bold text-base-content  mb-6 mx-auto">
         {title}
       </h1>
       {subtitle}
diff --git a/Frontend/styles/style.css b/Frontend/styles/style.css
deleted file mode 100644
index 7bd0bbe..0000000
--- a/Frontend/styles/style.css
+++ /dev/null
@@ -1,19 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Architects+Daughter&family=Inter:wght@400;500;600;700;800;900&display=fallback');
-@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500;600;700;800;900&display=fallback');
-
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-
-@import 'tailwindcss/utilities';
-
-/* Additional Tailwind directives: https://tailwindcss.com/docs/functions-and-directives/#responsive */
-@layer utilities {
-    .rtl {
-        direction: rtl;
-    }
-}
-
-/* See Alpine.js: https://github.com/alpinejs/alpine#x-cloak */
-[x-cloak=""] {
-    display: none;
-}
\ No newline at end of file
diff --git a/Frontend/tailwind.config.ts b/Frontend/tailwind.config.ts
index a744136..bf077cc 100644
--- a/Frontend/tailwind.config.ts
+++ b/Frontend/tailwind.config.ts
@@ -11,57 +11,9 @@ const config: Config = {
   ],
   theme: {
     extend: {
-      colors: {
-        gray: {
-          100: "#EBF1F5",
-          200: "#D9E3EA",
-          300: "#C5D2DC",
-          400: "#9BA9B4",
-          500: "#707D86",
-          550: "#52485B",
-          600: "#55595F",
-          650: "#4c5058",
-          700: "#33363A",
-          800: "#25282C",
-          825: "#34363A",
-          850: "#383040",
-          900: "#151719",
-          925: "#191D24",
-          950: "#000000",
-        },
-        purple: {
-          default: "#8000FF",
-          100: "#F4F4FF",
-          200: "#E2E1FF",
-          300: "#CBCCFF",
-          400: "#ABABFF",
-          500: "#8D8DFF",
-          600: "#5D5DFF",
-          700: "#4B4ACF",
-          800: "#38379C",
-          900: "#262668",
-        },
-        pink: {
-          default: "#FF0DCA",
-          500: "#D18DFF",
-          550: "#8A4CC8",
-          600: "#AB4FD7",
-          700: "#7a2ec5",
-          900: "#3C3445",
-        },
-        red: {
-          300: "#C84C4C",
-          600: "#8b2e2e",
-        },
-      },
-      spacing: {
-        "9/16": "56.25%",
-        "3/4": "75%",
-        "1/1": "100%",
-      },
       fontFamily: {
-        primary: ["Raleway Variable", ...defaultTheme.fontFamily.sans],
-        secondary: ["Arimo Variable", ...defaultTheme.fontFamily.sans],
+        heading: 'var(--heading-font)',
+        body: 'var(--heading-font)',
       },
       fontSize: {
         xs: "0.75rem",
@@ -75,9 +27,6 @@ const config: Config = {
         "5xl": "3.25rem",
         "6xl": "4rem",
       },
-      inset: {
-        full: "100%",
-      },
       letterSpacing: {
         tighter: "-0.02em",
         tight: "-0.01em",
@@ -86,12 +35,33 @@ const config: Config = {
         wider: "0.02em",
         widest: "0.4em",
       },
-      minWidth: {
-        "10": "2.5rem",
-      },
-      scale: {
-        "98": ".98",
-      },
+      typography: {
+        DEFAULT: {
+          css: {
+            p: {
+              fontFamily: 'var(--body-font)'
+            },
+            h1: {
+              fontFamily: 'var(--heading-font)'
+            },
+            h2: {
+              fontFamily: 'var(--heading-font)'
+            },
+            h3: {
+              fontFamily: 'var(--heading-font)'
+            },
+            h4: {
+              fontFamily: 'var(--heading-font)'
+            },
+            h5: {
+              fontFamily: 'var(--heading-font)'
+            },
+            h6: {
+              fontFamily: 'var(--heading-font)'
+            }
+          }
+        }
+      }
     },
   },
   daisyui: {