diff --git a/main/index.php b/main/index.php
index 7a7c72d..73f42b1 100644
--- a/main/index.php
+++ b/main/index.php
@@ -48,61 +48,187 @@ try {
     <meta charset="utf-8">
     <title>Text0Nly</title>
     <style>
-        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
-        .message { margin: 10px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
-        .username { font-weight: bold; color: #2196F3; }
-        .time { color: #666; font-size: 0.8em; }
-        .encrypted { color: #4CAF50; }
-        .signature { color: #FF9800; font-size: 0.8em; }
-        form { margin: 20px 0; }
-        textarea { width: 100%; height: 100px; margin: 10px 0; }
-        input[type="text"] { width: 200px; }
-        .register-link { position: fixed; top: 20px; right: 20px; }
-        .api-info { margin: 20px 0; padding: 10px; background: #f5f5f5; border-radius: 5px; }
+        body { 
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+            max-width: 800px; 
+            margin: 0 auto; 
+            padding: 20px;
+            background: #f5f5f5;
+            color: #333;
+        }
+        .container {
+            background: white;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 20px;
+        }
+        .message { 
+            margin: 10px 0; 
+            padding: 15px;
+            border: 1px solid #eee;
+            border-radius: 8px;
+            background: white;
+            transition: all 0.2s ease;
+        }
+        .message:hover {
+            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+        }
+        .username { 
+            font-weight: 600; 
+            color: #2196F3;
+            margin-right: 8px;
+        }
+        .time { 
+            color: #999; 
+            font-size: 0.8em;
+            float: right;
+        }
+        .encrypted { 
+            color: #4CAF50;
+            font-size: 0.9em;
+            margin-left: 8px;
+        }
+        .signature { 
+            color: #FF9800; 
+            font-size: 0.9em;
+            margin-top: 5px;
+            padding-top: 5px;
+            border-top: 1px solid #eee;
+        }
+        form { 
+            margin: 20px 0;
+            background: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        input[type="text"] { 
+            width: 100%;
+            padding: 10px;
+            margin: 5px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+        textarea { 
+            width: 100%; 
+            height: 100px; 
+            margin: 10px 0;
+            padding: 10px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            resize: vertical;
+            box-sizing: border-box;
+        }
+        button { 
+            background: #2196F3;
+            color: white;
+            border: none;
+            padding: 12px 24px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-weight: 600;
+            transition: background 0.2s ease;
+        }
+        button:hover {
+            background: #1976D2;
+        }
+        .register-link { 
+            position: fixed; 
+            top: 20px; 
+            right: 20px;
+            background: white;
+            padding: 8px 16px;
+            border-radius: 4px;
+            text-decoration: none;
+            color: #2196F3;
+            font-weight: 600;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            transition: all 0.2s ease;
+        }
+        .register-link:hover {
+            background: #2196F3;
+            color: white;
+        }
+        .api-info { 
+            margin: 20px 0; 
+            padding: 15px;
+            background: #f8f9fa;
+            border-radius: 8px;
+            border: 1px solid #eee;
+        }
+        .api-info pre {
+            background: #2d2d2d;
+            color: #fff;
+            padding: 15px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+        .checkbox-wrapper {
+            margin: 10px 0;
+            display: flex;
+            align-items: center;
+        }
+        .checkbox-wrapper input[type="checkbox"] {
+            margin-right: 8px;
+        }
+        .checkbox-wrapper label {
+            color: #666;
+        }
+        h1 {
+            color: #2196F3;
+            margin: 0 0 20px 0;
+        }
+        .clear {
+            clear: both;
+        }
     </style>
 </head>
 <body>
-    <div class="register-link">
-        <a href="register.php">Register</a>
-    </div>
-    
-    <h1>Text0Nly</h1>
-    
-    <div class="api-info">
-        <h3>Message API:</h3>
-        <pre>curl -X POST http://localhost/api.php -H "Content-Type: application/json" -d '{
+    <div class="container">
+        <div class="register-link">
+            <a href="register.php">Register</a>
+        </div>
+        
+        <h1>Text0Nly</h1>
+        
+        <div class="api-info">
+            <h3>Message API:</h3>
+            <pre>curl -X POST http://localhost/api.php -H "Content-Type: application/json" -d '{
     "username": "name",
     "message": "text",
     "signature": "pgp_signature",
     "encrypted": true
 }'</pre>
-    </div>
-    
-    <form method="post">
-        <input type="text" name="username" placeholder="Your username" required maxlength="50">
-        <textarea name="message" placeholder="Your message" required></textarea>
-        <textarea name="signature" placeholder="PGP signature (optional)"></textarea>
-        <div>
-            <input type="checkbox" name="encrypted" id="encrypted">
-            <label for="encrypted">Message is encrypted</label>
         </div>
-        <button type="submit">Send</button>
-    </form>
-
-    <div id="messages">
-        <?php foreach ($messages as $msg): ?>
-            <div class="message">
-                <span class="username"><?= htmlspecialchars($msg['username']) ?>:</span>
-                <div><?= nl2br(htmlspecialchars($msg['message'])) ?></div>
-                <?php if ($msg['is_encrypted']): ?>
-                    <span class="encrypted">[Encrypted]</span>
-                <?php endif; ?>
-                <?php if ($msg['signature']): ?>
-                    <div class="signature">Signature: <?= htmlspecialchars($msg['signature']) ?></div>
-                <?php endif; ?>
-                <span class="time"><?= $msg['created_at'] ?></span>
+        
+        <form method="post">
+            <input type="text" name="username" placeholder="Your username" required maxlength="50">
+            <textarea name="message" placeholder="Your message" required></textarea>
+            <textarea name="signature" placeholder="PGP signature (optional)"></textarea>
+            <div class="checkbox-wrapper">
+                <input type="checkbox" name="encrypted" id="encrypted">
+                <label for="encrypted">Message is encrypted</label>
             </div>
-        <?php endforeach; ?>
+            <button type="submit">Send Message</button>
+        </form>
+
+        <div id="messages">
+            <?php foreach ($messages as $msg): ?>
+                <div class="message">
+                    <span class="username"><?= htmlspecialchars($msg['username']) ?></span>
+                    <?php if ($msg['is_encrypted']): ?>
+                        <span class="encrypted">[Encrypted]</span>
+                    <?php endif; ?>
+                    <span class="time"><?= $msg['created_at'] ?></span>
+                    <div class="clear"></div>
+                    <div class="message-content"><?= nl2br(htmlspecialchars($msg['message'])) ?></div>
+                    <?php if ($msg['signature']): ?>
+                        <div class="signature">Signature: <?= htmlspecialchars($msg['signature']) ?></div>
+                    <?php endif; ?>
+                </div>
+            <?php endforeach; ?>
+        </div>
     </div>
 
     <script>