diff --git a/src/main/resources/templates/createOrga.html b/src/main/resources/templates/createOrga.html
index d06692a..63bafd5 100644
--- a/src/main/resources/templates/createOrga.html
+++ b/src/main/resources/templates/createOrga.html
@@ -39,7 +39,7 @@
             <div class="col-10">
                 <h1>Gruppenerstellung</h1>
                 <form method="post" action="/gruppen2/createOrga" enctype="multipart/form-data">
-                    <div class="shadow p-2"
+                    <div class="shadow-sm p-2"
                          style=" border: 10px solid aliceblue; background: aliceblue">
                         <div class="form-group">
                             <label for="titel">Titel</label>
diff --git a/src/main/resources/templates/createStudent.html b/src/main/resources/templates/createStudent.html
index ab750ea..6a51783 100644
--- a/src/main/resources/templates/createStudent.html
+++ b/src/main/resources/templates/createStudent.html
@@ -34,7 +34,7 @@
             <div class="col-10">
                 <h1>Gruppenerstellung</h1>
                 <form method="post" action="/gruppen2/createStudent">
-                    <div class="shadow p-2" style=" border: 10px solid aliceblue; border-radius: 5px; background: aliceblue">
+                    <div class="shadow-sm p-2" style=" border: 10px solid aliceblue; border-radius: 5px; background: aliceblue">
 
                         <div class="form-group">
                             <label for="titel">Titel</label>
diff --git a/src/main/resources/templates/detailsMember.html b/src/main/resources/templates/detailsMember.html
index 157649a..758a9e8 100644
--- a/src/main/resources/templates/detailsMember.html
+++ b/src/main/resources/templates/detailsMember.html
@@ -32,7 +32,7 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-9 shadow-sm p-4" style="border: 10px solid aliceblue;  border-radius: 5px; background: aliceblue">
-                <h1 style="color: black; font-weight: bold" th:text="${group.getTitle()}"></h1>
+                <h1 style="color: black; font-weight: bold; font-optical-sizing: auto; overflow-wrap: break-word" th:text="${group.getTitle()}"></h1>
                 <h3>
                     <span class="badge badge-pill badge-dark" style="background: darkslategray"
                           th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
@@ -45,7 +45,7 @@
                 </h3>
                 <br>
                 <div class="shadow-sm p-4" style="background: white">
-                    <p style="overflow-wrap: break-word" th:text="${group.getDescription()}"></p>
+                    <p style="overflow-wrap: break-word; font-optical-sizing: auto" th:text="${group.getDescription()}"></p>
                 </div>
                 <br>
                 <div class="text-right btn-toolbar" role="toolbar" style="float: right">
diff --git a/src/main/resources/templates/detailsNoMember.html b/src/main/resources/templates/detailsNoMember.html
index be65b7f..4ffba6a 100644
--- a/src/main/resources/templates/detailsNoMember.html
+++ b/src/main/resources/templates/detailsNoMember.html
@@ -31,8 +31,8 @@
     <div class="container-fluid">
         <div class="row">
             <div class="col-9">
-                <div class="shadow-sm p-4" style="border: 10px solid aliceblue; border-radius: 5px; background: aliceblue">
-                    <h1 style="color: black; font-weight: bold" th:text="${group.getTitle()}"></h1>
+                <div class="shadow-sm p-4" style="border: 1px solid aliceblue; border-radius: 5px; background: aliceblue">
+                    <h1 style="color: black; font-weight: bold; font-optical-sizing: auto; overflow-wrap: break-word" th:text="${group.getTitle()}"></h1>
                     <h3>
                         <span class="badge badge-pill badge-dark" style="background: darkslategray"
                               th:if='${group.getVisibility() == group.getVisibility().PRIVATE }'>Private Gruppe</span>
@@ -45,10 +45,10 @@
                               th:text="${parent.getTitle()}">Parent</span>
                     </h3>
                     <div class="shadow-sm p-4" style="background: white">
-                        <p style="overflow-wrap: break-word"
+                        <p style="overflow-wrap: break-word; font-optical-sizing: auto"
                            th:text="${group.getDescription()}"></p>
                     </div>
-                    <div class="form-group">
+                    <div class="form-group mt-2">
                         <div class="text-right">
                             <form method="post" action="/gruppen2/detailsBeitreten">
                                 <button class="btn btn-primary"
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 36e7704..a464f26 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -33,7 +33,7 @@
             <div class="col-10">
                 <h1>Meine Gruppen</h1>
                 <form action="/" method="get">
-                    <h3 style="color: dodgerblue; font-weight: bold;">
+                    <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>
@@ -45,12 +45,12 @@
                     <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;">
+                            <h3 style="color: dodgerblue; font-weight: bold; font-optical-sizing: auto; overflow-wrap: break-word">
                                 <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"
+                                <p style="overflow-wrap: break-word; font-optical-sizing: auto"
                                    th:text="${#strings.abbreviate(gruppe.getDescription(),300)}"></p>
                             </div>
                         </div>
diff --git a/src/main/resources/templates/search.html b/src/main/resources/templates/search.html
index ef093d7..0737267 100644
--- a/src/main/resources/templates/search.html
+++ b/src/main/resources/templates/search.html
@@ -33,7 +33,7 @@
             <div class="col-10">
                 <h1>Gruppensuche</h1>
                 <form action="/gruppen2/findGroup" method="get">
-                    <div class="shadow" style="border: 10px solid aliceblue; border-radius: 5px; background: aliceblue">
+                    <div class="shadow-sm p-2" style="border: 10px solid aliceblue; border-radius: 5px; background: aliceblue">
                         <div class="form-group">
                             <label for="suchleiste">Suchbegriff:</label>
                             <input class="form-control" id="suchleiste"