diff --git a/src/main/angular/src/app/pages/user/user.component.html b/src/main/angular/src/app/pages/user/user.component.html
index 23f21c6..299bc52 100644
--- a/src/main/angular/src/app/pages/user/user.component.html
+++ b/src/main/angular/src/app/pages/user/user.component.html
@@ -1,6 +1,29 @@
 <ng-container *ngIf="user !== null">
-  <h2>Benutzer: {{ user.name }}</h2>
 
-  <h3>Gemeinsame Gruppen</h3>
-  <app-group-list [groups]="commonGroups"></app-group-list>
+  <div class="tileContainer">
+
+    <div class="tile">
+      <div class="tileInner">
+        <div class="tileTitle">
+          Benutzer
+        </div>
+        <div class="tileContent">
+          {{ user.name }}
+        </div>
+      </div>
+    </div>
+
+    <div class="tile">
+      <div class="tileInner">
+        <div class="tileTitle">
+          Gemeinsame Gruppen
+        </div>
+        <div class="tileContent">
+          <app-group-list [groups]="commonGroups"></app-group-list>
+        </div>
+      </div>
+    </div>
+
+  </div>
+
 </ng-container>
diff --git a/src/main/angular/src/app/pages/user/user.component.ts b/src/main/angular/src/app/pages/user/user.component.ts
index 854ba64..ef40e30 100644
--- a/src/main/angular/src/app/pages/user/user.component.ts
+++ b/src/main/angular/src/app/pages/user/user.component.ts
@@ -6,6 +6,8 @@ import {GroupService} from "../../api/group/group.service";
 import {UserService} from "../../api/User/user.service";
 import {Group} from "../../api/group/Group";
 import {UserPublic} from "../../api/User/UserPublic";
+import {ReactiveFormsModule} from "@angular/forms";
+import {TextComponent} from "../../shared/text/text.component";
 
 @Component({
   selector: 'app-user',
@@ -13,7 +15,9 @@ import {UserPublic} from "../../api/User/UserPublic";
   imports: [
     NgForOf,
     NgIf,
-    GroupListComponent
+    GroupListComponent,
+    ReactiveFormsModule,
+    TextComponent
   ],
   templateUrl: './user.component.html',
   styleUrl: './user.component.less'