diff --git a/client/src/components/Sidebar.svelte b/client/src/components/Sidebar.svelte
index 4eb8fd7..38ee8b6 100644
--- a/client/src/components/Sidebar.svelte
+++ b/client/src/components/Sidebar.svelte
@@ -17,6 +17,8 @@ let hasMusic = false;
   import { writable } from 'svelte/store';
   const diskSpaceStore = writable({ totalGB: '0', usedGB: '0', usedPercent: 0 });
   let diskSpace;
+  let hasMedia = false;
+  $: hasMedia = hasMovies || hasShows || hasMusic;
   
   // Store subscription'ı temizlemek için
   let unsubscribeDiskSpace;
@@ -133,7 +135,7 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
 <div class="sidebar" class:open={menuOpen}>
   <div class="logo">du.pe</div>
 
-  <div class="menu">
+  <div class="menu primary-menu">
     <Link
       to="/"
       class="item"
@@ -146,48 +148,6 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
       Files
     </Link>
 
-    {#if hasMovies}
-      <Link
-        to="/movies"
-        class="item"
-        getProps={({ isCurrent }) => ({
-          class: isCurrent ? "item active" : "item",
-        })}
-        on:click={handleLinkClick}
-      >
-        <i class="fa-solid fa-film icon"></i>
-        Movies
-      </Link>
-    {/if}
-
-    {#if hasShows}
-      <Link
-        to="/tv"
-        class="item"
-        getProps={({ isCurrent }) => ({
-          class: isCurrent ? "item active" : "item",
-        })}
-        on:click={handleLinkClick}
-      >
-        <i class="fa-solid fa-tv icon"></i>
-        Tv Shows
-      </Link>
-    {/if}
-
-    {#if hasMusic}
-      <Link
-        to="/music"
-        class="item"
-        getProps={({ isCurrent }) => ({
-          class: isCurrent ? "item active" : "item",
-        })}
-        on:click={handleLinkClick}
-      >
-        <i class="fa-solid fa-music icon"></i>
-        Music
-      </Link>
-    {/if}
-
     <Link
       to="/transfers"
       class="item"
@@ -215,6 +175,57 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
       {/if}
     </Link>
   </div>
+
+  {#if hasMedia}
+    <div class="menu media-menu">
+      <div class="menu-header">
+        <span class="menu-label">Media</span>
+      </div>
+      <div class="menu-divider"></div>
+
+      {#if hasMovies}
+        <Link
+          to="/movies"
+          class="item"
+          getProps={({ isCurrent }) => ({
+            class: isCurrent ? "item active" : "item",
+          })}
+          on:click={handleLinkClick}
+        >
+          <i class="fa-solid fa-film icon"></i>
+          Movies
+        </Link>
+      {/if}
+
+      {#if hasShows}
+        <Link
+          to="/tv"
+          class="item"
+          getProps={({ isCurrent }) => ({
+            class: isCurrent ? "item active" : "item",
+          })}
+          on:click={handleLinkClick}
+        >
+          <i class="fa-solid fa-tv icon"></i>
+          Tv Shows
+        </Link>
+      {/if}
+
+      {#if hasMusic}
+        <Link
+          to="/music"
+          class="item"
+          getProps={({ isCurrent }) => ({
+            class: isCurrent ? "item active" : "item",
+          })}
+          on:click={handleLinkClick}
+        >
+          <i class="fa-solid fa-music icon"></i>
+          Music
+        </Link>
+      {/if}
+    </div>
+  {/if}
   
   <!-- Disk Space Alanı - Sidebar'ın en altında -->
   <div class="disk-space">
@@ -241,23 +252,56 @@ const unsubscribeMusic = musicCount.subscribe((count) => {
         </div>
         </div>
         
-        <style>
-          .badge {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 18px;
-            height: 18px;
-            padding: 0 5px;
-            margin-left: 8px;
-            background: #f44336;
-            color: white;
-            font-size: 11px;
-            font-weight: 600;
-            border-radius: 9px;
-            line-height: 1;
-          }
-        </style>
     </div>
   </div>
 </div>
+
+<style>
+  .menu {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .menu.primary-menu {
+    padding-top: 3px;
+  }
+
+  .menu.media-menu {
+    margin-top: 0;
+  }
+
+  .menu-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 10px;
+    color: #8d93a1;
+    font-size: 11px;
+    letter-spacing: 0.4px;
+    text-transform: uppercase;
+    font-weight: 600;
+  }
+
+  .menu-divider {
+    height: 1px;
+    margin: 2px 10px;
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    height: 18px;
+    padding: 0 5px;
+    margin-left: 8px;
+    background: #f44336;
+    color: white;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 9px;
+    line-height: 1;
+  }
+</style>
diff --git a/client/src/styles/main.css b/client/src/styles/main.css
index 186b9a3..0962c24 100644
--- a/client/src/styles/main.css
+++ b/client/src/styles/main.css
@@ -62,8 +62,7 @@ body,
 }
 
 .sidebar .menu {
-  padding-top: 6px;
-  flex: 1;
+  padding-top: 8px;
 }
 
 .sidebar .menu .item {