diff --git a/frontend/src/app/components/footer/footer.component.scss b/frontend/src/app/components/footer/footer.component.scss
index db08325..2416d2b 100644
--- a/frontend/src/app/components/footer/footer.component.scss
+++ b/frontend/src/app/components/footer/footer.component.scss
@@ -14,5 +14,5 @@ span.line {
 
 .heart {
   font-size: 22px;
-  translate: 0 25%;
+  transform: translate(0, 25%);
 }
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.html b/frontend/src/app/routes/settings/roles/settings-roles.component.html
index c3eecb7..42a708d 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles.component.html
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.html
@@ -1,2 +1,84 @@
 <h1>Roles</h1>
 
+<mat-table [dataSource]="dataSource" class="mat-elevation-z2">
+  <ng-container matColumnDef="name">
+    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
+    <mat-cell *matCellDef="let role">{{ role.name }}</mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="permissions">
+    <mat-header-cell class="d-none d-md-flex" *matHeaderCellDef>Permissions</mat-header-cell>
+    <mat-cell class="d-none d-md-flex" *matCellDef="let role">
+      <mat-chip-list aria-label="Role Permissions">
+        <mat-chip
+          [disableRipple]="true"
+          [disabled]="true"
+          *ngIf="isSystem(role)"
+        >
+          System
+        </mat-chip>
+        <mat-chip
+          [disableRipple]="true"
+          *ngFor="
+            let permission of role.permissions.slice(0, permissionsTruncate)
+          "
+        >
+          {{ uiFriendlyPermission(permission) }}
+        </mat-chip>
+        <mat-chip
+          [disableRipple]="true"
+          *ngIf="role.permissions.length > permissionsTruncate"
+        >
+          +{{ role.permissions.length - permissionsTruncate }}
+        </mat-chip>
+      </mat-chip-list>
+    </mat-cell>
+  </ng-container>
+
+  <ng-container matColumnDef="actions">
+    <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
+    <mat-cell *matCellDef="let role">
+      <button mat-icon-button (click)="editRole(role)">
+        <mat-icon fontSet="material-icons-outlined" aria-label="Edit"
+          >edit</mat-icon
+        >
+      </button>
+      <button
+        *ngIf="!isSystem(role)"
+        mat-icon-button
+        (click)="deleteRole(role)"
+      >
+        <mat-icon
+          fontSet="material-icons-outlined"
+          class="icon-red"
+          aria-label="Delete"
+        >
+          delete
+        </mat-icon>
+      </button>
+    </mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
+</mat-table>
+
+<mat-paginator
+  color="accent"
+  [pageSizeOptions]="pageSizeOptions"
+  [pageSize]="startingPageSize"
+  showFirstLastButtons
+  aria-label="Select page of roles"
+>
+</mat-paginator>
+
+<div class="fabholder">
+  <button
+    mat-fab
+    color="accent"
+    class="fabbutton fullanimate mat-elevation-z6"
+    (click)="addRole()"
+  >
+    <mat-icon fontSet="material-icons-outlined">add</mat-icon>
+  </button>
+</div>
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.scss b/frontend/src/app/routes/settings/roles/settings-roles.component.scss
new file mode 100644
index 0000000..67c6177
--- /dev/null
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.scss
@@ -0,0 +1,21 @@
+mat-table {
+  width: 100%;
+
+}
+
+.mat-column-actions {
+  justify-content: end;
+}
+
+.mat-column-permissions {
+  flex-grow: 3;
+}
+
+.icon-red {
+  color: #f44336;
+}
+
+mat-chip-list {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.component.ts b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
index 1bae3af..8ea98ff 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles.component.ts
+++ b/frontend/src/app/routes/settings/roles/settings-roles.component.ts
@@ -1,12 +1,68 @@
-import { Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import {
+  Permission,
+  UIFriendlyPermissions
+} from 'picsur-shared/dist/dto/permissions';
+import { ERole } from 'picsur-shared/dist/entities/role.entity';
+import { HasFailed } from 'picsur-shared/dist/types';
+import { SnackBarType } from 'src/app/models/snack-bar-type';
+import { RolesService } from 'src/app/services/api/roles.service';
+import { UtilService } from 'src/app/util/util.service';
 
 @Component({
   templateUrl: './settings-roles.component.html',
+  styleUrls: ['./settings-roles.component.scss'],
 })
-export class SettingsRolesComponent implements OnInit {
-  constructor() {}
+export class SettingsRolesComponent implements OnInit, AfterViewInit {
+  public readonly displayedColumns: string[] = [
+    'name',
+    'permissions',
+    'actions',
+  ];
+  public readonly pageSizeOptions: number[] = [5, 10, 25, 100];
+  public readonly startingPageSize = this.pageSizeOptions[2];
+  public readonly permissionsTruncate = 5;
+
+  public dataSource = new MatTableDataSource<ERole>([]);
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+
+  constructor(
+    private rolesService: RolesService,
+    private utilService: UtilService
+  ) {}
 
   ngOnInit(): void {
+    this.initRoles().catch(console.error);
   }
 
+  ngAfterViewInit() {
+    this.dataSource.paginator = this.paginator;
+  }
+
+  async initRoles() {
+    const roles = await this.rolesService.getRoles();
+    if (HasFailed(roles)) {
+      this.utilService.showSnackBar('Failed to load roles', SnackBarType.Error);
+      return;
+    }
+
+    this.dataSource.data = roles;
+  }
+
+  addRole() {}
+
+  editRole(role: ERole) {}
+
+  deleteRole(role: ERole) {}
+
+  uiFriendlyPermission(permission: Permission) {
+    return UIFriendlyPermissions[permission];
+  }
+
+  isSystem(role: ERole) {
+    return false;
+  }
 }
diff --git a/frontend/src/app/routes/settings/roles/settings-roles.module.ts b/frontend/src/app/routes/settings/roles/settings-roles.module.ts
index 6140e66..bd53855 100644
--- a/frontend/src/app/routes/settings/roles/settings-roles.module.ts
+++ b/frontend/src/app/routes/settings/roles/settings-roles.module.ts
@@ -1,5 +1,10 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatChipsModule } from '@angular/material/chips';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatTableModule } from '@angular/material/table';
 import { SettingsRolesComponent } from './settings-roles.component';
 import { SettingsRolesRoutingModule } from './settings-roles.routing.module';
 
@@ -8,6 +13,11 @@ import { SettingsRolesRoutingModule } from './settings-roles.routing.module';
   imports: [
     CommonModule,
     SettingsRolesRoutingModule,
+    MatIconModule,
+    MatButtonModule,
+    MatTableModule,
+    MatChipsModule,
+    MatPaginatorModule,
   ],
 })
 export class SettingsRolesRouteModule {}
diff --git a/frontend/src/app/routes/settings/syspref/syspref-option/settings-syspref-option.component.html b/frontend/src/app/routes/settings/syspref/syspref-option/settings-syspref-option.component.html
index 8c48d1a..b22d974 100644
--- a/frontend/src/app/routes/settings/syspref/syspref-option/settings-syspref-option.component.html
+++ b/frontend/src/app/routes/settings/syspref/syspref-option/settings-syspref-option.component.html
@@ -9,6 +9,8 @@
           matInput
           [value]="pref.value"
           (change)="stringUpdateWrapper($event)"
+          autocorrect="off"
+          autocapitalize="none"
         />
       </mat-form-field>
     </div>
diff --git a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
index 0f5ee46..152ee8c 100644
--- a/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users-edit/settings-users-edit.component.html
@@ -22,6 +22,8 @@
           type="text"
           [formControl]="model.username"
           name="username"
+          autocorrect="off"
+          autocapitalize="none"
           required
         />
         <mat-error *ngIf="model.username.errors">
@@ -74,6 +76,8 @@
             [matChipInputFor]="chipList"
             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
             (matChipInputTokenEnd)="addRole($event)"
+            autocorrect="off"
+            autocapitalize="none"
           />
         </mat-chip-list>
         <mat-autocomplete
@@ -113,7 +117,13 @@
         {{ editing ? "Update" : "Add" }}
       </button>
 
-      <button mat-raised-button class="ms-2" color="primary" type="button" (click)="cancel()">
+      <button
+        mat-raised-button
+        class="ms-2"
+        color="primary"
+        type="button"
+        (click)="cancel()"
+      >
         Cancel
       </button>
     </div>
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 3a71499..caa4713 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.html
+++ b/frontend/src/app/routes/settings/users/settings-users.component.html
@@ -7,8 +7,8 @@
   </ng-container>
 
   <ng-container matColumnDef="roles">
-    <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
-    <mat-cell *matCellDef="let user">
+    <mat-header-cell class="d-none d-md-flex" *matHeaderCellDef>Roles</mat-header-cell>
+    <mat-cell class="d-none d-md-flex" *matCellDef="let user">
       <mat-chip-list aria-label="User Roles">
         <mat-chip
           [disableRipple]="true"
@@ -17,9 +17,18 @@
         >
           System
         </mat-chip>
-        <mat-chip [disableRipple]="true" *ngFor="let role of user.roles">
+        <mat-chip
+          [disableRipple]="true"
+          *ngFor="let role of user.roles.slice(0, rolesTruncate)"
+        >
           {{ role }}
         </mat-chip>
+        <mat-chip
+          [disableRipple]="true"
+          *ngIf="user.roles.length > rolesTruncate"
+        >
+          +{{ user.roles.length - rolesTruncate }}
+        </mat-chip>
       </mat-chip-list>
     </mat-cell>
   </ng-container>
@@ -48,7 +57,7 @@
   </ng-container>
 
   <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-  <mat-row *matRowDef="let row; columns: displayedColumns"> pog </mat-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"> </mat-row>
 </mat-table>
 
 <mat-paginator
diff --git a/frontend/src/app/routes/settings/users/settings-users.component.scss b/frontend/src/app/routes/settings/users/settings-users.component.scss
index a70f43f..57686c1 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.scss
+++ b/frontend/src/app/routes/settings/users/settings-users.component.scss
@@ -6,6 +6,10 @@ mat-table {
   justify-content: end;
 }
 
+.mat-column-roles {
+  flex-grow: 2;
+}
+
 .icon-red {
   color: #f44336;
 }
diff --git a/frontend/src/app/routes/settings/users/settings-users.component.ts b/frontend/src/app/routes/settings/users/settings-users.component.ts
index afb0ce0..a2fd877 100644
--- a/frontend/src/app/routes/settings/users/settings-users.component.ts
+++ b/frontend/src/app/routes/settings/users/settings-users.component.ts
@@ -20,6 +20,7 @@ export class SettingsUsersComponent implements OnInit {
   public readonly displayedColumns: string[] = ['username', 'roles', 'actions'];
   public readonly pageSizeOptions: number[] = [5, 10, 25, 100];
   public readonly startingPageSize = this.pageSizeOptions[2];
+  public readonly rolesTruncate = 5;
 
   public dataSubject = new BehaviorSubject<EUser[]>([]);
   public updateSubject = new Subject<PageEvent>();
diff --git a/frontend/src/app/routes/user/login/login.component.html b/frontend/src/app/routes/user/login/login.component.html
index fa1eae2..5d5fcf1 100644
--- a/frontend/src/app/routes/user/login/login.component.html
+++ b/frontend/src/app/routes/user/login/login.component.html
@@ -17,6 +17,8 @@
             type="text"
             [formControl]="model.username"
             name="username"
+            autocorrect="off"
+            autocapitalize="none"
             required
           />
           <mat-error *ngIf="model.username.errors">
diff --git a/frontend/src/app/routes/user/register/register.component.html b/frontend/src/app/routes/user/register/register.component.html
index df13d6e..d753b74 100644
--- a/frontend/src/app/routes/user/register/register.component.html
+++ b/frontend/src/app/routes/user/register/register.component.html
@@ -15,6 +15,8 @@
             type="text"
             [formControl]="model.username"
             name="username"
+            autocorrect="off"
+            autocapitalize="none"
             required
           />
           <mat-error *ngIf="model.username.errors">
diff --git a/shared/src/dto/permissions.ts b/shared/src/dto/permissions.ts
index 12fa406..4b3c01d 100644
--- a/shared/src/dto/permissions.ts
+++ b/shared/src/dto/permissions.ts
@@ -35,12 +35,12 @@ export const UIFriendlyPermissions: {
   [Permission.ImageUpload]: 'Upload images',
 
   [Permission.UserLogin]: 'Login',
-  [Permission.UserMe]: 'View own user details',
+  [Permission.UserMe]: 'View self',
   [Permission.UserRegister]: 'Register',
 
-  [Permission.Settings]: 'View available settings',
+  [Permission.Settings]: 'View settings',
 
   [Permission.UserManage]: 'Manage users',
   [Permission.RoleManage]: 'Manage roles',
-  [Permission.SysPrefManage]: 'Manage system preferences',
+  [Permission.SysPrefManage]: 'Manage system',
 };