#586: Add new Onboarding for new & existing users (#266)

* add new onboarding for new and existing Formbricks users * Add new personalized template view --------- Co-authored-by: Johannes <johannes@formbricks.com> Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
2025-12-30 10:19:51 -06:00 · 2023-05-03 14:00:11 +02:00
parent d66c417bab
commit 056ddff709
30 changed files with 873 additions and 130 deletions
--- a/apps/web/README.md
+++ b/apps/web/README.md
@@ -61,7 +61,7 @@ To get the project running locally on your machine you need to have the followin

   **You can now access the app on [https://localhost:3000](https://localhost:3000)**. You will be automatically redirected to the login. To use your local installation of formbricks, create a new account.

-   For viewing the confirmation email and other emails the system sends you, you can access mailhog at [https://localhost:8025](https://localhost:8025)
+   For viewing the confirmation email and other emails the system sends you, you can access mailhog at [http://localhost:8025](http://localhost:8025)

 ### Build

--- a/apps/web/app/HomeRedirect.tsx
+++ b/apps/web/app/HomeRedirect.tsx
@@ -1,22 +1,35 @@
 "use client";

+import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { fetcher } from "@formbricks/lib/fetcher";
+import type { Session } from "next-auth";
 import { signOut } from "next-auth/react";
 import { redirect } from "next/navigation";
 import { useEffect } from "react";
 import useSWR from "swr";
-import LoadingSpinner from "@/components/shared/LoadingSpinner";

-export function HomeRedirect() {
+interface HomeRedirectProps {
+  session: Session;
+}
+
+export function HomeRedirect({ session }: HomeRedirectProps) {
  const { data, error } = useSWR(`/api/v1/environments/find-first`, fetcher);

  useEffect(() => {
-    if (data && !error) {
-      return redirect(`/environments/${data.id}`);
-    } else if (error) {
-      console.error(error);
+    if (session) {
+      if (!session.user?.onboardingDisplayed) {
+        return redirect(`/onboarding`);
+      }
+
+      if (data && !error) {
+        return redirect(`/environments/${data.id}`);
+      } else if (error) {
+        console.error(error);
+      }
+    } else {
+      return redirect(`/auth/login`);
    }
-  }, [data, error]);
+  }, [data, error, session]);

  if (error) {
    setTimeout(() => {
--- a/apps/web/app/environments/[environmentId]/surveys/SurveyList.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/SurveyList.tsx
@@ -1,5 +1,6 @@
 "use client";

+import { Template } from "@/../../packages/types/templates";
 import DeleteDialog from "@/components/shared/DeleteDialog";
 import {
  DropdownMenu,
@@ -10,7 +11,8 @@ import {
 } from "@/components/shared/DropdownMenu";
 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import SurveyStatusIndicator from "@/components/shared/SurveyStatusIndicator";
-import { deleteSurvey, duplicateSurvey, useSurveys } from "@/lib/surveys/surveys";
+import { useProfile } from "@/lib/profile";
+import { createSurvey, deleteSurvey, useSurveys, duplicateSurvey } from "@/lib/surveys/surveys";
 import { Badge, ErrorComponent } from "@formbricks/ui";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import {
@@ -25,12 +27,15 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import toast from "react-hot-toast";
+import TemplateList from "./templates/TemplateList";

 export default function SurveysList({ environmentId }) {
  const router = useRouter();
  const { surveys, mutateSurveys, isLoadingSurveys, isErrorSurveys } = useSurveys(environmentId);
+  const { isLoadingProfile, isErrorProfile } = useProfile();

  const [isDeleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [isCreateSurveyLoading, setIsCreateSurveyLoading] = useState(false);

  const [activeSurvey, setActiveSurvey] = useState("" as any);
  const [activeSurveyIdx, setActiveSurveyIdx] = useState("" as any);
@@ -39,6 +44,17 @@ export default function SurveysList({ environmentId }) {
    router.push(`/environments/${environmentId}/surveys/templates`);
  };

+  const newSurveyFromTemplate = async (template: Template) => {
+    setIsCreateSurveyLoading(true);
+    try {
+      const survey = await createSurvey(environmentId, template.preset);
+      router.push(`/environments/${environmentId}/surveys/${survey.id}/edit`);
+    } catch (e) {
+      toast.error("An error occured creating a new survey");
+      setIsCreateSurveyLoading(false);
+    }
+  };
+
  const deleteSurveyAction = async (survey, surveyIdx) => {
    try {
      await deleteSurvey(environmentId, survey.id);
@@ -63,21 +79,45 @@ export default function SurveysList({ environmentId }) {
    }
  };

-  if (isLoadingSurveys) {
+  if (isLoadingSurveys || isLoadingProfile) {
    return <LoadingSpinner />;
  }

-  if (isErrorSurveys) {
+  if (isErrorSurveys || isErrorProfile) {
    return <ErrorComponent />;
  }

+  if (surveys.length === 0) {
+    return (
+      <div className="mx-auto flex w-full max-w-5xl flex-col py-24">
+        {isCreateSurveyLoading ? (
+          <LoadingSpinner />
+        ) : (
+          <>
+            <div className="px-7 pb-4">
+              <h1 className="text-3xl font-extrabold text-slate-700">
+                You&apos;re all set! Time to create your first survey.
+              </h1>
+            </div>
+            <TemplateList
+              environmentId={environmentId}
+              onTemplateClick={(template) => {
+                newSurveyFromTemplate(template);
+              }}
+            />
+          </>
+        )}
+      </div>
+    );
+  }
+
  return (
    <>
      <ul className="grid grid-cols-2 place-content-stretch gap-6 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-5 ">
        <button onClick={() => newSurvey()}>
          <li className="col-span-1 h-56">
            <div className="from-brand-light to-brand-dark delay-50 flex h-full items-center justify-center overflow-hidden rounded-md bg-gradient-to-b font-light text-white shadow transition ease-in-out hover:scale-105">
-              <div className="px-4 py-8 sm:p-14 xl:p-10">
+              <div id="main-cta" className="px-4 py-8 sm:p-14 xl:p-10">
                <PlusIcon className="stroke-thin mx-auto h-14 w-14" />
                Create Survey
              </div>
--- a/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/SurveyMenuBar.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/[surveyId]/edit/SurveyMenuBar.tsx
@@ -43,7 +43,12 @@ export default function SurveyMenuBar({
  return (
    <div className="border-b border-slate-200 bg-white px-5 py-3 sm:flex sm:items-center sm:justify-between">
      <div className="flex space-x-2 whitespace-nowrap">
-        <Button variant="minimal" className="px-0" onClick={() => router.back()}>
+        <Button
+          variant="minimal"
+          className="px-0"
+          onClick={() => {
+            router.back();
+          }}>
          <ArrowLeftIcon className="h-5 w-5 text-slate-700" />
        </Button>
        <Input
--- a/apps/web/app/environments/[environmentId]/surveys/page.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/page.tsx
@@ -1,11 +1,11 @@
-import SurveyList from "./SurveyList";
 import ContentWrapper from "@/components/shared/ContentWrapper";
 import WidgetStatusIndicator from "@/components/shared/WidgetStatusIndicator";
+import SurveysList from "./SurveyList";

 export default async function SurveysPage({ params }) {
  return (
    <ContentWrapper className="flex h-full flex-col justify-between">
-      <SurveyList environmentId={params.environmentId} />
+      <SurveysList environmentId={params.environmentId} />
      <WidgetStatusIndicator environmentId={params.environmentId} type="mini" />
    </ContentWrapper>
  );
--- a/apps/web/app/environments/[environmentId]/surveys/templates/TemplateList.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/templates/TemplateList.tsx
@@ -2,121 +2,125 @@

 import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { useProduct } from "@/lib/products/products";
+import { useProfile } from "@/lib/profile";
+import { replacePresetPlaceholders } from "@/lib/templates";
 import { cn } from "@formbricks/lib/cn";
 import type { Template } from "@formbricks/types/templates";
-import { PlusCircleIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
-import { useEffect, useState } from "react";
-import PreviewSurvey from "../PreviewSurvey";
-import TemplateMenuBar from "./TemplateMenuBar";
-import { templates, customSurvey } from "./templates";
-import { PaintBrushIcon } from "@heroicons/react/24/solid";
 import { ErrorComponent } from "@formbricks/ui";
-import { replacePresetPlaceholders } from "@/lib/templates";
+import { PlusCircleIcon } from "@heroicons/react/24/outline";
+import { SparklesIcon } from "@heroicons/react/24/solid";
+import { useEffect, useState } from "react";
+import { customSurvey, templates } from "./templates";

-export default function TemplateList({ environmentId }: { environmentId: string }) {
+type TemplateList = {
+  environmentId: string;
+  onTemplateClick: (template: Template) => void;
+};
+
+const ALL_CATEGORY_NAME = "All";
+const RECOMMENDED_CATEGORY_NAME = "For you";
+
+export default function TemplateList({ environmentId, onTemplateClick }: TemplateList) {
  const [activeTemplate, setActiveTemplate] = useState<Template | null>(null);

-  const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
-
  const { product, isLoadingProduct, isErrorProduct } = useProduct(environmentId);
-  const [selectedFilter, setSelectedFilter] = useState("All");
-  const categories = [
-    "All",
-    ...(Array.from(new Set(templates.map((template) => template.category))) as string[]),
-  ];
+  const { profile, isLoadingProfile, isErrorProfile } = useProfile();
+  const [selectedFilter, setSelectedFilter] = useState(ALL_CATEGORY_NAME);
+
+  const [categories, setCategories] = useState<Array<string>>([]);

  useEffect(() => {
    if (product && templates?.length) {
-      const newTemplate = replacePresetPlaceholders(templates[0], product);
-      setActiveTemplate(newTemplate);
-      setActiveQuestionId(newTemplate.preset.questions[0].id);
+      setActiveTemplate(null);
    }
  }, [product]);

-  if (isLoadingProduct) return <LoadingSpinner />;
-  if (isErrorProduct) return <ErrorComponent />;
+  useEffect(() => {
+    const defaultCategories = [
+      /* ALL_CATEGORY_NAME, */
+      ...(Array.from(new Set(templates.map((template) => template.category))) as string[]),
+    ];
+
+    const fullCategories = !!profile?.objective
+      ? [RECOMMENDED_CATEGORY_NAME, ...defaultCategories]
+      : defaultCategories;
+
+    setCategories(fullCategories);
+
+    const activeFilter = !!profile?.objective ? RECOMMENDED_CATEGORY_NAME : ALL_CATEGORY_NAME;
+    setSelectedFilter(activeFilter);
+  }, [profile]);
+
+  if (isLoadingProduct || isLoadingProfile) return <LoadingSpinner />;
+  if (isErrorProduct || isErrorProfile) return <ErrorComponent />;

  return (
-    <div className="flex h-full flex-col">
-      <TemplateMenuBar activeTemplate={activeTemplate} environmentId={environmentId} />
-      <div className="relative z-0 flex flex-1 overflow-hidden">
-        <main className="relative z-0 flex-1 overflow-y-auto px-8 py-6 focus:outline-none">
-          <div className="mb-6 flex space-x-2">
-            {categories.map((category) => (
-              <button
-                key={category}
-                type="button"
-                onClick={() => setSelectedFilter(category)}
-                className={cn(
-                  selectedFilter === category
-                    ? "text-brand-dark border-brand-dark font-semibold"
-                    : "border-slate-300 text-slate-700 hover:bg-slate-100",
-                  "rounded border  bg-slate-50 px-3 py-1 text-sm transition-all duration-150 "
-                )}>
-                {category}
-              </button>
-            ))}
-          </div>
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+    <main className="relative z-0 flex-1 overflow-y-auto px-8 py-6 focus:outline-none">
+      <div className="mb-6 flex flex-wrap space-x-2">
+        {categories.map((category) => (
+          <button
+            key={category}
+            type="button"
+            onClick={() => setSelectedFilter(category)}
+            className={cn(
+              selectedFilter === category
+                ? "text-brand-dark border-brand-dark font-semibold"
+                : "border-slate-300 text-slate-700 hover:bg-slate-100",
+              "mt-2 rounded  border bg-slate-50 px-3 py-1 text-sm transition-all duration-150 "
+            )}>
+            {category}
+            {category === RECOMMENDED_CATEGORY_NAME && <SparklesIcon className="ml-1 inline h-5 w-5" />}
+          </button>
+        ))}
+      </div>
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <button
+          type="button"
+          onClick={() => {
+            const newTemplate = replacePresetPlaceholders(customSurvey, product);
+            onTemplateClick(newTemplate);
+            setActiveTemplate(newTemplate);
+          }}
+          className={cn(
+            activeTemplate?.name === customSurvey.name
+              ? "ring-brand border-transparent ring-2"
+              : "hover:border-brand-dark  border-dashed border-slate-300",
+            "duration-120  group relative rounded-lg border-2  bg-transparent p-8 transition-colors duration-150"
+          )}>
+          <PlusCircleIcon className="text-brand-dark h-8 w-8 transition-all duration-150 group-hover:scale-110" />
+          <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700 ">{customSurvey.name}</h3>
+          <p className="text-left text-xs text-slate-600 ">{customSurvey.description}</p>
+        </button>
+        {templates
+          .filter(
+            (template) =>
+              selectedFilter === ALL_CATEGORY_NAME ||
+              template.category === selectedFilter ||
+              (selectedFilter === RECOMMENDED_CATEGORY_NAME &&
+                template.objectives?.includes(profile.objective))
+          )
+          .map((template: Template) => (
            <button
              type="button"
              onClick={() => {
-                const newTemplate = replacePresetPlaceholders(customSurvey, product);
+                const newTemplate = replacePresetPlaceholders(template, product);
+                onTemplateClick(newTemplate);
                setActiveTemplate(newTemplate);
-                setActiveQuestionId(newTemplate.preset.questions[0].id);
              }}
+              key={template.name}
              className={cn(
-                activeTemplate?.name === customSurvey.name
-                  ? "ring-brand border-transparent ring-2"
-                  : "hover:border-brand-dark  border-dashed border-slate-300",
-                "duration-120  group relative rounded-lg border-2  bg-transparent p-8 transition-colors duration-150"
+                activeTemplate?.name === template.name && "ring-brand ring-2",
+                "duration-120  group  relative rounded-lg bg-white p-6 shadow transition-all duration-150 hover:scale-105"
              )}>
-              <PlusCircleIcon className="text-brand-dark h-8 w-8 transition-all duration-150 group-hover:scale-110" />
-              <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700 ">{customSurvey.name}</h3>
-              <p className="text-left text-xs text-slate-600 ">{customSurvey.description}</p>
+              <div className="absolute right-6 top-6 rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs text-slate-500">
+                {template.category}
+              </div>
+              <template.icon className="h-8 w-8" />
+              <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{template.name}</h3>
+              <p className="text-left text-xs text-slate-600">{template.description}</p>
            </button>
-            {templates
-              .filter((template) => selectedFilter === "All" || template.category === selectedFilter)
-              .map((template: Template) => (
-                <button
-                  type="button"
-                  onClick={() => {
-                    const newTemplate = replacePresetPlaceholders(template, product);
-                    setActiveTemplate(newTemplate);
-                    setActiveQuestionId(newTemplate.preset.questions[0].id);
-                  }}
-                  key={template.name}
-                  className={cn(
-                    activeTemplate?.name === template.name && "ring-brand ring-2",
-                    "duration-120  group  relative rounded-lg bg-white p-6 shadow transition-all duration-150 hover:scale-105"
-                  )}>
-                  <div className="absolute right-6 top-6 rounded border border-slate-300 bg-slate-50 px-1.5 py-0.5 text-xs text-slate-500">
-                    {template.category}
-                  </div>
-                  <template.icon className="h-8 w-8" />
-                  <h3 className="text-md mb-1 mt-3 text-left font-bold text-slate-700">{template.name}</h3>
-                  <p className="text-left text-xs text-slate-600">{template.description}</p>
-                </button>
-              ))}
-          </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`}
-            className="absolute left-6 top-6 z-50 flex items-center rounded bg-slate-50 px-2 py-0.5 text-xs text-slate-500 opacity-0 transition-all duration-500 hover:scale-105 hover:bg-slate-100 group-hover:opacity-100">
-            Update brand color <PaintBrushIcon className="ml-1.5 h-3 w-3" />
-          </Link>
-          {activeTemplate && (
-            <PreviewSurvey
-              activeQuestionId={activeQuestionId}
-              questions={activeTemplate.preset.questions}
-              brandColor={product.brandColor}
-              setActiveQuestionId={setActiveQuestionId}
-            />
-          )}
-        </aside>
+          ))}
      </div>
-    </div>
+    </main>
  );
 }
--- a/apps/web/app/environments/[environmentId]/surveys/templates/page.tsx
+++ b/apps/web/app/environments/[environmentId]/surveys/templates/page.tsx
@@ -1,5 +1,64 @@
+"use client";
+
+import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import { useProduct } from "@/lib/products/products";
+import { replacePresetPlaceholders } from "@/lib/templates";
+import type { Template } from "@formbricks/types/templates";
+import { ErrorComponent } from "@formbricks/ui";
+import { PaintBrushIcon } from "@heroicons/react/24/solid";
+import Link from "next/link";
+import { useEffect, useState } from "react";
+import PreviewSurvey from "../PreviewSurvey";
 import TemplateList from "./TemplateList";
+import TemplateMenuBar from "./TemplateMenuBar";
+import { templates } from "./templates";

 export default function SurveyTemplatesPage({ params }) {
-  return <TemplateList environmentId={params.environmentId} />;
+  const environmentId = params.environmentId;
+  const [activeTemplate, setActiveTemplate] = useState<Template | null>(null);
+
+  const [activeQuestionId, setActiveQuestionId] = useState<string | null>(null);
+
+  const { product, isLoadingProduct, isErrorProduct } = useProduct(environmentId);
+
+  useEffect(() => {
+    if (product && templates?.length) {
+      const newTemplate = replacePresetPlaceholders(templates[0], product);
+      setActiveTemplate(newTemplate);
+      setActiveQuestionId(newTemplate.preset.questions[0].id);
+    }
+  }, [product]);
+
+  if (isLoadingProduct) return <LoadingSpinner />;
+  if (isErrorProduct) return <ErrorComponent />;
+
+  return (
+    <div className="flex h-full flex-col">
+      <TemplateMenuBar activeTemplate={activeTemplate} environmentId={environmentId} />
+      <div className="relative z-0 flex flex-1 overflow-hidden">
+        <TemplateList
+          environmentId={environmentId}
+          onTemplateClick={(template) => {
+            setActiveQuestionId(template.preset.questions[0].id);
+            setActiveTemplate(template);
+          }}
+        />
+        <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`}
+            className="absolute left-6 top-6 z-50 flex items-center rounded bg-slate-50 px-2 py-0.5 text-xs text-slate-500 opacity-0 transition-all duration-500 hover:scale-105 hover:bg-slate-100 group-hover:opacity-100">
+            Update brand color <PaintBrushIcon className="ml-1.5 h-3 w-3" />
+          </Link>
+          {activeTemplate && (
+            <PreviewSurvey
+              activeQuestionId={activeQuestionId}
+              questions={activeTemplate.preset.questions}
+              brandColor={product.brandColor}
+              setActiveQuestionId={setActiveQuestionId}
+            />
+          )}
+        </aside>
+      </div>
+    </div>
+  );
 }
--- a/apps/web/app/onboarding/Greeting.tsx
+++ b/apps/web/app/onboarding/Greeting.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { Button } from "@/../../packages/ui";
+import type { Session } from "next-auth";
+import Link from "next/link";
+
+type Greeting = {
+  next: () => void;
+  skip: () => void;
+  name: string;
+  session: Session | null;
+};
+
+const Greeting: React.FC<Greeting> = ({ next, skip, name, session }) => {
+  const legacyUser = !session ? false : new Date(session?.user?.createdAt) < new Date("2023-05-03T00:00:00"); // if user is created before onboarding deployment
+
+  return (
+    <div className="flex h-full w-full max-w-xl flex-col justify-around gap-8 px-8">
+      <div className="mt-auto h-1/2 space-y-6">
+        <div className="px-4">
+          <h1 className="pb-4 text-4xl font-bold text-slate-900">
+            👋 Hi, {name}! <br />
+            {legacyUser ? "Welcome back!" : "Welcome to Formbricks!"}
+          </h1>
+          <p className="text-xl text-slate-500">
+            {legacyUser ? "Let's customize your account." : "Let's finish setting up your account."}
+          </p>
+        </div>
+        <div className="flex justify-between">
+          <Button size="lg" variant="minimal" onClick={skip}>
+            I&apos;ll do it later
+          </Button>
+          <Button size="lg" variant="darkCTA" onClick={next}>
+            Begin (1 min)
+          </Button>
+        </div>
+      </div>
+      <div className="flex items-center justify-center text-xs text-slate-400">
+        <div className="pb-12 pt-8 text-center">
+          <p>Your answers will help us improve your experience and help others like you.</p>
+          <p>
+            <Link href="https://formbricks.com/privacy-policy" target="_blank" className="underline">
+              Click here
+            </Link>{" "}
+            to learn how we handle your data.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Greeting;
--- a/apps/web/app/onboarding/Objective.tsx
+++ b/apps/web/app/onboarding/Objective.tsx
@@ -0,0 +1,114 @@
+"use client";
+
+import { cn } from "@/../../packages/lib/cn";
+import { Objective } from "@/../../packages/types/templates";
+import { Button } from "@/../../packages/ui";
+import Headline from "@/components/preview/Headline";
+import Subheader from "@/components/preview/Subheader";
+import { useProfile } from "@/lib/profile";
+import { useProfileMutation } from "@/lib/profile/mutateProfile";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+
+type ObjectiveProps = {
+  next: () => void;
+  skip: () => void;
+};
+
+type ObjectiveChoice = {
+  label: string;
+  id: Objective;
+};
+
+const Objective: React.FC<ObjectiveProps> = ({ next, skip }) => {
+  const objectives: Array<ObjectiveChoice> = [
+    { label: "Increase conversion", id: "increase_conversion" },
+    { label: "Improve user retention", id: "improve_user_retention" },
+    { label: "Increase user adoption", id: "increase_user_adoption" },
+    { label: "Sharpen marketing messaging", id: "sharpen_marketing_messaging" },
+    { label: "Support sales", id: "support_sales" },
+    { label: "Other", id: "other" },
+  ];
+
+  const { profile } = useProfile();
+  const { triggerProfileMutate, isMutatingProfile } = useProfileMutation();
+
+  const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
+
+  const handleNextClick = async () => {
+    if (selectedChoice) {
+      const selectedObjective = objectives.find((objective) => objective.label === selectedChoice);
+      if (selectedObjective) {
+        try {
+          const updatedProfile = { ...profile, objective: selectedObjective.id };
+          await triggerProfileMutate(updatedProfile);
+        } catch (e) {
+          console.error(e);
+          toast.error("An error occured saving your settings");
+        }
+        next();
+      }
+    }
+  };
+
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-8 px-8">
+      <div className="px-4">
+        <Headline headline="What do you want to achieve?" questionId="none" />
+        <Subheader
+          subheader="We have 85+ templates, help us select the best for your need:"
+          questionId="none"
+        />
+        <div className="mt-4">
+          <fieldset>
+            <legend className="sr-only">Choices</legend>
+            <div className=" relative space-y-2 rounded-md">
+              {objectives.map((choice) => (
+                <label
+                  key={choice.id}
+                  className={cn(
+                    selectedChoice === choice.label
+                      ? "z-10 border-slate-400 bg-slate-100"
+                      : "border-gray-200",
+                    "relative flex cursor-pointer flex-col rounded-md border p-4 hover:bg-slate-100 focus:outline-none"
+                  )}>
+                  <span className="flex items-center text-sm">
+                    <input
+                      type="radio"
+                      id={choice.id}
+                      value={choice.label}
+                      checked={choice.label === selectedChoice}
+                      className="checked:text-brand-dark  focus:text-brand-dark  h-4 w-4 border border-gray-300 focus:ring-0 focus:ring-offset-0"
+                      aria-labelledby={`${choice.id}-label`}
+                      onChange={(e) => {
+                        setSelectedChoice(e.currentTarget.value);
+                      }}
+                    />
+                    <span id={`${choice.id}-label`} className="ml-3 font-medium">
+                      {choice.label}
+                    </span>
+                  </span>
+                </label>
+              ))}
+            </div>
+          </fieldset>
+        </div>
+      </div>
+      <div className="mb-24 flex justify-between">
+        <Button size="lg" className="text-slate-400" variant="minimal" onClick={skip}>
+          Skip
+        </Button>
+        <Button
+          size="lg"
+          variant="darkCTA"
+          loading={isMutatingProfile}
+          disabled={!selectedChoice}
+          onClick={handleNextClick}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Objective;
--- a/apps/web/app/onboarding/Onboarding.tsx
+++ b/apps/web/app/onboarding/Onboarding.tsx
@@ -0,0 +1,99 @@
+"use client";
+
+import { ProgressBar } from "@/../../packages/ui";
+import { Logo } from "@/components/Logo";
+import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import { useProfile } from "@/lib/profile";
+import { useProfileMutation } from "@/lib/profile/mutateProfile";
+import { fetcher } from "@formbricks/lib/fetcher";
+import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import { toast } from "react-hot-toast";
+import useSWR from "swr";
+import Greeting from "./Greeting";
+import Objective from "./Objective";
+import Product from "./Product";
+import Role from "./Role";
+import { Session } from "next-auth";
+
+const MAX_STEPS = 6;
+
+interface OnboardingProps {
+  session: Session | null;
+}
+
+export default function Onboarding({ session }: OnboardingProps) {
+  const { data, error } = useSWR(`/api/v1/environments/find-first`, fetcher);
+  const { profile } = useProfile();
+  const { triggerProfileMutate } = useProfileMutation();
+  const [currentStep, setCurrentStep] = useState(1);
+  const [isLoading, setIsLoading] = useState(false);
+  const router = useRouter();
+
+  const percent = useMemo(() => {
+    return currentStep / MAX_STEPS;
+  }, [currentStep]);
+
+  if (!profile) {
+    return (
+      <div className="flex h-full w-full items-center justify-center">
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (error) {
+    return <div className="flex h-full w-full items-center justify-center">An error occurred</div>;
+  }
+
+  const skip = () => {
+    setCurrentStep(4);
+  };
+
+  const next = () => {
+    if (currentStep < MAX_STEPS) {
+      setCurrentStep((value) => value + 1);
+      return;
+    }
+  };
+
+  const done = async () => {
+    setIsLoading(true);
+    try {
+      const updatedProfile = { ...profile, onboardingDisplayed: true };
+      await triggerProfileMutate(updatedProfile);
+      if (data) {
+        await router.push(`/environments/${data.id}/surveys`);
+      }
+    } catch (e) {
+      toast.error("An error occured saving your settings.");
+      console.error(e);
+    } finally {
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col bg-slate-50">
+      <div className="mx-auto grid w-full max-w-7xl grid-cols-6 items-center  pt-8">
+        <div className="col-span-2">
+          <Logo className="ml-4 w-1/2" />
+        </div>
+        <div className="col-span-2 flex items-center justify-center gap-8">
+          <div className="relative grow overflow-hidden rounded-full bg-slate-200">
+            <ProgressBar progress={percent} barColor="bg-brand" height={2} />
+          </div>
+          <div className="grow-0 text-xs font-semibold text-slate-700">
+            {currentStep < 5 ? <>{Math.floor(percent * 100)}% complete</> : <>Almost there!</>}
+          </div>
+        </div>
+        <div className="col-span-2" />
+      </div>
+      <div className="flex grow items-center justify-center">
+        {currentStep === 1 && <Greeting next={next} skip={skip} name={profile.name} session={session} />}
+        {currentStep === 2 && <Role next={next} skip={skip} />}
+        {currentStep === 3 && <Objective next={next} skip={skip} />}
+        {currentStep === 4 && <Product done={done} environmentId={data.id} isLoading={isLoading} />}
+      </div>
+    </div>
+  );
+}
--- a/apps/web/app/onboarding/Product.tsx
+++ b/apps/web/app/onboarding/Product.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { Button, ColorPicker, ErrorComponent, Input, Label } from "@/../../packages/ui";
+import Headline from "@/components/preview/Headline";
+import Subheader from "@/components/preview/Subheader";
+import LoadingSpinner from "@/components/shared/LoadingSpinner";
+import { useProductMutation } from "@/lib/products/mutateProducts";
+import { useProduct } from "@/lib/products/products";
+import { useEffect, useState } from "react";
+import { toast } from "react-hot-toast";
+
+type Product = {
+  done: () => void;
+  environmentId: string;
+  isLoading: boolean;
+};
+
+const Product: React.FC<Product> = ({ done, isLoading, environmentId }) => {
+  const [loading, setLoading] = useState(true);
+  const { product, isLoadingProduct, isErrorProduct } = useProduct(environmentId);
+  const { triggerProductMutate } = useProductMutation(environmentId);
+
+  const [name, setName] = useState("");
+  const [color, setColor] = useState("#334155");
+
+  const handleNameChange = (event) => {
+    setName(event.target.value);
+  };
+
+  const handleColorChange = (color) => {
+    setColor(color);
+  };
+
+  useEffect(() => {
+    if (isLoadingProduct) {
+      return;
+    } else if (product && product.name !== "My Product") {
+      done(); // when product already exists, skip product step entirely
+    } else {
+      setLoading(false);
+    }
+  }, [product, done, isLoadingProduct]);
+
+  const dummyChoices = ["❤️ Love it!"];
+
+  const handleDoneClick = async () => {
+    if (!name || !environmentId) {
+      return;
+    }
+
+    try {
+      await triggerProductMutate({ name, brandColor: color });
+    } catch (e) {
+      toast.error("An error occured saving your settings");
+      console.error(e);
+    }
+    done();
+  };
+
+  if (isLoadingProduct || loading) {
+    return <LoadingSpinner />;
+  }
+
+  if (isErrorProduct) {
+    return <ErrorComponent />;
+  }
+
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-8 px-8">
+      <div className="px-4">
+        <label className="mb-1.5 block text-lg font-semibold leading-6 text-slate-900">
+          Create your team&apos;s product.
+        </label>
+        <Subheader subheader="You can always change these settings later." questionId="none" />
+        <div className="mt-6 flex flex-col gap-2">
+          <div className="pb-2">
+            <div className="flex justify-between">
+              <Label htmlFor="product">Your product name</Label>
+              <span className="text-xs text-slate-500">Required</span>
+            </div>
+            <div className="mt-2">
+              <Input
+                id="product"
+                type="text"
+                placeholder="e.g. Formbricks"
+                value={name}
+                onChange={handleNameChange}
+              />
+            </div>
+          </div>
+          <div>
+            <Label htmlFor="color">Primary color</Label>
+            <div className="mt-2">
+              <ColorPicker color={color} onChange={handleColorChange} />
+            </div>
+          </div>
+          <div className="relative flex cursor-not-allowed flex-col items-center gap-4 rounded-md border border-slate-300 px-16 py-8">
+            <div
+              className="absolute left-0 right-0 top-0 h-full w-full opacity-10"
+              style={{ backgroundColor: color }}
+            />
+            <p className="text-xs text-slate-500">This is what your survey will look like:</p>
+            <div className="relative w-full max-w-sm cursor-not-allowed rounded-lg bg-white px-4 py-6 shadow-lg ring-1 ring-black ring-opacity-5 sm:p-6">
+              <Headline headline={`How do you like ${name ? name : "Formbricks"}?`} questionId="none" />
+              <div className="mt-4">
+                <fieldset>
+                  <legend className="sr-only">Choices</legend>
+                  <div className=" relative space-y-2 rounded-md">
+                    {dummyChoices.map((choice) => (
+                      <label
+                        key={choice}
+                        className="relative z-10 flex flex-col rounded-md border border-slate-400 bg-slate-50 p-4 hover:bg-slate-50 focus:outline-none">
+                        <span className="flex items-center text-sm">
+                          <input
+                            checked
+                            readOnly
+                            type="radio"
+                            className="h-4 w-4 border border-gray-300 focus:ring-0 focus:ring-offset-0"
+                            style={{ borderColor: "brandColor", color: "brandColor" }}
+                          />
+                          <span className="ml-3 font-medium">{choice}</span>
+                        </span>
+                      </label>
+                    ))}
+                  </div>
+                </fieldset>
+              </div>
+              <div className="mt-4 flex w-full justify-end">
+                <Button className="pointer-events-none" style={{ backgroundColor: color }}>
+                  Next
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="flex items-center justify-end">
+        <Button
+          size="lg"
+          variant="darkCTA"
+          loading={isLoading}
+          disabled={!name || !environmentId}
+          onClick={handleDoneClick}>
+          {isLoading ? "Getting ready..." : "Done"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Product;
--- a/apps/web/app/onboarding/Role.tsx
+++ b/apps/web/app/onboarding/Role.tsx
@@ -0,0 +1,109 @@
+"use client";
+
+import { cn } from "@/../../packages/lib/cn";
+import { Button } from "@/../../packages/ui";
+import Headline from "@/components/preview/Headline";
+import Subheader from "@/components/preview/Subheader";
+import { useProfile } from "@/lib/profile";
+import { useProfileMutation } from "@/lib/profile/mutateProfile";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+
+type Role = {
+  next: () => void;
+  skip: () => void;
+};
+
+type RoleChoice = {
+  label: string;
+  id: "project_manager" | "engineer" | "founder" | "marketing_specialist" | "other";
+};
+
+const Role: React.FC<Role> = ({ next, skip }) => {
+  const [selectedChoice, setSelectedChoice] = useState<string | null>(null);
+
+  const { profile } = useProfile();
+  const { triggerProfileMutate, isMutatingProfile } = useProfileMutation();
+
+  const roles: Array<RoleChoice> = [
+    { label: "Project Manager", id: "project_manager" },
+    { label: "Engineer", id: "engineer" },
+    { label: "Founder", id: "founder" },
+    { label: "Marketing Specialist", id: "marketing_specialist" },
+    { label: "Other", id: "other" },
+  ];
+
+  const handleNextClick = async () => {
+    if (selectedChoice) {
+      const selectedRole = roles.find((role) => role.label === selectedChoice);
+      if (selectedRole) {
+        try {
+          const updatedProfile = { ...profile, role: selectedRole.id };
+          await triggerProfileMutate(updatedProfile);
+        } catch (e) {
+          toast.error("An error occured saving your settings");
+          console.error(e);
+        }
+        next();
+      }
+    }
+  };
+
+  return (
+    <div className="flex w-full max-w-xl flex-col gap-8 px-8">
+      <div className="px-4">
+        <Headline headline="What is your role?" questionId="none" />
+        <Subheader subheader="Make your Formbricks experience more personalised." questionId="none" />
+        <div className="mt-4">
+          <fieldset>
+            <legend className="sr-only">Choices</legend>
+            <div className=" relative space-y-2 rounded-md">
+              {roles.map((choice) => (
+                <label
+                  key={choice.id}
+                  className={cn(
+                    selectedChoice === choice.label
+                      ? "z-10 border-slate-400 bg-slate-100"
+                      : "border-gray-200",
+                    "relative flex cursor-pointer flex-col rounded-md border p-4 hover:bg-slate-100 focus:outline-none"
+                  )}>
+                  <span className="flex items-center text-sm">
+                    <input
+                      type="radio"
+                      id={choice.id}
+                      value={choice.label}
+                      checked={choice.label === selectedChoice}
+                      className="checked:text-brand-dark  focus:text-brand-dark h-4 w-4 border border-gray-300 focus:ring-0 focus:ring-offset-0"
+                      aria-labelledby={`${choice.id}-label`}
+                      onChange={(e) => {
+                        setSelectedChoice(e.currentTarget.value);
+                      }}
+                    />
+                    <span id={`${choice.id}-label`} className="ml-3 font-medium">
+                      {choice.label}
+                    </span>
+                  </span>
+                </label>
+              ))}
+            </div>
+          </fieldset>
+        </div>
+      </div>
+      <div className="mb-24 flex justify-between">
+        <Button size="lg" className="text-slate-400" variant="minimal" onClick={skip}>
+          Skip
+        </Button>
+        <Button
+          size="lg"
+          variant="darkCTA"
+          loading={isMutatingProfile}
+          disabled={!selectedChoice}
+          onClick={handleNextClick}>
+          Next
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default Role;
--- a/apps/web/app/onboarding/page.tsx
+++ b/apps/web/app/onboarding/page.tsx
@@ -0,0 +1,8 @@
+import { getServerSession } from "next-auth";
+import Onboarding from "./Onboarding";
+import { authOptions } from "@/pages/api/auth/[...nextauth]";
+
+export default async function OnboardingPage() {
+  const session = await getServerSession(authOptions);
+  return <Onboarding session={session} />;
+}
--- a/apps/web/app/page.tsx
+++ b/apps/web/app/page.tsx
@@ -2,7 +2,7 @@ import LoadingSpinner from "@/components/shared/LoadingSpinner";
 import { getServerSession } from "next-auth";
 import { redirect } from "next/navigation";
 import { authOptions } from "pages/api/auth/[...nextauth]";
-import { HomeRedirect } from "./components";
+import { HomeRedirect } from "./HomeRedirect";
 import { PosthogClientWrapper } from "./PosthogClientWrapper";

 export default async function Home() {
@@ -13,7 +13,7 @@ export default async function Home() {
  return (
    <PosthogClientWrapper>
      <div>
-        <HomeRedirect />
+        <HomeRedirect session={session} />
        <LoadingSpinner />
      </div>
    </PosthogClientWrapper>
--- a/apps/web/components/auth/SignupForm.tsx
+++ b/apps/web/components/auth/SignupForm.tsx
@@ -32,6 +32,7 @@ export const SignupForm = () => {
      router.push(url);
    } catch (e: any) {
      setError(e.message);
+      setSigningUp(false);
    }
  };

--- a/apps/web/components/shared/WidgetStatusIndicator.tsx
+++ b/apps/web/components/shared/WidgetStatusIndicator.tsx
@@ -107,7 +107,7 @@ export default function WidgetStatusIndicator({ environmentId, type }: WidgetSta
  if (type === "mini") {
    return (
      <Link href={`/environments/${environmentId}/settings/setup`}>
-        <div className="group flex justify-center">
+        <div className="group my-4 flex justify-center">
          <div className=" flex rounded-full bg-slate-100 px-2 py-1">
            <p className="mr-2 text-sm text-slate-400 group-hover:underline">
              {currentStatus.subtitle}{" "}
--- a/apps/web/lib/products/products.ts
+++ b/apps/web/lib/products/products.ts
@@ -1,5 +1,5 @@
-import useSWR from "swr";
 import { fetcher } from "@formbricks/lib/fetcher";
+import useSWR from "swr";

 export const useProduct = (environmentId: string) => {
  const { data, isLoading, error, mutate, isValidating } = useSWR(
--- a/apps/web/lib/users/users.ts
+++ b/apps/web/lib/users/users.ts
@@ -16,6 +16,7 @@ export const createUser = async (
        email,
        password: hashedPassword,
        inviteToken,
+        onboardingDisplayed: false,
      }),
    });
    if (res.status !== 200) {
--- a/apps/web/pages/api/auth/[...nextauth].ts
+++ b/apps/web/pages/api/auth/[...nextauth].ts
@@ -131,6 +131,8 @@ export const authOptions: NextAuthOptions = {
        where: { email: token.email! },
        select: {
          id: true,
+          createdAt: true,
+          onboardingDisplayed: true,
          memberships: {
            select: {
              teamId: true,
@@ -151,6 +153,8 @@ export const authOptions: NextAuthOptions = {

      const additionalAttributs = {
        id: existingUser.id,
+        createdAt: existingUser.createdAt,
+        onboardingDisplayed: existingUser.onboardingDisplayed,
        teamId: existingUser.memberships.length > 0 ? existingUser.memberships[0].teamId : undefined,
        plan:
          existingUser.memberships.length > 0 && existingUser.memberships[0].team
@@ -168,6 +172,10 @@ export const authOptions: NextAuthOptions = {
      // @ts-ignore
      session.user.id = token?.id;
      // @ts-ignore
+      session.user.createdAt = token?.createdAt ? new Date(token?.createdAt).toISOString() : undefined;
+      // @ts-ignore
+      session.user.onboardingDisplayed = token?.onboardingDisplayed;
+      // @ts-ignore
      session.user.teamId = token?.teamId;
      // @ts-ignore
      session.user.plan = token?.plan;
@@ -245,6 +253,7 @@ export const authOptions: NextAuthOptions = {
            name: user.name,
            email: user.email,
            emailVerified: new Date(Date.now()),
+            onboardingDisplayed: false,
            identityProvider: provider,
            identityProviderAccountId: user.id as string,
            accounts: {
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -4,5 +4,6 @@ const base = require("../../packages/tailwind-config/tailwind.config");
 module.exports = {
  ...base,
  content: [...base.content],
+  safelist: [{ pattern: /max-w-./, variants: "sm" }],
  darkMode: "class", // Set dark mode to use the 'class' strategy
 };
--- a/packages/database/prisma/migrations/20230419181441_add_onboarding_displayed_property_with_default_of_true/migration.sql
+++ b/packages/database/prisma/migrations/20230419181441_add_onboarding_displayed_property_with_default_of_true/migration.sql
@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "onboardingDisplayed" BOOLEAN NOT NULL DEFAULT true;
--- a/packages/database/prisma/migrations/20230429141942_add_role_objective_and_intention_to_user/migration.sql
+++ b/packages/database/prisma/migrations/20230429141942_add_role_objective_and_intention_to_user/migration.sql
@@ -0,0 +1,13 @@
+-- CreateEnum
+CREATE TYPE "Role" AS ENUM ('project_manager', 'engineer', 'founder', 'marketing_specialist', 'other');
+
+-- CreateEnum
+CREATE TYPE "Objective" AS ENUM ('increase_conversion', 'improve_user_retention', 'increase_user_adoption', 'sharpen_marketing_messaging', 'support_sales', 'other');
+
+-- CreateEnum
+CREATE TYPE "Intention" AS ENUM ('survey_user_segments', 'survey_at_specific_point_in_user_journey', 'enrich_customer_profiles', 'collect_all_user_feedback_on_one_platform', 'other');
+
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "intention" "Intention",
+ADD COLUMN     "objective" "Objective",
+ADD COLUMN     "role" "Role";
--- a/packages/database/prisma/migrations/20230503105347_add_onboarding/migration.sql
+++ b/packages/database/prisma/migrations/20230503105347_add_onboarding/migration.sql
@@ -0,0 +1,9 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `intention` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "intention",
+ALTER COLUMN "onboardingDisplayed" SET DEFAULT false;
--- a/packages/database/prisma/schema.prisma
+++ b/packages/database/prisma/schema.prisma
@@ -301,6 +301,31 @@ model Account {
  @@unique([provider, providerAccountId])
 }

+enum Role {
+  project_manager
+  engineer
+  founder
+  marketing_specialist
+  other
+}
+
+enum Objective {
+  increase_conversion
+  improve_user_retention
+  increase_user_adoption
+  sharpen_marketing_messaging
+  support_sales
+  other
+}
+
+enum Intention {
+  survey_user_segments
+  survey_at_specific_point_in_user_journey
+  enrich_customer_profiles
+  collect_all_user_feedback_on_one_platform
+  other
+}
+
 model User {
  id                        String           @id @default(cuid())
  createdAt                 DateTime         @default(now()) @map(name: "created_at")
@@ -309,6 +334,7 @@ model User {
  email                     String           @unique
  emailVerified             DateTime?        @map(name: "email_verified")
  password                  String?
+  onboardingDisplayed       Boolean          @default(false)
  identityProvider          IdentityProvider @default(email)
  identityProviderAccountId String?
  memberships               Membership[]
@@ -316,4 +342,6 @@ model User {
  groupId                   String?
  invitesCreated            Invite[]         @relation("inviteCreatedBy")
  invitesAccepted           Invite[]         @relation("inviteAcceptedBy")
+  role                      Role?
+  objective                 Objective?
 }
--- a/packages/tailwind-config/tailwind.config.js
+++ b/packages/tailwind-config/tailwind.config.js
@@ -25,6 +25,12 @@ module.exports = {
          DEFAULT: "#0F172A",
        },
      },
+      keyframes: {
+        fadeIn: {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" },
+        },
+      },
      maxWidth: {
        "8xl": "88rem",
      },
--- a/packages/types/next-auth.d.ts
+++ b/packages/types/next-auth.d.ts
@@ -7,11 +7,12 @@ declare module "next-auth" {
  interface Session {
    user: {
      id: string;
+      createdAt: string;
      teamId?: string;
      plan?: string;
      email: string;
      name: string;
-      finishedOnboarding: boolean;
+      onboardingDisplayed: boolean;
      image?: StaticImageData;
    };
  }
--- a/packages/types/templates.ts
+++ b/packages/types/templates.ts
@@ -5,7 +5,8 @@ export type Objective =
  | "increase_conversion"
  | "support_sales"
  | "sharpen_marketing_messaging"
-  | "improve_user_retention";
+  | "improve_user_retention"
+  | "other"

 export interface Template {
  name: string;
--- a/packages/ui/components/Button.tsx
+++ b/packages/ui/components/Button.tsx
@@ -6,7 +6,7 @@ import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, forwardRef } from "r
 type SVGComponent = React.FunctionComponent<React.SVGProps<SVGSVGElement>> | LucideIcon;

 export type ButtonBaseProps = {
-  variant?: "highlight" | "primary" | "secondary" | "minimal" | "warn" | "alert";
+  variant?: "highlight" | "primary" | "secondary" | "minimal" | "warn" | "alert" | "darkCTA";
  size?: "base" | "sm" | "lg" | "fab" | "icon";
  loading?: boolean;
  disabled?: boolean;
@@ -95,6 +95,10 @@ export const Button: React.ForwardRefExoticComponent<
          (disabled
            ? "text-slate-400 bg-transparent"
            : "hover:bg-red-200 text-red-700 bg-red-100 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:bg-red-50 focus:ring-red-500"),
+        variant === "darkCTA" &&
+          (disabled
+            ? "text-slate-400 dark:text-slate-500 bg-slate-200 dark:bg-slate-800"
+            : "text-slate-100 hover:text-slate-50 bg-slate-800 hover:bg-slate-700 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-1  focus:bg-slate-700 focus:ring-neutral-500"),

        // set not-allowed cursor if disabled
        loading ? "cursor-wait" : disabled ? "cursor-not-allowed" : "",
--- a/packages/ui/components/ColorPicker.tsx
+++ b/packages/ui/components/ColorPicker.tsx
@@ -8,13 +8,15 @@ import { HexColorInput, HexColorPicker } from "react-colorful";
 export const ColorPicker = ({ color, onChange }: { color: string; onChange: (v: string) => void }) => {
  return (
    <div className="my-2">
-      <div className="flex w-fit items-center space-x-1 rounded border px-2 text-slate-400">
-        #
-        <HexColorInput
-          className="ml-2 mr-2 h-10 w-16 text-slate-500 outline-none focus:border-none"
-          color={color}
-          onChange={onChange}
-        />
+      <div className="flex w-full items-center justify-between space-x-1 rounded-md border border-slate-300 px-2 text-sm text-slate-400">
+        <div>
+          #
+          <HexColorInput
+            className="ml-2 mr-2 h-10 w-16 bg-transparent text-slate-500 outline-none focus:border-none"
+            color={color}
+            onChange={onChange}
+          />
+        </div>
        <PopoverPicker color={color} onChange={onChange} />
      </div>
    </div>
@@ -29,16 +31,18 @@ export const PopoverPicker = ({ color, onChange }: { color: string; onChange: (v
  useClickOutside(popover, close);

  return (
-    <div className="picker">
+    <div className="picker relative">
      <div
-        className="relative h-6 w-10 rounded"
+        className="h-6 w-10 cursor-pointer rounded"
        style={{ backgroundColor: color }}
-        onClick={() => toggle(true)}
+        onClick={() => toggle(!isOpen)}
      />

      {isOpen && (
-        <div className="absolute left-16 z-20 mt-1" ref={popover}>
-          <HexColorPicker color={color} onChange={onChange} />
+        <div className="absolute right-0 z-20 mt-2 origin-top-right" ref={popover}>
+          <div className="rounded bg-white p-2 shadow-lg">
+            <HexColorPicker color={color} onChange={onChange} />
+          </div>
        </div>
      )}
    </div>
--- a/packages/ui/components/ProgressBar.tsx
+++ b/packages/ui/components/ProgressBar.tsx
@@ -2,11 +2,19 @@

 import { cn } from "@formbricks/lib/cn";

-export function ProgressBar({ progress, barColor }: { progress: number; barColor?: string }) {
+export function ProgressBar({
+  progress,
+  barColor,
+  height = 5,
+}: {
+  progress: number;
+  barColor: string;
+  height?: 2 | 5;
+}) {
  return (
-    <div className="h-5 w-full rounded-full bg-slate-200 ">
+    <div className={cn(height === 2 ? "h-2" : height === 5 ? "h-5" : "", "w-full rounded-full bg-slate-200")}>
      <div
-        className={cn("h-5 rounded-full", barColor)}
+        className={cn("h-full rounded-full", barColor)}
        style={{ width: `${Math.floor(progress * 100)}%` }}></div>
    </div>
  );