diff --git a/src/main/resources/templates/details.html b/src/main/resources/templates/details.html
new file mode 100644
index 0000000..07ffc05
--- /dev/null
+++ b/src/main/resources/templates/details.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org"
+      th:replace="~{mopslayout :: html(name='Gruppenbildung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}">
+<head>
+    <meta charset="utf-8">
+    <title>Name des Subsystems</title>
+    <th:block th:fragment="headcontent">
+        <!-- Links, Skripts, Styles hier einfügen! -->
+    </th:block>
+</head>
+<body>
+<header>
+    <nav class="navigation navigation-secondary" is="mops-navigation" th:fragment="navigation">
+        <ul>
+            <li>
+                <a th:href="@{/gruppen2}" href="/">Gruppen</a>
+            </li>
+            <li  class="active">
+                <a th:href="@{/gruppen2/createGroup}" href="/createGroup">Erstellen</a>
+            </li>
+            <li>
+                <a th:href="@{/gruppen2/findGroup}" href="/findGroup">Suche</a>
+            </li>
+        </ul>
+    </nav>
+</header>
+<main th:fragment="bodycontent">
+    <div class="container-fluid">
+        <form action="/" method="get">
+        <div style="border: 10px solid aliceblue; background: aliceblue">
+            <h1 style="color: dodgerblue; font-weight: bold" th:text="${group.getTitle()}"></h1>
+            <p style="font-weight: bold">
+                <a href="url" th:text></a>,
+                <a></a>
+            </p>
+            <p th:text="${group.getDescription()}"></p>
+            <div class="form-group">
+                <div>
+                <button class="btn btn-primary" type="submit" style="background: #52a1eb; border-style: none">Beitreten</button>
+                </div>
+                <div>
+                    <button type="button" class="btn btn-warning">Mitglieder bearbeiten</button>
+                </div>
+                <div>
+                <button type="button" class="btn btn-danger">Gruppe verlassen</button>
+                </div>
+            </div>
+        </div>
+        </form>
+    </div>
+</main>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 822ebf1..ba20b5a 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -31,7 +31,7 @@
             <div th:each="gruppe: ${gruppen}">
                 <div style="border: 10px solid aliceblue; background: aliceblue">
                     <h3>
-                        <a href="url" style="color: dodgerblue; font-weight: bold" th:text="${gruppe.getTitle()}"></a>
+                        <a th:href="@{/details(group_id=${gruppe.getId()})}" style="color: dodgerblue; font-weight: bold" th:text="${gruppe.getTitle()}"></a>
                     </h3>
                     <p th:text="${gruppe.getDescription()}"></p>
                 </div>
