diff --git a/PlaylistShared.Pwa/App.razor b/PlaylistShared.Pwa/App.razor
index 34eb91e..fa132d9 100644
--- a/PlaylistShared.Pwa/App.razor
+++ b/PlaylistShared.Pwa/App.razor
@@ -1,4 +1,6 @@
-<CascadingAuthenticationState>
+@using PlaylistShared.Pwa.Components.Common
+
+<CascadingAuthenticationState>
     <Router AppAssembly="@typeof(App).Assembly" NotFoundPage="typeof(Pages.NotFound)" >
         <Found Context="routeData">
             <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
diff --git a/PlaylistShared.Pwa/Components/Common/RedirectToLogin.razor b/PlaylistShared.Pwa/Components/Common/RedirectToLogin.razor
new file mode 100644
index 0000000..b882a72
--- /dev/null
+++ b/PlaylistShared.Pwa/Components/Common/RedirectToLogin.razor
@@ -0,0 +1,8 @@
+@inject NavigationManager Navigation
+
+@code {
+    protected override void OnInitialized()
+    {
+        Navigation.NavigateTo("login");
+    }
+}
diff --git a/PlaylistShared.Pwa/wwwroot/index.html b/PlaylistShared.Pwa/wwwroot/index.html
index 73bbdd0..1595212 100644
--- a/PlaylistShared.Pwa/wwwroot/index.html
+++ b/PlaylistShared.Pwa/wwwroot/index.html
@@ -16,15 +16,134 @@
     <link rel="apple-touch-icon" sizes="512x512" href="icon-512.png" />
     <link rel="apple-touch-icon" sizes="192x192" href="icon-192.png" />
     <script type="importmap"></script>
+    <style>
+        :root {
+            --bg: #1a1a27;
+            --primary: #7e6fff;
+            --text: #92929f;
+        }
+
+        body {
+            background-color: var(--mud-palette-background, var(--bg));
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            overflow: hidden;
+            font-family: 'Roboto', sans-serif;
+        }
+
+        .loader-wrapper {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 50px;
+        }
+
+        .ripple-container {
+            position: relative;
+            width: 100px;
+            height: 100px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        /* Центральная нота с неоновым свечением */
+        .note-icon {
+            font-size: 50px;
+            color: var(--mud-palette-primary, var(--primary));
+            z-index: 10;
+            filter: drop-shadow(0 0 10px rgba(126, 111, 255, 0.5));
+            animation: note-float 0.6s ease-in-out infinite;
+        }
+
+        /* Эффект расходящихся волн (Sharing) */
+        .ripple {
+            position: absolute;
+            border: 2px solid var(--mud-palette-primary, var(--primary));
+            border-radius: 50%;
+            opacity: 0;
+            animation: ripple-out 0.9s cubic-bezier(0.23, 1, 0.32, 1) infinite;
+        }
+
+            .ripple:nth-child(2) {
+                animation-delay: 0s;
+            }
+
+            .ripple:nth-child(3) {
+                animation-delay: 0.3s;
+            }
+
+            .ripple:nth-child(4) {
+                animation-delay: 0.6s;
+            }
+
+        @keyframes ripple-out {
+            0% {
+                width: 40px;
+                height: 40px;
+                opacity: 0.8;
+                border-width: 4px;
+            }
+
+            100% {
+                width: 280px;
+                height: 280px;
+                opacity: 0;
+                border-width: 1px;
+            }
+        }
+
+        @keyframes note-float {
+            0%, 100% {
+                transform: translateY(0) scale(1);
+            }
+
+            50% {
+                transform: translateY(-15px) scale(1.1);
+            }
+        }
+
+        .share-text {
+            color: var(--mud-palette-text-secondary, var(--text));
+            text-transform: uppercase;
+            letter-spacing: 5px;
+            font-size: 0.75rem;
+            font-weight: 400;
+            animation: fade-text 0.8s infinite;
+        }
+
+        @keyframes fade-text {
+            0%, 100% {
+                opacity: 0.4;
+                transform: scale(0.95);
+            }
+
+            50% {
+                opacity: 1;
+                transform: scale(1);
+            }
+        }
+    </style>
 </head>
 
 <body>
     <div id="app">
-        <svg class="loading-progress">
-            <circle r="40%" cx="50%" cy="50%" />
-            <circle r="40%" cx="50%" cy="50%" />
-        </svg>
-        <div class="loading-progress-text"></div>
+        <div class="loader-wrapper">
+            <div class="ripple-container">
+                <div class="ripple"></div>
+                <div class="ripple"></div>
+                <div class="ripple"></div>
+                <div class="note-icon">
+                    <svg width="50" height="50" viewBox="0 0 24 24" fill="currentColor">
+                        <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z" "" ) />>
+                    </svg>
+                </div>
+            </div>
+            <div class="share-text">Playlist Share</div>
+        </div>
     </div>
 
     <div id="blazor-error-ui">