diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index af6dfe8..fd618cd 100644
--- a/src/components/Navbar.svelte
+++ b/src/components/Navbar.svelte
@@ -42,17 +42,17 @@
 
 <svelte:window on:scroll={handleScroll}/>
 
-<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 px-4 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
-    <div class="flex flex-col md:flex-row items-center justify-evenly md:justify-between match">
+<nav data-pagefind-ignore class="fixed top-0 left-0 right-0 sm:px-4 py-1 transition-colors z-10 flex justify-center before:backdrop-blur before:shadow-2xl before:absolute before:top-0 before:left-0 before:bottom-0 before:right-0 before:-z-10 before:scale-y-0 before:transition-transform before:origin-top"  bind:this={navbar}>
+    <div class="flex flex-row items-center justify-evenly md:justify-between match">
         <a class="flex items-center" href={l("/")}>
             <slot name="logo"></slot>
-            <span class="text-2xl uppercase font-bold inline-block dark:text-white">
+            <span class="text-2xl uppercase font-bold dark:text-white hidden md:inline-block">
                 {t("navbar.title")}
                 <span class="before:scale-y-100" style="display: none" aria-hidden="true"></span>
             </span>
         </a>
         <div class="flex justify-center flex-wrap">
-            <div class="btn-dropdown my-1">
+            <div class="btn-dropdown">
                 <button class="btn btn-gray">
                     <a href={l("/")}>
                         <span class="btn__text">{t("navbar.links.home.title")}</span>
@@ -66,7 +66,7 @@
                     <a class="btn btn-gray" href={l("/code-of-conduct")}>{t("navbar.links.rules.coc")}</a>
                 </div>
             </div>
-            <div class="btn-dropdown my-1">
+            <div class="btn-dropdown">
                 <button class="btn btn-gray">
                     <a rel="prefetch" href={l("/rules")}>
                         <span class="btn__text">{t("navbar.links.rules.title")}</span>
@@ -101,7 +101,7 @@
                 </div>
             </div>
             -->
-            <a class="btn my-1" href={l("/login")}>
+            <a class="btn" href={l("/login")}>
                 <span class="btn__text">{t("navbar.links.account")}</span>
             </a>
             <!--
diff --git a/src/pages/index.astro b/src/pages/index.astro
index fb7b2d7..5374fa7 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -208,7 +208,7 @@ const prefixColorMap: {
     }
 
     .barlow {
-        font-family: Barlow Condensed, serif;
+        font-family: Barlow Condensed, sans-serif;
     }
 
     .card {
diff --git a/src/styles/button.css b/src/styles/button.css
index ff08a29..8a38dba 100644
--- a/src/styles/button.css
+++ b/src/styles/button.css
@@ -18,7 +18,7 @@
  */
 
 .btn {
-    @apply bg-yellow-400 font-bold py-2 px-4 rounded cursor-pointer select-none mx-2 text-black flex flex-row;
+    @apply bg-yellow-400 font-bold py-2 px-4 rounded cursor-pointer select-none mx-0.5 md:mx-2 text-black flex flex-row;
     @apply hover:bg-yellow-300 hover:text-black hover:shadow-2xl hover:scale-105;
     transition: all 0.5s cubic-bezier(.2, 3, .67, .6),
     background-color .1s ease-in-out,
@@ -32,7 +32,7 @@
 }
 
 .btn-dropdown {
-    @apply relative mx-2;
+    @apply relative mx-0.5 md:mx-2;
 
     > :nth-child(1) {
         @apply !mx-0;