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 37a75ffeae..04a159b3f5 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
@@ -21,7 +21,7 @@ export default function ColorSurveyBg({ localSurvey, handleBgChange, colours }:
       <div className="w-full max-w-xs py-2">
         <ColorPicker color={color} onChange={handleBg} />
       </div>
-      <div className="grid grid-cols-10 gap-4">
+      <div className="grid grid-cols-4 gap-4 md:grid-cols-5 xl:grid-cols-8 2xl:grid-cols-10">
         {colours.map((x) => {
           return (
             <div