diff --git a/app/components/Package/Skeleton.vue b/app/components/Package/Skeleton.vue
index 89f429c1d0..9e1a863b73 100644
--- a/app/components/Package/Skeleton.vue
+++ b/app/components/Package/Skeleton.vue
@@ -4,111 +4,124 @@
   <article
     aria-busy="true"
     :aria-label="$t('package.skeleton.loading')"
-    class="motion-safe:animate-fade-in"
+    class="package-page motion-safe:animate-fade-in"
   >
-    <!-- Package header - matches header in [...name].vue -->
-    <header class="mb-8 pb-8 border-b border-border">
-      <div class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4 mb-4">
-        <div class="flex-1 min-w-0">
-          <!-- Package name: h1 font-mono text-2xl sm:text-3xl font-medium mb-2 -->
-          <h1 class="font-mono text-2xl sm:text-3xl font-medium mb-2">
+    <!-- Package header — matches area-header in [...name].vue -->
+    <header class="area-header sticky top-14 z-1 bg-[--bg] py-2">
+      <div class="flex items-baseline gap-2 sm:gap-3 flex-wrap min-w-0">
+        <!-- Package name -->
+        <div class="min-w-0">
+          <h1 class="font-mono text-2xl sm:text-3xl font-medium">
             <SkeletonInline class="h-9 w-48" />
           </h1>
-          <!-- Description: fixed height container matching min-h-[4.5rem] (72px) to prevent CLS -->
-          <div class="relative max-w-2xl min-h-[4.5rem]">
-            <div class="space-y-2">
-              <SkeletonBlock class="h-5 w-full" />
-              <SkeletonBlock class="h-5 w-4/5" />
-              <SkeletonBlock class="h-5 w-3/5" />
-            </div>
+        </div>
+        <!-- Version -->
+        <span class="inline-flex items-baseline font-mono text-base sm:text-lg shrink-0">
+          <SkeletonInline class="h-6 w-20" />
+        </span>
+        <!-- Metrics badges placeholder -->
+        <div class="flex items-center gap-1.5 relative top-[5px] self-baseline ms-1 sm:ms-2">
+          <SkeletonBlock class="w-16 h-5.5 rounded" />
+          <SkeletonBlock class="w-13 h-5.5 rounded" />
+          <SkeletonBlock class="w-13 h-5.5 rounded" />
+          <SkeletonBlock class="w-13 h-5.5 rounded bg-bg-subtle" />
+        </div>
+        <!-- Internal navigation placeholder (hidden on mobile) -->
+        <div
+          class="hidden sm:flex items-center gap-0.5 p-0.5 bg-bg-subtle border border-border-subtle rounded-md shrink-0 ms-auto self-center"
+        >
+          <SkeletonInline class="h-7 w-16 rounded" />
+          <SkeletonInline class="h-7 w-14 rounded" />
+          <SkeletonInline class="h-7 w-20 rounded" />
+        </div>
+      </div>
+    </header>
+
+    <!-- Package details — matches area-details in [...name].vue -->
+    <section class="area-details">
+      <div class="mb-4">
+        <!-- Description container with min-height to prevent CLS -->
+        <div class="max-w-2xl min-h-[4.5rem]">
+          <div class="space-y-2">
+            <SkeletonBlock class="h-5 w-full" />
+            <SkeletonBlock class="h-5 w-4/5" />
+            <SkeletonBlock class="h-5 w-3/5" />
           </div>
         </div>
 
-        <!-- Version badge: shrink-0 px-3 py-1 font-mono text-sm bg-bg-muted border border-border rounded-md -->
-        <SkeletonInline class="shrink-0 h-8 w-20 rounded-md" />
+        <!-- External links -->
+        <ul class="flex flex-wrap items-center gap-x-3 gap-y-1.5 sm:gap-4 list-none m-0 p-0 mt-3">
+          <li><SkeletonInline class="h-5 w-28" /></li>
+          <li><SkeletonInline class="h-5 w-14" /></li>
+          <li><SkeletonInline class="h-5 w-16" /></li>
+          <li><SkeletonInline class="h-5 w-10" /></li>
+        </ul>
       </div>
 
-      <!-- Stats grid: grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6 -->
-      <dl class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4 mt-6">
+      <!-- Stats grid — matches dl in [...name].vue -->
+      <dl
+        class="grid grid-cols-2 sm:grid-cols-7 md:grid-cols-11 gap-3 sm:gap-4 py-4 sm:py-6 mt-4 sm:mt-6 border-t border-b border-border"
+      >
         <!-- License -->
-        <div class="space-y-1">
+        <div class="space-y-1 sm:col-span-2">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.skeleton.license') }}
+            {{ $t('package.stats.license') }}
           </dt>
           <dd class="font-mono text-sm">
             <SkeletonInline class="h-5 w-12" />
           </dd>
         </div>
 
-        <!-- Weekly -->
-        <div class="space-y-1">
+        <!-- Deps -->
+        <div class="space-y-1 sm:col-span-2">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.skeleton.weekly') }}
+            {{ $t('package.stats.deps') }}
           </dt>
           <dd class="font-mono text-sm">
-            <SkeletonInline class="h-5 w-20" />
+            <SkeletonInline class="h-5 w-12" />
           </dd>
         </div>
 
-        <!-- Size -->
-        <div class="space-y-1">
+        <!-- Install Size -->
+        <div class="space-y-1 sm:col-span-3">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.skeleton.size') }}
+            {{ $t('package.stats.install_size') }}
           </dt>
           <dd class="font-mono text-sm">
             <SkeletonInline class="h-5 w-16" />
           </dd>
         </div>
 
-        <!-- Deps -->
-        <div class="space-y-1">
+        <!-- Vulns -->
+        <div class="space-y-1 sm:col-span-2">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.skeleton.deps') }}
+            {{ $t('package.stats.vulns') }}
           </dt>
-          <dd class="font-mono text-sm">
-            <SkeletonInline class="h-5 w-8" />
-          </dd>
+          <dd class="font-mono text-sm text-fg-subtle">-</dd>
         </div>
 
         <!-- Published -->
-        <div class="space-y-1 col-span-2">
+        <div class="space-y-1 sm:col-span-2">
           <dt class="text-xs text-fg-subtle uppercase tracking-wider">
-            {{ $t('package.skeleton.published') }}
+            {{ $t('package.stats.published') }}
           </dt>
           <dd class="font-mono text-sm">
             <SkeletonInline class="h-5 w-28" />
           </dd>
         </div>
       </dl>
+    </section>
 
-      <!-- Links: mt-6, flex flex-wrap items-center gap-4 -->
-      <nav aria-label="Package links" class="mt-6">
-        <ul class="flex flex-wrap items-center gap-4 list-none m-0 p-0">
-          <li>
-            <SkeletonInline class="h-5 w-14" />
-          </li>
-          <li>
-            <SkeletonInline class="h-5 w-20" />
-          </li>
-          <li>
-            <SkeletonInline class="h-5 w-16" />
-          </li>
-          <li>
-            <SkeletonInline class="h-5 w-12" />
-          </li>
-        </ul>
-      </nav>
-    </header>
-
-    <!-- Install section: mb-8 -->
-    <section class="mb-8">
-      <h2
-        id="install-heading-skeleton"
-        class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
-      >
-        {{ $t('package.skeleton.get_started') }}
-      </h2>
-      <!-- code-block with relative positioning for copy button -->
+    <!-- Install section — matches area-install in [...name].vue -->
+    <section class="area-install scroll-mt-20">
+      <div class="flex flex-wrap items-center justify-between mb-3">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
+          {{ $t('package.get_started.title') }}
+        </h2>
+        <!-- Package manager select placeholder -->
+        <SkeletonInline class="h-7 w-24 rounded" />
+      </div>
+      <!-- Install command code block -->
       <div class="relative">
         <div
           class="bg-bg-muted border border-border rounded-md p-4 font-mono text-sm overflow-x-auto pe-16"
@@ -119,86 +132,55 @@
       </div>
     </section>
 
-    <!-- Two column layout: grid lg:grid-cols-3 gap-8 -->
-    <div class="grid lg:grid-cols-3 gap-8">
-      <!-- Main content (README): lg:col-span-2 order-2 lg:order-1 -->
-      <div class="lg:col-span-2 order-2 lg:order-1">
-        <section>
-          <h2
-            id="readme-heading-skeleton"
-            class="text-xs text-fg-subtle uppercase tracking-wider mb-4"
-          >
-            {{ $t('package.skeleton.readme') }}
-          </h2>
-          <!-- Simulated README content -->
-          <div class="space-y-4">
-            <!-- Heading -->
-            <SkeletonBlock class="h-7 w-2/3" />
-            <!-- Paragraphs -->
-            <SkeletonBlock class="h-4 w-full" />
-            <SkeletonBlock class="h-4 w-full" />
-            <SkeletonBlock class="h-4 w-4/5" />
-            <!-- Gap for section break -->
-            <SkeletonBlock class="h-6 w-1/2 mt-6" />
-            <SkeletonBlock class="h-4 w-full" />
-            <SkeletonBlock class="h-4 w-full" />
-            <SkeletonBlock class="h-4 w-3/4" />
-            <!-- Code block placeholder -->
-            <SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
-            <SkeletonBlock class="h-4 w-full" />
-            <SkeletonBlock class="h-4 w-5/6" />
-          </div>
-        </section>
-      </div>
+    <!-- Vulns area (empty placeholder to hold grid space) -->
+    <div class="area-vulns" />
 
-      <!-- Sidebar: order-1 lg:order-2 space-y-8 -->
-      <div class="order-1 lg:order-2 space-y-8">
-        <!-- Maintainers -->
-        <section>
-          <h2
-            id="maintainers-heading-skeleton"
-            class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
-          >
-            {{ $t('package.skeleton.maintainers') }}
-          </h2>
-          <ul class="space-y-2 list-none m-0 p-0">
-            <li>
-              <SkeletonInline class="h-5 w-28" />
-            </li>
-            <li>
-              <SkeletonInline class="h-5 w-24" />
-            </li>
-          </ul>
-        </section>
+    <!-- README — matches area-readme in [...name].vue -->
+    <section class="area-readme min-w-0 scroll-mt-20">
+      <div class="flex flex-wrap items-center justify-between mb-3 px-1">
+        <h2 class="text-xs text-fg-subtle uppercase tracking-wider">
+          {{ $t('package.readme.title') }}
+        </h2>
+      </div>
+      <!-- Simulated README content -->
+      <div class="space-y-4">
+        <!-- Heading -->
+        <SkeletonBlock class="h-7 w-2/3" />
+        <!-- Paragraphs -->
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-4/5" />
+        <!-- Gap for section break -->
+        <SkeletonBlock class="h-6 w-1/2 mt-6" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-3/4" />
+        <!-- Code block placeholder -->
+        <SkeletonBlock class="h-24 w-full rounded-lg mt-4" />
+        <SkeletonBlock class="h-4 w-full" />
+        <SkeletonBlock class="h-4 w-5/6" />
+      </div>
+    </section>
 
-        <!-- Keywords -->
+    <!-- Sidebar — matches area-sidebar in [...name].vue -->
+    <div class="area-sidebar">
+      <div
+        class="sidebar-scroll sticky top-34 space-y-6 sm:space-y-8 min-w-0 overflow-y-auto pe-2.5 lg:(max-h-[calc(100dvh-8.5rem)] overscroll-contain) xl:(top-22 pt-2 max-h-[calc(100dvh-6rem)])"
+      >
+        <!-- Download stats -->
         <section>
-          <h2
-            id="keywords-heading-skeleton"
-            class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
-          >
-            {{ $t('package.skeleton.keywords') }}
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
+            {{ $t('package.skeleton.weekly') }}
           </h2>
-          <!-- flex flex-wrap gap-1.5 -->
-          <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
-            <li><SkeletonInline class="h-6 w-16 rounded" /></li>
-            <li><SkeletonInline class="h-6 w-12 rounded" /></li>
-            <li><SkeletonInline class="h-6 w-20 rounded" /></li>
-            <li><SkeletonInline class="h-6 w-14 rounded" /></li>
-            <li><SkeletonInline class="h-6 w-18 rounded" /></li>
-            <li><SkeletonInline class="h-6 w-10 rounded" /></li>
-          </ul>
+          <!-- Chart placeholder -->
+          <SkeletonBlock class="h-32 w-full rounded-lg" />
         </section>
 
         <!-- Versions -->
         <section>
-          <h2
-            id="versions-heading-skeleton"
-            class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
-          >
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
             {{ $t('package.skeleton.versions') }}
           </h2>
-          <!-- space-y-1, each row: flex items-center justify-between py-1.5 text-sm -->
           <div class="space-y-1">
             <div class="flex items-center justify-between py-1.5 text-sm">
               <SkeletonInline class="h-4 w-16" />
@@ -225,13 +207,9 @@
 
         <!-- Dependencies -->
         <section>
-          <h2
-            id="dependencies-heading-skeleton"
-            class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
-          >
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
             {{ $t('package.skeleton.dependencies') }}
           </h2>
-          <!-- space-y-1, each: flex items-center justify-between py-1 text-sm -->
           <ul class="space-y-1 list-none m-0 p-0">
             <li class="flex items-center justify-between py-1 text-sm">
               <SkeletonInline class="h-4 w-24" />
@@ -251,7 +229,137 @@
             </li>
           </ul>
         </section>
+
+        <!-- Keywords -->
+        <section>
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
+            {{ $t('package.skeleton.keywords') }}
+          </h2>
+          <ul class="flex flex-wrap gap-1.5 list-none m-0 p-0">
+            <li><SkeletonInline class="h-6 w-16 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-12 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-20 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-14 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-18 rounded" /></li>
+            <li><SkeletonInline class="h-6 w-10 rounded" /></li>
+          </ul>
+        </section>
+
+        <!-- Maintainers -->
+        <section>
+          <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
+            {{ $t('package.skeleton.maintainers') }}
+          </h2>
+          <ul class="space-y-2 list-none m-0 p-0">
+            <li><SkeletonInline class="h-5 w-28" /></li>
+            <li><SkeletonInline class="h-5 w-24" /></li>
+          </ul>
+        </section>
       </div>
     </div>
   </article>
 </template>
+
+<style scoped>
+.package-page {
+  display: grid;
+  gap: 2rem;
+
+  /* Mobile: single column, sidebar above readme */
+  grid-template-columns: minmax(0, 1fr);
+  grid-template-areas:
+    'header'
+    'details'
+    'install'
+    'vulns'
+    'sidebar'
+    'readme';
+}
+
+/* Tablet/medium: header/install/vulns full width, readme+sidebar side by side */
+@media (min-width: 1024px) {
+  .package-page {
+    grid-template-columns: 2fr 1fr;
+    grid-template-areas:
+      'header  header'
+      'details details'
+      'install install'
+      'vulns   vulns'
+      'readme  sidebar';
+    grid-template-rows: auto auto auto auto 1fr;
+  }
+}
+
+/* Desktop: floating sidebar alongside all content */
+@media (min-width: 1280px) {
+  .package-page {
+    grid-template-columns: 1fr 20rem;
+    grid-template-areas:
+      'header  sidebar'
+      'details sidebar'
+      'install sidebar'
+      'vulns   sidebar'
+      'readme  sidebar';
+  }
+}
+
+.area-header {
+  grid-area: header;
+}
+
+.area-details {
+  grid-area: details;
+}
+
+.area-install {
+  grid-area: install;
+}
+
+.area-vulns {
+  grid-area: vulns;
+}
+
+.area-readme {
+  grid-area: readme;
+  overflow-x: hidden;
+}
+
+.area-sidebar {
+  grid-area: sidebar;
+}
+
+/* Sidebar scrollbar: hidden by default, shown on hover/focus */
+@media (min-width: 1024px) {
+  .sidebar-scroll {
+    scrollbar-gutter: stable;
+    scrollbar-width: 8px;
+    scrollbar-color: transparent transparent;
+  }
+
+  .sidebar-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  .sidebar-scroll::-webkit-scrollbar-track,
+  .sidebar-scroll::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+
+  .sidebar-scroll:hover,
+  .sidebar-scroll:focus-within {
+    scrollbar-color: var(--border) transparent;
+  }
+
+  .sidebar-scroll:hover::-webkit-scrollbar-thumb,
+  .sidebar-scroll:focus-within::-webkit-scrollbar-thumb {
+    background-color: var(--border);
+    border-radius: 9999px;
+  }
+
+  .sidebar-scroll:hover::-webkit-scrollbar-track,
+  .sidebar-scroll:focus-within::-webkit-scrollbar-track {
+    background: transparent;
+  }
+}
+</style>