diff --git a/.gitignore b/.gitignore
index c8dea8f..9c39a2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 files/ausgaben_month/
 **/ausgaben_month/
 **/__pycache__/
+.aider*
diff --git a/files/templates/add_ausgabe.html b/files/templates/add_ausgabe.html
index a101642..afc77ee 100644
--- a/files/templates/add_ausgabe.html
+++ b/files/templates/add_ausgabe.html
@@ -1,22 +1,49 @@
 {% extends "base.html" %}
 {% block body %}
-  <form action="{{ url }}" method="POST">
-    <input type="number"
-           step="0.01"
-           min="1"
-           max="10000"
-           placeholder="Ausgaben" 
-           name="{{ select_id_text }}"
-           id="{{ select_id_text }}">
-    &nbsp;
-    <select name="{{ select_id }}" id="{{ select_id }}"> 
-      {% for name in data %}  
-          <option value="{{ name }}">{{ name }}</option>
-      {% endfor %}
-    </select>
-      &nbsp;
-    <button type="submit"> Eingabe </button> 
+  <div class="max-w-md mx-auto bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+    <div class="px-6 py-4 bg-slate-50 border-b border-slate-100">
+      <h3 class="font-bold text-slate-800 text-lg">Neue Ausgabe eintragen</h3>
+      <p class="text-xs text-slate-500 mt-1">Geben Sie den Betrag und die entsprechende Kategorie an.</p>
+    </div>
+    
+    <form action="{{ url }}" method="POST" class="p-6 space-y-5">
+      <div>
+        <label for="{{ select_id_text }}" class="block text-sm font-medium text-slate-700 mb-1">Betrag in €</label>
+        <div class="relative rounded-md shadow-sm">
+          <input type="number"
+                 step="0.01"
+                 min="1"
+                 max="10000"
+                 placeholder="0.00" 
+                 name="{{ select_id_text }}"
+                 id="{{ select_id_text }}"
+                 required
+                 class="block w-full rounded-lg border-slate-200 pl-4 pr-12 py-2.5 text-slate-900 placeholder-slate-400 focus:border-indigo-500 focus:ring-indigo-500 border focus:outline-none sm:text-sm">
+          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
+            <span class="text-slate-500 sm:text-sm">EUR</span>
+          </div>
+        </div>
+      </div>
 
+      <div>
+        <label for="{{ select_id }}" class="block text-sm font-medium text-slate-700 mb-1">Kategorie / Beschreibung</label>
+        <select name="{{ select_id }}" 
+                id="{{ select_id }}"
+                class="block w-full rounded-lg border-slate-200 px-4 py-2.5 text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 border focus:outline-none sm:text-sm"> 
+          {% for name in data %}  
+              <option value="{{ name }}">{{ name }}</option>
+          {% endfor %}
+        </select>
+      </div>
 
-  </form>
+      <div class="pt-2 flex gap-3">
+        <a href="/" class="flex-1 text-center py-2.5 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
+          Abbrechen
+        </a>
+        <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2.5 px-4 rounded-lg text-sm font-semibold shadow transition-colors">
+          Speichern
+        </button> 
+      </div>
+    </form>
+  </div>
 {% endblock %}
diff --git a/files/templates/base.html b/files/templates/base.html
index 48c12ce..b5e6629 100644
--- a/files/templates/base.html
+++ b/files/templates/base.html
@@ -1,11 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html lang="de">
     <head>
-        <title> {{ sitename }} </title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>{{ sitename }}</title>
+        <script src="https://cdn.tailwindcss.com"></script>
     </head>
-    <body>
-        <h3> {{ sitename }} </h3>
+    <body class="bg-slate-50 text-slate-800 min-h-screen flex flex-col">
+        <header class="bg-indigo-600 text-white shadow">
+            <div class="max-w-4xl mx-auto px-4 py-6 flex justify-between items-center">
+                <h1 class="text-2xl font-bold tracking-tight">
+                    <a href="/">{{ sitename }}</a>
+                </h1>
+                <nav>
+                    <a href="/add_ausgabe" class="bg-indigo-500 hover:bg-indigo-400 text-white font-semibold py-2 px-4 rounded-lg transition-colors shadow">
+                        + Ausgabe hinzufügen
+                    </a>
+                </nav>
+            </div>
+        </header>
+
+        <main class="flex-grow max-w-4xl w-full mx-auto px-4 py-8">
             {% block body %}
             {% endblock %}
+        </main>
+
+        <footer class="bg-slate-100 border-t border-slate-200 py-6 text-center text-sm text-slate-500 mt-auto">
+            <p>&copy; 2026 {{ sitename }}. Alle Rechte vorbehalten.</p>
+        </footer>
     </body>
 </html>
diff --git a/files/templates/index.html b/files/templates/index.html
index fd7bacb..c7c9c29 100644
--- a/files/templates/index.html
+++ b/files/templates/index.html
@@ -1,24 +1,52 @@
 {% extends "base.html" %}
 
-        {% block body %}
-        <p>
-            <h4>Diese Seite zeigt unsere Ausgaben</h4> 
-            Ausgabe hinzufügen <a href="/add_ausgabe">Klick</a> . 
-        </p>
-<table  border="1" width="50%">
-        <tr>
-                <th>Datum</th>
-                <th>Ausgaben</th>
-                <th>Beschreibung</th>
-        </tr>
-        {% for name in data %}
-                <tr>
-                        <td>{{ name.get("datum") }}</td>
-                        <td>{{ name.get("ausgabe") }}</td>
-                        <td> {{ name.get("beschreibung") }}</td>
-                </tr>
-        {% endfor %}
-</table>
-        <p><br><h5>Gesamt: {{sum_all}}</h5>
-        <p> Nächste Schritte </p>
-        {% endblock %}
+{% block body %}
+  {% if csv_value_text %}
+    <div class="mb-6 p-4 bg-emerald-50 border-l-4 border-emerald-500 text-emerald-800 rounded-r-lg shadow-sm animate-fade-in" role="alert">
+      <p class="font-semibold">Erfolgreich hinzugefügt!</p>
+      <p class="text-sm">Ausgabe von {{ csv_value_text }} € für "{{ csv_value_disc }}" wurde gespeichert.</p>
+    </div>
+  {% endif %}
+
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
+    <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-between md:col-span-1">
+      <span class="text-sm font-medium text-slate-500 uppercase tracking-wider">Gesamtausgaben</span>
+      <span class="text-3xl font-extrabold text-indigo-600 mt-2">{{ sum_all }} €</span>
+    </div>
+    <div class="bg-white p-6 rounded-2xl shadow-sm border border-slate-100 flex flex-col justify-between md:col-span-2">
+      <h4 class="text-lg font-semibold text-slate-800">Übersicht unserer Finanzen</h4>
+      <p class="text-sm text-slate-500 mt-1">Hier behalten wir unsere monatlichen Haushaltsausgaben im Blick.</p>
+    </div>
+  </div>
+
+  <div class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+    <div class="px-6 py-4 border-b border-slate-100 flex justify-between items-center">
+      <h3 class="font-bold text-slate-800 text-lg">Letzte Ausgaben</h3>
+    </div>
+    <div class="overflow-x-auto">
+      <table class="w-full text-left border-collapse">
+        <thead>
+          <tr class="bg-slate-50 text-slate-500 text-xs font-semibold uppercase tracking-wider border-b border-slate-100">
+            <th class="px-6 py-4">Datum</th>
+            <th class="px-6 py-4">Beschreibung</th>
+            <th class="px-6 py-4 text-right">Betrag</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100 text-slate-700">
+          {% for name in data %}
+            <tr class="hover:bg-slate-50/50 transition-colors">
+              <td class="px-6 py-4 text-sm text-slate-500">{{ name.get("datum") }}</td>
+              <td class="px-6 py-4 text-sm font-medium text-slate-800">{{ name.get("beschreibung") }}</td>
+              <td class="px-6 py-4 text-sm font-semibold text-slate-900 text-right">{{ name.get("ausgabe") }} €</td>
+            </tr>
+          {% endfor %}
+          {% if not data %}
+            <tr>
+              <td colspan="3" class="px-6 py-8 text-center text-slate-400 text-sm">Keine Ausgaben vorhanden.</td>
+            </tr>
+          {% endif %}
+        </tbody>
+      </table>
+    </div>
+  </div>
+{% endblock %}
diff --git a/files/templates/output.html b/files/templates/output.html
index 533ef73..8b3774c 100644
--- a/files/templates/output.html
+++ b/files/templates/output.html
@@ -1,22 +1,43 @@
 {% extends "base.html" %}
 
-        {% block body %}
-        <p>
-        Ausgabe = {{ csv_value_text }} <br> Beschreibung = {{csv_value_disc}}
-            <br>
-        </p>
-<table>
-        <tr>
-                <th>Ausgaben</th>
-                <th>Beschreibung</th>
-        </tr>
-        {% for name in data %}
-                <tr>
-                        <td>{{ name.get("ausgabe") }}</td>
-                        <td> {{ name.get("beschreibung") }}</td>
-                </tr>
-        {% endfor %}
-</table>
+{% block body %}
+  <div class="max-w-2xl mx-auto bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
+    <div class="p-6 border-b border-slate-100 bg-emerald-50 text-emerald-800">
+      <h3 class="font-bold text-lg">Ausgabe erfolgreich erfasst!</h3>
+      <p class="text-sm mt-1">Betrag: <span class="font-semibold">{{ csv_value_text }} €</span> | Beschreibung: <span class="font-semibold">{{ csv_value_disc }}</span></p>
+    </div>
 
-        <p><br><h5>Gesamt: {{sum_all}}</h5>
-        {% endblock %}
+    <div class="p-6">
+      <h4 class="font-bold text-slate-800 mb-4">Aktuelle Übersicht</h4>
+      <div class="overflow-hidden border border-slate-100 rounded-xl">
+        <table class="w-full text-left border-collapse">
+          <thead>
+            <tr class="bg-slate-50 text-slate-500 text-xs font-semibold uppercase tracking-wider border-b border-slate-100">
+              <th class="px-6 py-3">Beschreibung</th>
+              <th class="px-6 py-3 text-right">Ausgaben</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-slate-100 text-slate-700">
+            {% for name in data %}
+              <tr class="hover:bg-slate-50/50 transition-colors">
+                <td class="px-6 py-3 text-sm text-slate-800 font-medium">{{ name.get("beschreibung") }}</td>
+                <td class="px-6 py-3 text-sm font-semibold text-slate-900 text-right">{{ name.get("ausgabe") }} €</td>
+              </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+
+      <div class="mt-6 flex justify-between items-center bg-slate-50 p-4 rounded-xl border border-slate-100">
+        <span class="text-slate-500 font-medium">Gesamtsumme:</span>
+        <span class="text-xl font-bold text-slate-900">{{ sum_all }} €</span>
+      </div>
+
+      <div class="mt-6 text-center">
+        <a href="/" class="inline-block bg-indigo-600 hover:bg-indigo-700 text-white font-semibold py-2.5 px-6 rounded-lg shadow transition-colors">
+          Zurück zur Übersicht
+        </a>
+      </div>
+    </div>
+  </div>
+{% endblock %}

Datum	Beschreibung	Betrag
{{ name.get("datum") }}	{{ name.get("beschreibung") }}	{{ name.get("ausgabe") }} €
Keine Ausgaben vorhanden.