diff --git a/ErsatzTV/Shared/MediaCard.razor b/ErsatzTV/Shared/MediaCard.razor
index 1cc736e26..6871b4e18 100644
--- a/ErsatzTV/Shared/MediaCard.razor
+++ b/ErsatzTV/Shared/MediaCard.razor
@@ -1,21 +1,13 @@
-<div style="width: 152px" class="mx-3 pb-3">
-    <MudPaper Style="display: flex; flex-direction: column; height: 220px; justify-content: center; width: 152px;">
-        <MudText Align="Align.Center"
-                 Typo="Typo.h1"
-                 Style="font-weight: bold"
-                 Class="mud-text-disabled">
+<div class="media-card-container mx-3 pb-3">
+    <MudPaper Class="media-card">
+        <MudText Align="Align.Center" Typo="Typo.h1" Class="media-card-poster-placeholder mud-text-disabled">
             @Data.SortTitle.Substring(0, 1)
         </MudText>
     </MudPaper>
-    <MudText Align="Align.Center"
-             UserAttributes="@(new Dictionary<string, object> { { "title", Data.Title } })"
-             Style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%;">
+    <MudText Align="Align.Center" Class="media-card-title" UserAttributes="@(new Dictionary<string, object> { { "title", Data.Title } })">
         @Data.Title
     </MudText>
-    <MudText Typo="Typo.body2"
-             Align="Align.Center"
-             Style="text-overflow: ellipsis"
-             Class="mud-text-secondary">
+    <MudText Typo="Typo.body2" Align="Align.Center" Class="mud-text-secondary">
         @Data.Subtitle
     </MudText>
 </div>
diff --git a/ErsatzTV/Shared/MediaItemsGrid.razor b/ErsatzTV/Shared/MediaItemsGrid.razor
index c8f3d90a9..f52b68a3c 100644
--- a/ErsatzTV/Shared/MediaItemsGrid.razor
+++ b/ErsatzTV/Shared/MediaItemsGrid.razor
@@ -2,7 +2,7 @@
 @using ErsatzTV.Application.MediaItems.Queries
 @inject IMediator Mediator
 
-<MudContainer MaxWidth="MaxWidth.False" Style="display: flex; flex-direction: row; flex-wrap: wrap">
+<MudContainer MaxWidth="MaxWidth.False" Class="media-card-grid">
     @foreach (AggregateMediaItemViewModel item in _data.OrderBy(i => i.SortTitle))
     {
         <MediaCard Data="@item"/>
diff --git a/ErsatzTV/wwwroot/css/site.css b/ErsatzTV/wwwroot/css/site.css
index 5f282702b..e91d6bf70 100644
--- a/ErsatzTV/wwwroot/css/site.css
+++ b/ErsatzTV/wwwroot/css/site.css
@@ -1 +1,28 @@
-
\ No newline at end of file
+.media-card-grid {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.media-card-container {
+    width: 152px;
+}
+
+.media-card {
+    display: flex;
+    flex-direction: column;
+    height: 220px;
+    justify-content: center;
+    width: 152px;
+}
+
+.media-card-title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+}
+
+.media-card-poster-placeholder {
+    font-weight: bold;
+}
\ No newline at end of file