diff --git a/web/src/beta/features/Editor/Visualizer/convert.ts b/web/src/beta/features/Editor/Visualizer/convert.ts
index 2c1b84cab..252eb26e9 100644
--- a/web/src/beta/features/Editor/Visualizer/convert.ts
+++ b/web/src/beta/features/Editor/Visualizer/convert.ts
@@ -154,10 +154,10 @@ export const convertWidgets = (
         left: padding?.left ?? 6,
         right: padding?.right ?? 6,
       },
+      gap: area?.gap ?? 6,
       widgets: areaWidgets,
       background: area?.background as string | undefined,
       centered: area?.centered,
-      gap: area?.gap ?? undefined,
     };
   };
 
diff --git a/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx b/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx
index 8190f988c..351f8ffd1 100644
--- a/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx
+++ b/web/src/beta/features/Editor/tabs/widgets/RightPanel/ContainerSettings/index.tsx
@@ -70,7 +70,7 @@ const ContainerSettings: React.FC<Props> = ({ widgetArea, onWidgetAreaStateChang
 
       <TextInput
         name={t("Gap spacing")}
-        value={(widgetArea?.gap ?? 0).toString()}
+        value={(widgetArea?.gap ?? 6).toString()}
         onChange={newVal => {
           onWidgetAreaStateChange({
             ...widgetArea,
diff --git a/web/src/beta/features/PublishedVisualizer/hooks.ts b/web/src/beta/features/PublishedVisualizer/hooks.ts
index aca619d7c..b98a2635c 100644
--- a/web/src/beta/features/PublishedVisualizer/hooks.ts
+++ b/web/src/beta/features/PublishedVisualizer/hooks.ts
@@ -115,10 +115,10 @@ export default (alias?: string) => {
           left: padding?.left ?? 6,
           right: padding?.right ?? 6,
         },
+        gap: area?.gap ?? 6,
         widgets: areaWidgets || [],
         background: area?.background as string | undefined,
         centered: area?.centered,
-        gap: area?.gap ?? undefined,
       };
     };
 
diff --git a/web/src/beta/lib/core/Crust/Widgets/WidgetAlignSystem/Area.tsx b/web/src/beta/lib/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
index 4a9f8ea02..bf8f8def8 100644
--- a/web/src/beta/lib/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
+++ b/web/src/beta/lib/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
@@ -82,7 +82,7 @@ export default function Area({
           zone,
           background: backgroundColor,
           centered,
-          gap,
+          gap: gap ?? 6,
           padding: {
             top: padding?.top ?? 6,
             bottom: padding?.bottom ?? 6,
diff --git a/web/src/beta/lib/core/StoryPanel/Page/index.tsx b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
index 41267f114..4d794e796 100644
--- a/web/src/beta/lib/core/StoryPanel/Page/index.tsx
+++ b/web/src/beta/lib/core/StoryPanel/Page/index.tsx
@@ -140,8 +140,8 @@ const StoryPanel: React.FC<Props> = ({
       <Wrapper
         id={page?.id}
         ref={containerRef}
-        padding={panelSettings.padding.value}
-        gap={panelSettings.gap.value}>
+        padding={panelSettings?.padding?.value}
+        gap={panelSettings?.gap?.value}>
         {(isEditable || title?.title?.value) && (
           <StoryBlock
             block={{
diff --git a/web/src/classic/core/Crust/Widgets/WidgetAlignSystem/Area.tsx b/web/src/classic/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
index 1af0e5965..6e132c4ad 100644
--- a/web/src/classic/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
+++ b/web/src/classic/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
@@ -35,7 +35,7 @@ type Props = {
   align?: Alignment;
   padding?: WidgetAreaPadding;
   backgroundColor?: string;
-  gap?: number | null;
+  gap?: number;
   centered?: boolean;
   built?: boolean;
   widgets?: InternalWidget[];
@@ -112,7 +112,7 @@ export default function Area({
           ? `${padding?.top}px ${padding?.right}px ${padding?.bottom}px ${padding?.left}px`
           : "0",
         backgroundColor: backgroundColor,
-        gap: gap ?? 0,
+        gap: gap ?? 6,
         alignItems: centered ? "center" : "unset",
         borderRadius: 0,
         transition: built ? "none" : undefined,
@@ -132,7 +132,7 @@ export default function Area({
             : area === "middle"
             ? `1px solid ${theme.classic.alignSystem.blueHighlight}`
             : `1px solid ${theme.classic.alignSystem.orangeHighlight}`,
-        gap: gap ?? 0,
+        gap: gap ?? 6,
         alignItems: centered ? "center" : "unset",
       }}
       iconColor={area === "middle" ? "#4770FF" : "#E95518"}>