diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b06948c..321d1aa 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -93,6 +93,59 @@ const { title, noHeader } = Astro.props;
       .roboto {
           font-family: var(--font-family), Roboto;
       }
+      /* Custom scrollbar because the default ones look like ASS */
+      ::-webkit-scrollbar {
+          width: 0.5rem;
+          height: 0.5rem;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--navbar-color);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--navbar-text-color);
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: var(--navbar-link-color);
+        }
+        ::-moz-scrollbar {
+            width: 0.5rem;
+            height: 0.5rem;
+        }
+        ::-moz-scrollbar-track {
+            background: var(--navbar-color);
+        }
+        ::-moz-scrollbar-thumb {
+            background: var(--navbar-text-color);
+        }
+        ::-moz-scrollbar-thumb:hover {
+             background: var(--navbar-link-color);
+        }
+        ::-ms-scrollbar {
+            width: 0.5rem;
+            height: 0.5rem;
+        }
+        ::-ms-scrollbar-track {
+            background: var(--navbar-color);
+        }
+        ::-ms-scrollbar-thumb {
+           background: var(--navbar-text-color);
+        }
+        ::-ms-scrollbar-thumb:hover {
+            background: var(--navbar-link-color);
+        }
+        ::-o-scrollbar {
+            width: 0.5rem;
+            height: 0.5rem;
+        }
+        ::-o-scrollbar-track {
+            background: var(--navbar-color);
+        }
+        ::-o-scrollbar-thumb {
+             background: var(--navbar-text-color);
+        }
+        ::-o-scrollbar-thumb:hover {
+            background: var(--navbar-link-color);
+        }
   </style>
   </body>
 </html>
diff --git a/src/layouts/SettingsLayout.astro b/src/layouts/SettingsLayout.astro
index 79025c2..8c569fb 100644
--- a/src/layouts/SettingsLayout.astro
+++ b/src/layouts/SettingsLayout.astro
@@ -9,7 +9,7 @@ import { Icon } from "astro-icon/components";
 
 <div class="flex flex-row font-roboto">
   <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
-      <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-10 max-sm:gap-5 sm:gap-5 md:p-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
+      <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-10 max-sm:gap-5 sm:gap-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
       <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>
         <Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
       </SidebarButton>
@@ -26,7 +26,7 @@ import { Icon } from "astro-icon/components";
         <Icon name="ph:user" class="h-6 w-6 text-text-color transistion duration-500 group-hover:text-text-hover-color md:h-6 md:w=6" />
       </SidebarButton>
     </div>
-    <div class="p-8 md:w-10/12 overflow-y-auto">
+    <div class="p-8 md:pb-2 flex-grow overflow-y-auto">
       <p class="text-5xl font-semibold mb-5">{t("settings.settings")}</p>
       <p class="text-2xl">{title}</p>
       <slot />