diff --git a/wwwroot/css/style.css b/wwwroot/css/base.css
similarity index 53%
rename from wwwroot/css/style.css
rename to wwwroot/css/base.css
index 8be8b6c..1c57dd0 100644
--- a/wwwroot/css/style.css
+++ b/wwwroot/css/base.css
@@ -3,64 +3,22 @@
 body {
   background: #222;
   color: #eee;
-  display: flex;
-  flex-direction: column;
   height: 100vh;
 }
 
-#app {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-/* ── Nav ── */
-
-#nav {
-  padding: .75em 1.5em;
-  border-bottom: 1px solid #444;
-  display: flex;
-  align-items: center;
-  gap: 2em;
-  flex-shrink: 0;
-}
-
-.nav-brand {
-  font-weight: bold;
-  font-size: 1.1em;
-}
-
-.nav-links {
-  display: flex;
-  gap: 1em;
-}
-
-.nav-link {
-  color: #888;
-  text-decoration: none;
-  padding: .25em .5em;
-}
-
-.nav-link:hover { color: #eee; }
-.nav-link.active { color: #eee; border-bottom: 2px solid #eee; }
-
 body, input, select, button, textarea {
+  padding: .5em;
   font-family: monospace;
   font-size: 1em;
   line-height: 1.5;
   color: #eee;
 }
 
+h1, h2, h3, h4, h5 {
+  font-size: 1em;
+}
+
 button, select, textarea {
-  padding: .5em;
   border: 1px solid #444;
   background: #333;
   outline: none;
@@ -73,6 +31,7 @@ button:hover, select:hover, input:hover, textarea:hover {
 button {
   cursor: pointer;
   line-height: 1.25;
+  padding: .5em .75em;
 }
 
 textarea {
@@ -108,11 +67,7 @@ header {
   flex-shrink: 0;
 }
 
-header h1 {
-  font-size: 1em;
-}
-
-/* ── System Promp ── */
+/* ── System Prompt ── */
 
 #systemPrompt {
   display: none;
@@ -225,114 +180,7 @@ header h1 {
 
 .archived { opacity: 0.6; }
 
-/* ── Archive Button ── */
-
 .archive-load-btn {
   display: block;
   margin-inline: auto;
 }
-
-/* ── Dashboard ── */
-
-.dashboard {
-  padding: 2em;
-  overflow-y: auto;
-}
-
-.dashboard section {
-  margin-bottom: 2em;
-}
-
-.section-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1em;
-}
-
-.section-header h2 {
-  font-size: 1.1em;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
-  gap: 1em;
-}
-
-.card {
-  background: #333;
-  border: 1px solid #444;
-  padding: 1em;
-  display: flex;
-  flex-direction: column;
-  gap: .5em;
-}
-
-.card.clickable { cursor: pointer; }
-.card.clickable:hover { border-color: #888; }
-
-.card-icon { font-size: 2em; }
-.card-title { font-weight: bold; }
-.card-sub { color: #888; font-size: 0.85em; }
-
-.card.placeholder {
-  border-style: dashed;
-  color: #666;
-}
-
-/* ── Session Page ── */
-
-.session-page {
-  display: flex;
-  flex-direction: column;
-}
-
-.session-header {
-  padding: .75em 1.5em;
-  border-bottom: 1px solid #444;
-  display: flex;
-  align-items: center;
-  gap: 1em;
-  flex-shrink: 0;
-}
-
-.session-header h1 {
-  font-size: 1em;
-}
-
-.back-btn {
-  background: none;
-  border: none;
-  font-size: 1.2em;
-  padding: .25em .5em;
-}
-
-.header-btn {
-  font-size: 0.85em;
-}
-
-.editable-title {
-  cursor: pointer;
-}
-
-.editable-title:hover {
-  text-decoration: underline;
-  text-decoration-style: dotted;
-}
-
-/* ── Placeholder Pages ── */
-
-.placeholder-page {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1em;
-  color: #888;
-}
-
-.placeholder-icon {
-  font-size: 4em;
-}
diff --git a/wwwroot/css/main.css b/wwwroot/css/main.css
new file mode 100644
index 0000000..6b8c127
--- /dev/null
+++ b/wwwroot/css/main.css
@@ -0,0 +1,135 @@
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+#app {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* ── Nav ── */
+
+#nav {
+  padding: .75em 1.5em;
+  border-bottom: 1px solid #444;
+  display: flex;
+  align-items: center;
+  gap: 2em;
+  flex-shrink: 0;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1em;
+}
+
+.nav-link {
+  color: #888;
+  text-decoration: none;
+  padding: .25em .5em;
+}
+
+.nav-link:hover { color: #eee; }
+.nav-link.active { color: #eee; border-bottom: 2px solid #eee; }
+
+/* ── Dashboard ── */
+
+.dashboard {
+  padding: 2em;
+  overflow-y: auto;
+}
+
+.dashboard section {
+  margin-bottom: 2em;
+}
+
+.section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1em;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 1em;
+}
+
+.card {
+  background: #333;
+  border: 1px solid #444;
+  padding: 1em;
+  display: flex;
+  flex-direction: column;
+  gap: .5em;
+}
+
+.card.clickable { cursor: pointer; }
+.card.clickable:hover { border-color: #888; }
+
+.card-icon { font-size: 2em; }
+.card-title { font-weight: bold; }
+.card-sub { color: #888; }
+
+.card.placeholder {
+  border-style: dashed;
+  color: #666;
+}
+
+/* ── Session Page ── */
+
+.session-page {
+  display: flex;
+  flex-direction: column;
+}
+
+.session-header {
+  padding: .75em 1.5em;
+  border-bottom: 1px solid #444;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+  flex-shrink: 0;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  padding: .25em .5em;
+}
+
+.editable-title {
+  cursor: pointer;
+}
+
+.editable-title:hover {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+}
+
+/* ── Placeholder Pages ── */
+
+.placeholder-page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+  color: #888;
+}
+
+.placeholder-icon {
+  font-size: 4em;
+}
diff --git a/wwwroot/css/prototype.css b/wwwroot/css/prototype.css
new file mode 100644
index 0000000..4f09cc8
--- /dev/null
+++ b/wwwroot/css/prototype.css
@@ -0,0 +1,61 @@
+body {
+  display: flex;
+}
+
+main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+/* ── Sidebar ── */
+
+#sidebar {
+  width: 260px;
+  background: #1a1a1a;
+  border-right: 1px solid #444;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.sidebar-header {
+  padding: 1em;
+  border-bottom: 1px solid #444;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+#sessionList {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.session-item {
+  padding: 1em;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  border-left: 3px solid transparent;
+}
+
+.session-item:hover { background: #333; }
+
+.session-item.active {
+  background: #333;
+  border-left-color: #eee;
+}
+
+.session-name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: 1px solid transparent;
+}
+
+.session-date {
+  color: #888;
+}
diff --git a/wwwroot/index.html b/wwwroot/index.html
index ad4c2d9..8f52d05 100644
--- a/wwwroot/index.html
+++ b/wwwroot/index.html
@@ -4,7 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Gott</title>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/main.css">
 </head>
 <body>
 
diff --git a/wwwroot/prototype.html b/wwwroot/prototype.html
index 514388d..ad1f62f 100644
--- a/wwwroot/prototype.html
+++ b/wwwroot/prototype.html
@@ -4,7 +4,8 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Gott - Debug Console</title>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="css/base.css">
+  <link rel="stylesheet" href="css/prototype.css">
 </head>
 <body>
 
@@ -45,6 +46,81 @@
 <script src="js/session.js"></script>
 <script src="js/chat.js"></script>
 <script src="js/history.js"></script>
-<script src="js/app.js"></script>
+<script>
+document.addEventListener('DOMContentLoaded', async () => {
+  // Session aus localStorage oder neue erstellen
+  const stored = localStorage.getItem('sessionId');
+  if (stored) {
+    currentSessionId = stored;
+  } else {
+    const session = await apiCreateSession();
+    currentSessionId = session.sessionId;
+    localStorage.setItem('sessionId', currentSessionId);
+  }
+
+  $('#showSystem').addEventListener('change', () => {
+    $('#systemPrompt').classList.toggle('visible', $('#showSystem').checked);
+  });
+
+  $('#send').addEventListener('click', sendMessage);
+  $('#clearBtn').addEventListener('click', clearChat);
+  $('#newSessionBtn').addEventListener('click', async () => {
+    const session = await apiCreateSession();
+    currentSessionId = session.sessionId;
+    localStorage.setItem('sessionId', currentSessionId);
+    messages.length = 0;
+    chatEl().innerHTML = '';
+    lastKnownMessageId = 0;
+    loadedArchiveCount = 0;
+    setMeta('');
+    await refreshSessionList();
+    await loadHistory();
+  });
+
+  $('#input').addEventListener('keydown', (e) => {
+    if (e.ctrlKey && e.key === 'Enter') sendMessage();
+  });
+
+  $('#input').addEventListener('input', function () {
+    this.style.height = 'auto';
+    this.style.height = Math.min(this.scrollHeight, 150) + 'px';
+  });
+
+  await refreshSessionList();
+  await loadHistory();
+});
+
+async function refreshSessionList() {
+  const sessions = await apiGetSessions();
+  const list = $('#sessionList');
+  list.innerHTML = '';
+  for (const s of sessions) {
+    const div = document.createElement('div');
+    div.className = 'session-item' + (s.sessionId === currentSessionId ? ' active' : '');
+    const name = document.createElement('span');
+    name.className = 'session-name';
+    name.textContent = s.name || 'Unbenannt';
+    const date = document.createElement('span');
+    date.className = 'session-date';
+    date.textContent = new Date(s.updatedAt).toLocaleString('de-AT', {
+      day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit'
+    });
+    div.appendChild(name);
+    div.appendChild(date);
+    div.addEventListener('click', async () => {
+      currentSessionId = s.sessionId;
+      localStorage.setItem('sessionId', currentSessionId);
+      messages.length = 0;
+      chatEl().innerHTML = '';
+      lastKnownMessageId = 0;
+      loadedArchiveCount = 0;
+      setMeta('');
+      await refreshSessionList();
+      await loadHistory();
+    });
+    list.appendChild(div);
+  }
+}
+</script>
 </body>
 </html>