diff --git a/build.sh b/build.sh
index be7f95f..06c7dc4 100755
--- a/build.sh
+++ b/build.sh
@@ -49,20 +49,8 @@ echo "<!DOCTYPE html>
 </head>
 
 <body>
-  <div class='float-btns'>
-    <a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
-      <span>
-        <i class='fa-brands fa-github'></i>
-      </span>
-    </a>
-    <button onclick='switchTheme()' class='btn float-btn' title='Switch theme'>
-      <span>
-        <i id='light-icon' class='fa-solid fa-sun'></i>
-        <i id='dark-icon' class='fa-solid fa-moon'></i>
-      </span>
-    </button>
-  </div>
-
+  
+  <main>
   <h1>Gruvbox Wallpapers</h1>" > ./index.html
 
 color=1
@@ -122,7 +110,7 @@ do
     color=1
   fi
 done
-
+echo "</main>" >> ./index.html
 echo "<script>
   window.onload = () => {" >> ./index.html
 echo "hideAll();" >> ./index.html
@@ -136,6 +124,22 @@ echo "
 }
 </script>" >> ./index.html
 
+echo "
+<sidebar class='float-container'>
+  <div class='float-btns'>
+    <a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
+      <span>
+        <i class='fa-brands fa-github'></i>
+      </span>
+    </a>
+    <button onclick='switchTheme()' class='btn float-btn' title='Switch theme'>
+      <span>
+        <i id='light-icon' class='fa-solid fa-sun'></i>
+        <i id='dark-icon' class='fa-solid fa-moon'></i>
+      </span>
+    </button>
+  </div>
+  </sidebar>" >> ./index.html
 
 echo "
 </body>
diff --git a/style.css b/style.css
index 43b0182..2de3665 100644
--- a/style.css
+++ b/style.css
@@ -31,11 +31,61 @@
 
 body {
   background-color: var(--bg-color);
-  padding-left: 15%;
-  padding-right: 15%;
+  container-type: inline-size;
   font-family: "Curier New", monospace;
+  margin: 0;
+  min-height: 100svh;
 }
 
+main {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  /* height: 100svh; */
+
+}
+
+@container (min-width: 640px) {
+  main {
+    padding-left: 4rem;
+    padding-right: 4rem;
+
+  }
+}
+
+@container (min-width: 768px) {
+  main {
+    padding-left: 8rem;
+    padding-right: 8rem;
+
+  }
+}
+
+@container (min-width: 1024px) {
+  main {
+    padding-left: 12rem;
+    padding-right: 12rem;
+
+  }
+}
+
+@container (min-width: 1280px) {
+  main {
+    padding-left: 14rem;
+    padding-right: 14rem;
+
+  }
+}
+
+@container (min-width: 1536px) {
+  main {
+    padding-left: 18rem;
+    padding-right: 18rem;
+  }
+}
+
+
 * {
   color: var(--fg-color);
   border: none;
@@ -186,13 +236,27 @@ img:hover {
   display: none;
 }
 
+.float-container {
+
+  position: sticky;
+  top: 0;
+  /* width: 100vw; */
+  /* height: 100vh; */
+
+  display: flex;
+  flex-direction: row;
+  justify-content: end;
+  align-content: centers;
+}
+
 .float-btns {
-  position: fixed;
-  bottom: 1rem;
-  right: 2rem;
+  /* position: static; */
+  margin-bottom: 1rem;
+  margin-right: 2rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+  justify-content: end;
 }
 
 .btn.float-btn {
