diff --git a/src/pages/Kernel.tsx b/src/pages/Kernel.tsx
index 54b28df..c05bc59 100644
--- a/src/pages/Kernel.tsx
+++ b/src/pages/Kernel.tsx
@@ -2,7 +2,23 @@ import { useEffect, useRef, useState } from 'react';
 import { getVersion } from '@tauri-apps/api/app';
 import { invoke } from '@tauri-apps/api/core';
 import { listen } from '@tauri-apps/api/event';
-import { AlertCircle, Check, Copy, ExternalLink, Eye, EyeOff, Info } from 'lucide-react';
+import {
+  AlertCircle,
+  AppWindow,
+  ArrowRight,
+  Box,
+  Check,
+  Copy,
+  Database,
+  Download,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  Info,
+  PackageOpen,
+  RefreshCw,
+  RotateCcw,
+} from 'lucide-react';
 import { type CoreStatus, useCoreRuntime } from '../coreRuntime';
 import openaiIcon from '../assets/icons/openai-light.svg';
 import claudeIcon from '../assets/icons/claude.svg';
@@ -668,6 +684,22 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
   const currentAppVersion = resolvedAppVersion
     ? displayAppVersion(resolvedAppVersion)
     : t('common.detecting');
+  const appVersionStatusLabel = appUpdateTask.running
+    ? t(`appUpdate.phase.${appUpdateTask.phase}` as Parameters<typeof t>[0])
+    : appUpdateError
+      ? t('kernel.update.failed')
+      : appUpdate?.updateAvailable
+        ? t('appUpdate.available', { version: displayAppVersion(appUpdate.latestVersion) })
+        : appUpdate
+          ? t('appUpdate.upToDate')
+          : t('appUpdate.phase.checking');
+  const appVersionStatusTone = appUpdateError
+    ? 'error'
+    : appUpdate?.updateAvailable
+      ? 'update'
+      : appUpdate
+        ? 'success'
+        : '';
   const latestLabel = checkingLatest
     ? t('kernel.update.checking')
     : latestVersion || (latestError ? t('kernel.update.failed') : t('kernel.update.notChecked'));
@@ -746,6 +778,51 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
 
   return (
     <section className={`page kernel-page ${view === 'home' ? 'home-page' : 'version-management-page'}`}>
+      {view === 'versions' ? (
+        <header className="version-page-header">
+          <div className="version-page-title">
+            <span className="version-page-title-icon" aria-hidden="true">
+              <PackageOpen size={22} />
+            </span>
+            <div>
+              <h1>{t('app.nav.versions')}</h1>
+              <p>{t('kernel.versions.offlineHint')}</p>
+            </div>
+          </div>
+
+          <div className="version-source-control">
+            <div className="version-source-copy">
+              <Info size={17} aria-hidden="true" />
+              <div>
+                <strong>{t('kernel.versions.gitcodeSource')}</strong>
+                <span>
+                  {versionSource?.gitcodeAvailable === false
+                    ? t('kernel.versions.gitcodeUnavailable')
+                    : t('kernel.versions.gitcodeSourceHint')}
+                </span>
+              </div>
+            </div>
+            <label className="switch-control" title={t('kernel.versions.gitcodeSource')}>
+              <input
+                type="checkbox"
+                role="switch"
+                checked={versionSource?.preferGitcodeDownloads ?? false}
+                disabled={
+                  (!versionSource?.gitcodeAvailable && !versionSource?.preferGitcodeDownloads)
+                  || versionSourceSaving
+                  || appUpdateTask.running
+                  || installing
+                }
+                aria-label={t('kernel.versions.gitcodeSource')}
+                onChange={(event) => void updateVersionSource(event.currentTarget.checked)}
+              />
+              <span className="switch-track" />
+            </label>
+            {versionSourceError ? <p className="error version-source-error" role="alert">{versionSourceError}</p> : null}
+          </div>
+        </header>
+      ) : null}
+
       <div className={view === 'home' ? 'kernel-layout home-layout' : 'kernel-layout version-management-layout'}>
         {view === 'home' ? (
         <div className="panel control-panel">
@@ -822,85 +899,36 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
         ) : null}
 
         {view === 'versions' ? (
-          <div className="panel version-source-panel">
-            <div className="version-source-copy">
-              <Info size={18} aria-hidden="true" />
-              <div>
-                <strong>{t('kernel.versions.gitcodeSource')}</strong>
-                <span>
-                  {versionSource?.gitcodeAvailable === false
-                    ? t('kernel.versions.gitcodeUnavailable')
-                    : t('kernel.versions.gitcodeSourceHint')}
+          <article className="panel version-product-card software-update-panel">
+            <div className="version-product-heading">
+              <div className="version-product-identity">
+                <span className="version-product-icon software" aria-hidden="true">
+                  <AppWindow size={21} />
                 </span>
-              </div>
-            </div>
-            <label className="switch-control" title={t('kernel.versions.gitcodeSource')}>
-              <input
-                type="checkbox"
-                role="switch"
-                checked={versionSource?.preferGitcodeDownloads ?? false}
-                disabled={
-                  (!versionSource?.gitcodeAvailable && !versionSource?.preferGitcodeDownloads)
-                  || versionSourceSaving
-                  || appUpdateTask.running
-                  || installing
-                }
-                aria-label={t('kernel.versions.gitcodeSource')}
-                onChange={(event) => void updateVersionSource(event.currentTarget.checked)}
-              />
-              <span className="switch-track" />
-            </label>
-            {versionSourceError ? <p className="error version-source-error" role="alert">{versionSourceError}</p> : null}
-          </div>
-        ) : null}
-
-        {view === 'versions' ? (
-          <div className="panel software-update-panel">
-            <div className="panel-heading">
-              <div>
                 <h2>{t('appUpdate.title')}</h2>
-                <p className={appUpdateError ? 'error' : appUpdate?.updateAvailable ? 'success' : ''}>
-                  {appUpdateError
-                    || (appUpdate?.updateAvailable
-                      ? t('appUpdate.available', { version: displayAppVersion(appUpdate.latestVersion) })
-                      : appUpdate
-                        ? t('appUpdate.upToDate')
-                        : t('appUpdate.phase.checking'))}
-                </p>
               </div>
-              {!appUpdate?.autoUpdateSupported && (
-                <span className={`state-pill ${appUpdateError ? 'error' : 'success'}`}>
-                  {t('appUpdate.manualFallback')}
-                </span>
-              )}
+              <span className={`state-pill ${appVersionStatusTone}`} title={appUpdateError || appVersionStatusLabel}>
+                {appVersionStatusLabel}
+              </span>
             </div>
 
-            <dl className="panel-detail-grid software-update-details">
-              <div className="panel-detail-row">
-                <dt>{t('appUpdate.current')}</dt>
-                <dd>{currentAppVersion}</dd>
+            <div className="version-comparison" aria-label={t('appUpdate.title')}>
+              <div className="version-value-block current">
+                <span>{t('appUpdate.current')}</span>
+                <strong>{currentAppVersion}</strong>
               </div>
-              <div className="panel-detail-row">
-                <dt>{t('appUpdate.latest')}</dt>
-                <dd>{appUpdate ? displayAppVersion(appUpdate.latestVersion) : t('common.detecting')}</dd>
+              <ArrowRight className="version-comparison-arrow" size={20} aria-hidden="true" />
+              <div className="version-value-block latest">
+                <span>{t('appUpdate.latest')}</span>
+                <strong>{appUpdate ? displayAppVersion(appUpdate.latestVersion) : t('common.detecting')}</strong>
               </div>
-              <div className="panel-detail-row">
-                <dt>{t('appUpdate.status')}</dt>
-                <dd className={appUpdateError ? 'error' : appUpdate?.updateAvailable ? 'success' : ''}>
-                  {appUpdateTask.running
-                    ? t(`appUpdate.phase.${appUpdateTask.phase}` as Parameters<typeof t>[0])
-                    : appUpdateError
-                      ? t('kernel.update.failed')
-                      : appUpdate?.updateAvailable
-                        ? t('appUpdate.available', { version: displayAppVersion(appUpdate.latestVersion) })
-                        : appUpdate
-                          ? t('appUpdate.upToDate')
-                          : t('appUpdate.phase.checking')}
-                </dd>
-              </div>
-              <div className="panel-detail-row">
-                <dt>{t('appUpdate.catalog.label')}</dt>
-                <dd
+            </div>
+
+            <div className="version-card-support">
+              <Database size={17} aria-hidden="true" />
+              <div>
+                <strong>{t('appUpdate.catalog.label')}</strong>
+                <span
                   className={catalogUpdateError ? 'error' : catalogUpdateNotice ? 'success' : ''}
                   role={catalogUpdateError ? 'alert' : undefined}
                   aria-live="polite"
@@ -908,9 +936,17 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
                   {catalogUpdateError
                     || catalogUpdateNotice
                     || t('appUpdate.catalog.description')}
-                </dd>
+                </span>
               </div>
-            </dl>
+            </div>
+
+            <div className="version-card-note-slot">
+              {appUpdateError ? (
+                <p className="version-card-note error" role="alert">{appUpdateError}</p>
+              ) : !appUpdate?.autoUpdateSupported ? (
+                <p className="version-card-note">{t('appUpdate.manualFallback')}</p>
+              ) : null}
+            </div>
 
             <div className="button-row panel-action-row software-update-actions">
               <button
@@ -919,6 +955,7 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
                 disabled={checkingAppUpdate || appUpdateTask.running}
                 onClick={() => void checkAppUpdate()}
               >
+                <RefreshCw size={15} aria-hidden="true" />
                 {checkingAppUpdate ? t('appUpdate.checking') : t('appUpdate.check')}
               </button>
               {appUpdate?.updateAvailable && appUpdate.autoUpdateSupported ? (
@@ -928,10 +965,15 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
                   disabled={appUpdateTask.running}
                   onClick={requestAppUpdate}
                 >
+                  <Download size={15} aria-hidden="true" />
                   {t('appUpdate.installNow')}
                 </button>
               ) : (
-                <button type="button" className="secondary-button" onClick={() => void openAppRelease()}>
+                <button
+                  type="button"
+                  className={appUpdate?.updateAvailable ? 'primary-button' : 'secondary-button'}
+                  onClick={() => void openAppRelease()}
+                >
                   {t('appUpdate.openRelease')} <ExternalLink size={14} aria-hidden="true" />
                 </button>
               )}
@@ -942,51 +984,55 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
                 onClick={() => void updateCodexModelCatalog()}
                 title={t('appUpdate.catalog.updateHint')}
               >
+                <Database size={15} aria-hidden="true" />
                 {catalogUpdating
                   ? t('appUpdate.catalog.updating')
                   : t('appUpdate.catalog.update')}
               </button>
             </div>
-          </div>
+          </article>
         ) : null}
 
         {view === 'versions' ? (
-        <div className="panel version-panel">
-          <div className="panel-heading">
-            <div className="version-heading-inline">
-              <h2>{t('kernel.versions.title')}</h2>
-              <span className="version-offline-hint">
-                {t('kernel.versions.offlineHint')}
+        <article className="panel version-product-card version-panel">
+          <div className="version-product-heading">
+            <div className="version-product-identity">
+              <span className="version-product-icon core" aria-hidden="true">
+                <Box size={21} />
               </span>
+              <h2>{t('kernel.versions.title')}</h2>
+            </div>
+            <span className={`state-pill ${versionStatusTone}`} title={versionStatusLabel}>
+              {versionStatusLabel}
+            </span>
+          </div>
+
+          <div className="version-core-values">
+            <div className="version-value-block current">
+              <span>{t('kernel.versions.current')}</span>
+              <strong>{currentVersion || t('kernel.status.notInstalled')}</strong>
+            </div>
+            <div className="version-value-block latest">
+              <span>{t('kernel.versions.latest')}</span>
+              <strong>{latestLabel}</strong>
+            </div>
+            <div className="version-value-block bundled">
+              <span>{t('kernel.versions.bundled')}</span>
+              <strong title={bundledCoreError || bundledCore?.assetName}>
+                {bundledCore?.version ?? (bundledCoreError ? t('common.detectionFailed') : t('kernel.versions.notIncluded'))}
+              </strong>
             </div>
           </div>
 
-          <dl className="panel-detail-grid">
-            <div className="panel-detail-row">
-              <dt>{t('kernel.versions.current')}</dt>
-              <dd>{currentVersion || t('kernel.status.notInstalled')}</dd>
+          <div className="version-card-support core-platform-line">
+            <Box size={17} aria-hidden="true" />
+            <div>
+              <strong>{t('kernel.versions.platform')}</strong>
+              <span title={platformError || undefined}>{platformOsLabel} / {platformArchLabel}</span>
             </div>
-            <div className="panel-detail-row">
-              <dt>{t('kernel.versions.latest')}</dt>
-              <dd>{latestLabel}</dd>
-            </div>
-            <div className="panel-detail-row">
-              <dt>{t('kernel.versions.bundled')}</dt>
-              <dd title={bundledCoreError || bundledCore?.assetName}>
-                {bundledCore?.version ?? (bundledCoreError ? t('common.detectionFailed') : t('kernel.versions.notIncluded'))}
-              </dd>
-            </div>
-            <div className="panel-detail-row">
-              <dt>{t('kernel.versions.platform')}</dt>
-              <dd title={platformError || undefined}>{platformOsLabel} / {platformArchLabel}</dd>
-            </div>
-            <div className="panel-detail-row">
-              <dt>{t('kernel.versions.updateStatus')}</dt>
-              <dd className={versionStatusTone} title={versionStatusLabel}>
-                {versionStatusLabel}
-              </dd>
-            </div>
-          </dl>
+          </div>
+
+          <div className="version-card-note-slot" aria-hidden="true" />
 
           <div className="button-row panel-action-row version-action-row">
             <button
@@ -995,15 +1041,17 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
               disabled={busy}
               onClick={() => void checkLatest()}
             >
+              <RefreshCw size={15} aria-hidden="true" />
               {checkingLatest ? t('kernel.update.checking') : t('kernel.versions.check')}
             </button>
             <button
               type="button"
-              className="secondary-button"
+              className={latestVersion && currentVersion !== latestVersion ? 'primary-button' : 'secondary-button'}
               title={latestVersion ? t('kernel.versions.stopAndUpdateVersion', { version: latestVersion }) : t('kernel.versions.installLatest')}
               disabled={!latestVersion || busy}
               onClick={() => void stopAndInstallLatest()}
             >
+              <Download size={15} aria-hidden="true" />
               {t('kernel.versions.installLatest')}
             </button>
             <button
@@ -1013,20 +1061,22 @@ export function KernelPage({ view = 'home' }: { view?: KernelView }) {
               disabled={!currentVersion || installDisabled}
               onClick={() => installVersion(currentVersion)}
             >
+              <RotateCcw size={15} aria-hidden="true" />
               {t('kernel.versions.reinstall')}
             </button>
             <button
               type="button"
-              className="primary-button"
+              className={offlineInstallRequired ? 'primary-button' : 'secondary-button'}
               title={(bundledCore?.assetName ?? bundledCoreError) || t('kernel.versions.noBundled')}
               disabled={!bundledCore || offlineInstallDisabled}
               onClick={() => void installBundledCore()}
             >
+              <PackageOpen size={15} aria-hidden="true" />
               {t('kernel.versions.offlineInstall')}
             </button>
           </div>
 
-        </div>
+        </article>
         ) : null}
       </div>
 
diff --git a/src/styles.css b/src/styles.css
index 33de52b..5ba5b39 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1011,6 +1011,69 @@ textarea:focus-visible {
   gap: 18px;
 }
 
+.version-management-page {
+  gap: 20px;
+}
+
+.version-page-header {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  align-items: center;
+  gap: 24px;
+  min-width: 0;
+  padding: 22px 24px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 14px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--ui-accent-soft) 62%, transparent), transparent 48%),
+    var(--theme-fffdf8);
+  box-shadow: var(--ui-panel-shadow);
+}
+
+.version-page-title {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 14px;
+}
+
+.version-page-title-icon,
+.version-product-icon {
+  display: grid;
+  flex: none;
+  place-items: center;
+  color: var(--ui-accent-strong);
+  background: var(--ui-accent-soft);
+}
+
+.version-page-title-icon {
+  width: 46px;
+  height: 46px;
+  border: 1px solid color-mix(in srgb, var(--ui-accent) 22%, transparent);
+  border-radius: 13px;
+}
+
+.version-page-title > div {
+  min-width: 0;
+}
+
+.version-page-title h1 {
+  margin: 0;
+  color: var(--theme-2d2a26);
+  font-size: 24px;
+  line-height: var(--line-height-tight);
+}
+
+.version-page-title p {
+  margin: 5px 0 0;
+  overflow: hidden;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-meta);
+  line-height: var(--line-height-body);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .config-subpage-panel {
   display: grid;
   min-width: 0;
@@ -1025,14 +1088,16 @@ textarea:focus-visible {
   grid-column: auto;
 }
 
-.version-source-panel {
-  display: flex;
-  min-height: 68px;
-  flex-wrap: wrap;
+.version-source-control {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  padding-block: 14px;
+  gap: 12px 18px;
+  min-width: 0;
+  padding: 12px 14px;
+  border: 1px solid color-mix(in srgb, var(--ui-accent) 17%, var(--theme-e3e1db));
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--theme-fffdf8) 82%, var(--ui-accent-soft));
 }
 
 .version-source-copy {
@@ -1044,6 +1109,8 @@ textarea:focus-visible {
 
 .version-source-copy > svg {
   flex: none;
+  align-self: flex-start;
+  margin-top: 2px;
   color: var(--ui-accent);
 }
 
@@ -1055,45 +1122,200 @@ textarea:focus-visible {
 
 .version-source-copy strong {
   color: var(--theme-39352f);
-  font-size: var(--font-size-body);
+  font-size: var(--font-size-label);
 }
 
 .version-source-copy span {
+  display: -webkit-box;
+  overflow: hidden;
   color: var(--theme-7a746c);
-  font-size: var(--font-size-meta);
-  line-height: var(--line-height-body);
+  font-size: var(--font-size-caption);
+  line-height: 1.4;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 }
 
 .version-source-error {
-  width: 100%;
+  grid-column: 1 / -1;
   margin: 0;
   font-size: var(--font-size-meta);
 }
 
-.version-heading-inline {
+.version-product-card {
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+  align-content: start;
+  gap: 18px;
+  padding: 26px;
+  overflow: hidden;
+}
+
+.version-product-heading {
   display: flex;
   min-width: 0;
-  align-items: baseline;
-  gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 14px;
 }
 
-.version-heading-inline h2 {
+.version-product-identity {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 11px;
+}
+
+.version-product-icon {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+}
+
+.version-product-icon.core {
+  color: var(--theme-554075);
+  background: var(--theme-f1ecfb);
+}
+
+.version-product-identity h2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version-product-heading .state-pill {
+  min-width: 0;
+  max-width: 52%;
   flex: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.version-offline-hint {
+.version-comparison {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  align-items: center;
+  gap: 16px;
+  min-height: 118px;
+  padding: 20px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 12px;
+  background: var(--theme-f4f1ea);
+}
+
+.version-comparison-arrow {
+  color: var(--theme-9a958d);
+}
+
+.version-value-block {
+  display: grid;
+  min-width: 0;
+  gap: 7px;
+}
+
+.version-value-block span {
+  color: var(--theme-8a847c);
+  font-size: var(--font-size-meta);
+  font-weight: 700;
+}
+
+.version-value-block strong {
   min-width: 0;
   overflow: hidden;
-  color: var(--theme-8a847c);
-  font-size: var(--font-size-caption);
-  font-weight: 400;
+  color: var(--theme-2d2a26);
+  font-size: var(--font-size-metric-compact);
   line-height: var(--line-height-tight);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.kernel-layout > .version-panel > .panel-heading {
-  padding-bottom: 10px;
+.version-value-block.latest strong {
+  color: var(--ui-accent-strong);
+}
+
+.version-core-values {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  min-height: 118px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 12px;
+  background: var(--theme-f4f1ea);
+}
+
+.version-core-values .version-value-block {
+  align-content: center;
+  padding: 18px;
+}
+
+.version-core-values .version-value-block + .version-value-block {
+  border-left: 1px solid var(--theme-e3e1db);
+}
+
+.version-core-values .version-value-block strong {
+  font-size: 20px;
+}
+
+.version-card-support {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 11px;
+  min-height: 58px;
+  padding: 11px 13px;
+  border: 1px solid var(--theme-e3e1db);
+  border-radius: 10px;
+  background: var(--theme-faf8f2);
+}
+
+.version-card-support > svg {
+  flex: none;
+  color: var(--theme-7a746c);
+}
+
+.version-card-support > div {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+}
+
+.version-card-support strong,
+.version-card-support span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.version-card-support strong {
+  color: var(--theme-39352f);
+  font-size: var(--font-size-meta);
+}
+
+.version-card-support span {
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+}
+
+.version-card-support span.success {
+  color: var(--theme-2f6b3f);
+}
+
+.version-card-support span.error {
+  color: var(--theme-9f2d20);
+}
+
+.version-card-note {
+  align-self: start;
+  margin: 0;
+  color: var(--theme-7a746c);
+  font-size: var(--font-size-caption);
+  line-height: var(--line-height-body);
+}
+
+.version-card-note-slot {
+  min-height: 0;
+}
+
+.version-card-note.error {
+  color: var(--theme-9f2d20);
 }
 
 .client-api-panel {
@@ -1295,6 +1517,14 @@ textarea:focus-visible {
   grid-template-rows: repeat(3, auto);
 }
 
+.version-management-layout > .version-product-card {
+  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
+}
+
+.version-management-layout > .version-product-card > .panel-action-row {
+  padding-top: 0;
+}
+
 .kernel-layout > .panel > .panel-heading {
   min-height: 0;
   height: auto;
@@ -1399,10 +1629,10 @@ textarea:focus-visible {
 }
 
 .button-row.version-action-row {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   grid-auto-flow: row;
   grid-auto-columns: unset;
-  grid-auto-rows: 38px;
+  grid-auto-rows: 40px;
   align-items: stretch;
   gap: 10px;
 }
@@ -1421,30 +1651,23 @@ textarea:focus-visible {
   white-space: normal;
 }
 
-.software-update-details {
-  align-content: start;
-}
-
-.software-update-details .panel-detail-row {
-  grid-template-columns: 120px minmax(0, 1fr);
-}
-
-.software-update-details .panel-detail-row dt {
-  white-space: nowrap;
-}
-
 .software-update-actions {
-  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   grid-auto-flow: row;
-  grid-auto-rows: 38px;
+  grid-auto-rows: 40px;
   align-items: stretch;
 }
 
+.software-update-actions > button:last-child:nth-child(3) {
+  grid-column: 1 / -1;
+}
+
 .software-update-actions > button,
 .version-action-row > button {
   width: 100%;
-  height: 38px;
-  min-height: 38px;
+  height: 40px;
+  min-height: 40px;
+  gap: 7px;
   padding: 0 10px;
   line-height: normal;
   overflow-wrap: normal;
@@ -1452,11 +1675,11 @@ textarea:focus-visible {
   white-space: nowrap;
 }
 
-.software-update-panel .panel-heading p {
-  white-space: normal;
-}
-
 @container workspace (min-width: 840px) {
+  .version-page-header {
+    grid-template-columns: minmax(260px, 0.8fr) minmax(360px, 1.2fr);
+  }
+
   .home-page {
     grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
     grid-auto-rows: 1fr;
@@ -1502,45 +1725,58 @@ textarea:focus-visible {
 
   .version-management-layout {
     grid-template-columns: repeat(2, minmax(0, 1fr));
-    grid-template-rows: auto minmax(0, 1fr);
     align-items: stretch;
   }
 
-  .version-management-layout > .version-source-panel {
-    grid-column: 1 / -1;
-    grid-row: 1;
-  }
-
   .version-management-layout > .panel {
     height: 100%;
     align-self: stretch;
-    grid-template-rows: auto minmax(0, 1fr) auto;
-    row-gap: clamp(12px, 2vh, 22px);
-  }
-
-  .version-management-layout > .version-source-panel {
-    height: auto;
-    grid-template-rows: none;
-    row-gap: 8px;
-  }
-
-  .version-management-layout > .software-update-panel,
-  .version-management-layout > .version-panel {
-    grid-row: 2;
   }
 
   .home-page > .home-layout > .control-panel > .panel-detail-grid,
-  .version-management-layout > .panel > .panel-detail-grid,
   .home-page > .client-api-panel > .client-api-grid {
     align-content: space-evenly;
   }
 
-  .home-page > .home-layout > .control-panel > .panel-action-row,
-  .version-management-layout > .panel > .panel-action-row {
+  .home-page > .home-layout > .control-panel > .panel-action-row {
     padding-top: 0;
   }
 }
 
+@container workspace (max-width: 700px) {
+  .version-page-header {
+    gap: 18px;
+  }
+
+  .version-page-title p {
+    overflow: visible;
+    text-overflow: clip;
+    white-space: normal;
+  }
+
+  .version-product-heading {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .version-product-heading .state-pill {
+    max-width: 100%;
+  }
+
+  .version-core-values {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .version-core-values .version-value-block {
+    padding: 14px 18px;
+  }
+
+  .version-core-values .version-value-block + .version-value-block {
+    border-top: 1px solid var(--theme-e3e1db);
+    border-left: 0;
+  }
+}
+
 .info-list {
   display: grid;
   gap: 10px;