diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
index 92d19fc95c..c6758d5bad 100644
--- a/src/layouts/components/Homepage/HeroBody.tsx
+++ b/src/layouts/components/Homepage/HeroBody.tsx
@@ -114,7 +114,6 @@ const HeroCenteredLayout = ({
 const HeroImageOnlyLayout = ({
   errors,
   background,
-  index,
 }: Omit<HeroCenteredLayoutProps, "subtitle" | "title">) => {
   const { onChange } = useEditableContext()
   return (
@@ -130,7 +129,7 @@ const HeroImageOnlyLayout = ({
         </Box>
         <FormFieldMedia
           value={background}
-          id={`section-${index}-hero-background`}
+          id="section-0-hero-background"
           inlineButtonText="Select"
         />
         <FormError>{errors.background}</FormError>
@@ -149,7 +148,6 @@ interface HeroSideSectionProps extends HeroCenteredLayoutProps {
   } & HeroBodyFormFields
   size: SectionSize
   alignment: SectionAlignment
-  backgroundColor: SectionBackgroundColor
 }
 
 const HeroSideSectionLayout = ({
@@ -158,13 +156,10 @@ const HeroSideSectionLayout = ({
   errors,
   title,
   subtitle,
-  size = "half",
+  size = "50%",
   alignment = "left",
-  backgroundColor = "black",
 }: HeroSideSectionProps) => {
-  const [, setSectionSize] = useState(size)
-  const [, setSectionAlignment] = useState(alignment)
-  const [, setSectionBackgroundColor] = useState(backgroundColor)
+  const { onChange } = useEditableContext()
 
   return (
     <>
@@ -179,16 +174,22 @@ const HeroSideSectionLayout = ({
         <Text textStyle="subhead-1">Section size</Text>
         <Radio.RadioGroup
           onChange={(nextSectionSize) => {
-            setSectionSize(nextSectionSize as SectionSize)
+            onChange({
+              target: {
+                id: "section-0-hero-size",
+                value: nextSectionSize,
+              },
+            })
           }}
-          defaultValue="half"
+          // section-0-hero-background
+          defaultValue={size || "half"}
         >
           <HStack spacing="0.5rem">
-            <Radio value="half" size="xs" w="50%" allowDeselect={false}>
+            <Radio value="50%" size="xs" w="50%" allowDeselect={false}>
               Half (1/2) of banner
             </Radio>
             <Spacer />
-            <Radio value="one-third" size="xs" w="50%" allowDeselect={false}>
+            <Radio value="33%" size="xs" w="50%" allowDeselect={false}>
               Third (1/3) of banner
             </Radio>
           </HStack>
@@ -198,9 +199,14 @@ const HeroSideSectionLayout = ({
         <Text textStyle="subhead-1">Alignment</Text>
         <Radio.RadioGroup
           onChange={(nextSectionAlignment) => {
-            setSectionAlignment(nextSectionAlignment as SectionAlignment)
+            onChange({
+              target: {
+                id: "section-0-hero-alignment",
+                value: nextSectionAlignment,
+              },
+            })
           }}
-          defaultValue="left"
+          defaultValue={alignment || "left"}
         >
           <HStack spacing="0.5rem">
             <Radio value="left" size="xs" w="50%" allowDeselect={false}>
@@ -224,7 +230,14 @@ const HeroSideSectionLayout = ({
             colorScheme="black"
             isRound
             size="sm"
-            onClick={() => setSectionBackgroundColor("black")}
+            onClick={() =>
+              onChange({
+                target: {
+                  id: "section-0-hero-backgroundColor",
+                  value: "black",
+                },
+              })
+            }
             _focus={{
               boxShadow: "0 0 0 2px var(--chakra-colors-border-action-default)",
             }}
@@ -242,7 +255,14 @@ const HeroSideSectionLayout = ({
             _focus={{
               boxShadow: "0 0 0 2px var(--chakra-colors-border-action-default)",
             }}
-            onClick={() => setSectionBackgroundColor("white")}
+            onClick={() =>
+              onChange({
+                target: {
+                  id: "section-0-hero-backgroundColor",
+                  value: "white",
+                },
+              })
+            }
           >
             <Icon as={BiInfoCircle} fill="white" fontSize="1rem" />
           </IconButton>
@@ -259,7 +279,14 @@ const HeroSideSectionLayout = ({
             _focus={{
               boxShadow: "0 0 0 2px var(--chakra-colors-border-action-default)",
             }}
-            onClick={() => setSectionBackgroundColor("translucent gray")}
+            onClick={() =>
+              onChange({
+                target: {
+                  id: "section-0-hero-backgroundColor",
+                  value: "gray",
+                },
+              })
+            }
             icon={<BxGrayTranslucent />}
           />
         </HStack>
@@ -325,6 +352,8 @@ interface HeroBodyProps extends HeroBodyFormFields {
     currentSelectedOption: HeroSectionType
   }) => React.ReactNode
   variant: HeroBannerLayouts
+  size: SectionSize
+  alignment: SectionAlignment
 }
 
 export const HeroBody = ({
@@ -376,14 +405,7 @@ export const HeroBody = ({
             }
 
             if (currentSelectedOption === HERO_LAYOUTS.SIDE_SECTION.value) {
-              return (
-                <HeroSideSectionLayout
-                  {...rest}
-                  size="half"
-                  alignment="left"
-                  backgroundColor="black"
-                />
-              )
+              return <HeroSideSectionLayout {...rest} />
             }
 
             const unmatchedOption: never = currentSelectedOption
diff --git a/src/templates/homepage/HeroSection/HeroSection.tsx b/src/templates/homepage/HeroSection/HeroSection.tsx
index d0bf6bf947..24e39311e6 100644
--- a/src/templates/homepage/HeroSection/HeroSection.tsx
+++ b/src/templates/homepage/HeroSection/HeroSection.tsx
@@ -11,7 +11,11 @@ import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
-import { SectionAlignment, SectionSize } from "types/hero"
+import {
+  SectionAlignment,
+  SectionBackgroundColor,
+  SectionSize,
+} from "types/hero"
 import { HeroBannerLayouts } from "types/homepage"
 
 import { HeroCenteredLayout } from "./HeroCenteredLayout"
@@ -110,6 +114,7 @@ interface TemplateHeroSectionProps {
     }[]
     alignment: SectionAlignment
     size: SectionSize
+    backgroundColor: SectionBackgroundColor
   }
   dropdownIsActive: boolean
   toggleDropdown: () => void
diff --git a/src/templates/homepage/HeroSection/HeroSideLayout.tsx b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
index 7ff8ed79b8..ee5da799e7 100644
--- a/src/templates/homepage/HeroSection/HeroSideLayout.tsx
+++ b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
@@ -2,6 +2,8 @@ import editorStyles from "styles/isomer-cms/pages/Editor.module.scss"
 
 import { getClassNames } from "templates/utils/stylingUtils"
 
+import { SectionBackgroundColor, SectionSize } from "types/hero"
+
 interface HeroInfoboxProps {
   title: string
   subtitle?: string
@@ -55,57 +57,45 @@ const HeroInfobox = ({ title, subtitle, url, button }: HeroInfoboxProps) => {
 }
 
 interface HeroInfoboxDesktopProps extends HeroInfoboxProps {
-  size: "half" | "one-third"
+  size: SectionSize
+  backgroundColor: SectionBackgroundColor
 }
-const HeroInfoboxDesktop = ({ size, ...rest }: HeroInfoboxDesktopProps) => {
+const HeroInfoboxDesktop = ({
+  size,
+  backgroundColor,
+  ...rest
+}: HeroInfoboxDesktopProps) => {
   return (
-    <>
-      {size === "half" ? (
-        <div
-          className={getClassNames(editorStyles, [
-            "bg-white",
-            "p16",
-            "is-hidden-mobile",
-          ])}
-          style={{
-            width: "50%",
-          }}
-        >
-          <HeroInfobox {...rest} />
-        </div>
-      ) : (
-        <div
-          className={getClassNames(editorStyles, [
-            "bg-white",
-            "p16",
-            "is-hidden-mobile",
-          ])}
-          style={{
-            width: "33%",
-          }}
-        >
-          <HeroInfobox {...rest} />
-        </div>
-      )}
-    </>
+    <div
+      className={getClassNames(editorStyles, ["p16", "is-hidden-mobile"])}
+      style={{
+        width: size,
+        backgroundColor: backgroundColor === "white" ? "white" : "black",
+        opacity: backgroundColor === "gray" ? "50%" : "100%",
+      }}
+    >
+      <HeroInfobox {...rest} />
+    </div>
   )
 }
 
 interface HeroSideLayoutProps {
   alignment: "left" | "right"
-  size: "half" | "one-third"
+  size: SectionSize
   url?: string
   button?: string
   subtitle?: string
   title: string
+  backgroundColor: SectionBackgroundColor
 }
 export const HeroSideLayout = ({
   alignment = "left",
-  size = "half",
+  size = "50%",
   url,
   title,
   subtitle,
   button,
+  backgroundColor,
 }: HeroSideLayoutProps) => {
   return (
     <div className={getClassNames(editorStyles, ["bp-hero-body"])}>
@@ -117,6 +107,7 @@ export const HeroSideLayout = ({
           button={button}
           title={title}
           subtitle={subtitle}
+          backgroundColor={backgroundColor}
         />
       ) : (
         <div className={getClassNames(editorStyles, ["is-flex", "flex-end"])}>
@@ -126,6 +117,7 @@ export const HeroSideLayout = ({
             button={button}
             title={title}
             subtitle={subtitle}
+            backgroundColor={backgroundColor}
           />
         </div>
       )}
@@ -147,7 +139,6 @@ export const HeroSideLayout = ({
       >
         <div
           className={getClassNames(editorStyles, [
-            "bg-white",
             "p8",
             "row",
             "is-vcentered",
@@ -156,6 +147,8 @@ export const HeroSideLayout = ({
           ])}
           style={{
             flexDirection: "column",
+            backgroundColor: backgroundColor === "white" ? "white" : "black",
+            opacity: backgroundColor === "gray" ? "50%" : "100%",
           }}
         >
           <div className={getClassNames(editorStyles, ["mb8"])}>