diff --git a/templates/index.html b/templates/index.html
index 745daac..e0f8985 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,176 +2,156 @@
 <html lang="de">
 <head>
     <meta charset="UTF-8">
-    <title>Pi-Orchestrator AI Control Center</title>
+    <title>Pi-Orchestrator AI</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.6.0/split.min.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm@5.1.0/css/xterm.css" />
     <script src="https://cdn.jsdelivr.net/npm/xterm@5.1.0/lib/xterm.js"></script>
+    
     <style>
-        /* Custom scrollbar für den Matrix-Look */
-        #install-log::-webkit-scrollbar { width: 5px; }
-        #install-log::-webkit-scrollbar-thumb { background: #22c55e; }
+        /* Styles für die ziehbaren Trennbalken (Gutters) */
+        .gutter {
+            background-color: #2d3748;
+            background-repeat: no-repeat;
+            background-position: center;
+        }
+        .gutter.gutter-horizontal {
+            cursor: col-resize;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAG8aZGCAwMA6gBVHicPXM2nPRDAADy9GAVu4E9ngAAAABJRU5ErkJggg==');
+        }
+        .gutter.gutter-vertical {
+            cursor: row-resize;
+            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABjU9S9AAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');
+        }
+        .split { display: flex; flex-direction: row; }
+        #upper-area { display: flex; flex-direction: row; width: 100%; }
+        #lower-area { display: flex; flex-direction: row; width: 100%; }
     </style>
 </head>
 <body class="bg-gray-900 text-white h-screen flex flex-col overflow-hidden">
 
-    <div class="flex flex-1 overflow-hidden">
+    <div id="vertical-split" class="flex flex-col flex-1">
         
-        <div class="w-64 border-r border-gray-700 p-4 flex flex-col bg-gray-800">
-            <h2 class="text-xl font-bold mb-4 flex items-center">
-                <span class="mr-2">📍</span> Nodes
-            </h2>
-            
-            <div id="node-list" class="flex-1 overflow-y-auto space-y-2">
-            {% for node in nodes %}
-            <div class="p-3 bg-gray-700 rounded-lg border border-gray-600 relative group">
-                <form action="/remove_node/{{ node.id }}" method="post" class="absolute top-2 right-2">
-                    <button type="submit" class="text-red-500 font-bold">×</button>
-                </form>
-
-                <div class="font-bold text-blue-400">{{ node.name }}</div>
-                <div class="text-xs text-gray-400">{{ node.ip }}</div>
-                <div class="text-[10px] uppercase mt-1 text-green-500 font-mono">{{ node.status }}</div>
-                
-                <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 text-[10px] bg-gray-600 hover:bg-gray-500 px-2 py-1 rounded w-full">Terminal öffnen</button>
+        <div id="upper-area" class="flex">
+            <div id="sidebar" class="bg-gray-800 p-4 overflow-y-auto">
+                <h2 class="text-xl font-bold mb-4">📍 Nodes</h2>
+                <div id="node-list" class="space-y-2">
+                    {% for node in nodes %}
+                    <div class="p-3 bg-gray-700 rounded border border-gray-600 relative group">
+                        <form action="/remove_node/{{ node.id }}" method="post" class="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <button type="submit" class="text-red-500 font-bold px-1">×</button>
+                        </form>
+                        <div class="text-sm font-bold">{{ node.name }}</div>
+                        <div class="text-[10px] text-gray-400">{{ node.ip }}</div>
+                        <button onclick="openTerminal('{{ node.ip }}')" class="mt-2 text-[10px] bg-blue-600 hover:bg-blue-500 px-2 py-1 rounded w-full">Terminal</button>
+                    </div>
+                    {% endfor %}
+                </div>
+                <button onclick="addNode()" class="mt-4 w-full bg-green-700 p-2 rounded text-sm">+ Add</button>
             </div>
-            {% endfor %}
-        </div>
 
-            <button onclick="addNode()" class="mt-4 w-full bg-blue-600 hover:bg-blue-700 p-2 rounded font-bold transition-colors">
-                + Node hinzufügen
-            </button>
-        </div>
-
-        <div class="flex-1 flex flex-col bg-gray-900">
-            <div id="chat-window" class="flex-1 p-6 overflow-y-auto space-y-4">
-                <div class="bg-gray-800 p-3 rounded-lg w-fit border border-gray-700">
-                    <span class="text-blue-400 font-bold">Bot:</span> Willkommen im Cluster-Management. Ich bin bereit für deine Befehle.
+            <div id="chat-area" class="flex flex-col bg-gray-900">
+                <div id="chat-window" class="flex-1 p-4 overflow-y-auto space-y-2">
+                    <div class="text-gray-500 italic text-sm">System bereit...</div>
+                </div>
+                <div class="p-3 border-t border-gray-700 flex bg-gray-800">
+                    <input id="user-input" type="text" class="flex-1 bg-gray-700 p-2 rounded-l outline-none text-sm" placeholder="KI Befehl...">
+                    <button onclick="sendMessage()" class="bg-blue-600 px-4 rounded-r">Send</button>
                 </div>
             </div>
-
-            <div class="p-4 border-t border-gray-700 bg-gray-800 flex gap-2">
-                <input id="user-input" type="text" 
-                    class="flex-1 bg-gray-700 p-3 rounded-lg outline-none border border-gray-600 focus:border-blue-500" 
-                    placeholder="Frag die KI (z.B. 'Werfe Nginx auf Pi-1 ab')">
-                <button onclick="sendMessage()" class="bg-green-600 hover:bg-green-700 px-6 rounded-lg font-bold transition-colors">
-                    Senden
-                </button>
-            </div>
         </div>
-    </div>
 
-    <div class="h-1/3 border-t-2 border-blue-900 bg-black flex">
-        <div class="w-1/2 flex flex-col border-r border-gray-800">
-            <div class="bg-gray-800 px-3 py-1 text-[10px] font-bold text-gray-400 uppercase tracking-widest">Setup Logs</div>
-            <div id="install-log" class="flex-1 p-3 text-xs font-mono overflow-y-auto text-green-500">
-                <div>> System bereit. Warte auf Node-Aktionen...</div>
+        <div id="lower-area" class="flex bg-black">
+            <div id="log-area" class="p-2 font-mono text-xs text-green-400 overflow-y-auto border-r border-gray-800">
+                <div class="text-gray-600 border-b border-gray-800 mb-1 uppercase tracking-tighter">System Logs</div>
+                <div id="install-log"></div>
+            </div>
+
+            <div id="terminal-area" class="p-1">
+                <div id="terminal" class="h-full w-full"></div>
             </div>
-        </div>
-        
-        <div class="w-1/2 flex flex-col">
-            <div class="bg-gray-800 px-3 py-1 text-[10px] font-bold text-gray-400 uppercase tracking-widest">Active Terminal</div>
-            <div id="terminal" class="flex-1 p-1"></div>
         </div>
     </div>
 
     <script>
-        // --- Xterm.js Setup ---
-        const term = new Terminal({ 
-            theme: { background: '#000000', foreground: '#ffffff' }, 
-            cursorBlink: true,
-            fontSize: 12,
-            fontFamily: 'Courier New'
+        // --- Split.js Initialisierung ---
+        
+        // 1. Vertikaler Split (Oben vs Unten)
+        Split(['#upper-area', '#lower-area'], {
+            direction: 'vertical',
+            sizes: [65, 35], // 65% Oben, 35% Unten
+            minSize: 100,
+            gutterSize: 8,
         });
+
+        // 2. Horizontaler Split Oben (Sidebar vs Chat)
+        Split(['#sidebar', '#chat-area'], {
+            sizes: [20, 80],
+            minSize: [150, 300],
+            gutterSize: 8,
+        });
+
+        // 3. Horizontaler Split Unten (Logs vs Terminal)
+        Split(['#log-area', '#terminal-area'], {
+            sizes: [30, 70],
+            minSize: [100, 300],
+            gutterSize: 8,
+            onDrag: () => {
+                // Terminal an neue Größe anpassen (falls Fit-Addon genutzt wird)
+            }
+        });
+
+        // --- Terminal & WebSockets ---
+        const term = new Terminal({ theme: { background: '#000' }, cursorBlink: true, fontSize: 13 });
         term.open(document.getElementById('terminal'));
-        term.write('System initialisiert. Terminal bereit.\r\n');
+        
+        let termWs = null;
+        function openTerminal(ip) {
+            if(termWs) termWs.close();
+            term.clear();
+            term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
+            termWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
+            termWs.onmessage = (ev) => term.write(ev.data);
+            term.onData(data => termWs.send(data));
+        }
 
-        // --- WebSocket Chat ---
-        const ws = new WebSocket(`ws://${location.host}/ws/chat`);
-        const chatWindow = document.getElementById('chat-window');
-
-        ws.onmessage = (event) => {
-            appendMessage('Bot', event.data, 'bg-blue-900 border-blue-700');
+        const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
+        logWs.onmessage = (ev) => {
+            const l = document.getElementById('install-log');
+            l.innerHTML += `<div>${ev.data}</div>`;
+            l.parentElement.scrollTop = l.parentElement.scrollHeight;
         };
 
+        const chatWs = new WebSocket(`ws://${location.host}/ws/chat`);
+        chatWs.onmessage = (ev) => appendChat("Bot", ev.data, "text-blue-400");
+
         function sendMessage() {
-            const input = document.getElementById('user-input');
-            if (!input.value) return;
-            ws.send(input.value);
-            appendMessage('Du', input.value, 'bg-gray-700 border-gray-600 self-end ml-auto');
-            input.value = '';
+            const i = document.getElementById('user-input');
+            chatWs.send(i.value);
+            appendChat("Du", i.value, "text-white");
+            i.value = '';
         }
 
-        function appendMessage(sender, text, classes) {
-            const msg = document.createElement('div');
-            msg.className = `${classes} p-3 rounded-lg w-fit max-w-[80%] border`;
-            msg.innerHTML = `<span class="font-bold">${sender}:</span> ${text}`;
-            chatWindow.appendChild(msg);
-            chatWindow.scrollTop = chatWindow.scrollHeight;
+        function appendChat(user, msg, color) {
+            const div = document.createElement('div');
+            div.className = "text-sm border-l-2 border-gray-700 pl-2 py-1";
+            div.innerHTML = `<span class="${color} font-bold">${user}:</span> ${msg}`;
+            document.getElementById('chat-window').appendChild(div);
         }
 
-        // --- WebSocket Installation Logs ---
-        const logWs = new WebSocket(`ws://${location.host}/ws/install_logs`);
-        logWs.onmessage = (event) => {
-            const logDiv = document.getElementById('install-log');
-            const entry = document.createElement('div');
-            entry.className = "mb-1";
-            entry.innerText = `> ${event.data}`;
-            logDiv.appendChild(entry);
-            logDiv.scrollTop = logDiv.scrollHeight;
-        };
-
-        // --- Node Funktionen ---
         async function addNode() {
-            const name = prompt("Name des Pi (z.B. Pi-Server-1):");
-            const ip = prompt("IP Adresse:");
-            const user = prompt("SSH Nutzername (meist 'pi' oder dein Name):", "pi");
-            const password = prompt("Initiales SSH Passwort (wird nur einmalig für Key-Copy benötigt):");
-
-            if (name && ip && user && password) {
-                const formData = new FormData();
-                formData.append('name', name);
-                formData.append('ip', ip);
-                formData.append('user', user);
-                formData.append('password', password);
-
-                await fetch('/add_node', {
-                    method: 'POST',
-                    body: formData
-                });
+            const name = prompt("Name:");
+            const ip = prompt("IP:");
+            const user = prompt("User:", "pi");
+            const pass = prompt("Passwort:");
+            if(name && ip && pass) {
+                const fd = new FormData();
+                fd.append('name', name); fd.append('ip', ip); 
+                fd.append('user', user); fd.append('password', pass);
+                await fetch('/add_node', { method: 'POST', body: fd });
                 location.reload();
             }
         }
-
-        let activeTermWs = null;
-
-        function openTerminal(ip) {
-            if (activeTermWs) activeTermWs.close();
-            
-            term.clear();
-            term.write(`\r\n>>> Verbinde mit ${ip}...\r\n`);
-            
-            activeTermWs = new WebSocket(`ws://${location.host}/ws/terminal/${ip}`);
-            
-            activeTermWs.onmessage = (event) => {
-                term.write(event.data);
-            };
-
-            activeTermWs.onclose = () => {
-                term.write('\r\n[Verbindung geschlossen]\r\n');
-            };
-
-            // Tastatureingaben vom Browser an den Server schicken
-            term.onData(data => {
-                if (activeTermWs && activeTermWs.readyState === WebSocket.OPEN) {
-                    activeTermWs.send(data);
-                }
-            });
-        }
-
-        // Enter-Taste zum Senden
-        document.getElementById('user-input').addEventListener('keypress', function (e) {
-            if (e.key === 'Enter') sendMessage();
-        });
     </script>
 </body>
 </html>
\ No newline at end of file
