From 90b934a36996c0f489096f3641350a1c0d3b7c89 Mon Sep 17 00:00:00 2001
From: sephrat <34862846+sephrat@users.noreply.github.com>
Date: Sat, 27 May 2023 18:01:54 +0200
Subject: [PATCH] fix: Fix various styling issues (#4935)

---
 .../albums-grid/albums-grid.component.html    |  12 +-
 .../movies-grid/movies-grid.component.html    |  10 +-
 .../components/tv-grid/tv-grid.component.html |  12 +-
 .../failedrequests.component.html             |  53 +++++----
 .../failedrequests.component.ts               |   1 +
 .../app/settings/issues/issues.component.html |  11 +-
 .../src/app/settings/jobs/jobs.component.html |  76 ++++++-------
 .../massemail/massemail.component.html        |  60 +++++-----
 .../notifications/gotify.component.html       |  44 ++++----
 .../notifications/mattermost.component.html   |  49 ++++----
 .../notifications/mobile.component.html       |  21 ++--
 .../notifications/newsletter.component.html   |  16 +--
 .../notifications/pushbullet.component.html   |  32 ++----
 .../notifications/pushover.component.html     | 105 +++++++++---------
 .../notifications/slack.component.html        |  72 ++++++------
 .../notifications/telegram.component.html     |  27 +++--
 .../notifications/webhook.component.html      |  29 ++---
 .../usermanagement.component.html             |  31 +++---
 .../usermanagement-user.component.html        |  10 +-
 19 files changed, 330 insertions(+), 341 deletions(-)

diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html
index 7e06a73364..c98270e7b2 100644
--- a/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html
+++ b/src/Ombi/ClientApp/src/app/requests-list/components/albums-grid/albums-grid.component.html
@@ -5,13 +5,13 @@
     <!-- <div class="row"> -->
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.PendingRequests' | translate}}</button>
             <button type="button" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
+                class="grow">{{'Requests.ProcessingRequests' | translate}}</button>
             <button type="button" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+                class="grow">{{'Requests.AvailableRequests' | translate}}</button>
+            <button type="button" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 
@@ -69,4 +69,4 @@
     </table>
 
     <mat-paginator [length]="resultsLength" [pageSize]="gridCount"></mat-paginator>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
index 0e91ce5e3c..1111403215 100644
--- a/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
+++ b/src/Ombi/ClientApp/src/app/requests-list/components/movies-grid/movies-grid.component.html
@@ -5,13 +5,13 @@
     <!-- <div class="row"> -->
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.PendingRequests' | translate}}</button>
             <button type="button" id="filterProcessing" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
+                class="grow">{{'Requests.ProcessingRequests' | translate}}</button>
             <button type="button" id="filterAvailable" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+                class="grow">{{'Requests.AvailableRequests' | translate}}</button>
+            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 
diff --git a/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html b/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html
index d7045665a3..3c03e06adc 100644
--- a/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html
+++ b/src/Ombi/ClientApp/src/app/requests-list/components/tv-grid/tv-grid.component.html
@@ -5,13 +5,13 @@
 
     <div class="row justify-content-md-center top-spacing">
         <div class="btn-group" role="group">
-            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.AllRequests' | translate}}</button>
-            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.PendingRequests' | translate}}</button>
+            <button type="button" id="filterAll" (click)="switchFilter(RequestFilter.All)" [attr.color]="currentFilter === RequestFilter.All ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.All ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.AllRequests' | translate}}</button>
+            <button type="button" id="filterPending" (click)="switchFilter(RequestFilter.Pending)" [attr.color]="currentFilter === RequestFilter.Pending ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Pending ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.PendingRequests' | translate}}</button>
             <button type="button" id="filterProcessing" (click)="switchFilter(RequestFilter.Processing)" [attr.color]="currentFilter === RequestFilter.Processing ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Processing ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.ProcessingRequests' | translate}}</button>
+                class="grow">{{'Requests.ProcessingRequests' | translate}}</button>
             <button type="button" id="filterAvailable" (click)="switchFilter(RequestFilter.Available)" [attr.color]="currentFilter === RequestFilter.Available ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Available ? 'mat-accent' : 'mat-primary'" mat-raised-button
-                class="btn grow">{{'Requests.AvailableRequests' | translate}}</button>
-            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="btn grow">{{'Requests.DeniedRequests' | translate}}</button>
+                class="grow">{{'Requests.AvailableRequests' | translate}}</button>
+            <button type="button" id="filterDenied" (click)="switchFilter(RequestFilter.Denied)" [attr.color]="currentFilter === RequestFilter.Denied ? 'accent' : 'primary'" [ngClass]="currentFilter === RequestFilter.Denied ? 'mat-accent' : 'mat-primary'" mat-raised-button class="grow">{{'Requests.DeniedRequests' | translate}}</button>
         </div>
     </div>
 
@@ -63,7 +63,7 @@
         <ng-container matColumnDef="actions">
             <th mat-header-cell *matHeaderCellDef> </th>
             <td mat-cell *matCellDef="let element">
-                <a id="detailsButton{{element.id}}" mat-raised-button color="accent" [routerLink]="'/details/tv/' + element.parentRequest.externalProviderId">{{'Requests.Details' | translate}}</a> 
+                <a id="detailsButton{{element.id}}" mat-raised-button color="accent" [routerLink]="'/details/tv/' + element.parentRequest.externalProviderId">{{'Requests.Details' | translate}}</a>
                 <button id="optionsButton{{element.id}}" mat-raised-button color="warn" (click)="openOptions(element)" *ngIf="isAdmin">{{'Requests.Options' | translate}}</button>
             </td>
         </ng-container>
diff --git a/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html b/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html
index 2af9fbfdae..3eec0bffe4 100644
--- a/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html
@@ -2,26 +2,35 @@
 <settings-menu></settings-menu>
 
 <div class="small-middle-container">
-<table class="table table-striped table-hover table-responsive table-condensed">
-    <thead>
-        <tr>
-            <td>Title</td>
-            <td>Type</td>
-            <td>Retry Count</td>
-            <td>Error Description</td>
-            <td>Delete</td>
-        </tr>
-    </thead>
-    <tbody>
-        <tr *ngFor="let v of vm">
-            <td class="vcenter">
-                {{v.title}}
-            </td>
-            <td>{{RequestType[v.type] | humanize}}</td>
-            <td class="vcenter">{{v.retryCount}}</td>
-            <td class="vcenter"> <i [pTooltip]="v.error" class="fas fa-info-circle"></i></td>
-            <td class="vcenter"><button type="button" class="mat-focus-indicator mat-flat-button mat-button-base mat-warn" (click)="remove(v)">Remove</button></td>
-        </tr>
-    </tbody>
-</table>
+  <table mat-table [dataSource]="vm">
+
+    <ng-container matColumnDef="title">
+      <th mat-header-cell *matHeaderCellDef>Title</th>
+      <td mat-cell *matCellDef="let v">{{v.title}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="type">
+      <th mat-header-cell *matHeaderCellDef>Type</th>
+      <td mat-cell *matCellDef="let v">{{RequestType[v.type] | humanize}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="retryCount">
+      <th mat-header-cell *matHeaderCellDef>Retry Count</th>
+      <td mat-cell *matCellDef="let v">{{v.retryCount}}</td>
+    </ng-container>
+
+    <ng-container matColumnDef="errorDescription">
+      <th mat-header-cell *matHeaderCellDef>Error Description</th>
+      <td mat-cell *matCellDef="let v"><i [pTooltip]="v.error" class="fas fa-info-circle"></i></td>
+    </ng-container>
+
+    <ng-container matColumnDef="deleteBtn">
+      <th mat-header-cell *matHeaderCellDef>Delete</th>
+      <td mat-cell *matCellDef="let v"><button mat-raised-button color="warn" (click)="remove(v)">Remove</button></td>
+    </ng-container>
+
+    <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
+    <tr mat-row *matRowDef="let myRowData; columns: columnsToDisplay"></tr>
+
+  </table>
 </div>
diff --git a/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.ts b/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.ts
index feae7cfaf1..dfe4920347 100644
--- a/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.ts
+++ b/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.ts
@@ -8,6 +8,7 @@ import { RequestRetryService } from "../../services";
 })
 export class FailedRequestsComponent implements OnInit {
 
+    public columnsToDisplay = ["title", "type", "retryCount", "errorDescription", "deleteBtn"];
     public vm: IFailedRequestsViewModel[];
     public RequestType = RequestType;
 
diff --git a/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html b/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
index 59da74a2e3..bd05f9ee0e 100644
--- a/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/issues/issues.component.html
@@ -48,12 +48,11 @@
     <div class="col-md-6">
         <div *ngIf="categories">
             <div class="form-group row">
-                <div class="col-md-12">
-                    <label for="categoryToAdd" class="control-label">Add Category</label>
-                </div>
                 <div class="col-md-9">
-                    <input type="text" [(ngModel)]="categoryToAdd.value" class="form-control form-control-custom " id="categoryToAdd"
-                        name="categoryToAdd" value="{{categoryToAdd.value}}">
+                    <mat-form-field appearance="outline">
+                        <mat-label>Add Category</mat-label>
+                        <input matInput type="text" [(ngModel)]="categoryToAdd.value" id="categoryToAdd" name="categoryToAdd" value="{{categoryToAdd.value}}">
+                  </mat-form-field>
                 </div>
                 <div class="col-md-3">
                     <button mat-raised-button (click)="addCategory()">Add</button>
@@ -74,4 +73,4 @@
         </div>
     </div>
 </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html b/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
index 47e7ef1cde..28bb71bb83 100644
--- a/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/jobs/jobs.component.html
@@ -6,83 +6,83 @@
         <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
             <small>Changes require a restart.</small><p>
             <small>You can generate valid CRON Expressions here: <a href="http://www.cronmaker.com/" target="_blank">https://www.cronmaker.com/</a></small>
-            <div style="margin-top:1em;">    
+            <div style="margin-top:1em;">
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                    <mat-label for="sonarrSync" class="control-mat-label">Sonarr Sync</mat-label>              
+                    <mat-label for="sonarrSync" class="control-mat-label">Sonarr Sync</mat-label>
                         <input matInput type="text" [ngClass]="{'form-error': form.get('sonarrSync').hasError('required')}" id="sonarrSync" name="sonarrSync" formControlName="sonarrSync">
                         <small *ngIf="form.get('sonarrSync').hasError('required')" class="error-text">The Sonarr Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('sonarrSync')?.value)">Test</button>
-                        
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('sonarrSync')?.value)">Test</button>
+
                 </div>
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                    <mat-label for="sickRageSync" class="control-mat-label">SickRage Sync</mat-label>              
+                    <mat-label for="sickRageSync" class="control-mat-label">SickRage Sync</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('sonarrSync').hasError('required')}" id="sickRageSync" name="sickRageSync" formControlName="sickRageSync">
                         <small *ngIf="form.get('sickRageSync').hasError('required')" class="error-text">The SickRage Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('sickRageSync')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('sickRageSync')?.value)">Test</button>
                 </div>
 
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                        <mat-label for="radarrSync" class="control-mat-label">Radarr Sync</mat-label>              
+                        <mat-label for="radarrSync" class="control-mat-label">Radarr Sync</mat-label>
                             <input type="text" matInput [ngClass]="{'form-error': form.get('radarrSync').hasError('required')}" id="radarrSync" name="radarrSync" formControlName="radarrSync">
                             <small *ngIf="form.get('radarrSync').hasError('required')" class="error-text">The Radarr Sync is required</small></mat-form-field>
-                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('radarrSync')?.value)">Test</button>
+                            <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('radarrSync')?.value)">Test</button>
                     </div>
 
                     <div class="form-group cronBox">
                         <mat-form-field appearance="outline" floatLabel=always>
-                            <mat-label for="lidarrArtistSync" class="control-mat-label">Lidarr Sync</mat-label>              
+                            <mat-label for="lidarrArtistSync" class="control-mat-label">Lidarr Sync</mat-label>
                                 <input type="text" matInput [ngClass]="{'form-error': form.get('lidarrArtistSync').hasError('required')}" id="lidarrArtistSync" name="lidarrArtistSync" formControlName="lidarrArtistSync">
                                 <small *ngIf="form.get('lidarrArtistSync').hasError('required')" class="error-text">The Lidarr Sync is required</small></mat-form-field>
-                                <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('lidarrArtistSync')?.value)">Test</button>
+                                <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('lidarrArtistSync')?.value)">Test</button>
                         </div>
-        
+
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                    <mat-label for="couchPotatoSync" class="control-mat-label">CouchPotato Sync</mat-label>              
+                    <mat-label for="couchPotatoSync" class="control-mat-label">CouchPotato Sync</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('radarrSync').hasError('required')}" id="couchPotatoSync" name="couchPotatoSync" formControlName="couchPotatoSync">
                         <small *ngIf="form.get('couchPotatoSync').hasError('required')" class="error-text">The CouchPotato Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('couchPotatoSync')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('couchPotatoSync')?.value)">Test</button>
                 </div>
-                
+
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                    <mat-label for="automaticUpdater" class="control-mat-label">Automatic Update</mat-label>              
+                    <mat-label for="automaticUpdater" class="control-mat-label">Automatic Update</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('automaticUpdater').hasError('required')}" id="automaticUpdater" name="automaticUpdater" formControlName="automaticUpdater">
                         <small *ngIf="form.get('automaticUpdater').hasError('required')" class="error-text">The Automatic Update is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('automaticUpdater')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('automaticUpdater')?.value)">Test</button>
                 </div>
 
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                    <mat-label for="retryRequests" class="control-mat-label">Retry Failed Requests</mat-label>              
+                    <mat-label for="retryRequests" class="control-mat-label">Retry Failed Requests</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('retryRequests').hasError('required')}" id="retryRequests" name="retryRequests" formControlName="retryRequests">
                         <small *ngIf="form.get('retryRequests').hasError('required')" class="error-text">The Retry Requests is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('retryRequests')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('retryRequests')?.value)">Test</button>
                 </div>
 
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                    <mat-label for="plexContentSync" class="control-mat-label">Plex Sync</mat-label>              
+                    <mat-label for="plexContentSync" class="control-mat-label">Plex Sync</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('plexContentSync').hasError('required')}" id="plexContentSync" name="plexContentSync" formControlName="plexContentSync">
                         <small *ngIf="form.get('plexContentSync').hasError('required')" class="error-text">The Plex Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('plexContentSync')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('plexContentSync')?.value)">Test</button>
                 </div>
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                        <mat-label for="plexRecentlyAddedSync" class="control-mat-label">Plex Recently Added Sync</mat-label>              
+                        <mat-label for="plexRecentlyAddedSync" class="control-mat-label">Plex Recently Added Sync</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('plexRecentlyAddedSync').hasError('required')}" id="plexRecentlyAddedSync" name="plexRecentlyAddedSync" formControlName="plexRecentlyAddedSync">
                         <small *ngIf="form.get('plexRecentlyAddedSync').hasError('required')" class="error-text">The Plex Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('plexRecentlyAddedSync')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('plexRecentlyAddedSync')?.value)">Test</button>
                 </div>
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                        <mat-label for="plexWatchlistImport" class="control-mat-label">Plex Watchlist Import</mat-label>              
+                        <mat-label for="plexWatchlistImport" class="control-mat-label">Plex Watchlist Import</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('plexWatchlistImport').hasError('required')}" id="plexWatchlistImport" name="plexWatchlistImport" formControlName="plexWatchlistImport">
                         <small *ngIf="form.get('plexWatchlistImport').hasError('required')" class="error-text">The Plex Watchlist Import is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('plexWatchlistImport')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('plexWatchlistImport')?.value)">Test</button>
                 </div>
 
                 <div class="form-group cronBox">
@@ -90,15 +90,15 @@
                     <mat-label for="embyContentSync" class="control-mat-label">Emby Sync</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('embyContentSync').hasError('required')}" id="embyContentSync" name="embyContentSync" formControlName="embyContentSync">
                         <small *ngIf="form.get('embyContentSync').hasError('required')" class="error-text">The Emby Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('embyContentSync')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('embyContentSync')?.value)">Test</button>
                 </div>
 
                 <div class="form-group cronBox">
                     <mat-form-field appearance="outline" floatLabel=always>
-                        <mat-label for="embyRecentlyAddedSync" class="control-mat-label">Emby Recently Added Sync</mat-label>              
+                        <mat-label for="embyRecentlyAddedSync" class="control-mat-label">Emby Recently Added Sync</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('embyRecentlyAddedSync').hasError('required')}" id="embyRecentlyAddedSync" name="embyRecentlyAddedSync" formControlName="embyRecentlyAddedSync">
                         <small *ngIf="form.get('embyRecentlyAddedSync').hasError('required')" class="error-text">The Emby Recently Added Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('embyRecentlyAddedSync')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('embyRecentlyAddedSync')?.value)">Test</button>
                 </div>
 
                 <div class="form-group cronBox">
@@ -106,7 +106,7 @@
                     <mat-label for="jellyfinContentSync" class="control-label">Jellyfin Sync</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('jellyfinContentSync').hasError('required')}" id="jellyfinContentSync" name="jellyfinContentSync" formControlName="jellyfinContentSync">
                         <small *ngIf="form.get('jellyfinContentSync').hasError('required')" class="error-text">The Jellyfin Sync is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('jellyfinContentSync')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('jellyfinContentSync')?.value)">Test</button>
                 </div>
 
                 <div class="form-group cronBox">
@@ -114,31 +114,31 @@
                     <mat-label for="userImporter" class="control-mat-label">User Importer</mat-label>
                         <input type="text" matInput [ngClass]="{'form-error': form.get('userImporter').hasError('required')}" id="userImporter" name="userImporter" formControlName="userImporter">
                         <small *ngIf="form.get('userImporter').hasError('required')" class="error-text">The User Importer is required</small></mat-form-field>
-                        <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('userImporter')?.value)">Test</button>
+                        <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('userImporter')?.value)">Test</button>
                 </div>
 
                     <div class="form-group cronBox">
                         <mat-form-field appearance="outline" floatLabel=always>
-                        <mat-label for="userImporter" class="control-mat-label">Newsletter</mat-label>              
+                        <mat-label for="userImporter" class="control-mat-label">Newsletter</mat-label>
                             <input type="text" matInput [ngClass]="{'form-error': form.get('newsletter').hasError('required')}" id="newsletter" name="newsletter" formControlName="newsletter">
                             <small *ngIf="form.get('newsletter').hasError('required')" class="error-text">The Newsletter is required</small></mat-form-field>
-                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('newsletter')?.value)">Test</button>
+                            <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('newsletter')?.value)">Test</button>
                     </div>
 
                     <div class="form-group cronBox">
                         <mat-form-field appearance="outline" floatLabel=always>
-                        <mat-label for="userImporter" class="control-mat-label">Issue Purge/Delete</mat-label>              
+                        <mat-label for="userImporter" class="control-mat-label">Issue Purge/Delete</mat-label>
                             <input type="text" matInput [ngClass]="{'form-error': form.get('issuesPurge').hasError('required')}" id="issuesPurge" name="issuesPurge" formControlName="issuesPurge">
                             <small *ngIf="form.get('issuesPurge').hasError('required')" class="error-text">The Issues Purge is required</small></mat-form-field>
-                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('issuesPurge')?.value)">Test</button>
+                            <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('issuesPurge')?.value)">Test</button>
                     </div>
 
                     <div class="form-group cronBox">
                         <mat-form-field appearance="outline" floatLabel=always>
-                        <mat-label for="userImporter" class="control-mat-label">Media Data Refresh</mat-label>              
+                        <mat-label for="userImporter" class="control-mat-label">Media Data Refresh</mat-label>
                             <input type="text" matInput [ngClass]="{'form-error': form.get('mediaDatabaseRefresh').hasError('required')}" id="mediaDatabaseRefresh" name="mediaDatabaseRefresh" formControlName="mediaDatabaseRefresh">
                             <small *ngIf="form.get('mediaDatabaseRefresh').hasError('required')" class="error-text">The Media Database Refresh is required</small></mat-form-field>
-                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('mediaDatabaseRefresh')?.value)">Test</button>
+                            <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('mediaDatabaseRefresh')?.value)">Test</button>
                     </div>
 
                     <div class="form-group cronBox">
@@ -146,15 +146,15 @@
                         <mat-label for="userImporter" class="control-mat-label">Auto Available Request Deletion</mat-label>
                             <input type="text" matInput [ngClass]="{'form-error': form.get('autoDeleteRequests').hasError('required')}" id="autoDeleteRequests" name="autoDeleteRequests" formControlName="autoDeleteRequests">
                             <small *ngIf="form.get('autoDeleteRequests').hasError('required')" class="error-text">Auto Available Request Deletion is required</small></mat-form-field>
-                            <button mat-raised-button type="button" class="btn btn-sm btn-primary-outline cronbtn" (click)="testCron(form.get('autoDeleteRequests')?.value)">Test</button>
+                            <button mat-raised-button type="button" class="cronbtn" (click)="testCron(form.get('autoDeleteRequests')?.value)">Test</button>
                     </div>
             </div>
             <div class="form-group cronBox">
                     <div>
                         <button mat-raised-button type="submit" [disabled]="form.invalid" class="mat-focus-indicator mat-raised-button mat-button-base mat-accent">Submit</button>
-                        
+
                     </div>
                 </div>
         </form>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/massemail/massemail.component.html b/src/Ombi/ClientApp/src/app/settings/massemail/massemail.component.html
index fb6ab0ad0e..2126b96f64 100644
--- a/src/Ombi/ClientApp/src/app/settings/massemail/massemail.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/massemail/massemail.component.html
@@ -5,34 +5,42 @@
     <legend>Mass Email</legend>
 <div class="row">
     <div class="col-md-6">
-            <div class="form-group">
-                        <input type="text" class="form-control form-control-custom " id="subject" name="subject" placeholder="Subject" [(ngModel)]="subject" [ngClass]="{'form-error': missingSubject}">
-                        <small *ngIf="missingSubject" class="error-text">Hey! We need a subject!</small>
-                </div>
 
-                <div class="form-group" >
-                    <textarea rows="10" type="text" class="form-control-custom form-control" id="themeContent" name="themeContent" [(ngModel)]="message" placeholder="This supports HTML"></textarea>
-                </div>
+        <div class="form-group">
+            <mat-form-field>
+                <mat-label>Subject</mat-label>
+                <input matInput type="text" id="subject" name="subject" placeholder="Subject" [(ngModel)]="subject" [ngClass]="{'form-error': missingSubject}">
+                <small *ngIf="missingSubject" class="error-text">Hey! We need a subject!</small>
+            </mat-form-field>
+        </div>
 
-                <div class="form-group">
-                    <label for="logo" class="control-label">Message Preview</label>
-                    <br/>
-                    <small>May appear differently on email clients</small>
-                    <hr/>
-                    <div [innerHTML]="message"></div>
-                    <hr/>
-                </div>
-                <small>This will send out the Mass email BCC'ing all of the selected users rather than sending individual messages</small>
-                <div class="md-form-field">
-                    <mat-slide-toggle [(ngModel)]="bcc">BCC</mat-slide-toggle>
-                  </div>
-                  <br>
-                  <br>
-                <div class="form-group">
-                        <div>
-                            <button type="submit" id="save" (click)="send()" class="mat-focus-indicator btn-spacing mat-raised-button mat-button-base mat-accent">Send</button>
-                        </div>
-                    </div>
+        <div class="form-group">
+            <mat-form-field appearance="outline">
+              <mat-label>Content</mat-label>
+              <textarea matInput rows="10" type="text" id="themeContent" name="themeContent" [(ngModel)]="message" placeholder="This supports HTML"></textarea>
+            </mat-form-field>
+        </div>
+
+        <div class="form-group">
+            <label for="logo" class="control-label">Message Preview</label>
+            <br/>
+            <small>May appear differently on email clients</small>
+            <mat-divider></mat-divider>
+            <div [innerHTML]="message"></div>
+            <mat-divider></mat-divider>
+        </div>
+
+        <small>This will send out the Mass email BCC'ing all of the selected users rather than sending individual messages</small>
+        <div class="md-form-field">
+            <mat-slide-toggle [(ngModel)]="bcc">BCC</mat-slide-toggle>
+        </div>
+        <br>
+        <br>
+        <div class="form-group">
+            <div>
+                <button type="submit" id="save" (click)="send()" class="mat-focus-indicator btn-spacing mat-raised-button mat-button-base mat-accent">Send</button>
+            </div>
+        </div>
     </div>
     <div class="col-md-6">
         <!--Users Section-->
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html
index 9b2a7c938e..39017b3a91 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/gotify.component.html
@@ -7,42 +7,42 @@
             <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
                 <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
+                    <mat-checkbox id="enable" formControlName="enabled">Enabled</mat-checkbox>
                 </div>
 
                 <div class="form-group">
-                    <label for="baseUrl" class="control-label">Base URL</label>
-
-                    <input type="text" class="form-control form-control-custom " id="baseUrl" name="baseUrl" [ngClass]="{'form-error': form.get('baseUrl').hasError('required')}" formControlName="baseUrl" pTooltip="Enter the URL of your gotify server.">
-                    <small *ngIf="form.get('baseUrl').hasError('required')" class="error-text">The Base URL is required</small>
+                    <mat-form-field>
+                        <mat-label>Base URL</mat-label>
+                        <input matInput type="text" id="baseUrl" name="baseUrl" [ngClass]="{'form-error': form.get('baseUrl').hasError('required')}" formControlName="baseUrl" pTooltip="Enter the URL of your gotify server.">
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="applicationToken" class="control-label">Application Token</label>
-
-                    <input type="text" class="form-control form-control-custom " id="applicationToken" name="applicationToken" [ngClass]="{'form-error': form.get('applicationToken').hasError('required')}" formControlName="applicationToken" pTooltip="Enter your Application token from Gotify.">
-                    <small *ngIf="form.get('applicationToken').hasError('required')" class="error-text">The Application Token is required</small>
+                    <mat-form-field>
+                        <mat-label>Application Token</mat-label>
+                        <input matInput type="text" id="applicationToken" name="applicationToken" [ngClass]="{'form-error': form.get('applicationToken').hasError('required')}" formControlName="applicationToken" pTooltip="Enter your Application token from Gotify.">
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="priority" class="control-label">Priority</label>
+                    <mat-form-field>
+                        <mat-label>Priority</mat-label>
+
+                        <mat-select id="priority" name="priority" formControlName="priority" pTooltip="The priority you want your gotify notifications sent as.">
+                          <mat-option value="4">Normal</mat-option>
+                          <mat-option value="8">High</mat-option>
+                          <mat-option value="2">Low</mat-option>
+                          <mat-option value="0">Lowest</mat-option>
+                        </mat-select>
+                    </mat-form-field>
                     <div>
-                        <select class="form-control form-control-custom " id="priority" name="priority" formControlName="priority" pTooltip="The priority you want your gotify notifications sent as.">
-                            <option value="4">Normal</option>
-                            <option value="8">High</option>
-                            <option value="2">Low</option>
-                            <option value="0">Lowest</option>
-                        </select>
                     </div>
                 </div>
 
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -53,7 +53,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save">Submit</button>
                     </div>
                 </div>
             </form>
@@ -64,4 +64,4 @@
             <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html
index d7998c417f..293ac8c015 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/mattermost.component.html
@@ -7,47 +7,42 @@
             <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
                 <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
+                    <mat-checkbox id="enable" formControlName="enabled">Enabled</mat-checkbox>
                 </div>
 
                 <div class="form-group">
                     <small class="control-label"> Mattermost > Integrations > Incoming Webhook > Add Incoming Webhook. You will then have a Webhook</small>
-                    <label for="webhookUrl" class="control-label">Incoming Webhook Url</label>
-                    
-                        <input type="text" class="form-control form-control-custom " id="webhookUrl" name="webhookUrl" formControlName="webhookUrl" [ngClass]="{'form-error': form.get('webhookUrl').hasError('required')}">
-                        <small *ngIf="form.get('webhookUrl').hasError('required')" class="error-text">The Webhook Url is required</small>
-                </div>
+                    <mat-form-field>
+                        <mat-label>Incoming Webhook Url</mat-label>
+                        <input matInput type="text" id="webhookUrl" name="webhookUrl" formControlName="webhookUrl" [ngClass]="{'form-error': form.get('webhookUrl').hasError('required')}">
+                    </mat-form-field>
+                  </div>
 
 
-                <div class="form-group">
-                    <label for="channel" class="control-label">Channel Override</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="channel" name="channel" formControlName="channel" pTooltip="Optional, you can override the default channel">
-                    </div>
+                  <div class="form-group">
+                  <mat-form-field>
+                      <mat-label>Channel Override</mat-label>
+                      <input matInput type="text" id="channel" name="channel" formControlName="channel" pTooltip="Optional, you can override the default channel">
+                  </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="username" class="control-label">Username Override</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="username" name="username" formControlName="username" pTooltip="Optional, this will override the username you used for the Webhook">
-                    </div>
+                  <mat-form-field>
+                      <mat-label>Username Override</mat-label>
+                      <input matInput type="text" id="username" name="username" formControlName="username" pTooltip="Optional, this will override the username you used for the Webhook">
+                  </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="iconUrl" class="control-label">Icon Override</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="iconUrl" name="iconUrl" formControlName="iconUrl" pTooltip="Optional, this will override the icon you use for the Webhook">
-                    </div>
+                  <mat-form-field>
+                      <mat-label>Icon Override</mat-label>
+                      <input matInput type="text" id="iconUrl" name="iconUrl" formControlName="iconUrl" pTooltip="Optional, this will override the icon you use for the Webhook">
+                  </mat-form-field>
                 </div>
 
-
-
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -58,7 +53,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save">Submit</button>
                     </div>
                 </div>
             </form>
@@ -69,4 +64,4 @@
             <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html
index c5573c57eb..c46b0705a1 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/mobile.component.html
@@ -36,30 +36,29 @@
 
                     <div class="row lmobile-actions">
                         <div class="form-group">
-                            <label for="select" class="control-label">Users</label>
-                            <div>
-                                <select class="form-control form-control-custom" id="select" [(ngModel)]="testUserId" [ngModelOptions]="{standalone: true}">
-                                    <option value="">Please select</option>    
-                                    <option *ngFor="let x of userList" [value]="x.userId">{{x.username}}</option>
-                                </select>
-                            </div>
+                            <mat-form-field>
+                                <mat-label>Users</mat-label>
+                                <mat-select id="select" [(ngModel)]="testUserId" [ngModelOptions]="{standalone: true}">
+                                    <mat-option *ngFor="let x of userList" [value]="x.userId">{{x.username}}</mat-option>
+                                </mat-select>
+                            </mat-form-field>
                         </div>
 
                         <div class="form-group">
                             <div>
-                                <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-danger-outline">Send Test Notification</button>
+                                <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" mat-raised-button>Send Test Notification</button>
                             </div>
                         </div>
                         <div class="form-group">
                             <div>
-                                <button [disabled]="form.invalid" mat-raised-button type="button" (click)="remove(form)" class="btn btn-danger-outline">Remove User</button>
+                                <button [disabled]="form.invalid" mat-raised-button type="button" (click)="remove(form)" mat-raised-button>Remove User</button>
                             </div>
                         </div>
 
 
                         <div class="form-group">
                             <div>
-                                <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                                <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" mat-raised-button>Submit</button>
                             </div>
                         </div>
                     </div>
@@ -72,4 +71,4 @@
             </div>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/newsletter.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/newsletter.component.html
index 9aea59448e..afa0e5ffb9 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/newsletter.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/newsletter.component.html
@@ -11,7 +11,7 @@
                         <mat-slide-toggle  type="checkbox" id="enabled" [(ngModel)]="settings.enabled"  ng-checked="settings.enabled">Enable</mat-slide-toggle>
                     </div>
                 </div>
-    
+
                 <div class="form-group">
                     <div class="checkbox">
                         <mat-slide-toggle  type="checkbox" id="disableTv" [(ngModel)]="settings.disableTv"  ng-checked="settings.disableTv">Disable TV</mat-slide-toggle>
@@ -46,11 +46,11 @@
 
                 <div class="form-group">
                     <div>
-                        <button mat-raised-button type="submit" id="save" (click)="onSubmit()" class="btn btn-primary-outline">Submit</button>
-                        <button mat-raised-button type="button" (click)="test()" class="btn btn-danger-outline">Test</button>
-                        <button mat-raised-button type="button" (click)="updateDatabase()" class="btn btn-info-outline" tooltipPosition="top" matTooltip="I recommend running this with a fresh Ombi install, this will set all the current *found* content to have been sent via Newsletter, 
+                        <button mat-raised-button type="submit" id="save" (click)="onSubmit()">Submit</button>
+                        <button mat-raised-button type="button" (click)="test()">Test</button>
+                        <button mat-raised-button type="button" (click)="updateDatabase()"tooltipPosition="top" matTooltip="I recommend running this with a fresh Ombi install, this will set all the current *found* content to have been sent via Newsletter,
                         if you do not do this then everything that Ombi has found in your libraries will go out on the first email!">Update Database</button>
-                        <button mat-raised-button type="button" (click)="trigger()" class="btn btn-danger-outline">Trigger now</button>
+                        <button mat-raised-button type="button" (click)="trigger()">Trigger now</button>
                     </div>
                                  </div>
         </div>
@@ -73,7 +73,7 @@
                     </mat-form-field>
                 </div>
                 <div class="col-md-3">
-                    <button mat-raised-button class="btn btn-primary-outline" (click)="addEmail()" matTooltip="Don't forget to press the Submit button!">Add</button>
+                    <button mat-raised-button (click)="addEmail()" matTooltip="Don't forget to press the Submit button!">Add</button>
                 </div>
             </div>
 
@@ -83,10 +83,10 @@
                         {{email}}
                     </div>
                     <div class="col-md-3">
-                        <button mat-raised-button class="btn btn-sm btn-danger-outline" (click)="deleteEmail(email)">Delete</button>
+                        <button mat-raised-button (click)="deleteEmail(email)">Delete</button>
                     </div>
                 </div>
             </div>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html
index e8115e4f58..073acc13dd 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/pushbullet.component.html
@@ -7,32 +7,24 @@
             <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
                 <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
+                    <mat-checkbox id="enable" formControlName="enabled">Enabled</mat-checkbox>
                 </div>
 
                 <small>You can find this here: <a href="https://www.pushbullet.com/#settings/account" target="_blank">https://www.pushbullet.com/#settings/account </a></small>
-                <div class="form-group">
-                    <label for="accessToken" class="control-label">Access Token</label>
-              
-                        <input type="text" class="form-control form-control-custom " id="accessToken" name="accessToken" formControlName="accessToken" [ngClass]="{'form-error': form.get('accessToken').hasError('required')}">
-                        <small *ngIf="form.get('accessToken').hasError('required')" class="error-text">The Access Token is required</small>
-                </div>
 
-                <div class="form-group">
-                    <label for="channelTag" class="control-label">Channel Tag</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="channelTag" name="channelTag" formControlName="channelTag" pTooltip="Optional, this is if you want to send a message to everyone subscribed to a channel">
-                    </div>
-                </div>
+                <mat-form-field>
+                    <mat-label>Access Token</mat-label>
+                    <input matInput type="text" id="accessToken" name="accessToken" formControlName="accessToken" [ngClass]="{'form-error': form.get('accessToken').hasError('required')}">
+                </mat-form-field>
 
-               
+                <mat-form-field>
+                    <mat-label>Channel Tag</mat-label>
+                    <input matInput type="text" id="channelTag" name="channelTag" formControlName="channelTag" pTooltip="Optional, this is if you want to send a message to everyone subscribed to a channel">
+                </mat-form-field>
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -43,7 +35,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save">Submit</button>
                     </div>
                 </div>
             </form>
@@ -54,4 +46,4 @@
             <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html
index 926b344e0b..6b94220f2b 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/pushover.component.html
@@ -7,74 +7,71 @@
             <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
                 <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
+                    <mat-checkbox id="enable" formControlName="enabled">Enabled</mat-checkbox>
                 </div>
 
-      
+
                 <div class="form-group">
-                    <label for="accessToken" class="control-label">Access Token</label>
-                   
-                        <input type="text" class="form-control form-control-custom " id="accessToken" name="accessToken" [ngClass]="{'form-error': form.get('accessToken').hasError('required')}" formControlName="accessToken" pTooltip="Enter your API Key from Pushover.">
-                    <small *ngIf="form.get('accessToken').hasError('required')" class="error-text">The Access Token is required</small>
+                    <mat-form-field>
+                        <mat-label>Access Token</mat-label>
+                        <input matInput type="text" id="accessToken" name="accessToken" [ngClass]="{'form-error': form.get('accessToken').hasError('required')}" formControlName="accessToken" pTooltip="Enter your API Key from Pushover.">
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="userToken" class="control-label">User Token</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="userToken" name="userToken" formControlName="userToken" pTooltip="Your user or group key from Pushover.">
-                    </div>
+                    <mat-form-field>
+                        <mat-label>User Token</mat-label>
+                        <input matInput type="text" id="userToken" name="userToken" formControlName="userToken" pTooltip="Your user or group key from Pushover.">
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="priority" class="control-label">Priority</label>
-                    <div>
-                        <select class="form-control form-control-custom " id="priority" name="priority" formControlName="priority" pTooltip="The priority you want your pushover notifications sent as.">
-                            <option value="0">Normal</option>
-                            <option value="1">High</option>
-                            <option value="-1">Low</option>
-                            <option value="-2">Lowest</option>
-                        </select>
-                    </div>
+                    <mat-form-field>
+                      <mat-label>Priority</mat-label>
+                      <mat-select id="priority" name="priority" formControlName="priority" pTooltip="The priority you want your pushover notifications sent as.">
+                        <mat-option value="0">Normal</mat-option>
+                        <mat-option value="1">High</mat-option>
+                        <mat-option value="-1">Low</mat-option>
+                        <mat-option value="-2">Lowest</mat-option>
+                      </mat-select>
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="sound" class="control-label">Sound</label>
-                    <div>
-                        <select class="form-control form-control-custom " id="sound" name="sound" formControlName="sound" pTooltip="The sound you want your pushover notifications sent with.">
-                            <option value="pushover">Pushover</option>
-                            <option value="bike">Bike</option>
-                            <option value="bugle">Bugle</option>
-                            <option value="cashregister">Cash Register</option>
-                            <option value="classical">Classical</option>
-                            <option value="cosmic">Cosmic</option>
-                            <option value="falling">Falling</option>
-                            <option value="gamelan">Gamelan</option>
-                            <option value="incoming">Incoming</option>
-                            <option value="intermission">Intermission</option>
-                            <option value="magic">Magic</option>
-                            <option value="mechanical">Mechanical</option>
-                            <option value="pianobar">Piano Bar</option>
-                            <option value="siren">Siren</option>
-                            <option value="spacealarm">Space Alarm</option>
-                            <option value="tugboat">Tug Boat</option>
-                            <option value="alien">Alien Alarm (long)</option>
-                            <option value="climb">Climb (long)</option>
-                            <option value="persistent">Persistent (long)</option>
-                            <option value="echo">Pushover Echo (long)</option>
-                            <option value="updown">Up Down (long)</option>
-                            <option value="none">None</option>
-                        </select>
-                    </div>
-                </div>
+                    <mat-form-field>
+                        <mat-label>Sound</mat-label>
+                        <mat-select id="sound" name="sound" formControlName="sound" pTooltip="The sound you want your pushover notifications sent with.">
+                            <mat-option value="pushover">Pushover</mat-option>
+                            <mat-option value="bike">Bike</mat-option>
+                            <mat-option value="bugle">Bugle</mat-option>
+                            <mat-option value="cashregister">Cash Register</mat-option>
+                            <mat-option value="classical">Classical</mat-option>
+                            <mat-option value="cosmic">Cosmic</mat-option>
+                            <mat-option value="falling">Falling</mat-option>
+                            <mat-option value="gamelan">Gamelan</mat-option>
+                            <mat-option value="incoming">Incoming</mat-option>
+                            <mat-option value="intermission">Intermission</mat-option>
+                            <mat-option value="magic">Magic</mat-option>
+                            <mat-option value="mechanical">Mechanical</mat-option>
+                            <mat-option value="pianobar">Piano Bar</mat-option>
+                            <mat-option value="siren">Siren</mat-option>
+                            <mat-option value="spacealarm">Space Alarm</mat-option>
+                            <mat-option value="tugboat">Tug Boat</mat-option>
+                            <mat-option value="alien">Alien Alarm (long)</mat-option>
+                            <mat-option value="climb">Climb (long)</mat-option>
+                            <mat-option value="persistent">Persistent (long)</mat-option>
+                            <mat-option value="echo">Pushover Echo (long)</mat-option>
+                            <mat-option value="updown">Up Down (long)</mat-option>
+                            <mat-option value="none">None</mat-option>
+                        </mat-select>
+                      </mat-form-field>
+                  </div>
+
 
-               
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -85,7 +82,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save">Submit</button>
                     </div>
                 </div>
             </form>
@@ -96,4 +93,4 @@
             <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html
index 378e480609..7d921c870b 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/slack.component.html
@@ -7,57 +7,51 @@
             <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
                 <div class="form-group">
-                   
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
+                    <mat-checkbox id="enable" formControlName="enabled">Enabled</mat-checkbox>
                 </div>
 
- 
-                <div class="form-group">
-                    
-                    <label for="webhookUrl" class="control-label">Webhook Url</label>
-                    <div>
-                        
-                        <small class="control-label"> Click <a target="_blank" href="https://my.slack.com/services/new/incoming-webhook/">Here</a> and follow the guide. You will then have a Webhook Url</small>
-                        <input type="text" class="form-control form-control-custom " id="webhookUrl" name="webhookUrl" formControlName="webhookUrl"  [ngClass]="{'form-error': form.get('webhookUrl').hasError('required')}">
-                        <small *ngIf="form.get('webhookUrl').hasError('required')" class="error-text">The Webhook Url is required</small>
-                    </div>
-                </div>
 
                 <div class="form-group">
-                    <label for="username" class="control-label">Username Override</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="username" name="username" formControlName="username" pTooltip="Optional, this will override the username you used for the Webhook. Default is Ombi">
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="channel" class="control-label">Channel Override</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="channel" name="channel" formControlName="channel" pTooltip="Optional, this will override the channel you used for the Webhook">
-                    </div>
+
+                    <small class="control-label"> Click <a target="_blank" href="https://my.slack.com/services/new/incoming-webhook/">Here</a> and follow the guide. You will then have a Webhook Url</small>
+                    <mat-form-field>
+                        <mat-label>Webhook Url</mat-label>
+                        <input matInput type="text" id="webhookUrl" name="webhookUrl" formControlName="webhookUrl"  [ngClass]="{'form-error': form.get('webhookUrl').hasError('required')}">
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="iconEmoji" class="control-label">Emoji Icon Override</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="iconEmoji" name="iconEmoji" formControlName="iconEmoji" pTooltip="Optional, this will override the Icon you used for the Webhook">
-                    </div>
+                    <mat-form-field>
+                        <mat-label>Username Override</mat-label>
+                        <input matInput type="text" id="username" name="username" formControlName="username" pTooltip="Optional, this will override the username you used for the Webhook. Default is Ombi">
+                    </mat-form-field>
                 </div>
                 <div class="form-group">
-                    <label for="iconUrl" class="control-label">Url Icon Override</label>
-                    <div>
-                        <input type="text" class="form-control form-control-custom " id="iconUrl" name="iconUrl" formControlName="iconUrl" pTooltip="Optional, this will override the Icon you used for the Webhook">
-                    </div>
+                    <mat-form-field>
+                        <mat-label>Channel Override</mat-label>
+                        <input matInput type="text" id="channel" name="channel" formControlName="channel" pTooltip="Optional, this will override the channel you used for the Webhook">
+                    </mat-form-field>
                 </div>
-                
+
+              <div class="form-group">
+                <mat-form-field>
+                    <mat-label>Emoji Icon Override</mat-label>
+                    <input matInput type="text" id="iconEmoji" name="iconEmoji" formControlName="iconEmoji" pTooltip="Optional, this will override the Icon you used for the Webhook">
+                </mat-form-field>
+              </div>
+              <div class="form-group">
+                <mat-form-field>
+                    <mat-label>Url Icon Override</mat-label>
+                    <input matInput type="text" id="iconUrl" name="iconUrl" formControlName="iconUrl" pTooltip="Optional, this will override the Icon you used for the Webhook">
+                </mat-form-field>
+              </div>
+
                 <small>You can find more details about the Slack API <a target="_blank" href="https://api.slack.com/custom-integrations/incoming-webhooks">Here</a></small>
-               
+
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -68,7 +62,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save">Submit</button>
                     </div>
                 </div>
             </form>
@@ -79,4 +73,4 @@
             <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html
index 51e4c36d41..2f1bba1e2f 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/telegram.component.html
@@ -7,27 +7,26 @@
             <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
                 <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
+                    <mat-checkbox id="enable" formControlName="enabled">Enabled</mat-checkbox>
                 </div>
 
 
+
                 <div class="form-group">
-                    <label for="botApi" class="control-label">Bot API</label>
-                    <input type="text" class="form-control form-control-custom " id="botApi" name="botApi" formControlName="botApi" [ngClass]="{'form-error': form.get('botApi').hasError('required')}">
-                    <small *ngIf="form.get('botApi').hasError('required')" class="error-text">The Bot API is required</small>
+                    <mat-form-field>
+                        <mat-label>Bot API</mat-label>
+                        <input matInput type="text" id="botApi" name="botApi" formControlName="botApi" [ngClass]="{'form-error': form.get('botApi').hasError('required')}">
+                    </mat-form-field>
                     <small>You need a bot for Telegram notifications, You can find out how to create a bot
                         <a href="https://core.telegram.org/bots#6-botfather">here</a>.</small>
 
                 </div>
 
-
                 <div class="form-group">
-                    <label for="chatId" class="control-label">Chat Id</label>
-                    <input type="text" class="form-control form-control-custom " id="chatId" name="chatId" formControlName="chatId" [ngClass]="{'form-error': form.get('chatId').hasError('required')}">
-                    <small *ngIf="form.get('chatId').hasError('required')" class="error-text">The Chat Id is required</small>
+                    <mat-form-field>
+                        <mat-label>Chat Id</mat-label>
+                        <input matInput type="text" id="chatId" name="chatId" formControlName="chatId" [ngClass]="{'form-error': form.get('chatId').hasError('required')}">
+                    </mat-form-field>
                     <small>This is the Chat ID from Telegram. You can get the Chat Id from
                         <a href="https://telegram.me/get_id_bot">here</a>. This also supports Group Chat Id's.</small>
                 </div>
@@ -43,7 +42,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -52,7 +51,7 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save">Submit</button>
                     </div>
                 </div>
             </form>
@@ -63,4 +62,4 @@
             <notification-templates [templates]="templates" [showSubject]="false"></notification-templates>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html b/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
index aab095953b..5ec6038632 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
@@ -7,31 +7,26 @@
             <form novalidate [formGroup]="form" (ngSubmit)="onSubmit(form)">
 
                 <div class="form-group">
-                    <div class="checkbox">
-                        <input type="checkbox" id="enable" formControlName="enabled">
-                        <label for="enable">Enabled</label>
-                    </div>
+                    <mat-checkbox id="enable" formControlName="enabled">Enabled</mat-checkbox>
                 </div>
 
                 <div class="form-group">
-                    <label for="baseUrl" class="control-label">Base URL</label>
-
-                    <input type="text" class="form-control form-control-custom " id="webhookUrl" name="webhookUrl" [ngClass]="{'form-error': form.get('webhookUrl').hasError('required')}" formControlName="webhookUrl" pTooltip="Enter the URL of your webhook server.">
-                    <small *ngIf="form.get('webhookUrl').hasError('required')" class="error-text">The Webhook URL is required</small>
+                    <mat-form-field>
+                        <mat-label>Base URL</mat-label>
+                        <input matInput type="text" id="webhookUrl" name="webhookUrl" [ngClass]="{'form-error': form.get('webhookUrl').hasError('required')}" formControlName="webhookUrl" pTooltip="Enter the URL of your webhook server.">
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
-                    <label for="applicationToken" class="control-label">Application Token
-                        <i class="far fa-question-circle" pTooltip="Optional authentication token. Will be sent as 'Access-Token' header."></i>
-                    </label>
-
-                    <input type="text" class="form-control form-control-custom " id="applicationToken" name="applicationToken" [ngClass]="{'form-error': form.get('applicationToken').hasError('required')}" formControlName="applicationToken" pTooltip="Enter your Application token from Webhook.">
-                    <small *ngIf="form.get('applicationToken').hasError('required')" class="error-text">The Application Token is required</small>
+                    <mat-form-field>
+                        <mat-label>Application Token</mat-label>
+                          <input matInput type="text" id="applicationToken" name="applicationToken" [ngClass]="{'form-error': form.get('applicationToken').hasError('required')}" formControlName="applicationToken" pTooltip="Optional authentication token. Will be sent as 'Access-Token' header.">
+                    </mat-form-field>
                 </div>
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)" class="btn btn-primary-outline">
+                        <button [disabled]="form.invalid" mat-raised-button type="button" (click)="test(form)">
                             Test
                             <div id="spinner"></div>
                         </button>
@@ -40,10 +35,10 @@
 
                 <div class="form-group">
                     <div>
-                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save" class="btn btn-primary-outline">Submit</button>
+                        <button [disabled]="form.invalid" mat-raised-button type="submit" id="save">Submit</button>
                     </div>
                 </div>
             </form>
         </div>
     </fieldset>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html b/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
index 7512294df7..d97714be61 100644
--- a/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/usermanagement/usermanagement.component.html
@@ -55,7 +55,7 @@
     </div>
     <div class="col-md-6">
         <h3>Default Roles</h3>
-        <hr>
+        <mat-divider />
         <div *ngFor="let c of claims">
             <div class="form-group">
                 <div>
@@ -67,13 +67,13 @@ <h3>Default Roles</h3>
 
         <h3>Default Request Limits</h3>
 
-        <hr>
+        <mat-divider />
 
         <div class="form-group">
-            <label for="movieRequestLimit" class="control-label">Movie Request Limit</label>
-            <div>
-                <input type="text" [(ngModel)]="settings.movieRequestLimit" class="form-control form-small form-control-custom" id="movieRequestLimit" name="movieRequestLimit" value="{{settings?.movieRequestLimit}}">
-            </div>
+            <mat-form-field>
+                <mat-label>Movie Request Limit</mat-label>
+                <input matInput type="text" [(ngModel)]="settings.movieRequestLimit" id="movieRequestLimit" name="movieRequestLimit" value="{{settings?.movieRequestLimit}}">
+            </mat-form-field>
         </div>
 
         <mat-label>Movie Request Limit Type</mat-label>
@@ -84,23 +84,24 @@ <h3>Default Request Limits</h3>
         </mat-select>
 
         <div class="form-group">
-            <label for="episodeRequestLimit" class="control-label">Episode Request Limit</label>
-            <div>
-                <input type="text" [(ngModel)]="settings.episodeRequestLimit" class="form-control form-small form-control-custom" id="episodeRequestLimit" name="episodeRequestLimit" value="{{settings?.episodeRequestLimit}}">
-            </div>
-
+            <mat-form-field>
+                <mat-label>Episode Request Limit</mat-label>
+                <input matInput type="text" [(ngModel)]="settings.episodeRequestLimit" id="episodeRequestLimit" name="episodeRequestLimit" value="{{settings?.episodeRequestLimit}}">
+            </mat-form-field>
         </div>
+
         <mat-label>Episode Request Limit Type</mat-label>
         <mat-select  id="episodeRequestLimitType" [(value)]="settings.episodeRequestLimitType">
         <mat-option *ngFor="let value of requestLimitTypes" [value]="value">
             {{RequestLimitType[value]}}
         </mat-option>
         </mat-select>
+
         <div class="form-group">
-            <label for="episodeRequestLimit" class="control-label">Music Request Limit</label>
-            <div>
-                <input type="text" [(ngModel)]="settings.musicRequestLimit" class="form-control form-small form-control-custom" id="musicRequestLimit" name="musicRequestLimit" value="{{settings?.musicRequestLimit}}">
-            </div>
+            <mat-form-field>
+                <mat-label>Music Request Limit</mat-label>
+                <input matInput type="text" [(ngModel)]="settings.musicRequestLimit" id="musicRequestLimit" name="musicRequestLimit" value="{{settings?.musicRequestLimit}}">
+            </mat-form-field>
         </div>
         <mat-label>Music Request Limit Type</mat-label>
         <mat-select  id="musicRequestLimitType" [(value)]="settings.musicRequestLimitType">
diff --git a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html
index fa79862fc2..f754e05661 100644
--- a/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html
+++ b/src/Ombi/ClientApp/src/app/usermanagement/usermanagement-user.component.html
@@ -178,11 +178,11 @@
 <div class="col-md-6 col-sm-12">
     <button *ngIf="!edit" type="button" mat-raised-button color="accent" data-test="createuserbtn"  (click)="create()">Create</button>
     <div *ngIf="edit">
-      <button type="button" data-test="updatebtn" mat-raised-button color="accent" class="btn btn-primary-outline" (click)="update()">Update</button>
-      <button type="button" data-test="deletebtn" mat-raised-button color="warn" class="btn btn-danger-outline" (click)="delete()">Delete</button>
-      <button type="button" style="float:right;" mat-raised-button color="primary" class="btn btn-info-outline" (click)="resetPassword()" matTooltip="You need your SMTP settings setup">Send
+      <button type="button" data-test="updatebtn" mat-raised-button color="accent" (click)="update()">Update</button>
+      <button type="button" data-test="deletebtn" mat-raised-button color="warn" (click)="delete()">Delete</button>
+      <button type="button" style="float:right;" mat-raised-button color="primary" (click)="resetPassword()" matTooltip="You need your SMTP settings setup">Send
         Reset Password Link</button>
-        <button *ngIf="appUrl" type="button" mat-raised-button color="accent" class="btn btn-info-outline" (click)="appLink()" matTooltip="Send this link to the user and they can then open the app and directly login">Copy users App Link</button>
+        <button *ngIf="appUrl" type="button" mat-raised-button color="accent" (click)="appLink()" matTooltip="Send this link to the user and they can then open the app and directly login">Copy users App Link</button>
 
     </div>
 
@@ -196,4 +196,4 @@
 
 
 
-</div>
\ No newline at end of file
+</div>