diff --git a/DeepDrftPublic.Client/Pages/ArchiveView.razor b/DeepDrftPublic.Client/Pages/ArchiveView.razor
index 3eeb150..4dc3885 100644
--- a/DeepDrftPublic.Client/Pages/ArchiveView.razor
+++ b/DeepDrftPublic.Client/Pages/ArchiveView.razor
@@ -10,52 +10,54 @@
            The release grid still prerenders so the archive is meaningful before hydration. *@
         @if (RendererInfo.IsInteractive)
         {
-            <div class="archive-search-row">
-                <MudTextField T="string"
-                              Value="@SearchText"
-                              ValueChanged="@OnSearchInput"
-                              Immediate="true"
-                              DebounceInterval="400"
-                              Placeholder="Search releases or artists"
-                              Adornment="Adornment.Start"
-                              AdornmentIcon="@Icons.Material.Filled.Search"
-                              Variant="Variant.Outlined"
-                              Margin="Margin.Dense"
-                              Clearable="true"
-                              Class="archive-search-field"/>
-            </div>
-
-            <div class="archive-filter-row">
-                <MudToggleGroup T="ReleaseMedium?"
-                                Value="@_selectedMedium"
-                                ValueChanged="@OnMediumSelected"
-                                SelectionMode="SelectionMode.SingleSelection"
-                                Color="Color.Primary"
-                                Size="Size.Small"
-                                Class="archive-medium-toggle">
-                    <MudToggleItem T="ReleaseMedium?" Value="@(null)">All</MudToggleItem>
-                    @foreach (var medium in _media)
-                    {
-                        <MudToggleItem T="ReleaseMedium?" Value="@medium">@MediumLabel(medium)</MudToggleItem>
-                    }
-                </MudToggleGroup>
-            </div>
-
-            @if (_genres.Count > 0)
-            {
-                <div class="archive-filter-row">
-                    <MudChipSet T="string"
-                                SelectedValue="@_selectedGenre"
-                                SelectedValueChanged="@OnGenreSelected"
-                                SelectionMode="SelectionMode.ToggleSelection"
-                                Class="archive-genre-chips">
-                        @foreach (var genre in _genres)
-                        {
-                            <MudChip T="string" Value="@genre.Genre">@genre.Genre</MudChip>
-                        }
-                    </MudChipSet>
+            <div class="archive-controls-row">
+                <div class="archive-controls-search">
+                    <MudTextField T="string"
+                                  Value="@SearchText"
+                                  ValueChanged="@OnSearchInput"
+                                  Immediate="true"
+                                  DebounceInterval="400"
+                                  Placeholder="Search releases or artists"
+                                  Adornment="Adornment.Start"
+                                  AdornmentIcon="@Icons.Material.Filled.Search"
+                                  Variant="Variant.Outlined"
+                                  Margin="Margin.Dense"
+                                  Clearable="true"
+                                  Class="archive-search-field"/>
                 </div>
-            }
+
+                <div class="archive-controls-medium">
+                    <MudToggleGroup T="ReleaseMedium?"
+                                    Value="@_selectedMedium"
+                                    ValueChanged="@OnMediumSelected"
+                                    SelectionMode="SelectionMode.SingleSelection"
+                                    Color="Color.Primary"
+                                    Size="Size.Small"
+                                    Class="archive-medium-toggle">
+                        <MudToggleItem T="ReleaseMedium?" Value="@(null)">All</MudToggleItem>
+                        @foreach (var medium in _media)
+                        {
+                            <MudToggleItem T="ReleaseMedium?" Value="@medium">@MediumLabel(medium)</MudToggleItem>
+                        }
+                    </MudToggleGroup>
+                </div>
+
+                @if (_genres.Count > 0)
+                {
+                    <div class="archive-controls-genre">
+                        <MudChipSet T="string"
+                                    SelectedValue="@_selectedGenre"
+                                    SelectedValueChanged="@OnGenreSelected"
+                                    SelectionMode="SelectionMode.ToggleSelection"
+                                    Class="archive-genre-chips">
+                            @foreach (var genre in _genres)
+                            {
+                                <MudChip T="string" Value="@genre.Genre">@genre.Genre</MudChip>
+                            }
+                        </MudChipSet>
+                    </div>
+                }
+            </div>
         }
 
         @if (_loading)
diff --git a/DeepDrftPublic.Client/Pages/ArchiveView.razor.css b/DeepDrftPublic.Client/Pages/ArchiveView.razor.css
index d47c02e..867a730 100644
--- a/DeepDrftPublic.Client/Pages/ArchiveView.razor.css
+++ b/DeepDrftPublic.Client/Pages/ArchiveView.razor.css
@@ -2,10 +2,19 @@
     padding-top: 16px;
 }
 
-.archive-search-row {
+/* Single flex row: search left | toggle center | chips right.
+   On narrow screens the medium toggle reflows to its own centered row below. */
+.archive-controls-row {
     display: flex;
-    justify-content: flex-start;
-    padding: 0 0 12px 0;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 24px;
+    padding: 0 0 20px 0;
+}
+
+.archive-controls-search {
+    flex: 1 1 auto;
+    min-width: 180px;
 }
 
 /* archive-search-field rides on MudTextField, whose root is a child Razor component element.
@@ -15,11 +24,35 @@
     width: 100%;
 }
 
-.archive-filter-row {
+.archive-controls-medium {
+    flex: 0 0 auto;
     display: flex;
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    padding: 0 0 12px 0;
+    justify-content: center;
+}
+
+.archive-controls-genre {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: flex-end;
+}
+
+/* Narrow screens: push the medium toggle to a full-width centered second row.
+   Search and genre chips stay together on the first row. */
+@media (max-width: 600px) {
+    .archive-controls-medium {
+        order: 1;
+        flex: 1 0 100%;
+        justify-content: center;
+    }
+
+    .archive-controls-search {
+        order: 0;
+    }
+
+    .archive-controls-genre {
+        order: 0;
+        flex: 0 1 auto;
+    }
 }
 
 .archive-card-center {