diff --git a/apps/formbricks-com/components/docs/Layout.tsx b/apps/formbricks-com/components/docs/Layout.tsx
index 855f410e5e..8612686c35 100644
--- a/apps/formbricks-com/components/docs/Layout.tsx
+++ b/apps/formbricks-com/components/docs/Layout.tsx
@@ -2,7 +2,6 @@ import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import clsx from "clsx";
-import { Hero } from "@/components/shared/Hero";
 import { FooterLogo, Logomark } from "@/components/shared/Logo";
 import { MobileNavigation } from "@/components/shared/MobileNavigation";
 import { Navigation } from "@/components/shared/Navigation";
@@ -64,9 +63,12 @@ function Header({ navigation }: any) {
           onClick={() => router.push("https://github.com/formbricks/formbricks")}>
           View on Github
         </Button>
-        {/*         <Button variant="highlight" className="ml-2" onClick={() => router.push("/waitlist")}>
+        <Button
+          variant="highlight"
+          className="ml-2"
+          onClick={() => router.push("https://app.formbricks.com/auth/signup")}>
           Get started
-        </Button> */}
+        </Button>
       </div>
     </header>
   );
@@ -92,12 +94,10 @@ export function Layout({ children, meta }: LayoutProps) {
     <>
       <MetaInformation
         title="Formbricks Documentation"
-        description="Modular, customizable, extendable. Take what you like, build on top what you need. Build your next big thing faster."
+        description="Open-source Experience Management for Digital Products."
       />
       <Header navigation={navigation} />
 
-      {isHomePage && <Hero />}
-
       <div className="max-w-8xl relative mx-auto flex justify-center sm:px-2 lg:px-8 xl:px-12">
         <div className="hidden lg:relative lg:block lg:flex-none">
           <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
diff --git a/apps/formbricks-com/components/home/Hero.tsx b/apps/formbricks-com/components/home/Hero.tsx
index 3d9acd96f7..6d235e88ad 100644
--- a/apps/formbricks-com/components/home/Hero.tsx
+++ b/apps/formbricks-com/components/home/Hero.tsx
@@ -1,15 +1,17 @@
-import TemplateList from "../dummyUI/TemplateList";
-import { Button } from "@formbricks/ui";
-import { useState } from "react";
+import CalLogoDark from "@/images/clients/cal-logo-dark.svg";
+import CalLogoLight from "@/images/clients/cal-logo-light.svg";
+import CrowdLogoDark from "@/images/clients/crowd-logo-dark.svg";
+import CrowdLogoLight from "@/images/clients/crowd-logo-light.svg";
+import StackOceanLogoDark from "@/images/clients/stack-ocean-dark.png";
+import StackOceanLogoLight from "@/images/clients/stack-ocean-light.png";
+import Image from "next/image";
 import { useRouter } from "next/router";
-import VideoWalkThrough from "./VideoWalkThrough";
-import { PlayCircleIcon } from "@heroicons/react/24/solid";
+import TemplateList from "../dummyUI/TemplateList";
 
 interface Props {}
 
 export default function Hero({}: Props) {
   const router = useRouter();
-  const [videoModal, setVideoModal] = useState(false);
 
   return (
     <div className="relative">
@@ -22,28 +24,69 @@ export default function Hero({}: Props) {
           <span className="inline ">.</span>
         </h1>
 
-        <p className="xs:max-w-none mx-auto mt-3 max-w-xs text-base text-slate-500 dark:text-slate-300 sm:text-lg md:mt-5 md:text-xl">
+        <p className="xs:max-w-none mx-auto mt-3 max-w-xs text-base text-slate-500 dark:text-slate-400 sm:text-lg md:mt-5 md:text-xl">
           Survey specific customer segments at any point in the user journey.
           <br />
           <span className="hidden md:block">
-            Continuously measure what your customers think and feel. All open-source.
+            Continuously measure what your customers think and feel.{" "}
+            <span className="decoration-brand-dark underline underline-offset-4">All open-source.</span>
           </span>
         </p>
 
-        <div className="mx-auto mt-5 max-w-md sm:flex sm:justify-center md:mt-8">
-          <Button
-            variant="highlight"
+        <div className="mx-auto mt-5 max-w-lg items-center space-x-8 sm:flex sm:justify-center md:mt-8">
+          <p className="hidden whitespace-nowrap text-sm text-slate-400 dark:text-slate-500 md:block">
+            Used by
+          </p>
+          <div className="grid grid-cols-3 gap-8 pt-2">
+            <Image
+              src={CalLogoLight}
+              alt="Cal Logo"
+              className="block rounded-lg opacity-50 hover:opacity-100 dark:hidden"
+              width={170}
+            />
+            <Image
+              src={CalLogoDark}
+              alt="Cal Logo"
+              className="hidden rounded-lg opacity-50 hover:opacity-100 dark:block"
+              width={170}
+            />
+            <Image
+              src={CrowdLogoLight}
+              alt="Cal Logo"
+              className="block rounded-lg pb-1 opacity-50 hover:opacity-100 dark:hidden"
+              width={200}
+            />
+            <Image
+              src={CrowdLogoDark}
+              alt="Cal Logo"
+              className="hidden rounded-lg pb-1 opacity-50 hover:opacity-100 dark:block"
+              width={200}
+            />
+            <Image
+              src={StackOceanLogoLight}
+              alt="Cal Logo"
+              className="block rounded-lg pb-1 opacity-50 hover:opacity-100 dark:hidden"
+              width={200}
+            />
+            <Image
+              src={StackOceanLogoDark}
+              alt="Cal Logo"
+              className="hidden rounded-lg pb-1 opacity-50 hover:opacity-100 dark:block"
+              width={200}
+            />
+          </div>
+          {/*           <Button
+            variant="secondary"
             className="mr-3 px-6"
             onClick={() => setVideoModal(true)}
             EndIcon={PlayCircleIcon}
             endIconClassName=" ml-2">
             Watch video
-          </Button>
+          </Button> */}
         </div>
       </div>
 
       <TemplateList />
-      <VideoWalkThrough open={videoModal} setOpen={() => setVideoModal(false)} />
     </div>
   );
 }
diff --git a/apps/formbricks-com/components/shared/Header.tsx b/apps/formbricks-com/components/shared/Header.tsx
index b2a358cbed..d80c7cef72 100644
--- a/apps/formbricks-com/components/shared/Header.tsx
+++ b/apps/formbricks-com/components/shared/Header.tsx
@@ -2,12 +2,15 @@ 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 { Fragment, useState } from "react";
 import { Button } from "@formbricks/ui";
 import { FooterLogo } from "./Logo";
 import { ThemeSelector } from "./ThemeSelector";
+import { PlayCircleIcon } from "@heroicons/react/24/solid";
+import VideoWalkThrough from "../home/VideoWalkThrough";
 
 export default function Header() {
+  const [videoModal, setVideoModal] = useState(false);
   const router = useRouter();
   return (
     <Popover className="relative" as="header">
@@ -30,11 +33,7 @@ export default function Header() {
             className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Community
           </Link>
-          <Link
-            href="/blog"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
-            Blog <p className="bg-brand inline rounded-full px-2 text-xs text-white">1</p>
-          </Link>
+
           <Link
             href="#pricing"
             className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
@@ -45,20 +44,32 @@ export default function Header() {
             className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
             Docs
           </Link>
+          <Link
+            href="/blog"
+            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
+            Blog{/*  <p className="bg-brand inline rounded-full px-2 text-xs text-white">1</p> */}
+          </Link>
         </Popover.Group>
         <div className="hidden flex-1 items-center justify-end md:flex">
           <ThemeSelector className="relative z-10 mr-5" />
-          <Button
+          <Button variant="secondary" className="px-2" onClick={() => setVideoModal(true)}>
+            <VideoWalkThrough open={videoModal} setOpen={() => setVideoModal(false)} />
+            <PlayCircleIcon className="h-6 w-6" />
+          </Button>
+          {/*           <Button
             variant="secondary"
             EndIcon={GitHubIcon}
             endIconClassName="fill-slate-800 ml-2 dark:fill-slate-200"
             href="https://github.com/formbricks/formbricks"
             target="_blank">
             View on Github
-          </Button>
-          {/* <Button variant="highlight" className="ml-2" onClick={() => router.push("/waitlist")}>
-            Get Access
           </Button> */}
+          <Button
+            variant="highlight"
+            className="ml-2"
+            onClick={() => router.push("https://app.formbricks.com/auth/signup")}>
+            Get started
+          </Button>
         </div>
       </div>
 
@@ -90,20 +101,22 @@ export default function Header() {
             <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="#pricing">Pricing</Link>
+                <Link href="/docs">Docs</Link>
                 <Link href="/blog">Blog</Link>
-                <Button
+                {/*                 <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> */}
+                <Button
+                  variant="primary"
+                  onClick={() => router.push("https://app.formbricks.com/auth/signup")}
+                  className="flex w-full justify-center">
+                  Get started
+                </Button>
               </div>
             </div>
           </div>
diff --git a/apps/formbricks-com/components/shared/HeaderPMF.tsx b/apps/formbricks-com/components/shared/HeaderPMF.tsx
deleted file mode 100644
index ec3136441f..0000000000
--- a/apps/formbricks-com/components/shared/HeaderPMF.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-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";
-import { usePlausible } from "next-plausible";
-
-export default function Header() {
-  const router = useRouter();
-  const plausible = usePlausible();
-  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-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-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>
-          <Link
-            href="/docs"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
-            Docs
-          </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"
-            onClick={() => {
-              plausible("openDemo");
-              window.open("https://app.formbricks.com/demo", "_blank")?.focus();
-            }}>
-            Try Demo
-          </Button>
-          <Button
-            variant="highlight"
-            className="ml-2"
-            onClick={() => {
-              plausible("openSignUp");
-              window.open("https://app.formbricks.com/auth/signup", "_blank")?.focus();
-            }}>
-            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-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-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-slate-400 hover:bg-slate-100 hover:text-slate-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="#howitworks">How it works</Link>
-                <Link href="#pricing">Pricing</Link>
-                <Link href="/docs">Docs</Link>
-                <Button
-                  variant="secondary"
-                  target="_blank"
-                  onClick={() => router.push("https://app.formbricks.com/demo")}
-                  className="flex w-full justify-center fill-slate-800 dark:fill-slate-200">
-                  Try Demo
-                </Button>
-                <Button
-                  variant="primary"
-                  target="_blank"
-                  onClick={() => router.push("https://app.formbricks.com/auth/signup")}
-                  className="flex w-full justify-center">
-                  Sign Up
-                </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
deleted file mode 100644
index 6a9a931353..0000000000
--- a/apps/formbricks-com/components/shared/HeaderWithMenu.tsx
+++ /dev/null
@@ -1,471 +0,0 @@
-import { Popover, Transition } from "@headlessui/react";
-import { ChevronDownIcon } from "@heroicons/react/24/solid";
-import {
-  Bars3Icon,
-  BoltIcon,
-  ClipboardDocumentListIcon,
-  CodeBracketSquareIcon,
-  CpuChipIcon,
-  CursorArrowRaysIcon,
-  CursorArrowRippleIcon,
-  DocumentChartBarIcon,
-  EnvelopeIcon,
-  SquaresPlusIcon,
-  XMarkIcon,
-} from "@heroicons/react/24/outline";
-import clsx from "clsx";
-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";
-
-const creation = [
-  {
-    name: "React Library",
-    description: "Build surveys with React.js",
-    href: "/react-form-library",
-    icon: CodeBracketSquareIcon,
-    status: true,
-  },
-  {
-    name: "No-Code Builder",
-    description: "Notion-like visual builder",
-    href: "/visual-builder",
-    icon: CursorArrowRaysIcon,
-    status: false,
-  },
-  {
-    name: "Templates",
-    description: "CSAT, PMF survey, etc.",
-    href: "#",
-    icon: ClipboardDocumentListIcon,
-    status: false,
-  },
-];
-
-const pipes = [
-  {
-    name: "Core API",
-    description: "The OS survey engine",
-    href: "/core-api",
-    icon: CpuChipIcon,
-    status: true,
-  },
-  {
-    name: "Webhooks",
-    description: "Send JSON anywhere",
-    href: "/webhooks",
-    icon: BoltIcon,
-    status: true,
-  },
-  {
-    name: "Email",
-    description: "Send data and notifications",
-    href: "/email",
-    icon: EnvelopeIcon,
-    status: true,
-  },
-  {
-    name: "Integrations",
-    description: "Connect with 100+ apps",
-    href: "/integrations",
-    icon: SquaresPlusIcon,
-    status: false,
-  },
-];
-
-const insights = [
-  {
-    name: "Formbricks HQ",
-    description: "Manage submissions easily",
-    href: "/formbricks-hq",
-    icon: CursorArrowRippleIcon,
-    cat: "insights",
-    status: true,
-  },
-  {
-    name: "Reports",
-    description: "Based on Templates",
-    href: "#",
-    icon: DocumentChartBarIcon,
-    cat: "insights",
-    status: false,
-  },
-];
-
-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 md:space-x-10">
-        <div className="flex justify-start lg:w-0 lg:flex-1">
-          <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-slate-100 p-2 text-slate-400 hover:bg-slate-100 hover:text-slate-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">
-          <Popover className="relative">
-            {({ open }) => (
-              <>
-                <Popover.Button
-                  className={clsx(
-                    open ? "text-slate-700" : "text-slate-400",
-                    "group inline-flex items-center rounded-md text-base font-medium hover:text-slate-700 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:hover:text-slate-300"
-                  )}>
-                  <span>Bricks</span>
-                  <ChevronDownIcon className="ml-2 h-5 w-5" aria-hidden="true" />
-                </Popover.Button>
-
-                <Transition
-                  as={Fragment}
-                  enter="transition ease-out duration-200"
-                  enterFrom="opacity-0 translate-y-1"
-                  enterTo="opacity-100 translate-y-0"
-                  leave="transition ease-in duration-150"
-                  leaveFrom="opacity-100 translate-y-0"
-                  leaveTo="opacity-0 translate-y-1">
-                  <Popover.Panel className="absolute z-10 mt-3 -ml-4 w-screen max-w-lg transform lg:left-1/2 lg:ml-0 lg:max-w-4xl lg:-translate-x-1/2">
-                    <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-                      <div className="relative grid gap-6 bg-slate-50 px-5 py-6 dark:bg-slate-700 sm:gap-6 sm:p-8 lg:grid-cols-3">
-                        <div>
-                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Survey Creation</h4>
-                          {creation.map((brick) => (
-                            <Link
-                              key={brick.name}
-                              href={brick.href}
-                              className={clsx(
-                                brick.status
-                                  ? "cursor-pointer hover:bg-slate-100  dark:hover:bg-slate-600 dark:hover:bg-opacity-50"
-                                  : "cursor-default",
-                                "-m-3 flex items-start rounded-lg p-3 py-4"
-                              )}>
-                              <div
-                                className={clsx(
-                                  brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
-                                  "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
-                                )}>
-                                <brick.icon className="h-6 w-6" aria-hidden="true" />
-                              </div>
-                              <div className="ml-4">
-                                <p
-                                  className={clsx(
-                                    brick.status
-                                      ? "text-slate-800 dark:text-slate-50"
-                                      : "text-slate-500 dark:text-slate-400",
-                                    "text-lg font-semibold"
-                                  )}>
-                                  {brick.name}
-                                </p>
-                                <p className="text-sm text-slate-400 dark:text-slate-500">
-                                  {brick.description}
-                                </p>
-                              </div>
-                            </Link>
-                          ))}
-                        </div>
-                        <div>
-                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Data Pipelines</h4>
-                          {pipes.map((brick) => (
-                            <Link
-                              key={brick.name}
-                              href={brick.href}
-                              className={clsx(
-                                brick.status
-                                  ? "cursor-pointer hover:bg-slate-100  dark:hover:bg-slate-600 dark:hover:bg-opacity-50"
-                                  : "cursor-default",
-                                "-m-3 flex items-start rounded-lg p-3 py-4"
-                              )}>
-                              <div
-                                className={clsx(
-                                  brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
-                                  "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
-                                )}>
-                                <brick.icon className="h-6 w-6" aria-hidden="true" />
-                              </div>
-                              <div className="ml-4">
-                                <p
-                                  className={clsx(
-                                    brick.status
-                                      ? "text-slate-800 dark:text-slate-50"
-                                      : "text-slate-500 dark:text-slate-400",
-                                    "text-lg font-semibold"
-                                  )}>
-                                  {brick.name}
-                                </p>
-                                <p className="text-sm text-slate-400 dark:text-slate-500">
-                                  {brick.description}
-                                </p>
-                              </div>
-                            </Link>
-                          ))}
-                        </div>
-                        <div>
-                          <h4 className="mb-6 ml-16 text-sm text-slate-400">Data Insights</h4>
-                          {insights.map((brick) => (
-                            <Link
-                              key={brick.name}
-                              href={brick.href}
-                              className={clsx(
-                                brick.status
-                                  ? "cursor-pointer hover:bg-slate-100  dark:hover:bg-slate-600 dark:hover:bg-opacity-50"
-                                  : "cursor-default",
-                                "-m-3 flex items-start rounded-lg p-3 py-4"
-                              )}>
-                              <div
-                                className={clsx(
-                                  brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
-                                  "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
-                                )}>
-                                <brick.icon className="h-6 w-6" aria-hidden="true" />
-                              </div>
-                              <div className="ml-4">
-                                <p
-                                  className={clsx(
-                                    brick.status
-                                      ? "text-slate-800 dark:text-slate-50"
-                                      : "text-slate-500 dark:text-slate-400",
-                                    "text-lg font-semibold"
-                                  )}>
-                                  {brick.name}
-                                </p>
-                                <p className="text-sm text-slate-400 dark:text-slate-500">
-                                  {brick.description}
-                                </p>
-                              </div>
-                            </Link>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </Popover.Panel>
-                </Transition>
-              </>
-            )}
-          </Popover>
-
-          <Link
-            href="/community"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
-            Community
-          </Link>
-          <Link
-            href="/blog"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
-            Blog <p className="bg-brand inline rounded-full px-2 text-xs text-white">1</p>
-          </Link>
-          <Link
-            href="/docs"
-            className="text-base font-medium text-slate-400 hover:text-slate-700  dark:hover:text-slate-300">
-            Docs
-          </Link>
-        </Popover.Group>
-        <div className="hidden items-center justify-end md:flex md:flex-1 lg:w-0">
-          <ThemeSelector className="relative z-10 mr-5" />
-          <Button
-            variant="secondary"
-            EndIcon={GitHubIcon}
-            endIconClassName="fill-slate-800 dark:fill-slate-200"
-            onClick={() => router.push("https://github.com/formbricks/formbricks")}>
-            View on Github
-          </Button>
-          <Button variant="highlight" className="ml-2" onClick={() => router.push("/get-started")}>
-            Get started
-          </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-slate-100 rounded-lg bg-slate-200 shadow-lg ring-1 ring-black ring-opacity-5 dark:divide-slate-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-slate-400 hover:bg-slate-100 hover:text-slate-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>
-
-              <nav className="relative bg-slate-200 px-5 py-6 dark:bg-slate-800">
-                <div>
-                  <h4 className="mb-3 text-sm text-slate-900 dark:text-slate-300">Survey Creation</h4>
-                  {creation.map((brick) => (
-                    <Link
-                      key={brick.name}
-                      href={brick.href}
-                      className={clsx(
-                        brick.status ? "cursor-pointer" : "cursor-default",
-                        "-m-3 flex items-start rounded-lg p-3 py-3"
-                      )}>
-                      <div
-                        className={clsx(
-                          brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
-                          "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
-                        )}>
-                        <brick.icon className="h-6 w-6" aria-hidden="true" />
-                      </div>
-                      <div className="ml-4">
-                        <p
-                          className={clsx(
-                            brick.status
-                              ? "text-slate-900 dark:text-slate-200"
-                              : "text-slate-400 dark:text-slate-500",
-                            "text-lg font-semibold"
-                          )}>
-                          {brick.name}
-                        </p>
-                        <p
-                          className={clsx(
-                            brick.status
-                              ? "text-slate-900 dark:text-slate-400"
-                              : "text-slate-400 dark:text-slate-600",
-                            "text-sm"
-                          )}>
-                          {brick.description}
-                        </p>
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-                <div>
-                  <h4 className="mt-8 mb-3 text-sm text-slate-900 dark:text-slate-300">Data Pipelines</h4>
-                  {pipes.map((brick) => (
-                    <Link
-                      key={brick.name}
-                      href={brick.href}
-                      className={clsx(
-                        brick.status ? "cursor-pointer" : "cursor-default",
-                        "-m-3 flex items-start rounded-lg p-3 py-3"
-                      )}>
-                      <div
-                        className={clsx(
-                          brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
-                          "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
-                        )}>
-                        <brick.icon className="h-6 w-6" aria-hidden="true" />
-                      </div>
-                      <div className="ml-4">
-                        <p
-                          className={clsx(
-                            brick.status
-                              ? "text-slate-900 dark:text-slate-200"
-                              : "text-slate-400 dark:text-slate-500",
-                            "text-lg font-semibold"
-                          )}>
-                          {brick.name}
-                        </p>
-                        <p
-                          className={clsx(
-                            brick.status
-                              ? "text-slate-900 dark:text-slate-400"
-                              : "text-slate-400 dark:text-slate-600",
-                            "text-sm"
-                          )}>
-                          {brick.description}
-                        </p>
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-                <div>
-                  <h4 className="mt-8 mb-3 text-sm text-slate-900 dark:text-slate-300">Data Insights</h4>
-                  {insights.map((brick) => (
-                    <Link
-                      key={brick.name}
-                      href={brick.href}
-                      className={clsx(
-                        brick.status ? "cursor-pointer" : "cursor-default",
-                        "-m-3 flex items-start rounded-lg p-3 py-3"
-                      )}>
-                      <div
-                        className={clsx(
-                          brick.status ? "text-brand-dark dark:text-brand-light" : "text-slate-500",
-                          "flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md sm:h-12 sm:w-12"
-                        )}>
-                        <brick.icon className="h-6 w-6" aria-hidden="true" />
-                      </div>
-                      <div className="ml-4">
-                        <p
-                          className={clsx(
-                            brick.status
-                              ? "text-slate-900 dark:text-slate-200"
-                              : "text-slate-400 dark:text-slate-500",
-                            "text-lg font-semibold"
-                          )}>
-                          {brick.name}
-                        </p>
-                        <p
-                          className={clsx(
-                            brick.status
-                              ? "text-slate-900 dark:text-slate-400"
-                              : "text-slate-400 dark:text-slate-600",
-                            "text-sm"
-                          )}>
-                          {brick.description}
-                        </p>
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-              </nav>
-            </div>
-            <div className="px-5 py-6">
-              <div className="grid grid-cols-3 text-center text-sm font-medium text-slate-900 hover:text-slate-700 dark:text-slate-200 sm:text-base">
-                <Link href="/community">Community</Link>
-
-                <Link href="/blog">Blog</Link>
-
-                <Link href="/docs">Documentation</Link>
-              </div>
-              <div className="mt-6">
-                <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("/get-started")}
-                  className="mt-3 flex w-full justify-center">
-                  Get started
-                </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/Hero.jsx b/apps/formbricks-com/components/shared/Hero.jsx
deleted file mode 100644
index 5569671df9..0000000000
--- a/apps/formbricks-com/components/shared/Hero.jsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { Fragment } from "react";
-import Image from "next/image";
-import clsx from "clsx";
-import Highlight, { defaultProps } from "prism-react-renderer";
-
-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";
-
-const codeLanguage = "javascript";
-const code = `export default {
-  strategy: 'predictive',
-  engine: {
-    cpus: 12,
-    backups: ['./storage/cache.wtf'],
-  },
-}`;
-
-const tabs = [
-  { name: "cache-advance.config.js", isActive: true },
-  { name: "package.json", isActive: false },
-];
-
-function TrafficLightsIcon(props) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 42 10" fill="none" {...props}>
-      <circle cx="5" cy="5" r="4.5" />
-      <circle cx="21" cy="5" r="4.5" />
-      <circle cx="37" cy="5" r="4.5" />
-    </svg>
-  );
-}
-
-export function Hero() {
-  return (
-    <div className="overflow-hidden bg-slate-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
-      <div className="py-16 sm:px-2 lg:relative lg:py-20 lg:px-0">
-        <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-y-16 gap-x-8 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
-          <div className="relative z-10 md:text-center lg:text-left">
-            <Image
-              className="absolute bottom-full right-full -mr-72 -mb-56 opacity-50"
-              src={blurCyanImage}
-              alt=""
-              width={530}
-              height={530}
-              unoptimized
-              priority
-            />
-            <div className="relative">
-              <p className="inline bg-gradient-to-r from-indigo-200 via-slate-400 to-indigo-200 bg-clip-text font-display text-5xl tracking-tight text-transparent">
-                Never miss the cache again.
-              </p>
-              <p className="mt-3 text-2xl tracking-tight text-slate-400">
-                Cache every single thing your app could ever do ahead of time, so your code never even has to
-                run at all.
-              </p>
-              <div className="mt-8 flex gap-4 md:justify-center lg:justify-start">
-                <Button href="/">Get started</Button>
-                <Button href="/" variant="secondary">
-                  View on GitHub
-                </Button>
-              </div>
-            </div>
-          </div>
-          <div className="relative lg:static xl:pl-10">
-            <div className="absolute inset-x-[-50vw] -top-32 -bottom-48 [mask-image:linear-gradient(transparent,white,white)] dark:[mask-image:linear-gradient(transparent,white,transparent)] lg:left-[calc(50%+14rem)] lg:right-0 lg:-top-32 lg:-bottom-32 lg:[mask-image:none] lg:dark:[mask-image:linear-gradient(white,white,transparent)]">
-              <HeroBackground className="absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 lg:left-0 lg:translate-x-0 lg:translate-y-[-60%]" />
-            </div>
-            <div className="relative">
-              <Image
-                className="absolute -top-64 -right-64"
-                src={blurCyanImage}
-                alt=""
-                width={530}
-                height={530}
-                unoptimized
-                priority
-              />
-              <Image
-                className="absolute -bottom-40 -right-44"
-                src={blurIndigoImage}
-                alt=""
-                width={567}
-                height={567}
-                unoptimized
-                priority
-              />
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-slate-300 via-slate-300/70 to-slate-300 opacity-10 blur-lg" />
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-slate-300 via-slate-300/70 to-slate-300 opacity-10" />
-              <div className="relative rounded-2xl bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
-                <div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-slate-300/0 via-slate-300/70 to-slate-300/0" />
-                <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-slate-400/0 via-slate-400 to-slate-400/0" />
-                <div className="pl-4 pt-4">
-                  <TrafficLightsIcon className="h-2.5 w-auto stroke-slate-500/30" />
-                  <div className="mt-4 flex space-x-2 text-xs">
-                    {tabs.map((tab) => (
-                      <div
-                        key={tab.name}
-                        className={clsx(
-                          "flex h-6 rounded-full",
-                          tab.isActive
-                            ? "bg-gradient-to-r from-slate-400/30 via-slate-400 to-slate-400/30 p-px font-medium text-slate-300"
-                            : "text-slate-500"
-                        )}>
-                        <div
-                          className={clsx(
-                            "flex items-center rounded-full px-2.5",
-                            tab.isActive && "bg-slate-800"
-                          )}>
-                          {tab.name}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                  <div className="mt-6 flex items-start px-1 text-sm">
-                    <div
-                      aria-hidden="true"
-                      className="select-none border-r border-slate-300/5 pr-4 font-mono text-slate-600">
-                      {Array.from({
-                        length: code.split("\n").length,
-                      }).map((_, index) => (
-                        <Fragment key={index}>
-                          {(index + 1).toString().padStart(2, "0")}
-                          <br />
-                        </Fragment>
-                      ))}
-                    </div>
-                    <Highlight {...defaultProps} code={code} language={codeLanguage} theme={undefined}>
-                      {({ className, style, tokens, getLineProps, getTokenProps }) => (
-                        <pre className={clsx(className, "flex overflow-x-auto pb-6")} style={style}>
-                          <code className="px-4">
-                            {tokens.map((line, lineIndex) => (
-                              <div key={lineIndex} {...getLineProps({ line })}>
-                                {line.map((token, tokenIndex) => (
-                                  <span key={tokenIndex} {...getTokenProps({ token })} />
-                                ))}
-                              </div>
-                            ))}
-                          </code>
-                        </pre>
-                      )}
-                    </Highlight>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/formbricks-com/components/shared/HeroBackground.jsx b/apps/formbricks-com/components/shared/HeroBackground.jsx
deleted file mode 100644
index 486936623e..0000000000
--- a/apps/formbricks-com/components/shared/HeroBackground.jsx
+++ /dev/null
@@ -1,188 +0,0 @@
-import { useId } from 'react'
-
-export function HeroBackground(props) {
-  let id = useId()
-
-  return (
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 668 1069"
-      width={668}
-      height={1069}
-      fill="none"
-      {...props}
-    >
-      <defs>
-        <clipPath id={`${id}-clip-path`}>
-          <path
-            fill="#fff"
-            transform="rotate(-180 334 534.4)"
-            d="M0 0h668v1068.8H0z"
-          />
-        </clipPath>
-      </defs>
-      <g opacity=".4" clipPath={`url(#${id}-clip-path)`} strokeWidth={4}>
-        <path
-          opacity=".3"
-          d="M584.5 770.4v-474M484.5 770.4v-474M384.5 770.4v-474M283.5 769.4v-474M183.5 768.4v-474M83.5 767.4v-474"
-          stroke="#334155"
-        />
-        <path
-          d="M83.5 221.275v6.587a50.1 50.1 0 0 0 22.309 41.686l55.581 37.054a50.102 50.102 0 0 1 22.309 41.686v6.587M83.5 716.012v6.588a50.099 50.099 0 0 0 22.309 41.685l55.581 37.054a50.102 50.102 0 0 1 22.309 41.686v6.587M183.7 584.5v6.587a50.1 50.1 0 0 0 22.31 41.686l55.581 37.054a50.097 50.097 0 0 1 22.309 41.685v6.588M384.101 277.637v6.588a50.1 50.1 0 0 0 22.309 41.685l55.581 37.054a50.1 50.1 0 0 1 22.31 41.686v6.587M384.1 770.288v6.587a50.1 50.1 0 0 1-22.309 41.686l-55.581 37.054A50.099 50.099 0 0 0 283.9 897.3v6.588"
-          stroke="#334155"
-        />
-        <path
-          d="M384.1 770.288v6.587a50.1 50.1 0 0 1-22.309 41.686l-55.581 37.054A50.099 50.099 0 0 0 283.9 897.3v6.588M484.3 594.937v6.587a50.1 50.1 0 0 1-22.31 41.686l-55.581 37.054A50.1 50.1 0 0 0 384.1 721.95v6.587M484.3 872.575v6.587a50.1 50.1 0 0 1-22.31 41.686l-55.581 37.054a50.098 50.098 0 0 0-22.309 41.686v6.582M584.501 663.824v39.988a50.099 50.099 0 0 1-22.31 41.685l-55.581 37.054a50.102 50.102 0 0 0-22.309 41.686v6.587M283.899 945.637v6.588a50.1 50.1 0 0 1-22.309 41.685l-55.581 37.05a50.12 50.12 0 0 0-22.31 41.69v6.59M384.1 277.637c0 19.946 12.763 37.655 31.686 43.962l137.028 45.676c18.923 6.308 31.686 24.016 31.686 43.962M183.7 463.425v30.69c0 21.564 13.799 40.709 34.257 47.529l134.457 44.819c18.922 6.307 31.686 24.016 31.686 43.962M83.5 102.288c0 19.515 13.554 36.412 32.604 40.645l235.391 52.309c19.05 4.234 32.605 21.13 32.605 40.646M83.5 463.425v-58.45M183.699 542.75V396.625M283.9 1068.8V945.637M83.5 363.225v-141.95M83.5 179.524v-77.237M83.5 60.537V0M384.1 630.425V277.637M484.301 830.824V594.937M584.5 1068.8V663.825M484.301 555.275V452.988M584.5 622.075V452.988M384.1 728.537v-56.362M384.1 1068.8v-20.88M384.1 1006.17V770.287M283.9 903.888V759.85M183.699 1066.71V891.362M83.5 1068.8V716.012M83.5 674.263V505.175"
-          stroke="#334155"
-        />
-        <circle
-          cx="83.5"
-          cy="384.1"
-          r="10.438"
-          transform="rotate(-180 83.5 384.1)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="83.5"
-          cy="200.399"
-          r="10.438"
-          transform="rotate(-180 83.5 200.399)"
-          stroke="#334155"
-        />
-        <circle
-          cx="83.5"
-          cy="81.412"
-          r="10.438"
-          transform="rotate(-180 83.5 81.412)"
-          stroke="#334155"
-        />
-        <circle
-          cx="183.699"
-          cy="375.75"
-          r="10.438"
-          transform="rotate(-180 183.699 375.75)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="183.699"
-          cy="563.625"
-          r="10.438"
-          transform="rotate(-180 183.699 563.625)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="384.1"
-          cy="651.3"
-          r="10.438"
-          transform="rotate(-180 384.1 651.3)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="484.301"
-          cy="574.062"
-          r="10.438"
-          transform="rotate(-180 484.301 574.062)"
-          fill="#0EA5E9"
-          fillOpacity=".42"
-          stroke="#0EA5E9"
-        />
-        <circle
-          cx="384.1"
-          cy="749.412"
-          r="10.438"
-          transform="rotate(-180 384.1 749.412)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="384.1"
-          cy="1027.05"
-          r="10.438"
-          transform="rotate(-180 384.1 1027.05)"
-          stroke="#334155"
-        />
-        <circle
-          cx="283.9"
-          cy="924.763"
-          r="10.438"
-          transform="rotate(-180 283.9 924.763)"
-          stroke="#334155"
-        />
-        <circle
-          cx="183.699"
-          cy="870.487"
-          r="10.438"
-          transform="rotate(-180 183.699 870.487)"
-          stroke="#334155"
-        />
-        <circle
-          cx="283.9"
-          cy="738.975"
-          r="10.438"
-          transform="rotate(-180 283.9 738.975)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="83.5"
-          cy="695.138"
-          r="10.438"
-          transform="rotate(-180 83.5 695.138)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="83.5"
-          cy="484.3"
-          r="10.438"
-          transform="rotate(-180 83.5 484.3)"
-          fill="#0EA5E9"
-          fillOpacity=".42"
-          stroke="#0EA5E9"
-        />
-        <circle
-          cx="484.301"
-          cy="432.112"
-          r="10.438"
-          transform="rotate(-180 484.301 432.112)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="584.5"
-          cy="432.112"
-          r="10.438"
-          transform="rotate(-180 584.5 432.112)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="584.5"
-          cy="642.95"
-          r="10.438"
-          transform="rotate(-180 584.5 642.95)"
-          fill="#1E293B"
-          stroke="#334155"
-        />
-        <circle
-          cx="484.301"
-          cy="851.699"
-          r="10.438"
-          transform="rotate(-180 484.301 851.699)"
-          stroke="#334155"
-        />
-        <circle
-          cx="384.1"
-          cy="256.763"
-          r="10.438"
-          transform="rotate(-180 384.1 256.763)"
-          stroke="#334155"
-        />
-      </g>
-    </svg>
-  )
-}
diff --git a/apps/formbricks-com/components/shared/LayoutPMF.tsx b/apps/formbricks-com/components/shared/LayoutPMF.tsx
deleted file mode 100644
index f6bd59a51f..0000000000
--- a/apps/formbricks-com/components/shared/LayoutPMF.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-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/Modal.tsx b/apps/formbricks-com/components/shared/Modal.tsx
index 560acff393..5e8f437b71 100644
--- a/apps/formbricks-com/components/shared/Modal.tsx
+++ b/apps/formbricks-com/components/shared/Modal.tsx
@@ -47,7 +47,7 @@ const Modal: React.FC<Modal> = ({
                 leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
                 <Dialog.Panel
                   className={clsx(
-                    "relative transform rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-xl ",
+                    "relative transform rounded-lg bg-slate-100 text-left shadow-xl transition-all dark:bg-slate-800 sm:my-8 sm:w-full sm:max-w-xl ",
                     `${noPadding ? "" : "px-4 pt-5 pb-4 sm:p-6"}`
                   )}>
                   <div className="absolute top-0 right-0 hidden pt-4 pr-4 sm:block">
diff --git a/apps/formbricks-com/images/clients/cal-logo-dark.svg b/apps/formbricks-com/images/clients/cal-logo-dark.svg
new file mode 100644
index 0000000000..e12d2875c3
--- /dev/null
+++ b/apps/formbricks-com/images/clients/cal-logo-dark.svg
@@ -0,0 +1,9 @@
+<svg width="101" height="22" viewBox="0 0 101 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0582 20.817C4.32115 20.817 0 16.2763 0 10.6704C0 5.04589 4.1005 0.467773 10.0582 0.467773C13.2209 0.467773 15.409 1.43945 17.1191 3.66311L14.3609 5.96151C13.2025 4.72822 11.805 4.11158 10.0582 4.11158C6.17833 4.11158 4.04533 7.08268 4.04533 10.6704C4.04533 14.2582 6.38059 17.1732 10.0582 17.1732C11.7866 17.1732 13.2577 16.5566 14.4161 15.3233L17.1375 17.7151C15.501 19.8453 13.2577 20.817 10.0582 20.817Z" fill="#fafafa"/>
+<path d="M29.0161 5.88601H32.7304V20.4612H29.0161V18.331C28.2438 19.8446 26.9566 20.8536 24.4927 20.8536C20.5577 20.8536 17.4133 17.4341 17.4133 13.2297C17.4133 9.02528 20.5577 5.60571 24.4927 5.60571C26.9383 5.60571 28.2438 6.61477 29.0161 8.12835V5.88601ZM29.1264 13.2297C29.1264 10.95 27.5634 9.06266 25.0995 9.06266C22.7274 9.06266 21.1828 10.9686 21.1828 13.2297C21.1828 15.4346 22.7274 17.3967 25.0995 17.3967C27.5451 17.3967 29.1264 15.4907 29.1264 13.2297Z" fill="#fafafa"/>
+<path d="M35.3599 0H39.0742V20.4427H35.3599V0Z" fill="#fafafa"/>
+<path d="M40.7291 18.5182C40.7291 17.3223 41.6853 16.3132 42.9908 16.3132C44.2964 16.3132 45.2158 17.3223 45.2158 18.5182C45.2158 19.7515 44.278 20.7605 42.9908 20.7605C41.7037 20.7605 40.7291 19.7515 40.7291 18.5182Z" fill="#fafafa"/>
+<path d="M59.4296 18.1068C58.0505 19.7885 55.9543 20.8536 53.4719 20.8536C49.0404 20.8536 45.7858 17.4341 45.7858 13.2297C45.7858 9.02528 49.0404 5.60571 53.4719 5.60571C55.8623 5.60571 57.9402 6.61477 59.3193 8.20309L56.4508 10.6136C55.7336 9.71667 54.7958 9.04397 53.4719 9.04397C51.0999 9.04397 49.5553 10.95 49.5553 13.211C49.5553 15.472 51.0999 17.378 53.4719 17.378C54.9062 17.378 55.8991 16.6306 56.6346 15.6215L59.4296 18.1068Z" fill="#fafafa"/>
+<path d="M59.7422 13.2297C59.7422 9.02528 62.9968 5.60571 67.4283 5.60571C71.8598 5.60571 75.1144 9.02528 75.1144 13.2297C75.1144 17.4341 71.8598 20.8536 67.4283 20.8536C62.9968 20.8349 59.7422 17.4341 59.7422 13.2297ZM71.3449 13.2297C71.3449 10.95 69.8003 9.06266 67.4283 9.06266C65.0563 9.04397 63.5117 10.95 63.5117 13.2297C63.5117 15.4907 65.0563 17.3967 67.4283 17.3967C69.8003 17.3967 71.3449 15.4907 71.3449 13.2297Z" fill="#fafafa"/>
+<path d="M100.232 11.5482V20.4428H96.518V12.4638C96.518 9.94119 95.3412 8.85739 93.576 8.85739C91.921 8.85739 90.7442 9.67958 90.7442 12.4638V20.4428H87.0299V12.4638C87.0299 9.94119 85.8346 8.85739 84.0878 8.85739C82.4329 8.85739 80.9802 9.67958 80.9802 12.4638V20.4428H77.2659V5.8676H80.9802V7.88571C81.7525 6.31607 83.15 5.53125 85.3014 5.53125C87.3425 5.53125 89.0525 6.5403 89.9903 8.24074C90.9281 6.50293 92.3072 5.53125 94.8079 5.53125C97.8603 5.54994 100.232 7.86702 100.232 11.5482Z" fill="#fafafa"/>
+</svg>
diff --git a/apps/formbricks-com/images/clients/cal-logo-light.svg b/apps/formbricks-com/images/clients/cal-logo-light.svg
new file mode 100644
index 0000000000..bccfe813ef
--- /dev/null
+++ b/apps/formbricks-com/images/clients/cal-logo-light.svg
@@ -0,0 +1,9 @@
+<svg width="101" height="22" viewBox="0 0 101 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0582 20.817C4.32115 20.817 0 16.2763 0 10.6704C0 5.04589 4.1005 0.467773 10.0582 0.467773C13.2209 0.467773 15.409 1.43945 17.1191 3.66311L14.3609 5.96151C13.2025 4.72822 11.805 4.11158 10.0582 4.11158C6.17833 4.11158 4.04533 7.08268 4.04533 10.6704C4.04533 14.2582 6.38059 17.1732 10.0582 17.1732C11.7866 17.1732 13.2577 16.5566 14.4161 15.3233L17.1375 17.7151C15.501 19.8453 13.2577 20.817 10.0582 20.817Z" fill="#292929"/>
+<path d="M29.0161 5.88601H32.7304V20.4612H29.0161V18.331C28.2438 19.8446 26.9566 20.8536 24.4927 20.8536C20.5577 20.8536 17.4133 17.4341 17.4133 13.2297C17.4133 9.02528 20.5577 5.60571 24.4927 5.60571C26.9383 5.60571 28.2438 6.61477 29.0161 8.12835V5.88601ZM29.1264 13.2297C29.1264 10.95 27.5634 9.06266 25.0995 9.06266C22.7274 9.06266 21.1828 10.9686 21.1828 13.2297C21.1828 15.4346 22.7274 17.3967 25.0995 17.3967C27.5451 17.3967 29.1264 15.4907 29.1264 13.2297Z" fill="#292929"/>
+<path d="M35.3599 0H39.0742V20.4427H35.3599V0Z" fill="#292929"/>
+<path d="M40.7291 18.5182C40.7291 17.3223 41.6853 16.3132 42.9908 16.3132C44.2964 16.3132 45.2158 17.3223 45.2158 18.5182C45.2158 19.7515 44.278 20.7605 42.9908 20.7605C41.7037 20.7605 40.7291 19.7515 40.7291 18.5182Z" fill="#292929"/>
+<path d="M59.4296 18.1068C58.0505 19.7885 55.9543 20.8536 53.4719 20.8536C49.0404 20.8536 45.7858 17.4341 45.7858 13.2297C45.7858 9.02528 49.0404 5.60571 53.4719 5.60571C55.8623 5.60571 57.9402 6.61477 59.3193 8.20309L56.4508 10.6136C55.7336 9.71667 54.7958 9.04397 53.4719 9.04397C51.0999 9.04397 49.5553 10.95 49.5553 13.211C49.5553 15.472 51.0999 17.378 53.4719 17.378C54.9062 17.378 55.8991 16.6306 56.6346 15.6215L59.4296 18.1068Z" fill="#292929"/>
+<path d="M59.7422 13.2297C59.7422 9.02528 62.9968 5.60571 67.4283 5.60571C71.8598 5.60571 75.1144 9.02528 75.1144 13.2297C75.1144 17.4341 71.8598 20.8536 67.4283 20.8536C62.9968 20.8349 59.7422 17.4341 59.7422 13.2297ZM71.3449 13.2297C71.3449 10.95 69.8003 9.06266 67.4283 9.06266C65.0563 9.04397 63.5117 10.95 63.5117 13.2297C63.5117 15.4907 65.0563 17.3967 67.4283 17.3967C69.8003 17.3967 71.3449 15.4907 71.3449 13.2297Z" fill="#292929"/>
+<path d="M100.232 11.5482V20.4428H96.518V12.4638C96.518 9.94119 95.3412 8.85739 93.576 8.85739C91.921 8.85739 90.7442 9.67958 90.7442 12.4638V20.4428H87.0299V12.4638C87.0299 9.94119 85.8346 8.85739 84.0878 8.85739C82.4329 8.85739 80.9802 9.67958 80.9802 12.4638V20.4428H77.2659V5.8676H80.9802V7.88571C81.7525 6.31607 83.15 5.53125 85.3014 5.53125C87.3425 5.53125 89.0525 6.5403 89.9903 8.24074C90.9281 6.50293 92.3072 5.53125 94.8079 5.53125C97.8603 5.54994 100.232 7.86702 100.232 11.5482Z" fill="#292929"/>
+</svg>
diff --git a/apps/formbricks-com/images/clients/crowd-logo-dark.svg b/apps/formbricks-com/images/clients/crowd-logo-dark.svg
new file mode 100644
index 0000000000..3b88ad8e08
--- /dev/null
+++ b/apps/formbricks-com/images/clients/crowd-logo-dark.svg
@@ -0,0 +1,15 @@
+<svg width="131" height="25" viewBox="0 0 131 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3019 1.04274C57.4086 1.06739 57.4915 1.15158 57.5145 1.25871L58.0944 3.96418C58.1278 4.12015 58.0256 4.27283 57.8686 4.30127L52.2078 5.32694C52.0202 5.36093 51.8536 5.2031 51.8773 5.01393L52.4746 0.247383C52.4954 0.0813042 52.6553 -0.030334 52.8183 0.00732826L57.3019 1.04274Z" fill="#E94F2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.9753 24.6259C90.9399 24.6259 92.6615 23.897 93.7118 22.6069C93.8882 22.3902 94.2929 22.4798 94.3217 22.7577L94.4476 23.9688C94.4625 24.1127 94.5838 24.222 94.7285 24.222H97.6708C97.8268 24.222 97.9532 24.0956 97.9532 23.9396V1.39179C97.9532 1.23582 97.8268 1.10938 97.6708 1.10938H94.4767C94.3207 1.10938 94.1943 1.23581 94.1943 1.39179V9.85822C94.1943 10.1411 93.7865 10.2737 93.5874 10.0726C92.5408 9.01541 90.9503 8.40974 89.1928 8.40974C88.3496 8.40974 87.5673 8.52313 86.8516 8.73751V12.95C87.577 12.2203 88.5844 11.7959 89.8141 11.7959C92.4546 11.7959 94.1632 13.7219 94.1632 16.4867C94.1632 19.2516 92.4546 21.1466 89.8141 21.1466C88.5844 21.1466 87.577 20.7288 86.8516 20.0064V24.3493C87.5069 24.5308 88.2167 24.6259 88.9753 24.6259ZM107.836 24.6259C111.709 24.6259 114.45 22.7405 115.219 19.5864C115.261 19.4139 115.127 19.2516 114.949 19.2516H111.992C111.867 19.2516 111.758 19.3344 111.715 19.4514C111.218 20.7852 109.883 21.5193 107.898 21.5193C105.48 21.5193 104.066 20.2572 103.712 17.7604C103.688 17.5949 103.819 17.4494 103.986 17.4489L114.948 17.4195C115.104 17.419 115.23 17.2927 115.23 17.1371V16.2693C115.23 11.4852 112.31 8.40974 107.712 8.40974C103.208 8.40974 100.07 11.7337 100.07 16.5489C100.07 21.3019 103.27 24.6259 107.836 24.6259ZM107.743 11.5163C109.908 11.5163 111.337 12.7904 111.462 14.744C111.472 14.8996 111.345 15.0267 111.189 15.0267H104.099C103.925 15.0267 103.792 14.87 103.828 14.6999C104.274 12.6132 105.615 11.5163 107.743 11.5163ZM124.813 24.0483C124.769 24.1535 124.667 24.222 124.553 24.222H121.205C121.089 24.222 120.985 24.1514 120.942 24.0438L115.078 9.26229C115.004 9.07689 115.141 8.87572 115.34 8.87572H118.768C118.885 8.87572 118.99 8.94832 119.032 9.05808L121.634 15.9276C122.045 17.0812 122.406 18.1365 122.664 18.9692C122.753 19.2573 123.25 19.2574 123.341 18.9699C123.618 18.0918 124.004 17.0229 124.43 15.9276L127.155 9.05405C127.198 8.94641 127.302 8.87572 127.418 8.87572H130.717C130.918 8.87572 131.055 9.0808 130.977 9.26683L124.813 24.0483Z" fill="url(#paint0_linear_470_15640)"/>
+<path d="M0 16.5178C0 21.3951 3.04441 24.6259 7.70422 24.6259C11.5916 24.6259 14.5143 22.3166 15.1113 18.9172C15.1408 18.7493 15.0087 18.5992 14.8383 18.5992H11.5614C11.4309 18.5992 11.3183 18.6893 11.2808 18.8143C10.8175 20.3562 9.51661 21.2087 7.70422 21.2087C5.28112 21.2087 3.78998 19.4069 3.78998 16.5178C3.78998 13.6287 5.40538 11.7959 7.82848 11.7959C9.55525 11.7959 10.797 12.6233 11.2802 14.2235C11.3177 14.3476 11.4298 14.4364 11.5594 14.4364H14.8139C14.982 14.4364 15.1133 14.2901 15.0884 14.1238C14.5611 10.6088 11.7475 8.40974 7.67315 8.40974C3.1376 8.40974 0 11.7648 0 16.5178Z" fill="white"/>
+<path d="M26.6791 9.03409C26.6791 8.9045 26.591 8.791 26.4645 8.7628C25.9341 8.64456 25.4678 8.59613 25.0016 8.59613C23.4122 8.59613 22.1775 9.21215 21.3988 10.1982C21.2177 10.4275 20.7605 10.3376 20.7322 10.0468L20.6462 9.16187C20.6321 9.01717 20.5105 8.90679 20.3651 8.90679H17.3312C17.1753 8.90679 17.0488 9.03323 17.0488 9.1892V23.9396C17.0488 24.0956 17.1753 24.222 17.3312 24.222H20.5564C20.7124 24.222 20.8388 24.0956 20.8388 23.9396V16.7663C20.8388 13.7841 22.5474 12.324 25.2812 12.324H26.3967C26.5527 12.324 26.6791 12.1975 26.6791 12.0416V9.03409Z" fill="white"/>
+<path d="M26.8958 16.5178C26.8958 21.3019 30.3441 24.5948 35.0971 24.5948C39.8501 24.5948 43.2984 21.3019 43.2984 16.5178C43.2984 11.7337 39.8501 8.44081 35.0971 8.44081C30.3441 8.44081 26.8958 11.7337 26.8958 16.5178ZM30.6858 16.5178C30.6858 13.7219 32.4876 11.8269 35.0971 11.8269C37.7066 11.8269 39.5084 13.7219 39.5084 16.5178C39.5084 19.3137 37.7066 21.2087 35.0971 21.2087C32.4876 21.2087 30.6858 19.3137 30.6858 16.5178Z" fill="white"/>
+<path d="M73.9832 24.6259C75.9478 24.6259 77.6694 23.897 78.7197 22.6069C78.8961 22.3902 79.3008 22.4798 79.3296 22.7577L79.4555 23.9688C79.4704 24.1127 79.5917 24.222 79.7364 24.222H82.6787C82.8347 24.222 82.9611 24.0956 82.9611 23.9396V1.39179C82.9611 1.23582 82.8347 1.10938 82.6787 1.10938H79.4846C79.3286 1.10938 79.2022 1.23582 79.2022 1.39179V9.85822C79.2022 10.1412 78.7944 10.2737 78.5953 10.0726C77.5487 9.01541 75.9582 8.40974 74.2007 8.40974C69.5719 8.40974 66.776 11.8269 66.776 16.611C66.776 21.364 69.5408 24.6259 73.9832 24.6259ZM74.822 21.1466C72.1814 21.1466 70.566 19.2205 70.566 16.4867C70.566 13.753 72.1814 11.7959 74.822 11.7959C77.4625 11.7959 79.1711 13.7219 79.1711 16.4867C79.1711 19.2516 77.4625 21.1466 74.822 21.1466Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.4678 12.2829C44.2996 12.3134 44.1968 12.4852 44.2495 12.6478L47.9349 24.0266C47.9727 24.1431 48.0812 24.222 48.2036 24.222H51.489C51.6117 24.222 51.7204 24.1427 51.7579 24.0259L53.8074 17.6362C54.2018 16.3586 54.4679 15.4493 54.6548 14.7703C54.7376 14.4693 55.2536 14.4796 55.3276 14.7829C55.5103 15.5325 55.7665 16.4696 56.1063 17.574L58.1562 24.0251C58.1934 24.1424 58.3023 24.222 58.4253 24.222H61.5591C61.6794 24.222 61.7866 24.1457 61.826 24.032L66.9426 9.25051C67.0061 9.06706 66.8699 8.87572 66.6758 8.87572H63.2728C63.1492 8.87572 63.0399 8.95614 63.0031 9.07419L61.0146 15.4616C60.8322 16.09 60.5571 17.0888 60.319 18.0264C60.2429 18.3259 59.7533 18.322 59.6794 18.022C59.4281 17.0024 59.1178 15.8698 58.9954 15.4616L57.0068 9.07419C56.9701 8.95614 56.8608 8.87572 56.7372 8.87572H53.2989C53.1762 8.87572 53.0675 8.955 53.03 9.07188L50.9805 15.4616C50.6605 16.4416 50.4306 17.1899 50.2328 17.9965C50.1587 18.2989 49.6913 18.2986 49.6241 17.9947C49.4268 17.1028 49.2162 16.2555 48.9923 15.4616L47.9044 11.9134C47.8625 11.7766 47.7248 11.6928 47.5841 11.7183L44.4678 12.2829Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_470_15640" x1="93.4995" y1="15.9976" x2="84.4995" y2="16.9976" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E94F2E"/>
+<stop offset="1" stop-color="#E94F2E" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/formbricks-com/images/clients/crowd-logo-light.svg b/apps/formbricks-com/images/clients/crowd-logo-light.svg
new file mode 100644
index 0000000000..0ba87c1306
--- /dev/null
+++ b/apps/formbricks-com/images/clients/crowd-logo-light.svg
@@ -0,0 +1,15 @@
+<svg width="131" height="24" viewBox="0 0 131 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57.3097 1.04274C57.4165 1.06739 57.4993 1.15158 57.5223 1.25872L58.1022 3.9642C58.1357 4.12016 58.0334 4.27285 57.8764 4.30128L52.2156 5.32696C52.028 5.36095 51.8614 5.20312 51.8851 5.01395L52.4824 0.247384C52.5032 0.0813045 52.6631 -0.0303341 52.8262 0.00732829L57.3097 1.04274Z" fill="#E94F2E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.9753 23.6416C90.9399 23.6416 92.6615 22.9127 93.7118 21.6226C93.8883 21.4059 94.2929 21.4955 94.3218 21.7735L94.4476 22.9845C94.4626 23.1284 94.5838 23.2378 94.7285 23.2378H97.6708C97.8268 23.2378 97.9532 23.1113 97.9532 22.9553V0.407414C97.9532 0.251441 97.8268 0.125 97.6708 0.125H94.4767C94.3208 0.125 94.1943 0.25144 94.1943 0.407413V8.87388C94.1943 9.15681 93.7865 9.28936 93.5874 9.0883C92.5408 8.03107 90.9503 7.4254 89.1928 7.4254C88.3496 7.4254 87.5673 7.53878 86.8516 7.75317V11.9657C87.577 11.236 88.5844 10.8115 89.8141 10.8115C92.4547 10.8115 94.1633 12.7376 94.1633 15.5024C94.1633 18.2673 92.4547 20.1623 89.8141 20.1623C88.5844 20.1623 87.577 19.7445 86.8516 19.0221V23.365C87.5069 23.5465 88.2167 23.6416 88.9753 23.6416ZM107.836 23.6416C111.709 23.6416 114.45 21.7562 115.219 18.6021C115.261 18.4296 115.127 18.2673 114.95 18.2673H111.992C111.867 18.2673 111.759 18.3501 111.715 18.4671C111.218 19.8009 109.883 20.5351 107.899 20.5351C105.481 20.5351 104.067 19.2729 103.712 16.7761C103.688 16.6106 103.819 16.4651 103.986 16.4646L114.948 16.4352C115.104 16.4347 115.23 16.3084 115.23 16.1527V15.285C115.23 10.5009 112.31 7.4254 107.712 7.4254C103.208 7.4254 100.07 10.7494 100.07 15.5646C100.07 20.3176 103.27 23.6416 107.836 23.6416ZM107.743 10.532C109.908 10.532 111.337 11.8061 111.462 13.7596C111.472 13.9153 111.345 14.0424 111.189 14.0424H104.099C103.925 14.0424 103.792 13.8857 103.828 13.7155C104.274 11.6288 105.615 10.532 107.743 10.532ZM124.813 23.064C124.77 23.1692 124.667 23.2378 124.553 23.2378H121.205C121.089 23.2378 120.985 23.1671 120.942 23.0595L115.078 8.27795C115.004 8.09255 115.141 7.89138 115.34 7.89138H118.768C118.885 7.89138 118.99 7.96398 119.032 8.07374L121.634 14.9433C122.045 16.0969 122.406 17.1521 122.664 17.9849C122.754 18.273 123.25 18.2731 123.341 17.9856C123.618 17.1075 124.004 16.0386 124.43 14.9433L127.155 8.06971C127.198 7.96207 127.302 7.89138 127.418 7.89138H130.717C130.918 7.89138 131.055 8.09646 130.977 8.28249L124.813 23.064Z" fill="url(#paint0_linear_470_15680)"/>
+<path d="M0 15.5335C0 20.4108 3.04442 23.6416 7.70425 23.6416C11.5916 23.6416 14.5144 21.3323 15.1114 17.9329C15.1408 17.765 15.0088 17.6149 14.8383 17.6149H11.5614C11.4309 17.6149 11.3184 17.705 11.2808 17.83C10.8176 19.3719 9.51665 20.2244 7.70425 20.2244C5.28114 20.2244 3.78999 18.4226 3.78999 15.5335C3.78999 12.6444 5.4054 10.8115 7.82851 10.8115C9.55529 10.8115 10.797 11.639 11.2803 13.2392C11.3177 13.3632 11.4298 13.4521 11.5594 13.4521H14.814C14.9821 13.4521 15.1134 13.3058 15.0884 13.1395C14.5611 9.62446 11.7476 7.4254 7.67318 7.4254C3.13762 7.4254 0 10.7805 0 15.5335Z" fill="#140505"/>
+<path d="M26.6792 8.04975C26.6792 7.92016 26.5911 7.80665 26.4646 7.77846C25.9342 7.66022 25.4679 7.61179 25.0017 7.61179C23.4123 7.61179 22.1776 8.22781 21.3989 9.21386C21.2178 9.44318 20.7606 9.35331 20.7323 9.06247L20.6462 8.17753C20.6322 8.03283 20.5105 7.92245 20.3652 7.92245H17.3313C17.1753 7.92245 17.0489 8.04889 17.0489 8.20486V22.9553C17.0489 23.1113 17.1753 23.2378 17.3313 23.2378H20.5565C20.7125 23.2378 20.8389 23.1113 20.8389 22.9553V15.782C20.8389 12.7997 22.5475 11.3397 25.2813 11.3397H26.3968C26.5528 11.3397 26.6792 11.2132 26.6792 11.0572V8.04975Z" fill="#140505"/>
+<path d="M26.8959 15.5335C26.8959 20.3176 30.3442 23.6105 35.0972 23.6105C39.8503 23.6105 43.2985 20.3176 43.2985 15.5335C43.2985 10.7494 39.8503 7.45646 35.0972 7.45646C30.3442 7.45646 26.8959 10.7494 26.8959 15.5335ZM30.6859 15.5335C30.6859 12.7376 32.4877 10.8426 35.0972 10.8426C37.7068 10.8426 39.5085 12.7376 39.5085 15.5335C39.5085 18.3294 37.7068 20.2244 35.0972 20.2244C32.4877 20.2244 30.6859 18.3294 30.6859 15.5335Z" fill="#140505"/>
+<path d="M73.9835 23.6416C75.9481 23.6416 77.6697 22.9127 78.72 21.6226C78.8964 21.4059 79.3011 21.4955 79.33 21.7735L79.4558 22.9845C79.4707 23.1284 79.592 23.2378 79.7367 23.2378H82.679C82.835 23.2378 82.9614 23.1113 82.9614 22.9553V0.407414C82.9614 0.251441 82.835 0.125 82.679 0.125H79.4849C79.329 0.125 79.2025 0.251441 79.2025 0.407414V8.87388C79.2025 9.15681 78.7947 9.28936 78.5957 9.0883C77.549 8.03107 75.9585 7.4254 74.201 7.4254C69.5722 7.4254 66.7763 10.8426 66.7763 15.6267C66.7763 20.3797 69.5411 23.6416 73.9835 23.6416ZM74.8223 20.1623C72.1817 20.1623 70.5663 18.2362 70.5663 15.5024C70.5663 12.7687 72.1817 10.8115 74.8223 10.8115C77.4629 10.8115 79.1714 12.7376 79.1714 15.5024C79.1714 18.2673 77.4629 20.1623 74.8223 20.1623Z" fill="#140505"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M44.468 11.2986C44.2998 11.3291 44.197 11.5008 44.2497 11.6635L47.9351 23.0424C47.9729 23.1588 48.0814 23.2378 48.2038 23.2378H51.4892C51.612 23.2378 51.7206 23.1585 51.7581 23.0416L53.8077 16.6519C54.202 15.3742 54.4682 14.465 54.655 13.7859C54.7379 13.4849 55.2539 13.4953 55.3278 13.7986C55.5105 14.5481 55.7667 15.4853 56.1065 16.5897L58.1564 23.0409C58.1937 23.1581 58.3025 23.2378 58.4256 23.2378H61.5593C61.6797 23.2378 61.7868 23.1615 61.8262 23.0477L66.9429 8.26618C67.0064 8.08272 66.8702 7.89138 66.676 7.89138H63.2731C63.1494 7.89138 63.0402 7.9718 63.0034 8.08985L61.0149 14.4773C60.8324 15.1057 60.5574 16.1045 60.3192 17.042C60.2432 17.3415 59.7535 17.3377 59.6796 17.0377C59.4283 16.0181 59.1181 14.8855 58.9956 14.4773L57.0071 8.08985C56.9703 7.9718 56.8611 7.89138 56.7374 7.89138H53.2992C53.1764 7.89138 53.0677 7.97066 53.0302 8.08754L50.9807 14.4773C50.6607 15.4573 50.4308 16.2056 50.233 17.0122C50.1589 17.3145 49.6915 17.3143 49.6243 17.0104C49.427 16.1185 49.2164 15.2712 48.9925 14.4773L47.9046 10.929C47.8627 10.7922 47.725 10.7084 47.5843 10.7339L44.468 11.2986Z" fill="#140505"/>
+<defs>
+<linearGradient id="paint0_linear_470_15680" x1="93.4995" y1="15.0132" x2="84.4995" y2="16.0133" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E94F2E"/>
+<stop offset="1" stop-color="#CA2400"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/apps/formbricks-com/images/clients/stack-ocean-dark.png b/apps/formbricks-com/images/clients/stack-ocean-dark.png
new file mode 100644
index 0000000000..aa66e7b633
Binary files /dev/null and b/apps/formbricks-com/images/clients/stack-ocean-dark.png differ
diff --git a/apps/formbricks-com/images/clients/stack-ocean-light.png b/apps/formbricks-com/images/clients/stack-ocean-light.png
new file mode 100644
index 0000000000..cce6c1b1bc
Binary files /dev/null and b/apps/formbricks-com/images/clients/stack-ocean-light.png differ
diff --git a/apps/formbricks-com/next.config.mjs b/apps/formbricks-com/next.config.mjs
index 459a7a9547..eb48896da5 100644
--- a/apps/formbricks-com/next.config.mjs
+++ b/apps/formbricks-com/next.config.mjs
@@ -75,6 +75,11 @@ const nextConfig = {
         destination: "/",
         permanent: false,
       },
+      {
+        source: "/signup",
+        destination: "/auth/signup",
+        permanent: false,
+      },
     ];
   },
 };
diff --git a/apps/formbricks-com/pages/community.tsx b/apps/formbricks-com/pages/community.tsx
index dee74a00c0..13132178a5 100644
--- a/apps/formbricks-com/pages/community.tsx
+++ b/apps/formbricks-com/pages/community.tsx
@@ -66,7 +66,7 @@ const CommunityPage = () => {
               Get support for anything your building - or just say hi 👋
             </p>
             <Button
-              className="mt-7 w-full justify-center font-bold"
+              className="mt-7 w-full justify-center"
               variant="highlight"
               onClick={() => router.push("/discord")}>
               Join Discord <ChatBubbleOvalLeftEllipsisIcon className="ml-1 inline h-5 w-5" />
diff --git a/apps/web/app/environments/[environmentId]/surveys/templates/TemplateList.tsx b/apps/web/app/environments/[environmentId]/surveys/templates/TemplateList.tsx
index 71407d5441..8d46f6738d 100644
--- a/apps/web/app/environments/[environmentId]/surveys/templates/TemplateList.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/templates/TemplateList.tsx
@@ -107,7 +107,7 @@ export default function TemplateList({ environmentId }: { environmentId: string
           </div>
         </main>
         <aside className="group relative hidden h-full flex-1 flex-shrink-0 overflow-hidden border-l border-slate-200 bg-slate-200 shadow-inner md:flex md:flex-col">
-          <Link href={`/environments/${environmentId}/settings/lookandfeel`} target="_blank">
+          <Link href={`/environments/${environmentId}/settings/lookandfeel`}>
             <div className="absolute left-6  top-6 flex items-center rounded bg-slate-50 px-2 py-0.5 text-xs text-slate-500 opacity-0 transition-all delay-1000 duration-500 hover:bg-slate-100 group-hover:opacity-100">
               Update brand color <PaintBrushIcon className="ml-1.5 h-3 w-3" />
             </div>
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index a3050ce04d..ff77b92fbf 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -4,4 +4,5 @@ const base = require("../../packages/tailwind-config/tailwind.config");
 module.exports = {
   ...base,
   content: [...base.content],
+  darkMode: "class", // Set dark mode to use the 'class' strategy
 };