diff --git a/frontend/src/app/components/group-search/group-search.component.css b/frontend/src/app/components/group-search/group-search.component.css
index 14c96809dd555ec2da00ecb852b4a68cf449633a..2b450767961494f9a15b941c0e4605608d2dc86e 100644
--- a/frontend/src/app/components/group-search/group-search.component.css
+++ b/frontend/src/app/components/group-search/group-search.component.css
@@ -3,3 +3,50 @@
   margin-bottom: -4%;
   font: 13px Helvetica;
 }
+
+#faculties, #modules {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+
+#faculties li, #modules li {
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: .3em 0;
+  height: 1.6em;
+  border-radius: 4px;
+}
+
+#faculties li:hover, #modules li:hover {
+  background-color: palegreen;
+  left: .1em;
+}
+
+#faculties li.selected, #modules li.selected {
+  background-color: darkseagreen;
+}
+
+#faculties li.selected:hover, #modules li.selected.hover {
+  background-color: darkseagreen;
+}
+
+#faculties .badge, #modules .badge{
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: darkseagreen;
+  line-height: 1em;
+  position: relative;
+  left: -1px;
+  top: -4px;
+  height: 1.8em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
diff --git a/frontend/src/app/components/group-search/group-search.component.html b/frontend/src/app/components/group-search/group-search.component.html
index 6c25bd83dac69b847b87c4b15cffd0d4755c1212..dd3de2112c3bc8aaede5df4689bfb507b5a9f00a 100644
--- a/frontend/src/app/components/group-search/group-search.component.html
+++ b/frontend/src/app/components/group-search/group-search.component.html
@@ -1,13 +1,20 @@
 <div id="findGroup" >
   <h1>Gruppe suchen</h1>
   <p></p>
-  <li id="faculties">Fakultäten
-    <ul>
-      <li id="modules">Module
-        <ul>
-          <li id="groups">tg</li>
+  <ul id="faculties" >Fakultäten
+    <li *ngFor="let faculty of faculties"
+        [class.selected]="faculty === selectedFaculty"
+        (click)="onSelectFac(faculty)">
+        <span class="badge">{{faculty.fakultaet_ID}}</span> {{faculty.title}}
+      <div *ngIf="selectedFaculty">
+        <ul id="modules">
+          <li *ngFor="let module of modules"
+              [class.selected]="module === selectedModule"
+              (click)="onSelectMod(module)">Module
+            <span class="badge">{{module.modul_ID}}</span> {{module.title}}
+          </li>
         </ul>
-      </li>
-    </ul>
-  </li>
+      </div>
+    </li>
+  </ul>
 </div>
diff --git a/frontend/src/app/components/group-search/group-search.component.ts b/frontend/src/app/components/group-search/group-search.component.ts
index c5f68d07d0007430a62918d2e58af1558b2778f3..d3495af864993eb2d3993f2237da7e6e43204201 100644
--- a/frontend/src/app/components/group-search/group-search.component.ts
+++ b/frontend/src/app/components/group-search/group-search.component.ts
@@ -1,9 +1,7 @@
 import {Component, OnInit} from '@angular/core';
 import { DataProviderService } from '../../services/data-provider.service';
-import { FacultyDO } from "../../types/facultyDO";
-import { ModulesDO } from "../../types/modulesDO";
-import {newArray} from "@angular/compiler/src/util";
-import {ActivatedRoute} from "@angular/router";
+import { FacultyDO } from '../../types/facultyDO';
+import { ModulesDO } from '../../types/modulesDO';
 
 @Component({
   selector: 'app-group-search',
@@ -12,13 +10,35 @@ import {ActivatedRoute} from "@angular/router";
 })
 export class GroupSearchComponent implements OnInit {
 
-  route: ActivatedRoute;
+   faculties: FacultyDO[] = [
+    { fakultaet_ID: 1, title: 'Informatik' },
+    { fakultaet_ID: 1, title: 'Informatik' },
+    { fakultaet_ID: 1, title: 'Informatik' },
+    { fakultaet_ID: 1, title: 'Informatik' }
+  ];
+   modules: ModulesDO[] = [
+     { member_ID: 1, modul_ID:1, title: 'Betriebssysteme' },
+     { member_ID: 1, modul_ID:1, title: 'Betriebssysteme' },
+     { member_ID: 1, modul_ID:1, title: 'Betriebssysteme' },
+     { member_ID: 1, modul_ID:1, title: 'Betriebssysteme' },
+     { member_ID: 1, modul_ID:1, title: 'Betriebssysteme' },
+     { member_ID: 1, modul_ID:1, title: 'Betriebssysteme' },
+   ];
+   selectedModule:ModulesDO;
+   selectedFaculty:FacultyDO;
 
   constructor() {}
 
   ngOnInit(): void {
   }
 
+  onSelectFac(faculty: FacultyDO): void {
+    this.selectedFaculty = faculty;
+  }
+
+  onSelectMod(module: ModulesDO): void {
+    this.selectedModule = module;
+  }
   showFaculties() {
   //  this.route.params.subscribe((params)=> {
    //   this.dataService.getFacultyData().then((response) => {
diff --git a/frontend/src/app/components/navi-bar/navi-bar.component.css b/frontend/src/app/components/navi-bar/navi-bar.component.css
index 8eb323142408e5085ad2b6d2ad39190bf2832460..29ddca23b73768769436fb045dd894ec7574449e 100644
--- a/frontend/src/app/components/navi-bar/navi-bar.component.css
+++ b/frontend/src/app/components/navi-bar/navi-bar.component.css
@@ -2,8 +2,12 @@
   position: fixed;
   background-color: palegreen;
   height: 100%;
-  margin-right: 100em;
-  margin-left: -0.5%;
+  width: 15%;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  overflow-x: hidden;
+  padding-top: 20px;
 }
 
 #myGroups, #findGroup, #createGroup {
diff --git a/frontend/src/app/components/navi-bar/navi-bar.component.html b/frontend/src/app/components/navi-bar/navi-bar.component.html
index 52162d28068e508d1b9a4ddec510f31b918542a3..793671f0afbbd56b76dfac26b49d2c5da416005d 100644
--- a/frontend/src/app/components/navi-bar/navi-bar.component.html
+++ b/frontend/src/app/components/navi-bar/navi-bar.component.html
@@ -6,11 +6,11 @@
 
   <a><button id="findGroup"
              routerLink="/group-search">
-    Gruppe Finden
+    Gruppe Suchen
   </button></a>
 
   <a><button id="createGroup"
              routerLink="/create-group">
-    Gruppe erstellen
+    Gruppe Erstellen
   </button></a>
 </nav>
diff --git a/frontend/src/app/components/user-login/user-login.component.css b/frontend/src/app/components/user-login/user-login.component.css
index 3faf9fefe249eb715def55f2bd41155930cd0b36..ccbb696b24fbd8af6e1be300ccdf47578d0a4bc5 100644
--- a/frontend/src/app/components/user-login/user-login.component.css
+++ b/frontend/src/app/components/user-login/user-login.component.css
@@ -1,11 +1,14 @@
 
 #welcome {
-  position: absolute;
+  position: fixed;
+  height: 30vh;
+  margin-left: 35%;
+  margin-top: 10%;
   background-color: palegreen;
   border-radius: 20px;
   box-shadow: 0px 0px 5px 1px;
-  margin-left: 38%;
-  margin-top: 10%;
+  align-items: center;
+  justify-content: center;
   font: 13px Helvetica;
 
 }
@@ -24,6 +27,8 @@ h2 {
 #userLogin {
   margin-left: 8em;
   margin-bottom: 2em;
+  align-items: center;
+  justify-content: center;
 }
 
 input {