diff --git a/src/DakotaApp.vue b/src/DakotaApp.vue
index 2fc83177..bdf5a1af 100644
--- a/src/DakotaApp.vue
+++ b/src/DakotaApp.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { IconGithubCircle } from '@iconify-prerendered/vue-mdi'
 import { onBeforeMount, provide, ref } from 'vue'
-import DakotaDownloadCard from './components/dakota/DakotaDownloadCard.vue'
 import DakotaHighlights from './components/dakota/DakotaHighlights.vue'
 import DakotaScene from './components/dakota/DakotaScene.vue'
-import DakotaVersionChips from './components/dakota/DakotaVersionChips.vue'
+import DakotaVersionCard from './components/dakota/DakotaVersionCard.vue'
 import PageLoading from './components/PageLoading.vue'
 import TopNavbar from './components/TopNavbar.vue'
 import { setLocale } from './composables/useLocale'
@@ -37,23 +37,50 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
     <TopNavbar v-show="!isLoading" />
 
     <div v-show="!isLoading" class="dakota-layout">
-      <!-- Left: text on top, raptor below -->
+      <!-- Left: text, video, highlights -->
       <div class="col-left">
-        <DakotaScene>
-          <DakotaVersionChips />
-        </DakotaScene>
-        <img
-          class="raptor"
-          src="/characters/dakota.webp"
-          alt="Dakotaraptor"
-          fetchpriority="high"
-        >
+        <DakotaScene />
+        <div class="video-wrap">
+          <iframe
+            src="https://www.youtube.com/embed/v18c8ipK02A"
+            title="Dakota"
+            frameborder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+          />
+        </div>
+        <div class="release-links">
+          <span>Read the announcements:</span>
+          <div class="release-link-item">
+            <a
+              href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >Alpha 2 Release →</a>
+            <a
+              href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >Alpha 1 Release →</a>
+          </div>
+        </div>
+        <DakotaHighlights />
       </div>
 
-      <!-- Right: features + download -->
-      <div class="col-features">
-        <DakotaHighlights />
-        <DakotaDownloadCard />
+      <!-- Right: version card + secondary chips -->
+      <div class="col-right">
+        <div class="col-right-sticky">
+          <DakotaVersionCard />
+          <a
+            class="github-btn"
+            href="https://github.com/projectbluefin/dakota"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <IconGithubCircle />
+            View on GitHub
+          </a>
+        </div>
       </div>
     </div>
   </main>
@@ -61,103 +88,147 @@ if (i18n.global.availableLocales.includes(currentLocale)) {
 
 <style scoped lang="scss">
 .dakota-page {
-  min-height: 100vh;
-  overflow-y: auto;
+  position: relative;
   background-image: url('/evening/night-sky.webp');
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 600px;
+    background: linear-gradient(to bottom, rgba(var(--color-bg-rgb), 0.7), transparent);
+    z-index: 0;
+    pointer-events: none;
+  }
 }
 
 .dakota-layout {
+  position: relative;
+  z-index: 1;
   display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+  flex-direction: column;
+  align-items: stretch;
   box-sizing: border-box;
-  padding: 48px 60px 40px;
-  gap: 40px;
+  padding: 32px 32px 48px;
+  gap: 32px;
 
-  // Keep the fullscreen feel on wide landscape without clipping tall content
-  @media (min-aspect-ratio: 16/10) and (min-width: 1024px) {
-    min-height: calc(100vh - 60px);
-  }
-
-  // Tablet portrait / narrow desktop: stack columns
-  @media (max-aspect-ratio: 16/10), (max-width: 1023px) {
-    flex-direction: column;
-    padding: 32px 32px 48px;
-    gap: 32px;
+  @media (min-width: 840px) {
+    flex-direction: row;
+    padding: 60px 60px 40px;
+    gap: 40px;
   }
 
-  // Phone
   @media (max-width: 600px) {
     padding: 24px 16px 48px;
     gap: 24px;
   }
 }
 
-.col-left {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1;
+.col-right {
   min-width: 0;
 
-  // Medium: text box and raptor side by side
-  @media (min-width: 640px) and ((max-aspect-ratio: 16/10) or (max-width: 1023px)) {
-    flex-direction: row;
-    align-items: flex-end;
-    gap: 32px;
+  @media (min-width: 840px) {
+    width: 35%;
+    flex: none;
   }
+}
 
-  .raptor {
-    height: 30vh;
-    width: auto;
-    transform: scaleX(-1);
-    filter: drop-shadow(0 20px 60px rgba(var(--color-blue-rgb), 0.2));
-    margin-top: 24px;
-
-    // Medium: no top margin, sits beside text
-    @media (min-width: 640px) and ((max-aspect-ratio: 16/10) or (max-width: 1023px)) {
-      margin-top: 0;
-      flex-shrink: 0;
-    }
+.col-right-sticky {
+  @media (min-width: 840px) {
+    position: sticky;
+    top: 22vh;
+  }
+}
 
-    @media (max-aspect-ratio: 16/10), (max-width: 1023px) {
-      height: 20vh;
-      align-self: center;
-    }
+.release-links {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  flex-wrap: wrap;
+  gap: 12px;
+  font-size: 1.4rem;
+  font-weight: 600;
+  span {
+    color: var(--color-text-light);
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+  }
+}
 
-    @media (max-width: 600px) {
-      height: 15vh;
+.release-link-item {
+  a {
+    font-weight: 600;
+    text-decoration: none;
+    background: rgb(var(--color-bg-rgb), 0.5);
+    color: var(--color-text-light);
+    height: 36px;
+    line-height: 36px;
+    padding: 8px 18px;
+    border-radius: 18px;
+    margin: 0 4px 0 4px;
+    transition: background 0.2s;
+
+    &:hover {
+      background: var(--color-blue);
     }
   }
 }
 
-.col-features {
+.github-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 36px;
+  min-width: 180px;
+  line-height: 36px;
+  padding: 0 20px;
+  margin: 16px;
+  border-radius: 18px;
+  font-size: 1.4rem;
+  font-weight: 700;
+  background: var(--color-bg);
+  color: var(--color-text-light);
+  border: 1px solid rgb(var(--color-blue-rgb), 0.3);
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+  }
+
+  &:hover {
+    background: var(--color-blue);
+    border-color: var(--color-blue);
+  }
+}
+
+.col-left {
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 24px;
   flex: 1;
   min-width: 0;
-  min-height: 0;
-  overflow: visible;
-  background: rgba(var(--color-bg-rgb), 0.55);
-  backdrop-filter: blur(8px);
+}
+
+.video-wrap {
+  width: 100%;
+  aspect-ratio: 16 / 9;
   border-radius: 12px;
-  padding: 28px 32px;
+  overflow: hidden;
 
-  @media (max-aspect-ratio: 16/10), (max-width: 1023px) {
+  iframe {
     width: 100%;
-    box-sizing: border-box;
-  }
-
-  @media (max-width: 600px) {
-    padding: 20px 20px;
-  }
-
-  @media (max-width: 500px) {
-    padding: 20px 16px;
+    height: 100%;
   }
 }
 </style>
diff --git a/src/components/dakota/DakotaHighlights.vue b/src/components/dakota/DakotaHighlights.vue
index d7d4a935..68f9e201 100644
--- a/src/components/dakota/DakotaHighlights.vue
+++ b/src/components/dakota/DakotaHighlights.vue
@@ -26,26 +26,26 @@ import {
                 <p>The latest stable release of GNOME, no delays</p>
               </div>
 
-              <!-- Right: uutils-coreutils + sudo-rs -->
-              <div class="brand-item">
+              <!-- Left: primary — freedesktop-sdk -->
+              <div class="brand-item brand-primary">
                 <div>
                   <div class="icon-wrap">
-                    <IconShieldCheck />
+                    <IconLayers />
                   </div>
-                  <a class="brand-title" href="https://github.com/uutils/coreutils" target="_blank" rel="noopener noreferrer">Modern Userspace</a>
+                  <a class="brand-title" href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop SDK</a>
                 </div>
-                <p>bootc, brew, uutils, systemd-boot, container first, and legacy-free</p>
+                <p>Same battle tested libraries as Flathub. Continuously upgraded, always up to date.</p>
               </div>
 
-              <!-- Left: primary — freedesktop-sdk -->
-              <div class="brand-item brand-primary">
+              <!-- Right: uutils-coreutils + sudo-rs -->
+              <div class="brand-item">
                 <div>
                   <div class="icon-wrap">
-                    <IconLayers />
+                    <IconShieldCheck />
                   </div>
-                  <a class="brand-title" href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop SDK</a>
+                  <a class="brand-title" href="https://github.com/uutils/coreutils" target="_blank" rel="noopener noreferrer">Modern Userspace</a>
                 </div>
-                <p>Same battle tested libraries as Flathub. Continuously upgraded, always up to date.</p>
+                <p>bootc, brew, uutils, systemd-boot, container first, and legacy-free</p>
               </div>
 
               <!-- Left: Designed for Contributors -->
@@ -84,19 +84,31 @@ import {
 <style scoped lang="scss">
 .dakota-highlights {
   min-height: auto;
-  padding: 0;
+  padding: 24px;
+  background: rgba(var(--color-bg-rgb), 0.55);
+  backdrop-filter: blur(8px);
+  border-radius: 12px;
+
+  :deep(.container) {
+    padding: 0;
+  }
 
   .icon-wrap {
     svg {
       display: block;
-      height: 24px;
-      width: 24px;
+      height: 32px;
+      width: 32px;
       color: var(--color-text-light);
     }
   }
 
   :deep(.brand-item) {
     padding: 14px 20px;
+    border-right: none;
+
+    &:nth-child(odd) {
+      border-right: none;
+    }
   }
 
   :deep(.brand-gnome) {
@@ -109,22 +121,11 @@ import {
     }
 
     p {
-      font-size: 2rem !important;
       font-weight: 400;
     }
   }
 
   :deep(.brand-primary) {
-    .icon-wrap svg {
-      height: 36px;
-      width: 36px;
-    }
-
-    .brand-title,
-    p {
-      font-size: 1.6rem !important;
-    }
-
     p {
       font-weight: 400;
     }
@@ -158,13 +159,48 @@ import {
   }
 }
 
-@media (max-width: 500px) {
+@media (min-width: 840px) {
+  .dakota-highlights {
+    :deep(.brand-gnome) {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      & > div {
+        margin-bottom: 0;
+        flex-shrink: 0;
+      }
+
+      p {
+        margin-left: auto;
+        text-align: right;
+        padding-left: 40px;
+        font-size: 1.6rem !important;
+      }
+    }
+  }
+}
+
+@media (max-width: 839px) {
+  .brand-grid {
+    margin-top: 0;
+  }
+
   .dakota-highlights {
     :deep(.brand-grid) {
       grid-template-columns: 1fr !important;
     }
-    :deep(.brand-item:nth-child(odd)) {
-      border-right: none !important;
+
+    :deep(.brand-gnome) {
+      p {
+        font-size: 1.6rem !important;
+      }
+    }
+
+    :deep(.brand-item) {
+      &:nth-last-child(2) {
+        border-bottom: 1px solid var(--color-border-light);
+      }
     }
   }
 }
diff --git a/src/components/dakota/DakotaScene.vue b/src/components/dakota/DakotaScene.vue
index f60c0cd2..dbdcd2f7 100644
--- a/src/components/dakota/DakotaScene.vue
+++ b/src/components/dakota/DakotaScene.vue
@@ -19,32 +19,9 @@ onMounted(() => {
       Dakota
     </h1>
 
-    <p class="hero-tagline">
-      The Final Form. Bluefin Perfected.
-    </p>
-
     <p class="hero-desc">
-      Dakota is a <a href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop.org</a> and <a href="https://os.gnome.org" target="_blank" rel="noopener noreferrer">GNOME OS</a> image designed from the ground up to be the most modern raptor in the pack. The familiar Bluefin desktop and developer experience, in a whole new streamlined package. Built from the best OS tech from the <a href="https://cncf.io" target="_blank" rel="noopener noreferrer">CNCF</a>, <a href="https://www.apache.org" target="_blank" rel="noopener noreferrer">Apache Foundation</a>, and the <a href="https://uapi-group.org" target="_blank" rel="noopener noreferrer">UAPI Group</a>. Do not run, you'll only die tired.
+      A <a href="https://freedesktop-sdk.io" target="_blank" rel="noopener noreferrer">Freedesktop.org</a> and <a href="https://os.gnome.org" target="_blank" rel="noopener noreferrer">GNOME OS</a> image, designed from the ground up to be the most modern raptor in the pack. The familiar Bluefin desktop and developer experience, in a whole new streamlined package. Built from the best OS tech from the <a href="https://cncf.io" target="_blank" rel="noopener noreferrer">CNCF</a>, <a href="https://www.apache.org" target="_blank" rel="noopener noreferrer">Apache Foundation</a>, and the <a href="https://uapi-group.org" target="_blank" rel="noopener noreferrer">UAPI Group</a>. Do not run, you'll only die tired.
     </p>
-
-    <div class="alpha-badge">
-      ⚠️ Alpha software — take appropriate precautions
-    </div>
-
-    <div class="release-links">
-      <a
-        href="https://docs.projectbluefin.io/blog/making-our-own-fate/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >Alpha 2 Announcement →</a>
-      <a
-        href="https://docs.projectbluefin.io/blog/dakota-alpha-1/"
-        target="_blank"
-        rel="noopener noreferrer"
-      >Alpha 1 Announcement →</a>
-    </div>
-
-    <slot />
   </div>
 </template>
 
@@ -55,10 +32,6 @@ onMounted(() => {
   transition:
     opacity 0.6s ease,
     transform 0.6s ease;
-  background: rgba(var(--color-bg-rgb), 0.55);
-  backdrop-filter: blur(8px);
-  border-radius: 12px;
-  padding: 28px 32px;
   width: 100%;
   box-sizing: border-box;
 
@@ -86,26 +59,19 @@ onMounted(() => {
   font-weight: 700;
   font-size: 6rem;
   text-transform: uppercase;
-  color: var(--color-text-light);
+  color: var(--color-blue-light);
   margin: 0 0 24px 0;
   line-height: 1;
   padding-top: 0;
   padding-left: 0;
-}
-
-.hero-tagline {
-  font-size: 1.6rem;
-  font-weight: 400;
-  color: var(--color-text-light);
-  margin: 0 0 12px 0;
-  line-height: 1.6;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
 }
 
 .hero-desc {
   font-size: 1.6rem;
   line-height: 1.6;
   color: var(--color-text-light);
-  margin: 0 0 20px 0;
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
 
   a {
     color: var(--color-blue-light);
@@ -117,50 +83,4 @@ onMounted(() => {
     }
   }
 }
-
-.alpha-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 1.3rem;
-  font-weight: 600;
-  color: var(--color-text-light);
-  background: rgba(var(--color-bg-rgb), 0.5);
-  border: 1px solid var(--color-border-light);
-  border-radius: 6px;
-  padding: 8px 16px;
-  margin-bottom: 0;
-}
-
-.release-links {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px 20px;
-  margin-top: 10px;
-
-  a {
-    color: var(--color-blue-light);
-    font-size: 1.3rem;
-    font-weight: 600;
-    text-decoration: none;
-    opacity: 0.85;
-    transition: opacity 0.2s;
-
-    &:hover {
-      opacity: 1;
-      text-decoration: underline;
-    }
-  }
-}
-
-@media (max-width: 500px) {
-  .alpha-badge {
-    font-size: 1.1rem;
-    padding: 6px 12px;
-  }
-
-  .hero-title {
-    font-size: 4.5rem;
-  }
-}
 </style>
diff --git a/src/components/dakota/DakotaVersionCard.vue b/src/components/dakota/DakotaVersionCard.vue
new file mode 100644
index 00000000..1b2f3e37
--- /dev/null
+++ b/src/components/dakota/DakotaVersionCard.vue
@@ -0,0 +1,508 @@
+<script setup lang="ts">
+import {
+  IconCheckCircleOutline,
+  IconDownload,
+} from '@iconify-prerendered/vue-mdi'
+import { computed, onMounted, ref } from 'vue'
+import { getDakotaVersions } from '../../composables'
+import DakotaVersionChips from './DakotaVersionChips.vue'
+
+interface DakotaVersions {
+  generatedAt: string
+  packages: Record<string, string>
+}
+
+interface DownloadEntry {
+  label: string
+  isoUrl: string
+  isoFilename: string
+  checksumUrl: string
+}
+
+const BASE = 'https://projectbluefin.dev'
+
+const versions = ref<DakotaVersions | null>(null)
+const showDownloads = ref(false)
+
+const cardImageStyle = computed(() => ({
+  backgroundImage: `url(${import.meta.env.BASE_URL}characters/dakota.webp)`,
+}))
+
+const entries: DownloadEntry[] = [
+  {
+    label: 'AMD / Intel',
+    isoUrl: `${BASE}/dakota-live-alpha2.iso`,
+    isoFilename: 'dakota-live-alpha2.iso',
+    checksumUrl: `${BASE}/dakota-live-alpha2.iso-CHECKSUM`,
+  },
+  {
+    label: 'NVIDIA',
+    isoUrl: `${BASE}/dakota-nvidia-live-alpha2.iso`,
+    isoFilename: 'dakota-nvidia-live-alpha2.iso',
+    checksumUrl: `${BASE}/dakota-nvidia-live-alpha2.iso-CHECKSUM`,
+  },
+]
+
+const VERSION_LABELS: Record<string, string> = {
+  'kernel': 'Kernel',
+  'gnome': 'GNOME',
+  'mesa': 'Mesa',
+  'nvidia': 'NVIDIA',
+  'freedesktop-sdk': 'Freedesktop SDK',
+  'bootc': 'bootc',
+}
+
+const versionRows = computed(() => {
+  if (!versions.value) {
+    return []
+  }
+  return Object.entries(versions.value.packages)
+    .filter(([key]) => key in VERSION_LABELS)
+    .map(([key, value]) => ({
+      label: VERSION_LABELS[key],
+      value,
+    }))
+})
+
+onMounted(async () => {
+  try {
+    versions.value = await getDakotaVersions()
+  }
+  catch (e) {
+    if (import.meta.env.DEV) {
+      console.warn('[DakotaVersionCard] failed to load versions', e)
+    }
+  }
+})
+
+function openDownloads() {
+  showDownloads.value = true
+}
+
+function backToCard() {
+  showDownloads.value = false
+}
+</script>
+
+<template>
+  <div class="dakota-version-card">
+    <!-- Card view (character art + version info) -->
+    <div
+      v-if="!showDownloads"
+      class="card-box"
+      role="button"
+      tabindex="0"
+      @click="openDownloads"
+      @keydown.enter.prevent="openDownloads"
+      @keydown.space.prevent="openDownloads"
+    >
+      <div class="alpha-badge">
+        <span class="alpha-badge-title">⚠️ Alpha.</span>
+        <span class="alpha-badge-sub">Take appropriate precautions.</span>
+      </div>
+      <div
+        class="card-image"
+        :style="cardImageStyle"
+      >
+        <div class="card-overlay">
+          <div class="card-header">
+            <h3 class="card-title">
+              Dakota
+            </h3>
+            <span class="card-subtitle">For the brave soul</span>
+          </div>
+
+          <p class="card-description">
+            The Final Form. Bluefin Perfected.
+          </p>
+
+          <!-- Version Information -->
+          <div v-if="versionRows.length" class="version-info">
+            <div
+              v-for="row in versionRows"
+              :key="row.label"
+              class="version-row"
+            >
+              <span class="version-label">{{ row.label }}</span>
+              <span class="version-value">{{ row.value }}</span>
+            </div>
+          </div>
+
+          <div class="click-hint">
+            Click to download ↓
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Download view -->
+    <div v-else class="download-view">
+      <div class="entries-wrapper">
+        <DakotaVersionChips
+          class="secondary-chips"
+          :keys="['systemd', 'podman', 'pipewire', 'flatpak', 'baseline']"
+        />
+        <div class="download-entries">
+          <div
+            v-for="entry in entries"
+            :key="entry.label"
+            class="download-entry"
+          >
+            <div class="entry-header">
+              <span class="entry-label">{{ entry.label }}</span>
+              <span class="entry-filename">{{ entry.isoFilename }}</span>
+            </div>
+            <div class="entry-buttons">
+              <a
+                class="btn filled entry-dl"
+                :href="entry.isoUrl"
+              >
+                <IconDownload />
+                Download ISO
+              </a>
+              <a
+                class="btn entry-checksum"
+                :href="entry.checksumUrl"
+                title="Verify checksum"
+              >
+                <IconCheckCircleOutline />
+                <span class="btn-label">Verify</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <button class="back-button" @click="backToCard">
+        ← Back
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.dakota-version-card {
+  width: 100%;
+}
+
+/* ── Card View ── */
+
+.card-box {
+  position: relative;
+  height: 400px;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  border: 2px solid rgba(var(--color-blue-rgb), 0.25);
+  background: #1f2937;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+    border-color: rgba(var(--color-blue-rgb), 0.5);
+  }
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  position: relative;
+}
+
+.card-overlay {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0.92) 100%);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1.5rem;
+  color: var(--color-text-light);
+  border-radius: 12px;
+}
+
+.card-header {
+  margin-bottom: 0.5rem;
+}
+
+.card-title {
+  font-size: 2rem;
+  font-weight: 700;
+  margin: 0 0 0.25rem 0;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.card-subtitle {
+  font-size: 1.5rem;
+  opacity: 0.9;
+  display: block;
+  margin-bottom: 0.5rem;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.card-description {
+  font-size: 1.5rem;
+  line-height: 1.4;
+  opacity: 0.85;
+  margin: 0 0 0.75rem 0;
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+  text-align: center;
+}
+
+/* Version rows */
+.version-info {
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.version-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  margin-bottom: 0.4rem;
+  font-size: 1.55rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.version-label {
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
+}
+
+.version-value {
+  font-family: 'Courier New', monospace;
+  color: #93c5fd;
+  font-weight: 500;
+  background: rgba(0, 0, 0, 0.3);
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  font-size: 1.55rem;
+}
+
+.alpha-badge {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 10;
+  width: max-content;
+  max-width: calc(100% - 24px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: baseline;
+  column-gap: 0.3em;
+  white-space: normal;
+  font-size: 1.2rem;
+  line-height: 1.3;
+  color: var(--color-text-light);
+  background: rgba(0, 0, 0, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
+  padding: 5px 10px;
+  pointer-events: none;
+  text-align: right;
+
+  .alpha-badge-title {
+    font-weight: 600;
+  }
+
+  .alpha-badge-sub {
+    opacity: 0.9;
+  }
+}
+
+.click-hint {
+  margin-top: 0.75rem;
+  font-size: 1.3rem;
+  font-weight: 600;
+  text-align: center;
+  color: rgba(147, 197, 253, 0.8);
+  animation: pulse-hint 2s ease-in-out infinite;
+}
+
+@keyframes pulse-hint {
+  0%,
+  100% {
+    opacity: 0.7;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+/* ── Download View ── */
+
+.download-view {
+  container-type: inline-size;
+  min-height: 400px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  background: rgba(31, 41, 55, 0.6);
+  backdrop-filter: blur(8px);
+  border: 2px solid rgba(var(--color-blue-rgb), 0.25);
+  border-radius: 12px;
+  padding: 1.25rem;
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+}
+
+@container (max-width: 380px) {
+  .btn-label {
+    display: none;
+  }
+
+  .entry-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 2px;
+  }
+}
+
+.entries-wrapper {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.secondary-chips {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.download-entries {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  padding: 0 8px;
+}
+
+.download-entry {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px 0;
+}
+
+.download-entry + .download-entry {
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  padding-top: 16px;
+}
+
+.entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.entry-label {
+  font-size: 1.4rem;
+  font-weight: 700;
+  color: var(--color-text-light);
+}
+
+.entry-filename {
+  font-size: 1.1rem;
+  font-family: 'Courier New', monospace;
+  color: var(--color-text);
+}
+
+.entry-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  width: 100%;
+}
+
+.entry-dl {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 1.3rem;
+  flex: 1 1 0%;
+  white-space: nowrap;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.entry-checksum {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 1.3rem;
+  flex: 0 1 auto;
+  max-width: 160px;
+}
+
+.back-button {
+  display: block;
+  margin-top: auto;
+  margin-bottom: 0;
+  margin-left: auto;
+  margin-right: auto;
+  font-size: 1.3rem;
+  font-weight: 600;
+  color: rgba(147, 197, 253, 0.8);
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: rgba(147, 197, 253, 1);
+  }
+}
+
+/* ── Responsive ── */
+
+@media (max-width: 500px) {
+  .card-title {
+    font-size: 1.7rem;
+  }
+
+  .card-subtitle {
+    font-size: 1.3rem;
+  }
+
+  .card-description {
+    font-size: 1.3rem;
+  }
+
+  .version-row {
+    font-size: 1.35rem;
+  }
+
+  .version-value {
+    font-size: 1.35rem;
+  }
+
+  .download-view {
+    padding: 1rem;
+  }
+}
+</style>
diff --git a/src/components/dakota/DakotaVersionChips.vue b/src/components/dakota/DakotaVersionChips.vue
index 8b9ad6f4..52d67dd5 100644
--- a/src/components/dakota/DakotaVersionChips.vue
+++ b/src/components/dakota/DakotaVersionChips.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
+import type { DakotaVersions } from '../../composables'
 import { computed, onMounted, ref } from 'vue'
+import { getDakotaVersions } from '../../composables'
 
-interface DakotaVersions {
-  generatedAt: string
-  packages: Record<string, string>
-}
+const props = defineProps<{
+  keys?: string[]
+}>()
 
 const LABELS: Record<string, string> = {
   'kernel': 'Kernel',
@@ -12,7 +13,7 @@ const LABELS: Record<string, string> = {
   'freedesktop-sdk': 'Freedesktop SDK',
   'mesa': 'Mesa',
   'bootc': 'bootc',
-  'nvidia': 'Nvidia',
+  'nvidia': 'NVIDIA',
   'systemd': 'systemd',
   'podman': 'Podman',
   'pipewire': 'PipeWire',
@@ -26,11 +27,7 @@ const versions = ref<DakotaVersions | null>(null)
 
 onMounted(async () => {
   try {
-    const res = await fetch('/dakota-versions.json')
-    if (!res.ok) {
-      throw new Error(`HTTP ${res.status}`)
-    }
-    versions.value = await res.json()
+    versions.value = await getDakotaVersions()
   }
   catch (e) {
     if (import.meta.env.DEV) {
@@ -44,6 +41,7 @@ const chips = computed(() => {
     return []
   }
   return Object.entries(versions.value.packages)
+    .filter(([key]) => !props.keys || props.keys.includes(key))
     .filter(([, v]) => v)
     .map(([key, value]) => ({ label: LABELS[key] ?? key, value, isFeature: FEATURE_KEYS.has(key) }))
 })
@@ -80,6 +78,8 @@ const chips = computed(() => {
   overflow: hidden;
   font-size: 1.2rem;
   line-height: 1;
+  background: rgba(var(--color-bg-rgb), 0.45);
+  backdrop-filter: blur(8px);
 
   &.chip-feature {
     border-color: rgba(var(--color-green-rgb, 80, 200, 120), 0.5);
diff --git a/src/composables.ts b/src/composables.ts
index e707c220..1fd882a2 100644
--- a/src/composables.ts
+++ b/src/composables.ts
@@ -10,6 +10,33 @@ export const IS_TABLET = computed(() => {
   return width.value <= 956
 })
 
+export interface DakotaVersions {
+  generatedAt: string
+  packages: Record<string, string>
+}
+
+let versionsPromise: Promise<DakotaVersions> | null = null
+
+function fetchVersionsOnce(): Promise<DakotaVersions> {
+  if (!versionsPromise) {
+    versionsPromise = (async () => {
+      const res = await fetch(`${import.meta.env.BASE_URL}dakota-versions.json`)
+      if (!res.ok) {
+        throw new Error(`HTTP ${res.status}`)
+      }
+      return res.json()
+    })()
+  }
+  return versionsPromise
+}
+
+/**
+ * Fetches dakota-versions.json once and caches the result.
+ */
+export async function getDakotaVersions(): Promise<DakotaVersions> {
+  return fetchVersionsOnce()
+}
+
 /**
  * Fades in + slides up 150ms after mount. Used by KnuckleTitle and KnuckleDesc.
  */