diff --git a/website/src/components/home/HomePageControls.tsx b/website/src/components/home/HomePageControls.tsx
index ea4b4f07..7613ba77 100644
--- a/website/src/components/home/HomePageControls.tsx
+++ b/website/src/components/home/HomePageControls.tsx
@@ -1,15 +1,17 @@
 import { useStore } from '@nanostores/react';
+import clsx from 'clsx';
 import { framework, media, skin } from '@/stores/homePageDemos';
 import ToggleGroup from '../ToggleGroup';
 
-export default function HomePageControls() {
+export default function HomePageControls({ className }: { className?: string }) {
   const $framework = useStore(framework);
   const $skin = useStore(skin);
   const $media = useStore(media);
 
   return (
-    <>
+    <section className={clsx('flex flex-col sm:flex-row sm:gap-20 items-center justify-center', className)}>
       <ToggleGroup
+        className="mx-auto sm:mx-0 col-span-full grid grid-cols-2 justify-center sm:flex"
         value={$skin}
         onChange={value => skin.set(value)}
         options={[
@@ -20,6 +22,7 @@ export default function HomePageControls() {
       />
 
       <ToggleGroup
+        className="mx-auto sm:mx-0 col-span-full grid grid-cols-2 justify-center sm:flex"
         value={$framework}
         onChange={value => framework.set(value)}
         options={[
@@ -30,6 +33,7 @@ export default function HomePageControls() {
       />
 
       <ToggleGroup
+        className="mx-auto sm:mx-0 col-span-full grid grid-cols-2 justify-center sm:flex"
         value={$media}
         onChange={value => media.set(value)}
         options={[
@@ -38,6 +42,6 @@ export default function HomePageControls() {
         ]}
         aria-label="Select media element"
       />
-    </>
+    </section>
   );
 }
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
index 146b109c..630969e8 100644
--- a/website/src/pages/index.astro
+++ b/website/src/pages/index.astro
@@ -43,9 +43,7 @@ const poster = `https://image.mux.com/${PLAYBACK_ID}/thumbnail.webp?time=0`;
   </header>
   <!-- padding corresponds to negative margin on player -->
   <main class="@container pt-11 pb-36 md:pt-21 lg:pt-32 px-6 md:px-10 w-full max-w-7xl mx-auto min-h-64">
-    <section class="col-span-full flex flex-col sm:flex-row sm:gap-20 items-center justify-center mt-10 mb-20">
-      <HomePageControls client:idle />
-    </section>
+    <HomePageControls client:idle className="col-span-full my-10 sm:mb-20" />
     <section class="grid gap-x-9 gap-y-6 lg:grid-cols-2 mb-6 lg:mb-30">
       <section class="grid grid-rows-subgrid row-span-2 mb-6">
         <header class="max-w-3xl">