diff --git a/TuneRipper/Layout/MainLayout.razor.css b/TuneRipper/Layout/MainLayout.razor.css
index c18a330..5f5e7f7 100644
--- a/TuneRipper/Layout/MainLayout.razor.css
+++ b/TuneRipper/Layout/MainLayout.razor.css
@@ -79,7 +79,7 @@ main {
 .main-container {
     min-height: 100vh;
     width: 100%;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e88e5 100%);
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/TuneRipper/Pages/Home.razor.css b/TuneRipper/Pages/Home.razor.css
index 01f27fa..1f71edd 100644
--- a/TuneRipper/Pages/Home.razor.css
+++ b/TuneRipper/Pages/Home.razor.css
@@ -27,7 +27,7 @@
     font-weight: 700;
     color: #2d3748;
     margin: 0 0 10px 0;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e88e5 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
@@ -64,8 +64,8 @@
 
 .url-input:focus {
     outline: none;
-    border-color: #667eea;
-    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+    border-color: #1e88e5;
+    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.1);
     transform: translateY(-1px);
 }
 
@@ -77,13 +77,13 @@
     padding: 18px 32px;
     font-size: 1.1rem;
     font-weight: 600;
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e88e5 100%);
     color: white;
     border: none;
     border-radius: 12px;
     cursor: pointer;
     transition: all 0.3s ease;
-    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+    box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -92,7 +92,7 @@
 
 .download-btn:hover:not(:disabled) {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+    box-shadow: 0 6px 20px rgba(30, 136, 229, 0.4);
 }
 
 .download-btn:disabled {
diff --git a/TuneRipper/wwwroot/index.html b/TuneRipper/wwwroot/index.html
index c23fb85..f473fac 100644
--- a/TuneRipper/wwwroot/index.html
+++ b/TuneRipper/wwwroot/index.html
@@ -22,7 +22,7 @@
     <style>
         /* Custom WASM Loader Styles */
         #app {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e88e5 100%);
             min-height: 100vh;
             display: flex;
             align-items: center;
@@ -67,7 +67,7 @@
             left: -2px;
             right: -2px;
             bottom: -2px;
-            background: linear-gradient(45deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
+            background: linear-gradient(45deg, #00bcd4, #4fc3f7, #29b6f6, #03a9f4);
             border-radius: 22px;
             z-index: -1;
             animation: border-glow 3s ease-in-out infinite;
@@ -77,7 +77,7 @@
             font-size: 2.5rem;
             font-weight: 700;
             margin-bottom: 10px;
-            background: linear-gradient(45deg, #fff, #f0f8ff);
+            background: linear-gradient(45deg, #fff, #e1f5fe);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
@@ -105,7 +105,7 @@
 
         .progress-bar {
             height: 100%;
-            background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
+            background: linear-gradient(90deg, #00bcd4, #4fc3f7, #29b6f6, #03a9f4);
             background-size: 300% 100%;
             border-radius: 10px;
             width: 0%;