From a211e64f0e4ed22dcc4f92e05b639f8f47209579 Mon Sep 17 00:00:00 2001
From: Anshuman Pandey <54475686+pandeymangg@users.noreply.github.com>
Date: Thu, 30 May 2024 17:30:14 +0530
Subject: [PATCH] fix: product styling form (#2696)

---
 .../edit/components/BackgroundStylingCard.tsx | 134 +++---
 .../edit/components/CardStylingSettings.tsx   | 426 +++++++++---------
 .../edit/components/FormStylingSettings.tsx   | 203 +++++----
 .../edit/components/StylingView.tsx           | 252 +++++++----
 .../edit/components/SurveyBgSelectorTab.tsx   |  23 +-
 .../components/EditProductNameForm.tsx        |   4 +-
 .../components/EditWaitingTimeForm.tsx        |   4 +-
 .../product/look/components/ThemeStyling.tsx  | 363 ++++++++-------
 .../components/ThemeStylingPreviewSurvey.tsx  |   4 +-
 apps/web/playwright/onboarding.spec.ts        |   1 +
 .../surveys/src/components/general/Survey.tsx |   1 -
 packages/types/styling.ts                     |  23 +-
 packages/ui/CardArrangementTabs/index.tsx     |  56 +++
 packages/ui/ColorSelector/index.tsx           |  18 +
 packages/ui/Form/index.tsx                    |  17 +-
 .../ui/Styling/components/CardArrangement.tsx |  80 ----
 .../components/ColorSelectorWithLabel.tsx     |  37 --
 .../ui/Styling/components/DarkModeColors.tsx  | 108 -----
 packages/ui/Styling/index.tsx                 |   3 -
 packages/ui/Tabs/index.tsx                    |  80 ++++
 .../CasualCardArrangementIcon.tsx}            |  20 +-
 .../ui/icons/SimpleCardArrangementIcon.tsx    |   7 +
 .../ui/icons/StraightCardArrangementIcon.tsx  |   9 +
 23 files changed, 938 insertions(+), 935 deletions(-)
 create mode 100644 packages/ui/CardArrangementTabs/index.tsx
 create mode 100644 packages/ui/ColorSelector/index.tsx
 delete mode 100644 packages/ui/Styling/components/CardArrangement.tsx
 delete mode 100644 packages/ui/Styling/components/ColorSelectorWithLabel.tsx
 delete mode 100644 packages/ui/Styling/components/DarkModeColors.tsx
 delete mode 100644 packages/ui/Styling/index.tsx
 create mode 100644 packages/ui/Tabs/index.tsx
 rename packages/ui/{Styling/components/CardArrangementIcons.tsx => icons/CasualCardArrangementIcon.tsx} (52%)
 create mode 100644 packages/ui/icons/SimpleCardArrangementIcon.tsx
 create mode 100644 packages/ui/icons/StraightCardArrangementIcon.tsx

diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx
index 18ff948e007..c2588782d67 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/BackgroundStylingCard.tsx
@@ -2,11 +2,13 @@
 
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { CheckIcon } from "lucide-react";
+import { UseFormReturn } from "react-hook-form";
 
 import { cn } from "@formbricks/lib/cn";
 import { TProductStyling } from "@formbricks/types/product";
-import { TSurveyBackgroundBgType, TSurveyStyling } from "@formbricks/types/surveys";
+import { TSurveyStyling } from "@formbricks/types/surveys";
 import { Badge } from "@formbricks/ui/Badge";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@formbricks/ui/Form";
 import { Slider } from "@formbricks/ui/Slider";
 
 import { SurveyBgSelectorTab } from "./SurveyBgSelectorTab";
@@ -14,52 +16,24 @@ import { SurveyBgSelectorTab } from "./SurveyBgSelectorTab";
 interface BackgroundStylingCardProps {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  styling: TSurveyStyling | TProductStyling | null;
-  setStyling: React.Dispatch<React.SetStateAction<TSurveyStyling | TProductStyling>>;
   colors: string[];
   isSettingsPage?: boolean;
   disabled?: boolean;
   environmentId: string;
   isUnsplashConfigured: boolean;
+  form: UseFormReturn<TProductStyling | TSurveyStyling>;
 }
 
 export const BackgroundStylingCard = ({
   open,
   setOpen,
-  styling,
-  setStyling,
   colors,
   isSettingsPage = false,
   disabled,
   environmentId,
   isUnsplashConfigured,
+  form,
 }: BackgroundStylingCardProps) => {
-  const { bgType, brightness } = styling?.background ?? {};
-
-  const handleBgChange = (color: string, type: TSurveyBackgroundBgType) => {
-    const { background } = styling ?? {};
-
-    setStyling({
-      ...styling,
-      background: {
-        ...background,
-        bg: color,
-        bgType: type,
-        brightness: 100,
-      },
-    });
-  };
-
-  const handleBrightnessChange = (percent: number) => {
-    setStyling((prev) => ({
-      ...prev,
-      background: {
-        ...prev.background,
-        brightness: percent,
-      },
-    }));
-  };
-
   return (
     <Collapsible.Root
       open={open}
@@ -101,48 +75,66 @@ export const BackgroundStylingCard = ({
         </div>
       </Collapsible.CollapsibleTrigger>
       <Collapsible.CollapsibleContent>
-        <hr className="py-1 text-slate-600" />
-        <div className="flex flex-col gap-3 p-3">
-          {/* Background */}
-          <div className="p-3">
-            <div className="ml-2">
-              <h3 className="text-sm font-semibold text-slate-700">Change background</h3>
-              <p className="text-xs font-normal text-slate-500">
-                Pick a background from our library or upload your own.
-              </p>
-            </div>
-            <SurveyBgSelectorTab
-              styling={styling}
-              handleBgChange={handleBgChange}
-              colors={colors}
-              bgType={bgType}
-              environmentId={environmentId}
-              isUnsplashConfigured={isUnsplashConfigured}
-            />
-          </div>
+        <hr className="pt-1 text-slate-600" />
+        <div className="flex flex-col gap-6 p-6 pt-2">
+          <FormField
+            control={form.control}
+            name="background"
+            render={({ field }) => (
+              <FormItem>
+                <div>
+                  <FormLabel>Change background</FormLabel>
+                  <FormDescription>Pick a background from our library or upload your own.</FormDescription>
+                </div>
 
-          {/* Overlay */}
-          <div className="flex flex-col gap-4 p-3">
-            <div className="ml-2">
-              <h3 className="text-sm font-semibold text-slate-700">Background overlay</h3>
-              <p className="text-xs font-normal text-slate-500">
-                Darken or lighten background of your choice.
-              </p>
-            </div>
+                <FormControl>
+                  <SurveyBgSelectorTab
+                    bg={field.value?.bg ?? ""}
+                    handleBgChange={(bg: string, bgType: string) => {
+                      field.onChange({
+                        ...field.value,
+                        bg,
+                        bgType,
+                        brightness: 100,
+                      });
+                    }}
+                    colors={colors}
+                    bgType={field.value?.bgType ?? "color"}
+                    environmentId={environmentId}
+                    isUnsplashConfigured={isUnsplashConfigured}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
+          />
 
-            <div>
-              <div className="ml-2 flex flex-col justify-center">
-                <div className="flex flex-col gap-4">
-                  <div className="flex flex-col justify-center rounded-lg border bg-slate-50 p-6">
-                    <Slider
-                      value={[brightness ?? 100]}
-                      max={200}
-                      onValueChange={(value) => {
-                        handleBrightnessChange(value[0]);
-                      }}
-                    />
-                  </div>
-                </div>
+          <div className="flex flex-col justify-center">
+            <div className="flex flex-col gap-4">
+              <div className="flex flex-col justify-center ">
+                <FormField
+                  control={form.control}
+                  name="background.brightness"
+                  render={({ field }) => (
+                    <FormItem>
+                      <div>
+                        <FormLabel>Brightness</FormLabel>
+                        <FormDescription>Darken or lighten background of your choice.</FormDescription>
+                      </div>
+
+                      <FormControl>
+                        <div className="rounded-lg border bg-slate-50 p-6">
+                          <Slider
+                            value={[field.value ?? 100]}
+                            max={200}
+                            onValueChange={(value) => {
+                              field.onChange(value[0]);
+                            }}
+                          />
+                        </div>
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
               </div>
             </div>
           </div>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx
index 8053719b4b5..fb2b3b7e7a0 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings.tsx
@@ -2,157 +2,47 @@
 
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { CheckIcon } from "lucide-react";
-import React, { useMemo } from "react";
+import React from "react";
+import { UseFormReturn } from "react-hook-form";
 
 import { cn } from "@formbricks/lib/cn";
 import { COLOR_DEFAULTS } from "@formbricks/lib/styling/constants";
 import { TProduct, TProductStyling } from "@formbricks/types/product";
-import { TCardArrangementOptions } from "@formbricks/types/styling";
 import { TSurveyStyling, TSurveyType } from "@formbricks/types/surveys";
 import { Badge } from "@formbricks/ui/Badge";
+import { CardArrangementTabs } from "@formbricks/ui/CardArrangementTabs";
 import { ColorPicker } from "@formbricks/ui/ColorPicker";
-import { Label } from "@formbricks/ui/Label";
+import { ColorSelector } from "@formbricks/ui/ColorSelector";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@formbricks/ui/Form";
 import { Slider } from "@formbricks/ui/Slider";
-import { CardArrangement, ColorSelectorWithLabel } from "@formbricks/ui/Styling";
 import { Switch } from "@formbricks/ui/Switch";
 
 type CardStylingSettingsProps = {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  styling: TSurveyStyling | TProductStyling | null;
-  setStyling: React.Dispatch<React.SetStateAction<TSurveyStyling | TProductStyling>>;
   isSettingsPage?: boolean;
   surveyType?: TSurveyType;
   disabled?: boolean;
-  localProduct: TProduct;
+  product: TProduct;
+  form: UseFormReturn<TProductStyling | TSurveyStyling>;
 };
 
 export const CardStylingSettings = ({
-  setStyling,
-  styling,
   isSettingsPage = false,
   surveyType,
   disabled,
   open,
-  localProduct,
+  product,
   setOpen,
+  form,
 }: CardStylingSettingsProps) => {
   const isAppSurvey = surveyType === "app" || surveyType === "website";
-  const cardBgColor = styling?.cardBackgroundColor?.light || COLOR_DEFAULTS.cardBackgroundColor;
+  const surveyTypeDerived = isAppSurvey ? "App / Website" : "Link";
+  const isLogoVisible = !!product.logo?.url;
 
-  const isLogoHidden = styling?.isLogoHidden ?? false;
-
-  const isLogoVisible = !!localProduct.logo?.url;
-
-  const linkSurveyCardArrangement = styling?.cardArrangement?.linkSurveys ?? "straight";
-
-  const inAppSurveyCardArrangement = styling?.cardArrangement?.appSurveys ?? "straight";
-
-  const setCardBgColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      cardBackgroundColor: {
-        ...(prev.cardBackgroundColor ?? {}),
-        light: color,
-      },
-    }));
-  };
-
-  const cardBorderColor = styling?.cardBorderColor?.light || COLOR_DEFAULTS.cardBorderColor;
-  const setCardBorderColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      cardBorderColor: {
-        ...(prev.cardBorderColor ?? {}),
-        light: color,
-      },
-    }));
-  };
-
-  const cardShadowColor = styling?.cardShadowColor?.light || COLOR_DEFAULTS.cardShadowColor;
-  const setCardShadowColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      cardShadowColor: {
-        ...(prev.cardShadowColor ?? {}),
-        light: color,
-      },
-    }));
-  };
-
-  const isHighlightBorderAllowed = !!styling?.highlightBorderColor;
-  const setIsHighlightBorderAllowed = (open: boolean) => {
-    if (!open) {
-      const { highlightBorderColor, ...rest } = styling ?? {};
-
-      setStyling({
-        ...rest,
-      });
-    } else {
-      setStyling((prev) => ({
-        ...prev,
-        highlightBorderColor: {
-          ...(prev.highlightBorderColor ?? {}),
-          light: COLOR_DEFAULTS.highlightBorderColor,
-        },
-      }));
-    }
-  };
-
-  const highlightBorderColor = styling?.highlightBorderColor?.light || COLOR_DEFAULTS.highlightBorderColor;
-  const setHighlightBorderColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      highlightBorderColor: {
-        ...(prev.highlightBorderColor ?? {}),
-        light: color,
-      },
-    }));
-  };
-
-  const roundness = styling?.roundness ?? 8;
-  const setRoundness = (value: number) => {
-    setStyling((prev) => ({
-      ...prev,
-      roundness: value,
-    }));
-  };
-
-  const setCardArrangement = (arrangement: TCardArrangementOptions, surveyType: TSurveyType) => {
-    const newCardArrangement = {
-      linkSurveys: linkSurveyCardArrangement,
-      appSurveys: inAppSurveyCardArrangement,
-    };
-
-    if (surveyType === "link") {
-      newCardArrangement.linkSurveys = arrangement;
-    } else if (surveyType === "app" || surveyType === "website") {
-      newCardArrangement.appSurveys = arrangement;
-    }
-
-    setStyling((prev) => ({
-      ...prev,
-      cardArrangement: newCardArrangement,
-    }));
-  };
-
-  const toggleProgressBarVisibility = (hideProgressBar: boolean) => {
-    setStyling({
-      ...styling,
-      hideProgressBar,
-    });
-  };
-
-  const toggleLogoVisibility = () => {
-    setStyling((prev) => ({
-      ...prev,
-      isLogoHidden: !prev.isLogoHidden,
-    }));
-  };
-
-  const hideProgressBar = useMemo(() => {
-    return styling?.hideProgressBar;
-  }, [styling]);
+  const linkCardArrangement = form.watch("cardArrangement.linkSurveys") ?? "simple";
+  const appCardArrangement = form.watch("cardArrangement.appSurveys") ?? "simple";
+  const roundness = form.watch("roundness") ?? 8;
 
   return (
     <Collapsible.Root
@@ -194,107 +84,225 @@ export const CardStylingSettings = ({
         <hr className="py-1 text-slate-600" />
 
         <div className="flex flex-col gap-6 p-6 pt-2">
-          <div className="flex max-w-xs flex-col gap-4">
-            <div className="flex flex-col">
-              <h3 className="text-sm font-semibold text-slate-700">Roundness</h3>
-              <p className="text-xs text-slate-500">Change the border radius of the card and the inputs.</p>
-            </div>
-            <div className="flex flex-col justify-center rounded-lg border bg-slate-50 p-6">
-              <Slider value={[roundness]} max={22} onValueChange={(value) => setRoundness(value[0])} />
-            </div>
+          <div className="flex flex-col justify-center">
+            <FormField
+              control={form.control}
+              name="roundness"
+              render={() => (
+                <FormItem>
+                  <div>
+                    <FormLabel>Roundness</FormLabel>
+                    <FormDescription>Change the border radius of the card and the inputs.</FormDescription>
+                  </div>
+
+                  <FormControl>
+                    <div className="rounded-lg border bg-slate-50 p-6">
+                      <Slider
+                        value={[roundness]}
+                        max={22}
+                        onValueChange={(value) => {
+                          form.setValue("roundness", value[0]);
+                        }}
+                      />
+                    </div>
+                  </FormControl>
+                </FormItem>
+              )}
+            />
           </div>
 
-          <ColorSelectorWithLabel
-            label="Card background color"
-            color={cardBgColor}
-            setColor={setCardBgColor}
-            description="Change the background color of the card."
-          />
+          <FormField
+            control={form.control}
+            name="cardBackgroundColor.light"
+            render={({ field }) => (
+              <FormItem className="space-y-4">
+                <div>
+                  <FormLabel>Card background color</FormLabel>
+                  <FormDescription>Change the background color of the card.</FormDescription>
+                </div>
 
-          <ColorSelectorWithLabel
-            label="Card border color"
-            color={cardBorderColor}
-            setColor={setCardBorderColor}
-            description="Change the border color of the card."
+                <FormControl>
+                  <ColorSelector
+                    color={field.value || COLOR_DEFAULTS.cardBackgroundColor}
+                    setColor={(color) => field.onChange(color)}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
           />
 
-          <ColorSelectorWithLabel
-            label="Card shadow color"
-            color={cardShadowColor}
-            setColor={setCardShadowColor}
-            description="Change the shadow color of the card."
-          />
+          <FormField
+            control={form.control}
+            name="cardBorderColor.light"
+            render={({ field }) => (
+              <FormItem className="space-y-4">
+                <div>
+                  <FormLabel>Card border color</FormLabel>
+                  <FormDescription>Change the border color of the card.</FormDescription>
+                </div>
 
-          <CardArrangement
-            surveyType={isAppSurvey ? "app" : "link"}
-            activeCardArrangement={isAppSurvey ? inAppSurveyCardArrangement : linkSurveyCardArrangement}
-            setActiveCardArrangement={setCardArrangement}
+                <FormControl>
+                  <ColorSelector
+                    color={field.value || COLOR_DEFAULTS.cardBorderColor}
+                    setColor={(color) => field.onChange(color)}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
           />
 
-          <>
-            <div className="flex items-center space-x-1">
-              <Switch
-                id="hideProgressBar"
-                checked={!!hideProgressBar}
-                onCheckedChange={(checked) => toggleProgressBarVisibility(checked)}
-              />
-              <Label htmlFor="hideProgressBar" className="cursor-pointer">
-                <div className="ml-2">
-                  <h3 className="text-sm font-semibold text-slate-700">Hide progress bar</h3>
-                  <p className="text-xs font-normal text-slate-500">
-                    Disable the visibility of survey progress.
-                  </p>
+          <FormField
+            control={form.control}
+            name="cardShadowColor.light"
+            render={({ field }) => (
+              <FormItem className="space-y-4">
+                <div>
+                  <FormLabel>Card shadow color</FormLabel>
+                  <FormDescription>Change the shadow color of the card.</FormDescription>
                 </div>
-              </Label>
-            </div>
 
-            {isLogoVisible && (!surveyType || surveyType === "link") && !isSettingsPage && (
-              <div className="flex items-center space-x-1">
-                <Switch id="isLogoHidden" checked={isLogoHidden} onCheckedChange={toggleLogoVisibility} />
-                <Label htmlFor="isLogoHidden" className="cursor-pointer">
-                  <div className="ml-2 flex flex-col">
-                    <div className="flex items-center gap-2">
-                      <h3 className="text-sm font-semibold text-slate-700">Hide logo</h3>
-                      <Badge text="Link Surveys" type="gray" size="normal" />
-                    </div>
-                    <p className="text-xs font-normal text-slate-500">
-                      Hides the logo in this specific survey
-                    </p>
-                  </div>
-                </Label>
-              </div>
+                <FormControl>
+                  <ColorSelector
+                    color={field.value || COLOR_DEFAULTS.cardShadowColor}
+                    setColor={(color) => field.onChange(color)}
+                  />
+                </FormControl>
+              </FormItem>
             )}
+          />
 
-            {(!surveyType || isAppSurvey) && (
-              <div className="flex max-w-xs flex-col gap-4">
-                <div className="flex items-center gap-2">
-                  <Switch checked={isHighlightBorderAllowed} onCheckedChange={setIsHighlightBorderAllowed} />
-                  <div className="flex flex-col">
-                    <div className="flex items-center gap-2">
-                      <h3 className="whitespace-nowrap text-sm font-semibold text-slate-700">
-                        Add highlight border
-                      </h3>
-                      <Badge
-                        text="App & Website Surveys"
-                        type="gray"
-                        size="normal"
-                        className="whitespace-nowrap"
-                      />
-                    </div>
-                    <p className="text-xs text-slate-500">Add an outer border to your survey card.</p>
-                  </div>
+          <FormField
+            control={form.control}
+            name={"cardArrangement"}
+            render={() => (
+              <FormItem>
+                <div>
+                  <FormLabel>Card Arrangement for {surveyTypeDerived} Surveys</FormLabel>
+
+                  <FormDescription>
+                    How funky do you want your cards in {surveyTypeDerived} Surveys
+                  </FormDescription>
                 </div>
-
-                {isHighlightBorderAllowed && (
-                  <ColorPicker
-                    color={highlightBorderColor}
-                    onChange={setHighlightBorderColor}
-                    containerClass="my-0"
+                <FormControl>
+                  <CardArrangementTabs
+                    key={isAppSurvey ? "app" : "link"}
+                    surveyType={isAppSurvey ? "app" : "link"}
+                    activeCardArrangement={isAppSurvey ? appCardArrangement : linkCardArrangement}
+                    setActiveCardArrangement={(value, type) => {
+                      type === "app"
+                        ? form.setValue("cardArrangement.appSurveys", value)
+                        : form.setValue("cardArrangement.linkSurveys", value);
+                    }}
                   />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <div className="flex items-center space-x-1">
+            <FormField
+              control={form.control}
+              name="hideProgressBar"
+              render={({ field }) => (
+                <FormItem className="flex w-full items-center gap-2 space-y-0">
+                  <FormControl>
+                    <Switch
+                      id="hideProgressBar"
+                      checked={!!field.value}
+                      onCheckedChange={(checked) => field.onChange(checked)}
+                    />
+                  </FormControl>
+
+                  <div>
+                    <FormLabel>Hide progress bar</FormLabel>
+                    <FormDescription>Disable the visibility of survey progress.</FormDescription>
+                  </div>
+                </FormItem>
+              )}
+            />
+          </div>
+
+          {isLogoVisible && (!surveyType || surveyType === "link") && !isSettingsPage && (
+            <div className="flex items-center space-x-1">
+              <FormField
+                control={form.control}
+                name="isLogoHidden"
+                render={({ field }) => (
+                  <FormItem className="flex w-full items-center gap-2 space-y-0">
+                    <FormControl>
+                      <Switch
+                        id="isLogoHidden"
+                        checked={!!field.value}
+                        onCheckedChange={(checked) => field.onChange(checked)}
+                      />
+                    </FormControl>
+
+                    <div>
+                      <FormLabel>
+                        Hide logo
+                        <Badge text="Link Surveys" type="gray" size="normal" />
+                      </FormLabel>
+                      <FormDescription>Hides the logo in this specific survey</FormDescription>
+                    </div>
+                  </FormItem>
                 )}
+              />
+            </div>
+          )}
+
+          {(!surveyType || isAppSurvey) && (
+            <div className="flex max-w-xs flex-col gap-4">
+              <div className="flex items-center space-x-1">
+                <FormField
+                  control={form.control}
+                  name="highlightBorderColor"
+                  render={({ field }) => (
+                    <FormItem className="flex w-full flex-col gap-2 space-y-0">
+                      <div className="flex items-center gap-2">
+                        <FormControl>
+                          <Switch
+                            id="highlightBorderColor"
+                            checked={!!field.value}
+                            onCheckedChange={(checked) => {
+                              if (!checked) {
+                                field.onChange(null);
+                                return;
+                              }
+
+                              field.onChange({
+                                light: COLOR_DEFAULTS.highlightBorderColor,
+                              });
+                            }}
+                          />
+                        </FormControl>
+
+                        <div>
+                          <FormLabel>Add highlight border</FormLabel>
+                          <FormDescription className="text-xs font-normal text-slate-500">
+                            Add an outer border to your survey card.
+                          </FormDescription>
+                        </div>
+                      </div>
+
+                      {!!field.value && (
+                        <FormControl>
+                          <ColorPicker
+                            color={field.value?.light ?? COLOR_DEFAULTS.highlightBorderColor}
+                            onChange={(color: string) =>
+                              field.onChange({
+                                ...field.value,
+                                light: color,
+                              })
+                            }
+                            containerClass="my-0"
+                          />
+                        </FormControl>
+                      )}
+                    </FormItem>
+                  )}
+                />
               </div>
-            )}
-          </>
+            </div>
+          )}
         </div>
       </Collapsible.CollapsibleContent>
     </Collapsible.Root>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
index 529dd81b592..e79c48885e8 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings.tsx
@@ -3,6 +3,7 @@
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { CheckIcon, SparklesIcon } from "lucide-react";
 import React from "react";
+import { UseFormReturn } from "react-hook-form";
 
 import { cn } from "@formbricks/lib/cn";
 import { COLOR_DEFAULTS } from "@formbricks/lib/styling/constants";
@@ -10,67 +11,42 @@ import { mixColor } from "@formbricks/lib/utils";
 import { TProductStyling } from "@formbricks/types/product";
 import { TSurveyStyling } from "@formbricks/types/surveys";
 import { Button } from "@formbricks/ui/Button";
-import { ColorSelectorWithLabel } from "@formbricks/ui/Styling";
+import { ColorSelector } from "@formbricks/ui/ColorSelector";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel } from "@formbricks/ui/Form";
 
 type FormStylingSettingsProps = {
-  styling: TSurveyStyling | TProductStyling | null;
-  setStyling: React.Dispatch<React.SetStateAction<TSurveyStyling | TProductStyling>>;
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   isSettingsPage?: boolean;
   disabled?: boolean;
+  form: UseFormReturn<TProductStyling | TSurveyStyling>;
 };
 
 export const FormStylingSettings = ({
-  styling,
-  setStyling,
   open,
   isSettingsPage = false,
   disabled = false,
   setOpen,
+  form,
 }: FormStylingSettingsProps) => {
-  const brandColor = styling?.brandColor?.light || COLOR_DEFAULTS.brandColor;
-  const setBrandColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      brandColor: {
-        ...(prev.brandColor ?? {}),
-        light: color,
-      },
-    }));
+  const brandColor = form.watch("brandColor.light") || COLOR_DEFAULTS.brandColor;
+  const background = form.watch("background");
+  const highlightBorderColor = form.watch("highlightBorderColor");
+
+  const setQuestionColor = (color: string) => form.setValue("questionColor.light", color);
+  const setInputColor = (color: string) => form.setValue("inputColor.light", color);
+  const setInputBorderColor = (color: string) => form.setValue("inputBorderColor.light", color);
+  const setCardBackgroundColor = (color: string) => form.setValue("cardBackgroundColor.light", color);
+  const setCardBorderColor = (color: string) => form.setValue("cardBorderColor.light", color);
+  const setCardShadowColor = (color: string) => form.setValue("cardShadowColor.light", color);
+  const setBackgroundColor = (color: string) => {
+    form.setValue("background", {
+      bg: color,
+      bgType: "color",
+    });
   };
-
-  const questionColor = styling?.questionColor?.light || COLOR_DEFAULTS.questionColor;
-  const setQuestionColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      questionColor: {
-        ...(prev.questionColor ?? {}),
-        light: color,
-      },
-    }));
-  };
-
-  const inputColor = styling?.inputColor?.light || COLOR_DEFAULTS.inputColor;
-  const setInputColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      inputColor: {
-        ...(prev.inputColor ?? {}),
-        light: color,
-      },
-    }));
-  };
-
-  const inputBorderColor = styling?.inputBorderColor?.light || COLOR_DEFAULTS.inputBorderColor;
-  const setInputBorderColor = (color: string) => {
-    setStyling((prev) => ({
-      ...prev,
-      inputBorderColor: {
-        ...(prev.inputBorderColor ?? {}),
-        light: color,
-      },
-    }));
+  const setHighlightBorderColor = (color: string) => {
+    form.setValue("highlightBorderColor", { light: mixColor(color, "#ffffff", 0.25) });
   };
 
   const suggestColors = () => {
@@ -79,42 +55,16 @@ export const FormStylingSettings = ({
     setInputColor(mixColor(brandColor, "#ffffff", 0.92));
     setInputBorderColor(mixColor(brandColor, "#ffffff", 0.6));
 
-    // card background, border and shadow colors
-    setStyling((prev) => ({
-      ...prev,
-      cardBackgroundColor: {
-        ...(prev.cardBackgroundColor ?? {}),
-        light: mixColor(brandColor, "#ffffff", 0.97),
-      },
-      cardBorderColor: {
-        ...(prev.cardBorderColor ?? {}),
-        light: mixColor(brandColor, "#ffffff", 0.8),
-      },
-      cardShadowColor: {
-        ...(prev.cardShadowColor ?? {}),
-        light: brandColor,
-      },
-    }));
-
-    if (!styling?.background || styling?.background?.bgType === "color") {
-      setStyling((prev) => ({
-        ...prev,
-        background: {
-          ...(prev.background ?? {}),
-          bg: mixColor(brandColor, "#ffffff", 0.855),
-          bgType: "color",
-        },
-      }));
+    setCardBackgroundColor(mixColor(brandColor, "#ffffff", 0.97));
+    setCardBorderColor(mixColor(brandColor, "#ffffff", 0.8));
+    setCardShadowColor(brandColor);
+
+    if (!background || background?.bgType === "color") {
+      setBackgroundColor(mixColor(brandColor, "#ffffff", 0.855));
     }
 
-    if (styling?.highlightBorderColor) {
-      setStyling((prev) => ({
-        ...prev,
-        highlightBorderColor: {
-          ...(prev.highlightBorderColor ?? {}),
-          light: mixColor(brandColor, "#ffffff", 0.25),
-        },
-      }));
+    if (!highlightBorderColor) {
+      setHighlightBorderColor(brandColor);
     }
   };
 
@@ -159,14 +109,28 @@ export const FormStylingSettings = ({
 
         <div className="flex flex-col gap-6 p-6 pt-2">
           <div className="flex flex-col gap-2">
-            <ColorSelectorWithLabel
-              label="Brand color"
-              color={brandColor}
-              setColor={setBrandColor}
-              description="Change the brand color of the survey"
+            <FormField
+              control={form.control}
+              name="brandColor.light"
+              render={({ field }) => (
+                <FormItem className="space-y-4">
+                  <div>
+                    <FormLabel>Brand color</FormLabel>
+                    <FormDescription>Change the brand color of the survey.</FormDescription>
+                  </div>
+
+                  <FormControl>
+                    <ColorSelector
+                      color={field.value || COLOR_DEFAULTS.brandColor}
+                      setColor={(color) => field.onChange(color)}
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
             />
 
             <Button
+              type="button"
               variant="secondary"
               size="sm"
               EndIcon={SparklesIcon}
@@ -176,25 +140,64 @@ export const FormStylingSettings = ({
             </Button>
           </div>
 
-          <ColorSelectorWithLabel
-            label="Text color"
-            color={questionColor}
-            setColor={setQuestionColor}
-            description="Change the text color of the questions, descriptions and answer options."
+          <FormField
+            control={form.control}
+            name="questionColor.light"
+            render={({ field }) => (
+              <FormItem className="space-y-4">
+                <div>
+                  <FormLabel>Question color</FormLabel>
+                  <FormDescription>Change the question color of the survey.</FormDescription>
+                </div>
+
+                <FormControl>
+                  <ColorSelector
+                    color={field.value || COLOR_DEFAULTS.questionColor}
+                    setColor={(color) => field.onChange(color)}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
           />
 
-          <ColorSelectorWithLabel
-            label="Input color"
-            color={inputColor}
-            setColor={setInputColor}
-            description="Change the background color of the input fields."
+          <FormField
+            control={form.control}
+            name="inputColor.light"
+            render={({ field }) => (
+              <FormItem className="space-y-4">
+                <div>
+                  <FormLabel>Input color</FormLabel>
+                  <FormDescription>Change the background color of the input fields.</FormDescription>
+                </div>
+
+                <FormControl>
+                  <ColorSelector
+                    color={field.value || COLOR_DEFAULTS.inputColor}
+                    setColor={(color: string) => field.onChange(color)}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
           />
 
-          <ColorSelectorWithLabel
-            label="Input border color"
-            color={inputBorderColor}
-            setColor={setInputBorderColor}
-            description="Change the border color of the input fields."
+          <FormField
+            control={form.control}
+            name="inputBorderColor.light"
+            render={({ field }) => (
+              <FormItem className="space-y-4">
+                <div>
+                  <FormLabel>Input border color</FormLabel>
+                  <FormDescription>Change the border color of the input fields.</FormDescription>
+                </div>
+
+                <FormControl>
+                  <ColorSelector
+                    color={field.value || COLOR_DEFAULTS.inputBorderColor}
+                    setColor={(color: string) => field.onChange(color)}
+                  />
+                </FormControl>
+              </FormItem>
+            )}
           />
         </div>
       </Collapsible.CollapsibleContent>
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx
index 5e9c25b33ed..01bc38db6a6 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingView.tsx
@@ -1,13 +1,24 @@
 import { RotateCcwIcon } from "lucide-react";
 import Link from "next/link";
 import React, { useEffect, useMemo, useState } from "react";
+import { UseFormReturn, useForm, useWatch } from "react-hook-form";
 import toast from "react-hot-toast";
 
+import { COLOR_DEFAULTS } from "@formbricks/lib/styling/constants";
 import { TEnvironment } from "@formbricks/types/environment";
-import { TProduct } from "@formbricks/types/product";
+import { TProduct, TProductStyling } from "@formbricks/types/product";
+import { TBaseStyling } from "@formbricks/types/styling";
 import { TSurvey, TSurveyStyling } from "@formbricks/types/surveys";
 import { AlertDialog } from "@formbricks/ui/AlertDialog";
 import { Button } from "@formbricks/ui/Button";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormProvider,
+} from "@formbricks/ui/Form";
 import { Switch } from "@formbricks/ui/Switch";
 
 import { BackgroundStylingCard } from "./BackgroundStylingCard";
@@ -39,9 +50,54 @@ export const StylingView = ({
   setLocalStylingChanges,
   isUnsplashConfigured,
 }: StylingViewProps) => {
-  const [overwriteThemeStyling, setOverwriteThemeStyling] = useState(
-    localSurvey?.styling?.overwriteThemeStyling ?? false
-  );
+  const stylingDefaults: TBaseStyling = useMemo(() => {
+    let stylingDefaults: TBaseStyling;
+    const isOverwriteEnabled = localSurvey.styling?.overwriteThemeStyling ?? false;
+
+    if (isOverwriteEnabled) {
+      const { overwriteThemeStyling, ...baseSurveyStyles } = localSurvey.styling ?? {};
+      stylingDefaults = baseSurveyStyles;
+    } else {
+      const { allowStyleOverwrite, ...baseProductStyles } = product.styling ?? {};
+      stylingDefaults = baseProductStyles;
+    }
+
+    return {
+      brandColor: { light: stylingDefaults.brandColor?.light ?? COLOR_DEFAULTS.brandColor },
+      questionColor: { light: stylingDefaults.questionColor?.light ?? COLOR_DEFAULTS.questionColor },
+      inputColor: { light: stylingDefaults.inputColor?.light ?? COLOR_DEFAULTS.inputColor },
+      inputBorderColor: { light: stylingDefaults.inputBorderColor?.light ?? COLOR_DEFAULTS.inputBorderColor },
+      cardBackgroundColor: {
+        light: stylingDefaults.cardBackgroundColor?.light ?? COLOR_DEFAULTS.cardBackgroundColor,
+      },
+      cardBorderColor: { light: stylingDefaults.cardBorderColor?.light ?? COLOR_DEFAULTS.cardBorderColor },
+      cardShadowColor: { light: stylingDefaults.cardShadowColor?.light ?? COLOR_DEFAULTS.cardShadowColor },
+      highlightBorderColor: stylingDefaults.highlightBorderColor?.light
+        ? {
+            light: stylingDefaults.highlightBorderColor.light,
+          }
+        : undefined,
+      isDarkModeEnabled: stylingDefaults.isDarkModeEnabled ?? false,
+      roundness: stylingDefaults.roundness ?? 8,
+      cardArrangement: stylingDefaults.cardArrangement ?? {
+        linkSurveys: "simple",
+        appSurveys: "simple",
+      },
+      background: stylingDefaults.background,
+      hideProgressBar: stylingDefaults.hideProgressBar ?? false,
+      isLogoHidden: stylingDefaults.isLogoHidden ?? false,
+    };
+  }, [localSurvey.styling, product.styling]);
+
+  const form = useForm<TSurveyStyling>({
+    defaultValues: {
+      ...localSurvey.styling,
+      ...stylingDefaults,
+    },
+  });
+
+  const overwriteThemeStyling = form.watch("overwriteThemeStyling");
+  const setOverwriteThemeStyling = (value: boolean) => form.setValue("overwriteThemeStyling", value);
 
   const [formStylingOpen, setFormStylingOpen] = useState(false);
   const [cardStylingOpen, setCardStylingOpen] = useState(false);
@@ -56,8 +112,13 @@ export const StylingView = ({
       ...baseStyling,
       overwriteThemeStyling: true,
     });
-    setConfirmResetStylingModalOpen(false);
 
+    form.reset({
+      ...baseStyling,
+      overwriteThemeStyling: true,
+    });
+
+    setConfirmResetStylingModalOpen(false);
     toast.success("Styling set to theme styles");
   };
 
@@ -69,14 +130,20 @@ export const StylingView = ({
     }
   }, [overwriteThemeStyling]);
 
+  const watchedValues = useWatch({
+    control: form.control,
+  });
+
   useEffect(() => {
-    if (styling) {
-      setLocalSurvey((prev) => ({
-        ...prev,
-        styling,
-      }));
-    }
-  }, [setLocalSurvey, styling]);
+    // @ts-expect-error
+    setLocalSurvey((prev) => ({
+      ...prev,
+      styling: {
+        ...prev.styling,
+        ...watchedValues,
+      },
+    }));
+  }, [watchedValues, setLocalSurvey]);
 
   const defaultProductStyling = useMemo(() => {
     const { styling: productStyling } = product;
@@ -129,79 +196,96 @@ export const StylingView = ({
   };
 
   return (
-    <div className="mt-12 space-y-3 p-5">
-      <div className="flex items-center gap-4 py-4">
-        <Switch checked={overwriteThemeStyling} onCheckedChange={handleOverwriteToggle} />
-        <div className="flex flex-col">
-          <h3 className="text-base font-semibold text-slate-900">Add custom styles</h3>
-          <p className="text-sm text-slate-800">Override the theme with individual styles for this survey.</p>
-        </div>
-      </div>
-
-      <FormStylingSettings
-        open={formStylingOpen}
-        setOpen={setFormStylingOpen}
-        styling={styling}
-        setStyling={setStyling}
-        disabled={!overwriteThemeStyling}
-      />
-
-      <CardStylingSettings
-        open={cardStylingOpen}
-        setOpen={setCardStylingOpen}
-        styling={styling}
-        setStyling={setStyling}
-        surveyType={localSurvey.type}
-        disabled={!overwriteThemeStyling}
-        localProduct={product}
-      />
-
-      {localSurvey.type === "link" && (
-        <BackgroundStylingCard
-          open={stylingOpen}
-          setOpen={setStylingOpen}
-          styling={styling}
-          setStyling={setStyling}
-          environmentId={environment.id}
-          colors={colors}
-          disabled={!overwriteThemeStyling}
-          isUnsplashConfigured={isUnsplashConfigured}
-        />
-      )}
-
-      <div className="mt-4 flex h-8 items-center justify-between">
-        <div>
-          {overwriteThemeStyling && (
-            <Button
-              variant="minimal"
-              className="flex items-center gap-2"
-              onClick={() => setConfirmResetStylingModalOpen(true)}>
-              Reset to theme styles
-              <RotateCcwIcon className="h-4 w-4" />
-            </Button>
+    <FormProvider {...form}>
+      <form onSubmit={(e) => e.preventDefault()}>
+        <div className="mt-12 space-y-3 p-5">
+          <div className="flex items-center gap-4 py-4">
+            <FormField
+              control={form.control}
+              name="overwriteThemeStyling"
+              render={({ field }) => (
+                <FormItem className="flex items-center gap-2 space-y-0">
+                  <FormControl>
+                    <Switch checked={!!field.value} onCheckedChange={handleOverwriteToggle} />
+                  </FormControl>
+
+                  <div>
+                    <FormLabel className="text-base font-semibold text-slate-900">
+                      Add custom styles
+                    </FormLabel>
+                    <FormDescription className="text-sm text-slate-800">
+                      Override the theme with individual styles for this survey.
+                    </FormDescription>
+                  </div>
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <FormStylingSettings
+            open={formStylingOpen}
+            setOpen={setFormStylingOpen}
+            disabled={!overwriteThemeStyling}
+            form={form as UseFormReturn<TProductStyling | TSurveyStyling>}
+          />
+
+          <CardStylingSettings
+            open={cardStylingOpen}
+            setOpen={setCardStylingOpen}
+            surveyType={localSurvey.type}
+            disabled={!overwriteThemeStyling}
+            product={product}
+            form={form as UseFormReturn<TProductStyling | TSurveyStyling>}
+          />
+
+          {localSurvey.type === "link" && (
+            <BackgroundStylingCard
+              open={stylingOpen}
+              setOpen={setStylingOpen}
+              environmentId={environment.id}
+              colors={colors}
+              disabled={!overwriteThemeStyling}
+              isUnsplashConfigured={isUnsplashConfigured}
+              form={form as UseFormReturn<TProductStyling | TSurveyStyling>}
+            />
           )}
+
+          <div className="mt-4 flex h-8 items-center justify-between">
+            <div>
+              {overwriteThemeStyling && (
+                <Button
+                  type="button"
+                  variant="minimal"
+                  className="flex items-center gap-2"
+                  onClick={() => setConfirmResetStylingModalOpen(true)}>
+                  Reset to theme styles
+                  <RotateCcwIcon className="h-4 w-4" />
+                </Button>
+              )}
+            </div>
+            <p className="text-sm text-slate-500">
+              Adjust the theme in the{" "}
+              <Link
+                href={`/environments/${environment.id}/product/look`}
+                target="_blank"
+                className="font-semibold underline">
+                Look & Feel
+              </Link>{" "}
+              settings
+            </p>
+          </div>
+
+          <AlertDialog
+            open={confirmResetStylingModalOpen}
+            setOpen={setConfirmResetStylingModalOpen}
+            headerText="Reset to theme styles"
+            mainText="Are you sure you want to reset the styling to the theme styles? This will remove all custom styling."
+            confirmBtnLabel="Confirm"
+            onDecline={() => setConfirmResetStylingModalOpen(false)}
+            onConfirm={onResetThemeStyling}
+          />
         </div>
-        <p className="text-sm text-slate-500">
-          Adjust the theme in the{" "}
-          <Link
-            href={`/environments/${environment.id}/product/look`}
-            target="_blank"
-            className="font-semibold underline">
-            Look & Feel
-          </Link>{" "}
-          settings
-        </p>
-      </div>
-
-      <AlertDialog
-        open={confirmResetStylingModalOpen}
-        setOpen={setConfirmResetStylingModalOpen}
-        headerText="Reset to theme styles"
-        mainText="Are you sure you want to reset the styling to the theme styles? This will remove all custom styling."
-        confirmBtnLabel="Confirm"
-        onDecline={() => setConfirmResetStylingModalOpen(false)}
-        onConfirm={onResetThemeStyling}
-      />
-    </div>
+      </form>
+    </FormProvider>
   );
 };
diff --git a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
index c8ac7324516..13c4afc4bf6 100644
--- a/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
+++ b/apps/web/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
@@ -1,7 +1,5 @@
 import { useEffect, useState } from "react";
 
-import { TProductStyling } from "@formbricks/types/product";
-import { TSurveyStyling } from "@formbricks/types/surveys";
 import { TabBar } from "@formbricks/ui/TabBar";
 
 import { AnimatedSurveyBg } from "./AnimatedSurveyBg";
@@ -14,8 +12,8 @@ interface SurveyBgSelectorTabProps {
   colors: string[];
   bgType: string | null | undefined;
   environmentId: string;
-  styling: TSurveyStyling | TProductStyling | null;
   isUnsplashConfigured: boolean;
+  bg: string;
 }
 
 const tabs = [
@@ -26,29 +24,28 @@ const tabs = [
 ];
 
 export const SurveyBgSelectorTab = ({
-  styling,
   handleBgChange,
   colors,
   bgType,
+  bg,
   environmentId,
   isUnsplashConfigured,
 }: SurveyBgSelectorTabProps) => {
   const [activeTab, setActiveTab] = useState(bgType || "color");
-  const bgUrl = styling?.background?.bg || "";
 
-  const [colorBackground, setColorBackground] = useState(bgUrl);
-  const [animationBackground, setAnimationBackground] = useState(bgUrl);
-  const [uploadBackground, setUploadBackground] = useState(bgUrl);
+  const [colorBackground, setColorBackground] = useState(bg);
+  const [animationBackground, setAnimationBackground] = useState(bg);
+  const [uploadBackground, setUploadBackground] = useState(bg);
 
   useEffect(() => {
     if (bgType === "color") {
-      setColorBackground(bgUrl);
+      setColorBackground(bg);
       setAnimationBackground("");
       setUploadBackground("");
     }
 
     if (bgType === "animation") {
-      setAnimationBackground(bgUrl);
+      setAnimationBackground(bg);
       setColorBackground("");
       setUploadBackground("");
     }
@@ -60,11 +57,11 @@ export const SurveyBgSelectorTab = ({
     }
 
     if (bgType === "upload") {
-      setUploadBackground(bgUrl);
+      setUploadBackground(bg);
       setColorBackground("");
       setAnimationBackground("");
     }
-  }, [bgUrl, bgType, isUnsplashConfigured]);
+  }, [bg, bgType, isUnsplashConfigured]);
 
   const renderContent = () => {
     switch (activeTab) {
@@ -90,7 +87,7 @@ export const SurveyBgSelectorTab = ({
   };
 
   return (
-    <div className="mt-4 flex flex-col items-center justify-center rounded-lg ">
+    <div className="mt-4 flex flex-col items-center justify-center rounded-lg">
       <TabBar
         tabs={tabs.filter((tab) => tab.id !== "image" || isUnsplashConfigured)}
         activeId={activeTab}
diff --git a/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx b/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx
index 64ce3f0d7c7..875877a9684 100644
--- a/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditProductNameForm.tsx
@@ -7,7 +7,7 @@ import { z } from "zod";
 
 import { TProduct, ZProduct } from "@formbricks/types/product";
 import { Button } from "@formbricks/ui/Button";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormProvider } from "@formbricks/ui/Form";
+import { FormControl, FormError, FormField, FormItem, FormLabel, FormProvider } from "@formbricks/ui/Form";
 import { Input } from "@formbricks/ui/Input";
 
 import { updateProductAction } from "../actions";
@@ -85,7 +85,7 @@ export const EditProductNameForm: React.FC<EditProductNameProps> = ({
                   isInvalid={!!nameError}
                 />
               </FormControl>
-              <FormMessage />
+              <FormError />
             </FormItem>
           )}
         />
diff --git a/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditWaitingTimeForm.tsx b/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditWaitingTimeForm.tsx
index cae5c5905ff..a4fae3f709d 100644
--- a/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditWaitingTimeForm.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/general/components/EditWaitingTimeForm.tsx
@@ -7,7 +7,7 @@ import { z } from "zod";
 
 import { TProduct, ZProduct } from "@formbricks/types/product";
 import { Button } from "@formbricks/ui/Button";
-import { FormControl, FormField, FormItem, FormLabel, FormMessage, FormProvider } from "@formbricks/ui/Form";
+import { FormControl, FormError, FormField, FormItem, FormLabel, FormProvider } from "@formbricks/ui/Form";
 import { Input } from "@formbricks/ui/Input";
 
 import { updateProductAction } from "../actions";
@@ -70,7 +70,7 @@ export const EditWaitingTimeForm: React.FC<EditWaitingTimeProps> = ({ product, e
                   }}
                 />
               </FormControl>
-              <FormMessage />
+              <FormError />
             </FormItem>
           )}
         />
diff --git a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
index 64810dd886b..33fd48d116b 100644
--- a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStyling.tsx
@@ -4,22 +4,30 @@ import { BackgroundStylingCard } from "@/app/(app)/(survey-editor)/environments/
 import { CardStylingSettings } from "@/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/CardStylingSettings";
 import { FormStylingSettings } from "@/app/(app)/(survey-editor)/environments/[environmentId]/surveys/[surveyId]/edit/components/FormStylingSettings";
 import { ThemeStylingPreviewSurvey } from "@/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { RotateCcwIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
+import { SubmitHandler, UseFormReturn, useForm } from "react-hook-form";
 import toast from "react-hot-toast";
 
 import { COLOR_DEFAULTS, PREVIEW_SURVEY } from "@formbricks/lib/styling/constants";
-import { TProduct } from "@formbricks/types/product";
-import { TSurvey, TSurveyType } from "@formbricks/types/surveys";
+import { TProduct, TProductStyling, ZProductStyling } from "@formbricks/types/product";
+import { TSurvey, TSurveyStyling, TSurveyType } from "@formbricks/types/surveys";
 import { AlertDialog } from "@formbricks/ui/AlertDialog";
 import { Button } from "@formbricks/ui/Button";
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormProvider,
+} from "@formbricks/ui/Form";
 import { Switch } from "@formbricks/ui/Switch";
 
 import { updateProductAction } from "../actions";
 
-let setQuestionId = (_: string) => {};
-
 type ThemeStylingProps = {
   product: TProduct;
   environmentId: string;
@@ -29,84 +37,49 @@ type ThemeStylingProps = {
 
 export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigured }: ThemeStylingProps) => {
   const router = useRouter();
-  const [localProduct, setLocalProduct] = useState(product);
+
+  const form = useForm<TProductStyling>({
+    defaultValues: {
+      ...product.styling,
+
+      // specify the default values for the colors
+      allowStyleOverwrite: product.styling.allowStyleOverwrite ?? true,
+      brandColor: { light: product.styling.brandColor?.light ?? COLOR_DEFAULTS.brandColor },
+      questionColor: { light: product.styling.questionColor?.light ?? COLOR_DEFAULTS.questionColor },
+      inputColor: { light: product.styling.inputColor?.light ?? COLOR_DEFAULTS.inputColor },
+      inputBorderColor: { light: product.styling.inputBorderColor?.light ?? COLOR_DEFAULTS.inputBorderColor },
+      cardBackgroundColor: {
+        light: product.styling.cardBackgroundColor?.light ?? COLOR_DEFAULTS.cardBackgroundColor,
+      },
+      cardBorderColor: { light: product.styling.cardBorderColor?.light ?? COLOR_DEFAULTS.cardBorderColor },
+      cardShadowColor: { light: product.styling.cardShadowColor?.light ?? COLOR_DEFAULTS.cardShadowColor },
+      highlightBorderColor: product.styling.highlightBorderColor?.light
+        ? {
+            light: product.styling.highlightBorderColor.light,
+          }
+        : undefined,
+      isDarkModeEnabled: product.styling.isDarkModeEnabled ?? false,
+      roundness: product.styling.roundness ?? 8,
+      cardArrangement: product.styling.cardArrangement ?? {
+        linkSurveys: "simple",
+        appSurveys: "simple",
+      },
+      background: product.styling.background,
+      hideProgressBar: product.styling.hideProgressBar ?? false,
+      isLogoHidden: product.styling.isLogoHidden ?? false,
+    },
+    resolver: zodResolver(ZProductStyling),
+  });
+
   const [previewSurveyType, setPreviewSurveyType] = useState<TSurveyType>("link");
   const [confirmResetStylingModalOpen, setConfirmResetStylingModalOpen] = useState(false);
 
-  const [styling, setStyling] = useState(product.styling);
-
   const [formStylingOpen, setFormStylingOpen] = useState(false);
   const [cardStylingOpen, setCardStylingOpen] = useState(false);
   const [backgroundStylingOpen, setBackgroundStylingOpen] = useState(false);
 
-  const allowStyleOverwrite = localProduct.styling.allowStyleOverwrite ?? false;
-  const setAllowStyleOverwrite = (value: boolean) => {
-    setLocalProduct((prev) => ({
-      ...prev,
-      styling: {
-        ...prev.styling,
-        allowStyleOverwrite: value,
-      },
-    }));
-  };
-
-  const [styledPreviewSurvey, setStyledPreviewSurvey] = useState<TSurvey>(PREVIEW_SURVEY);
-
-  useEffect(() => {
-    setQuestionId(PREVIEW_SURVEY.questions[0].id);
-  }, []);
-
-  useEffect(() => {
-    // sync the local product with the product prop
-    // TODO: this is not ideal, we should find a better way to do this.
-    setLocalProduct(product);
-  }, [product]);
-
-  const onSave = useCallback(async () => {
-    await updateProductAction(product.id, {
-      styling: localProduct.styling,
-    });
-
-    toast.success("Styling updated successfully.");
-    router.refresh();
-  }, [localProduct, product.id, router]);
-
   const onReset = useCallback(async () => {
-    await updateProductAction(product.id, {
-      styling: {
-        allowStyleOverwrite: true,
-        brandColor: {
-          light: COLOR_DEFAULTS.brandColor,
-        },
-        questionColor: {
-          light: COLOR_DEFAULTS.questionColor,
-        },
-        inputColor: {
-          light: COLOR_DEFAULTS.inputColor,
-        },
-        inputBorderColor: {
-          light: COLOR_DEFAULTS.inputBorderColor,
-        },
-        cardBackgroundColor: {
-          light: COLOR_DEFAULTS.cardBackgroundColor,
-        },
-        cardBorderColor: {
-          light: COLOR_DEFAULTS.cardBorderColor,
-        },
-        isLogoHidden: undefined,
-        highlightBorderColor: undefined,
-        isDarkModeEnabled: false,
-        roundness: 8,
-        cardArrangement: {
-          linkSurveys: "simple",
-          appSurveys: "simple",
-        },
-      },
-    });
-
-    setAllowStyleOverwrite(true);
-
-    setStyling({
+    const defaultStyling: TProductStyling = {
       allowStyleOverwrite: true,
       brandColor: {
         light: COLOR_DEFAULTS.brandColor,
@@ -126,140 +99,156 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
       cardBorderColor: {
         light: COLOR_DEFAULTS.cardBorderColor,
       },
-      isLogoHidden: undefined,
+      isLogoHidden: false,
       highlightBorderColor: undefined,
       isDarkModeEnabled: false,
+      background: {
+        bg: "#fff",
+        bgType: "color",
+      },
       roundness: 8,
       cardArrangement: {
         linkSurveys: "simple",
         appSurveys: "simple",
       },
+    };
+
+    await updateProductAction(product.id, {
+      styling: { ...defaultStyling },
     });
 
-    // Update the background of the PREVIEW SURVEY
-    setStyledPreviewSurvey((currentSurvey) => ({
-      ...currentSurvey,
-      styling: {
-        ...currentSurvey.styling,
-        background: {
-          ...(currentSurvey.styling?.background ?? {}),
-          bg: "#ffffff",
-          bgType: "color",
-        },
-      },
-    }));
+    form.reset({ ...defaultStyling });
 
     toast.success("Styling updated successfully.");
     router.refresh();
-  }, [product.id, router]);
-
-  useEffect(() => {
-    setLocalProduct((prev) => ({
-      ...prev,
-      styling: {
-        ...styling,
-        allowStyleOverwrite,
-      },
-    }));
-  }, [allowStyleOverwrite, styling]);
+  }, [form, product.id, router]);
+
+  const onSubmit: SubmitHandler<TProductStyling> = async (data) => {
+    try {
+      const updatedProduct = await updateProductAction(product.id, {
+        styling: data,
+      });
+
+      form.reset({ ...updatedProduct.styling });
+      toast.success("Styling updated successfully.");
+    } catch (err) {
+      toast.error("Error updating styling.");
+    }
+  };
 
   return (
-    <div className="flex">
-      {/* Styling settings */}
-      <div className="relative flex w-1/2 flex-col pr-6">
-        <div className="flex flex-1 flex-col gap-4">
-          <div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
-            <div className="flex items-center gap-6">
-              <Switch
-                checked={allowStyleOverwrite}
-                onCheckedChange={(value) => {
-                  setAllowStyleOverwrite(value);
-                }}
-              />
-              <div className="flex flex-col">
-                <h3 className="text-sm font-semibold text-slate-700">Enable custom styling</h3>
-                <p className="text-xs text-slate-500">
-                  Allow users to override this theme in the survey editor.
-                </p>
+    <FormProvider {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)}>
+        <div className="flex">
+          {/* Styling settings */}
+          <div className="relative flex w-1/2 flex-col pr-6">
+            <div className="flex flex-1 flex-col gap-4">
+              <div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
+                <div className="flex items-center gap-6">
+                  <FormField
+                    control={form.control}
+                    name="allowStyleOverwrite"
+                    render={({ field }) => (
+                      <FormItem className="flex w-full items-center gap-2 space-y-0">
+                        <FormControl>
+                          <Switch
+                            checked={field.value}
+                            onCheckedChange={(value) => {
+                              field.onChange(value);
+                            }}
+                          />
+                        </FormControl>
+
+                        <div>
+                          <FormLabel>Enable custom styling</FormLabel>
+                          <FormDescription>
+                            Allow users to override this theme in the survey editor.
+                          </FormDescription>
+                        </div>
+                      </FormItem>
+                    )}
+                  />
+                </div>
               </div>
-            </div>
-          </div>
-
-          <div className="flex flex-col gap-3 rounded-lg bg-slate-50 p-4">
-            <FormStylingSettings
-              open={formStylingOpen}
-              setOpen={setFormStylingOpen}
-              styling={styling}
-              setStyling={setStyling}
-              isSettingsPage
-            />
 
-            <CardStylingSettings
-              open={cardStylingOpen}
-              setOpen={setCardStylingOpen}
-              styling={styling}
-              setStyling={setStyling}
-              isSettingsPage
-              localProduct={localProduct}
-              surveyType={previewSurveyType}
-            />
+              <div className="flex flex-col gap-3 rounded-lg bg-slate-50 p-4">
+                <FormStylingSettings
+                  open={formStylingOpen}
+                  setOpen={setFormStylingOpen}
+                  isSettingsPage
+                  form={form as UseFormReturn<TProductStyling | TSurveyStyling>}
+                />
+
+                <CardStylingSettings
+                  open={cardStylingOpen}
+                  setOpen={setCardStylingOpen}
+                  isSettingsPage
+                  product={product}
+                  surveyType={previewSurveyType}
+                  form={form as UseFormReturn<TProductStyling | TSurveyStyling>}
+                />
+
+                <BackgroundStylingCard
+                  open={backgroundStylingOpen}
+                  setOpen={setBackgroundStylingOpen}
+                  environmentId={environmentId}
+                  colors={colors}
+                  key={form.watch("background.bg")}
+                  isSettingsPage
+                  isUnsplashConfigured={isUnsplashConfigured}
+                  form={form as UseFormReturn<TProductStyling | TSurveyStyling>}
+                />
+              </div>
+            </div>
 
-            <BackgroundStylingCard
-              open={backgroundStylingOpen}
-              setOpen={setBackgroundStylingOpen}
-              styling={styling}
-              setStyling={setStyling}
-              environmentId={environmentId}
-              colors={colors}
-              key={styling.background?.bg}
-              isSettingsPage
-              isUnsplashConfigured={isUnsplashConfigured}
-            />
+            <div className="mt-4 flex items-center gap-2">
+              <Button variant="darkCTA" size="sm" type="submit">
+                Save
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="minimal"
+                className="flex items-center gap-2"
+                onClick={() => setConfirmResetStylingModalOpen(true)}>
+                Reset to default
+                <RotateCcwIcon className="h-4 w-4" />
+              </Button>
+            </div>
           </div>
-        </div>
 
-        <div className="mt-4 flex items-center gap-2">
-          <Button variant="darkCTA" size="sm" onClick={onSave}>
-            Save
-          </Button>
-          <Button
-            size="sm"
-            variant="minimal"
-            className="flex items-center gap-2"
-            onClick={() => setConfirmResetStylingModalOpen(true)}>
-            Reset to default
-            <RotateCcwIcon className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
+          {/* Survey Preview */}
 
-      {/* Survey Preview */}
+          <div className="relative w-1/2 rounded-lg bg-slate-100 pt-4">
+            <div className="sticky top-4 mb-4 h-[600px]">
+              <ThemeStylingPreviewSurvey
+                setQuestionId={(_id: string) => {}}
+                survey={PREVIEW_SURVEY as TSurvey}
+                product={{
+                  ...product,
+                  styling: form.getValues(),
+                }}
+                previewType={previewSurveyType}
+                setPreviewType={setPreviewSurveyType}
+              />
+            </div>
+          </div>
 
-      <div className="relative w-1/2 rounded-lg bg-slate-100 pt-4">
-        <div className="sticky top-4 mb-4 h-[600px]">
-          <ThemeStylingPreviewSurvey
-            setQuestionId={setQuestionId}
-            survey={styledPreviewSurvey as TSurvey}
-            product={localProduct}
-            previewType={previewSurveyType}
-            setPreviewType={setPreviewSurveyType}
+          {/* Confirm reset styling modal */}
+          <AlertDialog
+            open={confirmResetStylingModalOpen}
+            setOpen={setConfirmResetStylingModalOpen}
+            headerText="Reset styling"
+            mainText="Are you sure you want to reset the styling to default?"
+            confirmBtnLabel="Confirm"
+            onConfirm={() => {
+              onReset();
+              setConfirmResetStylingModalOpen(false);
+            }}
+            onDecline={() => setConfirmResetStylingModalOpen(false)}
           />
         </div>
-      </div>
-
-      {/* Confirm reset styling modal */}
-      <AlertDialog
-        open={confirmResetStylingModalOpen}
-        setOpen={setConfirmResetStylingModalOpen}
-        headerText="Reset styling"
-        mainText="Are you sure you want to reset the styling to default?"
-        confirmBtnLabel="Confirm"
-        onConfirm={() => {
-          onReset();
-          setConfirmResetStylingModalOpen(false);
-        }}
-        onDecline={() => setConfirmResetStylingModalOpen(false)}
-      />
-    </div>
+      </form>
+    </FormProvider>
   );
 };
diff --git a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
index 9b4b86f829c..164ae95ba0d 100644
--- a/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/product/look/components/ThemeStylingPreviewSurvey.tsx
@@ -137,7 +137,7 @@ export const ThemeStylingPreviewSurvey = ({
               : "expanded_with_fixed_positioning"
             : "shrink"
         }
-        className="relative flex h-[95] max-h-[95%] w-5/6 items-center justify-center rounded-lg border border-slate-300 bg-slate-200">
+        className="relative flex h-[95%] max-h-[95%] w-5/6 items-center justify-center rounded-lg border border-slate-300 bg-slate-200">
         <div className="flex h-full w-5/6 flex-1 flex-col">
           <div className="flex h-8 w-full items-center rounded-t-lg bg-slate-100">
             <div className="ml-6 flex space-x-2">
@@ -184,7 +184,7 @@ export const ThemeStylingPreviewSurvey = ({
                 </div>
               )}
               <div
-                className={`${product.logo?.url && !product.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0  w-full max-w-md rounded-lg p-4`}>
+                className={`${product.logo?.url && !product.styling.isLogoHidden && !isFullScreenPreview ? "mt-12" : ""} z-0 w-full max-w-md rounded-lg p-4`}>
                 <SurveyInline
                   survey={{ ...survey, type: "link" }}
                   isBrandingEnabled={product.linkSurveyBranding}
diff --git a/apps/web/playwright/onboarding.spec.ts b/apps/web/playwright/onboarding.spec.ts
index a91cc1532aa..f0467bd694a 100644
--- a/apps/web/playwright/onboarding.spec.ts
+++ b/apps/web/playwright/onboarding.spec.ts
@@ -14,6 +14,7 @@ test.describe("Onboarding Flow Test", async () => {
 
     await page.getByRole("button", { name: "Link Surveys Create a new" }).click();
     await page.getByRole("button", { name: "Collect Feedback Collect" }).click();
+    await page.waitForTimeout(2000);
     await page.getByRole("button", { name: "Publish" }).click();
 
     await page.waitForURL(/\/environments\/[^/]+\/surveys/);
diff --git a/packages/surveys/src/components/general/Survey.tsx b/packages/surveys/src/components/general/Survey.tsx
index e9c219ab82c..608094cb5a8 100644
--- a/packages/surveys/src/components/general/Survey.tsx
+++ b/packages/surveys/src/components/general/Survey.tsx
@@ -50,7 +50,6 @@ export const Survey = ({
       return survey?.questions[0]?.id;
     }
   });
-  // );
   const [showError, setShowError] = useState(false);
   // flag state to store whether response processing has been completed or not, we ignore this check for survey editor preview and link survey preview where getSetIsResponseSendingFinished is undefined
   const [isResponseSendingFinished, setIsResponseSendingFinished] = useState(
diff --git a/packages/types/styling.ts b/packages/types/styling.ts
index 3459b1f7742..ae9165285bc 100644
--- a/packages/types/styling.ts
+++ b/packages/types/styling.ts
@@ -16,11 +16,22 @@ export const ZCardArrangement = z.object({
   appSurveys: ZCardArrangementOptions,
 });
 
-export const ZSurveyStylingBackground = z.object({
-  bg: z.string().nullish(),
-  bgType: z.enum(["animation", "color", "image", "upload"]).nullish(),
-  brightness: z.number().nullish(),
-});
+export const ZSurveyStylingBackground = z
+  .object({
+    bg: z.string().nullish(),
+    bgType: z.enum(["animation", "color", "image", "upload"]).nullish(),
+    brightness: z.number().nullish(),
+  })
+  .refine(
+    (surveyBackground) => {
+      if (surveyBackground.bgType === "upload") {
+        return !!surveyBackground.bg;
+      }
+
+      return true;
+    },
+    { message: "Invalid background" }
+  );
 
 export type TSurveyStylingBackground = z.infer<typeof ZSurveyStylingBackground>;
 
@@ -40,3 +51,5 @@ export const ZBaseStyling = z.object({
   hideProgressBar: z.boolean().nullish(),
   isLogoHidden: z.boolean().nullish(),
 });
+
+export type TBaseStyling = z.infer<typeof ZBaseStyling>;
diff --git a/packages/ui/CardArrangementTabs/index.tsx b/packages/ui/CardArrangementTabs/index.tsx
new file mode 100644
index 00000000000..3293921e15e
--- /dev/null
+++ b/packages/ui/CardArrangementTabs/index.tsx
@@ -0,0 +1,56 @@
+import { TCardArrangementOptions } from "@formbricks/types/styling";
+import { TSurveyType } from "@formbricks/types/surveys";
+
+import { Tabs } from "../Tabs";
+import { CasualCardArrangementIcon } from "../icons/CasualCardArrangementIcon";
+import { SimpleCardsArrangementIcon } from "../icons/SimpleCardArrangementIcon";
+import { StraightCardArrangementIcon } from "../icons/StraightCardArrangementIcon";
+
+interface CardArrangementTabsProps {
+  surveyType: TSurveyType;
+  activeCardArrangement: TCardArrangementOptions;
+  setActiveCardArrangement: (arrangement: TCardArrangementOptions, surveyType: TSurveyType) => void;
+  disabled?: boolean;
+}
+
+export const CardArrangementTabs = ({
+  activeCardArrangement,
+  surveyType,
+  setActiveCardArrangement,
+  disabled = false,
+}: CardArrangementTabsProps) => {
+  const handleCardArrangementChange = (arrangement: TCardArrangementOptions) => {
+    if (disabled) return;
+    setActiveCardArrangement(arrangement, surveyType);
+  };
+
+  const getCardArrangementIcon = (cardArrangement: string) => {
+    switch (cardArrangement) {
+      case "casual":
+        return <CasualCardArrangementIcon />;
+      case "straight":
+        return <StraightCardArrangementIcon />;
+      default:
+        return <SimpleCardsArrangementIcon />;
+    }
+  };
+
+  return (
+    <div className="w-full gap-2 rounded-md bg-white">
+      <Tabs
+        id="card-arrangement"
+        onChange={(value) => {
+          handleCardArrangementChange(value);
+        }}
+        options={[
+          { value: "casual", label: "Casual", icon: getCardArrangementIcon("casual") },
+          { value: "straight", label: "Straight", icon: getCardArrangementIcon("straight") },
+          { value: "simple", label: "Simple", icon: getCardArrangementIcon("simple") },
+        ]}
+        defaultSelected={activeCardArrangement}
+        className="w-full"
+        tabsContainerClassName="p-1 gap-2"
+      />
+    </div>
+  );
+};
diff --git a/packages/ui/ColorSelector/index.tsx b/packages/ui/ColorSelector/index.tsx
new file mode 100644
index 00000000000..3c8e504d7f1
--- /dev/null
+++ b/packages/ui/ColorSelector/index.tsx
@@ -0,0 +1,18 @@
+import { cn } from "@formbricks/lib/cn";
+
+import { ColorPicker } from "../ColorPicker";
+
+type ColorSelectorProps = {
+  color: string;
+  setColor: (color: string) => void;
+  className?: string;
+  disabled?: boolean;
+};
+
+export const ColorSelector = ({ color, setColor, className = "", disabled = false }: ColorSelectorProps) => {
+  return (
+    <div className={cn("max-w-xs", disabled ? "opacity-40" : "", className)}>
+      <ColorPicker color={color} onChange={setColor} containerClass="my-0" disabled={disabled} />
+    </div>
+  );
+};
diff --git a/packages/ui/Form/index.tsx b/packages/ui/Form/index.tsx
index b5316b32543..85e1cf43813 100644
--- a/packages/ui/Form/index.tsx
+++ b/packages/ui/Form/index.tsx
@@ -110,21 +110,14 @@ FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => {
-    const { formDescriptionId } = useFormField();
+    const { formItemId } = useFormField();
 
-    return (
-      <p
-        ref={ref}
-        id={formDescriptionId}
-        className={cn("text-muted-foreground text-sm", className)}
-        {...props}
-      />
-    );
+    return <p ref={ref} id={formItemId} className={cn("text-xs text-slate-500", className)} {...props} />;
   }
 );
 FormDescription.displayName = "FormDescription";
 
-const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+const FormError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, children, ...props }, ref) => {
     const { error, formMessageId } = useFormField();
     const body = error ? String(error?.message) : children;
@@ -140,7 +133,7 @@ const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<
     );
   }
 );
-FormMessage.displayName = "FormMessage";
+FormError.displayName = "FormError";
 
 export {
   useFormField,
@@ -149,6 +142,6 @@ export {
   FormLabel,
   FormControl,
   FormDescription,
-  FormMessage,
+  FormError,
   FormField,
 };
diff --git a/packages/ui/Styling/components/CardArrangement.tsx b/packages/ui/Styling/components/CardArrangement.tsx
deleted file mode 100644
index 958ebac6bdd..00000000000
--- a/packages/ui/Styling/components/CardArrangement.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import { useMemo } from "react";
-
-import { cn } from "@formbricks/lib/cn";
-import { capitalizeFirstLetter } from "@formbricks/lib/strings";
-import { TCardArrangementOptions } from "@formbricks/types/styling";
-import { TSurveyType } from "@formbricks/types/surveys";
-
-import { Button } from "../../Button";
-import {
-  CasualCardArrangementIcon,
-  NoCardsArrangementIcon,
-  StraightCardArrangementIcon,
-} from "./CardArrangementIcons";
-
-interface CardArrangementProps {
-  surveyType: TSurveyType;
-  activeCardArrangement: TCardArrangementOptions;
-  setActiveCardArrangement: (arrangement: TCardArrangementOptions, surveyType: TSurveyType) => void;
-  disabled?: boolean;
-}
-
-export const CardArrangement = ({
-  activeCardArrangement,
-  surveyType,
-  setActiveCardArrangement,
-  disabled = false,
-}: CardArrangementProps) => {
-  const surveyTypeDerived = useMemo(() => {
-    return surveyType == "link" ? "Link" : "App / Website";
-  }, [surveyType]);
-  const cardArrangementTypes: TCardArrangementOptions[] = ["casual", "straight", "simple"];
-
-  const handleCardArrangementChange = (arrangement: TCardArrangementOptions) => {
-    if (disabled) return;
-    setActiveCardArrangement(arrangement, surveyType);
-  };
-
-  const getCardArrangementIcon = (cardArrangement: string) => {
-    switch (cardArrangement) {
-      case "casual":
-        return <CasualCardArrangementIcon />;
-      case "straight":
-        return <StraightCardArrangementIcon />;
-      default:
-        return <NoCardsArrangementIcon />;
-    }
-  };
-
-  return (
-    <div className="flex flex-col gap-4">
-      <div className="flex flex-col">
-        <h3 className="text-sm font-semibold text-slate-700">
-          Card Arrangement for {surveyTypeDerived} Surveys
-        </h3>
-        <p className="text-xs text-slate-500">
-          How funky do you want your cards in {surveyTypeDerived} Surveys
-        </p>
-      </div>
-
-      <div className="flex gap-2 rounded-md border border-slate-300 bg-white p-1">
-        {cardArrangementTypes.map((cardArrangement) => {
-          return (
-            <Button
-              variant="minimal"
-              size="sm"
-              className={cn(
-                "flex flex-1 justify-center space-x-4 bg-white text-center",
-                activeCardArrangement === cardArrangement && "bg-slate-200"
-              )}
-              disabled={disabled}
-              onClick={() => handleCardArrangementChange(cardArrangement)}>
-              <p> {capitalizeFirstLetter(cardArrangement)}</p>
-              {getCardArrangementIcon(cardArrangement)}
-            </Button>
-          );
-        })}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/ui/Styling/components/ColorSelectorWithLabel.tsx b/packages/ui/Styling/components/ColorSelectorWithLabel.tsx
deleted file mode 100644
index 5b2e6bc8848..00000000000
--- a/packages/ui/Styling/components/ColorSelectorWithLabel.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { cn } from "@formbricks/lib/cn";
-
-import { ColorPicker } from "../../ColorPicker";
-
-type ColorSelectorWithLabelProps = {
-  label: string;
-  description?: string;
-  color: string;
-  Badge?: React.FC;
-  setColor: React.Dispatch<React.SetStateAction<string>>;
-  className?: string;
-  disabled?: boolean;
-};
-
-export const ColorSelectorWithLabel = ({
-  color,
-  description = "",
-  label,
-  Badge,
-  setColor,
-  className = "",
-  disabled = false,
-}: ColorSelectorWithLabelProps) => {
-  return (
-    <div className={cn("flex max-w-xs flex-col gap-4", disabled ? "opacity-40" : "", className)}>
-      <div className="flex flex-col">
-        <div className="flex">
-          <h3 className="mr-2 text-sm font-semibold text-slate-700">{label}</h3>
-          {Badge && <Badge />}
-        </div>
-        {description && <p className="text-xs text-slate-500">{description}</p>}
-      </div>
-
-      <ColorPicker color={color} onChange={setColor} containerClass="my-0" disabled={disabled} />
-    </div>
-  );
-};
diff --git a/packages/ui/Styling/components/DarkModeColors.tsx b/packages/ui/Styling/components/DarkModeColors.tsx
deleted file mode 100644
index 9ca88ca59a0..00000000000
--- a/packages/ui/Styling/components/DarkModeColors.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { useEffect } from "react";
-
-import { COLOR_DEFAULTS } from "@formbricks/lib/styling/constants";
-
-import { Switch } from "../../Switch";
-import { ColorSelectorWithLabel } from "./ColorSelectorWithLabel";
-
-type DarModeColorProps = {
-  isDarkMode: boolean;
-  setIsDarkMode: React.Dispatch<React.SetStateAction<boolean>>;
-  brandColor?: string;
-  setBrandColor: React.Dispatch<React.SetStateAction<string>>;
-  questionColor?: string;
-  setQuestionColor: React.Dispatch<React.SetStateAction<string>>;
-  inputColor?: string;
-  setInputColor: React.Dispatch<React.SetStateAction<string>>;
-  inputBorderColor?: string;
-  setInputBorderColor: React.Dispatch<React.SetStateAction<string>>;
-  cardBackgroundColor?: string;
-  setCardBackgroundColor: React.Dispatch<React.SetStateAction<string>>;
-  highlightBorderColor?: string;
-  setHighlighBorderColor: React.Dispatch<React.SetStateAction<string>>;
-  disabled?: boolean;
-};
-
-export const DarkModeColors = ({
-  isDarkMode,
-  setIsDarkMode,
-  brandColor,
-  cardBackgroundColor,
-  highlightBorderColor,
-  inputBorderColor,
-  inputColor,
-  questionColor,
-  setBrandColor,
-  setCardBackgroundColor,
-  setHighlighBorderColor,
-  setInputBorderColor,
-  setInputColor,
-  setQuestionColor,
-  disabled = false,
-}: DarModeColorProps) => {
-  useEffect(() => {
-    if (disabled) {
-      setIsDarkMode(false);
-    }
-  }, [disabled, setIsDarkMode]);
-
-  return (
-    <div className="flex flex-col gap-4 rounded-lg bg-slate-50 p-4">
-      <div className="flex items-center gap-4">
-        <Switch
-          checked={isDarkMode}
-          onCheckedChange={(value) => {
-            setIsDarkMode(value);
-          }}
-          disabled={disabled}
-        />
-
-        <div className="flex flex-col">
-          <h3 className="text-base font-semibold text-slate-900">Add &quot;Dark Mode&quot; Colors</h3>
-          <p className="text-sm text-slate-800">Your app has a dark mode? Set a different set of colors.</p>
-        </div>
-      </div>
-
-      {isDarkMode && (
-        <div className="grid grid-cols-2 gap-4">
-          <ColorSelectorWithLabel
-            label="Brand color"
-            color={brandColor ?? COLOR_DEFAULTS.brandColor}
-            setColor={setBrandColor}
-            className="gap-2"
-          />
-          <ColorSelectorWithLabel
-            label="Text color"
-            color={questionColor ?? COLOR_DEFAULTS.questionColor}
-            setColor={setQuestionColor}
-            className="gap-2"
-          />
-          <ColorSelectorWithLabel
-            label="Input color"
-            color={inputColor ?? COLOR_DEFAULTS.inputColor}
-            setColor={setInputColor}
-            className="gap-2"
-          />
-          <ColorSelectorWithLabel
-            label="Input border color"
-            color={inputBorderColor ?? COLOR_DEFAULTS.inputBorderColor}
-            setColor={setInputBorderColor}
-            className="gap-2"
-          />
-          <ColorSelectorWithLabel
-            label="Card background color"
-            color={cardBackgroundColor ?? COLOR_DEFAULTS.cardBackgroundColor}
-            setColor={setCardBackgroundColor}
-            className="gap-2"
-          />
-          <ColorSelectorWithLabel
-            label="Highlight border color"
-            color={highlightBorderColor ?? COLOR_DEFAULTS.highlightBorderColor}
-            setColor={setHighlighBorderColor}
-            className="gap-2"
-          />
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/packages/ui/Styling/index.tsx b/packages/ui/Styling/index.tsx
deleted file mode 100644
index feb1677d289..00000000000
--- a/packages/ui/Styling/index.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export { CardArrangement } from "./components/CardArrangement";
-export { ColorSelectorWithLabel } from "./components/ColorSelectorWithLabel";
-export { DarkModeColors } from "./components/DarkModeColors";
diff --git a/packages/ui/Tabs/index.tsx b/packages/ui/Tabs/index.tsx
new file mode 100644
index 00000000000..ef1033947f7
--- /dev/null
+++ b/packages/ui/Tabs/index.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+
+import { cn } from "@formbricks/lib/cn";
+
+import { Label } from "../Label";
+
+interface Option<T> {
+  value: T;
+  label: string;
+  icon?: React.ReactNode;
+}
+
+interface TabsProps<T> {
+  id: string;
+  options: Option<T>[];
+  defaultSelected?: T;
+  onChange: (value: T) => void;
+  className?: string;
+  tabsContainerClassName?: string;
+
+  label?: string;
+  subLabel?: string;
+}
+
+export const Tabs = <T extends string | number>({
+  id,
+  options,
+  defaultSelected,
+  onChange,
+  className,
+  tabsContainerClassName,
+  label,
+  subLabel,
+}: TabsProps<T>) => {
+  const [selectedOption, setSelectedOption] = useState<T | undefined>(defaultSelected);
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value as T;
+    setSelectedOption(value);
+    onChange(value);
+  };
+
+  return (
+    <div
+      role="radiogroup"
+      aria-labelledby={`${id}-toggle-label`}
+      className={cn("flex flex-col gap-2", className)}>
+      <>
+        {label && <Label className="font-semibold">{label}</Label>}
+        {subLabel && <p className="text-sm font-normal text-slate-500">{subLabel}</p>}
+      </>
+
+      <div
+        className={cn("flex overflow-hidden rounded-md border border-gray-300 p-2", tabsContainerClassName)}>
+        {options.map((option) => (
+          <label
+            key={option.value}
+            htmlFor={option.value.toString()}
+            className={cn(
+              "flex flex-1 cursor-pointer items-center justify-center gap-4 rounded-md py-2 text-center text-sm",
+              selectedOption === option.value ? "bg-slate-100" : "bg-white",
+              "focus:ring-brand-dark focus:outline-none focus:ring-2 focus:ring-opacity-50"
+            )}>
+            <input
+              type="radio"
+              name={id}
+              id={option.value.toString()}
+              value={option.value.toString()}
+              checked={selectedOption === option.value}
+              onChange={handleChange}
+              className="sr-only"
+            />
+            <span className="text-slate-900">{option.label}</span>
+            <div>{option.icon}</div>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/ui/Styling/components/CardArrangementIcons.tsx b/packages/ui/icons/CasualCardArrangementIcon.tsx
similarity index 52%
rename from packages/ui/Styling/components/CardArrangementIcons.tsx
rename to packages/ui/icons/CasualCardArrangementIcon.tsx
index 78fa88905d0..080f6c60ace 100644
--- a/packages/ui/Styling/components/CardArrangementIcons.tsx
+++ b/packages/ui/icons/CasualCardArrangementIcon.tsx
@@ -1,4 +1,4 @@
-export const CasualCardArrangementIcon = () => {
+export const CasualCardArrangementIcon: React.FC<React.SVGProps<SVGSVGElement>> = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="none" viewBox="0 0 17 17">
       <g fill="#1E293B" clipPath="url(#clip0_604_1310)">
@@ -28,21 +28,3 @@ export const CasualCardArrangementIcon = () => {
     </svg>
   );
 };
-
-export const StraightCardArrangementIcon = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" fill="none" viewBox="0 0 14 17">
-      <rect width="10" height="9" x="2" y="1" fill="#1E293B" fillOpacity="0.25" rx="1.031"></rect>
-      <rect width="12" height="9" x="1" y="3" fill="#1E293B" fillOpacity="0.6" rx="1.031"></rect>
-      <rect width="14" height="11" y="5" fill="#1E293B" rx="1.031"></rect>
-    </svg>
-  );
-};
-
-export const NoCardsArrangementIcon = () => {
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" fill="none" viewBox="0 0 14 13">
-      <rect width="14" height="11" y="1" fill="#1E293B" rx="1.031"></rect>
-    </svg>
-  );
-};
diff --git a/packages/ui/icons/SimpleCardArrangementIcon.tsx b/packages/ui/icons/SimpleCardArrangementIcon.tsx
new file mode 100644
index 00000000000..224cba3556e
--- /dev/null
+++ b/packages/ui/icons/SimpleCardArrangementIcon.tsx
@@ -0,0 +1,7 @@
+export const SimpleCardsArrangementIcon: React.FC<React.SVGProps<SVGSVGElement>> = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="13" fill="none" viewBox="0 0 14 13">
+      <rect width="14" height="11" y="1" fill="#1E293B" rx="1.031"></rect>
+    </svg>
+  );
+};
diff --git a/packages/ui/icons/StraightCardArrangementIcon.tsx b/packages/ui/icons/StraightCardArrangementIcon.tsx
new file mode 100644
index 00000000000..57eaca7093a
--- /dev/null
+++ b/packages/ui/icons/StraightCardArrangementIcon.tsx
@@ -0,0 +1,9 @@
+export const StraightCardArrangementIcon: React.FC<React.SVGProps<SVGSVGElement>> = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" fill="none" viewBox="0 0 14 17">
+      <rect width="10" height="9" x="2" y="1" fill="#1E293B" fillOpacity="0.25" rx="1.031"></rect>
+      <rect width="12" height="9" x="1" y="3" fill="#1E293B" fillOpacity="0.6" rx="1.031"></rect>
+      <rect width="14" height="11" y="5" fill="#1E293B" rx="1.031"></rect>
+    </svg>
+  );
+};