diff --git a/apps/formbricks-com/components/docs/Layout.tsx b/apps/formbricks-com/components/docs/Layout.tsx
index 1d9464766b..9e876e3ad5 100644
--- a/apps/formbricks-com/components/docs/Layout.tsx
+++ b/apps/formbricks-com/components/docs/Layout.tsx
@@ -40,9 +40,9 @@ function Header({ navigation }: any) {
   return (
     <header
       className={clsx(
-        "sticky top-0 z-50 flex flex-wrap items-center justify-between bg-white px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8",
+        "sticky top-0 z-50 flex flex-wrap items-center justify-between bg-slate-100 px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 dark:shadow-none sm:px-6 lg:px-8",
         isScrolled
-          ? "dark:bg-slate-900/95 dark:backdrop-blur dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75"
+          ? "bg-slate-100/90 backdrop-blur dark:bg-slate-900/90 [@supports(backdrop-filter:blur(0))]:bg-slate-100/75 dark:[@supports(backdrop-filter:blur(0))]:bg-slate-900/75"
           : "dark:bg-transparent"
       )}>
       <div className="mr-6 flex lg:hidden">
@@ -50,27 +50,24 @@ function Header({ navigation }: any) {
       </div>
       <div className="relative flex flex-grow basis-0 items-center">
         <Link href="/" aria-label="Home page">
-          <Logomark className="h-9 w-9 lg:hidden" />
-          <FooterLogo className="hidden h-9 w-auto fill-slate-700 dark:fill-slate-100 lg:block" />
+          <FooterLogo className="h-8 w-auto sm:h-10" />
         </Link>
-        <div>
-          <Button
-            variant="secondary"
-            onClick={() => router.push("/")}
-            size="sm"
-            className="ml-10 hidden justify-center opacity-60 sm:flex">
-            &larr; Back to Mainpage
-          </Button>
-        </div>
       </div>
-      <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
+      {/* <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
         <Search />
-      </div>
-      <div className="relative flex basis-0 justify-end gap-6 sm:gap-8 md:flex-grow">
-        <ThemeSelector className="relative z-10" />
-        <Link href="https://github.com/formbricks/formbricks" className="group" aria-label="GitHub">
-          <GitHubIcon className="h-6 w-6 fill-slate-400 group-hover:fill-slate-500 dark:group-hover:fill-slate-300" />
-        </Link>
+      </div> */}
+      <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>
     </header>
   );
diff --git a/apps/formbricks-com/lib/docsNavigation.ts b/apps/formbricks-com/lib/docsNavigation.ts
index 44f409aef4..40c5450cc5 100644
--- a/apps/formbricks-com/lib/docsNavigation.ts
+++ b/apps/formbricks-com/lib/docsNavigation.ts
@@ -98,8 +98,8 @@ const navigation = [
     links: [
       { title: "Core API", href: "/docs/formbricks-hq/core-api" },
       { title: "Schema", href: "/docs/formbricks-hq/schema" },
-      { title: "Email Notifications", href: "/docs/formbricks-hq/email-notifications" },
-      { title: "Webhooks", href: "/docs/formbricks-hq/webhooks" },
+      { title: "Email Notifications (UI)", href: "/docs/formbricks-hq/ui/email-notifications" },
+      { title: "Webhooks (UI)", href: "/docs/formbricks-hq/ui/webhooks" },
     ],
   },
 ];
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/email-notifications/index.mdx b/apps/formbricks-com/pages/docs/formbricks-hq/email-notifications/index.mdx
deleted file mode 100644
index ba0eb82053..0000000000
--- a/apps/formbricks-com/pages/docs/formbricks-hq/email-notifications/index.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Layout } from "@/components/docs/Layout";
-import { Fence } from "@/components/shared/Fence";
-
-export const meta = {
-  title: "Email Notifications",
-};
-
-coming soon
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/index.mdx b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/index.mdx
new file mode 100644
index 0000000000..8860597823
--- /dev/null
+++ b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/index.mdx
@@ -0,0 +1,56 @@
+import { Layout } from "@/components/docs/Layout";
+import Image from "next/image";
+import Step1 from "./step-1-send-web-form-to-email-open-source.png";
+import Step2 from "./step-2-select-email-survey-response-to-email-send.png";
+import Step3 from "./step-3-add-email-to-send-form-data-to-open-source-alternative.png";
+import Step4 from "./step-4-set-active-to-send-survey-data-via-mail-to-myself-open-source.png";
+
+export const meta = {
+  title: "Email Notifications (UI) - Open-source Forms & Surveys",
+};
+
+You can send your form and survey data to your email address. To do so you can setup an Email Pipeline in your form settings.
+
+## Send form data to email
+
+### Setup
+
+You need to have a form created to add a data pipeline to it.
+
+### Step 1: Add Pipeline
+
+In the top bar, select “Pipelines”. Click on “Add Pipeline” in the top right corner:
+
+<Image src={Step1} className="rounded-lg" alt="Step 1 of sending form data to your email address" />
+
+### Step 2: Select type of Pipeline
+
+Select Email Notification. You can also set up a custom [Webhook](/docs/formbricks-hq/ui/webhooks).
+
+<Image src={Step2} className="rounded-lg" alt="Step 2 of best webform to email tool" />
+
+### Step 3: Configure settings
+
+To setup your Pipeline you need to fill out two fields:
+
+**Pipeline label:** Give it a name, this is just for you
+
+**Email address:** Type in your email address
+
+Then select “Create”.
+
+<Image src={Step3} className="rounded-lg" alt="Step 3 of how to send form to email" />
+
+### Step 4: Make sure it’s active
+
+Congrats, you have created your email pipeline! Make sure it is set to “**Active**”.
+
+<Image
+  src={Step4}
+  className="rounded-lg"
+  alt="Step 4 of sending survey data form open source survey to your email"
+/>
+
+From now on you will receive an email with the form content whenever someone submits your form. To deactive it, just turn it off. You can also delete it anytime.
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-1-send-web-form-to-email-open-source.png b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-1-send-web-form-to-email-open-source.png
new file mode 100644
index 0000000000..4fe6cc6ec7
Binary files /dev/null and b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-1-send-web-form-to-email-open-source.png differ
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-2-select-email-survey-response-to-email-send.png b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-2-select-email-survey-response-to-email-send.png
new file mode 100644
index 0000000000..dc82fad14c
Binary files /dev/null and b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-2-select-email-survey-response-to-email-send.png differ
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-3-add-email-to-send-form-data-to-open-source-alternative.png b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-3-add-email-to-send-form-data-to-open-source-alternative.png
new file mode 100644
index 0000000000..7e7f285c49
Binary files /dev/null and b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-3-add-email-to-send-form-data-to-open-source-alternative.png differ
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-4-set-active-to-send-survey-data-via-mail-to-myself-open-source.png b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-4-set-active-to-send-survey-data-via-mail-to-myself-open-source.png
new file mode 100644
index 0000000000..34b924049f
Binary files /dev/null and b/apps/formbricks-com/pages/docs/formbricks-hq/ui/email-notifications/step-4-set-active-to-send-survey-data-via-mail-to-myself-open-source.png differ
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/index.mdx b/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/index.mdx
new file mode 100644
index 0000000000..50f5565838
--- /dev/null
+++ b/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/index.mdx
@@ -0,0 +1,60 @@
+import { Layout } from "@/components/docs/Layout";
+import Image from "next/image";
+import Step1 from "../email-notifications/step-1-send-web-form-to-email-open-source.png";
+import Step2 from "../email-notifications/step-2-select-email-survey-response-to-email-send.png";
+import Step3 from "./step-3-send-form-data-webhook-open-source.png";
+import Step4 from "./step-4-webhook-survey-data-opensource.png";
+
+export const meta = {
+  title: "Webhooks (UI) - Open source Forms & Surveys",
+};
+
+You can send your form and survey data to a destination of your choice via a Webhook. To do so you can set up a Webhook Pipeline in your form settings.
+
+## Send form data with Webhook
+
+### Setup
+
+You need to have a form created to add a data pipeline to it.
+
+### Step 1: Add Pipeline
+
+In the top bar, select “Pipelines”. Click on “Add Pipeline” in the top right corner:
+
+<Image src={Step1} className="rounded-lg" alt="Step 1 of sending form data to your email address" />
+
+### Step 2: Select type of Pipeline
+
+Select Webhook. You can also set up an [Email Notification](/docs/formbricks-hq/ui/email-notifications).
+
+<Image src={Step2} className="rounded-lg" alt="Step 2 of best webform to email tool" />
+
+### Step 3: Configure settings
+
+To setup your Webhook you need to fill out three fields:
+
+**Webhook label:** Give it a name to know what this is for.
+
+**Endpoint URL:** Copy your endpoint URL here. This is where the webhook sends the form data to.
+
+**Secret**: To authenticate the data transmission, add a secret. You can generate one [here](https://www.lastpass.com/features/password-generator) or just type something in.
+
+<Image src={Step3} className="rounded-lg" alt="Step 3 of how to send form to email" />
+Then select “Create”.
+
+### Step 4: Make sure it’s active
+
+Congrats, you have created your webhook pipeline! Make sure it is set to “**Active**”.
+
+<Image
+  src={Step4}
+  className="rounded-lg"
+  alt="Step 4 of sending survey data form open source survey to your email"
+/>
+
+From now on the webhook will be triggered whenever someone submits your form. All form data will be sent to the
+destination.
+
+To deactive it, just turn it off. You can also delete it anytime.
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>;
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/step-3-send-form-data-webhook-open-source.png b/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/step-3-send-form-data-webhook-open-source.png
new file mode 100644
index 0000000000..4b0a93ec09
Binary files /dev/null and b/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/step-3-send-form-data-webhook-open-source.png differ
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/step-4-webhook-survey-data-opensource.png b/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/step-4-webhook-survey-data-opensource.png
new file mode 100644
index 0000000000..f9f4e37943
Binary files /dev/null and b/apps/formbricks-com/pages/docs/formbricks-hq/ui/webhooks/step-4-webhook-survey-data-opensource.png differ
diff --git a/apps/formbricks-com/pages/docs/formbricks-hq/webhooks/index.mdx b/apps/formbricks-com/pages/docs/formbricks-hq/webhooks/index.mdx
deleted file mode 100644
index e85aba5a9b..0000000000
--- a/apps/formbricks-com/pages/docs/formbricks-hq/webhooks/index.mdx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Layout } from "@/components/docs/Layout";
-import { Fence } from "@/components/shared/Fence";
-
-export const meta = {
-  title: "Webhooks",
-};
-
-coming soon
-
-export default ({ children }) => <Layout meta={meta}>{children}</Layout>;