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 676b7ca56d..18ff948e00 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
@@ -75,7 +75,7 @@ export const BackgroundStylingCard = ({
         asChild
         disabled={disabled}
         className={cn(
-          "h-full w-full cursor-pointer rounded-lg hover:bg-slate-50",
+          "w-full cursor-pointer rounded-lg hover:bg-slate-50",
           disabled && "cursor-not-allowed opacity-60 hover:bg-white"
         )}>
         <div className="inline-flex px-4 py-4">
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 5c585ff799..8053719b4b 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
@@ -166,7 +166,7 @@ export const CardStylingSettings = ({
         asChild
         disabled={disabled}
         className={cn(
-          "h-full w-full cursor-pointer rounded-lg hover:bg-slate-50",
+          "w-full cursor-pointer rounded-lg hover:bg-slate-50",
           disabled && "cursor-not-allowed opacity-60 hover:bg-white"
         )}>
         <div className="inline-flex px-4 py-4">
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 2f7dc1ea8f..529dd81b59 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
@@ -130,7 +130,7 @@ export const FormStylingSettings = ({
         asChild
         disabled={disabled}
         className={cn(
-          "h-full w-full cursor-pointer rounded-lg hover:bg-slate-50",
+          "w-full cursor-pointer rounded-lg hover:bg-slate-50",
           disabled && "cursor-not-allowed opacity-60 hover:bg-white"
         )}>
         <div className="inline-flex px-4 py-4">
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 77ae9b0e6f..64810dd886 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
@@ -166,8 +166,8 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
   return (
     <div className="flex">
       {/* Styling settings */}
-      <div className="relative w-1/2 pr-6">
-        <div className="flex flex-col gap-4">
+      <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
@@ -218,7 +218,7 @@ export const ThemeStyling = ({ product, environmentId, colors, isUnsplashConfigu
           </div>
         </div>
 
-        <div className="absolute bottom-0 mt-4 flex items-center gap-2">
+        <div className="mt-4 flex items-center gap-2">
           <Button variant="darkCTA" size="sm" onClick={onSave}>
             Save
           </Button>
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 2c63e2063f..9b4b86f829 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
@@ -214,7 +214,7 @@ export const ThemeStylingPreviewSurvey = ({
         <div
           className={`${isAppSurvey ? "rounded-full bg-slate-200" : ""} cursor-pointer px-3 py-1 text-sm`}
           onClick={() => setPreviewType("app")}>
-          App survey
+          App / Website survey
         </div>
       </div>
     </div>
diff --git a/packages/database/data-migrations/20240320090315_add_form_styling/data-migration-fix.ts b/packages/database/data-migrations/20240320090315_add_form_styling/data-migration-fix.ts
new file mode 100644
index 0000000000..8a95795339
--- /dev/null
+++ b/packages/database/data-migrations/20240320090315_add_form_styling/data-migration-fix.ts
@@ -0,0 +1,62 @@
+import { Prisma, PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+async function main() {
+  await prisma.$transaction(
+    async (tx) => {
+      const startTime = Date.now();
+      console.log("Starting data migration for styling fixes...");
+
+      const surveysWithProductOverwrites = await tx.survey.findMany({
+        where: {
+          productOverwrites: {
+            not: Prisma.JsonNull,
+          },
+        },
+      });
+
+      console.log(`Found ${surveysWithProductOverwrites.length} surveys with product overwrites to process.`);
+
+      for (const survey of surveysWithProductOverwrites) {
+        if (survey.productOverwrites) {
+          const { brandColor, highlightBorderColor, ...rest } = survey.productOverwrites;
+
+          if (!brandColor && !highlightBorderColor) {
+            continue;
+          }
+
+          await tx.survey.update({
+            where: {
+              id: survey.id,
+            },
+            data: {
+              styling: {
+                ...(survey.styling ?? {}),
+                ...(brandColor && { brandColor: { light: brandColor } }),
+                ...(highlightBorderColor && { highlightBorderColor: { light: highlightBorderColor } }),
+                ...((brandColor || highlightBorderColor || Object.keys(survey.styling ?? {}).length > 0) && {
+                  overwriteThemeStyling: true,
+                }),
+              },
+              productOverwrites: {
+                ...rest,
+              },
+            },
+          });
+        }
+      }
+
+      const endTime = Date.now();
+      console.log(`Data migration for styling fixes completed in ${(endTime - startTime) / 1000} seconds.`);
+    },
+    { timeout: 50000 }
+  );
+}
+
+main()
+  .catch(async (e) => {
+    console.error(e);
+    process.exit(1);
+  })
+  .finally(async () => await prisma.$disconnect());
diff --git a/packages/database/package.json b/packages/database/package.json
index 228d3470b7..d3b03d3b0d 100644
--- a/packages/database/package.json
+++ b/packages/database/package.json
@@ -25,6 +25,7 @@
     "predev": "pnpm generate",
     "data-migration:v1.6": "ts-node ./data-migrations/20240207041922_advanced_targeting/data-migration.ts",
     "data-migration:styling": "ts-node ./data-migrations/20240320090315_add_form_styling/data-migration.ts",
+    "data-migration:styling-fix": "ts-node ./data-migrations/20240320090315_add_form_styling/data-migration-fix.ts",
     "data-migration:website-surveys": "ts-node ./data-migrations/20240410111624_adds_website_and_inapp_survey/data-migration.ts",
     "data-migration:mls": "ts-node ./data-migrations/20240318050527_add_languages_and_survey_languages/data-migration.ts",
     "data-migration:mls-fix": "ts-node ./data-migrations/20240318050527_add_languages_and_survey_languages/data-migration-fix.ts",
@@ -32,7 +33,7 @@
     "data-migration:userId": "ts-node ./data-migrations/20240408123456_userid_migration/data-migration.ts",
     "data-migration:refactor-actions": "ts-node ./data-migrations/20240501111944_refactors_actions_and_removes_inline_triggers/data-migration.ts",
     "data-migration:mls-welcomeCard-fix": "ts-node ./data-migrations/20240318050527_add_languages_and_survey_languages/data-migration-welcomeCard-fix.ts",
-    "data-migration:v2.0": "pnpm data-migration:mls && pnpm data-migration:styling && pnpm data-migration:website-surveys && pnpm data-migration:userId && pnpm data-migration:mls-welcomeCard-fix && pnpm data-migration:refactor-actions"
+    "data-migration:v2.0": "pnpm data-migration:mls && pnpm data-migration:styling && pnpm data-migration:styling-fix && pnpm data-migration:website-surveys && pnpm data-migration:userId && pnpm data-migration:mls-welcomeCard-fix && pnpm data-migration:refactor-actions"
   },
   "dependencies": {
     "@prisma/client": "^5.13.0",
diff --git a/packages/surveys/src/components/general/Survey.tsx b/packages/surveys/src/components/general/Survey.tsx
index c672eff8b8..857940cafe 100644
--- a/packages/surveys/src/components/general/Survey.tsx
+++ b/packages/surveys/src/components/general/Survey.tsx
@@ -268,6 +268,7 @@ export const Survey = ({
         <ResponseErrorComponent responseData={responseData} questions={survey.questions} onRetry={onRetry} />
       );
     }
+
     const content = () => {
       if (questionIdx === -1) {
         return (
@@ -328,13 +329,14 @@ export const Survey = ({
         );
       }
     };
+
     return (
       <AutoCloseWrapper survey={survey} onClose={onClose}>
         {getShowSurveyCloseButton(offset) && <SurveyCloseButton onClose={onClose} />}
         <div
           className={cn(
             "no-scrollbar md:rounded-custom rounded-t-custom bg-survey-bg flex h-full w-full flex-col justify-between overflow-hidden transition-all duration-1000 ease-in-out",
-            survey.type === "link" ? "fb-survey-shadow" : "",
+            cardArrangement === "simple" ? "fb-survey-shadow" : "",
             offset === 0 || cardArrangement === "simple" ? "opacity-100" : "opacity-0"
           )}>
           <div ref={contentRef} className={cn(loadingElement ? "animate-pulse opacity-60" : "", "my-auto")}>
diff --git a/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx b/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx
index efb6b41e68..9d3eeb9422 100644
--- a/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx
+++ b/packages/surveys/src/components/wrappers/StackedCardsContainer.tsx
@@ -128,34 +128,41 @@ export const StackedCardsContainer = ({
       }}
       onMouseLeave={() => setHovered(false)}>
       <div style={{ height: cardHeight }}></div>
-      {cardArrangement === "simple"
-        ? getCardContent(questionIdx, 0)
-        : questionIdx !== undefined &&
-          cardIndexes.map((_, idx) => {
-            const index = survey.welcomeCard.enabled ? idx - 1 : idx;
-            const offset = index - questionIdx;
-            const isHidden = offset < 0;
-            return (
-              <div
-                ref={(el) => (cardRefs.current[index] = el)}
-                id={`questionCard-${index}`}
-                key={index}
-                style={{
-                  zIndex: 1000 - index,
-                  transform: `${calculateCardTransform(offset)}`,
-                  opacity: isHidden ? 0 : (100 - 30 * offset) / 100,
-                  height: getCardHeight(offset),
-                  transitionDuration: "600ms",
-                  pointerEvents: offset === 0 ? "auto" : "none",
-                  ...borderStyles,
-                  ...straightCardArrangementStyles(offset),
-                  ...getBottomStyles(),
-                }}
-                className="pointer rounded-custom bg-survey-bg absolute inset-x-0 backdrop-blur-md transition-all ease-in-out">
-                {getCardContent(index, offset)}
-              </div>
-            );
-          })}
+      {cardArrangement === "simple" ? (
+        <div
+          style={{
+            ...borderStyles,
+          }}>
+          {getCardContent(questionIdx, 0)}
+        </div>
+      ) : (
+        questionIdx !== undefined &&
+        cardIndexes.map((_, idx) => {
+          const index = survey.welcomeCard.enabled ? idx - 1 : idx;
+          const offset = index - questionIdx;
+          const isHidden = offset < 0;
+          return (
+            <div
+              ref={(el) => (cardRefs.current[index] = el)}
+              id={`questionCard-${index}`}
+              key={index}
+              style={{
+                zIndex: 1000 - index,
+                transform: `${calculateCardTransform(offset)}`,
+                opacity: isHidden ? 0 : (100 - 30 * offset) / 100,
+                height: getCardHeight(offset),
+                transitionDuration: "600ms",
+                pointerEvents: offset === 0 ? "auto" : "none",
+                ...borderStyles,
+                ...straightCardArrangementStyles(offset),
+                ...getBottomStyles(),
+              }}
+              className="pointer rounded-custom bg-survey-bg absolute inset-x-0 backdrop-blur-md transition-all ease-in-out">
+              {getCardContent(index, offset)}
+            </div>
+          );
+        })
+      )}
     </div>
   );
 };