diff --git a/src/index.css b/src/index.css
index 335fc5a..98cd6ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -6,9 +6,9 @@
 
 body {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: #f8f9fc;
   min-height: 100vh;
-  color: #333;
+  color: #1a1a1a;
 }
 
 .app {
@@ -19,44 +19,48 @@ body {
 
 .header {
   text-align: center;
-  color: white;
-  margin-bottom: 40px;
-  padding: 40px 20px 20px;
+  color: #1a1a1a;
+  margin-bottom: 48px;
+  padding: 48px 20px 24px;
+  background: white;
+  border-bottom: 1px solid #e8eaf0;
 }
 
 .header-content h1 {
   font-size: 3rem;
-  margin-bottom: 8px;
-  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+  margin-bottom: 12px;
   font-weight: 700;
+  color: #1a1a1a;
+  letter-spacing: -0.02em;
 }
 
 .tagline {
-  font-size: 1.1rem;
-  opacity: 0.95;
-  margin-bottom: 20px;
+  font-size: 1.15rem;
+  color: #6c757d;
+  margin-bottom: 24px;
+  font-weight: 400;
 }
 
 .header-links {
   display: flex;
-  gap: 16px;
+  gap: 20px;
   justify-content: center;
   margin-top: 20px;
 }
 
 .header-links a {
-  color: white;
+  color: #5568d3;
   text-decoration: none;
   font-size: 0.95rem;
-  opacity: 0.9;
-  transition: opacity 0.2s;
+  transition: color 0.2s;
   display: inline-flex;
   align-items: center;
   gap: 6px;
+  font-weight: 500;
 }
 
 .header-links a:hover {
-  opacity: 1;
+  color: #667eea;
 }
 
 .github-icon {
@@ -71,9 +75,10 @@ body {
 
 .step-container {
   background: white;
-  border-radius: 16px;
+  border-radius: 12px;
   padding: 48px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid #e8eaf0;
   animation: fadeIn 0.3s ease-out;
 }
 
@@ -89,11 +94,12 @@ body {
 }
 
 .step-container h2 {
-  color: #667eea;
+  color: #1a1a1a;
   margin-bottom: 32px;
   font-size: 1.8rem;
   text-align: center;
-  font-weight: 600;
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 
 .button-grid {
@@ -108,10 +114,10 @@ body {
 }
 
 .action-button {
-  background: white;
-  border: 3px solid #e0e0e0;
+  background: #fafbfc;
+  border: 2px solid #e8eaf0;
   padding: 32px 24px;
-  border-radius: 12px;
+  border-radius: 10px;
   cursor: pointer;
   transition: all 0.2s;
   text-align: left;
@@ -121,22 +127,22 @@ body {
 }
 
 .action-button:hover {
-  border-color: #667eea;
-  background: #f8f9ff;
-  transform: translateY(-4px);
-  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.2);
+  border-color: #5568d3;
+  background: white;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(85, 104, 211, 0.12);
 }
 
 .button-title {
   font-size: 1.4rem;
   font-weight: 700;
-  color: #333;
+  color: #1a1a1a;
 }
 
 .button-description {
   font-size: 0.95rem;
   color: #6c757d;
-  line-height: 1.4;
+  line-height: 1.5;
 }
 
 .form-container {
@@ -151,7 +157,7 @@ body {
 .form-group label {
   display: block;
   font-weight: 600;
-  color: #333;
+  color: #1a1a1a;
   margin-bottom: 8px;
   font-size: 0.95rem;
 }
@@ -159,16 +165,17 @@ body {
 input[type="text"] {
   width: 100%;
   padding: 12px 16px;
-  border: 2px solid #e0e0e0;
+  border: 2px solid #e8eaf0;
   border-radius: 8px;
   font-size: 1rem;
   transition: all 0.2s;
+  background: white;
 }
 
 input[type="text"]:focus {
   outline: none;
-  border-color: #667eea;
-  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+  border-color: #5568d3;
+  box-shadow: 0 0 0 3px rgba(85, 104, 211, 0.08);
 }
 
 input[type="text"]:disabled {
@@ -184,9 +191,9 @@ input[type="text"]:disabled {
 }
 
 .topic-item {
-  background: #f8f9fa;
-  color: #333;
-  border: 2px solid #e0e0e0;
+  background: white;
+  color: #1a1a1a;
+  border: 2px solid #e8eaf0;
   padding: 8px 12px;
   border-radius: 6px;
   font-size: 0.9rem;
@@ -197,15 +204,15 @@ input[type="text"]:disabled {
 }
 
 .topic-item:hover {
-  border-color: #667eea;
-  background: #f0f2ff;
+  border-color: #5568d3;
+  background: #fafbfc;
   transform: none;
   box-shadow: none;
 }
 
 .topic-item .peer-count {
   background: transparent;
-  color: #667eea;
+  color: #5568d3;
   padding: 0;
   font-weight: 600;
   font-size: 0.85rem;
@@ -230,14 +237,14 @@ input[type="text"]:disabled {
 }
 
 .back-button:hover {
-  color: #667eea;
+  color: #5568d3;
   background: transparent;
   transform: none;
   box-shadow: none;
 }
 
 .primary-button {
-  background: #667eea;
+  background: #5568d3;
   color: white;
   border: none;
   padding: 12px 32px;
@@ -250,22 +257,23 @@ input[type="text"]:disabled {
 }
 
 .primary-button:hover:not(:disabled) {
-  background: #5568d3;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  background: #4556be;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(85, 104, 211, 0.25);
 }
 
 .primary-button:disabled {
-  background: #ccc;
+  background: #d1d5db;
   cursor: not-allowed;
   transform: none;
 }
 
 .chat-container {
   background: white;
-  border-radius: 16px;
+  border-radius: 12px;
   padding: 32px;
-  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid #e8eaf0;
   animation: fadeIn 0.3s ease-out;
   max-width: 700px;
   margin: 0 auto;
@@ -277,14 +285,15 @@ input[type="text"]:disabled {
   align-items: flex-start;
   margin-bottom: 24px;
   padding-bottom: 20px;
-  border-bottom: 2px solid #f0f0f0;
+  border-bottom: 1px solid #e8eaf0;
 }
 
 .chat-header h2 {
-  color: #667eea;
+  color: #1a1a1a;
   font-size: 1.6rem;
   margin-bottom: 8px;
-  font-weight: 600;
+  font-weight: 700;
+  letter-spacing: -0.01em;
 }
 
 .connection-details {
@@ -312,13 +321,14 @@ input[type="text"]:disabled {
 }
 
 .messages {
-  background: #f8f9fa;
+  background: #fafbfc;
   border-radius: 12px;
   padding: 20px;
   min-height: 400px;
   max-height: 400px;
   overflow-y: auto;
   margin-bottom: 20px;
+  border: 1px solid #e8eaf0;
 }
 
 .messages::-webkit-scrollbar {
@@ -326,12 +336,12 @@ input[type="text"]:disabled {
 }
 
 .messages::-webkit-scrollbar-track {
-  background: #e0e0e0;
+  background: #e8eaf0;
   border-radius: 4px;
 }
 
 .messages::-webkit-scrollbar-thumb {
-  background: #667eea;
+  background: #5568d3;
   border-radius: 4px;
 }
 
@@ -367,7 +377,7 @@ input[type="text"]:disabled {
 }
 
 .message.sent .message-text {
-  background: #667eea;
+  background: #5568d3;
   color: white;
   margin-left: auto;
   border-bottom-right-radius: 4px;
@@ -375,8 +385,8 @@ input[type="text"]:disabled {
 
 .message.received .message-text {
   background: white;
-  color: #333;
-  border: 2px solid #e0e0e0;
+  color: #1a1a1a;
+  border: 2px solid #e8eaf0;
   border-bottom-left-radius: 4px;
 }
 
@@ -404,7 +414,7 @@ input[type="text"]:disabled {
 .message-input button {
   margin: 0;
   padding: 12px 24px;
-  background: #667eea;
+  background: #5568d3;
   color: white;
   border: none;
   border-radius: 8px;
@@ -419,13 +429,13 @@ input[type="text"]:disabled {
 }
 
 .message-input button:hover:not(:disabled) {
-  background: #5568d3;
+  background: #4556be;
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+  box-shadow: 0 4px 12px rgba(85, 104, 211, 0.25);
 }
 
 .message-input button:disabled {
-  background: #ccc;
+  background: #d1d5db;
   cursor: not-allowed;
   transform: none;
 }
@@ -447,8 +457,8 @@ input[type="text"]:disabled {
 }
 
 .message.received .message-file {
-  background: #f8f9fa;
-  border: 2px solid #e0e0e0;
+  background: white;
+  border: 2px solid #e8eaf0;
 }
 
 .file-icon {
@@ -474,7 +484,7 @@ input[type="text"]:disabled {
 }
 
 .message.received .file-name {
-  color: #333;
+  color: #1a1a1a;
 }
 
 .file-size {
@@ -495,7 +505,7 @@ input[type="text"]:disabled {
   padding: 6px 12px;
   font-size: 0.85rem;
   background: rgba(255, 255, 255, 0.9);
-  color: #667eea;
+  color: #5568d3;
   border: none;
   border-radius: 6px;
   font-weight: 600;
@@ -515,8 +525,8 @@ input[type="text"]:disabled {
 }
 
 .file-upload-progress {
-  background: #f8f9fa;
-  border: 2px solid #667eea;
+  background: white;
+  border: 2px solid #5568d3;
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 16px;
@@ -531,7 +541,7 @@ input[type="text"]:disabled {
 
 .file-upload-name {
   font-weight: 600;
-  color: #333;
+  color: #1a1a1a;
   font-size: 0.9rem;
 }
 
@@ -558,7 +568,7 @@ input[type="text"]:disabled {
 }
 
 .progress-bar {
-  background: #e0e0e0;
+  background: #e8eaf0;
   border-radius: 8px;
   height: 24px;
   overflow: hidden;
@@ -566,7 +576,7 @@ input[type="text"]:disabled {
 }
 
 .progress-bar-fill {
-  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+  background: #5568d3;
   height: 100%;
   transition: width 0.3s ease;
   display: flex;
@@ -584,14 +594,14 @@ input[type="text"]:disabled {
 
 .logs {
   margin-top: 24px;
-  border-top: 2px solid #f0f0f0;
+  border-top: 1px solid #e8eaf0;
   padding-top: 20px;
 }
 
 .logs summary {
   cursor: pointer;
   font-weight: 600;
-  color: #667eea;
+  color: #5568d3;
   font-size: 0.95rem;
   margin-bottom: 12px;
 }
@@ -629,14 +639,14 @@ input[type="text"]:disabled {
   position: fixed;
   bottom: 20px;
   right: 20px;
-  background: rgba(255, 255, 255, 0.95);
-  color: #667eea;
+  background: white;
+  color: #5568d3;
   padding: 10px 16px;
   border-radius: 8px;
   font-size: 0.85rem;
   font-weight: 600;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(10px);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
+  border: 1px solid #e8eaf0;
 }
 
 .scanner-container {
@@ -658,14 +668,15 @@ input[type="text"]:disabled {
 .qr-code-container {
   text-align: center;
   padding: 24px;
-  background: #f8f9fa;
+  background: #fafbfc;
   border-radius: 12px;
   margin-bottom: 20px;
+  border: 1px solid #e8eaf0;
 }
 
 .qr-label {
   font-size: 0.95rem;
-  color: #667eea;
+  color: #5568d3;
   font-weight: 600;
   margin-bottom: 12px;
 }
@@ -676,36 +687,38 @@ input[type="text"]:disabled {
   border-radius: 8px;
   background: white;
   padding: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  border: 1px solid #e8eaf0;
 }
 
 .connection-id-display {
   font-family: 'Courier New', monospace;
   font-size: 0.9rem;
-  color: #333;
+  color: #1a1a1a;
   background: white;
   padding: 8px 16px;
   border-radius: 6px;
   display: inline-block;
   font-weight: 600;
+  border: 1px solid #e8eaf0;
 }
 
 .footer {
   text-align: center;
   padding: 40px 20px 30px;
   margin-top: 40px;
+  border-top: 1px solid #e8eaf0;
 }
 
 .footer a {
-  color: white;
+  color: #6c757d;
   text-decoration: none;
   font-size: 0.9rem;
-  opacity: 0.8;
-  transition: opacity 0.2s;
+  transition: color 0.2s;
 }
 
 .footer a:hover {
-  opacity: 1;
+  color: #5568d3;
 }
 
 @media (max-width: 768px) {