diff --git a/backend/subscriptions.js b/backend/subscriptions.js
index d185365..2dadbe7 100644
--- a/backend/subscriptions.js
+++ b/backend/subscriptions.js
@@ -11,7 +11,7 @@ const config_api = require('./config');
 const adapter = new FileSync('db.json');
 const db = low(adapter)
 
-let debugMode = process.env.YTDL_MODE === 'debug';
+const debugMode = process.env.YTDL_MODE === 'debug';
 
 async function subscribe(sub) {
     const result_obj = {
diff --git a/package.json b/package.json
index e3f6719..73966f1 100644
--- a/package.json
+++ b/package.json
@@ -31,16 +31,17 @@
     "@angular/router": "^8.2.11",
     "core-js": "^2.4.1",
     "file-saver": "^2.0.2",
+    "hammerjs": "^2.0.8",
     "ng-lazyload-image": "^7.0.1",
     "ng4-configure": "^0.1.7",
     "ngx-content-loading": "^0.1.3",
     "rxjs": "^6.5.3",
     "rxjs-compat": "^6.0.0-rc.0",
     "tslib": "^1.10.0",
+    "typescript": "~3.5.3",
     "videogular2": "^7.0.1",
     "web-animations-js": "^2.3.2",
-    "zone.js": "~0.9.1",
-    "typescript": "~3.5.3"
+    "zone.js": "~0.9.1"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.803.24",
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 057f745..f96e0d0 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -3,7 +3,7 @@
         <mat-toolbar color="primary" class="top">
             <div class="flex-row" width="100%" height="100%">
                 <div class="flex-column" style="text-align: left; margin-top: 1px;">
-                    <button class="no-outline" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
+                    <button #hamburgerMenu style="outline: none" *ngIf="router.url.split(';')[0] !== '/player'" mat-icon-button aria-label="Toggle side navigation" (click)="toggleSidenav()"><mat-icon>menu</mat-icon></button>
                     <button (click)="goBack()" *ngIf="router.url.split(';')[0] === '/player'" mat-icon-button><mat-icon>arrow_back</mat-icon></button>
                 </div>
                 <div class="flex-column" style="text-align: center; margin-top: 5px;">
@@ -12,10 +12,10 @@
                 <div class="flex-column" style="text-align: right; align-items: flex-end;">
                     <button [matMenuTriggerFor]="menuSettings" mat-icon-button><mat-icon>more_vert</mat-icon></button>
                     <mat-menu #menuSettings="matMenu">
-                        <button (click)="$event.stopPropagation();" *ngIf="allowThemeChange" mat-menu-item>
+                        <button (click)="themeMenuItemClicked($event)" *ngIf="allowThemeChange" mat-menu-item>
                           <mat-icon>{{(postsService.theme.key === 'default') ? 'brightness_5' : 'brightness_2'}}</mat-icon>
                           <span>Dark</span>
-                          <mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'" (change)="flipTheme()"></mat-slide-toggle>
+                          <mat-slide-toggle class="theme-slide-toggle" [checked]="postsService.theme.key === 'dark'"></mat-slide-toggle>
                         </button>
                         <button (click)="openSettingsDialog()" mat-menu-item>
                           <mat-icon>settings</mat-icon>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index f41f809..e6612e2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -15,7 +15,7 @@ import 'rxjs/add/operator/debounceTime'
 import 'rxjs/add/operator/do'
 import 'rxjs/add/operator/switch'
 import { YoutubeSearchService, Result } from './youtube-search.service';
-import { Router, NavigationStart } from '@angular/router';
+import { Router, NavigationStart, NavigationEnd } from '@angular/router';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { THEMES_CONFIG } from '../themes';
 import { SettingsComponent } from './settings/settings.component';
@@ -36,6 +36,7 @@ export class AppComponent implements OnInit {
   allowThemeChange = null;
 
   @ViewChild('sidenav', {static: false}) sidenav: MatSidenav;
+  @ViewChild('hamburgerMenu', {static: false, read: ElementRef}) hamburgerMenuButton: ElementRef;
   navigator: string = null;
 
   constructor(public postsService: PostsService, public snackBar: MatSnackBar, private dialog: MatDialog,
@@ -45,7 +46,13 @@ export class AppComponent implements OnInit {
     // runs on navigate, captures the route that navigated to the player (if needed)
     this.router.events.subscribe((e) => { if (e instanceof NavigationStart) {
       this.navigator = localStorage.getItem('player_navigator');
-    } });
+    } else if (e instanceof NavigationEnd) {
+      // blurs hamburger menu if it exists, as the sidenav likes to focus on it after closing
+      if (this.hamburgerMenuButton && this.hamburgerMenuButton.nativeElement) {
+        this.hamburgerMenuButton.nativeElement.blur();
+      }
+    }
+    });
 
     // loading config
     this.postsService.loadNavItems().subscribe(res => { // loads settings
@@ -117,6 +124,11 @@ onSetTheme(theme, old_theme) {
     }
   }
 
+  themeMenuItemClicked(event) {
+    this.flipTheme();
+    event.stopPropagation();
+  }
+
   ngOnInit() {
     if (localStorage.getItem('theme')) {
       this.setTheme(localStorage.getItem('theme'));
@@ -135,7 +147,10 @@ onSetTheme(theme, old_theme) {
   }
 
   openSettingsDialog() {
-    const dialogRef = this.dialog.open(SettingsComponent);
+    const dialogRef = this.dialog.open(SettingsComponent, {
+      width: '80vw'
+    });
   }
+
 }
 
diff --git a/src/app/settings/settings.component.html b/src/app/settings/settings.component.html
index 5444f07..17ea080 100644
--- a/src/app/settings/settings.component.html
+++ b/src/app/settings/settings.component.html
@@ -11,15 +11,15 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input [(ngModel)]="new_config['Host']['url']" matInput placeholder="URL" required>
-                    <mat-hint></mat-hint>
+                    <mat-hint>Base URL this app will be accessed from, without the port.</mat-hint>
                 </mat-form-field>
             </div>
-            <div class="col-12">
-                <mat-form-field>
+            <div class="col-12 mt-4">
+                <mat-form-field color="accent">
                     <input [(ngModel)]="new_config['Host']['port']" matInput placeholder="Port" required>
-                    <mat-hint></mat-hint>
+                    <mat-hint>The desired port. Default is 17442.</mat-hint>
                 </mat-form-field>
             </div>
             
@@ -37,20 +37,18 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Encryption']['use-encryption']">Use encryption</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Encryption']['use-encryption']">Use encryption</mat-checkbox>
             </div>
             
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['cert-file-path']" matInput placeholder="Cert file path">
-                    <mat-hint></mat-hint>
                 </mat-form-field>
             </div>
             
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input [disabled]="!new_config['Encryption']['use-encryption']" [(ngModel)]="new_config['Encryption']['key-file-path']" matInput placeholder="Key file path">
-                    <mat-hint></mat-hint>
                 </mat-form-field>
             </div>
         </div>
@@ -67,23 +65,23 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input matInput [(ngModel)]="new_config['Downloader']['path-audio']" placeholder="Audio folder path" required>
-                    <mat-hint></mat-hint>
+                    <mat-hint>Path for audio only downloads. It is relative to YTDL-Material's root folder.</mat-hint>
                 </mat-form-field>
             </div>
             
-            <div class="col-12">
-                <mat-form-field>
+            <div class="col-12 mt-4">
+                <mat-form-field color="accent">
                     <input matInput [(ngModel)]="new_config['Downloader']['path-video']" placeholder="Video folder path" required>
-                    <mat-hint></mat-hint>
+                    <mat-hint>Path for video downloads. It is relative to YTDL-Material's root folder.</mat-hint>
                 </mat-form-field>
             </div>
 
-            <div class="col-12">
-                <mat-form-field>
-                    <textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Custom args" required></textarea>
-                    <mat-hint></mat-hint>
+            <div class="col-12 mt-4">
+                <mat-form-field color="accent">
+                    <textarea matInput [(ngModel)]="new_config['Downloader']['custom_args']" placeholder="Custom args"></textarea>
+                    <mat-hint>Global custom args for downloads on the home page.</mat-hint>
                 </mat-form-field>
             </div>
         </div>
@@ -100,22 +98,22 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input [(ngModel)]="new_config['Extra']['title_top']" matInput placeholder="Top title" required>
                     <mat-hint></mat-hint>
                 </mat-form-field>
             </div>
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Extra']['file_manager_enabled']">File manager enabled</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['file_manager_enabled']">File manager enabled</mat-checkbox>
             </div>
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Extra']['allow_quality_select']">Allow quality select</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_quality_select']">Allow quality select</mat-checkbox>
             </div>
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Extra']['download_only_mode']">Download only mode</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['download_only_mode']">Download only mode</mat-checkbox>
             </div>
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Extra']['allow_multi_download_mode']">Allow multi-download mode</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Extra']['allow_multi_download_mode']">Allow multi-download mode</mat-checkbox>
             </div>
         </div>
     </div>
@@ -131,12 +129,12 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['API']['use_youtube_api']">Use YouTube API</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['API']['use_youtube_api']">Use YouTube API</mat-checkbox>
             </div>
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input [disabled]="!new_config['API']['use_youtube_api']" [(ngModel)]="new_config['API']['youtube_API_key']" matInput placeholder="Youtube API Key" required>
-                    <mat-hint></mat-hint>
+                    <mat-hint><a target="_blank" href="https://developers.google.com/youtube/v3/getting-started">Generating a key</a> is easy!</mat-hint>
                 </mat-form-field>
             </div>
         </div>
@@ -153,14 +151,14 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-select style="width: 100px" [(ngModel)]="new_config['Themes']['default_theme']">
+                <mat-select color="accent" style="width: 100px" [(ngModel)]="new_config['Themes']['default_theme']">
                     <mat-option value="default">Default</mat-option>
                     <mat-option value="dark">Dark</mat-option>
                 </mat-select>
             </div>
             
             <div class="col-12 mt-4">
-                <mat-checkbox [(ngModel)]="new_config['Themes']['allow_theme_change']">Allow theme change</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Themes']['allow_theme_change']">Allow theme change</mat-checkbox>
             </div>
         </div>
     </div>
@@ -176,22 +174,24 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Subscriptions']['allow_subscriptions']">Allow subscriptions</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Subscriptions']['allow_subscriptions']">Allow subscriptions</mat-checkbox>
             </div>
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_base_path']" matInput placeholder="Subscriptions base path">
-                    <mat-hint></mat-hint>
+                    <mat-hint>Base path for videos from your subscribed channels and playlists. It is relative to YTDL-Material's root folder.</mat-hint>
                 </mat-form-field>
             </div>
-            <div class="col-12">
-                <mat-form-field>
+            <div class="col-12 mt-5">
+                <mat-form-field color="accent">
                     <input [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_check_interval']" matInput placeholder="Check interval">
-                    <mat-hint></mat-hint>
+                    <mat-hint>Unit is seconds, only include numbers.</mat-hint>
                 </mat-form-field>
             </div>
-            <div class="col-12">
-                <mat-checkbox [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_use_youtubedl_archive']">Use youtube-dl archive</mat-checkbox>
+            <div class="col-12 mt-4">
+                <mat-checkbox color="accent" [disabled]="!new_config['Subscriptions']['allow_subscriptions']" [(ngModel)]="new_config['Subscriptions']['subscriptions_use_youtubedl_archive']">Use youtube-dl archive</mat-checkbox>
+                <p>With youtube-dl's <a target="_blank" href="https://github.com/ytdl-org/youtube-dl/blob/master/README.md#how-do-i-download-only-new-videos-from-a-playlist">archive</a> feature, downloaded videos from your subscriptions get recorded in a text file in the subscriptions <i>archive</i> sub-directory.</p>
+                <p>This enables the ability to permanently delete videos from your subscriptions without unsubscribing, and allows you to record which videos you downloaded in case of data loss.</p>
             </div>
         </div>
     </div>
@@ -207,16 +207,16 @@
     <div *ngIf="new_config" class="container-fluid">
         <div class="row">
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Advanced']['use_default_downloading_agent']">Use default downloading agent</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['use_default_downloading_agent']">Use default downloading agent</mat-checkbox>
             </div>
             <div class="col-12">
-                <mat-form-field>
+                <mat-form-field color="accent">
                     <input [disabled]="!new_config['Advanced']['use_default_downloading_agent']" [(ngModel)]="new_config['Advanced']['custom_downloading_agent']" matInput placeholder="Custom agent" required>
                     <mat-hint></mat-hint>
                 </mat-form-field>
             </div>
             <div class="col-12">
-                <mat-checkbox [(ngModel)]="new_config['Advanced']['allow_advanced_download']">Allow advanced download</mat-checkbox>
+                <mat-checkbox color="accent" [(ngModel)]="new_config['Advanced']['allow_advanced_download']">Allow advanced download</mat-checkbox>
             </div>
         </div>
     </div>
diff --git a/src/main.ts b/src/main.ts
index a9ca1ca..6898b91 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import 'hammerjs';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';