diff --git a/docs~/src/pages/index.module.css b/docs~/src/pages/index.module.css
index a8166690..9ef0a6aa 100644
--- a/docs~/src/pages/index.module.css
+++ b/docs~/src/pages/index.module.css
@@ -23,6 +23,7 @@
   justify-content: center;
   column-gap: 2rem;
   row-gap: 1rem;
+  margin-bottom: 1em;
 }
 
 @media screen and (max-width: 996px) {
@@ -36,4 +37,4 @@ div.logo {
     text-align: center;
     display: flex;
     justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/docs~/src/pages/index.tsx b/docs~/src/pages/index.tsx
index 88796298..889f8ced 100644
--- a/docs~/src/pages/index.tsx
+++ b/docs~/src/pages/index.tsx
@@ -29,7 +29,7 @@ function HomepageHeader() {
         <p className="hero__subtitle">
             <Translate>Drag-and-Drop Avatar Assembly</Translate>
         </p>
-        <div className={`button-group ${styles.buttons}`}>
+        <div className={`${styles.buttons}`}>
           <InstallButton/>
           <Link
             className={`button button--secondary button--lg ${styles.button}`}
@@ -43,7 +43,7 @@ function HomepageHeader() {
             <Translate>Tutorials</Translate>
           </Link>
         </div>
-        <div className={`button-group ${styles.buttons}`}>
+        <div className={`${styles.buttons}`}>
             <a href={"https://discord.gg/dV4cVpewmM"} className={`discordLink`}>
                 <img className={`button button--lg ${styles.button}`}
                      alt="Discord"