diff --git a/CHANGELOG.md b/CHANGELOG.md
index acfffb8c7..6e8befec9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,18 @@
 ## SikhiToTheMax Desktop App
 
+### 4.1.0 - _180824_
+
+#### Improved
+  * **User Interface** - Wow! What is this beautiful new software that lets me present Gurbani and looks amazing? Actually, it's the same SikhiToTheMax, but Guru Sahib has done Kirpa on Sevadars to deliver a new version that is much more intuitive. It's the first step in a brand new experience that is coming. In this iteration, controls are closer to where you need them.
+  * **Search by Ang** - Searching by Ang or page number has its own dedicated field
+  * Bug Fixes
+  * Style Fixes
+  
+#### Added
+  * **Scripture Filtering** - Narrow down your search to different scriptures
+  * **Single Screen Presenter View** - Get the benefits of presenter view without having to connect a second screen
+  * **Bani Overlay** - Overlay Editor now provides a way to adjust the background size and opacity and the text size. Gurbani can also be coloured separately from the other text
+
 ### 4.0.6 - _180718_
 #### Improved
  * **Search speed** - _First Letter Start (Gurmukhi)_ search has gotten a huge performance boost, nearing instant from the time you type a letter to when results are shown
diff --git a/app.js b/app.js
index 66faec8fd..d6c562fe6 100644
--- a/app.js
+++ b/app.js
@@ -14,9 +14,27 @@ const io = require('socket.io')(http);
 
 expressApp.use(express.static(path.join(__dirname, 'www', 'obs')));
 
-http.listen(1397); // TODO: move to config file
-
 const { app, BrowserWindow, dialog, ipcMain } = electron;
+
+const op = require('openport');
+
+op.find(
+  {
+    // Re: http://www.sikhiwiki.org/index.php/Gurgadi
+    ports: [1397, 1469, 1539, 1552, 1574, 1581, 1606, 1644, 1661, 1665, 1675, 1708],
+    count: 1,
+  },
+  (err, port) => {
+    if (err) {
+      dialog.showErrorBox('Overlay Error', 'No free ports available. Close other applications and Reboot the machine');
+      app.exit(-1);
+      return;
+    }
+    global.overlayPort = port;
+    // console.log(`Overlay Port No ${port}`);
+    http.listen(port);
+  });
+
 const store = new Store({
   configName: 'user-preferences',
   defaults: defaultPrefs,
@@ -45,22 +63,28 @@ const viewerWindowPos = {};
 
 function openSecondaryWindow(windowName) {
   const window = secondaryWindows[windowName];
-  window.obj = new BrowserWindow({
-    width: 725,
-    height: 800,
-    show: false,
-  });
-  window.obj.webContents.on('did-finish-load', () => {
-    window.obj.show();
-  });
-  window.obj.loadURL(window.url);
+  const openWindow = BrowserWindow.getAllWindows().filter(item => item.getURL() === window.url);
 
-  window.obj.on('close', () => {
-    window.obj = false;
-    if (window.onClose) {
-      window.onClose();
-    }
-  });
+  if (openWindow.length > 0) {
+    openWindow[0].show();
+  } else {
+    window.obj = new BrowserWindow({
+      width: 725,
+      height: 800,
+      show: false,
+    });
+    window.obj.webContents.on('did-finish-load', () => {
+      window.obj.show();
+    });
+    window.obj.loadURL(window.url);
+
+    window.obj.on('close', () => {
+      window.obj = false;
+      if (window.onClose) {
+        window.onClose();
+      }
+    });
+  }
 }
 
 autoUpdater.logger = log;
@@ -101,7 +125,7 @@ autoUpdater.on('update-downloaded', () => {
     message: 'Update available.',
     detail: 'Update downloaded and ready to install',
     cancelId: 0,
-  }, (response) => {
+  }, response => {
     if (response === 1) {
       autoUpdater.quitAndInstall();
     }
@@ -126,7 +150,7 @@ function checkForExternalDisplay() {
   const electronScreen = electron.screen;
   const displays = electronScreen.getAllDisplays();
   let externalDisplay = null;
-  Object.keys(displays).forEach((i) => {
+  Object.keys(displays).forEach(i => {
     if (displays[i].bounds.x !== 0 || displays[i].bounds.y !== 0) {
       externalDisplay = displays[i];
     }
@@ -187,6 +211,7 @@ function createViewer(ipcData) {
       });
     });
   }
+  mainWindow.webContents.send('presenter-view');
 }
 
 app.on('ready', () => {
@@ -299,6 +324,25 @@ ipcMain.on('show-line', (event, arg) => {
   }
 });
 
+ipcMain.on('show-empty-slide', () => {
+  const overlayPrefs = store.get('obs');
+  const emptyLine = {
+    Line: {
+      Gurmukhi: '',
+      English: '',
+      PunjabiUni: '',
+      Transliteration: '',
+    },
+  };
+  const payload = Object.assign(emptyLine, overlayPrefs);
+
+  io.emit('show-line', payload);
+
+  if (overlayPrefs.live) {
+    createBroadcastFiles(emptyLine);
+  }
+});
+
 ipcMain.on('show-text', (event, arg) => {
   if (viewerWindow) {
     viewerWindow.webContents.send('show-text', arg);
@@ -331,6 +375,7 @@ ipcMain.on('update-settings', () => {
   if (viewerWindow) {
     viewerWindow.webContents.send('update-settings');
   }
+  mainWindow.webContents.send('sync-settings');
 });
 
 module.exports = {
diff --git a/package-lock.json b/package-lock.json
index e14687697..599fe14cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "sttm-desktop",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.6",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -720,8 +720,8 @@
       "resolved": "https://registry.npmjs.org/ascli/-/ascli-0.3.0.tgz",
       "integrity": "sha1-XmYjDlIZ/j6JUqTvtPIPrllqgTo=",
       "requires": {
-        "colour": "^0.7.1",
-        "optjs": "^3.2.2"
+        "colour": "latest",
+        "optjs": "latest"
       }
     },
     "asn1": {
@@ -3200,12 +3200,6 @@
       "resolved": "https://registry.npmjs.org/browser-split/-/browser-split-0.0.0.tgz",
       "integrity": "sha1-QUGcrvdpdVkp3VGJZ9PuwKYmJ3E="
     },
-    "browser-stdout": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/browser-stdout/-/browser-stdout-1.3.0.tgz",
-      "integrity": "sha1-81HTKWnTL6XXpVZxVCY9korjvR8=",
-      "dev": true
-    },
     "browserslist": {
       "version": "1.7.7",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
@@ -5061,12 +5055,6 @@
       "integrity": "sha1-WiBc48Ky73e2I41roXnrdMag6Bg=",
       "dev": true
     },
-    "diff": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/diff/-/diff-3.2.0.tgz",
-      "integrity": "sha1-yc45Okt8vQsFinJck98pkCeGj/k=",
-      "dev": true
-    },
     "dmg-builder": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/dmg-builder/-/dmg-builder-4.1.3.tgz",
@@ -9363,12 +9351,6 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
       "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
     },
-    "graceful-readlink": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
-      "dev": true
-    },
     "gray-matter": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/gray-matter/-/gray-matter-3.1.1.tgz",
@@ -9461,12 +9443,6 @@
         }
       }
     },
-    "growl": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/growl/-/growl-1.9.2.tgz",
-      "integrity": "sha1-Dqd0NxXbjY3ixe3hd14bRayFwC8=",
-      "dev": true
-    },
     "gulp-choose-files": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/gulp-choose-files/-/gulp-choose-files-0.1.3.tgz",
@@ -9659,12 +9635,6 @@
         "sntp": "2.x.x"
       }
     },
-    "he": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
-      "integrity": "sha1-k0EP0hsAlzUVH4howvJx80J+I/0=",
-      "dev": true
-    },
     "helper-cache": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/helper-cache/-/helper-cache-0.7.2.tgz",
@@ -10920,12 +10890,6 @@
       "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
       "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus="
     },
-    "json3": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
-      "integrity": "sha1-PAQ0dD35Pi9cQq7nsZvLSDV19OE=",
-      "dev": true
-    },
     "json5": {
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/json5/-/json5-0.5.1.tgz",
@@ -11352,16 +11316,6 @@
       "resolved": "https://registry.npmjs.org/lodash._arrayfilter/-/lodash._arrayfilter-3.0.0.tgz",
       "integrity": "sha1-LevhHuxp5dzG9LhhNxKKSPFSQjc="
     },
-    "lodash._baseassign": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
-      "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
-      "dev": true,
-      "requires": {
-        "lodash._basecopy": "^3.0.0",
-        "lodash.keys": "^3.0.0"
-      }
-    },
     "lodash._basecallback": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/lodash._basecallback/-/lodash._basecallback-3.3.1.tgz",
@@ -11373,18 +11327,6 @@
         "lodash.pairs": "^3.0.0"
       }
     },
-    "lodash._basecopy": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
-      "dev": true
-    },
-    "lodash._basecreate": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz",
-      "integrity": "sha1-G8ZhYU2qf8MRt9A78WgGoCE8+CE=",
-      "dev": true
-    },
     "lodash._baseeach": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/lodash._baseeach/-/lodash._baseeach-3.0.4.tgz",
@@ -11446,12 +11388,6 @@
       "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
       "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U="
     },
-    "lodash._isiterateecall": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
-      "dev": true
-    },
     "lodash._replaceholders": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lodash._replaceholders/-/lodash._replaceholders-3.0.0.tgz",
@@ -11483,16 +11419,10 @@
       "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=",
       "dev": true
     },
-    "lodash.create": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lodash.create/-/lodash.create-3.1.1.tgz",
-      "integrity": "sha1-1/KEnw29p+BGgruM1yqwIkYd6+c=",
-      "dev": true,
-      "requires": {
-        "lodash._baseassign": "^3.0.0",
-        "lodash._basecreate": "^3.0.0",
-        "lodash._isiterateecall": "^3.0.0"
-      }
+    "lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
     },
     "lodash.defaultsdeep": {
       "version": "4.6.0",
@@ -12370,84 +12300,6 @@
         }
       }
     },
-    "mocha": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/mocha/-/mocha-3.5.3.tgz",
-      "integrity": "sha512-/6na001MJWEtYxHOV1WLfsmR4YIynkUEhBwzsb+fk2qmQ3iqsi258l/Q2MWHJMImAcNpZ8DEdYAK72NHoIQ9Eg==",
-      "dev": true,
-      "requires": {
-        "browser-stdout": "1.3.0",
-        "commander": "2.9.0",
-        "debug": "2.6.8",
-        "diff": "3.2.0",
-        "escape-string-regexp": "1.0.5",
-        "glob": "7.1.1",
-        "growl": "1.9.2",
-        "he": "1.1.1",
-        "json3": "3.3.2",
-        "lodash.create": "3.1.1",
-        "mkdirp": "0.5.1",
-        "supports-color": "3.1.2"
-      },
-      "dependencies": {
-        "commander": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-          "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
-          "dev": true,
-          "requires": {
-            "graceful-readlink": ">= 1.0.0"
-          }
-        },
-        "debug": {
-          "version": "2.6.8",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
-          "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "glob": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.2",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-          "dev": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "supports-color": {
-          "version": "3.1.2",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.1.2.tgz",
-          "integrity": "sha1-cqJiiU2dQIuVbKBf83su2KbiotU=",
-          "dev": true,
-          "requires": {
-            "has-flag": "^1.0.0"
-          }
-        }
-      }
-    },
     "moment": {
       "version": "2.22.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
@@ -13298,6 +13150,11 @@
       "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
       "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k="
     },
+    "openport": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/openport/-/openport-0.0.5.tgz",
+      "integrity": "sha1-YcasuoMprtdjfmKWTvtYYk6YJlw="
+    },
     "optimist": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
diff --git a/package.json b/package.json
index 14e4d7b1c..2ab396617 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,12 @@
 {
   "productName": "SikhiToTheMax",
   "name": "sttm-desktop",
-  "version": "4.0.6",
-  "description": "The SikhiToTheMax 4 desktop app",
+  "version": "4.1.0",
+  "description": "The SikhiToTheMax desktop app",
   "main": "app.js",
   "scripts": {
     "precommit": "npm test",
     "test": "htmlhint --config .htmlhintrc www && eslint app.js packaging/ www/js www/core/js && stylelint \"www/src/scss/*.scss\" --syntax scss --fix",
-    "test:app": "mocha",
     "start": "concurrently --kill-others \"npm run watch-css\" \"cross-env NODE_ENV=development electron .\"",
     "build": "npm run build-css",
     "pack:mac": "npm run build && build --mac",
@@ -44,7 +43,6 @@
     "eslint-plugin-import": "^2.2.0",
     "htmlhint": "^0.9.13",
     "husky": "^0.13.3",
-    "mocha": "^3.2.0",
     "node-sass": "^4.5.0",
     "nodemon": "^1.11.0",
     "npm-run-all": "^4.1.3",
@@ -65,12 +63,14 @@
     "hyperscript": "^2.0.2",
     "ip": "^1.1.5",
     "is-online": "^7.0.0",
+    "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.0",
     "lodash.get": "^4.4.2",
     "lodash.set": "^4.3.2",
     "marked": "^0.3.6",
     "moment": "^2.22.1",
     "noty": "^3.2.0-beta",
+    "openport": "0.0.5",
     "request": "^2.81.0",
     "request-progress": "^3.0.0",
     "scroll": "^2.0.1",
@@ -81,6 +81,7 @@
   },
   "build": {
     "appId": "org.khalisfoundation.sttm",
+    "copyright": "Copyright © 2018 Khalis Foundation , SikhiToTheMax Trademark SHARE Charity, UK\n",
     "files": [
       "**/*",
       "!assets${/*}",
diff --git a/test/test.js b/test/test.js
deleted file mode 100644
index 7471b81a5..000000000
--- a/test/test.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const Application = require('spectron').Application;
-const assert = require('assert');
-
-describe('application launch', function cb() {
-  this.timeout(10000);
-
-  beforeEach(function be() {
-    this.app = new Application({
-      path: `${__dirname}/../node_modules/.bin/electron`,
-      args: ['app.js'],
-    });
-    return this.app.start();
-  });
-
-  afterEach(function ae() {
-    if (this.app && this.app.isRunning()) {
-      return this.app.stop();
-    }
-    return false;
-  });
-
-  it('shows an initial window', function itcb() {
-    return this.app.client.getWindowCount().then((count) => {
-      assert.equal(count, 1);
-    });
-  });
-});
diff --git a/www/index.html b/www/index.html
index e3631150d..c8eb6f00c 100644
--- a/www/index.html
+++ b/www/index.html
@@ -55,26 +55,16 @@
   <div id="app-frame">
     <webview id="main-viewer" src="viewer.html" nodeintegration></webview>
     <div id="navigator" class="noselect">
-      <div id="options-ui">
-        <div class="options-page" id="custom-theme-page">
-          <header class="options-page-header">
-            <div class="options-header-text"> Theme Picker </div>
-            <div class="close-button-container" id="options-page-close"> </div>
-          </header>
-          <section class="block-list options-page-content">
-            <ul class="options-list" id="custom-theme-options">
-
-            </ul>
-          </section>
-        </div>
-      </div>
       <div id="main-ui">
         <div class="nav-page" id="search-page">
           <div class="navigator-header">
             <div class="preferences-open"> </div>
+            <div class="toggle-minimize">
+                <i class="fa fa-window-minimize"></i>
+                <i class="fa fa-window-maximize disabled"></i>
+            </div>
             <span class="nav-header-text">Search</span>
-            <div id="notifications"></div>
-            <div id="shabad-menu"></div>
+            <div id="search-type"></div>
           </div>
           <div class="search-div"></div>
           <section class="block-list">
@@ -82,20 +72,63 @@
           </section>
         </div>
         <div class="nav-page" id="session-page">
-          <div class="navigator-header">
+          <div class="navigator-header navigator-header-tabs">
             <div class="preferences-open"> </div>
-            <span class="nav-header-text">History</span>
+            <div class="toggle-minimize">
+                <i class="fa fa-window-minimize"></i>
+                <i class="fa fa-window-maximize disabled"></i>
+            </div>
+            <span class="nav-header-tab nav-header-text active" id="history-tab">
+              <i class="fa fa-clock-o"></i> History
+            </span>
+            <span class="nav-header-tab nav-header-text" id="themes-tab">
+              <i class="fa fa-paint-brush"></i> Themes
+            </span>
+            <span class="nav-header-tab nav-header-text" id="insert-tab">
+              <i class="fa fa-desktop"></i> Insert
+            </span>
+            <div class="more-tabs">
+              <span class="more-icon">
+                <i class="fa fa-sort-desc"></i>
+              </span>
+              <span class="nav-header-tab nav-header-text" id="display-tab">
+                <i class="fa fa-cogs"></i> Display
+              </span>
+              <span class="nav-header-tab nav-header-text" id="other-tab">
+                <i class="fa fa-ellipsis-h"></i> Others
+              </span>
+            </div>
           </div>
           <section class="block-list">
-            <ul id="session" class="gurmukhi"></ul>
+            <div class="tab-content active" id="history-tab-content">
+              <ul id="session" class="gurmukhi"></ul>
+            </div>
+            <div class="tab-content" id ="themes-tab-content">
+              <ul class="options-list" id="custom-theme-options">
+              </ul>
+            </div>
+            <div class="tab-content" id ="insert-tab-content">
+              <ul id="list-of-custom-slides"></ul>
+            </div>
+            <div class="tab-content" id ="display-tab-content">
+            </div>
+            <div class="tab-content" id ="other-tab-content">
+                <ul id="list-of-shabad-options"></ul>
+            </div>
           </section>
         </div>
         <div class="nav-page" id="shabad-page">
           <div class="navigator-header">
             <div class="preferences-open"> </div>
-            <div class="shabad-prev"> </div>
-            <span class="nav-header-text">Current Shabad</span>
-            <div class="shabad-next"> </div>
+            <div class="toggle-minimize">
+                <i class="fa fa-window-minimize"></i>
+                <i class="fa fa-window-maximize disabled"></i>
+            </div>
+            <div class="current-shabad-header">
+              <div class="shabad-prev"> </div>
+              <span class="nav-header-text">Current Shabad</span>
+              <div class="shabad-next"> </div>
+            </div>
             <div id="current-shabad-menu"></div>
           </div>
           <section class="block-list">
@@ -126,31 +159,13 @@
         <div class="takeover-page" id="menu-page">
           <div class="navigator-header">
             <div class="preferences-close"> </div>
+            <div class="toggle-minimize">
+                <i class="fa fa-window-minimize"></i>
+                <i class="fa fa-window-maximize disabled"></i>
+            </div>
             <span class="nav-header-text">Settings</span>
           </div>
         </div>
-        <div class="takeover-page" id="custom-slides-page">
-          <div class="navigator-header">
-            <span class="nav-header-text">Custom Slides</span>
-            <div class="custom-slides-close"> </div>
-          </div>
-          <section class="block-list">
-            <ul id="list-of-custom-slides">
-
-            </ul>
-          </section>
-        </div>
-        <div class="takeover-page" id="shabad-menu-page">
-          <div class="navigator-header">
-            <span class="nav-header-text">Shabad Options</span>
-            <div class="shabad-menu-close"> </div>
-          </div>
-          <section class="block-list">
-            <ul id="list-of-shabad-options">
-
-            </ul>
-          </section>
-        </div>
       </div>
       <div id="footer">
         <div class="menu-group">
@@ -171,4 +186,4 @@
   <script type="text/javascript" src="js/vendor/tingle.js"></script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/www/js/constants.js b/www/js/constants.js
index c3d195582..716f0d434 100644
--- a/www/js/constants.js
+++ b/www/js/constants.js
@@ -6,15 +6,42 @@ const SEARCH_TYPES = {
   ANG: 4,
 };
 
-const SEARCH_TYPE_TEXTS = {
-  [SEARCH_TYPES.FIRST_LETTERS]: 'First Letter Start (Gurmukhi)',
-  [SEARCH_TYPES.FIRST_LETTERS_ANYWHERE]: 'First Letter Anywhere (Gurmukhi)',
-  [SEARCH_TYPES.GURMUKHI_WORD]: 'Full Word (Gurmukhi)',
-  [SEARCH_TYPES.ENGLISH_WORD]: 'English Translations (Full Word)',
-  [SEARCH_TYPES.ANG]: 'Ang Search',
+const GURMUKHI_SEARCH_TEXTS = {
+  [SEARCH_TYPES.FIRST_LETTERS]: 'First Letter (Start)',
+  [SEARCH_TYPES.FIRST_LETTERS_ANYWHERE]: 'First Letter (Anywhere)',
+  [SEARCH_TYPES.GURMUKHI_WORD]: 'Full Word(s)',
+};
+
+const ENGLISH_SEARCH_TEXTS = {
+  [SEARCH_TYPES.ENGLISH_WORD]: 'Full Word(s)',
+};
+
+const SOURCE_TYPES = {
+  ALL_SOURCES: 'all',
+  GURU_GRANTH_SAHIB: 'G',
+  DASAM_GRANTH: 'D',
+  GURDAS_VAARAN: 'B',
+  NAND_LAL_VAARAN: 'N',
+  AMRIT_KEERTAN: 'A',
+  GURDAS_JI_VAARAN: 'S',
+  REHATNAMAS: 'R',
+};
+
+const SOURCE_TEXTS = {
+  [SOURCE_TYPES.ALL_SOURCES]: 'All sources',
+  [SOURCE_TYPES.GURU_GRANTH_SAHIB]: 'Guru Granth Sahib Ji',
+  [SOURCE_TYPES.DASAM_GRANTH]: 'Dasam Granth Sahib',
+  [SOURCE_TYPES.GURDAS_VAARAN]: 'Bhai Gurdas Ji Vaaran',
+  [SOURCE_TYPES.NAND_LAL_VAARAN]: 'Bhai Nand Lal Ji Vaaran',
+  [SOURCE_TYPES.AMRIT_KEERTAN]: 'Amrit Keertan',
+  [SOURCE_TYPES.GURDAS_JI_VAARAN]: 'Bhai Gurdas Singh Ji Vaaran',
+  [SOURCE_TYPES.REHATNAMAS]: 'Rehatnamas & Panthic sources',
 };
 
 module.exports = {
   SEARCH_TYPES,
-  SEARCH_TYPE_TEXTS,
+  GURMUKHI_SEARCH_TEXTS,
+  ENGLISH_SEARCH_TEXTS,
+  SOURCE_TEXTS,
+  SOURCE_TYPES,
 };
diff --git a/www/js/controller.js b/www/js/controller.js
index 50058a75b..ae2d97283 100644
--- a/www/js/controller.js
+++ b/www/js/controller.js
@@ -378,12 +378,20 @@ function updateViewerScale() {
   }
 }
 
-global.platform.ipc.on('external-display', (e, args) => {
+function checkPresenterView() {
   if (store.getUserPref('app.layout.presenter-view')) {
     document.body.classList.add('presenter-view');
     document.body.classList.remove('home');
+    document.body.classList.add('scale-viewer');
   }
-  document.body.classList.add('scale-viewer');
+}
+
+global.platform.ipc.on('presenter-view', () => {
+  checkPresenterView();
+  updateViewerScale();
+});
+
+global.platform.ipc.on('external-display', (e, args) => {
   global.externalDisplay = {
     width: args.width,
     height: args.height,
@@ -399,8 +407,7 @@ window.onresize = () => {
 };
 
 const menuUpdate = (process.platform === 'darwin' || process.platform === 'linux' ? menu.items[0].submenu : menu.items[3].submenu);
-const menuCast = (process.platform === 'darwin' || process.platform === 'linux' ? menu.items[3].submenu : menu.items[6].submenu);
-const apvSwitch = document.getElementById('setting-slide-layout-display-options-akhandpaatt');
+const menuCast = menu.items[3].submenu;
 
 global.platform.ipc.on('checking-for-update', () => {
   menuUpdate.items[2].visible = false;
@@ -427,26 +434,25 @@ global.platform.ipc.on('next-ang', (event, arg) => {
 global.platform.ipc.on('cast-session-active', () => {
   menuCast.items[0].visible = false;
   menuCast.items[1].visible = true;
-  if (store.getUserPref('app.layout.presenter-view')) {
-    document.body.classList.add('presenter-view', 'scale-viewer');
-    document.body.classList.remove('home');
-    updateViewerScale();
-  }
+
+  store.setUserPref('app.layout.presenter-view', true);
+  checkPresenterView();
+  updateViewerScale();
 
   store.set('userPrefs.slide-layout.display-options.akhandpaatt', false);
+  store.set('userPrefs.slide-layout.display-options.disable-akhandpaatt', true);
   document.body.classList.remove('akhandpaatt');
   global.core.platformMethod('updateSettings');
-  apvSwitch.checked = false;
-  apvSwitch.disabled = true;
 });
 global.platform.ipc.on('cast-session-stopped', () => {
   menuCast.items[1].visible = false;
   menuCast.items[0].visible = true;
-  if (!global.externalDisplay) {
+  if (store.getUserPref('app.layout.presenter-view')) {
     document.body.classList.remove('presenter-view', 'scale-viewer');
+    store.setUserPref('app.layout.presenter-view', false);
+    global.core.platformMethod('updateSettings');
   }
-
-  apvSwitch.disabled = false;
+  store.set('userPrefs.slide-layout.display-options.disable-akhandpaatt', false);
 });
 
 
@@ -467,7 +473,9 @@ module.exports = {
 
   sendText(text, isGurmukhi) {
     global.webview.send('show-text', { text, isGurmukhi });
+    global.webview.send('show-empty-slide');
     global.platform.ipc.send('show-text', { text, isGurmukhi });
+    global.platform.ipc.send('show-empty-slide');
   },
 
   sendScroll(pos) {
@@ -475,6 +483,7 @@ module.exports = {
   },
 
   'presenter-view': function presenterView() {
+    checkPresenterView();
     updateViewerScale();
   },
 
diff --git a/www/js/defaults.json b/www/js/defaults.json
index b629b1f3d..0f78e6007 100644
--- a/www/js/defaults.json
+++ b/www/js/defaults.json
@@ -30,6 +30,8 @@
         "autoplayTimer": 10
       },
       "display-options": {
+        "disable-akhandpaatt": false,
+        "akhandpaatt": false,
         "larivaar": false,
         "left-align": false
       }
@@ -38,14 +40,22 @@
   "gurmukhiKB": false,
   "changelog-seen": "0.0.0",
   "searchOptions": {
-    "searchType": 0
+    "searchLanguage":"gr",
+    "searchType": 0,
+    "searchSource": "all"
   },
   "obs": {
     "overlayPrefs": {
       "overlayVars": {
         "layout": "split",
         "bgColor": "#2c3e50",
-        "textColor": "#EAC445"
+        "bgOpacity": 1,
+        "textColor": "#EAC445",
+        "height": 30,
+        "fontSize": 12,
+        "gurbaniFontSize": 15,
+        "gurbaniTextColor": "#EAC445",
+        "showLogo": true
       },
       "gurbani": {
         "bottom": 156,
diff --git a/www/js/desktop_scripts.js b/www/js/desktop_scripts.js
index 59057fcb0..769dd9197 100644
--- a/www/js/desktop_scripts.js
+++ b/www/js/desktop_scripts.js
@@ -134,8 +134,8 @@ module.exports = {
   },
 
   updateSettings() {
-    global.webview.send('update-settings');
-    global.platform.ipc.send('update-settings');
+    if (global.webview) global.webview.send('update-settings');
+    if (global.platform) global.platform.ipc.send('update-settings');
   },
 
   updateNotificationsTimestamp(time) {
@@ -147,3 +147,55 @@ const $titleButtons = document.querySelectorAll('#titlebar .controls a');
 Array.from($titleButtons).forEach((el) => {
   el.addEventListener('click', e => windowAction(e));
 });
+
+const allTabs = document.getElementsByClassName('nav-header-tab');
+const moreTabs = document.querySelector('.more-tabs');
+const sessionPage = document.querySelector('#session-page .block-list');
+
+function showTabContent(clickedTab) {
+  document.querySelector('.nav-header-tab.active').classList.remove('active');
+  const tabContent = document.getElementById(`${clickedTab}-content`);
+  document.querySelector('.tab-content.active').classList.remove('active');
+  tabContent.classList.add('active');
+}
+
+Array.prototype.forEach.call(allTabs, (element => {
+  element.addEventListener('click', event => {
+    const clickedTab = event.currentTarget;
+    const clickedTabId = event.currentTarget.id;
+    const tabParent = event.currentTarget.parentElement;
+    if (tabParent.classList.contains('more-tabs')) {
+      moreTabs.insertBefore(clickedTab, moreTabs.firstChild);
+    } else {
+      moreTabs.classList.remove('listview');
+    }
+    showTabContent(clickedTabId);
+    document.getElementById(clickedTabId).classList.add('active');
+  });
+}));
+
+if (moreTabs) {
+  moreTabs.addEventListener('click', () => {
+    moreTabs.classList.toggle('listview');
+  });
+}
+
+if (sessionPage) {
+  sessionPage.addEventListener('click', () => {
+    moreTabs.classList.remove('listview');
+  });
+}
+
+const $minimize = document.querySelectorAll('.navigator-header .toggle-minimize');
+const $minimizeIcons = document.querySelectorAll('.navigator-header .toggle-minimize i');
+
+if ($minimize) {
+  Array.prototype.forEach.call($minimize, (minimize => {
+    minimize.addEventListener('click', () => {
+      Array.prototype.forEach.call($minimizeIcons, (element => {
+        element.classList.toggle('disabled');
+      }));
+      document.getElementById('navigator').classList.toggle('minimized');
+    });
+  }));
+}
diff --git a/www/js/index.js b/www/js/index.js
index 0b68e4429..b51310797 100644
--- a/www/js/index.js
+++ b/www/js/index.js
@@ -3,6 +3,7 @@ const search = require('./search');
 const menu = require('./menu');
 const themeEditor = require('./theme_editor');
 const shareSync = require('./share-sync');
+const settings = require('../js/settings');
 
 /* const Settings = require('../../js/settings');
 const settings = new Settings(platform.store); */
@@ -93,6 +94,10 @@ function platformMethod(method, args) {
   }
 }
 
+global.platform.ipc.on('sync-settings', () => {
+  settings.init();
+});
+
 module.exports = {
   menu,
   search,
diff --git a/www/js/menu.js b/www/js/menu.js
index 2ec1cb1fc..0611475d6 100644
--- a/www/js/menu.js
+++ b/www/js/menu.js
@@ -5,6 +5,7 @@ const tingle = require('./vendor/tingle');
 const request = require('request');
 const moment = require('moment');
 const electron = require('electron');
+const debounce = require('lodash.debounce');
 
 const modal = new tingle.Modal({
   footer: true,
@@ -43,7 +44,6 @@ const buttonFactory = ({
 
 const goToShabadPage = (shabadId) => {
   global.core.search.loadShabad(shabadId);
-  module.exports.toggleMenu('#shabad-menu-page');
   document.querySelector('#shabad-pageLink').click();
 };
 
@@ -96,7 +96,6 @@ const showNotificationsModal = (message) => {
     modal.setContent(content);
     // open modal
     modal.open();
-    document.getElementById('notifications-icon').classList.remove('badge');
   }
 };
 
@@ -123,30 +122,10 @@ const notificationsBellClickHandler = () => {
 const menuButton = h(
   'a.menu-button.navigator-button.active',
   h('i.fa.fa-bars'));
-const customSlidesButton = buttonFactory({
-  buttonType: 'open',
-  buttonIcon: 'fa-clone',
-  buttonId: 'custom-slides-menu',
-  pageToToggle: '#custom-slides-page',
-});
-const shabadMenuButton = buttonFactory({
-  buttonType: 'open',
-  buttonIcon: 'fa-archive',
-  buttonId: 'shabad-menu',
-  pageToToggle: '#shabad-menu-page',
-});
 const closeButton = buttonFactory({
   buttonType: 'close',
   pageToToggle: '#menu-page',
 });
-const shabadMenuCloseButton = buttonFactory({
-  buttonType: 'close',
-  pageToToggle: '#shabad-menu-page',
-});
-const customSlidesCloseButton = buttonFactory({
-  buttonType: 'close',
-  pageToToggle: '#custom-slides-page',
-});
 
 /* load Shabad buttons */
 const randomShabadButton = h(
@@ -165,20 +144,29 @@ const anandKarajButton = h(
   h(
     'a.anand-karaj-button',
     {
-      onclick: () => { goToShabadPage(2897); },
+      onclick: debounce(() => { goToShabadPage(2897); }, 500, { leading: true }),
     },
     h('i.fa.fa-heart.list-icon'),
     'Anand Karaj / Sikh Marriage'));
+const notificationButton = h(
+  'li',
+  h(
+    'a.notification-button',
+    {
+      onclick: notificationsBellClickHandler,
+    },
+    h('i.fa.fa-bell.list-icon'),
+    "What's New"));
 const hukamnamaButton = h(
   'li',
   h(
     'a.hukamnama-button',
     {
-      onclick: () => {
+      onclick: debounce(() => {
         getJSON('https://api.banidb.com/hukamnama/today', (error, response) => {
           goToShabadPage(response.shabadinfo.id);
         });
-      } },
+      }, 500, { leading: true }) },
     h('i.fa.fa-gavel.list-icon'),
     'Daily Hukamnama'));
 
@@ -272,13 +260,6 @@ const announcementSlideButton = h(
         global.controller.sendText(announcementText, isGurmukhi);
       } },
     'Add Announcement'));
-const notificationButton = h(
-  'button.notificaitons.navigator-button.navigator-header',
-  {
-    onclick: notificationsBellClickHandler,
-  },
-  h('i#notifications-icon.fa.fa-bell'),
-);
 
 // On href clicks, open the link in actual browser
 document.body.addEventListener('click', (e) => {
@@ -301,14 +282,6 @@ module.exports = {
     });
     document.querySelector('.preferences-close').appendChild(closeButton);
 
-    document.getElementById('current-shabad-menu').appendChild(customSlidesButton);
-    document.querySelector('.custom-slides-close').appendChild(customSlidesCloseButton);
-
-
-    document.getElementById('shabad-menu').appendChild(shabadMenuButton);
-    document.getElementById('notifications').appendChild(notificationButton);
-    document.querySelector('.shabad-menu-close').appendChild(shabadMenuCloseButton);
-
     const $listOfCustomSlides = document.querySelector('#list-of-custom-slides');
     $listOfCustomSlides.appendChild(emptySlideButton);
     $listOfCustomSlides.appendChild(waheguruSlideButton);
@@ -319,6 +292,7 @@ module.exports = {
     $listOfShabadOptions.appendChild(randomShabadButton);
     $listOfShabadOptions.appendChild(hukamnamaButton);
     $listOfShabadOptions.appendChild(anandKarajButton);
+    $listOfShabadOptions.appendChild(notificationButton);
     settings.init();
   },
 
diff --git a/www/js/overlay.js b/www/js/overlay.js
index a67c408a5..a7f8a433a 100644
--- a/www/js/overlay.js
+++ b/www/js/overlay.js
@@ -3,7 +3,12 @@ const ip = require('ip');
 const copy = require('copy-to-clipboard');
 
 const host = ip.address();
-const url = `http://${host}:1397/`;
+
+const remote = require('electron').remote;
+
+const overlayPort = remote.getGlobal('overlayPort');
+const url = `http://${host}:${overlayPort}/`;
+
 const { store } = require('electron').remote.require('./app');
 
 const overlayVars = store.get('obs').overlayPrefs.overlayVars;
@@ -44,22 +49,42 @@ const colorInputFactory = (inputName, label, defaultColor, onchangeAction) => h(
     label,
   ),
 );
-function updateContentBarColor(color, prop) {
+
+function hexToRgb(hex) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+
+  return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : null;
+}
+
+function updateContentBar(value, prop) {
   document.querySelectorAll('.content-bar').forEach((el) => {
-    el.style[prop] = color; // eslint-disable-line no-param-reassign
+    el.style[prop] = value; // eslint-disable-line no-param-reassign
   });
 }
 
+function updateGurbaniBar(value, prop) {
+  document.querySelector('.o-gurbani').style[prop] = value;
+}
+
 const changeColor = (e) => {
   const color = e.target.value;
-  updateContentBarColor(color, 'color');
+  updateContentBar(color, 'color');
+  updateGurbaniBar(overlayVars.gurbaniTextColor, 'color');
   overlayVars.textColor = color;
   savePrefs();
 };
 
+const changeGurbaniColor = (e) => {
+  const color = e.target.value;
+  updateGurbaniBar(color, 'color');
+  overlayVars.gurbaniTextColor = color;
+  savePrefs();
+};
+
 const changeBg = (e) => {
   const color = e.target.value;
-  updateContentBarColor(color, 'backgroundColor');
+
+  updateContentBar(`rgba(${hexToRgb(color)}, ${overlayVars.bgOpacity})`, 'backgroundColor');
   overlayVars.bgColor = color;
   savePrefs();
 };
@@ -70,14 +95,14 @@ const topLayoutApply = () => {
   document.querySelector('.o-gurbani').style.bottom = 'auto';
   document.querySelector('.o-teeka').style.display = 'none';
   document.querySelector('.o-transliteration').style.display = 'none';
-  document.querySelector('.o-translation').style.top = '42px';
+  document.querySelector('.o-translation').style.top = `${overlayVars.height}px`;
   document.querySelector('.o-translation').style.bottom = 'auto';
 };
 
 const bottomLayoutApply = () => {
   overlayVars.layout = 'bottom';
   document.querySelector('.o-gurbani').style.top = 'auto';
-  document.querySelector('.o-gurbani').style.bottom = '36px';
+  document.querySelector('.o-gurbani').style.bottom = `${overlayVars.height}px`;
   document.querySelector('.o-translation').style.top = 'auto';
   document.querySelector('.o-translation').style.bottom = '0';
   document.querySelector('.o-teeka').style.display = 'none';
@@ -89,15 +114,109 @@ const splitLayoutApply = () => {
   document.querySelector('.o-gurbani').style.top = '0';
   document.querySelector('.o-gurbani').style.bottom = 'auto';
   document.querySelector('.o-teeka').style.display = 'block';
-  document.querySelector('.o-teeka').style.top = '42px';
+  document.querySelector('.o-teeka').style.top = `${overlayVars.height}px`;
   document.querySelector('.o-teeka').style.bottom = 'auto';
   document.querySelector('.o-transliteration').style.display = 'block';
   document.querySelector('.o-transliteration').style.top = 'auto';
-  document.querySelector('.o-transliteration').style.bottom = '36px';
+  document.querySelector('.o-transliteration').style.bottom = `${overlayVars.height}px`;
   document.querySelector('.o-translation').style.top = 'auto';
   document.querySelector('.o-translation').style.bottom = '0';
 };
 
+function applyLayout() {
+  switch (overlayVars.layout) {
+    case 'top':
+      topLayoutApply();
+      break;
+    case 'bottom':
+      bottomLayoutApply();
+      break;
+    case 'split':
+      splitLayoutApply();
+      break;
+    default :
+      break;
+  }
+}
+
+const updateSize = (newSize, prop) => {
+  updateContentBar(newSize, prop);
+  applyLayout();
+};
+const updateGurbaniSize = (newSize, prop) => {
+  document.querySelector('.o-gurbani').style[prop] = newSize;
+};
+
+const increaseBarSize = () => {
+  const size = overlayVars.height;
+  const newSize = size < 100 ? size + 2 : 100;
+
+  overlayVars.height = newSize;
+  savePrefs();
+  updateSize(`${newSize}px`, 'height');
+};
+const decreaseBarSize = () => {
+  const size = overlayVars.height;
+  const newSize = size > 33 ? size - 2 : 33;
+
+  overlayVars.height = newSize;
+  savePrefs();
+  updateSize(`${newSize}px`, 'height');
+};
+
+const increasefontSize = () => {
+  const size = overlayVars.fontSize;
+  const gurbaniSize = overlayVars.gurbaniFontSize;
+  const newSize = size < 25 ? size + 1 : 25;
+  updateSize(`${newSize}px`, 'fontSize');
+  updateGurbaniSize(`${gurbaniSize}px`, 'fontSize');
+  overlayVars.fontSize = newSize;
+  savePrefs();
+};
+const decreasefontSize = () => {
+  const size = overlayVars.fontSize;
+  const gurbaniSize = overlayVars.gurbaniFontSize;
+  const newSize = size > 5 ? size - 1 : 5;
+
+  updateSize(`${newSize}px`, 'fontSize');
+  updateGurbaniSize(`${gurbaniSize}px`, 'fontSize');
+  overlayVars.fontSize = newSize;
+  savePrefs();
+};
+
+const increaseGurbanifontSize = () => {
+  const size = overlayVars.gurbaniFontSize;
+  const newSize = size < 30 ? size + 1 : 30;
+  updateGurbaniSize(`${newSize}px`, 'fontSize');
+  overlayVars.gurbaniFontSize = newSize;
+  savePrefs();
+};
+const decreaseGurbanifontSize = () => {
+  const size = overlayVars.gurbaniFontSize;
+  const newSize = size > 5 ? size - 1 : 5;
+
+  updateGurbaniSize(`${newSize}px`, 'fontSize');
+  overlayVars.gurbaniFontSize = newSize;
+  savePrefs();
+};
+
+const increaseOpacity = () => {
+  const opacity = overlayVars.bgOpacity;
+  const newSize = opacity > 0.9 ? 1 : opacity + 0.1;
+
+  updateContentBar(`rgba(${hexToRgb(overlayVars.bgColor)}, ${newSize})`, 'backgroundColor');
+  overlayVars.bgOpacity = newSize;
+  savePrefs();
+};
+const decreaseOpacity = () => {
+  const opacity = overlayVars.bgOpacity;
+  const newSize = opacity < 0.1 ? 0 : opacity - 0.1;
+
+  updateContentBar(`rgba(${hexToRgb(overlayVars.bgColor)}, ${newSize})`, 'backgroundColor');
+  overlayVars.bgOpacity = newSize;
+  savePrefs();
+};
+
 const separator = h('div.separator');
 
 const layoutButtonFactory = (layoutName, layoutFunc) => h(
@@ -120,6 +239,29 @@ const layoutButtonFactory = (layoutName, layoutFunc) => h(
   ),
 );
 
+const resizeButtonFactory = (increaseFunc, decreaseFunc) => h(
+  'div.input-wrap.resize-btn',
+  h(
+    'span.export-btn',
+    {
+      onclick: () => {
+        decreaseFunc();
+      },
+    },
+    h('i.fa.fa-minus-circle.cp-icon'),
+  ),
+  h(
+    'span.export-btn',
+    {
+      onclick: () => {
+        increaseFunc();
+      },
+    },
+    h('i.fa.fa-plus-circle.cp-icon'),
+  ),
+);
+
+
 const copyURLButton = h(
   'div.input-wrap',
   {
@@ -141,13 +283,34 @@ const copyURLButton = h(
 const topLayoutBtn = layoutButtonFactory('top', topLayoutApply);
 const bottomLayoutBtn = layoutButtonFactory('bottom', bottomLayoutApply);
 const topBottomLayoutBtn = layoutButtonFactory('top-bottom', splitLayoutApply);
+const gurbaniColor = colorInputFactory('toggle-text', 'Gurbani', overlayVars.gurbaniTextColor, changeGurbaniColor);
 const textColor = colorInputFactory('toggle-text', 'Text', overlayVars.textColor, changeColor);
 const backgroundColor = colorInputFactory('background', 'BG', overlayVars.bgColor, changeBg);
+const changeBarSizeButton = resizeButtonFactory(increaseBarSize, decreaseBarSize);
+const changefontSizeButton = resizeButtonFactory(increasefontSize, decreasefontSize);
+const changeGurbanifontSizeButton = resizeButtonFactory(
+  increaseGurbanifontSize, decreaseGurbanifontSize,
+);
+const changeOpacityButton = resizeButtonFactory(increaseOpacity, decreaseOpacity);
 
 const controlPanel = document.querySelector('.control-panel');
+controlPanel.append(gurbaniColor);
+controlPanel.append(changeGurbanifontSizeButton);
 controlPanel.append(textColor);
-controlPanel.append(backgroundColor);
+controlPanel.append(changefontSizeButton);
 controlPanel.append(separator);
+controlPanel.append(backgroundColor);
+controlPanel.append(changeBarSizeButton);
+controlPanel.append(h(
+  'div.setting-label',
+  'Size',
+));
+controlPanel.append(changeOpacityButton);
+controlPanel.append(h(
+  'div.setting-label',
+  'Opacity',
+));
+controlPanel.append(separator.cloneNode(true));
 controlPanel.append(bottomLayoutBtn);
 controlPanel.append(topLayoutBtn);
 controlPanel.append(topBottomLayoutBtn);
@@ -155,18 +318,11 @@ controlPanel.append(separator.cloneNode(true));
 controlPanel.append(copyURLButton);
 
 // apply the saved preferences when a new overlay window is opened.
-switch (overlayVars.layout) {
-  case 'top':
-    topLayoutApply();
-    break;
-  case 'bottom':
-    bottomLayoutApply();
-    break;
-  case 'split':
-    splitLayoutApply();
-    break;
-  default :
-    break;
-}
-updateContentBarColor(overlayVars.bgColor, 'backgroundColor');
-updateContentBarColor(overlayVars.textColor, 'color');
+applyLayout();
+updateContentBar(`rgba(${hexToRgb(overlayVars.bgColor)}, ${overlayVars.bgOpacity})`, 'backgroundColor');
+updateContentBar(overlayVars.textColor, 'color');
+updateGurbaniBar(overlayVars.gurbaniTextColor, 'color');
+updateSize(`${overlayVars.height}px`, 'height');
+updateSize(`${overlayVars.fontSize}px`, 'fontSize');
+updateGurbaniBar(`${overlayVars.gurbaniFontSize}px`, 'fontSize');
+
diff --git a/www/js/search-database.js b/www/js/search-database.js
index 0360d6364..bf033bfcb 100644
--- a/www/js/search-database.js
+++ b/www/js/search-database.js
@@ -6,10 +6,12 @@ LEFT JOIN Raag r USING(RaagID)`;
 const CONSTS = require('./constants.js');
 
 module.exports = {
-  search(searchQuery, searchType) {
+  search(searchQuery, searchType, searchSource) {
     let dbQuery = '';
     let searchCol = '';
     let condition = '';
+    // default source for ang search to GURU_GRANTH_SAHIB
+    let angSearchSourceId = CONSTS.SOURCE_TYPES.GURU_GRANTH_SAHIB;
     const order = [];
     const limit = ' 0,20';
     switch (searchType) {
@@ -42,6 +44,10 @@ module.exports = {
             condition += ` OR (${searchCol} > '${replaced}' AND ${searchCol} < '${replaced},z')`;
           }
         }
+        if (searchSource !== 'all') {
+          condition += `  AND v.SourceID = '${searchSource}'`;
+        }
+
 
         // Give preference to shorter lines if searching for 1 or 2 words
         if (searchQuery.length < 3) {
@@ -59,12 +65,24 @@ module.exports = {
         const words = searchQuery.split(' ');
         dbQuery = `%${words.join(' %')}%`;
         condition = `${searchCol} LIKE '${dbQuery}'`;
+        if (searchSource !== 'all') {
+          condition += ` AND v.SourceID = '${searchSource}'`;
+        }
         break;
       }
       case CONSTS.SEARCH_TYPES.ANG: // Ang
         searchCol = 'PageNo';
         dbQuery = parseInt(searchQuery, 10);
-        condition = `${searchCol} = ${dbQuery} AND v.SourceID = '${global.core.search.currentMeta.source || 'G'}'`;
+        condition = `${searchCol} = ${dbQuery}`;
+
+        switch (global.core.search.currentMeta.source) {
+          case null:
+            break;
+          default:
+            angSearchSourceId = global.core.search.currentMeta.source;
+            break;
+        }
+        condition = `${searchCol} = ${dbQuery} AND v.SourceID = '${angSearchSourceId}'`;
         break;
       default:
         break;
diff --git a/www/js/search.js b/www/js/search.js
index bc016cd98..cb108afdb 100644
--- a/www/js/search.js
+++ b/www/js/search.js
@@ -3,6 +3,8 @@
 // Gurmukhi keyboard layout file
 const keyboardLayout = require('./keyboard.json');
 const pageNavJSON = require('./footer-left.json');
+const debounce = require('lodash.debounce');
+
 // HTMLElement builder
 const h = require('hyperscript');
 
@@ -31,15 +33,15 @@ const searchInputs = h('div#search-container', [
     onfocus: e => module.exports.focusSearch(e),
     onkeyup: e => module.exports.typeSearch(e),
   }),
-  h('div#search-bg'),
-  h(
-    'button#search-options-toggle',
-    {
-      type: 'button',
-      onclick: e => module.exports.toggleSearchOptions(e),
-    },
-    h('i.fa.fa-cog'),
-  ),
+  h('span', 'Ang'),
+  h('input#ang-input.gurmukhi', {
+    type: 'number',
+    placeholder: '123',
+    min: 1,
+    max: 1430,
+    onfocus: e => module.exports.focusSearch(e),
+    oninput: e => module.exports.searchByAng(e),
+  }),
   h(
     'button#gurmukhi-keyboard-toggle',
     {
@@ -48,6 +50,7 @@ const searchInputs = h('div#search-container', [
     },
     h('i.fa.fa-keyboard-o'),
   ),
+  h('div#search-bg'),
   h('div#db-download-progress'),
 ]);
 
@@ -105,10 +108,71 @@ Object.keys(keyboardLayout).forEach(i => {
 });
 const keyboard = h('div#gurmukhi-keyboard.gurmukhi', kbPages);
 
-const searchTypes = Object.values(CONSTS.SEARCH_TYPE_TEXTS);
+const gurmukhiSearchText = CONSTS.GURMUKHI_SEARCH_TEXTS;
+const gurmukhiSearchTypes = Object.keys(gurmukhiSearchText);
+const englishSearchText = CONSTS.ENGLISH_SEARCH_TEXTS;
+const englishSearchTypes = Object.keys(englishSearchText);
+
+const sourceTexts = CONSTS.SOURCE_TEXTS;
+const sourceKeys = Object.keys(sourceTexts);
+
+const gurmukhiSearchOptions = gurmukhiSearchTypes.map((value) =>
+  h('option', { value }, gurmukhiSearchText[value]),
+);
+
+const englishSearchOptions = englishSearchTypes.map((value) =>
+  h('option', { value }, englishSearchText[value]),
+);
+
+const gurmukhiInputs = h(
+  'select',
+  {
+    onchange() {
+      module.exports.changeSearchType(parseInt(this.value, 10));
+    },
+  },
+  gurmukhiSearchOptions,
+);
+
+const englishInputs = h(
+  'select',
+  {
+    onchange() {
+      module.exports.changeSearchType(parseInt(this.value, 10));
+    },
+  },
+  englishSearchOptions,
+);
+
+const searchLanguage = h(
+  'div#language-selector',
+  h('input', {
+    type: 'radio',
+    value: 'gr',
+    id: 'gurmukhi-language',
+    name: 'search-language',
+    onclick() {
+      module.exports.changeSearchLanguage(this.value);
+    },
+  }),
+  h('label', {
+    htmlFor: 'gurmukhi-language',
+    className: 'gurmukhi',
+  }, 'aAe'),
+  h('input', {
+    type: 'radio',
+    value: 'en',
+    id: 'english-language',
+    name: 'search-language',
+    onclick() {
+      module.exports.changeSearchLanguage(this.value);
+    },
+  }),
+  h('label', { htmlFor: 'english-language' }, 'ABC'),
+);
 
-const searchTypeOptions = searchTypes.map((string, value) =>
-  h('option', { value }, string),
+const sourceOptions = sourceKeys.map((key) =>
+  h('option', { value: key }, sourceTexts[key]),
 );
 
 const shabadNavFwd = h(
@@ -129,15 +193,20 @@ const shabadNavBack = h(
 
 const searchOptions = h(
   'div#search-options',
+  h('span.filter-text'),
   h(
-    'select#search-type',
+    'select#search-source',
     {
       onchange() {
-        module.exports.changeSearchType(parseInt(this.value, 10));
+        module.exports.changeSearchSource(this.value);
+        document.getElementById('source-selection').innerText = CONSTS.SOURCE_TEXTS[this.value];
       },
     },
-    searchTypeOptions,
+    sourceOptions,
   ),
+  h(
+    'label.filter-text#source-selection', { htmlFor: 'search-source' },
+    CONSTS.SOURCE_TEXTS[store.get('searchOptions.searchSource')]),
 );
 
 const navPageLinks = [];
@@ -155,6 +224,7 @@ Object.keys(pageNavJSON).forEach(id => {
     ),
   );
 });
+
 const footerNav = h('ul.menu-bar', navPageLinks);
 
 const sources = {
@@ -171,7 +241,8 @@ document.body.addEventListener('click', e => {
   const target = e.target;
   if (
     document.querySelector('.search-div') &&
-    !document.querySelector('.search-div').contains(target)
+    !document.querySelector('.search-div').contains(target) &&
+    !document.querySelector('#search-page .navigator-header').contains(target)
   ) {
     module.exports.closeGurmukhiKB();
   }
@@ -187,19 +258,22 @@ module.exports = {
   currentMeta,
 
   init() {
-    this.searchType = parseInt(store.get('searchOptions.searchType'), 10);
-    searchOptions.querySelector('#search-type').value = this.searchType;
+    this.searchSource = store.get('searchOptions.searchSource');
+    searchOptions.querySelector('#search-source').value = this.searchSource;
 
     document.querySelector('.search-div').appendChild(searchInputs);
     document.querySelector('.search-div').appendChild(keyboard);
     document.querySelector('.search-div').appendChild(searchOptions);
+    document.querySelector('#search-page .navigator-header').appendChild(searchLanguage);
     document.querySelector('.shabad-next').appendChild(shabadNavFwd);
     document.querySelector('.shabad-prev').appendChild(shabadNavBack);
     document.querySelector('#footer .menu-group-left').appendChild(footerNav);
     this.$navigator = document.getElementById('navigator');
     this.$searchPage = document.getElementById('search-page');
     this.$search = document.getElementById('search');
+    this.$angSearch = document.getElementById('ang-input');
     this.$searchType = document.getElementById('search-type');
+    this.$searchSource = document.getElementById('search-source');
     this.$dbDownloadProgress = document.getElementById('db-download-progress');
     this.$results = document.getElementById('results');
     this.$session = document.getElementById('session');
@@ -216,6 +290,17 @@ module.exports = {
     );
 
     this.navPage('search');
+    this.searchType = parseInt(store.get('searchOptions.searchType'), 10);
+
+    if (this.searchType <= 2) {
+      gurmukhiInputs.value = this.searchType;
+    } else {
+      englishInputs.value = this.searchType;
+    }
+
+    this.searchLanguage = store.get('searchOptions.searchLanguage');
+    searchLanguage.querySelector(`input[value=${this.searchLanguage}]`).checked = true;
+    this.changeSearchLanguage(this.searchLanguage);
   },
 
   offline(seconds) {
@@ -233,6 +318,7 @@ module.exports = {
     this.$search.disabled = false;
     this.$search.focus();
     this.changeSearchType(this.searchType);
+    this.changeSearchSource(this.searchSource);
   },
 
   updateDLProgress(state) {
@@ -257,15 +343,14 @@ module.exports = {
     ) {
       // don't search if there is less than a 100ms gap in between key presses
       clearTimeout(newSearchTimeout);
-      newSearchTimeout = setTimeout(() => this.search(), 100);
+      newSearchTimeout = setTimeout(() => {
+        this.searchType = store.get('searchOptions.searchType');
+        this.search(e);
+      }, 100);
+      this.$angSearch.value = '';
     }
   },
 
-  // eslint-disable-next-line
-  toggleSearchOptions(e) {
-    this.$searchPage.classList.toggle('search-options-open');
-  },
-
   changeSearchType(value) {
     this.searchType = value;
     this.search();
@@ -288,12 +373,42 @@ module.exports = {
       default:
         break;
     }
-    this.$search.placeholder = this.$searchType.options[
-      this.$searchType.selectedIndex
-    ].label;
+    const currentSearchType = gurmukhiSearchText[value] || englishSearchText[value];
+    if (currentSearchType === 'FLS') {
+      this.$search.placeholder = 'First Letter (Start)';
+    } else if (currentSearchType === 'FLA') {
+      this.$search.placeholder = 'First Letter (Anywhere)';
+    } else {
+      this.$search.placeholder = currentSearchType;
+    }
     this.$search.focus();
   },
 
+  searchByAng() {
+    this.searchType = 4;
+    this.search();
+    this.$search.value = '';
+  },
+
+  changeSearchSource(value) {
+    this.searchSource = value;
+    currentMeta.source = value === 'all' ? null : value;
+    store.set('searchOptions.searchSource', this.searchSource);
+    this.search();
+  },
+
+  changeSearchLanguage(value) {
+    document.getElementById('search-type').innerHTML = '';
+    if (value === 'gr') {
+      document.getElementById('search-type').appendChild(gurmukhiInputs);
+      this.changeSearchType(parseInt(gurmukhiInputs.value, 10));
+    } else if (value === 'en') {
+      document.getElementById('search-type').appendChild(englishInputs);
+      this.changeSearchType(parseInt(englishInputs.value, 10));
+    }
+    store.set('searchOptions.searchLanguage', value);
+  },
+
   // eslint-disable-next-line no-unused-vars
   toggleGurmukhiKB(e) {
     const gurmukhiKBPref = store.get('gurmukhiKB');
@@ -349,11 +464,16 @@ module.exports = {
     }
   },
 
-  // eslint-disable-next-line no-unused-vars
-  search(e) {
-    const searchQuery = this.$search.value;
+  search() {
+    const searchType = this.searchType;
+    let searchQuery;
+    if (searchType === 4) {
+      searchQuery = this.$angSearch.value;
+    } else {
+      searchQuery = this.$search.value;
+    }
     if (searchQuery.length >= 1) {
-      global.platform.search.search(searchQuery, this.searchType);
+      global.platform.search.search(searchQuery, searchType, this.searchSource);
     } else {
       this.$results.innerHTML = '';
     }
@@ -363,6 +483,7 @@ module.exports = {
 
   printResults(rows) {
     if (rows.length > 0) {
+      document.getElementById('search-options').style.display = 'block';
       this.$results.innerHTML = '';
       rows.forEach(item => {
         const resultNode = [];
@@ -383,17 +504,21 @@ module.exports = {
           h(
             'a.panktee.search-result',
             {
-              onclick: ev => this.clickResult(ev, item.ShabadID, item.ID,
-                                                  item),
+              onclick: debounce(ev => this.clickResult(ev, item.ShabadID, item.ID,
+                                                  item), 500, { leading: true }),
             },
             resultNode,
           ),
         );
         this.$results.appendChild(result);
       });
+      document.getElementById('search-options').style.display = 'block';
     } else {
       this.$results.innerHTML = '';
       this.$results.appendChild(h('li.roman', h('span', 'No results')));
+      if (this.searchSource === CONSTS.SOURCE_TYPES.ALL_SOURCES) {
+        document.getElementById('search-options').style.display = 'none';
+      }
     }
   },
 
@@ -554,7 +679,7 @@ module.exports = {
 
   checkAutoPlay(LineID = null) {
     clearTimeout(autoplaytimer);
-    if (!LineID) {
+    if (LineID === null && document.body.querySelector('#shabad li')) {
       document.body.querySelector('#shabad .panktee.current').click();
     }
     const bodyClassList = document.body.classList;
@@ -563,7 +688,8 @@ module.exports = {
       .replace('autoplayTimer-', '');
     if (
       bodyClassList.contains('autoplay') &&
-      LineID !== currentShabad[currentShabad.length - 1]
+      LineID !== currentShabad[currentShabad.length - 1] &&
+      LineID !== null
     ) {
       autoplaytimer = setTimeout(() => {
         document.getElementById(`line${LineID + 1}`).click();
diff --git a/www/js/settings.js b/www/js/settings.js
index 531d8c167..2dc817b65 100644
--- a/www/js/settings.js
+++ b/www/js/settings.js
@@ -29,7 +29,54 @@ function updateRangeSetting(key, val) {
   global.core.platformMethod('updateSettings');
 }
 
+function addDisplayTab() {
+  document.getElementById('display-tab-content').innerHTML = '';
+  const catKey = 'slide-layout';
+  const settingKey = 'display-options';
+  const userPrefs = store.getAllPrefs();
+  const setting = settings[catKey].settings[settingKey];
+  const switchList = h('ul');
+  Object.keys(setting.options).forEach((option) => {
+    const optionId = `setting-${catKey}-${settingKey}-${option}`;
+    const switchListAttrs = {
+      name: `setting-${catKey}-${settingKey}`,
+      onclick: (e) => {
+        const newVal = e.target.checked;
+        store.setUserPref(`${catKey}.${settingKey}.${option}`, newVal);
+        updateCheckboxSetting(option);
+        if (typeof global.controller[option] === 'function') {
+          global.controller[option](newVal);
+        }
+        if (typeof global.core[option] === 'function') {
+          global.core[option](newVal);
+        }
+      },
+      type: 'checkbox',
+      value: option,
+    };
+    if (userPrefs[catKey][settingKey][option]) {
+      switchListAttrs.checked = true;
+    }
+    switchList.appendChild(
+      h('li',
+        [
+          h('span', setting.options[option]),
+          h('div.switch',
+            [
+              h(`input#${optionId}`,
+                switchListAttrs),
+              h('label',
+                {
+                  htmlFor: optionId })])]));
+  });
+  document.getElementById('display-tab-content').appendChild(switchList);
+}
+
 function createSettingsPage(userPrefs) {
+  if (document.getElementById('settings')) {
+    document.getElementById('settings').remove();
+  }
+
   const settingsPage = h('div#settings');
   Object.keys(settings).forEach((catKey) => {
     const cat = settings[catKey];
@@ -142,6 +189,12 @@ function createSettingsPage(userPrefs) {
           const switchList = h('ul');
           Object.keys(setting.options).forEach((option) => {
             const optionId = `setting-${catKey}-${settingKey}-${option}`;
+            let disabled = false;
+
+            if (option === 'akhandpaatt') {
+              disabled = store.get('userPrefs.slide-layout.display-options.disable-akhandpaatt');
+            }
+
             const switchListAttrs = {
               name: `setting-${catKey}-${settingKey}`,
               onclick: (e) => {
@@ -157,6 +210,7 @@ function createSettingsPage(userPrefs) {
               },
               type: 'checkbox',
               value: option,
+              disabled,
             };
             if (userPrefs[catKey][settingKey][option]) {
               switchListAttrs.checked = true;
@@ -192,6 +246,7 @@ module.exports = {
     const userPrefs = store.getAllPrefs();
     this.settingsPage = createSettingsPage(userPrefs);
     document.querySelector('#menu-page').appendChild(this.settingsPage);
+    addDisplayTab();
     this.applySettings();
   },
 
@@ -235,4 +290,29 @@ module.exports = {
       });
     });
   },
+  changeFontSize(iconType, operation) {
+    const range = settings['slide-layout'].settings['font-sizes'].options[iconType];
+    const existingSize = parseInt(store.getUserPref(`slide-layout.font-sizes.${iconType}`), 10);
+    document.body.classList.remove(`${iconType}-${existingSize}`);
+
+    let newSize;
+
+    if (operation === 'plus' && existingSize < range.max) {
+      newSize = existingSize + range.step;
+    } else if (operation === 'minus' && existingSize > range.min) {
+      newSize = existingSize - range.step;
+    }
+    document.body.classList.add(`${iconType}-${newSize}`);
+    store.setUserPref(`slide-layout.font-sizes.${iconType}`, newSize);
+    global.platform.updateSettings();
+  },
+  showHide(e, type) {
+    const catKey = 'slide-layout';
+    const settingKey = 'fields';
+    const option = `display-${type}`;
+    document.body.classList.toggle(option);
+    const newVal = document.body.classList.contains(option);
+    store.setUserPref(`${catKey}.${settingKey}.${option}`, newVal);
+    global.platform.updateSettings();
+  },
 };
diff --git a/www/js/settings.json b/www/js/settings.json
index 8017acad7..959f2d439 100644
--- a/www/js/settings.json
+++ b/www/js/settings.json
@@ -7,13 +7,6 @@
         "type": "radio",
         "options": {}
       },
-      "custom-theme-options": {
-        "title": "Themes Options",
-        "type": "switch",
-        "options": {
-          "show-theme-editor": "Show Theme Picker"
-        }
-      },
       "layout": {
         "title": "App Layout",
         "type": "switch",
diff --git a/www/js/theme_editor.js b/www/js/theme_editor.js
index e0e8edd0e..f1c6a715a 100644
--- a/www/js/theme_editor.js
+++ b/www/js/theme_editor.js
@@ -30,15 +30,6 @@ const getCurrentTheme = () => {
   return defaultTheme;
 }; */
 
-const closeCustomTheme = h(
-  'a.close-button',
-  {
-    onclick: () => {
-      document.querySelector('#setting-app-custom-theme-options-show-theme-editor').click();
-    },
-  },
-  h('i.fa.fa-times'));
-
 const swatchFactory = themeInstance =>
   h(
     'li.theme-instance',
@@ -112,7 +103,6 @@ module.exports = {
   defaultTheme,
   init() {
     const themeOptions = document.querySelector('#custom-theme-options');
-    document.querySelector('#options-page-close').appendChild(closeCustomTheme);
 
     themeOptions.appendChild(swatchHeaderFactory('Colours'));
 
diff --git a/www/js/viewer.js b/www/js/viewer.js
index b05a8d7d0..d0061b789 100644
--- a/www/js/viewer.js
+++ b/www/js/viewer.js
@@ -56,6 +56,7 @@ function castToReceiver() {
 }
 
 function castShabadLine(lineID) {
+  document.querySelector('.viewer-controls').innerHTML = '';
   castCur = decks[currentShabad][lineID];
   let nextLine = '';
   if (decks[currentShabad][lineID + 1]) {
@@ -63,6 +64,12 @@ function castShabadLine(lineID) {
   }
   castCur.nextLine = nextLine;
   castToReceiver();
+
+  const activeSlide = document.querySelector('.deck.active .slide.active').children;
+  Array.prototype.forEach.call(activeSlide, (element => {
+    const icons = iconsetHtml(`icons-${element.classList[0]}`, element.innerHTML);
+    if (icons) document.querySelector('.viewer-controls').appendChild(icons);
+  }));
 }
 
 function castText(text, isGurmukhi) {
@@ -116,6 +123,7 @@ global.platform.ipc.on('show-ang', (event, data) => {
 });
 
 global.platform.ipc.on('show-text', (event, data) => {
+  document.querySelector('.viewer-controls').innerHTML = '';
   showText(data.text, data.isGurmukhi);
 });
 
@@ -157,6 +165,27 @@ function createAPVContainer() {
   }
 }
 
+const iconsetHtml = (classname, content) => {
+  let icons;
+  const iconType = classname.split('-')[1];
+  if (content) {
+    icons = h(
+    `span.${classname}.iconset`, [
+      h('p.tagline', iconType),
+      h('span.visibility', {
+        onclick: e => core.menu.settings.showHide(e, iconType),
+      }, h('i.fa.fa-eye-slash')),
+      h('span.minus.size', {
+        onclick: () => core.menu.settings.changeFontSize(iconType, 'minus'),
+      }, h('i.fa.fa-minus-circle')),
+      h('span.plus.size', {
+        onclick: () => core.menu.settings.changeFontSize(iconType, 'plus'),
+      }, h('i.fa.fa-plus-circle')),
+    ]);
+  }
+  return icons;
+};
+
 function createCards(rows, LineID) {
   return new Promise((resolve) => {
     if (rows.length > 0) {
@@ -175,7 +204,9 @@ function createCards(rows, LineID) {
           }
         });
         const gurmukhiContainer = document.createElement('div');
-        gurmukhiContainer.innerHTML = `<span class="padchhed">${taggedGurmukhi.join(' ')}</span><span class="larivaar">${taggedGurmukhi.join('<wbr>')}</span>`;
+
+        gurmukhiContainer.innerHTML = `<span class="padchhed">${taggedGurmukhi.join(' ')}</span>
+                                       <span class="larivaar">${taggedGurmukhi.join('<wbr>')}</span>`;
         cards.push(
           h(
             `div#slide${row.ID}.slide${row.ID === LineID ? '.active' : ''}`,
@@ -199,8 +230,13 @@ function createCards(rows, LineID) {
 }
 
 function createDeck(cards, curSlide, shabad, ShabadID) {
+  document.querySelector('.vc-toggle-icon').style.left = '0';
   hideDecks();
-  $viewer.appendChild(h(`div#shabad${ShabadID}.deck.active`, cards));
+  if (document.querySelector('.vc-open')) {
+    $viewer.appendChild(h(`div#shabad${ShabadID}.deck.active.vc-open`, cards));
+  } else {
+    $viewer.appendChild(h(`div#shabad${ShabadID}.deck.active`, cards));
+  }
   smoothScroll(curSlide);
   currentShabad = parseInt(ShabadID, 10);
   decks[ShabadID] = shabad;
@@ -289,3 +325,15 @@ function showText(text, isGurmukhi = false) {
   $message.appendChild(h('div.slide.active', textNode));
   castText(text, isGurmukhi);
 }
+
+function toggleSideMenu() {
+  Array.from(document.querySelectorAll('.vc-toggle-icon i')).forEach(el => {
+    el.classList.toggle('vc-icon-hidden');
+  });
+  Array.from(document.querySelectorAll('.deck')).forEach(el => {
+    el.classList.toggle('vc-open');
+  });
+  document.querySelector('.viewer-controls').classList.toggle('viewer-controls-open');
+}
+
+document.querySelector('.vc-toggle-icon').onclick = toggleSideMenu;
diff --git a/www/obs/STTME.ico b/www/obs/STTME.ico
new file mode 100644
index 000000000..1c593ebea
Binary files /dev/null and b/www/obs/STTME.ico differ
diff --git a/www/obs/index.html b/www/obs/index.html
index fc094655f..b2f200da0 100644
--- a/www/obs/index.html
+++ b/www/obs/index.html
@@ -9,7 +9,11 @@
   <script>
     var socket = io();
     var overlayPrefs;
+    function hexToRgb(hex) {
+      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 
+      return result ? `${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}` : null;
+    }
     var writeLine = function(Line) {
       document.querySelector('.o-gurbani').innerHTML = Line.Gurmukhi;
       document.querySelector('.o-translation').innerHTML = Line.English;
@@ -17,8 +21,13 @@
       document.querySelector('.o-transliteration').innerHTML = Line.Transliteration;
       document.querySelectorAll('.content-bar').forEach((el) => {
         el.style.color = overlayPrefs.overlayVars.textColor;
-        el.style.backgroundColor = overlayPrefs.overlayVars.bgColor;
+        el.style.backgroundColor = `rgba(${hexToRgb(overlayPrefs.overlayVars.bgColor)}, ${overlayPrefs.overlayVars.bgOpacity})`;
+        el.style.height = `${overlayPrefs.overlayVars.height}px`;
+        el.style.fontSize = `${overlayPrefs.overlayVars.fontSize}px`;
       });
+      document.querySelector('.o-gurbani').style.fontSize = `${overlayPrefs.overlayVars.gurbaniFontSize}px`;
+      document.querySelector('.o-gurbani').style.color = overlayPrefs.overlayVars.gurbaniTextColor;
+
       switch (overlayPrefs.overlayVars.layout) {
         case 'top':
           topLayoutApply();
@@ -30,6 +39,7 @@
           splitLayoutApply();
           break;
       }
+
     };
 
     var topLayoutApply = function() {
@@ -37,13 +47,14 @@
       document.querySelector('.o-gurbani').style.bottom = 'auto';
       document.querySelector('.o-teeka').style.display = 'none';
       document.querySelector('.o-transliteration').style.display = 'none';
-      document.querySelector('.o-translation').style.top = '42px';
+      document.querySelector('.o-translation').style.top =  `${overlayPrefs.overlayVars.height + 12}px`;
       document.querySelector('.o-translation').style.bottom = 'auto';
     };
 
     var bottomLayoutApply = function() {
+
       document.querySelector('.o-gurbani').style.top = 'auto';
-      document.querySelector('.o-gurbani').style.bottom = '36px';
+      document.querySelector('.o-gurbani').style.bottom =  `${overlayPrefs.overlayVars.height + 12}px`;
       document.querySelector('.o-translation').style.top = 'auto';
       document.querySelector('.o-translation').style.bottom = '0';
       document.querySelector('.o-teeka').style.display = 'none';
@@ -51,14 +62,15 @@
     };
 
     var splitLayoutApply = function() {
+
       document.querySelector('.o-gurbani').style.top = '0';
       document.querySelector('.o-gurbani').style.bottom = 'auto';
       document.querySelector('.o-teeka').style.display = 'block';
-      document.querySelector('.o-teeka').style.top = '42px';
+      document.querySelector('.o-teeka').style.top = `${overlayPrefs.overlayVars.height + 12}px`;
       document.querySelector('.o-teeka').style.bottom = 'auto';
       document.querySelector('.o-transliteration').style.display = 'block';
       document.querySelector('.o-transliteration').style.top = 'auto';
-      document.querySelector('.o-transliteration').style.bottom = '36px';
+      document.querySelector('.o-transliteration').style.bottom = `${overlayPrefs.overlayVars.height + 12}px`;
       document.querySelector('.o-translation').style.top = 'auto';
       document.querySelector('.o-translation').style.bottom = '0';
     };
diff --git a/www/overlay.html b/www/overlay.html
index 70d8a2976..c7bacfcf7 100644
--- a/www/overlay.html
+++ b/www/overlay.html
@@ -7,19 +7,18 @@
   <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
 </head>
 <body>
-  <main class="canvas">
-    <section class="overlay-wrapper">
-      <div class="content-bar gurmukhi o-gurbani"> ik®pw kry jy AwpxI qw hir rKw aur  </div>
-      <div class="content-bar o-translation"> If the Lord shows His Mercy, then I keep Him enshrined within my heart. ||1|| </div>
-      <div class="content-bar o-teeka"> ਜੇ ਪਰਮਾਤਮਾ ਆਪਣੀ ਮੇਹਰ ਕਰੇ, ਤਾਂ ਮੈਂ ਭੀ ਉਸ ਦਾ ਨਾਮ ਹਿਰਦੇ ਵਿਚ ਪਰੋ ਰੱਖਾਂ ।੧। </div>
-      <div class="content-bar o-transliteration">kirapaa kare je aapanee taa har rakhaa aur dhaar ||1||  </div>
-    </section>
+<main class="canvas">
+  <section class="overlay-wrapper">
+    <div class="content-bar gurmukhi o-gurbani"> ik®pw kry jy AwpxI qw hir rKw aur</div>
+    <div class="content-bar o-translation"> If the Lord shows His Mercy, then I keep Him enshrined within my heart. ||1||</div>
+    <div class="content-bar o-teeka"> ਜੇ ਪਰਮਾਤਮਾ ਆਪਣੀ ਮੇਹਰ ਕਰੇ, ਤਾਂ ਮੈਂ ਭੀ ਉਸ ਦਾ ਨਾਮ ਹਿਰਦੇ ਵਿਚ ਪਰੋ ਰੱਖਾਂ ।੧।</div>
+    <div class="content-bar o-transliteration">kirapaa kare je aapanee taa har rakhaa aur dhaar ||1||</div>
+  </section>
 
-    <section class="control-panel">
+  <section class="control-panel">
+  </section>
+</main>
 
-    </section>
-  </main>
-
-  <script src="js/overlay.js"></script>
+<script src="js/overlay.js"></script>
 </body>
 </html>
diff --git a/www/src/scss/_display-next-line.scss b/www/src/scss/_display-next-line.scss
index 981fbbd70..2ccfb5a48 100644
--- a/www/src/scss/_display-next-line.scss
+++ b/www/src/scss/_display-next-line.scss
@@ -1,6 +1,11 @@
 @for $i from 1 through 12 {
   .display-next-line.gurbani-#{$i} .deck {
-    font-size: #{$i}em;
+    .slide.active {
+      & + .slide .gurbani {
+        font-size: calc(0.9 * #{$i}vh);
+        opacity: 0.5;
+      }
+    }
   }
 }
 
@@ -12,7 +17,7 @@
   .slide {
     display: none;
     height: initial;
-    min-height: calc(100% - 3.25em);
+    min-height: calc(100% - 13em);
     opacity: 1;
     position: initial;
     width: initial;
@@ -25,10 +30,6 @@
       display: block;
       padding-top: 0.25em;
 
-      .gurbani {
-        animation: blank 0.2s, backlight 1s 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-      }
-
       .translation,
       .transliteration,
       .teeka {
@@ -36,16 +37,11 @@
       }
     }
 
-    .translation {
-      animation: backlight 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-    }
-
-    .teeka {
-      animation: backlight 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
-    }
-
+    .gurbani,
+    .translation,
+    .teeka,
     .transliteration {
-      animation: backlight 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
+      animation: ease-out 1s, blank 0.2s, backlight 1s 0.2s cubic-bezier(0.645, 0.05, 0.355, 1);
     }
   }
 }
diff --git a/www/src/scss/_header.scss b/www/src/scss/_header.scss
index f1ab55341..599d1480e 100644
--- a/www/src/scss/_header.scss
+++ b/www/src/scss/_header.scss
@@ -14,19 +14,75 @@
   }
 }
 
+.presenter-view.scale-viewer {
+  .toggle-minimize {
+    display: none;
+  }
+}
+
+#search-type {
+  flex-grow: 1;
+  margin: 0 10px;
+  order: 1;
+  text-align: left;
+
+  select {
+    width: 100%;
+  }
+
+  span {
+    display: inline-block;
+    margin-right: 5px;
+  }
+}
+
 .navigator-header {
   align-items: center;
   display: flex;
   height: 40px;
-  justify-content: space-between;
   line-height: 40px;
   text-align: center;
 
   .nav-header-text {
-    flex-grow: 1;
     padding: 0 10px;
   }
 
+  .nav-header-tab {
+    cursor: pointer;
+    height: 100%;
+    opacity: 0.5;
+    padding: 0 10px;
+
+    @extend .nav-header-text;
+
+    &.active {
+      opacity: 1;
+    }
+  }
+
+  .more-tabs.listview {
+    overflow: inherit;
+    z-index: 20;
+
+    .nav-header-tab {
+      opacity: 1;
+    }
+  }
+
+  .more-tabs {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    padding-right: 6px;
+    position: relative;
+
+    .more-icon {
+      position: absolute;
+      right: 0;
+    }
+  }
+
   .navigator-button {
     cursor: pointer;
     display: block;
@@ -38,4 +94,43 @@
 
     &.hide { display: none; }
   }
+
+  .current-shabad-header {
+    display: flex;
+    flex-grow: 1;
+    justify-content: space-between;
+  }
+
+  .toggle-minimize {
+    cursor: pointer;
+    font-size: 12px;
+    margin: 0 10px;
+    order: 2;
+    text-align: right;
+
+    .disabled {
+      display: none;
+    }
+  }
+}
+
+#session-page,
+#menu-page {
+  .toggle-minimize {
+    flex-grow: 1;
+  }
+}
+
+.tab-content {
+  display: none;
+
+  &.active {
+    display: block;
+  }
+}
+
+.presenter-view.scale-viewer .nav-header-tab {
+  @media screen and (max-width: 900px) {
+    font-size: 14px;
+  }
 }
diff --git a/www/src/scss/_overlay.scss b/www/src/scss/_overlay.scss
index 788cf9d5d..072e71d73 100644
--- a/www/src/scss/_overlay.scss
+++ b/www/src/scss/_overlay.scss
@@ -23,11 +23,9 @@
   background: rgba(44, 62, 80, 0.9);
   border: 1px dashed transparent;
   color: rgba(241, 196, 15, 1);
-  font-size: 16px;
   left: 0;
   line-height: 1.5;
   margin: auto;
-  min-height: 24px;
   padding: 5px;
   position: absolute;
   text-align: center;
@@ -65,7 +63,7 @@ input[type='color'] {
 
 .setting-label {
   color: #333;
-  font-size: 13px;
+  font-size: 10px;
   font-weight: bold;
   letter-spacing: 2px;
   margin-top: 5px;
@@ -131,6 +129,18 @@ input[type='color'] {
   margin: auto;
 }
 
+.resize-btn {
+  display: flex;
+  margin-top: 10px;
+}
+
+.size-btn {
+  @extend .color-input;
+
+  background: #ddd;
+  margin: auto;
+}
+
 .layout-btn.top-bottom {
   position: relative;
 
@@ -173,7 +183,6 @@ input[type='color'] {
 .o-gurbani {
   bottom: 36px;
   font-family: "gurbaniakharthick";
-  font-size: 20px;
   line-height: 1.5;
   position: absolute;
   text-align: center;
diff --git a/www/src/scss/_search.scss b/www/src/scss/_search.scss
index 05d516f32..715d5b7d1 100644
--- a/www/src/scss/_search.scss
+++ b/www/src/scss/_search.scss
@@ -3,29 +3,49 @@
 }
 
 #search-container {
+  align-content: center;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
+  display: flex;
   height: 40px;
+  justify-content: space-between;
   margin: 0;
   width: 100%;
 
+  span {
+    align-self: center;
+  }
+
   input {
     background: transparent;
     border: none;
     box-shadow: none;
     display: inline-block;
+    flex-grow: 1;
     float: left;
     height: 40px;
     margin: 0;
     position: relative;
-    width: calc(100% - 80px);
+    width: 100%;
 
     &::-webkit-input-placeholder {
       font-family: $body-font-family;
       font-size: 0.8em;
     }
+
+    &[type='number'] {
+      margin-left: 12px;
+      max-width: 80px;
+
+      &::-webkit-input-placeholder {
+        @extend .gurmukhi;
+
+        opacity: 0.4;
+      }
+    }
   }
 
   > button {
+    background-color: #e1802f;
     display: inline-block;
     height: 40px;
     padding: 0.5rem;
@@ -56,10 +76,7 @@
   border-radius: 2px;
   display: none;
   font-size: 0;
-  left: 0;
   overflow: hidden;
-  position: absolute;
-  top: calc(-128px - 40px);
   width: calc(100% + 2px);
   z-index: 2;
 
@@ -91,9 +108,15 @@
 }
 
 #navigator.kb-active {
+  height: calc(300px + 128px);
+
   #gurmukhi-keyboard {
     display: block;
   }
+
+  #search-page .block-list {
+    height: calc(100% - 116px - 128px);
+  }
 }
 
 #search-options-toggle i {
@@ -101,20 +124,26 @@
 }
 
 #search-options {
-  height: 0;
+  height: 36px;
   overflow: hidden;
+  padding-right: 12px;
+  text-align: left;
   transition: height 250ms linear;
 
+  .filter-text {
+    font-style: italic;
+  }
+
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
-    background-color: #fff;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28138, 138, 138%29'></polygon></svg>");
+    background-color: transparent;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28255, 128, 47%29'></polygon></svg>");
     background-origin: content-box;
     background-position: right -1rem center;
     background-repeat: no-repeat;
-    background-size: 9px 6px;
-    border: 1px solid #cacaca;
+    background-size: 15px 10px;
+    border: none;
     border-radius: 0;
     color: #0a0a0a;
     font-family: inherit;
@@ -124,17 +153,11 @@
     margin: 0;
     padding: 0.5rem;
     padding-right: 1.5rem;
-    width: 100%;
-  }
-}
-
-.search-options-open {
-  #search-options-toggle i {
-    transform: rotate(90deg);
-  }
+    width: 0;
 
-  #search-options {
-    height: 40px;
+    &:disabled {
+      background-color: #eee;
+    }
   }
 }
 
@@ -149,16 +172,28 @@ button {
 }
 
 #search-page {
-  .block-list {
-    height: calc(100% - 80px);
-    transition: height $transition-time $transition-easing;
-  }
+  overflow: hidden;
+
+  #language-selector {
+    flex-grow: 1;
+    text-align: left;
 
-  &.search-options-open {
-    .block-list {
-      height: calc(100% - 80px);
+    label {
+      margin-right: 5px;
     }
   }
+
+  .navigator-header {
+    flex-wrap: wrap;
+    height: initial;
+    justify-content: space-around;
+  }
+
+  .block-list {
+    height: calc(100% - 116px);
+    transition: height $transition-time $transition-easing;
+    z-index: 5;
+  }
 }
 
 .panktee.search-result {
@@ -191,8 +226,24 @@ button {
   }
 }
 
+#custom-theme-options {
+  display: flex;
+  flex-wrap: wrap;
+
+  header {
+    flex-basis: 100%;
+  }
+}
+
 body.searchResults_transliteration .search-result .transliteration,
 body.searchResults_translationEnglish .search-result .translation.english,
 body.searchResults_meta .search-result .meta {
   display: block;
 }
+
+#gurmukhi-keyboard-toggle {
+  i {
+    color: #fff;
+    font-size: 25px;
+  }
+}
diff --git a/www/src/scss/_theme-a-new-day.scss b/www/src/scss/_theme-a-new-day.scss
index 08811575f..63ce14669 100644
--- a/www/src/scss/_theme-a-new-day.scss
+++ b/www/src/scss/_theme-a-new-day.scss
@@ -57,7 +57,8 @@ $base-text: #4e4e4e;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $statusbar-bg;
     color: $base-text;
   }
diff --git a/www/src/scss/_theme-baagi-blue.scss b/www/src/scss/_theme-baagi-blue.scss
index 12e3ea4d3..d07fc0fbe 100644
--- a/www/src/scss/_theme-baagi-blue.scss
+++ b/www/src/scss/_theme-baagi-blue.scss
@@ -68,7 +68,8 @@ $highlight-text: #cfd8dc;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $bg-main;
     color: $text-base;
   }
@@ -144,9 +145,12 @@ $highlight-text: #cfd8dc;
   }
 
   #search-options select {
-    background-color: $bg-main;
     border: $bg-main;
     color: $text-bright;
+
+    option {
+      background-color: $bg-main;
+    }
   }
 
   .panktee {
diff --git a/www/src/scss/_theme-black-blue.scss b/www/src/scss/_theme-black-blue.scss
index 5dab0bbb9..cd0ba1978 100644
--- a/www/src/scss/_theme-black-blue.scss
+++ b/www/src/scss/_theme-black-blue.scss
@@ -68,7 +68,8 @@ $highlight-text: #cfd8dc;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $bg-main;
     color: $text-base;
   }
@@ -144,9 +145,12 @@ $highlight-text: #cfd8dc;
   }
 
   #search-options select {
-    background-color: $bg-main;
     border: $bg-main;
     color: $text-bright;
+
+    option {
+      background-color: $bg-main;
+    }
   }
 
   .panktee {
diff --git a/www/src/scss/_theme-blue-darbar.scss b/www/src/scss/_theme-blue-darbar.scss
index 49dac7eb2..a6f09d7f6 100644
--- a/www/src/scss/_theme-blue-darbar.scss
+++ b/www/src/scss/_theme-blue-darbar.scss
@@ -68,7 +68,8 @@ $highlight-text: #cfd8dc;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $bg-main;
     color: $text-base;
   }
@@ -144,9 +145,12 @@ $highlight-text: #cfd8dc;
   }
 
   #search-options select {
-    background-color: $bg-main;
     border: $bg-main;
     color: $text-bright;
+
+    option {
+      background-color: $bg-main;
+    }
   }
 
   .panktee {
diff --git a/www/src/scss/_theme-dark.scss b/www/src/scss/_theme-dark.scss
index 482923be3..72a82a900 100644
--- a/www/src/scss/_theme-dark.scss
+++ b/www/src/scss/_theme-dark.scss
@@ -67,7 +67,8 @@ $highlight-text: #cfd8dc;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $bg-main;
     color: $text-base;
   }
@@ -127,6 +128,15 @@ $highlight-text: #cfd8dc;
   #search-container {
     input {
       color: $text-bright;
+
+      &[type='number'] {
+        background-color: #fff;
+        color: #333;
+
+        &::-webkit-input-placeholder {
+          color: #333;
+        }
+      }
     }
 
     input:focus + div {
@@ -143,9 +153,12 @@ $highlight-text: #cfd8dc;
   }
 
   #search-options select {
-    background-color: $bg-main;
     border: $bg-main;
     color: $text-bright;
+
+    option {
+      background-color: $bg-main;
+    }
   }
 
   .panktee {
diff --git a/www/src/scss/_theme-floral.scss b/www/src/scss/_theme-floral.scss
index e8ebb06db..e262a5955 100644
--- a/www/src/scss/_theme-floral.scss
+++ b/www/src/scss/_theme-floral.scss
@@ -58,7 +58,8 @@ $base-text: #4e4e4e;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $statusbar-bg;
     color: $base-text;
   }
diff --git a/www/src/scss/_theme-high-contrast.scss b/www/src/scss/_theme-high-contrast.scss
index 774f7390c..f282b80de 100644
--- a/www/src/scss/_theme-high-contrast.scss
+++ b/www/src/scss/_theme-high-contrast.scss
@@ -39,6 +39,14 @@ body.high-contrast {
     }
   }
 }
+
+.high-contrast {
+  .vc-toggle-icon,
+  .viewer-controls {
+    color: #333;
+  }
+}
+
 //TODO: Consolidate to mixin for the dark themes
 $bg-main: #212121;
 $bg-alt: #3a3a3a;
@@ -67,7 +75,8 @@ $highlight-text: #cfd8dc;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $bg-main;
     color: $text-base;
   }
@@ -143,9 +152,12 @@ $highlight-text: #cfd8dc;
   }
 
   #search-options select {
-    background-color: $bg-main;
     border: $bg-main;
     color: $text-bright;
+
+    option {
+      background-color: $bg-main;
+    }
   }
 
   .panktee {
diff --git a/www/src/scss/_theme-khalsa-gold.scss b/www/src/scss/_theme-khalsa-gold.scss
index ecaa402bc..9a6b6ccfb 100644
--- a/www/src/scss/_theme-khalsa-gold.scss
+++ b/www/src/scss/_theme-khalsa-gold.scss
@@ -57,7 +57,8 @@ $base-text: #4e4e4e;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $statusbar-bg;
     color: $base-text;
   }
diff --git a/www/src/scss/_theme-khalsa-rush.scss b/www/src/scss/_theme-khalsa-rush.scss
index 9752d71ec..5da250f94 100644
--- a/www/src/scss/_theme-khalsa-rush.scss
+++ b/www/src/scss/_theme-khalsa-rush.scss
@@ -53,7 +53,8 @@ $base-text: #4e4e4e;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $statusbar-bg;
     color: $base-text;
   }
diff --git a/www/src/scss/_theme-light.scss b/www/src/scss/_theme-light.scss
index 9e59c02c5..a86f7ca59 100644
--- a/www/src/scss/_theme-light.scss
+++ b/www/src/scss/_theme-light.scss
@@ -48,7 +48,8 @@ $base-text: #4e4e4e;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $statusbar-bg;
     color: $base-text;
   }
@@ -82,6 +83,17 @@ $base-text: #4e4e4e;
   #search-container {
     input {
       color: $base-text;
+
+      &[type='number'] {
+        background-color: #333;
+        color: #fff;
+
+        &::-webkit-input-placeholder {
+          color: #fff;
+
+          @extend .gurmukhi;
+        }
+      }
     }
 
     input:focus + div {
diff --git a/www/src/scss/_theme-low-light.scss b/www/src/scss/_theme-low-light.scss
index fdf10ba71..2b029597b 100644
--- a/www/src/scss/_theme-low-light.scss
+++ b/www/src/scss/_theme-low-light.scss
@@ -67,7 +67,8 @@ $highlight-text: #cfd8dc;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $bg-main;
     color: $text-base;
   }
@@ -143,9 +144,12 @@ $highlight-text: #cfd8dc;
   }
 
   #search-options select {
-    background-color: $bg-main;
     border: $bg-main;
     color: $text-bright;
+
+    option {
+      background-color: $bg-main;
+    }
   }
 
   .panktee {
diff --git a/www/src/scss/_theme-moody-blue.scss b/www/src/scss/_theme-moody-blue.scss
index 1ba64cbbe..fe4bcc6ca 100644
--- a/www/src/scss/_theme-moody-blue.scss
+++ b/www/src/scss/_theme-moody-blue.scss
@@ -68,7 +68,8 @@ $highlight-text: #cfd8dc;
     }
   }
 
-  .navigator-header {
+  .navigator-header,
+  .more-tabs .nav-header-tab {
     background-color: $bg-main;
     color: $text-base;
   }
@@ -144,9 +145,12 @@ $highlight-text: #cfd8dc;
   }
 
   #search-options select {
-    background-color: $bg-main;
     border: $bg-main;
     color: $text-bright;
+
+    option {
+      background-color: $bg-main;
+    }
   }
 
   .panktee {
diff --git a/www/src/scss/controller.scss b/www/src/scss/controller.scss
index 005f7b0f4..8c8049767 100644
--- a/www/src/scss/controller.scss
+++ b/www/src/scss/controller.scss
@@ -62,6 +62,21 @@ ul {
   position: relative;
 }
 
+.minimized {
+  #main-ui {
+    height: calc(100%); //Full-height minus header, search, and footer
+    position: relative;
+  }
+
+  #search-type {
+    visibility: hidden;
+  }
+
+  #language-selector {
+    visibility: hidden;
+  }
+}
+
 .nav-page,
 .takeover-page {
   display: none;
@@ -92,10 +107,10 @@ ul {
   .announcement-text {
     border-radius: 10px;
     display: inline-block;
-    min-height: 80px;
+    margin: 0 20px 10px;
+    min-height: 40px;
     outline: none;
     padding: 10px;
-    width: 100%;
   }
 
   select {
@@ -103,8 +118,9 @@ ul {
   }
 
   .announcement-slide-btn {
+    align-self: center;
     display: block;
-    width: 100%;
+    width: 200px;
   }
 }
 
diff --git a/www/src/scss/obs/styles.scss b/www/src/scss/obs/styles.scss
index bca734a9a..997d5d9c1 100644
--- a/www/src/scss/obs/styles.scss
+++ b/www/src/scss/obs/styles.scss
@@ -27,6 +27,7 @@
 
 .overlay-wrapper {
   height: 100vh;
+  position: relative;
   width: 100%;
 }
 
@@ -38,11 +39,9 @@
   background: rgba(44, 62, 80, 0.9);
   border: 1px dashed transparent;
   color: rgba(241, 196, 15, 1);
-  font-size: 16px;
   left: 0;
   line-height: 1.5;
   margin: auto;
-  min-height: 24px;
   padding: 5px;
   position: absolute;
   text-align: center;
@@ -50,9 +49,8 @@
 }
 
 .o-gurbani {
-  bottom: 36px;
+  bottom: 12px;
   font-family: 'gurbaniakharthick';
-  font-size: 20px;
   line-height: 1.5;
   position: absolute;
   text-align: center;
diff --git a/www/src/scss/styles.scss b/www/src/scss/styles.scss
index 89d3223fc..fbd0bdae5 100644
--- a/www/src/scss/styles.scss
+++ b/www/src/scss/styles.scss
@@ -58,10 +58,23 @@ a {
 #navigator {
   bottom: 0;
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
-  height: 260px;
+  height: 300px;
   position: fixed;
   right: 0;
-  width: 425px;
+  transition: height $transition-time $transition-easing;
+  width: 470px;
+
+  &.minimized {
+    height: 40px;
+  }
+}
+
+.darwin #navigator {
+  width: 500px;
+}
+
+.presenter-view.scale-viewer #navigator {
+  transition: none;
 }
 
 .controller.scale-viewer.presenter-view {
@@ -139,13 +152,13 @@ a {
   #navigator.kb-active {
     $height:calc(50% - calc(#{$presenter-pane-gap} * 3) - calc(#{$keyboard-height} / 2));
 
-    .nav-page {
+    /* .nav-page {
       &:nth-child(1) {
         height: $height;
       }
 
       &:nth-child(1) { @include calculateTop(0,0,$keyboard-height); }
-    }
+    } */
   }
 
   #footer {
@@ -287,12 +300,12 @@ a {
   #navigator.kb-active {
     $height: calc(50% - calc(#{$presenter-pane-gap * 3} + #{$title-bar-offset}) - calc(#{$keyboard-height} / 2));
 
-    .nav-page {
+    /* .nav-page {
       &:nth-child(1) {
         height: $height;
       }
 
       &:nth-child(1) { @include calculateTop(0,1,$keyboard-height); }
-    }
+    } */
   }
 }
diff --git a/www/src/scss/viewer.scss b/www/src/scss/viewer.scss
index bec098f08..94af87cf3 100644
--- a/www/src/scss/viewer.scss
+++ b/www/src/scss/viewer.scss
@@ -83,6 +83,11 @@ body {
 
   &.active {
     opacity: 1;
+
+    &.vc-open {
+      right: #{$viewer-padding};
+      width: calc(100% - #{$viewer-padding} * 2 - 28vh);
+    }
   }
 }
 
@@ -175,18 +180,41 @@ h2 {
 .translation,
 .transliteration,
 .teeka {
+  display: none;
   height: 0;
   opacity: 0;
-  overflow: hidden;
 }
 
 .display-translation .translation,
 .display-transliteration .transliteration,
 .display-teeka .teeka {
+  display: block;
   height: auto;
   opacity: 1;
 }
 
+.icons-translation .size,
+.icons-transliteration .size,
+.icons-teeka .size {
+  opacity: 0.4;
+  z-index: -1;
+}
+
+.display-translation .icons-translation,
+.display-transliteration .icons-transliteration,
+.display-teeka .icons-teeka {
+  .size {
+    opacity: 1;
+    z-index: 20;
+  }
+
+  .visibility i {
+    &::before {
+      content: "\f06e";
+    }
+  }
+}
+
 /* ***** FONT SIZES ***** */
 @for $i from 1 through 20 {
   .gurbani-#{$i} .gurbani,
@@ -225,6 +253,118 @@ h2 {
   }
 }
 
+.vc-toggle-icon {
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  display: none;
+  font-size: 5vh;
+  justify-content: space-around;
+  left: -30vh;
+  padding-bottom: 6px;
+  padding-top: 12px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 28vh;
+  z-index: 50;
+
+  .vc-icon-hidden {
+    display: none;
+  }
+
+  .vc-label {
+    font-size: 3vh;
+    font-weight: bold;
+  }
+}
+
+.viewer-controls {
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.1);
+  display: flex;
+  flex-direction: column;
+  height: 0;
+  justify-content: space-around;
+  left: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  transition: all $transition-time $transition-easing;
+  width: 28vh;
+  z-index: 20;
+
+  .icons-gurbani {
+    margin-top: 16px;
+  }
+}
+
+.viewer-controls-open {
+  height: 100vh;
+}
+
+.iconset {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+  width: 100%;
+
+  p {
+    flex-basis: 100%;
+    font-size: 3vh;
+    font-weight: bold;
+    text-transform: capitalize;
+  }
+
+  span {
+    align-items: center;
+    border: 4px solid #ccc;
+    border-radius: 50%;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    padding: 12px;
+  }
+
+  span {
+    font-size: 4vh;
+    height: 6vh;
+    width: 6vh;
+  }
+
+  &.icons-gurbani .visibility {
+    display: none;
+  }
+}
+
+.webview .vc-toggle-icon {
+  display: flex;
+}
+
+.presenter-view.webview {
+  .viewer-controls {
+    width: 30vh;
+
+    .iconset {
+      p {
+        font-size: 4vh;
+        font-weight: bold;
+      }
+
+      span {
+        font-size: 5vh;
+        height: 7vh;
+        width: 7vh;
+      }
+    }
+  }
+
+  .vc-toggle-icon {
+    width: 30vh;
+  }
+}
+
 @import
   "display-next-line",
   "theme-dark",
diff --git a/www/viewer.html b/www/viewer.html
index 1544b7156..8dbdb654e 100644
--- a/www/viewer.html
+++ b/www/viewer.html
@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>SikhiToTheMax Viewer</title>
   <link rel="stylesheet" href="assets/css/bundle.css">
+  <link rel="stylesheet" href="assets/css/vendor/font-awesome.min.css">
   <link rel="stylesheet" href="assets/css/vendor/tingle.css">
 </head>
 <body class="viewer">
@@ -45,6 +46,12 @@
   </div>
   <div id="viewer">
     <div class="overlay color-overlay"> </div>
+    <span class="vc-toggle-icon">
+      <span class="vc-label">Quick Tools</span>
+      <i class="fa fa-caret-down"></i>
+      <i class="fa fa-caret-up vc-icon-hidden"></i>
+    </span>
+    <div class="viewer-controls"></div>
     <div class="deck" id="message"></div>
     <div id="ribbon1" class="ribbon"></div>
     <div id="ribbon2" class="ribbon"></div>