diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000000..271a0decf2
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,76 @@
+########################################################################
+# ------------ MANDATORY (CHANGE ACCORDING TO YOUR SETUP) ------------#
+########################################################################
+
+
+############
+#  Basics  #
+############
+
+NEXTAUTH_SECRET=RANDOM_STRING
+
+# Set this to your public-facing URL, e.g., https://example.com
+NEXTAUTH_URL=http://localhost:3000
+
+# This should always be localhost:3000 (or whatever port your app is running on)
+NEXTAUTH_URL_INTERNAL=http://localhost:3000
+
+DATABASE_URL='postgresql://postgres:postgres@localhost:5432/postgres?schema=public'
+
+# For Docker Compose Production Setup use this Database URL:
+# DATABASE_URL='postgresql://postgres:postgres@postgres:5432/formbricks?schema=public'
+
+################
+#  Mail Setup  #
+################
+
+# Necessary if email verification and password reset are enabled.
+# See optional configurations below if you want to disable these features.
+
+MAIL_FROM=noreply@example.com
+SMTP_HOST=localhost
+SMTP_PORT=1025
+SMTP_SECURE_ENABLED=0 # Enable for TLS (port 465)
+SMTP_USER=smtpUser
+SMTP_PASSWORD=smtpPassword
+
+
+########################################################################
+# ------------------------------ OPTIONAL -----------------------------#
+########################################################################
+
+# Uncomment the variables you would like to use and customize the values.
+
+#####################
+# Disable Features  #
+#####################
+
+# Email Verification. If you enable Email Verification you have to setup SMTP-Settings, too.
+# NEXT_PUBLIC_EMAIL_VERIFICATION_DISABLED=1
+
+# Password Reset. If you enable Password Reset functionality you have to setup SMTP-Settings, too.
+# NEXT_PUBLIC_PASSWORD_RESET_DISABLED=1
+
+# Signup. Disable the ability for new users to create an account.
+# NEXT_PUBLIC_SIGNUP_DISABLED=1
+
+##########
+# Other  #
+##########
+
+# Disable Sentry warning
+SENTRY_IGNORE_API_RESOLUTION_ERROR=1
+
+# Enable Sentry Error Tracking
+NEXT_PUBLIC_SENTRY_DSN=
+
+# Configure Github Login
+NEXT_PUBLIC_GITHUB_AUTH_ENABLED=0
+GITHUB_ID=
+GITHUB_SECRET=
+
+# Stripe Billing Variables
+NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID=
+NEXT_PUBLIC_STRIPE_PUBLIC_KEY=
+STRIPE_SECRET_KEY=
+STRIPE_WEBHOOK_SECRET=
\ No newline at end of file
diff --git a/apps/web/src/components/forms/feedback/FeedbackResults.tsx b/apps/web/src/components/forms/feedback/FeedbackResults.tsx
index 8b569b26ed..747f3c6089 100644
--- a/apps/web/src/components/forms/feedback/FeedbackResults.tsx
+++ b/apps/web/src/components/forms/feedback/FeedbackResults.tsx
@@ -101,7 +101,7 @@ export default function FeedbackResults() {
         </Dialog>
       </Transition.Root>
       <div>
-        <section aria-labelledby="products-heading" className="pt-6 pb-24">
+        <section aria-labelledby="products-heading" className="max-w-8xl mx-auto py-8 pt-6 pb-24">
           <div className="grid grid-cols-1 gap-x-8 gap-y-10 lg:grid-cols-4">
             <FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
 
diff --git a/apps/web/src/components/forms/feedback/SetupInstructions.tsx b/apps/web/src/components/forms/feedback/SetupInstructions.tsx
index 2049b28bf0..10f827b1e4 100644
--- a/apps/web/src/components/forms/feedback/SetupInstructions.tsx
+++ b/apps/web/src/components/forms/feedback/SetupInstructions.tsx
@@ -14,70 +14,16 @@ export default function SetupInstructions({}) {
 
   return (
     <div>
-      <div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
+      <div className="max-w-8xl mx-auto grid grid-cols-5 gap-16 py-8">
         <div className="col-span-3">
           <div>
             <div className="mb-6">
-              <h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
-              <p>You can install the Feedback Box with NPM and with a JavaScript embed:</p>
-            </div>
-            <div>
-              <h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
-              <ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
-                <li>Install Feedback Box with NPM</li>
-                <li>
-                  Set up the config file according to your needs.{" "}
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-brand-dark font-bold underline"
-                    href="https://formbricks.com/docs/best-practices/feedback-box">
-                    Read the docs
-                  </a>{" "}
-                  for more info.
-                </li>
-                <li>You&apos;re done! Your feedback will show up in the Results tab.</li>
-              </ol>
-              <h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
-              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
-                <pre>
-                  <code className="language-html whitespace-pre-wrap">{`npm install @formbricks/feedback`}</code>
-                </pre>
-              </div>
-              <h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
-              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
-                <pre>
-                  <code className="language-html whitespace-pre-wrap">{`config: {
-         hqUrl: "${window.location.protocol}//${window.location.host}",
-         formId: "${formId}",
-        containerId: "test-div",
-        contact: {
-          name: "Johannes",
-          position: "Co-Founder",
-          imgUrl: "https://avatars.githubusercontent.com/u/72809645?v=4",
-        },
-        customer: {
-          id: "uUid", // fill dynamically
-          name: "User", // fill dynamically
-          email: "test@cal.com", // fill dynamically
-        },
-        style: {
-          brandColor: "#0E1420",
-          headerBGColor: "#E5E7EB",
-          headerTitleColor: "#4B5563",
-          boxBGColor: "#F9FAFB",
-          textColor: "#374151",
-          buttonHoverColor: "#F3F4F6",
-        },
-      }`}</code>
-                </pre>
-              </div>
+              <h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guide</h2>
+              <p>You embed the Feedback Box with a JavaScript snippet:</p>
             </div>
 
-            <hr className="my-10 text-slate-800" />
-
             <div>
-              <h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
+              <h3 className="block text-xl font-semibold text-slate-800">How to</h3>
               <ol className="mt-2 list-decimal pl-4 leading-8 text-slate-700">
                 <li>Copy the Javascript snippet below into the HEAD of your HTML file.</li>
                 <li>Set up a button with the onClick handler below to let your users open the widget.</li>
@@ -102,17 +48,22 @@ export default function SetupInstructions({}) {
                   <pre>
                     <code className="language-html whitespace-pre-wrap">
                       {`<!--HTML header script -->
-<script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.1.5/dist/index.umd.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@formbricks/feedback@0.2" defer></script>
 
 <script>
-window.formbricks = {
-  config: {
-    hqUrl: "${window.location.protocol}//${window.location.host}",
-    formId: "${formId}",
-  },
-  ...window.formbricks,
-};
-</script>
+  window.formbricks = {
+      ...window.formbricks,
+      config: {
+        hqUrl: "https://app.formbricks.com",
+        formId: "YOUR FEEDBACK BOX ID HERE", // copy from Formbricks dashboard
+        contact: {
+          name: "Matti",
+          position: "Co-Founder",
+          imgUrl: "https://avatars.githubusercontent.com/u/675065?s=128&v=4",
+        },
+      },
+    }
+    </script>
 `}
                     </code>
                   </pre>
@@ -130,6 +81,17 @@ window.formbricks = {
                   </pre>
                 </div>
               </div>
+              <div className="mt-3">
+                <h4 className="my-2 block text-lg font-semibold text-slate-800">Read full manual</h4>
+
+                <Button
+                  variant="highlight"
+                  target="_blank"
+                  className="mt-2"
+                  href="https://formbricks.com/docs/best-practices/feedback-box">
+                  Feedback Box Docs
+                </Button>
+              </div>
             </div>
           </div>
         </div>
@@ -148,7 +110,7 @@ window.formbricks = {
               />
 
               <Button
-                variant="primary"
+                variant="highlight"
                 className="mt-2 w-full justify-center"
                 onClick={() => {
                   navigator.clipboard.writeText(formId);
@@ -164,8 +126,8 @@ window.formbricks = {
                 variant="secondary"
                 target="_blank"
                 className="mt-2 w-full justify-center"
-                onClick={() => router.push("https://formbricks.com/docs")}>
-                Docs
+                href="https://formbricks.com/docs/best-practices/feedback-box">
+                Documentation{" "}
               </Button>
             </div>
             <div className="mt-10">
@@ -175,7 +137,7 @@ window.formbricks = {
                 variant="secondary"
                 target="_blank"
                 className="bg-purple mt-2 w-full justify-center"
-                onClick={() => router.push("https://formbricks.com/discord")}>
+                href="https://formbricks.com/discord">
                 Join Discord
               </Button>
             </div>
diff --git a/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx b/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
index f42606935c..f216f134f8 100644
--- a/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
+++ b/apps/web/src/components/forms/pipelines/PipelinesOverview.tsx
@@ -140,7 +140,7 @@ export default function PipelinesOverview({}) {
     return <div>Error loading ressources. Maybe you don&lsquo;t have enough access rights</div>;
   }
   return (
-    <div className="mx-auto py-8">
+    <div className="max-w-8xl mx-auto py-8">
       <header className="mb-8">
         <div className="flex justify-between">
           <p className="text-slate-800">
diff --git a/apps/web/src/components/forms/pmf/OverviewResults.tsx b/apps/web/src/components/forms/pmf/OverviewResults.tsx
index 67224fafb9..70e9035ddf 100644
--- a/apps/web/src/components/forms/pmf/OverviewResults.tsx
+++ b/apps/web/src/components/forms/pmf/OverviewResults.tsx
@@ -57,7 +57,7 @@ export default function OverviewResults() {
   return (
     <div>
       <div>
-        <section aria-labelledby="filters" className="pt-6 pb-24">
+        <section aria-labelledby="filters" className="max-w-8xl mx-auto py-8 pt-6 pb-24 ">
           <div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
             <FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
 
diff --git a/apps/web/src/components/forms/pmf/PMFResults.tsx b/apps/web/src/components/forms/pmf/PMFResults.tsx
index 05443c4f02..e1d5bf3fc8 100644
--- a/apps/web/src/components/forms/pmf/PMFResults.tsx
+++ b/apps/web/src/components/forms/pmf/PMFResults.tsx
@@ -32,7 +32,7 @@ export default function PMFResults() {
   return (
     <div>
       <div>
-        <section aria-labelledby="filters" className="pt-6 pb-24">
+        <section aria-labelledby="filters" className="max-w-8xl mx-auto py-8 pt-6 pb-24">
           <div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
             <FilterNavigation submissions={submissions} setFilteredSubmissions={setFilteredSubmissions} />
 
diff --git a/apps/web/src/components/forms/pmf/SetupInstructions.tsx b/apps/web/src/components/forms/pmf/SetupInstructions.tsx
index fa8906498c..ba7d2ae3cc 100644
--- a/apps/web/src/components/forms/pmf/SetupInstructions.tsx
+++ b/apps/web/src/components/forms/pmf/SetupInstructions.tsx
@@ -14,54 +14,13 @@ export default function SetupInstructions({}) {
 
   return (
     <div>
-      <div className="grid max-w-6xl grid-cols-5 gap-16 py-4">
+      <div className="max-w-8xl mx-auto grid grid-cols-5 gap-16 py-8">
         <div className="col-span-3">
           <div>
             <div className="mb-6">
-              <h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guides</h2>
-              <p>You can install the PMF Survey with NPM and with a JavaScript embed:</p>
+              <h2 className="mb-3 text-3xl font-bold text-slate-800">Quick Start Guide</h2>
+              <p>You add the PMF Survey with a JavaScript embed:</p>
             </div>
-            <div>
-              <h3 className="block text-xl font-semibold text-slate-800">NPM Install</h3>
-              <ol className="my-2 list-decimal pl-4 leading-8 text-slate-700">
-                <li>Install PMF Survey Box with NPM</li>
-                <li>
-                  Set up the config file according to your needs.{" "}
-                  <a
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-brand-dark font-bold underline"
-                    href="https://formbricks.com/docs/best-practices/pmf-survey">
-                    Read the docs
-                  </a>{" "}
-                  for more info.
-                </li>
-                <li>You&apos;re done! Your submissions will show up in the Results tab.</li>
-              </ol>
-              <h4 className="my-2 block text-lg font-semibold text-slate-800">NPM Install</h4>
-              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
-                <pre>
-                  <code className="language-html whitespace-pre-wrap">{`npm install @formbricks/pmf`}</code>
-                </pre>
-              </div>
-              <h4 className="my-2 block text-lg font-semibold text-slate-800">Example config</h4>
-              <div className="col-span-3 rounded-md bg-black p-4 text-sm font-light text-slate-200">
-                <pre>
-                  <code className="language-html whitespace-pre-wrap">{`config: {
-        formbricksUrl: "${window.location.protocol}//${window.location.host}",
-        formId: "${formId}",
-        containerId: "formbricks",
-        customer: {
-          id: "uUid", // fill dynamically e.g. from session object
-          name: "User name", // fill dynamically 
-          email: "example@fmail.com", // fill dynamically 
-        },
-      }`}</code>
-                </pre>
-              </div>
-            </div>
-
-            <hr className="my-10 text-slate-800" />
 
             <div>
               <h3 className="block text-xl font-semibold text-slate-800">Javascript Embed</h3>
@@ -118,6 +77,17 @@ window.formbricks = {
                   </pre>
                 </div>
               </div>
+              <div className="mt-3">
+                <h4 className="my-2 block text-lg font-semibold text-slate-800">Read full manual</h4>
+
+                <Button
+                  variant="highlight"
+                  target="_blank"
+                  className="mt-2"
+                  href="https://formbricks.com/docs/best-practices/pmf-survey">
+                  PMF Survey Docs
+                </Button>
+              </div>
             </div>
           </div>
         </div>
@@ -152,8 +122,8 @@ window.formbricks = {
                 variant="secondary"
                 target="_blank"
                 className="mt-2 w-full justify-center"
-                onClick={() => router.push("https://formbricks.com/docs")}>
-                Docs
+                href="https://formbricks.com/docs/best-practices/pmf-survey">
+                Documentation
               </Button>
             </div>
             <div className="mt-10">
@@ -163,7 +133,7 @@ window.formbricks = {
                 variant="secondary"
                 target="_blank"
                 className="bg-purple mt-2 w-full justify-center"
-                onClick={() => router.push("https://formbricks.com/discord")}>
+                href="https://formbricks.com/discord">
                 Join Discord
               </Button>
             </div>
diff --git a/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx b/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
index 2520092d5c..2a6aff0848 100644
--- a/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
+++ b/apps/web/src/components/forms/pmf/SuperhumanApproach.tsx
@@ -54,7 +54,7 @@ export default function SegmentResults() {
   return (
     <div>
       <div>
-        <section aria-labelledby="filters" className="pt-6 pb-24">
+        <section aria-labelledby="filters" className="max-w-8xl mx-auto py-8">
           <div className="grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-4">
             <div>
               {/* Segments */}
@@ -95,7 +95,7 @@ export default function SegmentResults() {
 
             {/* Double down on what they love*/}
 
-            <div className="max-w-3xl lg:col-span-3">
+            <div className=" lg:col-span-3">
               <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
                 <div className="flex flex-col items-center justify-center rounded-lg bg-white p-2">
                   <h3 className="text-sm font-medium text-slate-800">Overall</h3>