diff --git a/Frontend/app/(admin)/blogs/[slug]/page.tsx b/Frontend/app/(admin)/blogs/[slug]/page.tsx
index 359bbf5..2865841 100644
--- a/Frontend/app/(admin)/blogs/[slug]/page.tsx
+++ b/Frontend/app/(admin)/blogs/[slug]/page.tsx
@@ -52,7 +52,7 @@ const PostPage = (props: any) => {
         <div className="relative bg-grey-950 w-full h-max z-40 py-24 px-6 flex justify-center pointer-events-none">
           <div className="p-8 bg-gray-100 dark:bg-pink-900 w-full max-w-[700px] rounded-xl z-50 relative pointer-events-auto">
             <div className="flex justify-between w-full">
-              <Link href="/blogs" className="text-pink-default">
+              <Link href="/blogs" className="text-primary">
                 ← Back to Blogs
               </Link>
               <div className="flex justify-end pb-2 select-none">
diff --git a/Frontend/app/(admin)/blogs/page.tsx b/Frontend/app/(admin)/blogs/page.tsx
index cbe3e64..dac99a4 100644
--- a/Frontend/app/(admin)/blogs/page.tsx
+++ b/Frontend/app/(admin)/blogs/page.tsx
@@ -10,7 +10,11 @@ export default function BlogsPage() {
     .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
     .map((post) => <BlogCard key={post.slug} {...post} />);
   return (
-    <main id="content" role="main" className="h-full flex-grow flex flex-col">
+    <main
+      id="content"
+      role="main"
+      className="h-full flex-grow flex flex-col bg-white dark:bg-black"
+    >
       {/*  Page sections */}
       <PageHeader
         title="Blogs"
@@ -18,8 +22,8 @@ export default function BlogsPage() {
           <>
             {" "}
             <h2 className="text-black dark:text-white font-bold text-2xl lg:text-3xl text-center max-w-5xl mx-auto px-6">
-              Find case studies and information for how Sign365 is giving
-              businesses superpowers
+              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
new file mode 100644
index 0000000..6368c50
--- /dev/null
+++ b/Frontend/app/(admin)/contact/page.tsx
@@ -0,0 +1,17 @@
+import Footer from "@/components/Footer";
+import Spacer from "@/components/Utilities/Spacer";
+import FormLeftDescriptionRightContactUs from "@/sections/ContactUs/FormLeftDescriptionRightContactUs";
+import React from "react";
+
+const page = () => {
+  return (
+    <div className="flex flex-col h-full w-full bg-white dark:bg-black">
+      <Spacer className="pt-28" />
+      <FormLeftDescriptionRightContactUs />
+      <Footer />
+      <Spacer className="pt-16" />
+    </div>
+  );
+};
+
+export default page;
diff --git a/Frontend/app/(admin)/pricing/page.tsx b/Frontend/app/(admin)/pricing/page.tsx
index 52dde22..e33cadf 100644
--- a/Frontend/app/(admin)/pricing/page.tsx
+++ b/Frontend/app/(admin)/pricing/page.tsx
@@ -29,16 +29,16 @@ export default function PricingPage() {
     <main
       id="content"
       role="main"
-      className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden"
+      className="h-full flex flex-col min-h-screen mx-auto w-screen overflow-hidden bg-white dark:bg-black"
     >
       <PageHeader
         title="Pricing"
         subtitle={
           <>
             {" "}
-            <h2 className="h3 text-primary-content content text-center max-w-6xl mx-auto px-6">
-              Select a subscription plan for your team or try advanced
-              functionality for free.
+            <h2 className="h3 text-base-content 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>
           </>
         }
@@ -109,7 +109,7 @@ function PriceCard({
       <div className="flex flex-col h-full">
         <div className="mb-12 relative">
           {false && (
-            <p className="absolute top-[-10px] left-[50%] -translate-x-1/2 font-architects-daughter text-xl text-pink-default text-center">
+            <p className="absolute top-[-10px] left-[50%] -translate-x-1/2 font-architects-daughter text-xl text-primary text-center">
               Popular
             </p>
           )}
@@ -150,7 +150,7 @@ function PriceCard({
             onClick={() =>
               submitForm(isAnnual ? product.yearlyPrice : product.monthlyPrice)
             }
-            className=" mx-auto flex text-sm font-semibold py-2 px-20 m-2 text-white bg-gradient-to-r from-pink-default to-purple-default rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
+            className=" mx-auto flex text-sm font-semibold py-2 px-20 m-2 text-white bg-gradient-to-r from-primary to-secondary rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
           >
             Try it!
           </button>
@@ -178,14 +178,14 @@ function PriceToggle({
         />
         <span
           className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
-            !isAnnual ? "text-white bg-pink-550" : "text-body-color"
+            !isAnnual ? "text-white bg-secondary" : "text-body-color"
           }`}
         >
           Monthly Billing
         </span>
         <span
           className={`flex items-center space-x-[6px] rounded py-2 px-[18px] text-sm font-medium ${
-            isAnnual ? "text-white bg-pink-550" : "text-body-color"
+            isAnnual ? "text-white bg-secondary" : "text-body-color"
           }`}
         >
           Yearly Billing
diff --git a/Frontend/app/page.tsx b/Frontend/app/page.tsx
index 077ec55..367cd97 100644
--- a/Frontend/app/page.tsx
+++ b/Frontend/app/page.tsx
@@ -10,7 +10,7 @@ import React from "react";
 import {
   CenterAllignedWithVideoHero,
   WaitingListWithImageHero,
-} from "@/sections/HeroSections";
+} from "@/sections/Hero";
 import PageWrapper from "@/components/Utilities/PageWrapper";
 import Footer from "@/components/Footer";
 
diff --git a/Frontend/components/Button.tsx b/Frontend/components/Button.tsx
index c837e93..214a82f 100644
--- a/Frontend/components/Button.tsx
+++ b/Frontend/components/Button.tsx
@@ -9,16 +9,16 @@ export const Button = ({ status, text }: ButtonProps) => {
   const className = (() => {
     switch (status) {
       case ModalStatus.Loading:
-        return "btn text-purple-default bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
+        return "btn text-primary bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
 
       case ModalStatus.Success:
-        return "btn text-purple-default bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
+        return "btn text-primary bg-white hover:bg-white shadow disabled:text-white disabled:shadow-none";
 
       case ModalStatus.Default:
-        return "btn text-purple-default bg-white hover:bg-white shadow";
+        return "btn text-primary bg-white hover:bg-white shadow";
 
       default:
-        return "btn text-purple-default bg-white hover:bg-white shadow";
+        return "btn text-primary bg-white hover:bg-white shadow";
     }
   })();
   return (
diff --git a/Frontend/components/Footer.tsx b/Frontend/components/Footer.tsx
index e9351fa..af4c2bd 100644
--- a/Frontend/components/Footer.tsx
+++ b/Frontend/components/Footer.tsx
@@ -1,24 +1,25 @@
+"use client";
 import React from "react";
-import Logo from "./Logo";
+import Icon from "./icon";
 
 function Footer() {
   return (
     <footer>
-      <div className="py-12 md:py-1 bg-base-100">
+      <div className="py-12 md:py-1">
         <div className="max-w-6xl mx-auto px-4 sm:px-6" data-aos="fade-up">
           {/* Bottom area */}
           <div className="flex items-center justify-center">
             {/* Social links */}
             <ul className="flex md:order-1 md:mb-0 justify-center">
               <li>
-                <Logo label="YouTube" />
+                <Icon name="LeafThree24Filled" size="xlarge" />
               </li>
             </ul>
           </div>
 
           {/* Copyrights note */}
           <div className="text-gray-400 text-xs text-center dark:text-white mt-2">
-            &copy; 2024 Sign365.
+            &copy; 2024 Bethel Farms
           </div>
         </div>
       </div>
diff --git a/Frontend/components/GetStartedSectionButton.tsx b/Frontend/components/GetStartedSectionButton.tsx
index e7d8b31..47a71fb 100644
--- a/Frontend/components/GetStartedSectionButton.tsx
+++ b/Frontend/components/GetStartedSectionButton.tsx
@@ -36,7 +36,7 @@ export const GetStartedSectionButton = ({
   ) : (
     <button
       onClick={() => router.push("/pricing")}
-      className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-pink-default to-purple-default hover:bg-gray-900 w-full sm:w-auto"
+      className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
     >
       Upgrade
     </button>
diff --git a/Frontend/components/Logo.tsx b/Frontend/components/Logo.tsx
index ec54832..e863152 100644
--- a/Frontend/components/Logo.tsx
+++ b/Frontend/components/Logo.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import logo from "@/images/icon.svg";
 import Image from "next/image";
+import Icon from "./icon";
 
 interface LogoProps {
   label?: string;
@@ -19,7 +20,7 @@ function Logo({ label, className }: LogoProps) {
       target={label !== undefined ? "_blank" : ""}
     >
       {/* <Image className="absolute hover:rotate-[360deg] transition duration-1000 ease-in-out" src={logoArrow} alt="Logo"/> */}
-      <Image src={logo} alt="Logo" priority={true} />
+      <Icon name="LeafThree24Filled" size="xlarge" />
       {label !== undefined ? (
         <span className="invisible absolute left-[50%] top-[-40px] translate-x-[-50%] p-1 rounded-lg font-bold bg-gray-800 text-fuchsia-400 group-hover:visible">
           {label}
diff --git a/Frontend/components/Modal.tsx b/Frontend/components/Modal.tsx
new file mode 100644
index 0000000..c8bffc1
--- /dev/null
+++ b/Frontend/components/Modal.tsx
@@ -0,0 +1,29 @@
+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/components/Navigation.tsx b/Frontend/components/Navigation.tsx
index 6b084a5..d57ad9b 100644
--- a/Frontend/components/Navigation.tsx
+++ b/Frontend/components/Navigation.tsx
@@ -49,7 +49,9 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
                 </Link>
               </li>
               <li>
-                <a href="https://climate.stripe.com/r7FSQz">Climate</a>
+                <Link href="/contact" onClick={handleClick}>
+                  Contact
+                </Link>
               </li>
               {isUserLoggedIn ? (
                 <li>
@@ -81,7 +83,7 @@ function Navigation({ isUserLoggedIn }: { isUserLoggedIn: boolean }) {
             <Link href="/blogs">Blogs</Link>
           </li>
           <li>
-            <a href="https://climate.stripe.com/r7FSQz">Climate</a>
+            <Link href="/contact">Contact</Link>
           </li>
           {isUserLoggedIn ? (
             <li>
diff --git a/Frontend/components/Utilities/PageWrapper.tsx b/Frontend/components/Utilities/PageWrapper.tsx
index 38469a7..168216b 100644
--- a/Frontend/components/Utilities/PageWrapper.tsx
+++ b/Frontend/components/Utilities/PageWrapper.tsx
@@ -1,4 +1,4 @@
-import { WaitingListWithImageHero } from "@/sections/HeroSections";
+import { WaitingListWithImageHero } from "@/sections/Hero";
 import React from "react";
 
 function PageWrapper({ children }: { children: React.ReactNode }) {
diff --git a/Frontend/components/icon/Icon.tsx b/Frontend/components/icon/Icon.tsx
new file mode 100644
index 0000000..19d34e7
--- /dev/null
+++ b/Frontend/components/icon/Icon.tsx
@@ -0,0 +1,43 @@
+import React from "react";
+import * as FluentIcons from "@fluentui/react-icons";
+import { IconProps, iconSize } from "./types";
+import IconContainer from "./IconContainer";
+
+function Icon({
+  color,
+  size = "small",
+  isActive = true,
+  name,
+  nestedComponent,
+  style,
+}: IconProps) {
+  const fluentIcons = Object.assign(
+    {},
+    ...Object.keys(FluentIcons).map((name) => {
+      return {
+        [name]: (
+          <IconContainer
+            color={color}
+            size={size}
+            isActive={isActive}
+            nestedComponent={nestedComponent}
+            style={style}
+          >
+            {React.createElement(FluentIcons[name], {
+              color: isActive ? color ?? undefined : undefined,
+              style: { width: iconSize[size], height: iconSize[size] },
+            })}
+          </IconContainer>
+        ),
+      };
+    })
+  );
+
+  const icon = {
+    ...fluentIcons,
+  };
+
+  return icon[name];
+}
+
+export default Icon;
diff --git a/Frontend/components/icon/IconContainer.tsx b/Frontend/components/icon/IconContainer.tsx
new file mode 100644
index 0000000..ca9e817
--- /dev/null
+++ b/Frontend/components/icon/IconContainer.tsx
@@ -0,0 +1,61 @@
+import { IconContainerProps, Orientation, iconSize } from "./types";
+
+function IconContainer({
+  children,
+  color,
+  size = "small",
+  isActive,
+  nestedComponent,
+  style,
+}: IconContainerProps) {
+  const orientationStyle = {
+    [Orientation.BottomLeft]: {
+      bottom: `calc(-${iconSize[size]}/9)`,
+      left: `calc(-${iconSize[size]}/9)`,
+    },
+    [Orientation.BottomRight]: {
+      bottom: `calc(-${iconSize[size]}/9)`,
+      right: `calc(-${iconSize[size]}/9)`,
+    },
+    [Orientation.TopLeft]: {
+      top: `calc(-${iconSize[size]}/9)`,
+      left: `calc(-${iconSize[size]}/9)`,
+    },
+    [Orientation.TopRight]: {
+      top: `calc(-${iconSize[size]}/9)`,
+      right: `calc(-${iconSize[size]}/9)`,
+    },
+  };
+  return (
+    <div
+      style={{
+        position: "relative",
+        zIndex: 10,
+        width: iconSize[size],
+        height: iconSize[size],
+        ...style,
+      }}
+    >
+      {children}
+      {nestedComponent?.node && (
+        <div
+          color={isActive ? color ?? undefined : undefined}
+          style={{
+            width: `calc(${iconSize[size]}/1.75)`,
+            height: `calc(${iconSize[size]}/1.75)`,
+            position: "absolute",
+            zIndex: 20,
+            background: nestedComponent?.options?.orientation ?? undefined,
+            ...orientationStyle[
+              nestedComponent?.options?.orientation ?? Orientation.BottomRight
+            ],
+          }}
+        >
+          {nestedComponent?.node ? nestedComponent.node : <></>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default IconContainer;
diff --git a/Frontend/components/icon/index.ts b/Frontend/components/icon/index.ts
new file mode 100644
index 0000000..fc95e4b
--- /dev/null
+++ b/Frontend/components/icon/index.ts
@@ -0,0 +1,2 @@
+import Icon from "./Icon";
+export default Icon;
\ No newline at end of file
diff --git a/Frontend/components/icon/types.ts b/Frontend/components/icon/types.ts
new file mode 100644
index 0000000..7362312
--- /dev/null
+++ b/Frontend/components/icon/types.ts
@@ -0,0 +1,100 @@
+import { ReactNode } from "react";
+import * as FluentIcons from "@fluentui/react-icons";
+
+
+export type IconProps = {
+    color?: string;
+    size?:
+      | "small"
+      | "medium"
+      | "large"
+      | "xlarge"
+      | "xxlarge"
+      | "xxxlarge"
+      | "xxxxlarge";
+    isActive?: boolean;
+    name: IconName;
+    nestedComponent?: NestedComponent;
+    style?: React.CSSProperties;
+  };
+
+export type IconContainerProps = {
+    children: ReactNode;
+    color?: string;
+    size?:
+      | "small"
+      | "medium"
+      | "large"
+      | "xlarge"
+      | "xxlarge"
+      | "xxxlarge"
+      | "xxxxlarge";
+    isActive?: boolean;
+    nestedComponent?: NestedComponent;
+    style?: React.CSSProperties
+  }
+  type FluentIconNames = keyof typeof FluentIcons;
+  const fluentIconNames = Object.keys(FluentIcons) as FluentIconNames[];
+  export type IconName = typeof fluentIconNames[number];
+  
+  export type NestedComponent = {
+    node: ReactNode;
+    options?: {
+      orientation?: Orientation;
+      backgroundColor?: string;
+    };
+  };
+  
+  export const enum Orientation {
+    BottomLeft = "BottomLeft",
+    BottomRight = "BottomRight",
+    TopLeft = "TopLeft",
+    TopRight = "TopRight",
+  }
+
+  export const sizeScale = {
+    size: {
+      size_0: '0rem',
+      size_0_5: '0.25rem', 
+      size_1: '0.5rem', /* 8px Base */
+      size_2: '1.0rem', 
+      size_3: '1.5rem', 
+      size_4: '2.0rem', 
+      size_5: '2.5rem', 
+      size_6: '3.0rem', 
+      size_7: '3.5rem', 
+      size_8: '4.0rem', 
+      size_9: '4.5rem', 
+      size_10: '5.0rem', 
+      size_11: '5.5rem', 
+      size_12: '6.0rem', 
+      size_13: '6.5rem', 
+      size_14: '7.0rem', 
+      size_15: '7.5rem', 
+      size_16: '8.0rem', 
+      size_17: '8.5rem', 
+      size_18: '9.0rem', 
+      size_19: '9.5rem', 
+      size_20: '10.0rem', 
+      size_21: '10.5rem', 
+      size_22: '11.0rem', 
+      size_23: '11.5rem', 
+      size_24: '12.0rem', 
+      size_25: '12.5rem', 
+      size_26: '13.0rem', 
+      size_27: '13.5rem', 
+      size_28: '14.0rem', 
+      size_29: '14.5rem', 
+      size_30: '15.0rem', 
+    },
+  };
+
+  export const iconSize = {
+    small: sizeScale.size.size_2,
+    medium: sizeScale.size.size_3,
+    large: sizeScale.size.size_4,
+    xlarge: sizeScale.size.size_5,
+    xxlarge: sizeScale.size.size_6,
+    xxxlarge: sizeScale.size.size_7,
+    xxxxlarge: sizeScale.size.size_8,
+  };
\ No newline at end of file
diff --git a/Frontend/images/icon.svg b/Frontend/images/icon.svg
index 49415a6..878cfd4 100644
--- a/Frontend/images/icon.svg
+++ b/Frontend/images/icon.svg
@@ -1,4 +1,4 @@
-<svg width="32" height="32" viewBox="0 0 48 53" fill="none"
+<svg style="" width="32" height="32" viewBox="0 0 48 53" fill="none"
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.02016 0.785715C6.73423 0.785715 6.43516 0.881586 6.21659 1.10016L0.836158 6.48059C0.399015 6.91773 0.399015 7.61565 0.836158 8.05279L5.13352 12.3152C5.22826 12.4728 5.36023 12.6048 5.51784 12.6995L11.8067 19.0233C11.9665 18.3502 12.3249 17.7404 12.8548 17.2764L13.0295 17.1017L12.156 16.2282L15.9643 12.42L17.0823 13.573L18.7593 12.0706L12.4355 5.74688C12.3949 5.68413 12.3481 5.62561 12.2958 5.5722L12.191 5.50234C12.1376 5.45003 12.079 5.40321 12.0163 5.36258L7.7888 1.10016C7.57023 0.881586 7.3061 0.785715 7.02016 0.785715ZM40.9798 0.785715C40.6938 0.785715 40.4297 0.881586 40.2112 1.10016L35.809 5.50233C35.6842 5.58503 35.5772 5.69196 35.4945 5.81677L29.2407 12.0707L30.9177 13.573L32.0357 12.42L35.8439 16.2283L34.9705 17.1017L35.1452 17.2764C35.6762 17.7415 36.0334 18.3502 36.1933 19.0233L42.4472 12.7345C42.6048 12.6397 42.7367 12.5078 42.8315 12.3502L47.1638 8.0528C47.6009 7.61566 47.6009 6.91774 47.1638 6.4806L41.7834 1.10016C41.5648 0.881586 41.2657 0.785715 40.9798 0.785715ZM7.02016 3.47593L9.88507 6.37578L6.11178 10.1491L3.21193 7.28416L7.02016 3.47593ZM40.9798 3.47593L44.788 7.28416L41.8882 10.1491L38.1149 6.37578L40.9798 3.47593ZM11.4922 7.94798L14.3571 10.8478L10.5838 14.6211L7.68398 11.7562L11.4922 7.94798ZM36.5077 7.94798L40.316 11.7562L37.4161 14.6211L33.6428 10.8478L36.5077 7.94798ZM24 10.8478C23.7372 10.8478 23.477 10.9428 23.2663 11.1273L14.6366 18.6739H33.3633L24.7337 11.1273C24.5229 10.9429 24.2627 10.8478 24 10.8478ZM13.868 20.9099L11.7018 51.0264C11.6795 51.3361 11.805 51.638 12.0163 51.8649C12.2276 52.0919 12.509 52.2143 12.8199 52.2143H35.1801C35.4898 52.2143 35.7735 52.0918 35.9837 51.8649C36.195 51.6379 36.3205 51.3361 36.2981 51.0264L34.132 20.9099L13.868 20.9099ZM22.882 26.5H25.118V29.854H22.882V26.5ZM10.9332 30.3781L0.836158 40.4752C0.399015 40.9123 0.399015 41.6102 0.836158 42.0474L6.21659 47.4278C6.4346 47.6458 6.73395 47.7422 7.02016 47.7422C7.30638 47.7422 7.57078 47.6458 7.7888 47.4278L9.88507 45.3315L10.3043 39.3921L7.68398 36.7717L10.5838 33.9068L10.6886 33.9767L10.9332 30.3781ZM37.0667 30.3781L37.3113 33.9767L37.4162 33.9068L40.316 36.7718L37.6957 39.3921L38.1149 45.3315L40.2112 47.4278C40.4292 47.6447 40.6936 47.7423 40.9798 47.7423C41.266 47.7423 41.5654 47.6458 41.7834 47.4278L47.1638 42.0474C47.601 41.6102 47.601 40.9123 47.1638 40.4752L37.0667 30.3781ZM6.11178 38.3789L9.88507 42.1522L7.02016 45.052L3.21193 41.2438L6.11178 38.3789ZM41.8882 38.3789L44.788 41.2438L40.9798 45.052L38.1149 42.1522L41.8882 38.3789ZM24 41.0342C25.8525 41.0342 27.354 42.5357 27.354 44.3882V49.9783H20.6459V44.3882C20.6459 42.5357 22.1474 41.0342 24 41.0342Z" fill="#fff"/>
+    <path d="M7.02016 0.785715C6.73423 0.785715 6.43516 0.881586 6.21659 1.10016L0.836158 6.48059C0.399015 6.91773 0.399015 7.61565 0.836158 8.05279L5.13352 12.3152C5.22826 12.4728 5.36023 12.6048 5.51784 12.6995L11.8067 19.0233C11.9665 18.3502 12.3249 17.7404 12.8548 17.2764L13.0295 17.1017L12.156 16.2282L15.9643 12.42L17.0823 13.573L18.7593 12.0706L12.4355 5.74688C12.3949 5.68413 12.3481 5.62561 12.2958 5.5722L12.191 5.50234C12.1376 5.45003 12.079 5.40321 12.0163 5.36258L7.7888 1.10016C7.57023 0.881586 7.3061 0.785715 7.02016 0.785715ZM40.9798 0.785715C40.6938 0.785715 40.4297 0.881586 40.2112 1.10016L35.809 5.50233C35.6842 5.58503 35.5772 5.69196 35.4945 5.81677L29.2407 12.0707L30.9177 13.573L32.0357 12.42L35.8439 16.2283L34.9705 17.1017L35.1452 17.2764C35.6762 17.7415 36.0334 18.3502 36.1933 19.0233L42.4472 12.7345C42.6048 12.6397 42.7367 12.5078 42.8315 12.3502L47.1638 8.0528C47.6009 7.61566 47.6009 6.91774 47.1638 6.4806L41.7834 1.10016C41.5648 0.881586 41.2657 0.785715 40.9798 0.785715ZM7.02016 3.47593L9.88507 6.37578L6.11178 10.1491L3.21193 7.28416L7.02016 3.47593ZM40.9798 3.47593L44.788 7.28416L41.8882 10.1491L38.1149 6.37578L40.9798 3.47593ZM11.4922 7.94798L14.3571 10.8478L10.5838 14.6211L7.68398 11.7562L11.4922 7.94798ZM36.5077 7.94798L40.316 11.7562L37.4161 14.6211L33.6428 10.8478L36.5077 7.94798ZM24 10.8478C23.7372 10.8478 23.477 10.9428 23.2663 11.1273L14.6366 18.6739H33.3633L24.7337 11.1273C24.5229 10.9429 24.2627 10.8478 24 10.8478ZM13.868 20.9099L11.7018 51.0264C11.6795 51.3361 11.805 51.638 12.0163 51.8649C12.2276 52.0919 12.509 52.2143 12.8199 52.2143H35.1801C35.4898 52.2143 35.7735 52.0918 35.9837 51.8649C36.195 51.6379 36.3205 51.3361 36.2981 51.0264L34.132 20.9099L13.868 20.9099ZM22.882 26.5H25.118V29.854H22.882V26.5ZM10.9332 30.3781L0.836158 40.4752C0.399015 40.9123 0.399015 41.6102 0.836158 42.0474L6.21659 47.4278C6.4346 47.6458 6.73395 47.7422 7.02016 47.7422C7.30638 47.7422 7.57078 47.6458 7.7888 47.4278L9.88507 45.3315L10.3043 39.3921L7.68398 36.7717L10.5838 33.9068L10.6886 33.9767L10.9332 30.3781ZM37.0667 30.3781L37.3113 33.9767L37.4162 33.9068L40.316 36.7718L37.6957 39.3921L38.1149 45.3315L40.2112 47.4278C40.4292 47.6447 40.6936 47.7423 40.9798 47.7423C41.266 47.7423 41.5654 47.6458 41.7834 47.4278L47.1638 42.0474C47.601 41.6102 47.601 40.9123 47.1638 40.4752L37.0667 30.3781ZM6.11178 38.3789L9.88507 42.1522L7.02016 45.052L3.21193 41.2438L6.11178 38.3789ZM41.8882 38.3789L44.788 41.2438L40.9798 45.052L38.1149 42.1522L41.8882 38.3789ZM24 41.0342C25.8525 41.0342 27.354 42.5357 27.354 44.3882V49.9783H20.6459V44.3882C20.6459 42.5357 22.1474 41.0342 24 41.0342Z" fill="currentColor"/>
 </svg>
diff --git a/Frontend/package-lock.json b/Frontend/package-lock.json
index fe45471..dac8e00 100644
--- a/Frontend/package-lock.json
+++ b/Frontend/package-lock.json
@@ -1,13 +1,14 @@
 {
-  "name": "sign365website",
+  "name": "fastpocket",
   "version": "0.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "name": "sign365website",
+      "name": "fastpocket",
       "version": "0.1.0",
       "dependencies": {
+        "@fluentui/react-icons": "^2.0.227",
         "@hookform/resolvers": "^3.2.0",
         "@netlify/functions": "^2.1.0",
         "@next/third-parties": "^14.1.0",
@@ -608,6 +609,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -683,6 +689,51 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fluentui/react-icons": {
+      "version": "2.0.227",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.227.tgz",
+      "integrity": "sha512-KcuzBJvf1LL1YW7XBg7Y4RoCpFMUU2br9BPqwN5gZDKALHQF9RdHPtwdGTzxKsHacOTpHnNDQrbDW+NvxiEMVQ==",
+      "dependencies": {
+        "@griffel/react": "^1.0.0",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0 <19.0.0"
+      }
+    },
+    "node_modules/@griffel/core": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.15.2.tgz",
+      "integrity": "sha512-RlsIXoSS3gaYykUgxFpwKAs/DV9cRUKp3CW1kt3iPAtsDTWn/o+8bT1jvBws/tMM2GBu/Uc0EkaIzUPqD7uA+Q==",
+      "dependencies": {
+        "@emotion/hash": "^0.9.0",
+        "@griffel/style-types": "^1.0.3",
+        "csstype": "^3.1.3",
+        "rtl-css-js": "^1.16.1",
+        "stylis": "^4.2.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@griffel/react": {
+      "version": "1.5.20",
+      "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.20.tgz",
+      "integrity": "sha512-1P2yaPctENFSCwyPIYXBmgpNH68c0lc/jwSzPij1QATHDK1AASKuSeq6hW108I67RKjhRyHCcALshdZ3GcQXSg==",
+      "dependencies": {
+        "@griffel/core": "^1.15.2",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0 <19.0.0"
+      }
+    },
+    "node_modules/@griffel/style-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.0.3.tgz",
+      "integrity": "sha512-AzbbYV/EobNIBtfMtyu2edFin895gjVxtu1nsRhTETUAIb0/LCZoue3Jd/kFLuPwe95rv5WRUBiQpVwJsrrFcw==",
+      "dependencies": {
+        "csstype": "^3.1.3"
+      }
+    },
     "node_modules/@hookform/resolvers": {
       "version": "3.3.2",
       "license": "MIT",
@@ -2440,8 +2491,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.1.2",
-      "license": "MIT"
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/daisyui": {
       "version": "3.9.4",
@@ -5174,6 +5226,14 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "dependencies": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "funding": [
@@ -5675,6 +5735,11 @@
         }
       }
     },
+    "node_modules/stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "node_modules/sucrase": {
       "version": "3.34.0",
       "license": "MIT",
@@ -6745,6 +6810,11 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@emotion/hash": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz",
+      "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ=="
+    },
     "@emotion/is-prop-valid": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz",
@@ -6798,6 +6868,45 @@
     "@eslint/js": {
       "version": "8.54.0"
     },
+    "@fluentui/react-icons": {
+      "version": "2.0.227",
+      "resolved": "https://registry.npmjs.org/@fluentui/react-icons/-/react-icons-2.0.227.tgz",
+      "integrity": "sha512-KcuzBJvf1LL1YW7XBg7Y4RoCpFMUU2br9BPqwN5gZDKALHQF9RdHPtwdGTzxKsHacOTpHnNDQrbDW+NvxiEMVQ==",
+      "requires": {
+        "@griffel/react": "^1.0.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@griffel/core": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npmjs.org/@griffel/core/-/core-1.15.2.tgz",
+      "integrity": "sha512-RlsIXoSS3gaYykUgxFpwKAs/DV9cRUKp3CW1kt3iPAtsDTWn/o+8bT1jvBws/tMM2GBu/Uc0EkaIzUPqD7uA+Q==",
+      "requires": {
+        "@emotion/hash": "^0.9.0",
+        "@griffel/style-types": "^1.0.3",
+        "csstype": "^3.1.3",
+        "rtl-css-js": "^1.16.1",
+        "stylis": "^4.2.0",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@griffel/react": {
+      "version": "1.5.20",
+      "resolved": "https://registry.npmjs.org/@griffel/react/-/react-1.5.20.tgz",
+      "integrity": "sha512-1P2yaPctENFSCwyPIYXBmgpNH68c0lc/jwSzPij1QATHDK1AASKuSeq6hW108I67RKjhRyHCcALshdZ3GcQXSg==",
+      "requires": {
+        "@griffel/core": "^1.15.2",
+        "tslib": "^2.1.0"
+      }
+    },
+    "@griffel/style-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@griffel/style-types/-/style-types-1.0.3.tgz",
+      "integrity": "sha512-AzbbYV/EobNIBtfMtyu2edFin895gjVxtu1nsRhTETUAIb0/LCZoue3Jd/kFLuPwe95rv5WRUBiQpVwJsrrFcw==",
+      "requires": {
+        "csstype": "^3.1.3"
+      }
+    },
     "@hookform/resolvers": {
       "version": "3.3.2",
       "requires": {}
@@ -7716,7 +7825,9 @@
       "version": "3.0.0"
     },
     "csstype": {
-      "version": "3.1.2"
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "daisyui": {
       "version": "3.9.4",
@@ -9312,6 +9423,14 @@
         }
       }
     },
+    "rtl-css-js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/rtl-css-js/-/rtl-css-js-1.16.1.tgz",
+      "integrity": "sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==",
+      "requires": {
+        "@babel/runtime": "^7.1.2"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "requires": {
@@ -9605,6 +9724,11 @@
         "client-only": "0.0.1"
       }
     },
+    "stylis": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.1.tgz",
+      "integrity": "sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ=="
+    },
     "sucrase": {
       "version": "3.34.0",
       "requires": {
diff --git a/Frontend/package.json b/Frontend/package.json
index ab88b60..e2bb481 100644
--- a/Frontend/package.json
+++ b/Frontend/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fluentui/react-icons": "^2.0.227",
     "@hookform/resolvers": "^3.2.0",
     "@netlify/functions": "^2.1.0",
     "@next/third-parties": "^14.1.0",
diff --git a/Frontend/sections/AccountContent.tsx b/Frontend/sections/AccountContent.tsx
index bb9d7a6..9b906d3 100644
--- a/Frontend/sections/AccountContent.tsx
+++ b/Frontend/sections/AccountContent.tsx
@@ -166,7 +166,7 @@ function AccountContent({ user }: ManageSubscriptionProps) {
               </p>
               <button
                 onClick={() => router.push("/pricing")}
-                className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-pink-default to-purple-default hover:bg-gray-900 w-full sm:w-auto"
+                className="px-10 py-2 text-base capitalize !rounded-3xl text-white bg-gradient-to-r from-primary to-secondary hover:bg-gray-900 w-full sm:w-auto"
               >
                 Upgrade
               </button>
diff --git a/Frontend/sections/BlogContent.tsx b/Frontend/sections/BlogContent.tsx
index 252cbf6..0aaf6c1 100644
--- a/Frontend/sections/BlogContent.tsx
+++ b/Frontend/sections/BlogContent.tsx
@@ -22,7 +22,7 @@ function BlogContent({ post }: BlogContentProps) {
         <p className="text-black dark:text-slate-200">{post.data.date}</p>
       </div>
 
-      <article className="prose prose-img:rounded-xl max-w-none prose-p:text-black dark:prose-p:text-white prose-a:text-pink-default prose-h2:text-black dark:prose-h2:text-white prose-li:text-black dark:prose-li:text-white prose-strong:text-black dark:prose-strong:text-white prose-blockquote:pr-2 prose-blockquote:font-normal">
+      <article className="prose prose-img:rounded-xl max-w-none prose-p:text-black dark:prose-p:text-white prose-a:text-primary prose-h2:text-black dark:prose-h2:text-white prose-li:text-black dark:prose-li:text-white prose-strong:text-black dark:prose-strong:text-white prose-blockquote:pr-2 prose-blockquote:font-normal">
         <div className="h-full w-full">
           <Image
             priority
diff --git a/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx b/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx
new file mode 100644
index 0000000..e7de1c9
--- /dev/null
+++ b/Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx
@@ -0,0 +1,304 @@
+import React from "react";
+
+const FormLeftDescriptionRightContactUs = () => {
+  return (
+    <>
+      {/* Contact Us */}
+      <div className="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
+        <div className="max-w-2xl lg:max-w-5xl mx-auto">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold text-gray-800 sm:text-4xl dark:text-white">
+              Contact us
+            </h1>
+            <p className="mt-1 text-gray-600 dark:text-gray-400">
+              We&apos;d love to talk about how we can help you.
+            </p>
+          </div>
+          <div className="mt-12 grid items-center lg:grid-cols-2 gap-6 lg:gap-16">
+            {/* Card */}
+            <div className="flex flex-col border rounded-xl p-4 sm:p-6 lg:p-8 dark:border-gray-700">
+              <h2 className="mb-8 text-xl font-semibold text-gray-800 dark:text-gray-200">
+                Fill in the form
+              </h2>
+              <form>
+                <div className="grid gap-4">
+                  {/* Grid */}
+                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div>
+                      <label
+                        htmlFor="hs-firstname-contacts-1"
+                        className="sr-only"
+                      >
+                        First Name
+                      </label>
+                      <input
+                        type="text"
+                        name="hs-firstname-contacts-1"
+                        id="hs-firstname-contacts-1"
+                        className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
+                        placeholder="First Name"
+                      />
+                    </div>
+                    <div>
+                      <label
+                        htmlFor="hs-lastname-contacts-1"
+                        className="sr-only"
+                      >
+                        Last Name
+                      </label>
+                      <input
+                        type="text"
+                        name="hs-lastname-contacts-1"
+                        id="hs-lastname-contacts-1"
+                        className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
+                        placeholder="Last Name"
+                      />
+                    </div>
+                  </div>
+                  {/* End Grid */}
+                  <div>
+                    <label htmlFor="hs-email-contacts-1" className="sr-only">
+                      Email
+                    </label>
+                    <input
+                      type="email"
+                      name="hs-email-contacts-1"
+                      id="hs-email-contacts-1"
+                      autoComplete="email"
+                      className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
+                      placeholder="Email"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="hs-phone-number-1" className="sr-only">
+                      Phone Number
+                    </label>
+                    <input
+                      type="text"
+                      name="hs-phone-number-1"
+                      id="hs-phone-number-1"
+                      className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
+                      placeholder="Phone Number"
+                    />
+                  </div>
+                  <div>
+                    <label htmlFor="hs-about-contacts-1" className="sr-only">
+                      Details
+                    </label>
+                    <textarea
+                      id="hs-about-contacts-1"
+                      name="hs-about-contacts-1"
+                      rows={4}
+                      className="py-3 px-4 block w-full border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 dark:focus:ring-gray-600"
+                      placeholder="Details"
+                      defaultValue={""}
+                    />
+                  </div>
+                </div>
+                {/* End Grid */}
+                <div className="mt-4 grid">
+                  <button
+                    type="submit"
+                    className="w-full py-3 px-4 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                  >
+                    Send inquiry
+                  </button>
+                </div>
+                <div className="mt-3 text-center">
+                  <p className="text-sm text-gray-500">
+                    We&apos;ll get back to you in 1-2 business days.
+                  </p>
+                </div>
+              </form>
+            </div>
+            {/* End Card */}
+            <div className="divide-y divide-gray-200 dark:divide-gray-800">
+              {/* Icon Block */}
+              <div className="flex gap-x-7 py-6">
+                <svg
+                  className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx={12} cy={12} r={10} />
+                  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+                  <path d="M12 17h.01" />
+                </svg>
+                <div className="grow">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-200">
+                    Knowledgebase
+                  </h3>
+                  <p className="mt-1 text-sm text-gray-500">
+                    We&apos;re here to help with any questions or code.
+                  </p>
+                  <a
+                    className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                    href="#"
+                  >
+                    Contact support
+                    <svg
+                      className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
+                      width={16}
+                      height={16}
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+              {/* End Icon Block */}
+              {/* Icon Block */}
+              <div className="flex gap-x-7 py-6">
+                <svg
+                  className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M14 9a2 2 0 0 1-2 2H6l-4 4V4c0-1.1.9-2 2-2h8a2 2 0 0 1 2 2v5Z" />
+                  <path d="M18 9h2a2 2 0 0 1 2 2v11l-4-4h-6a2 2 0 0 1-2-2v-1" />
+                </svg>
+                <div className="grow">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-200">
+                    FAQ
+                  </h3>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Search our FAQ for answers to anything you might ask.
+                  </p>
+                  <a
+                    className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                    href="#"
+                  >
+                    Visit FAQ
+                    <svg
+                      className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
+                      width={16}
+                      height={16}
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+              {/* End Icon Block */}
+              {/* Icon Block */}
+              <div className=" flex gap-x-7 py-6">
+                <svg
+                  className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="m7 11 2-2-2-2" />
+                  <path d="M11 13h4" />
+                  <rect width={18} height={18} x={3} y={3} rx={2} ry={2} />
+                </svg>
+                <div className="grow">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-200">
+                    Developer APIs
+                  </h3>
+                  <p className="mt-1 text-sm text-gray-500">
+                    Check out our development quickstart guide.
+                  </p>
+                  <a
+                    className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                    href="#"
+                  >
+                    Contact sales
+                    <svg
+                      className="flex-shrink-0 size-2.5 transition ease-in-out group-hover:translate-x-1"
+                      width={16}
+                      height={16}
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        clipRule="evenodd"
+                        d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </a>
+                </div>
+              </div>
+              {/* End Icon Block */}
+              {/* Icon Block */}
+              <div className=" flex gap-x-7 py-6">
+                <svg
+                  className="flex-shrink-0 size-6 mt-1.5 text-gray-800 dark:text-gray-200"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={24}
+                  height={24}
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth={2}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M21.2 8.4c.5.38.8.97.8 1.6v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V10a2 2 0 0 1 .8-1.6l8-6a2 2 0 0 1 2.4 0l8 6Z" />
+                  <path d="m22 10-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 10" />
+                </svg>
+                <div className="grow">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-200">
+                    Contact us by email
+                  </h3>
+                  <p className="mt-1 text-sm text-gray-500">
+                    If you wish to write us an email instead please use
+                  </p>
+                  <a
+                    className="mt-2 inline-flex items-center gap-x-2 text-sm font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
+                    href="#"
+                  >
+                    example@site.com
+                  </a>
+                </div>
+              </div>
+              {/* End Icon Block */}
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* End Contact Us */}
+    </>
+  );
+};
+
+export default FormLeftDescriptionRightContactUs;
diff --git a/Frontend/sections/FeaturesZigzag.tsx b/Frontend/sections/FeaturesZigzag.tsx
index 4110929..b726774 100755
--- a/Frontend/sections/FeaturesZigzag.tsx
+++ b/Frontend/sections/FeaturesZigzag.tsx
@@ -24,7 +24,7 @@ const FeaturesZigzag = () => {
           <div className="max-w-4xl mx-auto text-center pb-12 md:pb-16 group">
             <button
               onClick={tryItOnClick}
-              className="inline-flex text-lg font-semibold py-2 px-[7rem] m-2 text-white bg-gradient-to-r from-pink-default to-purple-default rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
+              className="inline-flex text-lg font-semibold py-2 px-[7rem] m-2 text-white bg-gradient-to-r from-primary to-secondary rounded-full mb-4 cursor-pointer group-hover:animate-bounce"
             >
               Try it!
             </button>
diff --git a/Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx b/Frontend/sections/Hero/CenterAllignedWithVideoHero.tsx
similarity index 100%
rename from Frontend/sections/HeroSections/CenterAllignedWithVideoHero.tsx
rename to Frontend/sections/Hero/CenterAllignedWithVideoHero.tsx
diff --git a/Frontend/sections/HeroSections/SimpleHero.tsx b/Frontend/sections/Hero/SimpleHero.tsx
similarity index 100%
rename from Frontend/sections/HeroSections/SimpleHero.tsx
rename to Frontend/sections/Hero/SimpleHero.tsx
diff --git a/Frontend/sections/HeroSections/SquaredBackgroundHero.tsx b/Frontend/sections/Hero/SquaredBackgroundHero.tsx
similarity index 100%
rename from Frontend/sections/HeroSections/SquaredBackgroundHero.tsx
rename to Frontend/sections/Hero/SquaredBackgroundHero.tsx
diff --git a/Frontend/sections/HeroSections/WaitingListWithImageHero.tsx b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
similarity index 93%
rename from Frontend/sections/HeroSections/WaitingListWithImageHero.tsx
rename to Frontend/sections/Hero/WaitingListWithImageHero.tsx
index 40b2856..19f4f72 100644
--- a/Frontend/sections/HeroSections/WaitingListWithImageHero.tsx
+++ b/Frontend/sections/Hero/WaitingListWithImageHero.tsx
@@ -1,4 +1,5 @@
 import Logo from "@/components/Logo";
+import Icon from "@/components/icon";
 import React from "react";
 
 const WaitingListWithImageHero = () => {
@@ -12,8 +13,8 @@ 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-primary-content sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6">
-            <Logo className="w-10 flex" />
+          <h1 className="text-3xl text-primary-content sm:text-4xl whitespace-nowrap flex flex-row justify-center pb-6 gap-x-3">
+            <Icon name="LeafThree24Filled" size="xlarge" />
             Bethel Farms
           </h1>
           <h2 className="text-2xl text-primary-content sm:text-4xl">
@@ -37,7 +38,7 @@ const WaitingListWithImageHero = () => {
                   />
                   <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                     <svg
-                      className="flex-shrink-0 size-4 text-gray-400"
+                      className="flex-shrink-0 size-4 text-primary-content dark:text-white"
                       xmlns="http://www.w3.org/2000/svg"
                       width={24}
                       height={24}
@@ -70,7 +71,7 @@ const WaitingListWithImageHero = () => {
                   />
                   <div className="absolute inset-y-0 start-0 flex items-center pointer-events-none z-20 ps-4">
                     <svg
-                      className="flex-shrink-0 size-4 text-gray-400"
+                      className="flex-shrink-0 size-4 text-primary-content dark:text-white"
                       xmlns="http://www.w3.org/2000/svg"
                       width={24}
                       height={24}
diff --git a/Frontend/sections/HeroSections/index.ts b/Frontend/sections/Hero/index.ts
similarity index 100%
rename from Frontend/sections/HeroSections/index.ts
rename to Frontend/sections/Hero/index.ts
diff --git a/Frontend/sections/HeroHome.tsx b/Frontend/sections/HeroHome.tsx
index 3b17cdd..ff7b34d 100755
--- a/Frontend/sections/HeroHome.tsx
+++ b/Frontend/sections/HeroHome.tsx
@@ -37,7 +37,7 @@ function HeroHome() {
               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-pink-default to-purple-default w-[fit-content]  mx-auto"
+              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"
             >
@@ -47,7 +47,7 @@ function HeroHome() {
               <div data-aos="fade-up" data-aos-delay="400">
                 <button
                   onClick={bookDemoOnClick}
-                  className="btn text-base capitalize rounded text-white bg-pink-550 hover:bg-pink-700 w-full mb-4 sm:w-auto sm:mb-0"
+                  className="btn text-base capitalize rounded text-white bg-secondary hover:bg-pink-700 w-full mb-4 sm:w-auto sm:mb-0"
                 >
                   Book Demo
                 </button>
diff --git a/Frontend/sections/LoadingModal.tsx b/Frontend/sections/LoadingModal.tsx
index 7c53f55..3f4fd00 100644
--- a/Frontend/sections/LoadingModal.tsx
+++ b/Frontend/sections/LoadingModal.tsx
@@ -5,7 +5,7 @@ function LoadingModal() {
     <div className="flex flex-col items-center pl-5 pr-5 text-center md:text-xl">
       <svg
         aria-hidden="true"
-        className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-pink-default"
+        className="w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-primary"
         viewBox="0 0 100 101"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/Frontend/sections/ModalLearnMore/ModalLearnMore.tsx b/Frontend/sections/ModalLearnMore/ModalLearnMore.tsx
index 2b6fb3b..7281b4b 100644
--- a/Frontend/sections/ModalLearnMore/ModalLearnMore.tsx
+++ b/Frontend/sections/ModalLearnMore/ModalLearnMore.tsx
@@ -38,7 +38,7 @@ function ModalLearnMore() {
           </div>
           <div className={status === "default" ? "block" : "hidden"}>
             <div
-              className="w-[100%] bg-gradient-to-r from-pink-default to-purple-default px-6 pt-2 pb-6"
+              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
               data-aos="fade-up"
             >
               <h3 className="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">
diff --git a/Frontend/sections/ModalSignIn/ModalSignIn.tsx b/Frontend/sections/ModalSignIn/ModalSignIn.tsx
index ea64303..ff5b876 100644
--- a/Frontend/sections/ModalSignIn/ModalSignIn.tsx
+++ b/Frontend/sections/ModalSignIn/ModalSignIn.tsx
@@ -47,7 +47,7 @@ function ModalSignIn() {
           </div>
           <div className={status === ModalStatus.Default ? "block" : "hidden"}>
             <div
-              className="w-[100%] bg-gradient-to-r from-pink-default to-purple-default px-6 pt-2 pb-6"
+              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
               data-aos="fade-up"
             >
               <h3 className="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">
diff --git a/Frontend/sections/ModalSignUp/ModalSignUp.tsx b/Frontend/sections/ModalSignUp/ModalSignUp.tsx
index 31189ef..530f131 100644
--- a/Frontend/sections/ModalSignUp/ModalSignUp.tsx
+++ b/Frontend/sections/ModalSignUp/ModalSignUp.tsx
@@ -1,4 +1,5 @@
 "use client";
+// TODO: Needs a complete rework to use the DaisyUI component
 
 import React, { useRef, useState } from "react";
 import xButton from "@/images/icon-x.svg";
@@ -32,7 +33,7 @@ function ModalSignUp() {
         onChange={whenModalOpens}
       />
       <label htmlFor="sign-up-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">
+        <label className="modal-box relative bg-gray-100 dark: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={handleCloseModal}
@@ -48,7 +49,7 @@ function ModalSignUp() {
           </div>
           <div className={status === ModalStatus.Default ? "block" : "hidden"}>
             <div
-              className="w-[100%] bg-gradient-to-r from-pink-default to-purple-default px-6 pt-2 pb-6"
+              className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 pb-6"
               data-aos="fade-up"
             >
               <h3 className="h3 text-white pt-4 pb-2 text-lg md:text-3xl pt-6">
diff --git a/Frontend/sections/ModalSignUp/ModalSignUpForm.tsx b/Frontend/sections/ModalSignUp/ModalSignUpForm.tsx
index e4fbd51..38d1b18 100644
--- a/Frontend/sections/ModalSignUp/ModalSignUpForm.tsx
+++ b/Frontend/sections/ModalSignUp/ModalSignUpForm.tsx
@@ -125,7 +125,7 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             error.message
           );
         }
-        throw error; // This will allow your .catch block outside this function to capture the error
+        throw error; // This will allow .catch block outside this function to capture the error
       }
     };
 
@@ -141,7 +141,7 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             error.message
           );
         }
-        throw error; // This will allow your .catch block outside this function to capture the error
+        throw error; // This will allow .catch block outside this function to capture the error
       }
     };
     useImperativeHandle(ref, () => ({
@@ -160,9 +160,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("email")}
             type="text"
             id="SignUpEmail"
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
-            placeholder="Your best email…"
-            aria-label="Your best email…"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
+            placeholder="Email…"
+            aria-label="Email…"
             autoComplete="on"
           />
           <label
@@ -177,9 +177,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("first_name")}
             id="SignUpFirstName"
             type="text"
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
-            placeholder="Your First Name…"
-            aria-label="Your First Name…"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
+            placeholder="First Name…"
+            aria-label="First Name…"
             autoComplete="on"
           />
           <label
@@ -194,9 +194,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("last_name")}
             id="SignUpLastName"
             type="text"
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
-            placeholder="Your Last Name…"
-            aria-label="Your Last Name…"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
+            placeholder="Last Name…"
+            aria-label="Last Name…"
           />
           <label
             htmlFor="SignUpLastName"
@@ -211,9 +211,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("phone_number")}
             id="SignUpPhoneNumber"
             type="text"
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
-            placeholder="Your Phone Number…"
-            aria-label="Your Phone Number…"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
+            placeholder="Phone Number…"
+            aria-label="Phone Number…"
           />
           <label
             htmlFor="SignUpPhoneNumber"
@@ -227,9 +227,9 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("organisation")}
             id="SignUpOrganisation"
             type="text"
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
-            placeholder="Your Organisation…"
-            aria-label="Your Organisation…"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
+            placeholder="Organisation…"
+            aria-label="Organisation…"
           />
           <label
             htmlFor="SignUpOrganisation"
@@ -243,10 +243,10 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("company_size")}
             id="SignUpCompanySize"
             defaultValue={""}
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
           >
             <option className="bg-gray-850" value={""} disabled>
-              Your Company Size…
+              Company Size…
             </option>
             {companySizeList.map((companySizeOption, i) => {
               return (
@@ -272,8 +272,8 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("password")}
             id="SignUpPwd"
             type="password"
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
-            placeholder="Your Password..."
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
+            placeholder="Password..."
             aria-label="Password"
           />
           <label
@@ -288,8 +288,8 @@ const ModalSignUpForm = forwardRef<FormRefMethods, ModalSignUpFormProps>(
             {...register("passwordConfirmation")}
             id="SignUpPwdConfirm"
             type="password"
-            className="w-full appearance-none bg-transparent border border-white rounded-sm px-4 mr-2 text-white placeholder-white"
-            placeholder="Your Confirmed Password..."
+            className="w-full appearance-none bg-transparent border rounded-sm px-4 mr-2 text-black placeholder-black border-black dark:text-white dark:placeholder-white dark:border-white"
+            placeholder="Confirmed Password..."
             aria-label="Confirmed Password"
           />
           <label
diff --git a/Frontend/sections/Newsletter/Newsletter.tsx b/Frontend/sections/Newsletter/Newsletter.tsx
index d40db06..5b15566 100644
--- a/Frontend/sections/Newsletter/Newsletter.tsx
+++ b/Frontend/sections/Newsletter/Newsletter.tsx
@@ -8,7 +8,7 @@ function Newsletter() {
       <div className="max-w-6xl mx-auto px-4 sm:px-6">
         {/* CTA box */}
         <div
-          className="relative bg-gradient-to-r from-pink-default to-purple-default py-10 px-8 md:py-16 md:px-12"
+          className="relative bg-gradient-to-r from-primary to-secondary py-10 px-8 md:py-16 md:px-12"
           data-aos="fade-up"
         >
           <div className="relative flex flex-col lg:flex-row justify-between items-center">