diff --git a/src/main/resources/static/style.css b/src/main/resources/static/style.css
new file mode 100644
index 0000000..777b7a6
--- /dev/null
+++ b/src/main/resources/static/style.css
@@ -0,0 +1,72 @@
+/*Content Container*/
+.con-div {
+    border-radius: 3px;
+    background: #e6f4ff;
+    transition: 100ms;
+    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
+}
+
+.con-div:hover {
+    background: #d4ecff;
+    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .125);
+}
+
+/*Content Heading*/
+.con-h {
+    color: dodgerblue;
+    font-weight: bold;
+    font-optical-sizing: auto;
+    overflow-wrap: break-word;
+    margin-bottom: 5px;
+    transition: 100ms;
+}
+
+.con-div:hover .con-h {
+    margin-left: 5px;
+}
+
+.con-h a {
+    transition: 100ms;
+}
+
+.con-h a:hover {
+    color: #4fa4ff;
+}
+
+/*Content Paragraph*/
+.con-p {
+    background: #fbfbfb;
+    border-radius: 3px;
+    margin-top: 5px;
+    margin-right: 10px;
+    cursor: default;
+    transition: 100ms;
+    box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .075);
+}
+
+.con-div:hover .con-p {
+    margin-top: 10px;
+    margin-right: 0;
+    box-shadow: inset 0 .125rem .25rem rgba(0, 0, 0, .125);
+}
+
+.con-p span {
+    text-align: center;
+    overflow-wrap: break-word;
+    font-optical-sizing: auto;
+}
+
+/*Badges*/
+.badge-ver {
+    background: lightseagreen;
+}
+
+/*Positioning*/
+.float-r {
+    float: right;
+}
+
+/*Miscellanous*/
+.def-cursor {
+    cursor: default;
+}
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index ebe831c..9156982 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -3,9 +3,10 @@
       th:replace="~{mopslayout :: html(name='Gruppenbildung', headcontent=~{:: headcontent}, navigation=~{:: navigation}, bodycontent=~{:: bodycontent})}">
 <head>
     <meta charset="utf-8">
-    <title>Eigene Gruppen</title>
+    <title>Meine Gruppen</title>
     <th:block th:fragment="headcontent">
         <!-- Links, Skripts, Styles hier einfügen! -->
+        <link th:href="@{/style.css}" href="../static/style.css" rel="stylesheet"/>
     </th:block>
 </head>
 <body>
@@ -26,38 +27,18 @@
 </header>
 <main th:fragment="bodycontent">
     <div class="container-fluid">
-        <div class="row">
-            <div class="col-10">
-                <h1>Meine Gruppen</h1>
-                <form method="get" th:action="@{/}">
-                    <h3 style="color: dodgerblue; font-weight: bold; font-optical-sizing: auto;">
-                        <small style="font-weight: normal; color: black;">Mitglied in </small>
-                        <small style="font-weight: bold; color: black;"
-                               th:text="${gruppen.size()}"></small>
-                        <small style="font-weight: normal; color: black;"
-                               th:if='${gruppen.size()==1}'> Gruppe.</small>
-                        <small style="font-weight: normal; color: black;"
-                               th:if='${gruppen.size()!=1}'> Gruppen.</small>
-                    </h3>
-                    <br>
-                    <div th:each="gruppe: ${gruppen}">
-                        <div class="shadow-sm p-4"
-                             style="border: none; border-radius: 5px; background: aliceblue;">
-                            <h3 style="color: dodgerblue; font-weight: bold; font-optical-sizing: auto; overflow-wrap: break-word;">
-                                <span class="badge badge-pill badge-success"
-                                      style="background: lightseagreen; margin-right: 25px; float: right;"
-                                      th:if='${gruppe.getType() == lecture}'>Veranstaltung</span>
-                                <a th:href="@{/gruppen2/details/{id}(id=${gruppe.getId()})}"
-                                   th:text="${gruppe.getTitle()}"></a>
-                            </h3>
-                            <div class="shadow-sm p-4" style="background: white;">
-                                <p style="overflow-wrap: break-word; font-optical-sizing: auto;"
-                                   th:text="${#strings.abbreviate(gruppe.getDescription(),300)}"></p>
-                            </div>
-                        </div>
-                        <br>
-                    </div>
-                </form>
+        <h1 class="def-cursor">Meine Gruppen</h1>
+        <div class="mt-3" th:each="gruppe: ${gruppen}">
+            <div class="con-div p-2">
+                <span class="con-h">
+                    <a th:href="@{/gruppen2/details/{id}(id=${gruppe.getId()})}"
+                       th:text="${gruppe.getTitle()}"></a>
+                    <span class="badge badge-pill badge-success badge-ver float-r"
+                          th:if='${gruppe.getType() == lecture}'>Veranstaltung</span>
+                </span>
+                <div class="con-p p-2">
+                    <span th:text="${#strings.abbreviate(gruppe.getDescription(),300)}"></span>
+                </div>
             </div>
         </div>
     </div>
