diff --git a/main/index.php b/main/index.php
index 73f42b1..994933b 100644
--- a/main/index.php
+++ b/main/index.php
@@ -55,12 +55,24 @@ try {
             padding: 20px;
             background: #f5f5f5;
             color: #333;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
         }
         .container {
             background: white;
             border-radius: 8px;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             padding: 20px;
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+        .messages-container {
+            flex: 1;
+            overflow-y: auto;
+            margin-bottom: 20px;
+            padding-right: 10px;
         }
         .message { 
             margin: 10px 0; 
@@ -95,8 +107,7 @@ try {
             padding-top: 5px;
             border-top: 1px solid #eee;
         }
-        form { 
-            margin: 20px 0;
+        .form-container {
             background: white;
             padding: 20px;
             border-radius: 8px;
@@ -133,10 +144,21 @@ try {
         button:hover {
             background: #1976D2;
         }
-        .register-link { 
-            position: fixed; 
-            top: 20px; 
-            right: 20px;
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 20px;
+        }
+        .header h1 {
+            margin: 0;
+            color: #2196F3;
+        }
+        .header-buttons {
+            display: flex;
+            gap: 10px;
+        }
+        .header-buttons a {
             background: white;
             padding: 8px 16px;
             border-radius: 4px;
@@ -146,10 +168,38 @@ try {
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
             transition: all 0.2s ease;
         }
-        .register-link:hover {
+        .header-buttons a:hover {
             background: #2196F3;
             color: white;
         }
+        .modal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0,0,0,0.5);
+            z-index: 1000;
+        }
+        .modal-content {
+            position: relative;
+            background: white;
+            margin: 50px auto;
+            padding: 20px;
+            width: 80%;
+            max-width: 600px;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        }
+        .close {
+            position: absolute;
+            right: 20px;
+            top: 20px;
+            font-size: 24px;
+            cursor: pointer;
+            color: #666;
+        }
         .api-info { 
             margin: 20px 0; 
             padding: 15px;
@@ -175,10 +225,6 @@ try {
         .checkbox-wrapper label {
             color: #666;
         }
-        h1 {
-            color: #2196F3;
-            margin: 0 0 20px 0;
-        }
         .clear {
             clear: both;
         }
@@ -186,34 +232,15 @@ try {
 </head>
 <body>
     <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 class="checkbox-wrapper">
-                <input type="checkbox" name="encrypted" id="encrypted">
-                <label for="encrypted">Message is encrypted</label>
+        <div class="header">
+            <h1>Text0Nly</h1>
+            <div class="header-buttons">
+                <a href="#" onclick="showApiInfo()">API Info</a>
+                <a href="register.php">Register</a>
             </div>
-            <button type="submit">Send Message</button>
-        </form>
+        </div>
 
-        <div id="messages">
+        <div class="messages-container" id="messages">
             <?php foreach ($messages as $msg): ?>
                 <div class="message">
                     <span class="username"><?= htmlspecialchars($msg['username']) ?></span>
@@ -229,9 +256,51 @@ try {
                 </div>
             <?php endforeach; ?>
         </div>
+
+        <div class="form-container">
+            <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>
+                <button type="submit">Send Message</button>
+            </form>
+        </div>
+    </div>
+
+    <div id="apiModal" class="modal">
+        <div class="modal-content">
+            <span class="close" onclick="hideApiInfo()">&times;</span>
+            <h2>Message API</h2>
+            <div class="api-info">
+                <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>
+        </div>
     </div>
 
     <script>
+        function showApiInfo() {
+            document.getElementById('apiModal').style.display = 'block';
+        }
+
+        function hideApiInfo() {
+            document.getElementById('apiModal').style.display = 'none';
+        }
+
+        window.onclick = function(event) {
+            if (event.target == document.getElementById('apiModal')) {
+                hideApiInfo();
+            }
+        }
+
         setInterval(() => {
             fetch(window.location.href)
                 .then(response => response.text())
