diff --git a/app/templates/index.html b/app/templates/index.html
new file mode 100644
index 0000000..ec606ec
--- /dev/null
+++ b/app/templates/index.html
@@ -0,0 +1,55 @@
+{% extends "base.html" %}
+
+{% block title %}University Process Hub{% endblock %}
+
+{% block content %}
+
+<div class="bg-white border-b border-gray-200 px-8 py-10">
+  <p class="text-xs font-semibold uppercase tracking-widest text-efi mb-2">
+    Fakultät EFI · TH Nürnberg
+  </p>
+  <h1 class="text-2xl font-bold text-gray-900 mb-2">University Process Hub</h1>
+  <p class="text-sm text-gray-500 max-w-xl leading-relaxed">
+    Modulares Informationssystem für Fakultätsprozesse.
+    Startpunkt für studentische Arbeiten und Schnittstelle für interne Dienste.
+  </p>
+</div>
+
+<div class="px-8 py-7">
+  <p class="text-xs font-semibold uppercase tracking-widest text-gray-400 mb-4">
+    Verfügbare Module
+  </p>
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+
+    {% for module in modules %}
+    <div class="bg-white rounded-md border border-gray-200 shadow-sm p-5 relative overflow-hidden
+                hover:shadow-md hover:border-efi transition-all duration-150 cursor-pointer">
+      <div class="absolute top-0 left-0 right-0 h-0.5 bg-efi"></div>
+      <div class="text-2xl mb-2">{{ module.icon }}</div>
+      <div class="font-semibold text-gray-900 text-sm mb-1">{{ module.name }}</div>
+      <div class="text-xs text-gray-500 leading-relaxed mb-3">{{ module.description }}</div>
+      {% if module.status == "active" %}
+        <span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-green-50 text-green-700 border border-green-200">Aktiv</span>
+      {% else %}
+        <span class="text-xs font-semibold px-2 py-0.5 rounded-full bg-gray-100 text-gray-500 border border-gray-200">Geplant</span>
+      {% endif %}
+    </div>
+    {% endfor %}
+
+    <div class="bg-white rounded-md border border-dashed border-gray-300 p-5">
+      <div class="text-2xl mb-2 opacity-30">➕</div>
+      <div class="font-semibold text-gray-300 text-sm mb-1">Neues Modul</div>
+      <div class="text-xs text-gray-300 leading-relaxed">Erweiterbar durch studentische Arbeiten.</div>
+    </div>
+
+  </div>
+</div>
+
+<div class="bg-white border-t border-gray-200 px-8 py-4 flex flex-wrap items-center gap-8">
+  <span class="text-xs text-gray-500">API: <strong class="text-gray-800">FastAPI</strong></span>
+  <span class="text-xs text-gray-500">Datenbank: <strong class="text-gray-800">{{ db_mode }}</strong></span>
+  <span class="text-xs text-gray-500">WebSocket: <strong class="text-gray-800">aktiv</strong></span>
+  <div class="ml-auto text-xs font-medium text-efi">● System online</div>
+</div>
+
+{% endblock %}
\ No newline at end of file