diff --git a/frontend/src/app/components/footer/footer.component.html b/frontend/src/app/components/footer/footer.component.html
index 331b13d..4231676 100644
--- a/frontend/src/app/components/footer/footer.component.html
+++ b/frontend/src/app/components/footer/footer.component.html
@@ -1,7 +1,9 @@
 <footer class="container">
   <p>
     <span class="line">
-      Made with 🤍 by
+      Made with
+      <span class="material-icons-outlined heart"> favorite_border </span>
+      by
       <a class="link-unstyled" href="https://rubikscraft.nl" target="_blank"
         >Rubikscraft</a
       >
diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index 4aa1d05..db08325 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@@ -11,3 +11,8 @@ footer {
 span.line {
   display: inline-block;
 }
+
+.heart {
+  font-size: 22px;
+  translate: 0 25%;
+}
diff --git a/frontend/src/app/components/footer/footer.module.ts b/frontend/src/app/components/footer/footer.module.ts
index dec2cb3..7282ca0 100644
--- a/frontend/src/app/components/footer/footer.module.ts
+++ b/frontend/src/app/components/footer/footer.module.ts
@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FooterComponent } from './footer.component';
 
-
 @NgModule({
   declarations: [FooterComponent],
   imports: [CommonModule],
diff --git a/frontend/src/app/components/header/header.component.html b/frontend/src/app/components/header/header.component.html
index c7da41a..2e2e873 100644
--- a/frontend/src/app/components/header/header.component.html
+++ b/frontend/src/app/components/header/header.component.html
@@ -29,7 +29,7 @@
     {{ user?.username }}
   </span>
   <button *ngIf="isLoggedIn" mat-icon-button [matMenuTriggerFor]="menu">
-    <mat-icon>account_circle</mat-icon>
+    <mat-icon fontSet="material-icons-outlined">account_circle</mat-icon>
   </button>
 
   <mat-menu #menu="matMenu" xPosition="before">
@@ -40,11 +40,11 @@
         </div>
       </span>
       <button *ngIf="canAccessSettings" mat-menu-item (click)="doSettings()">
-        <mat-icon>settings</mat-icon>
+        <mat-icon fontSet="material-icons-outlined">settings</mat-icon>
         <span>Settings</span>
       </button>
       <button mat-menu-item (click)="doLogout()">
-        <mat-icon>logout</mat-icon>
+        <mat-icon fontSet="material-icons-outlined">logout</mat-icon>
         <span>Logout</span>
       </button>
     </ng-template>
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.html b/frontend/src/app/routes/settings/roles/settings-roles.component.html
new file mode 100644
index 0000000..c3eecb7
--- /dev/null
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.html
@@ -0,0 +1,2 @@
+<h1>Roles</h1>
+
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.ts b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
new file mode 100644
index 0000000..1bae3af
--- /dev/null
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  templateUrl: './settings-roles.component.html',
+})
+export class SettingsRolesComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.module.ts b/frontend/src/app/routes/settings/roles/settings-roles.module.ts
new file mode 100644
index 0000000..6140e66
--- /dev/null
+++ b/frontend/src/app/routes/settings/roles/settings-roles.module.ts
@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { SettingsRolesComponent } from './settings-roles.component';
+import { SettingsRolesRoutingModule } from './settings-roles.routing.module';
+
+@NgModule({
+  declarations: [SettingsRolesComponent],
+  imports: [
+    CommonModule,
+    SettingsRolesRoutingModule,
+  ],
+})
+export class SettingsRolesRouteModule {}
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.routing.module.ts b/frontend/src/app/routes/settings/roles/settings-roles.routing.module.ts
new file mode 100644
index 0000000..f92d8bf
--- /dev/null
+++ b/frontend/src/app/routes/settings/roles/settings-roles.routing.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { PRoutes } from 'src/app/models/picsur-routes';
+import { SettingsRolesComponent } from './settings-roles.component';
+
+const routes: PRoutes = [
+  {
+    path: '',
+    component: SettingsRolesComponent,
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class SettingsRolesRoutingModule {}
diff --git a/frontend/src/app/routes/settings/settings.routing.module.ts b/frontend/src/app/routes/settings/settings.routing.module.ts
index 5d746c0..01db174 100644
--- a/frontend/src/app/routes/settings/settings.routing.module.ts
+++ b/frontend/src/app/routes/settings/settings.routing.module.ts
@@ -5,6 +5,7 @@ import { PermissionGuard } from 'src/app/guards/permission.guard';
 import { PRoutes } from 'src/app/models/picsur-routes';
 import { SidebarResolverService } from 'src/app/services/sidebar-resolver/sidebar-resolver.service';
 import { SettingsGeneralRouteModule } from './general/settings-general.module';
+import { SettingsRolesRouteModule } from './roles/settings-roles.module';
 import { SettingsSidebarComponent } from './sidebar/settings-sidebar.component';
 import { SettingsSysprefRouteModule } from './syspref/settings-syspref.module';
 import { SettingsUsersRouteModule } from './users/settings-users.module';
@@ -36,7 +37,19 @@ const SettingsRoutes: PRoutes = [
           permissions: [Permission.UserManage],
           page: {
             title: 'Users',
-            icon: 'people',
+            icon: 'people_outline',
+            category: 'system',
+          },
+        },
+      },
+      {
+        path: 'roles',
+        loadChildren: () => SettingsRolesRouteModule,
+        data: {
+          permissions: [Permission.RoleManage],
+          page: {
+            title: 'Roles',
+            icon: 'admin_panel_settings',
             category: 'system',
           },
         },
diff --git a/frontend/src/app/routes/settings/sidebar/settings-sidebar.component.html b/frontend/src/app/routes/settings/sidebar/settings-sidebar.component.html
index 1d1899d..74d7991 100644
--- a/frontend/src/app/routes/settings/sidebar/settings-sidebar.component.html
+++ b/frontend/src/app/routes/settings/sidebar/settings-sidebar.component.html
@@ -8,7 +8,7 @@
       routerLinkActive="active"
       [routerLinkActiveOptions]="{ exact: true }"
     >
-      <mat-icon mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
+      <mat-icon fontSet="material-icons-outlined" mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
       <span mat-line>{{ route.data?.page?.title }}</span>
     </a>
   </ng-container>
@@ -24,7 +24,7 @@
       [routerLink]="'/settings/' + route.path"
       routerLinkActive="active"
     >
-      <mat-icon mat-list-icon>{{ route.data?.page?.icon }}</mat-icon>
+      <mat-icon fontSet="material-icons-outlined" mat-list-icon >{{ route.data?.page?.icon }}</mat-icon>
       <span mat-line>{{ route.data?.page?.title }}</span>
     </a>
   </ng-container>
diff --git a/frontend/src/app/routes/settings/users/settings-users.component.html b/frontend/src/app/routes/settings/users/settings-users.component.html
index e7bd286..3a71499 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users.component.html
@@ -10,7 +10,11 @@
     <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
     <mat-cell *matCellDef="let user">
       <mat-chip-list aria-label="User Roles">
-        <mat-chip [disableRipple]="true" [disabled]="true" *ngIf="isSystem(user)">
+        <mat-chip
+          [disableRipple]="true"
+          [disabled]="true"
+          *ngIf="isSystem(user)"
+        >
           System
         </mat-chip>
         <mat-chip [disableRipple]="true" *ngFor="let role of user.roles">
@@ -24,14 +28,21 @@
     <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
     <mat-cell *matCellDef="let user">
       <button mat-icon-button (click)="editUser(user)">
-        <mat-icon aria-label="Edit">edit</mat-icon>
+        <mat-icon fontSet="material-icons-outlined" aria-label="Edit"
+          >edit</mat-icon
+        >
       </button>
       <button
         *ngIf="!isSystem(user)"
         mat-icon-button
         (click)="deleteUser(user)"
       >
-        <mat-icon class="icon-red" aria-label="Delete">delete</mat-icon>
+        <mat-icon
+          fontSet="material-icons-outlined"
+          class="icon-red"
+          aria-label="Delete"
+          >delete</mat-icon
+        >
       </button>
     </mat-cell>
   </ng-container>
@@ -57,6 +68,6 @@
     class="fabbutton fullanimate mat-elevation-z6"
     (click)="addUser()"
   >
-    <mat-icon>add</mat-icon>
+    <mat-icon fontSet="material-icons-outlined">person_add</mat-icon>
   </button>
 </div>
diff --git a/frontend/src/scss/material-theme.scss b/frontend/src/scss/material-theme.scss
index a51efe0..b4ef430 100644
--- a/frontend/src/scss/material-theme.scss
+++ b/frontend/src/scss/material-theme.scss
@@ -10,7 +10,7 @@
 // have to load a single css file for Angular Material in your app.
 
 // Fonts
-@import "https://fonts.googleapis.com/icon?family=Material+Icons+Round";
+@import "https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp";
 @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
 
 $fontConfig: (