diff --git a/static/main.css b/static/main.css
index 8d2aea6..f238c6b 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1,13 +1,13 @@
 * { box-sizing: border-box; }
 
 body { 
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; 
     margin: 0; 
     padding: 0; 
     line-height: 1.6; 
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: #f8fafc;
     min-height: 100vh;
-    color: #333;
+    color: #1e293b;
 }
 
 .container { 
@@ -43,74 +43,74 @@ body {
 }
 
 h1 { 
-    color: #2c3e50; 
+    color: #0f172a; 
     font-size: 2.5rem; 
-    margin-bottom: 10px;
-    background: linear-gradient(135deg, #667eea, #764ba2);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
+    margin-bottom: 20px;
+    font-weight: 700;
+    letter-spacing: -0.025em;
 }
 
 h2 { 
-    color: #34495e; 
-    font-size: 1.8rem; 
+    color: #1e293b; 
+    font-size: 1.75rem; 
     margin-top: 2rem;
-    border-bottom: 2px solid #eee;
-    padding-bottom: 10px;
+    font-weight: 600;
+    margin-bottom: 1rem;
 }
 
 .version-badge {
     display: inline-block;
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #3b82f6;
     color: white;
-    padding: 5px 15px;
-    border-radius: 20px;
+    padding: 6px 16px;
+    border-radius: 6px;
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
     margin-bottom: 20px;
 }
 
 code { 
-    background: #f8f9fa; 
-    padding: 3px 8px; 
+    background: #f1f5f9; 
+    padding: 4px 8px; 
     border-radius: 6px; 
-    font-family: 'Monaco', 'Consolas', 'JetBrains Mono', monospace;
-    font-size: 14px;
-    border: 1px solid #e9ecef;
+    font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Roboto Mono', monospace;
+    font-size: 13px;
+    border: 1px solid #e2e8f0;
+    color: #475569;
 }
 
 pre { 
-    background: #282c34; 
-    color: #abb2bf;
-    padding: 20px; 
+    background: #0f172a; 
+    color: #cbd5e1;
+    padding: 24px; 
     border-radius: 12px; 
     overflow-x: auto;
-    font-family: 'Monaco', 'Consolas', 'JetBrains Mono', monospace;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    border: 1px solid #3e4451;
+    font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Roboto Mono', monospace;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    border: 1px solid #1e293b;
 }
 
 pre code {
     background: transparent;
     border: none;
     padding: 0;
-    color: #abb2bf;
+    color: #cbd5e1;
 }
 
 .endpoint { 
-    margin: 25px 0; 
-    padding: 20px; 
+    margin: 20px 0; 
+    padding: 24px; 
     border-radius: 12px;
-    background: #fff;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-    border-left: 4px solid #007acc;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    background: #f8fafc;
+    box-shadow: none;
+    border: 1px solid #e2e8f0;
+    border-left: 4px solid #3b82f6;
+    transition: all 0.15s ease;
 }
 
 .endpoint:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
+    background: #ffffff;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 .method { 
@@ -125,66 +125,70 @@ pre code {
     letter-spacing: 0.5px;
 }
 
-.get { background: linear-gradient(135deg, #61affe, #4a90e2); }
-.post { background: linear-gradient(135deg, #49cc90, #2ecc71); }
+.get { background: #3b82f6; }
+.post { background: #10b981; }
 
 .step { 
-    margin: 15px 0; 
-    padding: 15px 20px; 
-    background: #fff;
-    border-radius: 10px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
-    border-left: 4px solid #3498db;
-    transition: transform 0.2s ease;
+    margin: 16px 0; 
+    padding: 20px 24px; 
+    background: #f8fafc;
+    border-radius: 12px;
+    box-shadow: none;
+    border: 1px solid #e2e8f0;
+    border-left: 4px solid #6366f1;
+    transition: all 0.15s ease;
 }
 
 .step:hover {
-    transform: translateX(5px);
+    background: #ffffff;
+    border-color: #cbd5e1;
 }
 
 .storage-info { 
-    margin: 25px 0; 
-    padding: 20px; 
-    background: #fff;
+    margin: 20px 0; 
+    padding: 24px; 
+    background: #f0fdf4;
     border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-    border-left: 4px solid #28a745;
+    box-shadow: none;
+    border: 1px solid #dcfce7;
+    border-left: 4px solid #22c55e;
 }
 
 .progress-bar { 
     width: 100%; 
-    height: 12px; 
-    background: #e9ecef; 
-    border-radius: 8px; 
+    height: 10px; 
+    background: #e2e8f0; 
+    border-radius: 6px; 
     overflow: hidden; 
-    margin: 15px 0;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+    margin: 16px 0;
+    box-shadow: none;
 }
 
 .progress-fill { 
     height: 100%; 
-    background: linear-gradient(90deg, #28a745 0%, #ffc107 70%, #dc3545 90%); 
+    background: linear-gradient(90deg, #22c55e 0%, #f59e0b 70%, #ef4444 90%); 
     transition: width 0.5s ease; 
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
+    border-radius: 6px;
+    box-shadow: none;
 }
 
 .storage-stats { 
     display: flex; 
     justify-content: space-between; 
     align-items: center; 
-    margin-top: 15px; 
+    margin-top: 16px; 
     font-size: 14px;
-    font-weight: 600;
+    font-weight: 500;
+    color: #475569;
 }
 
 .changelog-section { 
-    padding: 25px; 
-    background: rgba(255, 255, 255, 0.95);
+    padding: 24px; 
+    background: #ffffff;
     border-radius: 12px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-    border-left: 4px solid #6f42c1;
-    backdrop-filter: blur(10px);
+    box-shadow: none;
+    border: 1px solid #e2e8f0;
+    border-left: 4px solid #8b5cf6;
 }
 
 /* Remove redundant changelog wrapper styles */
@@ -194,22 +198,22 @@ pre code {
 }
 
 .changelog-entry { 
-    margin: 20px 0; 
-    padding: 15px; 
-    background: #f8f9fa;
-    border-radius: 10px;
-    border: 1px solid #e9ecef;
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+    margin: 16px 0; 
+    padding: 20px; 
+    background: #f8fafc;
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    transition: all 0.15s ease;
 }
 
 .changelog-entry:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+    background: #ffffff;
+    border-color: #cbd5e1;
 }
 
 .version { 
-    font-weight: 700; 
-    color: #6f42c1;
+    font-weight: 600; 
+    color: #8b5cf6;
     font-size: 16px;
     display: flex;
     align-items: center;
@@ -222,10 +226,10 @@ pre code {
 }
 
 .date { 
-    color: #6c757d; 
+    color: #64748b; 
     font-size: 13px;
     margin-top: 5px;
-    font-weight: 500;
+    font-weight: 400;
 }
 
 .changelog-entry ul {
@@ -235,26 +239,26 @@ pre code {
 
 .changelog-entry li {
     margin: 5px 0;
-    color: #495057;
+    color: #475569;
 }
 
 .copy-btn {
-    background: linear-gradient(135deg, #667eea, #764ba2);
+    background: #3b82f6;
     color: white;
     border: none;
-    padding: 8px 12px;
-    border-radius: 6px;
+    padding: 8px 14px;
+    border-radius: 8px;
     cursor: pointer;
     font-size: 12px;
-    font-weight: 600;
-    transition: all 0.2s ease;
+    font-weight: 500;
+    transition: all 0.15s ease;
     float: right;
     margin-top: -10px;
 }
 
 .copy-btn:hover {
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
+    background: #2563eb;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
 }
 
 /* About section styling */
@@ -263,11 +267,10 @@ pre code {
 }
 
 .about-content h3 {
-    color: #34495e;
-    font-size: 1.3rem;
+    color: #1e293b;
+    font-size: 1.25rem;
     margin: 1.5rem 0 0.8rem 0;
-    border-bottom: 2px solid #eee;
-    padding-bottom: 8px;
+    font-weight: 600;
 }
 
 .about-content ul {
@@ -276,30 +279,32 @@ pre code {
 }
 
 .about-content li {
-    background: #f8f9fa;
+    background: #f8fafc;
     margin: 8px 0;
-    padding: 12px 16px;
-    border-radius: 8px;
-    border-left: 4px solid #667eea;
-    transition: transform 0.2s ease;
+    padding: 14px 18px;
+    border-radius: 10px;
+    border: 1px solid #e2e8f0;
+    border-left: 4px solid #3b82f6;
+    transition: all 0.15s ease;
 }
 
 .about-content li:hover {
-    transform: translateX(5px);
-    background: #e9ecef;
+    background: #ffffff;
+    border-color: #cbd5e1;
 }
 
 .contact-info {
-    background: #fff;
-    padding: 15px;
-    border-radius: 10px;
-    border: 2px solid #667eea;
-    margin: 15px 0;
+    background: #ffffff;
+    padding: 18px;
+    border-radius: 12px;
+    border: 1px solid #3b82f6;
+    margin: 16px 0;
 }
 
 .contact-info p {
-    margin: 5px 0;
-    font-family: 'Monaco', 'Consolas', 'JetBrains Mono', monospace;
+    margin: 6px 0;
+    font-family: ui-monospace, SFMono-Regular, 'Cascadia Code', 'Roboto Mono', monospace;
+    color: #475569;
 }
 
 /* Responsive design */
@@ -411,20 +416,20 @@ pre code {
 
 /* Content containers with equal height and scrolling */
 .content-container {
-    background: rgba(255, 255, 255, 0.95);
-    border-radius: 20px;
-    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
-    padding: 30px;
-    backdrop-filter: blur(10px);
+    background: #ffffff;
+    border-radius: 16px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+    padding: 32px;
     box-sizing: border-box;
     overflow-y: auto;
     scrollbar-width: thin;
-    scrollbar-color: rgba(102, 126, 234, 0.3) transparent;
+    scrollbar-color: #cbd5e1 transparent;
+    border: 1px solid #e2e8f0;
 }
 
 /* Webkit scrollbar styling */
 .content-container::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
 }
 
 .content-container::-webkit-scrollbar-track {
@@ -432,12 +437,12 @@ pre code {
 }
 
 .content-container::-webkit-scrollbar-thumb {
-    background: rgba(102, 126, 234, 0.3);
-    border-radius: 4px;
+    background: #cbd5e1;
+    border-radius: 3px;
 }
 
 .content-container::-webkit-scrollbar-thumb:hover {
-    background: rgba(102, 126, 234, 0.5);
+    background: #94a3b8;
 }
 
 .progress-fill-initial {
diff --git a/views/index.html b/views/index.html
index c34f459..e9ece7f 100644
--- a/views/index.html
+++ b/views/index.html
@@ -17,7 +17,7 @@
     <div class="content-container">
         <h2>ℹ️ About</h2>
         <div class="about-content">
-            <h3>🚀 What is FITRA?</h3>
+            <h3>What is FITRA?</h3>
             <p>FITRA (File Transfer API) is a lightweight, developer-friendly file sharing service designed for CLI usage and automation.</p>
             
             <h3>🌟 Features</h3>