diff --git a/apps/formbricks-com/components/docs/Layout.tsx b/apps/formbricks-com/components/docs/Layout.tsx
index e2ffec365a..ed98092835 100644
--- a/apps/formbricks-com/components/docs/Layout.tsx
+++ b/apps/formbricks-com/components/docs/Layout.tsx
@@ -11,7 +11,7 @@ import { Prose } from "@/components/shared/Prose";
 import { Search } from "@/components/shared/Search";
 import { ThemeSelector } from "@/components/shared/ThemeSelector";
 import navigation from "@/lib/docsNavigation";
-import Button from "../shared/Button";
+import { Button } from "@formbricks/ui";
 import MetaInformation from "../shared/MetaInformation";
 
 function GitHubIcon(props: any) {
diff --git a/apps/formbricks-com/components/engine/SurveyPage.tsx b/apps/formbricks-com/components/engine/SurveyPage.tsx
index 66f6c1834b..241e4366d5 100644
--- a/apps/formbricks-com/components/engine/SurveyPage.tsx
+++ b/apps/formbricks-com/components/engine/SurveyPage.tsx
@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { usePlausible } from "next-plausible";
 import { useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
-import Button from "../shared/Button";
+import { Button } from "@formbricks/ui";
 import { SurveyPage } from "./engineTypes";
 
 interface SurveyProps {
diff --git a/apps/formbricks-com/components/engine/ThankYouPlans.tsx b/apps/formbricks-com/components/engine/ThankYouPlans.tsx
index bb5edcecd7..4881a3c29a 100644
--- a/apps/formbricks-com/components/engine/ThankYouPlans.tsx
+++ b/apps/formbricks-com/components/engine/ThankYouPlans.tsx
@@ -1,4 +1,4 @@
-import Button from "../shared/Button";
+import { Button } from "@formbricks/ui";
 import { SurveyElement } from "./engineTypes";
 import { useRouter } from "next/router";
 
diff --git a/apps/formbricks-com/components/home/Features.tsx b/apps/formbricks-com/components/home/Features.tsx
index 2d9b833090..066d624616 100644
--- a/apps/formbricks-com/components/home/Features.tsx
+++ b/apps/formbricks-com/components/home/Features.tsx
@@ -24,9 +24,6 @@ const features = [
 export default function Features() {
   return (
     <div className="relative px-4 pt-16 pb-20 sm:px-6 lg:px-8 lg:pt-24 lg:pb-28">
-      <div className="absolute inset-0">
-        <div className="h-1/3 sm:h-2/3" />
-      </div>
       <div className="relative mx-auto max-w-7xl">
         <HeadingCentered
           closer
diff --git a/apps/formbricks-com/components/home/Hero.tsx b/apps/formbricks-com/components/home/Hero.tsx
index 54edc07ff6..ade90919a1 100644
--- a/apps/formbricks-com/components/home/Hero.tsx
+++ b/apps/formbricks-com/components/home/Hero.tsx
@@ -1,4 +1,4 @@
-import Button from "../shared/Button";
+import { Button } from "@formbricks/ui";
 import HeroAnimation from "../shared/HeroAnimation";
 import { useRouter } from "next/router";
 
diff --git a/apps/formbricks-com/components/shared/BreakerCTA.tsx b/apps/formbricks-com/components/shared/BreakerCTA.tsx
index 6a71f489fe..6a16616726 100644
--- a/apps/formbricks-com/components/shared/BreakerCTA.tsx
+++ b/apps/formbricks-com/components/shared/BreakerCTA.tsx
@@ -1,4 +1,4 @@
-import Button from "./Button";
+import { Button } from "@formbricks/ui";
 import { useRouter } from "next/router";
 import clsx from "clsx";
 
diff --git a/apps/formbricks-com/components/shared/Button.tsx b/apps/formbricks-com/components/shared/Button.tsx
deleted file mode 100644
index 886f68f606..0000000000
--- a/apps/formbricks-com/components/shared/Button.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-import Link, { LinkProps } from "next/link";
-import React, { forwardRef } from "react";
-import clsx from "clsx";
-
-type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
-
-export type ButtonBaseProps = {
-  variant?: "highlight" | "primary" | "secondary" | "minimal" | "warn" | "alert";
-  size?: "base" | "sm" | "lg" | "fab" | "icon";
-  loading?: boolean;
-  disabled?: boolean;
-  onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  StartIcon?: SVGComponent;
-  startIconClassName?: string;
-  EndIcon?: SVGComponent;
-  endIconClassName?: string;
-  shallow?: boolean;
-};
-export type ButtonProps = ButtonBaseProps &
-  (
-    | (Omit<JSX.IntrinsicElements["a"], "href" | "onClick"> & LinkProps)
-    | (Omit<JSX.IntrinsicElements["button"], "onClick"> & { href?: never })
-  );
-
-export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonProps>(function Button(
-  props: ButtonProps,
-  forwardedRef
-) {
-  const {
-    loading = false,
-    variant = "primary",
-    size = "base",
-    StartIcon,
-    startIconClassName,
-    endIconClassName,
-    EndIcon,
-    shallow,
-    // attributes propagated from `HTMLAnchorProps` or `HTMLButtonProps`
-    ...passThroughProps
-  } = props;
-  // Buttons are **always** disabled if we're in a `loading` state
-  const disabled = props.disabled || loading;
-
-  // If pass an `href`-attr is passed it's `<a>`, otherwise it's a `<button />`
-  const isLink = typeof props.href !== "undefined";
-  const elementType = isLink ? "a" : "button";
-
-  const element = React.createElement(
-    elementType,
-    {
-      ...passThroughProps,
-      disabled,
-      ref: forwardedRef,
-      className: clsx(
-        // base styles independent what type of button it is
-        "inline-flex items-center appearance-none",
-        // different styles depending on size
-        size === "sm" && "px-3 py-2 text-sm leading-4 font-medium rounded-lg",
-        size === "base" && "px-6 py-2 text-sm font-medium rounded-xl",
-        size === "lg" && "px-4 py-2 text-base font-medium rounded-lg",
-        size === "icon" &&
-          "w-10 h-10 justify-center group p-2 border rounded-lg border-transparent text-neutral-400 hover:border-gray-200 transition",
-        // turn button into a floating action button (fab)
-        size === "fab" ? "fixed" : "relative",
-        size === "fab" && "justify-center bottom-20 right-8 rounded-full p-4 w-14 h-14",
-
-        // different styles depending on variant
-        variant === "highlight" &&
-          (disabled
-            ? "border border-transparent bg-gray-400 text-white"
-            : "text-slate-900 bg-gradient-to-b from-brand-light to-brand-dark hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900 transition ease-in-out delay-50 hover:scale-105"),
-        variant === "primary" &&
-          (disabled
-            ? "border border-transparent bg-gray-400 text-white"
-            : "text-slate-900 bg-gradient-to-b from-brand-light to-brand-dark  hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900"),
-
-        variant === "secondary" &&
-          (disabled
-            ? "border border-gray-200 text-gray-400 bg-white"
-            : "hover:text-slate-600 hover:bg-slate-300 bg-slate-200 text-slate-700 hover:shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900 dark:text-slate-400 dark:hover:text-slate-300 dark:bg-slate-800 dark:hover:bg-slate-700 transition ease-in-out delay-50 hover:scale-105"),
-        variant === "alert" &&
-          (disabled
-            ? "border border-transparent bg-gray-400 text-white"
-            : "border border-transparent dark:text-darkmodebrandcontrast text-brandcontrast bg-red-600 dark:bg-darkmodebrand hover:bg-opacity-90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-neutral-900"),
-        variant === "minimal" &&
-          (disabled
-            ? "text-slate-400 dark:text-slate-500 bg-slate-200 dark:bg-slate-800"
-            : "text-slate-600 hover:text-slate-500 bg-slate-200 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 dark:hover:text-slate-400 dark:hover:bg-slate-900 focus:outline-none focus:ring-2 focus:ring-offset-1 dark:focus:bg-slate-900 focus:bg-slate-700 focus:ring-neutral-500 transition ease-in-out delay-50 hover:scale-105"),
-        variant === "warn" &&
-          (disabled
-            ? "text-gray-400 bg-transparent"
-            : "text-gray-700 bg-transparent hover:text-red-700 hover:bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
-
-        // set not-allowed cursor if disabled
-        loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
-        props.className
-      ),
-      // if we click a disabled button, we prevent going through the click handler
-      onClick: disabled
-        ? (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-            e.preventDefault();
-          }
-        : props.onClick,
-    },
-    <>
-      {StartIcon && (
-        <StartIcon
-          className={clsx(
-            "inline",
-            size === "icon" ? "h-4 w-4 " : "-ml-1 h-4 w-4 ltr:mr-2 rtl:ml-2 rtl:-mr-1",
-            startIconClassName || ""
-          )}
-        />
-      )}
-      {props.children}
-      {loading && (
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 transform">
-          <svg
-            className={clsx(
-              "mx-4 h-5 w-5 animate-spin",
-              variant === "primary" ? "text-white dark:text-slate-900" : "text-slate-900"
-            )}
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24">
-            <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-            <path
-              className="opacity-75"
-              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"
-            />
-          </svg>
-        </div>
-      )}
-      {EndIcon && (
-        <EndIcon className={clsx("-mr-1 inline h-5 w-5 ltr:ml-2 rtl:mr-2", endIconClassName || "")} />
-      )}
-    </>
-  );
-  return props.href ? (
-    <Link passHref href={props.href} shallow={shallow && shallow}>
-      {element}
-    </Link>
-  ) : (
-    element
-  );
-});
-
-export default Button;
diff --git a/apps/formbricks-com/components/shared/CTA.tsx b/apps/formbricks-com/components/shared/CTA.tsx
index a3aa433692..c4ad5ef9b7 100644
--- a/apps/formbricks-com/components/shared/CTA.tsx
+++ b/apps/formbricks-com/components/shared/CTA.tsx
@@ -1,4 +1,4 @@
-import Button from "@/components/shared/Button";
+import { Button } from "@formbricks/ui";
 import { useRouter } from "next/router";
 import HeadingCentered from "./HeadingCentered";
 
diff --git a/apps/formbricks-com/components/shared/EarlyBirdDeal.tsx b/apps/formbricks-com/components/shared/EarlyBirdDeal.tsx
new file mode 100644
index 0000000000..e31cd3cf11
--- /dev/null
+++ b/apps/formbricks-com/components/shared/EarlyBirdDeal.tsx
@@ -0,0 +1,35 @@
+import { useRouter } from "next/router";
+import { Button } from "@formbricks/ui";
+import Image from "next/image";
+import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
+
+export default function EarlyBirdDeal() {
+  const router = useRouter();
+  return (
+    <div className="bg-brand-dark relative max-w-7xl overflow-hidden rounded-xl p-6 pb-16 sm:p-8 sm:pb-16 md:py-8 md:px-12 lg:flex lg:items-center">
+      <div className="lg:w-0 lg:flex-1 ">
+        <h2
+          className="mb-1 text-2xl font-bold tracking-tight text-white sm:text-2xl"
+          id="newsletter-headline">
+          50% off for early birds.
+        </h2>
+        <h2 className="text-xl font-semibold tracking-tight text-slate-200 sm:text-lg">
+          Limited Early Bird deal. Only{" "}
+          <span className="bg- rounded-sm bg-slate-200/40 px-2 py-0.5 text-slate-100">17</span> left.
+        </h2>
+
+        <div className="mt-6">
+          <Button variant="secondary" onClick={() => router.push("https://app.formbricks.com")}>
+            Get Early Bird Deal
+          </Button>
+        </div>
+        <p className="mt-2 mb-24 max-w-3xl text-xs tracking-tight text-slate-200 md:mb-0 md:max-w-sm lg:max-w-none">
+          This saves you $588 every year.
+        </p>
+        <div className="absolute -right-20 -bottom-36 mx-auto h-96 w-96 scale-75 sm:-right-10">
+          <Image src={EarlyBird} fill alt="formbricks favicon open source forms typeform alternative" />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/formbricks-com/components/shared/FeatureHighlight.tsx b/apps/formbricks-com/components/shared/FeatureHighlight.tsx
index fe34c0bd51..f5c3d99f61 100644
--- a/apps/formbricks-com/components/shared/FeatureHighlight.tsx
+++ b/apps/formbricks-com/components/shared/FeatureHighlight.tsx
@@ -1,4 +1,4 @@
-import Button from "./Button";
+import { Button } from "@formbricks/ui";
 import { useRouter } from "next/router";
 import clsx from "clsx";
 
diff --git a/apps/formbricks-com/components/shared/Header.tsx b/apps/formbricks-com/components/shared/Header.tsx
index 071fb45d51..5c2a9aec23 100644
--- a/apps/formbricks-com/components/shared/Header.tsx
+++ b/apps/formbricks-com/components/shared/Header.tsx
@@ -3,7 +3,7 @@ import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
-import Button from "./Button";
+import { Button } from "@formbricks/ui";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
 
diff --git a/apps/formbricks-com/components/shared/HeaderPMF.tsx b/apps/formbricks-com/components/shared/HeaderPMF.tsx
new file mode 100644
index 0000000000..ce2a398691
--- /dev/null
+++ b/apps/formbricks-com/components/shared/HeaderPMF.tsx
@@ -0,0 +1,107 @@
+import { Popover, Transition } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { Fragment } from "react";
+import { Button } from "@formbricks/ui";
+import { FooterLogo } from "./Logo";
+import { ThemeSelector } from "./ThemeSelector";
+
+export default function Header() {
+  const router = useRouter();
+  return (
+    <Popover className="relative" as="header">
+      <div className="flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start ">
+        <div className="flex w-0 flex-1 justify-start">
+          <Link href="/">
+            <span className="sr-only">Formbricks</span>
+            <FooterLogo className="h-8 w-auto sm:h-10" />
+          </Link>
+        </div>
+        <div className="-my-2 -mr-2 md:hidden">
+          <Popover.Button className="inline-flex items-center justify-center rounded-md bg-gray-100 p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+            <span className="sr-only">Open menu</span>
+            <Bars3Icon className="h-6 w-6" aria-hidden="true" />
+          </Popover.Button>
+        </div>
+        <Popover.Group as="nav" className="hidden space-x-10 md:flex">
+          <Link
+            href="#howitworks"
+            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
+            How it works
+          </Link>
+          <Link
+            href="#pricing"
+            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
+            Pricing <p className="bg-brand inline rounded-full px-2 text-xs text-white">50%</p>
+          </Link>
+        </Popover.Group>
+        <div className="hidden flex-1 items-center justify-end md:flex">
+          <ThemeSelector className="relative z-10 mr-5" />
+          <Button variant="secondary" className="ml-2" href="https://demo.formbricks.com" target="_blank">
+            Try Demo
+          </Button>
+          <Button variant="highlight" className="ml-2" href="https://app.formbricks.com" target="_blank">
+            Sign Up
+          </Button>
+        </div>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="duration-200 ease-out"
+        enterFrom="opacity-0 scale-95"
+        enterTo="opacity-100 scale-100"
+        leave="duration-100 ease-in"
+        leaveFrom="opacity-100 scale-100"
+        leaveTo="opacity-0 scale-95">
+        <Popover.Panel
+          focus
+          className="absolute inset-x-0 top-0 z-20 origin-top-right transform p-2 transition md:hidden">
+          <div className="dark:divide-slate divide-y-2 divide-gray-100 rounded-lg bg-gray-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-gray-700 dark:bg-slate-800">
+            <div className="px-5 pt-5 pb-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <FooterLogo className="h-8 w-auto" />
+                </div>
+                <div className="-mr-2">
+                  <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-teal-500 dark:bg-slate-700 dark:text-slate-200">
+                    <span className="sr-only">Close menu</span>
+                    <XMarkIcon className="h-6 w-6" aria-hidden="true" />
+                  </Popover.Button>
+                </div>
+              </div>
+            </div>
+            <div className="px-5 py-6">
+              <div className="flex flex-col space-y-5 text-center text-sm dark:text-slate-300">
+                <Link href="/community">Community</Link>
+                <Link href="/blog">Blog</Link>
+                <Button
+                  variant="secondary"
+                  EndIcon={GitHubIcon}
+                  onClick={() => router.push("https://github.com/formbricks/formbricks")}
+                  className="flex w-full justify-center fill-slate-800 dark:fill-slate-200">
+                  View on Github
+                </Button>
+                <Button
+                  variant="primary"
+                  onClick={() => router.push("/waitlist")}
+                  className="flex w-full justify-center">
+                  Get access
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Popover.Panel>
+      </Transition>
+    </Popover>
+  );
+}
+
+function GitHubIcon(props: any) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 16 16" {...props}>
+      <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" />
+    </svg>
+  );
+}
diff --git a/apps/formbricks-com/components/shared/HeaderWithMenu.tsx b/apps/formbricks-com/components/shared/HeaderWithMenu.tsx
index bf21c10b1e..0b41b9e446 100644
--- a/apps/formbricks-com/components/shared/HeaderWithMenu.tsx
+++ b/apps/formbricks-com/components/shared/HeaderWithMenu.tsx
@@ -17,7 +17,7 @@ import clsx from "clsx";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { Fragment } from "react";
-import Button from "./Button";
+import { Button } from "@formbricks/ui";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
 
diff --git a/apps/formbricks-com/components/shared/Hero.jsx b/apps/formbricks-com/components/shared/Hero.jsx
index e161b30c9f..5569671df9 100644
--- a/apps/formbricks-com/components/shared/Hero.jsx
+++ b/apps/formbricks-com/components/shared/Hero.jsx
@@ -3,7 +3,7 @@ import Image from "next/image";
 import clsx from "clsx";
 import Highlight, { defaultProps } from "prism-react-renderer";
 
-import { Button } from "@/components/shared/Button";
+import { Button } from "@formbricks/ui";
 import { HeroBackground } from "@/components/shared/HeroBackground";
 import blurCyanImage from "@/images/blur-cyan.png";
 import blurIndigoImage from "@/images/blur-indigo.png";
diff --git a/apps/formbricks-com/components/shared/LayoutPMF.tsx b/apps/formbricks-com/components/shared/LayoutPMF.tsx
new file mode 100644
index 0000000000..f6bd59a51f
--- /dev/null
+++ b/apps/formbricks-com/components/shared/LayoutPMF.tsx
@@ -0,0 +1,24 @@
+import Footer from "./Footer";
+import HeaderPMF from "./HeaderPMF";
+import MetaInformation from "./MetaInformation";
+
+interface LayoutProps {
+  children: React.ReactNode;
+  title: string;
+  description: string;
+}
+
+export default function Layout({ title, description, children }: LayoutProps) {
+  return (
+    <div className="flex h-screen flex-col justify-between">
+      <MetaInformation title={title} description={description} />
+      <HeaderPMF />
+      {
+        <main className="max-w-8xl relative mx-auto mb-auto flex w-full flex-col justify-center sm:px-2 lg:px-8 xl:px-12">
+          {children}
+        </main>
+      }
+      <Footer />
+    </div>
+  );
+}
diff --git a/apps/formbricks-com/components/shared/MdxCTA.tsx b/apps/formbricks-com/components/shared/MdxCTA.tsx
index 6ffa1ffd1b..7737c01183 100644
--- a/apps/formbricks-com/components/shared/MdxCTA.tsx
+++ b/apps/formbricks-com/components/shared/MdxCTA.tsx
@@ -1,4 +1,4 @@
-import Button from "@/components/shared/Button";
+import { Button } from "@formbricks/ui";
 import { useRouter } from "next/router";
 import HeadingCentered from "./HeadingCentered";
 
diff --git a/apps/formbricks-com/components/shared/MdxTryItCTA.tsx b/apps/formbricks-com/components/shared/MdxTryItCTA.tsx
index 8e2c52abb5..410f18484c 100644
--- a/apps/formbricks-com/components/shared/MdxTryItCTA.tsx
+++ b/apps/formbricks-com/components/shared/MdxTryItCTA.tsx
@@ -1,4 +1,4 @@
-import Button from "./Button";
+import { Button } from "@formbricks/ui";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 
diff --git a/apps/formbricks-com/components/shared/NewsletterSignup.tsx b/apps/formbricks-com/components/shared/NewsletterSignup.tsx
index 7a206bbc1b..75290bcc26 100644
--- a/apps/formbricks-com/components/shared/NewsletterSignup.tsx
+++ b/apps/formbricks-com/components/shared/NewsletterSignup.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Button from "@/components/shared/Button";
+import { Button } from "@formbricks/ui";
 import Friends from "@/images/newsletter-signup-gif.gif";
 
 export default function WaitlistForm() {
diff --git a/apps/formbricks-com/components/shared/TryItCTA.tsx b/apps/formbricks-com/components/shared/TryItCTA.tsx
index 5e8713e82d..078ac2db88 100644
--- a/apps/formbricks-com/components/shared/TryItCTA.tsx
+++ b/apps/formbricks-com/components/shared/TryItCTA.tsx
@@ -1,4 +1,4 @@
-import Button from "../shared/Button";
+import { Button } from "@formbricks/ui";
 import { DocumentDuplicateIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 
diff --git a/apps/formbricks-com/components/shared/pmfPricing.tsx b/apps/formbricks-com/components/shared/pmfPricing.tsx
index de2aa7a824..d0b1326cd9 100644
--- a/apps/formbricks-com/components/shared/pmfPricing.tsx
+++ b/apps/formbricks-com/components/shared/pmfPricing.tsx
@@ -1,18 +1,16 @@
-import { ArrowRightIcon, EnvelopeIcon } from "@heroicons/react/20/solid";
 import { useRouter } from "next/router";
-import { Fragment, useState } from "react";
 import HeadingCentered from "./HeadingCentered";
 import clsx from "clsx";
-import Button from "@/components/shared/Button";
-import Image from "next/image";
-import EarlyBird from "@/images/early bird deal for open source jotform alternative typeform and surveymonkey_v2.svg";
+import { Button } from "@formbricks/ui";
+import EarlyBirdDeal from "./EarlyBirdDeal";
 
 const tiers = [
   {
     name: "Self-hosting",
     href: "#",
-    priceMonthly: "$99",
+    priceMonthly: "tba",
     button: "secondary",
+    discounted: false,
     highlight: false,
     paymentRythm: "/month",
     description: "Host Formbricks on your own server.",
@@ -24,38 +22,42 @@ const tiers = [
     href: "#",
     priceMonthly: "$99",
     button: "highlight",
+    discounted: true,
     highlight: true,
     paymentRythm: "/month",
     description: "Use the managed cloud, gather insights immediately.",
-    ctaName: "Sign Up",
+    ctaName: "Sign up now",
     ctaAction: () => window.open("https://app.formbricks.com"),
   },
 ];
 
-export default function Pricelist() {
+export default function PmfPricing() {
   const router = useRouter();
   return (
-    <div className="bg-gradient-radial from-deeppurple-light to-deeppurple pb-20">
-      <div className="mx-auto max-w-7xl py-4 pt-20 sm:py-16 sm:px-6 sm:pt-24 lg:px-8 lg:pt-32">
-        <HeadingCentered heading="One price, all features." teaser="Pricing" />
+    <div className="-mt-10 pb-20">
+      <div className="mx-auto max-w-7xl py-4 sm:px-6 sm:pb-6 lg:px-8 ">
+        <HeadingCentered heading="One price, unlimited usage." teaser="Pricing" />
 
         <div className="mx-auto space-y-4 px-4 sm:grid sm:grid-cols-2 sm:gap-6 sm:space-y-0 md:px-0 lg:max-w-5xl">
           {tiers.map((tier) => (
             <div
               key={tier.name}
-              className={clsx(`rounded-lg shadow-sm`, tier.highlight ? "bg-slate-300" : "bg-slate-100")}>
+              className={clsx(
+                `rounded-lg shadow-sm`,
+                tier.highlight ? "border-2 border-slate-400 bg-slate-300" : "bg-slate-100"
+              )}>
               <div className="p-8">
                 <h2
                   className={clsx(
                     "inline-flex text-3xl font-bold",
-                    tier.highlight ? "text-slate-700" : "text-slate-400"
+                    tier.highlight ? "text-slate-700" : "text-slate-500"
                   )}>
                   {tier.name}
                 </h2>
                 <p
                   className={clsx(
                     "mt-4 whitespace-pre-wrap text-sm",
-                    tier.highlight ? "text-gray-600" : "text-gray-400"
+                    tier.highlight ? "text-gray-600" : "text-gray-500"
                   )}>
                   {tier.description}
                 </p>
@@ -63,14 +65,16 @@ export default function Pricelist() {
                   <span
                     className={clsx(
                       `text-4xl font-light`,
-                      tier.highlight ? "text-slate-800" : "text-slate-400"
+                      tier.highlight ? "text-slate-800" : "text-slate-500",
+                      tier.discounted ? "decoration-brand line-through" : ""
                     )}>
                     {tier.priceMonthly}
                   </span>{" "}
+                  <span className="text-4xl font-bold text-slate-900">{tier.discounted && "$49"}</span>
                   <span
                     className={clsx(
                       "text-base font-medium",
-                      tier.highlight ? "text-gray-500" : "text-gray-300"
+                      tier.highlight ? "text-gray-500" : "text-gray-400"
                     )}>
                     {tier.paymentRythm}
                   </span>
@@ -79,7 +83,7 @@ export default function Pricelist() {
                   <Button
                     onClick={tier.ctaAction}
                     className="mt-6 w-full justify-center py-4 text-lg shadow-sm"
-                    variant={tier.button}>
+                    variant={tier.highlight ? "highlight" : "secondary"}>
                     {tier.ctaName}
                   </Button>
                 )}
@@ -88,30 +92,8 @@ export default function Pricelist() {
           ))}
         </div>
       </div>
-      <div className="mx-auto max-w-7xl px-4 sm:px-8">
-        <div className="from-red to-pink relative max-w-7xl overflow-hidden rounded-xl bg-gradient-to-r p-6 pb-16 sm:p-8 sm:pb-16 md:py-8 md:px-12 lg:flex lg:items-center">
-          <div className="lg:w-0 lg:flex-1 ">
-            <h2
-              className="mb-1 text-2xl font-bold tracking-tight text-white sm:text-2xl"
-              id="newsletter-headline">
-              50% off for early birds.
-            </h2>
-            <h2 className="text-xl font-semibold tracking-tight text-red-200 sm:text-lg">
-              Limited Early Bird deal. Only{" "}
-              <span className="text-red rounded-sm bg-red-200 px-2 py-0.5">12</span> left.
-            </h2>
-
-            <div className="mt-6">
-              <Button onClick={() => router.push("https://app.formbricks.com")}>Get Early Bird Deal</Button>
-            </div>
-            <p className="mt-2 mb-24 max-w-3xl text-xs tracking-tight text-red-200 md:mb-0 md:max-w-sm lg:max-w-none">
-              This saves you $588 every year.
-            </p>
-            <div className="absolute -right-20 -bottom-36 mx-auto h-96 w-96 scale-75 sm:-right-10">
-              <Image src={EarlyBird} fill alt="formbricks favicon open source forms typeform alternative" />
-            </div>
-          </div>
-        </div>
+      <div className="mx-auto max-w-5xl">
+        <EarlyBirdDeal />
       </div>
     </div>
   );
diff --git a/apps/formbricks-com/pages/community.tsx b/apps/formbricks-com/pages/community.tsx
index 0d3c5a7607..dee74a00c0 100644
--- a/apps/formbricks-com/pages/community.tsx
+++ b/apps/formbricks-com/pages/community.tsx
@@ -1,6 +1,6 @@
 import Layout from "@/components/shared/Layout";
 import HeroTitle from "@/components/shared/HeroTitle";
-import Button from "@/components/shared/Button";
+import { Button } from "@formbricks/ui";
 import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 import { ChatBubbleOvalLeftEllipsisIcon, EnvelopeIcon } from "@heroicons/react/24/solid";
diff --git a/apps/formbricks-com/pages/pmf.tsx b/apps/formbricks-com/pages/pmf.tsx
index c86d0122f1..c7119981e1 100644
--- a/apps/formbricks-com/pages/pmf.tsx
+++ b/apps/formbricks-com/pages/pmf.tsx
@@ -1,19 +1,20 @@
-import Layout from "@/components/shared/Layout";
-import Button from "@/components/shared/Button";
+import LayoutPMF from "@/components/shared/LayoutPMF";
+import { Button } from "@formbricks/ui";
 import { useRouter } from "next/router";
 import BreakerCTA from "@/components/shared/BreakerCTA";
 import Features from "@/components/home/Features";
-import Pricing from "@/components/shared/PmfPricing";
+import PmfPricing from "@/components/shared/PmfPricing";
 import Image from "next/image";
 import DashboardMockup from "@/images/dashboard-mockup.png";
 import Pipelines from "@/images/pipelines.png";
 import PreSegmentation from "@/images/pre-segmentation.png";
 import PmfDummy from "@/components/shared/PmfDummy";
+import EarlyBirdDeal from "@/components/shared/EarlyBirdDeal";
 
 export default function GetStartedPage() {
   const router = useRouter();
   return (
-    <Layout
+    <LayoutPMF
       title="Continuous Product-Market Fit Score"
       description="Measure the Product-Market Fit continuously. Use the Superhuman Product-Market-Fit to your advantage.">
       <div className="px-4 py-20 text-center sm:px-6 lg:px-8 lg:py-28">
@@ -52,30 +53,30 @@ export default function GetStartedPage() {
       {/* Video */}
 
       <BreakerCTA
-        teaser="Get started"
-        headline="Measure your Product-Market Fit."
-        subheadline="Feel the pulse of your user base. Get actionable insights."
-        cta="Sign up"
-        href="https://app.formbricks.com"
+        teaser="No sign up required"
+        headline="Experience what you're missing"
+        subheadline="Play around with out Demo - no sign up needed."
+        cta="Try Demo"
+        href="https://demo.formbricks.com"
         inverted
       />
 
       {/* Steps */}
-      <div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">
+      <div id="howitworks" className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0 md:max-w-none">
         <div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
           <div className="grid md:grid-cols-2 md:items-center md:gap-16">
-            <div className="pb-8 md:pb-0">
+            <div className="pb-8 sm:pl-10 md:pb-0">
               <h4 className="text-brand-dark font-bold">Step 1</h4>
               <h2 className="xs:text-3xl text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200">
                 1. Pre-Segmentation
               </h2>
               <p className="text-md mt-6 max-w-lg leading-7 text-slate-500 dark:text-slate-400">
                 Signed up for more than 4 weeks? Used a specific feature? Set up a custom condition to{" "}
-                <strong>only survey the right subset</strong> of your users.
+                <strong>only survey the right subset</strong> of your user base.
               </p>
             </div>
             <div className="rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:p-8">
-              <Image src={PreSegmentation} alt="react library" className="block dark:hidden" />
+              <Image src={PreSegmentation} quality="100" alt="react library" className="block dark:hidden" />
               {/* 
               <Image src={ImageDarkAnalytics} alt="react library" className="hidden rounded-lg dark:block" /> */}
             </div>
@@ -85,9 +86,10 @@ export default function GetStartedPage() {
       <div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0  md:max-w-none">
         <div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
           <div className="grid md:grid-cols-2 md:items-center md:gap-16">
-            <div className="order-last rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:p-8 md:order-first">
-              {/*  <Image src={Pipelines} alt="react library" className="block rounded-lg dark:hidden" />
-              <Image src={ImageDarkInsights} alt="react library" className="hidden rounded-lg dark:block" /> */}
+            <div className="order-last w-full rounded-lg bg-slate-100 p-4 dark:bg-slate-800 sm:py-8 md:order-first">
+              <div className="mx-auto md:w-3/4">
+                <PmfDummy />
+              </div>
             </div>
             <div className="pb-8 md:pb-0">
               <h4 className="text-brand-dark font-bold">Step 2</h4>
@@ -105,7 +107,7 @@ export default function GetStartedPage() {
       <div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0  md:max-w-none">
         <div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
           <div className="grid md:grid-cols-2 md:items-center md:gap-16">
-            <div className="pb-8 md:pb-0">
+            <div className="pb-8 sm:pl-10 md:pb-0">
               <h4 className="text-brand-dark font-bold">Step 3</h4>
               <h2 className="xs:text-3xl text-2xl font-bold tracking-tight text-slate-800 dark:text-slate-200 sm:text-3xl">
                 Loop in your team
@@ -116,16 +118,21 @@ export default function GetStartedPage() {
               </p>
             </div>
             <div className="w-full rounded-lg bg-slate-100 p-8 dark:bg-slate-800">
-              <Image src={Pipelines} alt="react library" className="block rounded-lg dark:hidden" />
+              <Image
+                src={Pipelines}
+                quality="100"
+                alt="react library"
+                className="block rounded-lg dark:hidden"
+              />
             </div>
           </div>
         </div>
       </div>
-      <div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-0  md:max-w-none">
+      <div className="mx-auto mt-8 mb-12 max-w-lg md:mt-32 md:mb-32  md:max-w-none">
         <div className="px-4 sm:max-w-4xl sm:px-6 lg:max-w-7xl lg:px-8">
           <div className="grid md:grid-cols-2 md:items-center md:gap-16">
             <div className="order-last scale-125 sm:p-8 md:order-first">
-              <Image src={DashboardMockup} alt="react library" className="block dark:hidden" />{" "}
+              <Image src={DashboardMockup} quality="100" alt="react library" className="block dark:hidden" />{" "}
               {/*
               <Image src={ImageDarkInsights} alt="react library" className="hidden rounded-lg dark:block" /> */}
             </div>
@@ -135,23 +142,27 @@ export default function GetStartedPage() {
                 Make better decisions
               </h2>
               <p className="text-md mt-6 max-w-lg leading-7 text-slate-500 dark:text-slate-400">
-                A dashboard specifically built to gauge Product-Market Fit survey. Beat confirmation bias and
+                A dashboard specifically built to gauge Product-Market Fit. Beat confirmation bias and
                 <strong> build conviction for the next product decision.</strong>
               </p>
             </div>
           </div>
         </div>
       </div>
+      <EarlyBirdDeal />
 
       <Features />
-      <BreakerCTA
+      {/*       <BreakerCTA
         teaser="Get started"
         headline="Measure your Product-Market Fit."
         subheadline="Feel the pulse of your user base. Get actionable insights."
         cta="Sign up"
         href="https://app.formbricks.com"
-      />
-      <Pricing />
-    </Layout>
+      /> */}
+      <div id="pricing">
+        {" "}
+        <PmfPricing />
+      </div>
+    </LayoutPMF>
   );
 }
diff --git a/apps/formbricks-com/public/robots.txt b/apps/formbricks-com/public/robots.txt
index 71a3a790ab..43c1f8d2eb 100644
--- a/apps/formbricks-com/public/robots.txt
+++ b/apps/formbricks-com/public/robots.txt
@@ -1,7 +1,9 @@
 # *
 User-agent: *
+Disallow: /pmf
 Allow: /
 
+
 # Host
 Host: https://formbricks.com
 
diff --git a/packages/ui/src/Button.tsx b/packages/ui/src/Button.tsx
index 2599c00bf8..5235acd4c8 100644
--- a/packages/ui/src/Button.tsx
+++ b/packages/ui/src/Button.tsx
@@ -68,7 +68,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
         variant === "highlight" &&
           (disabled
             ? "border border-transparent bg-gray-400 text-white"
-            : "text-slate-900 bg-gradient-to-b from-brand-light to-brand-dark hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900 transition ease-in-out delay-50 hover:scale-105"),
+            : "text-white bg-gradient-to-b from-brand-light to-brand-dark hover:shadow-md focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-slate-900 transition ease-in-out delay-50 hover:scale-105"),
         variant === "primary" &&
           (disabled
             ? "border border-transparent bg-gray-400 text-white"