diff --git a/src/Ombi/ClientApp/angular.json b/src/Ombi/ClientApp/angular.json
index cd17cccc0..2e3ff44e5 100644
--- a/src/Ombi/ClientApp/angular.json
+++ b/src/Ombi/ClientApp/angular.json
@@ -29,7 +29,10 @@
               "src/styles/_imports.scss",
               "node_modules/bootstrap/scss/bootstrap.scss",
               "node_modules/primeng/resources/themes/md-dark-deeppurple/theme.css",
-              "node_modules/font-awesome/scss/font-awesome.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
+              "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
               "node_modules/primeng/resources/primeng.min.css",
               "node_modules/primeicons/primeicons.css",
               "node_modules/please-wait/src/please-wait.scss",
diff --git a/src/Ombi/ClientApp/package.json b/src/Ombi/ClientApp/package.json
index 777dcfe8c..6c1713eff 100644
--- a/src/Ombi/ClientApp/package.json
+++ b/src/Ombi/ClientApp/package.json
@@ -24,6 +24,7 @@
     "@angularclass/hmr": "^2.1.3",
     "@aspnet/signalr": "^1.1.0",
     "@auth0/angular-jwt": "^2.1.0",
+    "@fortawesome/fontawesome-free": "^5.15.2",
     "@fullcalendar/core": "^4.2.0",
     "@fullcalendar/daygrid": "^4.4.0",
     "@fullcalendar/interaction": "^4.2.0",
@@ -39,7 +40,6 @@
     "chart.js": "2.9.4",
     "core-js": "^2.5.4",
     "eventemitter2": "^5.0.1",
-    "font-awesome": "^4.7.0",
     "fullcalendar": "^4.0.0-alpha.4",
     "jquery": "3.3.1",
     "lodash": "^4.17.20",
diff --git a/src/Ombi/ClientApp/src/app/app.component.html b/src/Ombi/ClientApp/src/app/app.component.html
index f5f2d82eb..a8e527a6b 100644
--- a/src/Ombi/ClientApp/src/app/app.component.html
+++ b/src/Ombi/ClientApp/src/app/app.component.html
@@ -45,7 +45,7 @@
                     <ul *ngIf="customizationSettings.recentlyAddedPage" class="nav navbar-nav">
                         <li id="RecentlyAdded" [routerLinkActive]="['active']">
                             <a [routerLink]="['/recentlyadded']">
-                                <i class="fa fa-check"></i> {{ 'NavigationBar.RecentlyAdded' | translate }}</a>
+                                <i class="fas fa-check"></i> {{ 'NavigationBar.RecentlyAdded' | translate }}</a>
                         </li>
                     </ul>
                 </div>
diff --git a/src/Ombi/ClientApp/src/app/custompage/custompage.component.html b/src/Ombi/ClientApp/src/app/custompage/custompage.component.html
index d35c94141..ae2d00eb7 100644
--- a/src/Ombi/ClientApp/src/app/custompage/custompage.component.html
+++ b/src/Ombi/ClientApp/src/app/custompage/custompage.component.html
@@ -5,7 +5,7 @@
             <div class="form-group">
                     <label for="Ip" class="control-label">Page Title
                         
-                        <i *ngIf="form.get('title').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Title is required"></i>
+                        <i *ngIf="form.get('title').hasError('required')" class="fas fa-exclamation-circle error-text" pTooltip="Title is required"></i>
                     </label>
 
                         <input type="text" class="form-control form-control-custom " id="Ip" name="Ip" formControlName="title"  [ngClass]="{'form-error': form.get('title').hasError('required')}">
@@ -14,7 +14,7 @@
                 <div class="form-group">
                         <label for="Ip" class="control-label">Font Awesome Icon
                             
-                            <i *ngIf="form.get('fontAwesomeIcon').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="Font Awesome Icon is required"></i>
+                            <i *ngIf="form.get('fontAwesomeIcon').hasError('required')" class="fas fa-exclamation-circle error-text" pTooltip="Font Awesome Icon is required"></i>
                         </label>
     
                             <input type="text" class="form-control form-control-custom " id="fontAwesomeIcon" name="fontAwesomeIcon" formControlName="fontAwesomeIcon"  [ngClass]="{'form-error': form.get('fontAwesomeIcon').hasError('required')}">
diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html
index d7bac2d96..3ac12d570 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card-details.component.html
@@ -16,35 +16,35 @@
                     <span *ngIf="movie">
                         <a *ngIf="movie.plexUrl" class="media-icons" href="{{movie.plexUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                         <a *ngIf="movie.embyUrl" class="media-icons" href="{{movie.embyUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                         <a *ngIf="movie.jellyfinUrl" class="media-icons" href="{{movie.jellyfinUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnJellyfin' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                     </span>
 
                     <span *ngIf="tv">
                         <a *ngIf="tv.plexUrl" class="media-icons" href="{{tv.plexUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnPlex' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                         <a *ngIf="tv.embyUrl" class="media-icons" href="{{tv.embyUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnEmby' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                         <a *ngIf="tv.jellyfinUrl" class="media-icons" href="{{tv.jellyfinUrl}}" target="_blank">
                             <i matTooltip=" {{'Search.ViewOnJellyfin' | translate}}"
-                                class="fa fa-play-circle fa-2x grow"></i>
+                                class="fas fa-play-circle fa-2x grow"></i>
                         </a>
                     </span>
 
                     <a class="media-icons" (click)="close()">
-                        <i class="fa fa-window-close fa-2x grow"></i>
+                        <i class="fas fa-window-close fa-2x grow"></i>
                     </a>
                 </div>
 
@@ -123,14 +123,14 @@
             <span *ngIf="!movie.available">
                 <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                 <ng-template #requestedBtn>
-                    <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fa fa-check"></i>
+                    <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i class="fas fa-check"></i>
                         {{ 'Common.Requested' | translate }}</button>
                 </ng-template>
                 <ng-template #notRequestedBtn>
                     <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
-            <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
-              *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-            <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+            <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> <i
+              *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+            <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> {{
             'Common.Request' | translate }}</button>
                 </ng-template>
             </span>
@@ -140,27 +140,27 @@
 
             <div *ngIf="!tv.fullyAvailable" class="dropdown">
                 <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
-                    <i class="fa fa-plus"></i>
+                    <i class="fas fa-plus"></i>
                     {{ 'Common.Request' | translate }}
                     <span class="caret"></span>
                 </button>
             </div>
 
             <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent" [disabled]>
-                <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                <i class="fas fa-check"></i> {{'Common.Available' | translate }}</button>
               <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
                 [disabled]>
-                <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
+                <i class="fas fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
 
             <span *ngIf="tv.available">
                 <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right" class="btn-spacing btn-greem"
-                    href="{{tv.plexUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
+                    href="{{tv.plexUrl}}" target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnPlex' |
                     translate}}</a>
                 <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
-                    target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                    target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnEmby' |
                     translate}}</a>
                 <a *ngIf="tv.jellyfinUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.jellyfinUrl}}"
-                    target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnJellyfin' |
+                    target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnJellyfin' |
                     translate}}</a>
             </span>
             <button mat-raised-button class="btn-green btn-spacing" (click)="openDetails()"> {{
diff --git a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
index 177d49e3e..a782729a0 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/card/discover-card.component.html
@@ -22,7 +22,7 @@
                 <div class="col-12">
                     <button mat-raised-button class="btn-green full-width poster-request-btn" (click)="request($event)">
                         <mat-icon *ngIf="!loading">cloud_download</mat-icon>
-                        <i *ngIf="loading" class="fa fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
+                        <i *ngIf="loading" class="fas fa-spinner fa-pulse fa-2x fa-fw" aria-hidden="true"></i>
                     </button>
                 </div>
             </div>
diff --git a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
index e413cc372..959538444 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/grid/discover-grid.component.html
@@ -118,14 +118,14 @@
                                 *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                             <ng-template #requestedBtn>
                                 <button mat-raised-button class="btn-spacing btn-orange" [disabled]><i
-                                        class="fa fa-check"></i>
+                                        class="fas fa-check"></i>
                                     {{ 'Common.Requested' | translate }}</button>
                             </ng-template>
                             <ng-template #notRequestedBtn>
                                 <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
-                                    <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+                                    <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i>
+                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> {{
                         'Common.Request' | translate }}</button>
                             </ng-template>
                         </span>
@@ -135,7 +135,7 @@
 
                         <div *ngIf="!tv.fullyAvailable" class="dropdown">
                             <button mat-raised-button class="btn-orange btn-spacing" type="button" (click)="request()">
-                                <i class="fa fa-plus"></i>
+                                <i class="fas fa-plus"></i>
                                 {{ 'Common.Request' | translate }}
                                 <span class="caret"></span>
                             </button>
@@ -143,21 +143,21 @@
 
                         <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
                             [disabled]>
-                            <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                            <i class="fas fa-check"></i> {{'Common.Available' | translate }}</button>
                         <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button class="btn-spacing"
                             color="accent" [disabled]>
-                            <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
+                            <i class="fas fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
 
                         <span *ngIf="tv.available">
                             <a *ngIf="tv.plexUrl" mat-raised-button style="text-align: right"
                                 class="btn-spacing btn-greem" href="{{tv.plexUrl}}" target="_blank"><i
-                                    class="fa fa-eye"></i> {{'Search.ViewOnPlex' |
+                                    class="far fa-eye"></i> {{'Search.ViewOnPlex' |
                                 translate}}</a>
                             <a *ngIf="tv.embyUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.embyUrl}}"
-                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                                target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnEmby' |
                                 translate}}</a>
                             <a *ngIf="tv.jellyfinUrl" mat-raised-button class="btn-green btn-spacing" href="{{tv.jellyfinUrl}}"
-                                target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnJellyfin' |
+                                target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnJellyfin' |
                                 translate}}</a>
                         </span>
                     </div>
diff --git a/src/Ombi/ClientApp/src/app/discover/components/search-results/search-results.component.html b/src/Ombi/ClientApp/src/app/discover/components/search-results/search-results.component.html
index 965017163..5a8ad4b42 100644
--- a/src/Ombi/ClientApp/src/app/discover/components/search-results/search-results.component.html
+++ b/src/Ombi/ClientApp/src/app/discover/components/search-results/search-results.component.html
@@ -9,7 +9,7 @@
     </div>
     <div *ngIf="!discoverResults || discoverResults.length === 0">
         <div  class="row justify-content-md-center top-spacing loading-spinner">
-            <h1> {{'Discovery.NoSearch' | translate}} <i class="fa fa-frown-o" aria-hidden="true"></i></h1>
+            <h1> {{'Discovery.NoSearch' | translate}} <i class="far fa-frown" aria-hidden="true"></i></h1>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html b/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html
index 44be113c6..c2de76c2b 100644
--- a/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html
+++ b/src/Ombi/ClientApp/src/app/issues/issueDetails.component.html
@@ -61,7 +61,7 @@
                         <div *ngFor="let comment of comments" class="row msg_container" [ngClass]="{'base_sent': comment.adminComment, 'base_receive': !comment.adminComment}">
                             <div class="col-md-10 col-xs-10">
                                 
-                                <div class="messages msg_sent"> <i *ngIf="isAdmin" style="float:right;" class="fa fa-times" aria-hidden="true" (click)="deleteComment(comment.id)"></i>
+                                <div class="messages msg_sent"> <i *ngIf="isAdmin" style="float:right;" class="fas fa-times" aria-hidden="true" (click)="deleteComment(comment.id)"></i>
                                     <p>{{comment.comment}}</p>
                                     <time>{{comment.username}} • {{comment.date  | amLocal | amDateFormat: 'l LT'}}</time>
                                 </div>
diff --git a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html
index 298ce4c11..7f5d13c3c 100644
--- a/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html
+++ b/src/Ombi/ClientApp/src/app/landingpage/landingpage.component.html
@@ -13,21 +13,21 @@
             </div>
             <div class="col-md-4 col-md-push-3 vcenter">
                 <div *ngIf="landingPageSettings.noticeEnabled">
-                    <h3><i class="fa fa-bell-o"></i>&nbsp;<b>Notice</b></h3>
+                    <h3><i class="far fa-bell"></i>&nbsp;<b>Notice</b></h3>
                     <span [innerHtml]="landingPageSettings.noticeText"></span>
                 </div>
                 <br>
                 <div *ngIf="!mediaServerStatus">
-                    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
+                    <i class="fas fa-spinner fa-spin fa-3x fa-fw"></i>
                 </div>
                 <div *ngIf="mediaServerStatus">
                     <div *ngIf="mediaServerStatus.fullyAvailable">
-                        <h3 class="online"><i class="fa fa-check-circle "></i> {{ 'LandingPage.OnlineHeading' | translate }}</h3>
+                        <h3 class="online"><i class="fas fa-check-circle "></i> {{ 'LandingPage.OnlineHeading' | translate }}</h3>
                         <span [translate]="'LandingPage.OnlineParagraph'"></span>
                         <p [translate]="'LandingPage.CheckPageForUpdates'"></p>
                     </div>
                     <div *ngIf="mediaServerStatus.partiallyDown">
-                        <h3 class="partial"><i class="fa fa-exclamation-triangle "></i> {{ 'LandingPage.PartiallyOnlineHeading' | translate }}</h3>
+                        <h3 class="partial"><i class="fas fa-exclamation-triangle "></i> {{ 'LandingPage.PartiallyOnlineHeading' | translate }}</h3>
                         <span [translate]="'LandingPage.PartiallyOnlineParagraph'"></span>
                         <p *ngIf="mediaServerStatus.serversUnavailable > 1" [translate]="'LandingPage.MultipleServersUnavailable'" [translateParams]="{serversUnavailable: mediaServerStatus.serversUnavailable, totalServers: mediaServerStatus.totalServers}"></p>
                         <p *ngIf="mediaServerStatus.serversUnavailable == 1" [translate]="'LandingPage.SingleServerUnavailable'" [translateParams]="{serversUnavailable: mediaServerStatus.serversUnavailable, totalServers: mediaServerStatus.totalServers}">There is {{mediaServerStatus.serversUnavailable}} server offline out of {{mediaServerStatus.totalServers}}.</p>
@@ -35,7 +35,7 @@
                     </div>
 
                     <div *ngIf="mediaServerStatus.completelyDown">
-                        <h3 class="offline"><i class="fa fa-times "></i> {{ 'LandingPage.OfflineHeading' | translate }}</h3>
+                        <h3 class="offline"><i class="fas fa-times "></i> {{ 'LandingPage.OfflineHeading' | translate }}</h3>
                         <span [translate]="'LandingPage.OfflineParagraph'"></span>
                         <p [translate]="'LandingPage.CheckPageForUpdates'"></p>
                     </div>
diff --git a/src/Ombi/ClientApp/src/app/login/login.component.html b/src/Ombi/ClientApp/src/app/login/login.component.html
index d48b58e31..ced032260 100644
--- a/src/Ombi/ClientApp/src/app/login/login.component.html
+++ b/src/Ombi/ClientApp/src/app/login/login.component.html
@@ -40,7 +40,7 @@
                     <button id="sign-in" mat-raised-button color="primary" type="submit" (click)="loginWithOmbi = true">{{'Login.SignInWith' | translate:appNameTranslate}}</button>
                     <button id="sign-plex" mat-raised-button color="accent" type="button" (click)="oauth()">
                         <span *ngIf="!oauthLoading">{{'Login.SignInWithPlex' | translate}}</span>
-                        <span *ngIf="oauthLoading"><i class="fa fa-circle-o-notch fa-spin fa-fw"></i></span>
+                        <span *ngIf="oauthLoading"><i class="fas fa-circle-notch fa-spin fa-fw"></i></span>
                     </button>
                 </div>
             </mat-card-content>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html
index 46c5b97c9..1a7db7f91 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/artist/artist-details.component.html
@@ -23,12 +23,12 @@
                 <div class="col-12 col-lg-6 col-xl-6 media-row">
 
                     <button mat-raised-button *ngIf="selectedAlbums.length === 0" class="btn-spacing" color="primary" (click)="requestAllAlbums()">
-            <i class="fa fa-plus"></i> {{ 'MediaDetails.RequestAllAlbums' | translate }}</button>
+            <i class="fas fa-plus"></i> {{ 'MediaDetails.RequestAllAlbums' | translate }}</button>
                     <button mat-raised-button *ngIf="selectedAlbums.length > 0" class="btn-spacing" color="primary" (click)="requestAllAlbums()">
-              <i class="fa fa-plus"></i> {{ 'MediaDetails.RequestSelectedAlbums' | translate }}</button>
+              <i class="fas fa-plus"></i> {{ 'MediaDetails.RequestSelectedAlbums' | translate }}</button>
 
                     <button mat-raised-button *ngIf="selectedAlbums.length > 0" class="btn-spacing" color="accent" (click)="clearSelection()">
-                <i class="fa fa-minus"></i> {{ 'MediaDetails.ClearSelection' | translate }}</button>
+                <i class="fas fa-minus"></i> {{ 'MediaDetails.ClearSelection' | translate }}</button>
 
 
 
@@ -39,39 +39,39 @@
 
             <ng-template #requestedBtn>
               <button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied"
-                class="btn-spacing" color="warn" [disabled]><i class="fa fa-check"></i>
+                class="btn-spacing" color="warn" [disabled]><i class="fas fa-check"></i>
                 {{ 'Common.Requested' | translate }}</button>
             </ng-template>
             <ng-template #notRequestedBtn>
               <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
-                <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
-                  *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-                <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> {{
+                <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> <i
+                  *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+                <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> {{
                 'Common.Request' | translate }}</button>
             </ng-template>
           </span> -->
                     <!-- <span *ngIf="isAdmin && hasRequest">
             <button (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
-              <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+              <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
             </button>
             <button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
               color="accent">
-              <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+              <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
             </button>
 
             <button *ngIf="movieRequest && !movieRequest.denied" mat-raised-button class="btn-spacing" color="warn"
               (click)="deny()">
-              <i class="fa fa-times"></i> {{
+              <i class="fas fa-times"></i> {{
                     'Requests.Deny' | translate }}</button>
             <button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason"
               mat-raised-button class="btn-spacing" color="warn">
-              <i class="fa fa-times"></i> {{
+              <i class="fas fa-times"></i> {{
                             'MediaDetails.Denied' | translate }}</button>
           </span> -->
 
                     <!-- <button *ngIf="(hasRequest && movieRequest) || movie.available" mat-raised-button class="btn-spacing"
             color="danger" (click)="issue()">
-            <i class="fa fa-exclamation"></i> {{
+            <i class="fas fa-exclamation"></i> {{
                 'Requests.ReportIssue' | translate }}</button> -->
 
 
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
index 6e809c90d..0aff4e4f6 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/movie/movie-details.component.html
@@ -41,15 +41,15 @@
                     <span *ngIf="movie.available">
                         <a *ngIf="movie.plexUrl" href="{{movie.plexUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn plex">
                             {{'Search.ViewOnPlex' | translate}} 
-                            <i class="fa fa-play-circle fa-2x"></i>
+                            <i class="far fa-play-circle fa-2x"></i>
                         </a>
                         <a *ngIf="movie.embyUrl" href="{{movie.embyUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn emby">
                             {{'Search.ViewOnEmby' | translate}} 
-                            <i class="fa fa-play-circle fa-2x"></i>
+                            <i class="far fa-play-circle fa-2x"></i>
                         </a>
                         <a *ngIf="movie.jellyfinUrl" href="{{movie.jellyfinUrl}}" mat-raised-button  target="_blank" class="btn-spacing viewon-btn jellyfinUrl">
                             {{'Search.ViewOnJellyfin' | translate}} 
-                            <i class="fa fa-play-circle fa-2x"></i>
+                            <i class="far fa-play-circle fa-2x"></i>
                         </a>
                     </span>
                         <button mat-raised-button class="btn-green btn-spacing" *ngIf="movie.available && !movie.plexUrl && !movie.embyUrl && !movie.jellyfinUrl"> {{
@@ -58,41 +58,41 @@
                             <span *ngIf="movie.requested || movie.approved; then requestedBtn else notRequestedBtn"></span>
                             <ng-template #requestedBtn>
                                 <button mat-raised-button *ngIf="!hasRequest || hasRequest && movieRequest && !movieRequest.denied" class="btn-spacing" color="warn" [disabled]>
-                                    <i class="fa fa-check"></i>
+                                    <i class="fas fa-check"></i>
                                     {{ 'Common.Requested' | translate }}
                                 </button>
                             </ng-template>
                             <ng-template #notRequestedBtn>
                                 <button mat-raised-button class="btn-spacing" color="primary" (click)="request()">
-                                    <i *ngIf="movie.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> 
-                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fa fa-plus"></i>
-                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fa fa-check"></i> 
+                                    <i *ngIf="movie.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> 
+                                    <i *ngIf="!movie.requestProcessing && !movie.processed" class="fas fa-plus"></i>
+                                    <i *ngIf="movie.processed && !movie.requestProcessing" class="fas fa-check"></i> 
                                     {{'Common.Request' | translate }}
                                 </button>
                             </ng-template>
                         </span>
                         <span *ngIf="isAdmin && hasRequest">
                             <button *ngIf="!movie.approved" (click)="approve()" mat-raised-button class="btn-spacing" color="accent">
-                            <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+                            <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
                             </button>
                             <button *ngIf="!movie.available" (click)="markAvailable()" mat-raised-button class="btn-spacing"
                             color="accent">
-                            <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+                            <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
                             </button>
 
                             <button *ngIf="movieRequest && !movieRequest.denied && !movie.available" mat-raised-button class="btn-spacing" color="warn" (click)="deny()">
-                                <i class="fa fa-times"></i> {{'Requests.Deny' | translate }}
+                                <i class="fas fa-times"></i> {{'Requests.Deny' | translate }}
                             </button>
                             <button *ngIf="movieRequest && movieRequest.denied" [matTooltip]="movieRequest.deniedReason" mat-raised-button class="btn-spacing" color="warn">
-                                <i class="fa fa-times"></i> {{'MediaDetails.Denied' | translate }}
+                                <i class="fas fa-times"></i> {{'MediaDetails.Denied' | translate }}
                             </button>
                         </span>
 
                         <button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
-                            <i class="fa fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
+                            <i class="fas fa-exclamation"></i> {{'Requests.ReportIssue' | translate }}
                         </button>
                         <button *ngIf="movie.belongsToCollection" [routerLink]="'/discover/collection/' + movie.belongsToCollection.id" mat-raised-button class="btn-spacing">
-                            <i class="fa fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
+                            <i class="fas fa-list"></i> {{'MediaDetails.ViewCollection' | translate}}
                         </button>
                 </div>
             </div>
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
index 0cde69b8b..565af2127 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/shared/social-icons/social-icons.component.html
@@ -1,32 +1,32 @@
 <div class="social-icons-container-inner">
     <a *ngIf="homepage" class="media-icons" href="{{homepage}}" target="_blank">
-        <i matTooltip="Homepage" class="fa fa-home fa-2x grow-social"></i>
+        <i matTooltip="Homepage" class="sfa-home fa-2x grow-social"></i>
     </a>
     <a *ngIf="theMoviedbId" href="https://www.themoviedb.org/movie/{{theMoviedbId}}" class="media-icons"
         target="_blank">
-        <i matTooltip="The Movie DB" class="fa fa-film fa-2x grow-social"></i>
+        <i matTooltip="The Movie DB" class="fas fa-film fa-2x grow-social"></i>
     </a>
     <a *ngIf="tvdbId" href="https://www.thetvdb.com/?id={{tvdbId}}&tab=series" class="media-icons" target="_blank">
-        <i matTooltip="The TV DB" class="fa fa-tv fa-2x grow-social"></i>
+        <i matTooltip="The TV DB" class="fas fa-tv fa-2x grow-social"></i>
     </a>
 
     <a *ngIf="hasTrailer" class="media-icons youtube" (click)="openDialog()">
-        <i matTooltip="Trailer" class="fa fa-youtube-play fa-2x grow-social"></i>
+        <i matTooltip="Trailer" class="fab fa-youtube fa-2x grow-social"></i>
     </a>
     <a *ngIf="imdbId" class="media-icons imdb" [href]="doNotAppend ? imdbid : 'https://imdb.com/title/' + imdbId" target="_blank">
-        <i matTooltip="Imdb" class="fa fa-imdb fa-2x grow-social"></i>
+        <i matTooltip="Imdb" class="fab fa-imdb fa-2x grow-social"></i>
     </a>
     <a *ngIf="twitter" class="media-icons" [href]="doNotAppend ? twitter : 'https://twitter.com/' + twitter" target="_blank">
-        <i matTooltip="Twitter" class="fa fa-twitter fa-2x grow-social"></i>
+        <i matTooltip="Twitter" class="fab fa-twitter fa-2x grow-social"></i>
     </a>
     <a *ngIf="facebook" class="media-icons" [href]="doNotAppend ? facebook : 'https://facebook.com/' + facebook" target="_blank">
-        <i matTooltip="Facebook" class="fa fa-facebook fa-2x grow-social"></i>
+        <i matTooltip="Facebook" class="fab fa-facebook fa-2x grow-social"></i>
     </a> <a *ngIf="instagram" class="media-icons" [href]="doNotAppend ? instagram : 'https://instagram.com/' + instagram" target="_blank">
-        <i matTooltip="Instagram" class="fa fa-instagram fa-2x grow-social"></i>
+        <i matTooltip="Instagram" class="fab fa-instagram fa-2x grow-social"></i>
     </a>
     <!-- Setting/Configuration admin area -->
     <button *ngIf="isAdmin" mat-icon-button [matMenuTriggerFor]="menu">
-        <mat-icon>settings</mat-icon>
+        <i class="fas fa-cog fa-2x "></i>
     </button>
     <mat-menu #menu="matMenu">
         <button mat-menu-item (click)="openRequestOnBehalf()" [disabled]="!canRequestOnBehalf">
diff --git a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
index a25eed389..03e1ad4ee 100644
--- a/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
+++ b/src/Ombi/ClientApp/src/app/media-details/components/tv/tv-details.component.html
@@ -4,7 +4,7 @@
 <div *ngIf="tv">
     <div *ngIf="tv.id === 0; else main">
         <div class="small-middle-container no-info">
-            <h1><i class="fa fa-frown-o" aria-hidden="true"></i></h1>
+            <h1><i class="far fa-frown-o" aria-hidden="true"></i></h1>
             <h3> {{ 'MediaDetails.NotEnoughInfo' | translate }}</h3>
         </div>
     </div>
@@ -37,18 +37,18 @@
                         <div class="col-12 col-lg-5 col-xl-5 media-row">
 
                             <!-- <button *ngIf="!tv.fullyAvailable" mat-raised-button class="btn-spacing" color="primary"
-                                (click)="request()"><i class="fa fa-plus"></i>
+                                (click)="request()"><i class="fas fa-plus"></i>
                                 {{ 'Common.Request' | translate }}</button> -->
 
                             <button *ngIf="tv.fullyAvailable" mat-raised-button class="btn-spacing" color="accent"
                                 [disabled]>
-                                <i class="fa fa-check"></i> {{'Common.Available' | translate }}</button>
+                                <i class="fas fa-check"></i> {{'Common.Available' | translate }}</button>
                             <button *ngIf="tv.partlyAvailable && !tv.fullyAvailable" mat-raised-button
                                 class="btn-spacing" color="accent" [disabled]>
-                                <i class="fa fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
+                                <i class="fas fa-check"></i> {{'Common.PartiallyAvailable' | translate }}</button>
 
                             <button mat-raised-button class="btn-spacing" color="danger" (click)="issue()">
-                                <i class="fa fa-exclamation"></i> {{
+                                <i class="fas fa-exclamation"></i> {{
                                 'Requests.ReportIssue' | translate }}</button>
 
                         </div>
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
index 368341b3d..cb23212d2 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.html
@@ -29,7 +29,7 @@
 
                         <mat-icon *ngIf="nav.icon" aria-label="Side nav toggle icon" [style]="nav.style">{{nav.icon}}
                         </mat-icon>
-                        <i *ngIf="nav.faIcon" class="fa fa-lg {{nav.faIcon}}"
+                        <i *ngIf="nav.faIcon" class="far fa-lg {{nav.faIcon}}"
                             style="padding-left: 5px; padding-right: 5px;" aria-hidden="true"></i>
                         &nbsp;{{nav.name | translate}}
                     </a>
diff --git a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
index 9a5ec794c..d7216d114 100644
--- a/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
+++ b/src/Ombi/ClientApp/src/app/my-nav/my-nav.component.ts
@@ -87,7 +87,7 @@ export class MyNavComponent implements OnInit {
       // { name: "NavigationBar.Calendar", icon: "calendar_today", link: "/calendar", requiresAdmin: false, enabled: true },
       { name: "NavigationBar.Donate", icon: "attach_money", link: "https://www.paypal.me/PlexRequestsNet", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, style: "color:red;", toolTipMessage: 'NavigationBar.DonateTooltip', faIcon: null },
       { name: "NavigationBar.Donate", icon: "attach_money", link: customizationSettings.customDonationUrl, externalLink: true, requiresAdmin: false, enabled: customizationSettings.enableCustomDonations, toolTip: true, toolTipMessage: customizationSettings.customDonationMessage, faIcon: null },
-      { name: "NavigationBar.FeatureSuggestion", icon: null, link: "https://features.ombi.io/", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, toolTipMessage: 'NavigationBar.FeatureSuggestionTooltip', faIcon: "fa-lightbulb-o" },
+      { name: "NavigationBar.FeatureSuggestion", icon: null, link: "https://features.ombi.io/", externalLink: true, requiresAdmin: true, enabled: true, toolTip: true, toolTipMessage: 'NavigationBar.FeatureSuggestionTooltip', faIcon: "fa-lightbulb" },
       { name: "NavigationBar.Settings", icon: "settings", link: "/Settings/About", requiresAdmin: true, enabled: true, faIcon: null },
       { name: "NavigationBar.UserPreferences", icon: "person", link: "/user-preferences", requiresAdmin: false, enabled: true, faIcon: null },
     ];
diff --git a/src/Ombi/ClientApp/src/app/requests/movierequests.component.html b/src/Ombi/ClientApp/src/app/requests/movierequests.component.html
index 3f8485fce..ad82ffbb9 100644
--- a/src/Ombi/ClientApp/src/app/requests/movierequests.component.html
+++ b/src/Ombi/ClientApp/src/app/requests/movierequests.component.html
@@ -4,13 +4,13 @@
             (keyup)="search($event)">
         <span class="input-group-btn">
             <button id="filterBtn" class="btn btn-sm btn-info-outline" (click)="filterDisplay = !filterDisplay">
-                <i class="fa fa-filter"></i> {{ 'Requests.Filter' | translate }}
+                <i class="fas fa-filter"></i> {{ 'Requests.Filter' | translate }}
             </button>
 
 
             <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="true">
-                <i class="fa fa-sort"></i> {{ 'Requests.Sort' | translate }}
+                <i class="fas fa-sort"></i> {{ 'Requests.Sort' | translate }}
                 <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
@@ -93,7 +93,7 @@
                     </div>
                     <div *ngIf="request.denied" id="requestDenied">
                         {{ 'Requests.Denied' | translate }}
-                        <i style="color:red;" class="fa fa-check" pTooltip="{{request.deniedReason}}"></i>
+                        <i style="color:red;" class="fas fa-check" pTooltip="{{request.deniedReason}}"></i>
 
                     </div>
 
@@ -124,11 +124,11 @@
 
                         <a *ngIf="request.showSubscribe && !request.subscribed" style="color:white" (click)="subscribe(request)"
                             pTooltip="Subscribe for notifications">
-                            <i class="fa fa-rss"></i>
+                            <i class="fas fa-rss"></i>
                         </a>
                         <a *ngIf="request.showSubscribe && request.subscribed" style="color:red" (click)="unSubscribe(request)"
                             pTooltip="Unsubscribe notification">
-                            <i class="fa fa-rss"></i>
+                            <i class="fas fa-rss"></i>
                         </a>
                     </div>
                 </div>
@@ -137,14 +137,14 @@
                         <form>
                             <button (click)="approve(request)" style="text-align: right" class="btn btn-sm btn-success-outline approve"
                                 type="submit">
-                                <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+                                <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
                             </button>
                         </form>
 
                         <!--Radarr Root Folder-->
                         <div *ngIf="radarrRootFolders?.length > 1" class="btn-group btn-split" id="rootFolderBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
+                                <i class="fas fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
                             </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown"
                                 aria-haspopup="true" aria-expanded="false">
@@ -161,7 +161,7 @@
                         <!--Radarr Quality Profiles -->
                         <div *ngIf="radarrProfiles?.length > 1" class="btn-group btn-split" id="changeQualityBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
+                                <i class="fas fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
                             </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown"
                                 aria-haspopup="true" aria-expanded="false">
@@ -177,7 +177,7 @@
 
                         <div *ngIf="!request.denied" id="denyBtn">
                             <button type="button" (click)="deny(request)" class="btn btn-sm btn-danger-outline deny">
-                                <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}
+                                <i class="fas fa-times"></i> {{ 'Requests.Deny' | translate }}
                             </button>
                         </div>
                     </div>
@@ -186,11 +186,11 @@
                     <form id="markBtnGroup">
                         <button id="unavailableBtn" *ngIf="request.available" (click)="changeAvailability(request, false)"
                             style="text-align: right" value="false" class="btn btn-sm btn-info-outline change">
-                            <i class="fa fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
+                            <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
                         </button>
                         <button id="availableBtn" *ngIf="!request.available" (click)="changeAvailability(request, true)"
                             style="text-align: right" value="true" class="btn btn-sm btn-success-outline change">
-                            <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+                            <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
                         </button>
                     </form>
 
@@ -200,14 +200,14 @@
                 <div *ngIf="isAdmin || isRequestUser(request)">
                     <form>
                         <button id="removeBtn" (click)="removeRequest(request)" style="text-align: right" class="btn btn-sm btn-danger-outline delete">
-                            <i class="fa fa-minus"></i> {{ 'Requests.Remove' | translate }}
+                            <i class="fas fa-minus"></i> {{ 'Requests.Remove' | translate }}
                         </button>
                     </form>
                 </div>
                 <div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issuesBtn">
                     <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="true">
-                        <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
+                        <i class="fas fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
                         <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
@@ -284,5 +284,5 @@
     </div>
 
     <button class="btn btn-sm btn-primary-outline" (click)="clearFilter($event)">
-        <i class="fa fa-filter"></i> {{ 'Filter.ClearFilter' | translate }}</button>
+        <i class="fas fa-filter"></i> {{ 'Filter.ClearFilter' | translate }}</button>
 </p-sidebar>
diff --git a/src/Ombi/ClientApp/src/app/requests/music/musicrequests.component.html b/src/Ombi/ClientApp/src/app/requests/music/musicrequests.component.html
index 3565898ed..9f5e08fdd 100644
--- a/src/Ombi/ClientApp/src/app/requests/music/musicrequests.component.html
+++ b/src/Ombi/ClientApp/src/app/requests/music/musicrequests.component.html
@@ -4,13 +4,13 @@
             (keyup)="search($event)">
         <span class="input-group-btn">
             <button id="filterBtn" class="btn btn-sm btn-info-outline" (click)="filterDisplay = !filterDisplay">
-                <i class="fa fa-filter"></i> {{ 'Requests.Filter' | translate }}
+                <i class="fas fa-filter"></i> {{ 'Requests.Filter' | translate }}
             </button>
 
 
             <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown"
                 aria-haspopup="true" aria-expanded="true">
-                <i class="fa fa-sort"></i> {{ 'Requests.Sort' | translate }}
+                <i class="fas fa-sort"></i> {{ 'Requests.Sort' | translate }}
                 <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
@@ -91,7 +91,7 @@
                             [translate]="'Common.ProcessingRequest'"></span>
                         <span *ngIf="request.denied" class="label label-danger" id="requestDeclinedLabel" [translate]="'Common.RequestDenied'"></span>
                         <span *ngIf="request.deniedReason" title="{{request.deniedReason}}">
-                            <i class="fa fa-info-circle"></i>
+                            <i class="fas fa-info-circle"></i>
                         </span>
                         <span *ngIf="!request.approved && !request.availble && !request.denied" id="pendingApprovalLabel"
                             class="label label-warning" [translate]="'Common.PendingApproval'"></span>
@@ -99,7 +99,7 @@
                     </div>
                     <div *ngIf="request.denied" id="requestDenied">
                         {{ 'Requests.Denied' | translate }}
-                        <i style="color:red;" class="fa fa-check" pTooltip="{{request.deniedReason}}"></i>
+                        <i style="color:red;" class="fas fa-check" pTooltip="{{request.deniedReason}}"></i>
 
                     </div>
 
@@ -125,10 +125,10 @@
                     <div class="col-md-2 col-md-push-6">
 
                         <a *ngIf="request.showSubscribe && !request.subscribed" style="color:white" (click)="subscribe(request)" pTooltip="Subscribe for notifications">
-                            <i class="fa fa-rss"></i>
+                            <i class="fas fa-rss"></i>
                         </a>
                         <a *ngIf="request.showSubscribe && request.subscribed" style="color:red" (click)="unSubscribe(request)" pTooltip="Unsubscribe notification">
-                            <i class="fa fa-rss"></i>
+                            <i class="fas fa-rss"></i>
                         </a>
                     </div>
                 </div> -->
@@ -137,14 +137,14 @@
                         <form class="col-md-6">
                             <button (click)="approve(request)" style="text-align: right" class="btn btn-sm btn-success-outline approve"
                                 type="submit">
-                                <i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}
+                                <i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}
                             </button>
                         </form>
 
                         <!--Radarr Root Folder-->
                         <!-- <div *ngIf="radarrRootFolders" class="btn-group btn-split" id="rootFolderBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
+                                <i class="fas fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
                             </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <span class="caret"></span>
@@ -160,7 +160,7 @@
                         <!--Radarr Quality Profiles -->
                         <!-- <div *ngIf="radarrProfiles" class="btn-group btn-split" id="changeQualityBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                <i class="fa fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
+                                <i class="fas fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
                             </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 <span class="caret"></span>
@@ -175,7 +175,7 @@
 
                         <div *ngIf="!request.denied" id="denyBtn" class="col-md-6">
                             <button type="button" (click)="deny(request)" class="btn btn-sm btn-danger-outline deny">
-                                <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}
+                                <i class="fas fa-times"></i> {{ 'Requests.Deny' | translate }}
                             </button>
                         </div>
                     </div>
@@ -184,11 +184,11 @@
                     <form id="markBtnGroup">
                         <button id="unavailableBtn" *ngIf="request.available" (click)="changeAvailability(request, false)"
                             style="text-align: right" value="false" class="btn btn-sm btn-info-outline change">
-                            <i class="fa fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
+                            <i class="fas fa-minus"></i> {{ 'Requests.MarkUnavailable' | translate }}
                         </button>
                         <button id="availableBtn" *ngIf="!request.available" (click)="changeAvailability(request, true)"
                             style="text-align: right" value="true" class="btn btn-sm btn-success-outline change">
-                            <i class="fa fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
+                            <i class="fas fa-plus"></i> {{ 'Requests.MarkAvailable' | translate }}
                         </button>
                     </form>
 
@@ -198,14 +198,14 @@
                 <div *ngIf="isAdmin || isRequestUser(request)">
                     <form id="removeBtn">
                         <button (click)="removeRequest(request)" style="text-align: right" class="btn btn-sm btn-danger-outline delete">
-                            <i class="fa fa-minus"></i> {{ 'Requests.Remove' | translate }}
+                            <i class="fas fa-minus"></i> {{ 'Requests.Remove' | translate }}
                         </button>
                     </form>
                 </div>
                 <div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issuesBtn">
                     <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown"
                         aria-haspopup="true" aria-expanded="true">
-                        <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
+                        <i class="fas fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
                         <span class="caret"></span>
                     </button>
                     <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
@@ -274,7 +274,7 @@
     </div>
 
     <button class="btn btn-sm btn-primary-outline" (click)="clearFilter($event)">
-        <i class="fa fa-filter"></i> {{ 'Filter.ClearFilter' | translate }}</button>
+        <i class="fas fa-filter"></i> {{ 'Filter.ClearFilter' | translate }}</button>
 </p-sidebar>
 
 
diff --git a/src/Ombi/ClientApp/src/app/requests/request.component.html b/src/Ombi/ClientApp/src/app/requests/request.component.html
index db72b9d17..2696916a7 100644
--- a/src/Ombi/ClientApp/src/app/requests/request.component.html
+++ b/src/Ombi/ClientApp/src/app/requests/request.component.html
@@ -3,14 +3,14 @@
 
 <ul id="nav-tabs" class="nav nav-tabs" role="tablist">
     <li role="presentation" class="active">
-        <a id="movieTabButton" aria-controls="home" role="tab" data-toggle="tab" (click)="selectMovieTab()" href="#movieTab"><i class="fa fa-film"></i> {{ 'Requests.MoviesTab' | translate }}</a>
+        <a id="movieTabButton" aria-controls="home" role="tab" data-toggle="tab" (click)="selectMovieTab()" href="#movieTab"><i class="fas fa-film"></i> {{ 'Requests.MoviesTab' | translate }}</a>
     </li>
     <li role="presentation">
-        <a id="tvTabButton" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectTvTab()" href="#tvTab"><i class="fa fa-television"></i> {{ 'Requests.TvTab' | translate }}</a>
+        <a id="tvTabButton" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectTvTab()" href="#tvTab"><i class="fas fa-tv"></i> {{ 'Requests.TvTab' | translate }}</a>
 
     </li>
     <li role="presentation" *ngIf="musicEnabled">
-        <a id="albumTabButton" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectMusicTab()" href="#albumTab"><i class="fa fa-music"></i> {{ 'Requests.MusicTab' | translate }}</a>
+        <a id="albumTabButton" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectMusicTab()" href="#albumTab"><i class="fas fa-music"></i> {{ 'Requests.MusicTab' | translate }}</a>
 
     </li>
 </ul>
diff --git a/src/Ombi/ClientApp/src/app/requests/tvrequest-children.component.html b/src/Ombi/ClientApp/src/app/requests/tvrequest-children.component.html
index f7820ad89..b0e301d34 100644
--- a/src/Ombi/ClientApp/src/app/requests/tvrequest-children.component.html
+++ b/src/Ombi/ClientApp/src/app/requests/tvrequest-children.component.html
@@ -16,29 +16,29 @@
             <div class="col-md-1 col-md-push-9">
                 <button id="subscribeBtn" *ngIf="child.showSubscribe && !child.subscribed" (click)="subscribe(child)"
                     class="btn btn-sm btn-primary-outline" pTooltip="Subscribe for notifications" type="submit"><i
-                        class="fa fa-rss"></i> Subscribe</button>
+                        class="fas fa-rss"></i> Subscribe</button>
                 <button id="subscribeBtn" *ngIf="child.showSubscribe && child.subscribed" (click)="unSubscribe(child)"
                     class="btn btn-sm btn-danger-outline" pTooltip="UnSubscribe for notifications" type="submit"><i
-                        class="fa fa-rss"></i> UnSubscribe</button>
+                        class="fas fa-rss"></i> UnSubscribe</button>
 
 
                 <div *ngIf="isAdmin">
                     <button id="approveBtn" *ngIf="child.canApprove && !child.approved" (click)="approve(child)" class="btn btn-sm btn-success-outline"
-                        type="submit"><i class="fa fa-plus"></i> {{ 'Common.Approve' | translate }}</button>
+                        type="submit"><i class="fas fa-plus"></i> {{ 'Common.Approve' | translate }}</button>
                     <button id="unavailableBtn" *ngIf="child.available" (click)="changeAvailability(child, false)"
-                        style="text-align: right" value="false" class="btn btn-sm btn-info-outline change"><i class="fa fa-minus"></i>
+                        style="text-align: right" value="false" class="btn btn-sm btn-info-outline change"><i class="fas fa-minus"></i>
                         {{ 'Requests.MarkUnavailable' | translate }}</button>
                     <button id="availableBtn" *ngIf="!child.available" (click)="changeAvailability(child, true)" style="text-align: right"
-                        value="true" class="btn btn-sm btn-success-outline change"><i class="fa fa-plus"></i> {{
+                        value="true" class="btn btn-sm btn-success-outline change"><i class="fas fa-plus"></i> {{
                         'Requests.MarkAvailable' | translate }}</button>
 
                     <button id="denyBtn" *ngIf="!child.denied" type="button" (click)="deny(child)" class="btn btn-sm btn-danger-outline deny">
-                        <i class="fa fa-times"></i> {{ 'Requests.Deny' | translate }}</button>
+                        <i class="fas fa-times"></i> {{ 'Requests.Deny' | translate }}</button>
 
                 </div>
                 <div *ngIf="isAdmin || isRequestUser(child)">
                     <button id="removeBtn" type="button" (click)="removeRequest(child)" class="btn btn-sm btn-danger-outline deny"><i
-                            class="fa fa-times"></i> {{ 'Requests.Remove' | translate }}</button>
+                            class="fas fa-times"></i> {{ 'Requests.Remove' | translate }}</button>
                 </div>
 
 
@@ -91,7 +91,7 @@
                                         <td>
                                             <span *ngIf="child.denied" class="label label-danger" id="deniedLabel"
                                                 [translate]="'Common.Denied'">
-                                                <i style="color:red;" class="fa fa-check" pTooltip="{{child.deniedReason}}"></i>
+                                                <i style="color:red;" class="fas fa-check" pTooltip="{{child.deniedReason}}"></i>
                                             </span>
                                             <span *ngIf="!child.denied && ep.available" class="label label-success" id="availableLabel"
                                                 [translate]="'Common.Available'"></span>
diff --git a/src/Ombi/ClientApp/src/app/requests/tvrequests.component.html b/src/Ombi/ClientApp/src/app/requests/tvrequests.component.html
index 889b485d7..5834e3a23 100644
--- a/src/Ombi/ClientApp/src/app/requests/tvrequests.component.html
+++ b/src/Ombi/ClientApp/src/app/requests/tvrequests.component.html
@@ -47,12 +47,12 @@
                 <div class="col-sm-3 col-sm-push-3  small-padding">
 
                     <button style="text-align: right" class="btn btn-sm btn-success-outline" (click)="openClosestTab(node,$event)">
-                            <i class="fa fa-plus"></i> View</button>
+                            <i class="fas fa-plus"></i> View</button>
                     <div *ngIf="isAdmin">
                         <!--Sonarr Root Folder-->
                         <div *ngIf="sonarrRootFolders?.length > 1" class="btn-group btn-split" id="rootFolderBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                    <i class="fa fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
+                                    <i class="fas fa-plus"></i> {{ 'Requests.ChangeRootFolder' | translate }}
                                 </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                     <span class="caret"></span>
@@ -68,7 +68,7 @@
                         <!--Sonarr Quality Profiles -->
                         <div *ngIf="sonarrProfiles?.length > 1" class="btn-group btn-split" id="changeQualityBtn">
                             <button type="button" class="btn btn-sm btn-warning-outline">
-                                    <i class="fa fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
+                                    <i class="fas fa-plus"></i> {{ 'Requests.ChangeQualityProfile' | translate }}
                                 </button>
                             <button type="button" class="btn btn-warning-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                     <span class="caret"></span>
@@ -84,7 +84,7 @@
                     </div>
                     <div class="dropdown" *ngIf="issueCategories && issuesEnabled" id="issueBtn">
                         <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
+                                <i class="fas fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
                                 <span class="caret"></span>
                             </button>
                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
diff --git a/src/Ombi/ClientApp/src/app/search/moviesearch.component.html b/src/Ombi/ClientApp/src/app/search/moviesearch.component.html
index dd95d8a74..f6a27677f 100644
--- a/src/Ombi/ClientApp/src/app/search/moviesearch.component.html
+++ b/src/Ombi/ClientApp/src/app/search/moviesearch.component.html
@@ -5,7 +5,7 @@
         <div class="btn-group" role="group">
             <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                 {{ 'Search.Suggestions' | translate }}
-                <i class="fa fa-chevron-down"></i>
+                <i class="fa-list fa-chevron-down"></i>
             </a>
             <ul class="dropdown-menu">
                 <li><a (click)="popularMovies()" [translate]="'Search.Movies.PopularMovies'"></a></li>
@@ -15,7 +15,7 @@
             </ul>
             <button class="btn btn-sm btn-primary-outline" (click)="refineOpen()">
                 {{ 'Search.Refine' | translate }}
-                <i class="fa" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i>
+                <i class="fas" [ngClass]="{'fa-chevron-down': !refineSearchEnabled, 'fa-chevron-up': refineSearchEnabled}"></i>
             </button>
         </div>
     </ng-template>
@@ -28,7 +28,7 @@
             <div class="search-button-container-inline">
                 <ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
             </div>
-            <i class="fa fa-search"></i>
+            <i class="fas fa-search"></i>
         </div>
     </div>
 
@@ -77,7 +77,7 @@
     <!-- Movie content -->
     <div id="movieList">
         <div *ngIf="searchApplied && movieResults?.length <= 0" class='no-search-results'>
-            <i class='fa fa-film no-search-results-icon'></i>
+            <i class='fas fa-film no-search-results-icon'></i>
             <div class='no-search-results-text' [translate]="'Search.NoResults'"></div>
         </div>
 
@@ -132,50 +132,50 @@
 
                 <div class="col-sm-2 small-padding">
                     <div *ngIf="result.available">
-                        <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fa fa-check"></i>
+                        <button style="text-align: right" class="btn btn-success-outline disabled" disabled><i class="fas fa-check"></i>
                             {{ 'Common.Available' | translate }}</button>
                     </div>
                     <div *ngIf="!result.available">
                         <div *ngIf="result.requested || result.approved; then requestedBtn else notRequestedBtn"></div>
                         <ng-template #requestedBtn>
                             <button style="text-align: right" class="btn btn-primary-outline disabled" [disabled]><i
-                                    class="fa fa-check"></i> {{ 'Common.Requested' | translate }}</button>
+                                    class="fas fa-check"></i> {{ 'Common.Requested' | translate }}</button>
                         </ng-template>
                         <ng-template #notRequestedBtn>
                             <button id="{{result.id}}" style="text-align: right" class="btn btn-primary-outline"
                                 (click)="request(result)">
-                                <i *ngIf="result.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i> <i
-                                    *ngIf="!result.requestProcessing && !result.processed" class="fa fa-plus"></i>
-                                <i *ngIf="result.processed && !result.requestProcessing" class="fa fa-check"></i> {{
+                                <i *ngIf="result.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i> <i
+                                    *ngIf="!result.requestProcessing && !result.processed" class="fas fa-plus"></i>
+                                <i *ngIf="result.processed && !result.requestProcessing" class="fas fa-check"></i> {{
                                 'Common.Request' | translate }}</button>
                         </ng-template>
                     </div>
                     <div *ngIf="result.requested">
                         <a *ngIf="result.showSubscribe && !result.subscribed" style="text-align: right" class="btn btn btn-success-outline"
                             (click)="subscribe(result)" pTooltip="Subscribe for notifications when this movie becomes available">
-                            <i class="fa fa-rss"></i> Subscribe</a>
+                            <i class="fas fa-rss"></i> Subscribe</a>
                         <a *ngIf="result.showSubscribe && result.subscribed" style="text-align: right;" class="btn btn btn-warning-outline"
                             (click)="unSubscribe(result)" pTooltip="Unsubscribe notifications when this movie becomes available">
-                            <i class="fa fa-rss"></i> Unsubscribe</a>
+                            <i class="fas fa-rss"></i> Unsubscribe</a>
                     </div>
                     <button style="text-align: right" class="btn btn-sm btn-info-outline" (click)="similarMovies(result.id)">
-                        <i class="fa fa-eye"></i> {{ 'Search.Similar' | translate }}</button>
+                        <i class="far fa-eye"></i> {{ 'Search.Similar' | translate }}</button>
 
                     <br />
                     <div *ngIf="result.available">
                         <a *ngIf="result.plexUrl" style="text-align: right" class="btn btn-sm btn-success-outline" href="{{result.plexUrl}}"
-                            target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnPlex' | translate}}</a>
+                            target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnPlex' | translate}}</a>
                         <a *ngIf="result.embyUrl" style="text-align: right" id="embybtn" class="btn btn-sm btn-success-outline"
-                            href="{{result.embyUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnEmby' |
+                            href="{{result.embyUrl}}" target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnEmby' |
                             translate}}</a>
                         <a *ngIf="result.jellyfinUrl" style="text-align: right" id="jellyfinbtn" class="btn btn-sm btn-success-outline"
-                            href="{{result.jellyfinUrl}}" target="_blank"><i class="fa fa-eye"></i> {{'Search.ViewOnJellyfin' |
+                            href="{{result.jellyfinUrl}}" target="_blank"><i class="far fa-eye"></i> {{'Search.ViewOnJellyfin' |
                             translate}}</a>
                     </div>
                     <div class="dropdown" *ngIf="result.available && issueCategories && issuesEnabled">
                         <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown"
                             aria-haspopup="true" aria-expanded="true">
-                            <i class="fa fa-plus"></i> {{'Requests.ReportIssue' | translate}}
+                            <i class="fas fa-plus"></i> {{'Requests.ReportIssue' | translate}}
                             <span class="caret"></span>
                         </button>
                         <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
diff --git a/src/Ombi/ClientApp/src/app/search/moviesearchgrid.component.html b/src/Ombi/ClientApp/src/app/search/moviesearchgrid.component.html
index 53270f943..9548145b0 100644
--- a/src/Ombi/ClientApp/src/app/search/moviesearchgrid.component.html
+++ b/src/Ombi/ClientApp/src/app/search/moviesearchgrid.component.html
@@ -6,7 +6,7 @@
             <div class="btn-group">
                 <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                     Suggestions
-                    <i class="fa fa-chevron-down"></i>
+                    <i class="fas fa-chevron-down"></i>
                 </a>
                 <ul class="dropdown-menu">
                     <li>
@@ -23,7 +23,7 @@
                     </li>
                 </ul>
             </div>
-            <i id="movieSearchButton" class="fa fa-search"></i>
+            <i id="movieSearchButton" class="fas fa-search"></i>
         </div>
     </div>
     <br />
@@ -31,7 +31,7 @@
     <!-- Movie content -->
     <div id="movieList">
         <div *ngIf="searchApplied && movieResults?.length <= 0" class='no-search-results'>
-            <i class='fa fa-film no-search-results-icon'></i>
+            <i class='fas fa-film no-search-results-icon'></i>
             <div class='no-search-results-text'>Sorry, we didn't find any results!</div>
         </div>
 
@@ -108,13 +108,13 @@
 
                     <div *ngIf="result.available">
                         <button style="text-align: right" class="btn btn-success-outline disabled" disabled>
-                            <i class="fa fa-check"></i> Available</button>
+                            <i class="fas fa-check"></i> Available</button>
 
                         <div *ngIf="result.plexUrl">
                             <br/>
                             <br/>
                             <a style="text-align: right" class="btn btn-sm btn-primary-outline" href="{{result.plexUrl}}" target="_blank">
-                                <i class="fa fa-eye"></i> View In Plex</a>
+                                <i class="far fa-eye"></i> View In Plex</a>
 
                         </div>
                     </div>
@@ -122,20 +122,20 @@
                         <div *ngIf="result.requested || result.approved; then requestedBtn else notRequestedBtn"></div>
                         <ng-template #requestedBtn>
                             <button style="text-align: right" class="btn btn-primary-outline disabled" [disabled]>
-                                <i class="fa fa-check"></i> Requested</button>
+                                <i class="fas fa-check"></i> Requested</button>
                         </ng-template>
                         <ng-template #notRequestedBtn>
                             <button id="{{result.id}}" style="text-align: right" class="btn btn-primary-outline" (click)="request(result)">
-                                <i *ngIf="result.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                                <i *ngIf="!result.requestProcessing && !result.processed" class="fa fa-plus"></i>
-                                <i *ngIf="result.processed && !result.requestProcessing" class="fa fa-check"></i>Request</button>
+                                <i *ngIf="result.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i>
+                                <i *ngIf="!result.requestProcessing && !result.processed" class="fas fa-plus"></i>
+                                <i *ngIf="result.processed && !result.requestProcessing" class="fas fa-check"></i>Request</button>
                         </ng-template>
                     </div>
 
                     <br/>
                     <div *ngIf="result.available">
                         <a *ngIf="result.plexUrl" style="text-align: right" class="btn btn-sm btn-success-outline" href="{{result.plexUrl}}" target="_blank">
-                            <i class="fa fa-eye"></i> View On Plex</a>
+                            <i class="far fa-eye"></i> View On Plex</a>
 
                     </div>
 
diff --git a/src/Ombi/ClientApp/src/app/search/music/albumsearch.component.html b/src/Ombi/ClientApp/src/app/search/music/albumsearch.component.html
index 2b31df040..c63a7bfa3 100644
--- a/src/Ombi/ClientApp/src/app/search/music/albumsearch.component.html
+++ b/src/Ombi/ClientApp/src/app/search/music/albumsearch.component.html
@@ -71,25 +71,25 @@
         <!-- <div class="row" *ngIf="result.requested">
             <div class="col-md-2 col-md-push-10">
 
-                 <a *ngIf="result.showSubscribe && !result.subscribed" style="color:white" (click)="subscribe(result)" pTooltip="Subscribe for notifications"> <i class="fa fa-rss"></i></a>
-            <a *ngIf="result.showSubscribe && result.subscribed" style="color:red" (click)="unSubscribe(result)" pTooltip="Unsubscribe notification"> <i class="fa fa-rss"></i></a>
+                 <a *ngIf="result.showSubscribe && !result.subscribed" style="color:white" (click)="subscribe(result)" pTooltip="Subscribe for notifications"> <i class="fas fa-rss"></i></a>
+            <a *ngIf="result.showSubscribe && result.subscribed" style="color:red" (click)="unSubscribe(result)" pTooltip="Unsubscribe notification"> <i class="fas fa-rss"></i></a>
             </div>
         </div> -->
         <div *ngIf="result.fullyAvailable">
             <button style="text-align: right" class="btn btn-success-outline disabled" disabled>
-                <i class="fa fa-check"></i> {{ 'Common.Available' | translate }}</button>
+                <i class="fas fa-check"></i> {{ 'Common.Available' | translate }}</button>
         </div>
         <div *ngIf="!result.fullyAvailable">
             <div *ngIf="result.requested || result.approved || result.monitored; then requestedBtn else notRequestedBtn"></div>
             <ng-template #requestedBtn>
                 <button style="text-align: right" class="btn btn-primary-outline disabled" [disabled]>
-                    <i class="fa fa-check"></i> {{ 'Common.Requested' | translate }}</button>
+                    <i class="fas fa-check"></i> {{ 'Common.Requested' | translate }}</button>
             </ng-template>
             <ng-template #notRequestedBtn>
                 <button style="text-align: right" class="btn btn-primary-outline" (click)="request(result)">
-                    <i *ngIf="result.requestProcessing" class="fa fa-circle-o-notch fa-spin fa-fw"></i>
-                    <i *ngIf="!result.requestProcessing && !result.processed" class="fa fa-plus"></i>
-                    <i *ngIf="result.processed && !result.requestProcessing" class="fa fa-check"></i> {{ 'Common.Request'
+                    <i *ngIf="result.requestProcessing" class="fas fa-circle-notch fa-spin fa-fw"></i>
+                    <i *ngIf="!result.requestProcessing && !result.processed" class="fas fa-plus"></i>
+                    <i *ngIf="result.processed && !result.requestProcessing" class="fas fa-check"></i> {{ 'Common.Request'
                     | translate }}</button>
             </ng-template>
         </div>
@@ -98,7 +98,7 @@
          <div class="dropdown" *ngIf="(result.partiallyAvailable || result.fullyAvailable) && issueCategories && issuesEnabled">
             <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                 aria-expanded="true">
-                <i class="fa fa-plus"></i> Report Issue
+                <i class="fas fa-plus"></i> Report Issue
                 <span class="caret"></span>
             </button>
             <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
diff --git a/src/Ombi/ClientApp/src/app/search/music/artistsearch.component.html b/src/Ombi/ClientApp/src/app/search/music/artistsearch.component.html
index cc1f093df..339b498a3 100644
--- a/src/Ombi/ClientApp/src/app/search/music/artistsearch.component.html
+++ b/src/Ombi/ClientApp/src/app/search/music/artistsearch.component.html
@@ -47,15 +47,15 @@
         <div class="row" *ngIf="result.requested">
             <div class="col-md-2 col-md-push-10">
 
-                <!-- <a *ngIf="result.showSubscribe && !result.subscribed" style="color:white" (click)="subscribe(result)" pTooltip="Subscribe for notifications"> <i class="fa fa-rss"></i></a>
-            <a *ngIf="result.showSubscribe && result.subscribed" style="color:red" (click)="unSubscribe(result)" pTooltip="Unsubscribe notification"> <i class="fa fa-rss"></i></a> -->
+                <!-- <a *ngIf="result.showSubscribe && !result.subscribed" style="color:white" (click)="subscribe(result)" pTooltip="Subscribe for notifications"> <i class="fas fa-rss"></i></a>
+            <a *ngIf="result.showSubscribe && result.subscribed" style="color:red" (click)="unSubscribe(result)" pTooltip="Unsubscribe notification"> <i class="fas fa-rss"></i></a> -->
             </div>
         </div>
         <button style="text-align: right" class="btn btn-info-outline" [disabled]="searchingAlbums" (click)="viewAllAlbums()">
-            <i class="fa fa-eye"></i> View Albums</button>
+            <i class="far fa-eye"></i> View Albums</button>
 
     </div>
-    <!-- <button style="text-align: right" class="btn btn-sm btn-info-outline" (click)="similarMovies(result.id)"> <i class="fa fa-eye"></i> {{ 'Search.Similar' | translate }}</button> -->
+    <!-- <button style="text-align: right" class="btn btn-sm btn-info-outline" (click)="similarMovies(result.id)"> <i class="far fa-eye"></i> {{ 'Search.Similar' | translate }}</button> -->
 
     <br/>
 
diff --git a/src/Ombi/ClientApp/src/app/search/music/musicsearch.component.html b/src/Ombi/ClientApp/src/app/search/music/musicsearch.component.html
index 89af8de01..0014ad06b 100644
--- a/src/Ombi/ClientApp/src/app/search/music/musicsearch.component.html
+++ b/src/Ombi/ClientApp/src/app/search/music/musicsearch.component.html
@@ -3,7 +3,7 @@
     <div class="input-group">
         <input id="search" type="text" placeholder="{{ 'Search.SearchBarPlaceholder' | translate }}" class="form-control form-control-custom form-control-search form-control-withbuttons" (keyup)="search($event)">
         <div class="input-group-addon right-radius">
-            <i class="fa fa-search"></i>
+            <i class="fas fa-search"></i>
         </div>
     </div>
     <div class="form-group">
@@ -20,11 +20,11 @@
     <br />
     <div id="movieList">
         <div *ngIf="searchApplied && artistResult?.length <= 0 && !searchAlbum" class='no-search-results'>
-            <i class='fa fa-music no-search-results-icon'></i>
+            <i class='fas fa-music no-search-results-icon'></i>
             <div class='no-search-results-text' [translate]="'Search.NoResults'"></div>
         </div>
         <div *ngIf="searchApplied && albumResult?.length <= 0 && searchAlbum" class='no-search-results'>
-            <i class='fa fa-music no-search-results-icon'></i>
+            <i class='fas fa-music no-search-results-icon'></i>
             <div class='no-search-results-text' [translate]="'Search.NoResults'"></div>
         </div>
 
diff --git a/src/Ombi/ClientApp/src/app/search/search.component.html b/src/Ombi/ClientApp/src/app/search/search.component.html
index 7e1d280d2..2558ed903 100644
--- a/src/Ombi/ClientApp/src/app/search/search.component.html
+++ b/src/Ombi/ClientApp/src/app/search/search.component.html
@@ -7,14 +7,14 @@
 <ul id="nav-tabs" class="nav nav-tabs nav-justified" role="tablist">
 
     <li role="presentation" class="active">
-        <a id="movieTabButton" href="#MoviesTab" aria-controls="home" role="tab" data-toggle="tab" (click)="selectMovieTab()"><i class="fa fa-film"></i>  {{ 'Search.MoviesTab' | translate }}</a>
+        <a id="movieTabButton" href="#MoviesTab" aria-controls="home" role="tab" data-toggle="tab" (click)="selectMovieTab()"><i class="fas fa-film"></i>  {{ 'Search.MoviesTab' | translate }}</a>
     </li>
     
     <li role="presentation">
-        <a id="tvTabButton" href="#TvShowTab" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectTvTab()"><i class="fa fa-television"></i> {{ 'Search.TvTab' | translate }}</a>
+        <a id="tvTabButton" href="#TvShowTab" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectTvTab()"><i class="fas fa-tv"></i> {{ 'Search.TvTab' | translate }}</a>
     </li>
     <li role="presentation" *ngIf="musicEnabled">
-        <a id="tvTabButton" href="#MusicTab" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectMusicTab()"><i class="fa fa-music"></i> {{ 'Search.MusicTab' | translate }}</a>
+        <a id="tvTabButton" href="#MusicTab" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectMusicTab()"><i class="fas fa-music"></i> {{ 'Search.MusicTab' | translate }}</a>
     </li>
 </ul>
 
diff --git a/src/Ombi/ClientApp/src/app/search/tvsearch.component.html b/src/Ombi/ClientApp/src/app/search/tvsearch.component.html
index 0648cbfb3..b46cab574 100644
--- a/src/Ombi/ClientApp/src/app/search/tvsearch.component.html
+++ b/src/Ombi/ClientApp/src/app/search/tvsearch.component.html
@@ -4,7 +4,7 @@
         <div class="btn-group" role="group">
             <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                 {{ 'Search.Suggestions' | translate }}
-                <i class="fa fa-chevron-down"></i>
+                <i class="fas fa-chevron-down"></i>
             </a>
             <ul class="dropdown-menu">
                 <li>
@@ -31,7 +31,7 @@
             <div class="search-button-container-inline">
                 <ng-template [ngTemplateOutlet]="FilterRef"></ng-template>
             </div>
-            <i id="tvSearchButton" class="fa fa-search"></i>
+            <i id="tvSearchButton" class="fas fa-search"></i>
         </div>
     </div>
 
@@ -49,7 +49,7 @@
     <div id="tvList">
 
         <div *ngIf="searchApplied && tvResults?.length <= 0" class='no-search-results'>
-            <i class='fa fa-film no-search-results-icon'></i>
+            <i class='fas fa-film no-search-results-icon'></i>
             <div class='no-search-results-text'>{{ 'Search.NoResults' | translate }}</div>
         </div>
         <div *ngIf="tvResults" >
@@ -107,7 +107,7 @@
                         <div class="col-sm-2 small-padding">
                             <div *ngIf="!node.fullyAvailable" class="dropdown">
                                 <button class="btn btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-                                    <i class="fa fa-plus"></i> {{ 'Common.Request' | translate }}
+                                    <i class="fas fa-plus"></i> {{ 'Common.Request' | translate }}
                                     <span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
@@ -128,29 +128,29 @@
 
                             <div *ngIf="node.fullyAvailable">
                                 <button style="text-align: right" class="btn btn-success-outline disabled" disabled>
-                                    <i class="fa fa-check"></i> {{ 'Common.Available' | translate }}
+                                    <i class="fas fa-check"></i> {{ 'Common.Available' | translate }}
                                 </button>
                             </div>
                             <br />
                             <div *ngIf="node.plexUrl && node.available">
                                 <a style="text-align: right" class="btn btn-sm btn-success-outline" href="{{node.plexUrl}}" target="_blank">
-                                    <i class="fa fa-eye"></i> {{ 'Search.ViewOnPlex' | translate }}
+                                    <i class="far fa-eye"></i> {{ 'Search.ViewOnPlex' | translate }}
                                 </a>
                             </div>
                             <div *ngIf="node.embyUrl && node.available">
                                 <a style="text-align: right" id="embybtn" class="btn btn-sm btn-success-outline" href="{{node.embyUrl}}" target="_blank">
-                                    <i class="fa fa-eye"></i> {{ 'Search.ViewOnEmby' | translate }}
+                                    <i class="far fa-eye"></i> {{ 'Search.ViewOnEmby' | translate }}
                                 </a>
                             </div>
                             <div *ngIf="node.jellyfinUrl && node.available">
                                 <a style="text-align: right" id="jellyfinbtn" class="btn btn-sm btn-success-outline" href="{{node.jellyfinUrl}}" target="_blank">
-                                    <i class="fa fa-eye"></i> {{ 'Search.ViewOnJellyfin' | translate }}
+                                    <i class="far fa-eye"></i> {{ 'Search.ViewOnJellyfin' | translate }}
                                 </a>
                             </div>
                             <div class="dropdown" *ngIf="issueCategories && issuesEnabled">
                                 <button class="btn btn-sm btn-primary-outline dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true"
                                     aria-expanded="true">
-                                    <i class="fa fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
+                                    <i class="fas fa-plus"></i> {{ 'Requests.ReportIssue' | translate }}
                                     <span class="caret"></span>
                                 </button>
                                 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
diff --git a/src/Ombi/ClientApp/src/app/settings/couchpotato/couchpotato.component.html b/src/Ombi/ClientApp/src/app/settings/couchpotato/couchpotato.component.html
index 3ca5a133e..396fe12ad 100644
--- a/src/Ombi/ClientApp/src/app/settings/couchpotato/couchpotato.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/couchpotato/couchpotato.component.html
@@ -62,7 +62,7 @@
                             </div>
                             <div class="md-form-field" style="display:inline;margin-left:20px;">
                             <button mat-raised-button id="profiles" (click)="getProfiles(form)" class="mat-stroked-button load">
-                                    Load Quality Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+                                    Load Quality Profiles <span *ngIf="profilesRunning" class="fas fa-spinner fa-spin"></span></button>
                             </div>
                         </div>
                     </div>
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 21020a5af..2af9fbfda 100644
--- a/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/failedrequests/failedrequests.component.html
@@ -19,7 +19,7 @@
             </td>
             <td>{{RequestType[v.type] | humanize}}</td>
             <td class="vcenter">{{v.retryCount}}</td>
-            <td class="vcenter"> <i [pTooltip]="v.error" class="fa fa-info-circle"></i></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>
diff --git a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
index 850902dd1..6117414bd 100644
--- a/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/lidarr/lidarr.component.html
@@ -56,7 +56,7 @@
             <div class="md-form-field">
               <div class="md-form-field" style="display:inline;">
                 <button mat-raised-button type="button" (click)="getProfiles(form)" color="primary">Load Profiles <span
-                    *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+                    *ngIf="profilesRunning" class="fas fa-spinner fa-spin"></span></button>
               </div>
               <div class="md-form-field" style="margin-top:1em;"></div>
               <mat-form-field appearance="outline" floatLabel=always>
@@ -72,7 +72,7 @@
             <div class="md-form-field">
               <div class="md-form-field" style="display:inline;">
                 <button mat-raised-button type="button" (click)="getRootFolders(form)" color="primary">Load Root Folders <span
-                    *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
+                    *ngIf="rootFoldersRunning" class="fas fa-spinner fa-spin"></span></button>
               </div>
 
               <div class="md-form-field" style="margin-top:1em;"></div>
@@ -90,7 +90,7 @@
             <div class="md-form-field">
               <div class="md-form-field" style="display:inline;">
                 <button mat-raised-button type="button" (click)="getMetadataProfiles(form)" color="primary">Load Metadata <span
-                    *ngIf="metadataRunning" class="fa fa-spinner fa-spin"></span></button></div>
+                    *ngIf="metadataRunning" class="fas fa-spinner fa-spin"></span></button></div>
                     <div class="md-form-field" style="margin-top:1em;"></div>
             </div>
               <mat-form-field appearance="outline" floatLabel=always>
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 1ee583104..8ab28cc3c 100644
--- a/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/notifications/webhook.component.html
@@ -22,7 +22,7 @@
 
                 <div class="form-group">
                     <label for="applicationToken" class="control-label">Application Token
-                        <i class="fa fa-question-circle" pTooltip="Optional authentication token. Will be sent as 'Access-Token' header."></i>
+                        <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.">
diff --git a/src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html b/src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html
index 26d7681a6..d504869b5 100644
--- a/src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/ombi/ombi.component.html
@@ -16,7 +16,7 @@
                     <mat-label>Api Key</mat-label>
                     <input matInput id="ApiKey" name="ApiKey"  formControlName="apiKey" readonly="readonly">
                     <button type="button" matSuffix (click)="refreshApiKey()" style="display:inline-block;">
-                        <mat-icon class="fa fa-refresh"></mat-icon>
+                        <mat-icon class="fas fa-sync"></mat-icon>
                     </button>
 
                 </mat-form-field>
diff --git a/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html b/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html
index eb143bccb..2750fe756 100644
--- a/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/plex/plex.component.html
@@ -102,7 +102,7 @@
                             <div>
                                 <button mat-raised-button (click)="loadLibraries(server)"
                                     class="mat-focus-indicator mat-stroked-button mat-button-base">Load Libraries
-                                    <i class="fa fa-film"></i>
+                                    <i class="fas fa-film"></i>
                                 </button>
                             </div>
                         </div>
@@ -143,7 +143,7 @@
                             <div>
                                 <button mat-raised-button id="requestToken" (click)="requestServers(server)"
                                     class="mat-stroked-button">Load Servers
-                                    <i class="fa fa-key"></i>
+                                    <i class="fas fa-key"></i>
                                 </button>
                             </div>
                         </div>
diff --git a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html
index a6016b73f..45963b1e8 100644
--- a/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/radarr/radarr.component.html
@@ -59,7 +59,7 @@
                     <label for="username" class="control-label"><h3>Radarr Interface</h3></label>
                     <div class="md-form-field">
                     <div class="md-form-field" style="display:inline;">
-                        <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+                        <button mat-raised-button (click)="getProfiles(form)" color="primary">Load Profiles <span *ngIf="profilesRunning" class="fas fa-spinner fa-spin"></span></button>
                     </div>
                     <div class="md-form-field" style="margin-top:1em;"></div>
                         <mat-form-field appearance="outline" >
@@ -74,7 +74,7 @@
                     </div>
                     <div class="md-form-field">
                         <div class="md-form-field" style="display:inline;">
-                            <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button>
+                            <button mat-raised-button (click)="getRootFolders(form)" color="primary">Load Root Folders <span *ngIf="rootFoldersRunning" class="fas fa-spinner fa-spin"></span></button>
                         </div>
                         <div class="md-form-field" style="margin-top:1em;"></div>
                         <mat-form-field appearance="outline" >
diff --git a/src/Ombi/ClientApp/src/app/settings/settingsmenu.component.html b/src/Ombi/ClientApp/src/app/settings/settingsmenu.component.html
index e3d2d9257..21e3feb46 100644
--- a/src/Ombi/ClientApp/src/app/settings/settingsmenu.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/settingsmenu.component.html
@@ -1,5 +1,5 @@
 
-<button mat-button [matMenuTriggerFor]="configurationmenu"><i class="fa fa-cogs" aria-hidden="true"></i> Configuration</button>
+<button mat-button [matMenuTriggerFor]="configurationmenu"><i class="fas fa-wrench" aria-hidden="true"></i> Configuration</button>
 <mat-menu #configurationmenu="matMenu">
     <button mat-menu-item [routerLink]="['/Settings/Ombi']">General</button>
     <button mat-menu-item [routerLink]="['/Settings/Customization']">Customization</button>
@@ -11,33 +11,33 @@
     <button mat-menu-item [routerLink]="['/Settings/TheMovieDb']">The Movie Database</button>
 </mat-menu>
 
-<button mat-button [matMenuTriggerFor]="mediaservermenu"><i class="fa fa-server" aria-hidden="true"></i> Media Server</button>
+<button mat-button [matMenuTriggerFor]="mediaservermenu"><i class="fas fa-server" aria-hidden="true"></i> Media Server</button>
 <mat-menu #mediaservermenu="matMenu">
     <button mat-menu-item [routerLink]="['/Settings/Plex']">Plex</button>
     <button mat-menu-item [routerLink]="['/Settings/Emby']">Emby</button>
     <button mat-menu-item [routerLink]="['/Settings/Jellyfin']">Jellyfin</button>
 </mat-menu>
 
-<button mat-button [matMenuTriggerFor]="tvmenu"><i class="fa fa-television" aria-hidden="true"></i> TV</button>
+<button mat-button [matMenuTriggerFor]="tvmenu"><i class="fas fa-tv" aria-hidden="true"></i> TV</button>
 <mat-menu #tvmenu="matMenu">
     <button mat-menu-item [routerLink]="['/Settings/Sonarr']">Sonarr</button>
     <button mat-menu-item [routerLink]="['/Settings/DogNzb']">DogNzb</button>
     <button mat-menu-item [routerLink]="['/Settings/SickRage']">SickRage</button>
 </mat-menu>
 
-<button mat-button [matMenuTriggerFor]="movieMenu"><i class="fa fa-film" aria-hidden="true"></i> Movies</button>
+<button mat-button [matMenuTriggerFor]="movieMenu"><i class="fas fa-film" aria-hidden="true"></i> Movies</button>
 <mat-menu #movieMenu="matMenu">
     <button mat-menu-item [routerLink]="['/Settings/CouchPotato']">CouchPotato</button>
     <button mat-menu-item [routerLink]="['/Settings/DogNzb']">DogNzb</button>
     <button mat-menu-item [routerLink]="['/Settings/Radarr']">Radarr</button>
 </mat-menu>
 
-<button mat-button [matMenuTriggerFor]="musicMenu"><i class="fa fa-music" aria-hidden="true"></i> Music</button>
+<button mat-button [matMenuTriggerFor]="musicMenu"><i class="fas fa-music" aria-hidden="true"></i> Music</button>
 <mat-menu #musicMenu="matMenu">
     <button mat-menu-item [routerLink]="['/Settings/Lidarr']">Lidarr</button>
 </mat-menu>
 
-<button mat-button [matMenuTriggerFor]="notificationMenu"><i class="fa fa-bell-o" aria-hidden="true"></i> Notifications</button>
+<button mat-button [matMenuTriggerFor]="notificationMenu"><i class="fas fa-bell" aria-hidden="true"></i> Notifications</button>
 <mat-menu #notificationMenu="matMenu">
     <button mat-menu-item [routerLink]="['/Settings/CloudMobile']">Mobile</button>
     <button mat-menu-item [routerLink]="['/Settings/Mobile']">Legacy Mobile</button>
@@ -55,7 +55,7 @@
     <button mat-menu-item [routerLink]="['/Settings/Webhook']">Webhook</button>
 </mat-menu>
 
-<button mat-button [matMenuTriggerFor]="systemMenu"><i class="fa fa-tachometer" aria-hidden="true"></i> System</button>
+<button mat-button [matMenuTriggerFor]="systemMenu"><i class="fas fa-sliders-h" aria-hidden="true"></i> System</button>
 <mat-menu #systemMenu="matMenu">
     <button mat-menu-item [routerLink]="['/Settings/About']">About</button>
     <button mat-menu-item [routerLink]="['/Settings/FailedRequests']">Failed Requests</button>
diff --git a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html
index 2e2e13170..7ca71b554 100644
--- a/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html
+++ b/src/Ombi/ClientApp/src/app/settings/sonarr/sonarr.component.html
@@ -61,7 +61,7 @@
                         <div id="profiles">
                             <div class="md-form-field" style="display:inline;">
                                 <button mat-raised-button id="profiles" (click)="getProfiles(form)" class="mat-stroked-button">
-                                        Load Qualities <span *ngIf="profilesRunning" class="fa fa-spinner fa-spin"></span></button>
+                                        Load Qualities <span *ngIf="profilesRunning" class="fas fa-spinner fa-spin"></span></button>
                                         <div class="md-form-field" style="margin-top:1em;"></div>
                                 </div>
                             <div class="md-form-field" style="display:contents;">
@@ -93,7 +93,7 @@
                         <div id="rootFolders">
                             <div class="md-form-field" style="display:inline">
                                 <button mat-raised-button id="rootFolder" (click)="getRootFolders(form)" class="mat-stroked-button">
-                                    Load Folders <span *ngIf="rootFoldersRunning" class="fa fa-spinner fa-spin"></span></button><div class="md-form-field" style="margin-top:1em;"></div>
+                                    Load Folders <span *ngIf="rootFoldersRunning" class="fas fa-spinner fa-spin"></span></button><div class="md-form-field" style="margin-top:1em;"></div>
                                 </div>
                             <div class="md-form-field" style="display:contents;">
                                 <mat-form-field appearance="outline">
@@ -122,12 +122,12 @@
 
                     <div class="form-group  col-md-12" *ngIf="form.controls.v3.value">
                         <label for="select" class="control-label">Language Profiles 
-                            <i *ngIf="form.get('languageProfile').hasError('required')" class="fa fa-exclamation-circle error-text" pTooltip="A Language Profile is required"></i>
+                            <i *ngIf="form.get('languageProfile').hasError('required')" class="fas fa-exclamation-circle error-text" pTooltip="A Language Profile is required"></i>
                         </label>
                         <div id="langaugeProfile">
                             <div class="md-form-field" style="display:inline">
                                 <button type="button" mat-raised-button (click)="getLanguageProfiles(form)" class="mat-stroked-button">Load
-                                    Languages <span *ngIf="langRunning" class="fa fa-spinner fa-spin"> </span></button><div class="md-form-field" style="margin-top:1em;"></div>
+                                    Languages <span *ngIf="langRunning" class="fas fa-spinner fa-spin"> </span></button><div class="md-form-field" style="margin-top:1em;"></div>
                                 </div>
                             <div class="md-form-field" style="display:contents;">
                                 <mat-form-field appearance="outline">
diff --git a/src/Ombi/ClientApp/src/app/vote/vote.component.html b/src/Ombi/ClientApp/src/app/vote/vote.component.html
index d91ce85bd..473953549 100644
--- a/src/Ombi/ClientApp/src/app/vote/vote.component.html
+++ b/src/Ombi/ClientApp/src/app/vote/vote.component.html
@@ -6,12 +6,12 @@
 
     <li role="presentation" class="active">
         <a id="currentVotes" href="#currentVotes" aria-controls="home" role="tab" data-toggle="tab" (click)="selectCurrentTab()"><i
-                class="fa fa-meh-o"></i> {{ 'Votes.VotesTab' | translate }}</a>
+                class="far fa-meh"></i> {{ 'Votes.VotesTab' | translate }}</a>
     </li>
 
     <li role="presentation">
         <a id="completedVotes" href="#completedVotes" aria-controls="profile" role="tab" data-toggle="tab" (click)="selectCompletedVotesTab()"><i
-                class="fa fa-smile-o"></i> {{ 'Votes.CompletedVotesTab' | translate }}</a>
+                class="far fa-smile"></i> {{ 'Votes.CompletedVotesTab' | translate }}</a>
     </li>
 </ul>
 
@@ -32,9 +32,9 @@
                         <tbody>
                             <tr *ngFor="let vm of currentVotes">
                                 <td class="vcenter">
-                                    <button id="{{vm.requestId}}upvote" class="btn btn-info-outline col-md-6" (click)="upvote(vm)"><i class="fa fa-thumbs-o-up"
+                                    <button id="{{vm.requestId}}upvote" class="btn btn-info-outline col-md-6" (click)="upvote(vm)"><i class="far fa-thumbs-up"
                                             aria-hidden="true"></i></button>
-                                    <button id="{{vm.requestId}}downvote" class="btn btn-info-outline col-md-6" (click)="downvote(vm)" ><i class="fa fa-thumbs-o-down"
+                                    <button id="{{vm.requestId}}downvote" class="btn btn-info-outline col-md-6" (click)="downvote(vm)" ><i class="far fa-thumbs-down"
                                             aria-hidden="true"></i></button>
                                 </td>
                                 <td style="width: 10%"> <img *ngIf="vm.image" class="img-responsive poster" style="max-width: 100%;
@@ -66,10 +66,10 @@
                     <tr *ngFor="let vm of completedVotes">
                         <td class="vcenter">
                             <button id="{{vm.requestId}}upvote" class="btn btn-info-outline col-md-6" [ngClass]="{'btn-success-outline': vm.myVote == VoteType.Upvote, 'btn-info-outline':  vm.myVote != VoteType.Upvote}"
-                             (click)="upvote(vm)" [disabled]="vm.myVote == VoteType.Upvote"><i class="fa fa-thumbs-o-up"
+                             (click)="upvote(vm)" [disabled]="vm.myVote == VoteType.Upvote"><i class="far fa-thumbs-up"
                                     aria-hidden="true"></i></button>
                             <button id="{{vm.requestId}}downvote" class="btn btn-info-outline col-md-6" [ngClass]="{'btn-danger-outline': vm.myVote == VoteType.Downvote, 'btn-info-outline':  vm.myVote != VoteType.Downvote}"
-                             (click)="downvote(vm)" [disabled]="vm.myVote == VoteType.Downvote"><i class="fa fa-thumbs-o-down"
+                             (click)="downvote(vm)" [disabled]="vm.myVote == VoteType.Downvote"><i class="far fa-thumbs-down"
                                     aria-hidden="true"></i></button>
                         </td>
                         <td style="width: 10%"> <img *ngIf="vm.image" class="img-responsive poster" style="max-width: 100%;
diff --git a/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html b/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html
index 4a120f790..fd30c08ff 100644
--- a/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html
+++ b/src/Ombi/ClientApp/src/app/wizard/plex/plex.component.html
@@ -13,7 +13,7 @@
 <small>Please note we do not store this information, we only store your Plex Authorization Token that will allow Ombi to view your media and users</small>
 <div class="form-group">
     <div style="text-align: center; margin-top: 20px">
-        <button (click)="requestAuthToken()" mat-raised-button color="primary" >Request Token <i class="fa fa-key"></i></button>
+        <button (click)="requestAuthToken()" mat-raised-button color="primary" >Request Token <i class="fas fa-key"></i></button>
     </div>
 </div>
 <p class="text-center">OR</p>
diff --git a/src/Ombi/ClientApp/yarn.lock b/src/Ombi/ClientApp/yarn.lock
index a834d8bdf..d976c8be5 100644
--- a/src/Ombi/ClientApp/yarn.lock
+++ b/src/Ombi/ClientApp/yarn.lock
@@ -1126,6 +1126,11 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@fortawesome/fontawesome-free@^5.15.2":
+  version "5.15.2"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.2.tgz#218cd7276ab4f9ab57cc3d2efa2697e6a579f25d"
+  integrity sha512-7l/AX41m609L/EXI9EKH3Vs3v0iA8tKlIOGtw+kgcoanI7p+e4I4GYLqW3UXWiTnjSFymKSmTTPKYrivzbxxqA==
+
 "@fullcalendar/core@^4.2.0":
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/@fullcalendar/core/-/core-4.4.0.tgz#79dbc0cca836ce628a07e739a456da11ff141373"
@@ -3841,10 +3846,6 @@ follow-redirects@^1.0.0:
   dependencies:
     debug "=3.1.0"
 
-font-awesome@^4.7.0:
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133"
-
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"