diff --git a/Moonlight/Shared/Layouts/MainLayout.razor b/Moonlight/Shared/Layouts/MainLayout.razor
index 85bfe816..a12f0096 100644
--- a/Moonlight/Shared/Layouts/MainLayout.razor
+++ b/Moonlight/Shared/Layouts/MainLayout.razor
@@ -58,7 +58,7 @@
                 <Sidebar></Sidebar>
                 <div class="app-main flex-column flex-row-fluid" id="kt_app_main">
                     <div class="d-flex flex-column flex-column-fluid">
-                        <div id="kt_app_content" class="app-content flex-column-fluid" style="background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-image: url('@(DynamicBackgroundService.BackgroundImageUrl)')">
+                        <div id="kt_app_content" class="app-content flex-column-fluid" style="background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-image: linear-gradient(rgba(0, 0, 0, 0.55),rgba(0, 0, 0, 0.55)) ,url('@(DynamicBackgroundService.BackgroundImageUrl)');">
                             <div id="kt_app_content_container" class="app-container container-fluid">
                                 <div class="mt-10">
                                     <SoftErrorBoundary>