diff --git a/lang/de/update.php b/lang/de/update.php
index aa98bf7..3090422 100644
--- a/lang/de/update.php
+++ b/lang/de/update.php
@@ -7,10 +7,10 @@ return [
     'subtitle' => 'Der Stack wird neu gebaut. Diese Seite erkennt automatisch, wann er wieder erreichbar ist.',
 
     // Phase labels (displayed in the checklist)
-    'phase_fetch' => 'Holen',
-    'phase_build' => 'Bauen',
-    'phase_migrate' => 'Migrieren',
-    'phase_restart' => 'Neustart',
+    'phase_fetch' => 'Update wird abgerufen',
+    'phase_build' => 'Image wird erstellt',
+    'phase_migrate' => 'Datenbank wird migriert',
+    'phase_restart' => 'Dienste werden neu gestartet',
 
     // Status messages
     'elapsed' => 'Vergangene Zeit',
diff --git a/lang/en/update.php b/lang/en/update.php
index ff985cd..cba1c9c 100644
--- a/lang/en/update.php
+++ b/lang/en/update.php
@@ -7,10 +7,10 @@ return [
     'subtitle' => 'The stack is rebuilding. This page will automatically detect when it is back up.',
 
     // Phase labels (displayed in the checklist)
-    'phase_fetch' => 'Fetch',
-    'phase_build' => 'Build',
-    'phase_migrate' => 'Migrate',
-    'phase_restart' => 'Restart',
+    'phase_fetch' => 'Fetching update',
+    'phase_build' => 'Building image',
+    'phase_migrate' => 'Migrating database',
+    'phase_restart' => 'Restarting services',
 
     // Status messages
     'elapsed' => 'Elapsed time',
diff --git a/resources/views/livewire/versions/index.blade.php b/resources/views/livewire/versions/index.blade.php
index 772b808..ad7ca2b 100644
--- a/resources/views/livewire/versions/index.blade.php
+++ b/resources/views/livewire/versions/index.blade.php
@@ -40,32 +40,35 @@
 
     {{-- Honest status banner — installed version vs. newest release tag in the channel --}}
     <div @class([
-        'flex flex-wrap items-center gap-4 rounded-xl border bg-surface p-5 shadow-panel',
+        'flex flex-col gap-4 rounded-xl border bg-surface p-5 shadow-panel sm:flex-row sm:items-center',
         'border-warning/30' => $isUpdate,
         'border-line' => ! $isUpdate,
     ])>
-        <span @class([
-            'grid h-12 w-12 shrink-0 place-items-center rounded-xl border',
-            'border-warning/30 bg-warning/10 text-warning' => $isUpdate,
-            'border-accent/25 bg-accent/10 text-accent-text' => ! $isUpdate,
-        ])>
-            <x-icon :name="$isUpdate ? 'alert' : 'tag'" class="h-6 w-6" />
-        </span>
-        <div class="min-w-0 flex-1">
-            <p class="flex flex-wrap items-center gap-2 font-display text-base font-semibold text-ink">
-                Clusev <span class="font-mono text-accent-text">v{{ $version }}</span>
-                <x-badge tone="accent">{{ __('versions.channel_badge', ['channel' => $channel]) }}</x-badge>
-                @if ($latestTag)
-                    <x-badge tone="neutral">{{ __('versions.latest_release_badge', ['tag' => $latestTag]) }}</x-badge>
-                @endif
-            </p>
-            <p class="mt-0.5 font-mono text-[11px] leading-relaxed text-ink-3">
-                @if ($updateStatus)
-                    {{ $updateStatus }}
-                @else
-                    {{ __('versions.banner_default') }}
-                @endif
-            </p>
+        {{-- Icon + version/badges block --}}
+        <div class="flex items-start gap-4 sm:contents">
+            <span @class([
+                'grid h-12 w-12 shrink-0 place-items-center rounded-xl border',
+                'border-warning/30 bg-warning/10 text-warning' => $isUpdate,
+                'border-accent/25 bg-accent/10 text-accent-text' => ! $isUpdate,
+            ])>
+                <x-icon :name="$isUpdate ? 'alert' : 'tag'" class="h-6 w-6" />
+            </span>
+            <div class="min-w-0 flex-1">
+                <p class="flex flex-wrap items-center gap-2 font-display text-base font-semibold text-ink">
+                    Clusev <span class="font-mono text-accent-text">v{{ $version }}</span>
+                    <x-badge tone="accent">{{ __('versions.channel_badge', ['channel' => $channel]) }}</x-badge>
+                    @if ($latestTag)
+                        <x-badge tone="neutral">{{ __('versions.latest_release_badge', ['tag' => $latestTag]) }}</x-badge>
+                    @endif
+                </p>
+                <p class="mt-0.5 font-mono text-[11px] leading-relaxed text-ink-3">
+                    @if ($updateStatus)
+                        {{ $updateStatus }}
+                    @else
+                        {{ __('versions.banner_default') }}
+                    @endif
+                </p>
+            </div>
         </div>
         {{-- One-click update: writes the update sentinel; a host watcher runs update.sh. Mirrors
              the System restart button (direct click → "running" notice via a flag — not
@@ -73,34 +76,30 @@
         @if ($updateRequested)
             {{-- Poll until the rebuilt stack reports a newer version (pollUpdate flips the state +
                  fires a success toast). Survives the rebuild downtime: failed polls just retry. --}}
-            <p class="flex shrink-0 items-center gap-1.5 font-mono text-[11px] text-warning" wire:poll.5s="pollUpdate">
+            <p class="flex w-full items-center gap-1.5 font-mono text-[11px] text-warning sm:w-auto sm:shrink-0" wire:poll.5s="pollUpdate">
                 <x-icon name="rotate" class="h-3.5 w-3.5 shrink-0 animate-spin" />{{ __('versions.update_running') }}
             </p>
         @elseif ($isUpdate)
-            <x-btn variant="primary" wire:click="requestUpdate" wire:target="requestUpdate" wire:loading.attr="disabled" class="shrink-0">
+            <x-btn variant="primary" wire:click="requestUpdate" wire:target="requestUpdate" wire:loading.attr="disabled" class="w-full sm:w-auto sm:shrink-0">
                 <svg wire:loading wire:target="requestUpdate" class="h-3.5 w-3.5 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" stroke-linecap="round" /></svg>
                 <x-icon name="rotate" class="h-3.5 w-3.5" wire:loading.remove wire:target="requestUpdate" />
                 {{ __('versions.update_now') }}
             </x-btn>
         @endif
         @if ($lastChecked)
-            <span class="shrink-0 font-mono text-[11px] text-ink-4">{{ __('versions.checked_at', ['time' => $lastChecked]) }}</span>
+            <span class="font-mono text-[11px] text-ink-4 sm:shrink-0">{{ __('versions.checked_at', ['time' => $lastChecked]) }}</span>
         @endif
     </div>
 
     <div class="grid grid-cols-1 gap-5 lg:grid-cols-[minmax(0,1fr)_300px]">
         {{-- Release history BY VERSION --}}
         <x-panel :title="__('versions.changelog_title')" :subtitle="__('versions.changelog_subtitle', ['count' => count($releases)])" :padded="false">
-            <div class="px-4 py-4 sm:px-5">
+            <div class="divide-y divide-line px-4 py-2 sm:px-5">
                 @forelse ($releases as $rel)
-                    <div class="flex gap-4 pb-6 last:pb-0">
-                        <div class="flex flex-col items-center">
-                            <span @class(['mt-1 h-2.5 w-2.5 shrink-0 rounded-full', 'bg-accent' => $loop->first, 'bg-ink-4' => ! $loop->first])></span>
-                            @unless ($loop->last)<span class="mt-1 w-px flex-1 bg-line"></span>@endunless
-                        </div>
-                        <div class="-mt-0.5 min-w-0 flex-1">
-                            {{-- Version + date header --}}
-                            <div class="flex flex-wrap items-center gap-2">
+                    @if ($loop->first)
+                        {{-- Latest version: always open, not collapsible --}}
+                        <div class="py-4">
+                            <div class="mb-2.5 flex flex-wrap items-center gap-2">
                                 @if ($rel['unreleased'])
                                     <span class="font-display text-sm font-semibold text-ink">{{ __('versions.unreleased') }}</span>
                                     <x-badge tone="cyan">{{ __('versions.in_progress') }}</x-badge>
@@ -111,9 +110,7 @@
                                     @endif
                                 @endif
                             </div>
-
-                            {{-- Grouped changes --}}
-                            <div class="mt-2.5 space-y-3">
+                            <div class="space-y-3">
                                 @foreach ($rel['groups'] as $group => $items)
                                     <div>
                                         <div class="mb-1.5 flex items-center gap-2">
@@ -131,9 +128,42 @@
                                 @endforeach
                             </div>
                         </div>
-                    </div>
+                    @else
+                        {{-- Older versions: collapsible <details> accordion --}}
+                        <details class="group py-1">
+                            <summary class="flex cursor-pointer list-none items-center gap-2 py-3 [&::-webkit-details-marker]:hidden">
+                                <x-icon name="chevron-right" class="h-4 w-4 shrink-0 text-ink-4 transition-transform duration-200 [details[open]_&]:rotate-90" />
+                                @if ($rel['unreleased'])
+                                    <span class="font-display text-sm font-semibold text-ink">{{ __('versions.unreleased') }}</span>
+                                    <x-badge tone="cyan">{{ __('versions.in_progress') }}</x-badge>
+                                @else
+                                    <span class="font-mono text-sm font-semibold text-accent-text">v{{ $rel['version'] }}</span>
+                                    @if ($rel['date'])
+                                        <span class="font-mono text-[11px] text-ink-4">{{ $rel['date'] }}</span>
+                                    @endif
+                                @endif
+                            </summary>
+                            <div class="pb-4 pt-1 space-y-3">
+                                @foreach ($rel['groups'] as $group => $items)
+                                    <div>
+                                        <div class="mb-1.5 flex items-center gap-2">
+                                            <x-badge :tone="$tone($group)" class="shrink-0">{{ $sectionLabel($group) }}</x-badge>
+                                        </div>
+                                        <ul class="space-y-1.5 pl-0.5">
+                                            @foreach ($items as $text)
+                                                <li class="flex items-start gap-2.5">
+                                                    <span class="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-ink-4"></span>
+                                                    <span class="text-sm leading-relaxed text-ink-2">{{ $text }}</span>
+                                                </li>
+                                            @endforeach
+                                        </ul>
+                                    </div>
+                                @endforeach
+                            </div>
+                        </details>
+                    @endif
                 @empty
-                    <p class="font-mono text-[11px] text-ink-3">{{ __('versions.changelog_empty') }}</p>
+                    <p class="py-4 font-mono text-[11px] text-ink-3">{{ __('versions.changelog_empty') }}</p>
                 @endforelse
             </div>
         </x-panel>
diff --git a/tests/Feature/UpdateProgressTest.php b/tests/Feature/UpdateProgressTest.php
index e99a50a..753aaa6 100644
--- a/tests/Feature/UpdateProgressTest.php
+++ b/tests/Feature/UpdateProgressTest.php
@@ -188,9 +188,9 @@ class UpdateProgressTest extends TestCase
         $body = $this->get(route('update.progress'))->content();
 
         // German labels (default locale in tests)
-        $this->assertStringContainsString('Holen', $body);
-        $this->assertStringContainsString('Bauen', $body);
-        $this->assertStringContainsString('Migrieren', $body);
-        $this->assertStringContainsString('Neustart', $body);
+        $this->assertStringContainsString('Update wird abgerufen', $body);
+        $this->assertStringContainsString('Image wird erstellt', $body);
+        $this->assertStringContainsString('Datenbank wird migriert', $body);
+        $this->assertStringContainsString('Dienste werden neu gestartet', $body);
     }
 }