diff --git a/app/components/navigation/FilterItem.vue b/app/components/navigation/FilterItem.vue
index 7c5477e..220c9d3 100644
--- a/app/components/navigation/FilterItem.vue
+++ b/app/components/navigation/FilterItem.vue
@@ -3,7 +3,7 @@ const model = defineModel();
 
 const { canClear = false } = defineProps<{
 	title: string;
-  explanation: string
+	explanation: string;
 	options: string[];
 	canClear?: boolean;
 }>();
@@ -24,6 +24,7 @@ const { canClear = false } = defineProps<{
 
 <style scoped>
 #main{
+  min-width: max-content;
   background: var(--surface-200);
   padding: 5px 10px;
   border-radius: 5px;
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 1ae35db..7b2d981 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -4,12 +4,22 @@
 <template>
   <div id="page">
     <div id="nav">
-      <NuxtLink id="header" href="/">
+      <div class="compact">
+        <NuxtLink id="header" href="/">
+          Modrinth Statistics
+        </NuxtLink>
+        <div id="icons">
+          <NuxtLink id="github" to="https://github.com/ToBinio/modrinth-statistics" target="_blank">
+            <Icon name="mdi:github" size="40"/>
+          </NuxtLink>
+        </div>
+      </div>
+      <NuxtLink class="big" id="header" href="/">
         Modrinth Statistics
       </NuxtLink>
       <div id="navBody">
       </div>
-      <div id="icons">
+      <div class="big" id="icons">
         <NuxtLink id="github" to="https://github.com/ToBinio/modrinth-statistics" target="_blank">
           <Icon name="mdi:github" size="40"/>
         </NuxtLink>
@@ -31,6 +41,11 @@
   flex-direction: column;
 
   #nav {
+
+    .compact{
+      display: none;
+    }
+
     z-index: 10;
 
     padding: 10px;
@@ -50,11 +65,6 @@
       font-size: xx-large;
     }
 
-    #fullLinks {
-      display: flex;
-      gap: 25px;
-    }
-
     #icons {
       display: flex;
       gap: 25px;
@@ -97,30 +107,41 @@
   }
 }
 
-@media only screen and (max-width: 1400px) {
+@media only screen and (max-width: 1610px) {
   #header {
     width: min-content !important;
   }
 }
 
-@media only screen and (max-width: 1220px) {
-  #navBody {
-    display: none !important;
-  }
-}
-
-@media only screen and (min-width: 1221px) {
-  .linksButton {
-    display: none !important;
+@media only screen and (max-width: 1470px) {
+  #navBody{
+    overflow: scroll;
+    width: 100%;
   }
 }
 
-@media only screen and (max-width: 450px) {
+@media only screen and (max-width: 700px) {
   #nav {
-    gap: 20px !important;
 
+    #header {
+      width: 100% !important;
+    }
+
+    .compact{
+      display: flex !important;
+      gap: 20px;
+    }
+
+    .big{
+      display: none !important;
+    }
+
+    gap: 20px !important;
+    flex-direction: column;
     #icons {
       gap: 10px !important;
+      display: flex;
+      align-items: center;
     }
   }
 }