diff --git a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
index fc2bb60c63..7ba3cb0c77 100644
--- a/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
+++ b/app/pages/package-code/[[org]]/[packageName]/v/[version]/[...filePath].vue
@@ -288,6 +288,24 @@ defineOgImageComponent('Default', {
   primaryColor: '#60a5fa',
 })
 
+
+// Sidebar visibility
+const { settings } = useSettings()
+const isSidebarCollapsed = computed({
+  get: () => settings.value.sidebar.collapsed.includes('code'),
+  set: value => {
+    const collapsed = settings.value.sidebar.collapsed.filter(id => id !== 'code')
+    if (value) {
+      collapsed.push('code')
+    }
+    settings.value.sidebar.collapsed = collapsed
+  },
+})
+
+function toggleSidebar() {
+  isSidebarCollapsed.value = !isSidebarCollapsed.value
+}
+
 onPrehydrate(el => {
   const settingsSaved = JSON.parse(localStorage.getItem('npmx-settings') || '{}')
   const container = el.querySelector('#code-page-container')
@@ -296,6 +314,7 @@ onPrehydrate(el => {
     container.classList.add('container-full')
   }
 })
+
 </script>
 
 <template>
@@ -341,7 +360,13 @@ onPrehydrate(el => {
     >
       <!-- File tree sidebar - sticky with internal scroll -->
       <aside
+
+        id="file-tree-sidebar"
+        v-show="!isSidebarCollapsed"
+        class="w-64 lg:w-72 border-ie border-border shrink-0 hidden md:block bg-bg-subtle sticky top-25 self-start h-[calc(100vh-7rem)] overflow-y-auto"
+
         class="sticky top-25 w-64 lg:w-72 hidden md:block h-[calc(100vh-10.5rem)] shrink-0 self-start bg-bg-subtle border-ie border-border"
+
       >
         <div class="h-[calc(100vh-10.5rem)] overflow-y-auto">
           <CodeFileTree
@@ -354,6 +379,110 @@ onPrehydrate(el => {
       </aside>
 
       <!-- File content / Directory listing - sticky with internal scroll on desktop -->
+
+      <div class="flex-1 min-w-0 self-start">
+        <div
+          class="sticky z-5 top-25 bg-bg border-b border-border px-4 py-2 flex items-center justify-between gap-2 text-nowrap overflow-x-auto max-w-full"
+        >
+          <div class="flex items-center gap-2">
+            <!-- Sidebar toggle button -->
+            <button
+              type="button"
+              class="hidden md:flex items-center justify-center w-8 h-8 text-fg-subtle hover:text-fg transition-colors focus-visible:outline-accent/70 rounded"
+              :aria-label="$t(isSidebarCollapsed ? 'code.show_sidebar' : 'code.hide_sidebar')"
+              :aria-expanded="!isSidebarCollapsed"
+              aria-controls="file-tree-sidebar"
+              @click="toggleSidebar"
+            >
+              <span
+                class="w-4 h-4"
+                :class="isSidebarCollapsed ? 'i-lucide:sidebar-open' : 'i-lucide:sidebar-close'"
+                aria-hidden="true"
+              />
+            </button>
+
+            <div
+              v-if="fileContent?.markdownHtml"
+              class="flex items-center gap-1 p-0.5 bg-bg-subtle border border-border-subtle rounded-md overflow-x-auto"
+              role="tablist"
+              aria-label="Markdown view mode selector"
+            >
+              <button
+                v-for="mode in markdownViewModes"
+                :key="mode.key"
+                role="tab"
+                class="px-2 py-1.5 font-mono text-xs rounded transition-colors duration-150 border border-solid focus-visible:outline-accent/70 inline-flex items-center gap-1.5"
+                :class="
+                  markdownViewMode === mode.key
+                    ? 'bg-bg shadow text-fg border-border'
+                    : 'text-fg-subtle hover:text-fg border-transparent'
+                "
+                :aria-selected="markdownViewMode === mode.key"
+                @click="markdownViewMode = mode.key"
+              >
+                <span class="inline-block h-3 w-3" :class="mode.icon" aria-hidden="true" />
+                {{ mode.label }}
+              </button>
+            </div>
+            <!-- Breadcrumb navigation -->
+            <nav
+              :aria-label="$t('code.file_path')"
+              class="flex items-center gap-0.5 font-mono text-sm overflow-x-auto"
+              dir="ltr"
+            >
+              <NuxtLink
+                v-if="filePath"
+                :to="getCurrentCodeUrlWithPath()"
+                class="text-fg-muted hover:text-fg transition-colors shrink-0"
+              >
+                {{ $t('code.root') }}
+              </NuxtLink>
+              <span v-else class="text-fg shrink-0">{{ $t('code.root') }}</span>
+              <template v-for="(crumb, i) in breadcrumbs" :key="crumb.path">
+                <span class="text-fg-subtle">/</span>
+                <NuxtLink
+                  v-if="i < breadcrumbs.length - 1"
+                  :to="getCurrentCodeUrlWithPath(crumb.path)"
+                  class="text-fg-muted hover:text-fg transition-colors"
+                >
+                  {{ crumb.name }}
+                </NuxtLink>
+                <span v-else class="text-fg">{{ crumb.name }}</span>
+              </template>
+            </nav>
+          </div>
+          <div class="flex items-center gap-2" v-if="isViewingFile && !isBinaryFile && fileContent">
+            <button
+              v-if="selectedLines"
+              type="button"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors active:scale-95"
+              @click="copyPermalinkUrl"
+            >
+              {{ permalinkCopied ? $t('common.copied') : $t('code.copy_link') }}
+            </button>
+            <button
+              v-if="!!fileContent?.content"
+              type="button"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1 capitalize"
+              @click="copyFileContent()"
+            >
+              <span
+                class="w-3 h-3"
+                :class="fileContentCopied ? 'i-lucide:check' : 'i-lucide:file'"
+              />
+              {{ fileContentCopied ? $t('common.copied') : $t('common.copy') }}
+            </button>
+            <a
+              :href="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="px-2 py-1 font-mono text-xs text-fg-muted bg-bg-subtle border border-border rounded hover:text-fg hover:border-border-hover transition-colors inline-flex items-center gap-1"
+            >
+              {{ $t('code.raw') }}
+              <span class="i-lucide:external-link w-3 h-3" />
+            </a>
+          </div>
+        </div>
       <div class="flex-1 grid grid-rows-[auto_1fr_auto] h-full min-h-full min-w-0 self-start">
         <CodeHeader
           :file-path="filePath"
@@ -371,6 +500,7 @@ onPrehydrate(el => {
         <!-- Loading file/directory content -->
         <CodeSkeletonLoader v-if="isLoading" />
 
+
         <!-- File viewer -->
         <template v-else-if="isViewingFile && !isBinaryFile && fileContent">
           <div