diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx
index dbb3753367..37a75ffeae 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ColorSurveyBg.tsx
@@ -18,17 +18,16 @@ export default function ColorSurveyBg({ localSurvey, handleBgChange, colours }:
   };
   return (
     <div>
-      <div className="mb-2 mt-4 rounded-lg border bg-slate-50 p-4">
-        <div className="w-full max-w-xs">
-          <Label htmlFor="brandcolor">Color (HEX)</Label>
-          <ColorPicker color={color} onChange={handleBg} />
-        </div>
+      <div className="w-full max-w-xs py-2">
+        <ColorPicker color={color} onChange={handleBg} />
       </div>
-      <div className="grid grid-cols-6 gap-4">
+      <div className="grid grid-cols-10 gap-4">
         {colours.map((x) => {
           return (
             <div
-              className={`h-16 w-16 cursor-pointer ${color === x ? "border-4 border-slate-500" : ""}`}
+              className={`h-16 w-16 cursor-pointer rounded-lg ${
+                color === x ? "border-4 border-slate-500" : ""
+              }`}
               key={x}
               style={{ backgroundColor: `${x}` }}
               onClick={() => handleBg(x)}></div>
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
index 559881c276..8d9015ad41 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/ImageSurveyBg.tsx
@@ -9,7 +9,7 @@ interface ImageSurveyBgBgProps {
 export default function ImageSurveyBg({ localSurvey, handleBgChange }: ImageSurveyBgBgProps) {
   return (
     <div className="mb-2 mt-4 w-full rounded-lg border bg-slate-50 p-4">
-      <div className="mt-3 flex w-full items-center justify-center">
+      <div className="flex w-full items-center justify-center">
         <FileInput
           id="choices-file-input"
           allowedFileExtensions={["png", "jpeg", "jpg"]}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
index b1a3b00e29..845e60b51d 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/StylingCard.tsx
@@ -9,9 +9,7 @@ import { CheckCircleIcon } from "@heroicons/react/24/solid";
 import * as Collapsible from "@radix-ui/react-collapsible";
 import { useState } from "react";
 import Placement from "./Placement";
-import ColorSurveyBg from "./ColorSurveyBg";
-import ImageSurveyBg from "./ImageSurveyBg";
-import AnimatedSurveyBg from "@/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg";
+import SurveyBgSelectorTab from "./SurveyBgSelectorTab";
 
 interface StylingCardProps {
   localSurvey: TSurvey;
@@ -200,82 +198,65 @@ export default function StylingCard({ localSurvey, setLocalSurvey, colours }: St
               </div>
             )}
           </div>
-          {/* Background */}
-          <div className="p-3">
-            <div className="ml-2 flex items-center space-x-1">
-              <Switch id="autoCompleteBg" checked={!!bg} onCheckedChange={toggleBackgroundColor} />
-              <Label htmlFor="autoCompleteBg" className="cursor-pointer">
-                <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>
+          {type == "link" && (
+            <>
+              {/* Background */}
+              <div className="p-3">
+                <div className="ml-2 flex items-center space-x-1">
+                  <Switch id="autoCompleteBg" checked={!!bg} onCheckedChange={toggleBackgroundColor} />
+                  <Label htmlFor="autoCompleteBg" className="cursor-pointer">
+                    <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>
+                  </Label>
                 </div>
-              </Label>
-            </div>
-            {bg && (
-              <div className="mt-4 flex flex-col items-center justify-center rounded-lg border bg-slate-50 p-4 px-8">
-                <div className="flex w-full items-center justify-between border bg-slate-50 px-6">
-                  <button
-                    className={tab === "image" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
-                    onClick={() => setTab("image")}>
-                    Image
-                  </button>
-                  <button
-                    className={tab === "animation" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
-                    onClick={() => setTab("animation")}>
-                    Animation
-                  </button>
-                  <button
-                    className={tab === "color" ? "rounded-md bg-white p-2" : "rounded-md p-2"}
-                    onClick={() => setTab("color")}>
-                    Color
-                  </button>
-                </div>
-                {tab == "image" ? (
-                  <ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
-                ) : tab == "animation" ? (
-                  <AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
-                ) : (
-                  <ColorSurveyBg
+                {bg && (
+                  <SurveyBgSelectorTab
                     localSurvey={localSurvey}
                     handleBgChange={handleBgChange}
                     colours={colours}
                   />
                 )}
               </div>
-            )}
-          </div>
-          {/* Overlay */}
-          <div className="p-3">
-            <div className="ml-2 flex items-center space-x-1">
-              <Switch id="autoCompleteOverlay" checked={!!brightness} onCheckedChange={toggleBrightness} />
-              <Label htmlFor="autoCompleteOverlay" className="cursor-pointer">
-                <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>
-              </Label>
-            </div>
-            {brightness && (
-              <div>
-                <div className="mt-4 flex flex-col justify-center rounded-lg border bg-slate-50 p-4 px-8">
-                  <h3 className="mb-4 text-sm font-semibold text-slate-700">Transparency</h3>
-                  <input
-                    id="small-range"
-                    type="range"
-                    min="1"
-                    max="200"
-                    value={inputValue}
-                    onChange={handleInputChange}
-                    className="range-sm mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+              {/* Overlay */}
+              <div className="p-3">
+                <div className="ml-2 flex items-center space-x-1">
+                  <Switch
+                    id="autoCompleteOverlay"
+                    checked={!!brightness}
+                    onCheckedChange={toggleBrightness}
                   />
+                  <Label htmlFor="autoCompleteOverlay" className="cursor-pointer">
+                    <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>
+                  </Label>
                 </div>
+                {brightness && (
+                  <div>
+                    <div className="mt-4 flex flex-col justify-center rounded-lg border bg-slate-50 p-4 px-8">
+                      <h3 className="mb-4 text-sm font-semibold text-slate-700">Transparency</h3>
+                      <input
+                        id="small-range"
+                        type="range"
+                        min="1"
+                        max="200"
+                        value={inputValue}
+                        onChange={handleInputChange}
+                        className="range-sm mb-6 h-1 w-full cursor-pointer appearance-none rounded-lg bg-gray-200 dark:bg-gray-700"
+                      />
+                    </div>
+                  </div>
+                )}
               </div>
-            )}
-          </div>
+            </>
+          )}
           {/* positioning */}
           {type !== "link" && (
             <div className="p-3 ">
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
new file mode 100644
index 0000000000..e510e0911b
--- /dev/null
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx
@@ -0,0 +1,60 @@
+import { useState } from "react";
+import ImageSurveyBg from "./ImageSurveyBg";
+import AnimatedSurveyBg from "./AnimatedSurveyBg";
+import ColorSurveyBg from "./ColorSurveyBg";
+import { TSurvey } from "@formbricks/types/surveys";
+
+interface SurveyBgSelectorTabProps {
+  localSurvey: TSurvey;
+  handleBgChange: (bg: string, bgType: string) => void;
+  colours: string[];
+}
+
+export default function SurveyBgSelectorTab({
+  localSurvey,
+  handleBgChange,
+  colours,
+}: SurveyBgSelectorTabProps) {
+  const [tab, setTab] = useState("image");
+
+  return (
+    <div className="mt-4 flex flex-col items-center justify-center rounded-lg border bg-slate-50 p-4 px-8">
+      <div className="flex w-full items-center justify-between rounded-lg border border-slate-300 bg-slate-50 px-6 py-1.5">
+        <button
+          className={
+            tab === "image"
+              ? "w-1/4 rounded-md bg-white  p-2 text-sm font-medium leading-none text-slate-800 shadow-sm"
+              : "w-1/4 rounded-md  p-2 text-sm font-medium leading-none text-slate-800"
+          }
+          onClick={() => setTab("image")}>
+          Image
+        </button>
+        <button
+          className={
+            tab === "animation"
+              ? "w-1/4 rounded-md bg-white p-2 text-sm font-medium leading-none text-slate-800 shadow-sm"
+              : "w-1/4 rounded-md p-2 text-sm font-medium leading-none text-slate-800"
+          }
+          onClick={() => setTab("animation")}>
+          Animation
+        </button>
+        <button
+          className={
+            tab === "color"
+              ? "w-1/4 rounded-md bg-white p-2 text-sm font-medium leading-none text-slate-800 shadow-sm"
+              : "w-1/4 rounded-md p-2 text-sm font-medium leading-none text-slate-800"
+          }
+          onClick={() => setTab("color")}>
+          Color
+        </button>
+      </div>
+      {tab === "image" ? (
+        <ImageSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
+      ) : tab === "animation" ? (
+        <AnimatedSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} />
+      ) : (
+        <ColorSurveyBg localSurvey={localSurvey} handleBgChange={handleBgChange} colours={colours} />
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
index c0dbf7e47f..6ef98b2d34 100644
--- a/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/surveys/components/PreviewSurveyBgDeskstop.tsx
@@ -53,14 +53,15 @@ export default function PreviewSurveyBgDeskstop({ children, survey, ContentRef }
     </div>
   ) : (
     <div className="flex flex-grow flex-col overflow-y-auto rounded-b-lg" ref={ContentRef}>
-      <div
-        className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6"
-        style={{
-          backgroundColor: "#ffff",
-          filter: survey.surveyBackground?.brightness
-            ? `brightness(${survey.surveyBackground.brightness}%)`
-            : "none",
-        }}>
+      <div className="relative flex w-full flex-grow flex-col items-center justify-center p-4 py-6">
+        <div
+          className="absolute inset-0 h-full w-full object-cover"
+          style={{
+            backgroundColor: "#ffff",
+            filter: survey.surveyBackground?.brightness
+              ? `brightness(${survey.surveyBackground.brightness}%)`
+              : "none",
+          }}></div>
         <div className="flex h-full w-full items-center justify-center">{children}</div>
       </div>
     </div>
diff --git a/packages/surveys/src/components/Survey.tsx b/packages/surveys/src/components/Survey.tsx
index c5c336967e..77f1b03d8d 100644
--- a/packages/surveys/src/components/Survey.tsx
+++ b/packages/surveys/src/components/Survey.tsx
@@ -170,7 +170,7 @@ export function Survey({
   return (
     <>
       <AutoCloseWrapper survey={survey} brandColor={brandColor} onClose={onClose}>
-        <div className="flex h-full w-full flex-col justify-between rounded-2xl bg-white px-6 pb-3 pt-6">
+        <div className="flex h-full w-full flex-col justify-between rounded-lg bg-white px-6 pb-3 pt-6 shadow-lg">
           <div ref={contentRef} className={cn(loadingElement ? "animate-pulse opacity-60" : "", "my-auto")}>
             {survey.questions.length === 0 && !survey.welcomeCard.enabled && !survey.thankYouCard.enabled ? (
               // Handle the case when there are no questions and both welcome and thank you cards are disabled