diff --git a/src/components/FormFieldMedia/FormMediaInput.jsx b/src/components/FormFieldMedia/FormMediaInput.jsx
index c1fe9d0c4d..302d427e88 100644
--- a/src/components/FormFieldMedia/FormMediaInput.jsx
+++ b/src/components/FormFieldMedia/FormMediaInput.jsx
@@ -1,4 +1,4 @@
-import { Flex } from "@chakra-ui/react"
+import { HStack } from "@chakra-ui/react"
 import { Button } from "@opengovsg/design-system-react"
 import PropTypes from "prop-types"
 
@@ -16,7 +16,7 @@ const FormMediaInput = ({
   const { isRequired, isDisabled } = useFormContext()
 
   return (
-    <Flex>
+    <HStack spacing="0.5rem">
       <FormInput
         placeholder={placeholder}
         value={value}
@@ -30,7 +30,7 @@ const FormMediaInput = ({
           {inlineButtonText}
         </Button>
       )}
-    </Flex>
+    </HStack>
   )
 }
 
diff --git a/src/layouts/components/Homepage/HeroBody.tsx b/src/layouts/components/Homepage/HeroBody.tsx
index 733d176937..2d78e1665c 100644
--- a/src/layouts/components/Homepage/HeroBody.tsx
+++ b/src/layouts/components/Homepage/HeroBody.tsx
@@ -113,7 +113,7 @@ export const HeroBody = ({
           />
           <FormErrorMessage>{errors.subtitle}</FormErrorMessage>
         </FormControl>
-        <Box>
+        <Box w="100%">
           {/* TODO: migrate this to design system components */}
           <FormContext
             hasError={!!errors.background}