diff --git a/src/templates/homepage/HeroSection/HeroSideLayout.tsx b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
index 420158be7..625d2d94e 100644
--- a/src/templates/homepage/HeroSection/HeroSideLayout.tsx
+++ b/src/templates/homepage/HeroSection/HeroSideLayout.tsx
@@ -74,12 +74,20 @@ const HeroInfoboxDesktop = ({
           )}
 
           {dropdown ? (
-            <HeroDropdown
-              title={dropdown.title}
-              options={dropdown.options}
-              isActive={dropdownIsActive}
-              toggleDropdown={toggleDropdown}
-            />
+            <div
+              className={getClassNames(editorStyles, ["is-flex"])}
+              style={{
+                justifyContent: "center",
+                alignContent: "center",
+              }}
+            >
+              <HeroDropdown
+                title={dropdown.title}
+                options={dropdown.options}
+                isActive={dropdownIsActive}
+                toggleDropdown={toggleDropdown}
+              />
+            </div>
           ) : (
             // NOTE: This is to mirror the template structure
             // as closely as possible.