diff --git a/ErsatzTV/Pages/ArtistList.razor b/ErsatzTV/Pages/ArtistList.razor
index 207f60cf3..1a13a2199 100644
--- a/ErsatzTV/Pages/ArtistList.razor
+++ b/ErsatzTV/Pages/ArtistList.razor
@@ -7,61 +7,36 @@
 @inherits MultiSelectBase<MusicVideoList>
 @inject NavigationManager NavigationManager
 
-<MudPaper Square="true" Style="display: flex; height: 64px; width: 100%; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="ArtistCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href="@($"media/music/artists/{context.ArtistId}")"
+                               ArtworkKind="ArtworkKind.Thumbnail"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="ArtistCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href="@($"media/music/artists/{context.ArtistId}")"
-                       ArtworkKind="ArtworkKind.Thumbnail"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -139,7 +114,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddArtistToCollection(collection.Id, artist.ArtistId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Pages/EpisodeList.razor b/ErsatzTV/Pages/EpisodeList.razor
index a43f2df1c..cabee6bd7 100644
--- a/ErsatzTV/Pages/EpisodeList.razor
+++ b/ErsatzTV/Pages/EpisodeList.razor
@@ -7,68 +7,36 @@
 @inherits MultiSelectBase<EpisodeList>
 @inject NavigationManager NavigationManager
 
-<MudPaper Square="true" Style="display: flex; height: 64px; left: 240px; padding: 0; position: fixed; right: 0; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
-                           OnClick="@(_ => AddSelectionToPlaylist())">
-                    Add To Playlist
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="TelevisionEpisodeCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href="@($"media/tv/seasons/{context.SeasonId}#episode-{context.EpisodeId}")"
+                               Subtitle="@($"{context.ShowTitle} - S{context.Season} E{context.Episode}")"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="TelevisionEpisodeCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href="@($"media/tv/seasons/{context.SeasonId}#episode-{context.EpisodeId}")"
-                       Subtitle="@($"{context.ShowTitle} - S{context.Season} E{context.Episode}")"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -146,7 +114,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddEpisodeToCollection(collection.Id, episode.EpisodeId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Pages/ImageBrowser.razor b/ErsatzTV/Pages/ImageBrowser.razor
index 0029bf7a0..0775f5d82 100644
--- a/ErsatzTV/Pages/ImageBrowser.razor
+++ b/ErsatzTV/Pages/ImageBrowser.razor
@@ -5,20 +5,22 @@
 @inject IDialogService Dialog
 @inject IMediator Mediator
 
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
-    <MudGrid>
-        <MudItem xs="8">
+<MudForm Style="max-height: 100%">
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudText Typo="Typo.h5" Class="mb-2">Images</MudText>
+            <MudDivider Class="mb-6"/>
             <MudCard>
                 <MudTreeView T="ImageTreeItemViewModel" ServerData="LoadServerData" Items="@TreeItems" Hover="true" ExpandOnClick="true">
                     <ItemTemplate Context="item">
                         <MudTreeViewItem T="ImageTreeItemViewModel" Items="@item.Value!.TreeItems" Icon="@item.Value.Icon" CanExpand="@item.Value.CanExpand" Value="@item.Value">
                             <BodyContent>
-                                <div style="display: grid; grid-template-columns: 1fr auto; align-items: center; width: 100%">
-                                    <div style="justify-self: start;">
+                                <div style="display: flex; align-items: center; width: 100%">
+                                    <div style="justify-self: start; flex: 1">
                                         <MudText>@item.Value.Text</MudText>
                                     </div>
-                                    <div style="justify-self: end;">
-                                        <span>@item.Value.EndText</span>
+                                    <div style="display: flex; align-items: center; justify-self: end;">
+                                        <span class="d-none d-sm-flex">@item.Value.EndText</span>
                                         <MudTooltip Text="Edit Image Folder Duration" ShowOnHover="true" ShowOnClick="false" ShowOnFocus="false">
                                             <MudIconButton Icon="@Icons.Material.Filled.Edit"
                                                            OnClick="@(_ => EditImageFolderDuration(item.Value))">
@@ -29,6 +31,7 @@
                                             if (!string.IsNullOrWhiteSpace(query))
                                             {
                                                 <MudIconButton
+                                                    Class="d-none d-sm-flex"
                                                     Icon="@Icons.Material.Filled.Search"
                                                     Href="@($"search?query={query}")"/>
                                             }
@@ -40,9 +43,9 @@
                     </ItemTemplate>
                 </MudTreeView>
             </MudCard>
-        </MudItem>
-    </MudGrid>
-</MudContainer>
+        </MudContainer>
+    </div>
+</MudForm>
 
 @code {
     private readonly CancellationTokenSource _cts = new();
@@ -90,7 +93,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<EditImageFolderDurationDialog>("Edit Image Folder Duration", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled)
+        if (result is { Canceled: false })
         {
             double? duration = await Mediator.Send(new UpdateImageFolderDuration(item.LibraryFolderId, result.Data as double?), _cts.Token);
             item.UpdateDuration(duration);
diff --git a/ErsatzTV/Pages/ImageList.razor b/ErsatzTV/Pages/ImageList.razor
index ebbbf666d..fad1d89d6 100644
--- a/ErsatzTV/Pages/ImageList.razor
+++ b/ErsatzTV/Pages/ImageList.razor
@@ -7,68 +7,36 @@
 @inherits MultiSelectBase<ImageList>
 @inject NavigationManager NavigationManager
 
-<MudPaper Square="true" Style="display: flex; height: 64px; left: 240px; padding: 0; position: fixed; right: 0; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
-                           OnClick="@(_ => AddSelectionToPlaylist())">
-                    Add To Playlist
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="ImageCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href=""
+                               ArtworkKind="ArtworkKind.Thumbnail"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="ImageCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href=""
-                       ArtworkKind="ArtworkKind.Thumbnail"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -146,7 +114,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddImageToCollection(collection.Id, image.ImageId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Pages/Movie.razor b/ErsatzTV/Pages/Movie.razor
index 17455aef9..bd3393f2f 100644
--- a/ErsatzTV/Pages/Movie.razor
+++ b/ErsatzTV/Pages/Movie.razor
@@ -27,23 +27,12 @@
         }
     }
 </MudContainer>
-<MudContainer MaxWidth="MaxWidth.Large" Style="margin-top: 200px">
-    <div style="display: flex; flex-direction: row;" class="mb-6">
+<MudContainer MaxWidth="MaxWidth.Large" Style="margin-top: 100px">
+    <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Spacing="6">
         @if (!string.IsNullOrWhiteSpace(_movie?.Poster))
         {
-            <div class="mr-6" style="display: flex; flex-direction: column; max-height: 440px; position: relative">
-                @if (_movie.Poster.StartsWith("http://") || _movie.Poster.StartsWith("https://"))
-                {
-                    <img class="mud-elevation-2"
-                         style="border-radius: 4px; flex-shrink: 0; max-height: 440px;"
-                         src="@_movie.Poster" alt="movie poster"/>
-                }
-                else
-                {
-                    <img class="mud-elevation-2"
-                         style="border-radius: 4px; flex-shrink: 0; max-height: 440px;"
-                         src="@($"artwork/posters/{_movie.Poster}")" alt="movie poster"/>
-                }
+            <div style="display: flex; flex-direction: column; max-height: 325px; position: relative">
+                <MudImage Src="@GetPosterUrl(_movie.Poster)" Class="rounded-lg" Style="max-height: 325px" ObjectFit="ObjectFit.Contain" />
                 @if (_movie.MediaItemState == MediaItemState.FileNotFound)
                 {
                     <div style="position: absolute; right: 10px; top: 8px;">
@@ -59,8 +48,15 @@
             </div>
         }
         <div style="display: flex; flex-direction: column; height: 100%">
-            <MudText Typo="Typo.h2" Class="media-item-title">@_movie?.Title</MudText>
-            <MudText Typo="Typo.subtitle1" Class="media-item-subtitle mb-6 mud-text-secondary">@_movie?.Year</MudText>
+            <MudStack Row="false">
+                <MudHidden Invert="true" Breakpoint="Breakpoint.SmAndDown">
+                    <MudText Typo="Typo.h4" Class="media-item-title">@_movie?.Title</MudText>
+                </MudHidden>
+                <MudHidden Invert="true" Breakpoint="Breakpoint.MdAndUp">
+                    <MudText Typo="Typo.h2" Class="media-item-title">@_movie?.Title</MudText>
+                </MudHidden>
+                <MudText Typo="Typo.subtitle1" Class="media-item-subtitle mb-6 mud-text-secondary">@_movie?.Year</MudText>
+            </MudStack>
             @if (!string.IsNullOrWhiteSpace(_movie?.Plot))
             {
                 <MudCard Elevation="2" Class="mb-6">
@@ -69,34 +65,28 @@
                     </MudCardContent>
                 </MudCard>
             }
-            <div>
-                <MudButton Class="mb-6"
-                           Variant="Variant.Filled"
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="mb-6">
+                <MudButton Variant="Variant.Filled"
                            Color="Color.Primary"
                            StartIcon="@Icons.Material.Filled.Add"
                            OnClick="@AddToCollection">
                     Add To Collection
                 </MudButton>
-            </div>
-            <div>
-                <MudButton Class="mb-6"
-                           Variant="Variant.Filled"
+                <MudButton Variant="Variant.Filled"
                            Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
+                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
                            OnClick="@AddToPlaylist">
                     Add To Playlist
                 </MudButton>
-            </div>
-            <div>
                 <MudButton Variant="Variant.Filled"
                            Color="Color.Secondary"
                            StartIcon="@Icons.Material.Filled.Info"
                            OnClick="@ShowInfo">
                     Show Media Info
                 </MudButton>
-            </div>
+            </MudStack>
         </div>
-    </div>
+    </MudStack>
     @if (_movie?.MediaItemState == MediaItemState.FileNotFound)
     {
         <MudCard Class="mb-6">
@@ -121,7 +111,7 @@
             </MudCardContent>
         </MudCard>
     }
-    <MudCard Class="mb-6">
+    <MudCard Class="mt-6 mb-6">
         <MudCardContent>
             @if (_sortedContentRatings.Any())
             {
@@ -214,14 +204,14 @@
 {
     <MudContainer MaxWidth="MaxWidth.Large">
         <MudText Class="mb-4">Actors</MudText>
-    </MudContainer>
-    <MudContainer MaxWidth="MaxWidth.Large" Class="media-card-grid">
-        @foreach (ActorCardViewModel actor in _movie.Actors)
-        {
-            <MediaCard Data="@actor"
-                       Href="@(@$"actor:""{actor.Name.ToLowerInvariant()}""".GetRelativeSearchQuery())"
-                       ArtworkKind="ArtworkKind.Thumbnail"/>
-        }
+        <MudStack Row="true" Wrap="Wrap.Wrap">
+            @foreach (ActorCardViewModel actor in _movie.Actors)
+            {
+                <MediaCard Data="@actor"
+                           Href="@(@$"actor:""{actor.Name.ToLowerInvariant()}""".GetRelativeSearchQuery())"
+                           ArtworkKind="ArtworkKind.Thumbnail"/>
+            }
+        </MudStack>
     </MudContainer>
 }
 
@@ -296,7 +286,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+        if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
         {
             await Mediator.Send(new AddMovieToCollection(collection.Id, MovieId), _cts.Token);
             NavigationManager.NavigateTo($"media/collections/{collection.Id}");
@@ -310,7 +300,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<AddToPlaylistDialog>("Add To Playlist", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is PlaylistViewModel playlist)
+        if (result is { Canceled: false, Data: PlaylistViewModel playlist })
         {
             await Mediator.Send(new AddMovieToPlaylist(playlist.Id, MovieId), _cts.Token);
             NavigationManager.NavigateTo($"media/playlists/{playlist.Id}");
@@ -336,4 +326,9 @@
         }
     }
 
+    private static string GetPosterUrl(string poster)
+    {
+        return poster.StartsWith("http://") || poster.StartsWith("https://") ? poster : $"artwork/posters/{poster}";
+    }
+
 }
\ No newline at end of file
diff --git a/ErsatzTV/Pages/MovieList.razor b/ErsatzTV/Pages/MovieList.razor
index 04c531ad0..c74a853d6 100644
--- a/ErsatzTV/Pages/MovieList.razor
+++ b/ErsatzTV/Pages/MovieList.razor
@@ -9,67 +9,36 @@
 @using ErsatzTV.Extensions
 @implements IDisposable
 
-<MudPaper Square="true" Style="display: flex; height: 64px; width: 100%; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
-                           OnClick="@(_ => AddSelectionToPlaylist())">
-                    Add To Playlist
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="MovieCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href="@($"media/movies/{context.MovieId}")"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="MovieCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href="@($"media/movies/{context.MovieId}")"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
+
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -174,7 +143,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddMovieToCollection(collection.Id, movie.MovieId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Pages/MultiSelectBase.cs b/ErsatzTV/Pages/MultiSelectBase.cs
index ca28ee767..1d19417d0 100644
--- a/ErsatzTV/Pages/MultiSelectBase.cs
+++ b/ErsatzTV/Pages/MultiSelectBase.cs
@@ -48,6 +48,7 @@ public class MultiSelectBase<T> : FragmentNavigationBase
     {
         SelectedItems.Clear();
         _recentlySelected = None;
+        StateHasChanged();
     }
 
     protected virtual Task RefreshData() => Task.CompletedTask;
@@ -125,7 +126,7 @@ public class MultiSelectBase<T> : FragmentNavigationBase
         IDialogReference dialog =
             await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+        if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
         {
             var request = new AddItemsToCollection(
                 collection.Id,
@@ -170,7 +171,7 @@ public class MultiSelectBase<T> : FragmentNavigationBase
             parameters,
             options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled)
+        if (result is { Canceled: false })
         {
             var itemIds = SelectedItems.Map(vm => vm.MediaItemId).ToList();
 
@@ -208,7 +209,7 @@ public class MultiSelectBase<T> : FragmentNavigationBase
         IDialogReference dialog =
             await Dialog.ShowAsync<AddToPlaylistDialog>("Add To Playlist", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is PlaylistViewModel playlist)
+        if (result is { Canceled: false, Data: PlaylistViewModel playlist })
         {
             var request = new AddItemsToPlaylist(
                 playlist.Id,
diff --git a/ErsatzTV/Pages/MusicVideoList.razor b/ErsatzTV/Pages/MusicVideoList.razor
index 32d21f552..f99871cab 100644
--- a/ErsatzTV/Pages/MusicVideoList.razor
+++ b/ErsatzTV/Pages/MusicVideoList.razor
@@ -7,68 +7,36 @@
 @inherits MultiSelectBase<MusicVideoList>
 @inject NavigationManager NavigationManager
 
-<MudPaper Square="true" Style="display: flex; height: 64px; width: 100%; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
-                           OnClick="@(_ => AddSelectionToPlaylist())">
-                    Add To Playlist
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="MusicVideoCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href=""
+                               ArtworkKind="ArtworkKind.Thumbnail"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="MusicVideoCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href=""
-                       ArtworkKind="ArtworkKind.Thumbnail"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -146,7 +114,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddMusicVideoToCollection(collection.Id, musicVideo.MusicVideoId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Pages/OtherVideoList.razor b/ErsatzTV/Pages/OtherVideoList.razor
index 56ba5c61f..b5beb569c 100644
--- a/ErsatzTV/Pages/OtherVideoList.razor
+++ b/ErsatzTV/Pages/OtherVideoList.razor
@@ -7,68 +7,36 @@
 @inherits MultiSelectBase<OtherVideoList>
 @inject NavigationManager NavigationManager
 
-<MudPaper Square="true" Style="display: flex; height: 64px; width: 100%; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
-                           OnClick="@(_ => AddSelectionToPlaylist())">
-                    Add To Playlist
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="OtherVideoCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href=""
+                               ArtworkKind="ArtworkKind.Thumbnail"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="OtherVideoCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href=""
-                       ArtworkKind="ArtworkKind.Thumbnail"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -146,7 +114,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddOtherVideoToCollection(collection.Id, otherVideo.OtherVideoId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Pages/SongList.razor b/ErsatzTV/Pages/SongList.razor
index 2e7174c69..4c84f2c64 100644
--- a/ErsatzTV/Pages/SongList.razor
+++ b/ErsatzTV/Pages/SongList.razor
@@ -7,68 +7,36 @@
 @inherits MultiSelectBase<SongList>
 @inject NavigationManager NavigationManager
 
-<MudPaper Square="true" Style="display: flex; height: 64px; width: 100%; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
-                           OnClick="@(_ => AddSelectionToPlaylist())">
-                    Add To Playlist
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="SongCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href=""
+                               ArtworkKind="ArtworkKind.Thumbnail"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="SongCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href=""
-                       ArtworkKind="ArtworkKind.Thumbnail"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -146,7 +114,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddSongToCollection(collection.Id, song.SongId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Pages/TelevisionSeasonList.razor b/ErsatzTV/Pages/TelevisionSeasonList.razor
index e57354c97..2611557bf 100644
--- a/ErsatzTV/Pages/TelevisionSeasonList.razor
+++ b/ErsatzTV/Pages/TelevisionSeasonList.razor
@@ -26,26 +26,19 @@
         }
     }
 </MudContainer>
-<MudContainer MaxWidth="MaxWidth.Large" Style="margin-top: 200px">
-    <div style="display: flex; flex-direction: row;" class="mb-6">
-        @if (!string.IsNullOrWhiteSpace(_show?.Poster))
-        {
-            if (_show.Poster.StartsWith("http://") || _show.Poster.StartsWith("https://"))
-            {
-                <img class="mud-elevation-2 mr-6"
-                     style="border-radius: 4px; flex-shrink: 0; max-height: 440px;"
-                     src="@_show.Poster" alt="movie poster"/>
-            }
-            else
-            {
-                <img class="mud-elevation-2 mr-6"
-                     style="border-radius: 4px; flex-shrink: 0; max-height: 440px;"
-                     src="@($"artwork/posters/{_show.Poster}")" alt="movie poster"/>
-            }
-        }
+<MudContainer MaxWidth="MaxWidth.Large" Style="margin-top: 100px">
+    <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Spacing="6">
+        <MudImage Src="@GetPosterUrl(_show.Poster)" Class="rounded-lg" Style="max-height: 325px" ObjectFit="ObjectFit.Contain" />
         <div style="display: flex; flex-direction: column; height: 100%">
-            <MudText Typo="Typo.h2" Class="media-item-title">@_show?.Title</MudText>
-            <MudText Typo="Typo.subtitle1" Class="media-item-subtitle mb-6 mud-text-secondary">@_show?.Year</MudText>
+            <MudStack Row="false">
+                <MudHidden Invert="true" Breakpoint="Breakpoint.SmAndDown">
+                    <MudText Typo="Typo.h4" Class="media-item-title">@_show?.Title</MudText>
+                </MudHidden>
+                <MudHidden Invert="true" Breakpoint="Breakpoint.MdAndUp">
+                    <MudText Typo="Typo.h2" Class="media-item-title">@_show?.Title</MudText>
+                </MudHidden>
+                <MudText Typo="Typo.subtitle1" Class="media-item-subtitle mb-6 mud-text-secondary">@_show?.Year</MudText>
+            </MudStack>
             @if (!string.IsNullOrWhiteSpace(_show?.Plot))
             {
                 <MudCard Elevation="2" Class="mb-6">
@@ -54,31 +47,29 @@
                     </MudCardContent>
                 </MudCard>
             }
-            <div>
+            <MudStack Row="true" Breakpoint="Breakpoint.SmAndDown" Class="mb-6">
                 <MudButton Variant="Variant.Filled"
                            Color="Color.Primary"
                            StartIcon="@Icons.Material.Filled.Add"
                            OnClick="@AddToCollection">
                     Add To Collection
                 </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
+                <MudButton Variant="Variant.Filled"
                            Color="Color.Primary"
                            StartIcon="@Icons.Material.Filled.PlaylistAdd"
                            OnClick="@AddToPlaylist">
                     Add To Playlist
                 </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
+                <MudButton Variant="Variant.Filled"
                            Color="Color.Primary"
                            StartIcon="@Icons.Material.Filled.Schedule"
                            OnClick="@AddToSchedule">
                     Add To Schedule
                 </MudButton>
-            </div>
+            </MudStack>
         </div>
-    </div>
-    <MudCard Class="mb-6">
+    </MudStack>
+    <MudCard Class="mt-6 mb-6">
         <MudCardContent>
             @if (_sortedContentRatings.Any())
             {
@@ -157,29 +148,27 @@
 </MudContainer>
 <MudContainer MaxWidth="MaxWidth.Large">
     <MudText Class="mb-4">Seasons</MudText>
-</MudContainer>
-<MudContainer MaxWidth="MaxWidth.Large" Class="media-card-grid">
-    @foreach (TelevisionSeasonCardViewModel card in _data.Cards)
+    <MudStack Row="true" Wrap="Wrap.Wrap">
+        @foreach (TelevisionSeasonCardViewModel card in _data.Cards)
+        {
+            <MediaCard Data="@card" Placeholder="@card.Placeholder"
+                       Href="@($"media/tv/seasons/{card.TelevisionSeasonId}")"
+                       AddToCollectionClicked="@AddSeasonToCollection"/>
+        }
+    </MudStack>
+    @if ((_show?.Actors?.Count ?? 0) > 0)
     {
-        <MediaCard Data="@card" Placeholder="@card.Placeholder"
-                   Href="@($"media/tv/seasons/{card.TelevisionSeasonId}")"
-                   AddToCollectionClicked="@AddSeasonToCollection"/>
+        <MudText Class="mb-4">Actors</MudText>
+        <MudStack Row="true" Wrap="Wrap.Wrap">
+            @foreach (ActorCardViewModel actor in _show.Actors)
+            {
+                <MediaCard Data="@actor"
+                           Href="@(@$"actor:""{actor.Name.ToLowerInvariant()}""".GetRelativeSearchQuery())"
+                           ArtworkKind="ArtworkKind.Thumbnail"/>
+            }
+        </MudStack>
     }
 </MudContainer>
-@if ((_show?.Actors?.Count ?? 0) > 0)
-{
-    <MudContainer MaxWidth="MaxWidth.Large">
-        <MudText Class="mb-4">Actors</MudText>
-    </MudContainer>
-    <MudContainer MaxWidth="MaxWidth.Large" Class="media-card-grid">
-        @foreach (ActorCardViewModel actor in _show.Actors)
-        {
-            <MediaCard Data="@actor"
-                       Href="@(@$"actor:""{actor.Name.ToLowerInvariant()}""".GetRelativeSearchQuery())"
-                       ArtworkKind="ArtworkKind.Thumbnail"/>
-        }
-    </MudContainer>
-}
 
 @code {
     private readonly CancellationTokenSource _cts = new();
@@ -195,8 +184,8 @@
     private List<string> _sortedGenres = [];
     private List<string> _sortedTags = [];
 
-    private int _pageSize => 100;
-    private readonly int _pageNumber = 1;
+    private static int PageSize => 100;
+    private const int PageNumber = 1;
 
     private TelevisionSeasonCardResultsViewModel _data = new(0, new List<TelevisionSeasonCardViewModel>(), null);
 
@@ -222,7 +211,7 @@
             _sortedNetworks = _show.Networks.OrderBy(n => n).ToList();
         }
 
-        _data = await Mediator.Send(new GetTelevisionSeasonCards(ShowId, _pageNumber, _pageSize), _cts.Token);
+        _data = await Mediator.Send(new GetTelevisionSeasonCards(ShowId, PageNumber, PageSize), _cts.Token);
     }
 
     private async Task AddToCollection()
@@ -232,7 +221,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+        if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
         {
             await Mediator.Send(new AddShowToCollection(collection.Id, ShowId), _cts.Token);
             NavigationManager.NavigateTo($"media/collections/{collection.Id}");
@@ -246,7 +235,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<AddToPlaylistDialog>("Add To Playlist", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is PlaylistViewModel playlist)
+        if (result is { Canceled: false, Data: PlaylistViewModel playlist })
         {
             await Mediator.Send(new AddShowToPlaylist(playlist.Id, ShowId), _cts.Token);
             NavigationManager.NavigateTo($"media/playlists/{playlist.Id}");
@@ -260,7 +249,7 @@
 
         IDialogReference dialog = await Dialog.ShowAsync<AddToScheduleDialog>("Add To Schedule", parameters, options);
         DialogResult result = await dialog.Result;
-        if (!result.Canceled && result.Data is ProgramScheduleViewModel schedule)
+        if (result is { Canceled: false, Data: ProgramScheduleViewModel schedule })
         {
             await Mediator.Send(new AddProgramScheduleItem(schedule.Id, StartType.Dynamic, null, null, PlayoutMode.One, ProgramScheduleItemCollectionType.TelevisionShow, null, null, null, ShowId, null, PlaybackOrder.Shuffle, FillWithGroupMode.None, null, null, TailMode.None, null, null, GuideMode.Normal, null, null, null, null, null, null, null, null, null, null), _cts.Token);
             NavigationManager.NavigateTo($"schedules/{schedule.Id}/items");
@@ -276,7 +265,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddSeasonToCollection(collection.Id, season.TelevisionSeasonId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, _cts.Token);
@@ -291,4 +280,9 @@
         }
     }
 
+    private static string GetPosterUrl(string poster)
+    {
+        return poster.StartsWith("http://") || poster.StartsWith("https://") ? poster : $"artwork/posters/{poster}";
+    }
+
 }
\ No newline at end of file
diff --git a/ErsatzTV/Pages/TelevisionShowList.razor b/ErsatzTV/Pages/TelevisionShowList.razor
index 7bbe1721a..c08242cff 100644
--- a/ErsatzTV/Pages/TelevisionShowList.razor
+++ b/ErsatzTV/Pages/TelevisionShowList.razor
@@ -9,67 +9,35 @@
 @using ErsatzTV.Extensions
 @implements IDisposable
 
-<MudPaper Square="true" Style="display: flex; height: 64px; width: 100%; z-index: 100;">
-    <div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
-        @if (IsSelectMode())
-        {
-            <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
-            <div style="margin-left: auto">
-                <MudButton Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.Add"
-                           OnClick="@(_ => AddSelectionToCollection())">
-                    Add To Collection
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Primary"
-                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
-                           OnClick="@(_ => AddSelectionToPlaylist())">
-                    Add To Playlist
-                </MudButton>
-                <MudButton Class="ml-3"
-                           Variant="Variant.Filled"
-                           Color="Color.Secondary"
-                           StartIcon="@Icons.Material.Filled.Check"
-                           OnClick="@(_ => ClearSelection())">
-                    Clear Selection
-                </MudButton>
-            </div>
-        }
-        else
-        {
-            <MudText Style="margin-bottom: auto; margin-top: auto; width: 33%">@_query</MudText>
-            <div style="max-width: 300px; width: 33%;">
-                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
-                                   OnClick="@PrevPage"
-                                   Disabled="@(PageNumber <= 1)">
-                    </MudIconButton>
-                    <MudText Style="flex-grow: 1"
-                             Align="Align.Center">
-                        @Math.Min((PageNumber - 1) * PageSize + 1, _data.Count)-@Math.Min(_data.Count, PageNumber * PageSize) of @_data.Count
-                    </MudText>
-                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
-                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= _data.Count)">
-                    </MudIconButton>
-                </MudPaper>
-            </div>
-        }
+<MudForm Style="max-height: 100%">
+    <MudPaper Square="true" Style="display: flex; height: 64px; min-height: 64px; width: 100%; z-index: 100;">
+        <MediaCardPager Query="@_query"
+                        PageNumber="@PageNumber"
+                        PageSize="@PageSize"
+                        TotalCount="@_data.Count"
+                        NextPage="@NextPage"
+                        PrevPage="@PrevPage"
+                        AddSelectionToCollection="@AddSelectionToCollection"
+                        AddSelectionToPlaylist="@AddSelectionToPlaylist"
+                        ClearSelection="@ClearSelection"
+                        IsSelectMode="@IsSelectMode"
+                        SelectionLabel="@SelectionLabel"/>
+    </MudPaper>
+    <div class="d-flex flex-column" style="height: 100vh; overflow-x: auto">
+        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8">
+            <MudStack Row="true" Wrap="Wrap.Wrap">
+                <FragmentLetterAnchor TCard="TelevisionShowCardViewModel" Cards="@_data.Cards">
+                    <MediaCard Data="@context"
+                               Href="@($"media/tv/shows/{context.TelevisionShowId}")"
+                               AddToCollectionClicked="@AddToCollection"
+                               SelectClicked="@(e => SelectClicked(context, e))"
+                               IsSelected="@IsSelected(context)"
+                               IsSelectMode="@IsSelectMode()"/>
+                </FragmentLetterAnchor>
+            </MudStack>
+        </MudContainer>
     </div>
-</MudPaper>
-<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pt-8" Style="margin-top: 64px">
-    <MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
-        <FragmentLetterAnchor TCard="TelevisionShowCardViewModel" Cards="@_data.Cards">
-            <MediaCard Data="@context"
-                       Href="@($"media/tv/shows/{context.TelevisionShowId}")"
-                       AddToCollectionClicked="@AddToCollection"
-                       SelectClicked="@(e => SelectClicked(context, e))"
-                       IsSelected="@IsSelected(context)"
-                       IsSelectMode="@IsSelectMode()"/>
-        </FragmentLetterAnchor>
-    </MudContainer>
-</MudContainer>
+</MudForm>
 @if (_data.PageMap is not null)
 {
     <LetterBar PageMap="@_data.PageMap"
@@ -174,7 +142,7 @@
 
             IDialogReference dialog = await Dialog.ShowAsync<AddToCollectionDialog>("Add To Collection", parameters, options);
             DialogResult result = await dialog.Result;
-            if (!result.Canceled && result.Data is MediaCollectionViewModel collection)
+            if (result is { Canceled: false, Data: MediaCollectionViewModel collection })
             {
                 var request = new AddShowToCollection(collection.Id, show.TelevisionShowId);
                 Either<BaseError, Unit> addResult = await Mediator.Send(request, CancellationToken);
diff --git a/ErsatzTV/Shared/MediaCardPager.razor b/ErsatzTV/Shared/MediaCardPager.razor
new file mode 100644
index 000000000..879f92047
--- /dev/null
+++ b/ErsatzTV/Shared/MediaCardPager.razor
@@ -0,0 +1,108 @@
+@using System.Globalization
+
+<div style="display: flex; flex-direction: row; margin-bottom: auto; margin-top: auto; width: 100%" class="ml-6 mr-6">
+    @if (IsSelectMode())
+    {
+        <div style="align-items: center; display: flex; width: 100%;">
+            <div style="flex: 1;">
+                <MudText Typo="Typo.h6" Color="Color.Primary">@SelectionLabel()</MudText>
+            </div>
+            <div style="margin-left: auto" class="d-none d-md-flex">
+                <MudButton Variant="Variant.Filled"
+                           Color="Color.Primary"
+                           StartIcon="@Icons.Material.Filled.Add"
+                           OnClick="@(_ => AddSelectionToCollection())">
+                    Add To Collection
+                </MudButton>
+                <MudButton Class="ml-3"
+                           Variant="Variant.Filled"
+                           Color="Color.Primary"
+                           StartIcon="@Icons.Material.Filled.PlaylistAdd"
+                           OnClick="@(_ => AddSelectionToPlaylist())">
+                    Add To Playlist
+                </MudButton>
+                <MudButton Class="ml-3"
+                           Variant="Variant.Filled"
+                           Color="Color.Secondary"
+                           StartIcon="@Icons.Material.Filled.Check"
+                           OnClick="@(_ => ClearSelection())">
+                    Clear Selection
+                </MudButton>
+            </div>
+            <div style="align-items: center; display: flex; margin-left: auto;" class="d-md-none">
+                <div class="flex-grow-1"></div>
+                <MudMenu Icon="@Icons.Material.Filled.MoreVert">
+                    <MudMenuItem Icon="@Icons.Material.Filled.Add" Label="Add To Collection" OnClick="@AddSelectionToCollection"/>
+                    <MudMenuItem Icon="@Icons.Material.Filled.PlaylistAdd" Label="Add To Playlist" OnClick="AddSelectionToPlaylist"/>
+                    <MudMenuItem Icon="@Icons.Material.Filled.Check" Label="Clear Selection" OnClick="ClearSelection"/>
+                </MudMenu>
+            </div>
+        </div>
+    }
+    else
+    {
+        <div style="align-items: center; display: flex; width: 100%">
+            <div style="flex: 1">
+                <MudText Class="d-none d-md-flex">@Query</MudText>
+            </div>
+            <div>
+                <MudPaper Style="align-items: center; display: flex; justify-content: center;">
+                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronLeft"
+                                   OnClick="@PrevPage"
+                                   Disabled="@(PageNumber <= 1)">
+                    </MudIconButton>
+                    <MudText Style="flex-grow: 1"
+                             Align="Align.Center">
+                        @PaddedString(Math.Min((PageNumber - 1) * PageSize + 1, TotalCount), TotalCount) - @PaddedString(Math.Min(TotalCount, PageNumber * PageSize), TotalCount) of @TotalCount
+                    </MudText>
+                    <MudIconButton Icon="@Icons.Material.Outlined.ChevronRight"
+                                   OnClick="@NextPage" Disabled="@(PageNumber * PageSize >= TotalCount)">
+                    </MudIconButton>
+                </MudPaper>
+            </div>
+            <div style="flex: 1"></div>
+        </div>
+    }
+</div>
+
+@code {
+
+    [Parameter]
+    public string Query { get; set; }
+
+    [Parameter]
+    public int PageNumber { get; set; }
+
+    [Parameter]
+    public int PageSize { get; set; }
+
+    [Parameter]
+    public int TotalCount { get; set; }
+
+    [Parameter]
+    public EventCallback PrevPage { get; set; }
+
+    [Parameter]
+    public EventCallback NextPage { get; set; }
+
+    [Parameter]
+    public Func<bool> IsSelectMode { get; set; }
+
+    [Parameter]
+    public Func<string> SelectionLabel { get; set; }
+
+    [Parameter]
+    public Func<Task> AddSelectionToCollection { get; set; }
+
+    [Parameter]
+    public Func<Task> AddSelectionToPlaylist { get; set; }
+
+    [Parameter]
+    public Action ClearSelection { get; set; }
+
+    private static MarkupString PaddedString(int value, int maximum)
+    {
+        int length = maximum.ToString(CultureInfo.InvariantCulture).Length;
+        return (MarkupString)value.ToString(CultureInfo.InvariantCulture).PadLeft(length, ' ').Replace(" ", "&nbsp;");
+    }
+}
\ No newline at end of file
diff --git a/ErsatzTV/wwwroot/css/site.css b/ErsatzTV/wwwroot/css/site.css
index 69f9e72ce..2c4671bd2 100644
--- a/ErsatzTV/wwwroot/css/site.css
+++ b/ErsatzTV/wwwroot/css/site.css
@@ -92,9 +92,8 @@
 }
 
 .fanart-container > .fanart-tint {
-    background: linear-gradient(360deg, black, transparent);
+    background: linear-gradient(rgba(39, 39, 39, 0.47) 0%, rgb(39, 39, 39) 100%);
     height: 400px;
-    opacity: 0.85;
     position: absolute;
     width: 100%;
     z-index: 1;