diff --git a/src/pages/index.js b/src/pages/index.js
index 6fa6bff23..a668e82e3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -35,7 +35,7 @@ export default function Index({ data }) {
             This is my digital garden. 🌱
           </p>
         </Hero>
-        <div>
+        <div className="decoration">
           <div className="circles">
             <div className="circle rainbow-1" />
             <div className="circle rainbow-2" />
diff --git a/src/styles/layout.css b/src/styles/layout.css
index d8d7f3313..8a3056377 100644
--- a/src/styles/layout.css
+++ b/src/styles/layout.css
@@ -17,10 +17,14 @@ main {
   .hero-container {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 3rem;
   }
 }
 
+.decoration {
+  width: 60%;
+}
+
 .hero {
   padding: 1.5rem 0 0;
   position: relative;