diff --git a/.gitignore b/.gitignore
index 18047cf74..0dda09af2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,5 @@ data.db
 *.provisionprofile
 npm-debug.log*
 .idea/
+.DS_Store/
+
diff --git a/www/assets/img/icons/sunder_gutka.png b/www/assets/img/icons/sunder_gutka.png
new file mode 100644
index 000000000..e2906ab13
Binary files /dev/null and b/www/assets/img/icons/sunder_gutka.png differ
diff --git a/www/index.html b/www/index.html
index 12433e83f..37567101a 100644
--- a/www/index.html
+++ b/www/index.html
@@ -53,9 +53,17 @@
     </ul>
   </div>
   <div id="app-frame">
-    <webview id="main-viewer" src="viewer.html" nodeintegration></webview>
+    <webview id="main-viewer" src="viewer.html" nodeintegration class="base-ui"></webview>
     <div id="navigator" class="noselect">
-      <div id="main-ui">
+      <div class="focus-overlay hidden overlay-ui common-overlay"> </div>
+      <div id="toolbar">
+        <div class="bani-list hidden overlay-ui sg-overlay"> 
+          <header class="navigator-header"> <span> Sundar Gutka </span> </header>
+        </div>
+        <div class="bani-extras hidden overlay-ui sg-overlay"> 
+        </div>
+      </div>
+      <div id="main-ui" class="base-ui">
         <div class="nav-page" id="search-page">
           <div class="navigator-header">
             <div class="preferences-open"> </div>
@@ -144,13 +152,13 @@
           </div>
         </div>
       </div>
-      <div id="footer">
+      <div id="footer" class="base-ui">
         <div class="menu-group">
           <div class="menu-group-left"></div>
           <div class="presenter-switch"> </div>
         </div>
       </div>
-      <section class="shortcut-tray"> </section>
+      <section class="shortcut-tray base-ui"> </section>
     </div>
   </div>
   <script src="assets/js/vendor/mousetrap.min.js"></script>
diff --git a/www/js/banidb/index.js b/www/js/banidb/index.js
index f21e09966..7d3130492 100644
--- a/www/js/banidb/index.js
+++ b/www/js/banidb/index.js
@@ -15,13 +15,25 @@ if (!search) {
   search = require('./realm-search');
 }
 
-const { query, loadShabad, loadCeremony, getAng, loadAng, getShabad, randomShabad } = search;
+const {
+  query,
+  loadShabad,
+  loadBanis,
+  loadBani,
+  loadCeremony,
+  getAng,
+  loadAng,
+  getShabad,
+  randomShabad,
+} = search;
 
 // Re-export CONSTS for use in other areas
 module.exports = {
   CONSTS,
   query,
   loadShabad,
+  loadBanis,
+  loadBani,
   loadCeremony,
   getAng,
   loadAng,
diff --git a/www/js/banidb/realm-search.js b/www/js/banidb/realm-search.js
index a5cbd5ab4..a9d662096 100644
--- a/www/js/banidb/realm-search.js
+++ b/www/js/banidb/realm-search.js
@@ -161,6 +161,32 @@ const loadShabad = ShabadID => (
   })
 );
 
+/**
+ * Retrieve all lines from a Bani
+ *
+ * @param {number} BaniID The specific Bani to get
+ * @returns {object} Returns array of objects for each line
+ * @example
+ *
+ * loadBani(2);
+ * // => [{ Bani: { Gurmukhi: 'jpujI swihb', ID: 2,...},...}]
+ */
+const loadBani = BaniID => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    Realm.open(realmConfig)
+      .then((realm) => {
+        const rows = realm.objects('Banis_Shabad').filtered('Bani.ID == $0', BaniID).sorted('Seq');
+        if (rows.length > 0) {
+          resolve(rows);
+        }
+      })
+      .catch(reject);
+  })
+);
+
 /**
  * Retrieve all lines from a Ceremony
  *
@@ -169,7 +195,7 @@ const loadShabad = ShabadID => (
  * @example
  *
  * loadCeremony(3);
- * // => [{ Gurmukhi: 'jo gurisK guru syvdy sy puMn prwxI ]', ID: 31057 },...]
+ * // => [{ Ceremony: { ID: 26106, Seq:2,...},...}]
  */
 
 const loadCeremony = ceremonyID => (
@@ -188,6 +214,21 @@ const loadCeremony = ceremonyID => (
   })
 );
 
+const loadBanis = () => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    Realm.open(realmConfig)
+    .then((realm) => {
+      const rows = realm.objects('Banis').filtered('ID < 10000').sorted('ID');
+      if (rows.length > 0) {
+        resolve(rows);
+      }
+    })
+    .catch(reject);
+  })
+);
 /**
  * Retrieve the Ang number and source for any given ShabadID
  *
@@ -295,6 +336,8 @@ module.exports = {
   CONSTS,
   query,
   loadShabad,
+  loadBanis,
+  loadBani,
   loadCeremony,
   getAng,
   loadAng,
diff --git a/www/js/banidb/sqlite-search.js b/www/js/banidb/sqlite-search.js
index 535540b77..e4e2c2de2 100644
--- a/www/js/banidb/sqlite-search.js
+++ b/www/js/banidb/sqlite-search.js
@@ -199,6 +199,50 @@ const loadCeremony = CeremonyID => (
   })
 );
 
+/**
+ * Retrieve all banis from database
+ *
+ * @returns {object} Returns array of objects containing all banis
+ *
+ */
+
+const loadBanis = () => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    db.all('SELECT ID, Token, Gurmukhi, GurmukhiUni, Transliteration FROM Banis WHERE ID < 10000 ORDER BY ID', (err, rows) => {
+      if (err) {
+        reject(err);
+      } else if (rows.length > 0) {
+        resolve(rows);
+      }
+    });
+  })
+);
+
+/**
+ * Retrieve all lines from a Bani
+ *
+ * @param {number} BaniID The specific Bani to get
+ * @returns {object} Returns array of objects for each line
+ *
+ */
+
+const loadBani = BaniID => (
+  new Promise((resolve, reject) => {
+    if (!initialized) {
+      init();
+    }
+    db.all(`SELECT v.ID, v.Gurmukhi, v.GurmukhiBisram, v.English, v.Transliteration, v.punjabiUni, v.SourceID, v.PageNo AS PageNo FROM Verse v LEFT JOIN Banis_Shabad b ON v.ID = b.VerseID WHERE b.Bani = ${BaniID} ORDER BY b.Seq`, (err, rows) => {
+      if (err) {
+        reject(err);
+      } else if (rows.length > 0) {
+        resolve(rows);
+      }
+    });
+  })
+);
 
 /**
  * Retrieve the Ang number and source for any given ShabadID
@@ -308,6 +352,8 @@ module.exports = {
   query,
   loadShabad,
   loadCeremony,
+  loadBanis,
+  loadBani,
   getAng,
   loadAng,
   getShabad,
diff --git a/www/js/defaults.json b/www/js/defaults.json
index 8dcea0b25..c450d0a00 100644
--- a/www/js/defaults.json
+++ b/www/js/defaults.json
@@ -35,6 +35,9 @@
       "autoplay-options": {
         "autoplayTimer": 10
       },
+      "sunder-gutka": {
+        "bani-length": 4
+      },
       "display-options": {
         "disable-akhandpaatt": false,
         "akhandpaatt": false,
diff --git a/www/js/desktop_index.js b/www/js/desktop_index.js
index 2413bf077..912b61b5c 100644
--- a/www/js/desktop_index.js
+++ b/www/js/desktop_index.js
@@ -7,6 +7,7 @@ global.core = require('./js/index');
 global.core.search.init();
 global.core.menu.init();
 global.core.shortcutTray.init();
+global.core.toolbar.init();
 global.core.themeEditor.init();
 // global.core.shareSync.init();
 global.platform.init();
diff --git a/www/js/index.js b/www/js/index.js
index 156f0f7b6..d7f9108cf 100644
--- a/www/js/index.js
+++ b/www/js/index.js
@@ -5,6 +5,7 @@ const themeEditor = require('./theme_editor');
 const shareSync = require('./share-sync');
 const settings = require('../js/settings');
 const shortcutTray = require('./shortcut_tray');
+const toolbar = require('./toolbar');
 
 /* const Settings = require('../../js/settings');
 const settings = new Settings(platform.store); */
@@ -20,8 +21,9 @@ function hideSlide() {
   global.controller.sendText('');
 }
 
-function highlightLine(newLine) {
-  const $line = search.$shabad.querySelector(`#line${newLine}`);
+function highlightLine(newLine, nextLineCount = null) {
+  const nextLineSelector = nextLineCount ? `#li_${nextLineCount} a.panktee` : `#line${newLine}`;
+  const $line = search.$shabad.querySelector(nextLineSelector);
   $line.click();
   const curPankteeTop = $line.parentNode.offsetTop;
   const curPankteeHeight = $line.parentNode.offsetHeight;
@@ -46,13 +48,7 @@ function spaceBar(e) {
   let newLineId = mainLineID;
 
   if (mainLineID === currentLineId) {
-    let done = false;
-    search.$shabad.querySelectorAll('a.panktee').forEach((item) => {
-      if (!item.classList.contains(['seen_check']) && !done) {
-        newLineId = item.dataset.lineId;
-        done = true;
-      }
-    });
+    newLineId = search.$shabad.querySelector('a.panktee:not(.seen_check)').dataset.lineId;
   }
 
   highlightLine(newLineId);
@@ -61,9 +57,10 @@ function spaceBar(e) {
 
 function prevLine(e) {
   // Find position of current line in Shabad
-  const pos = search.currentShabad.indexOf(search.currentLine);
-  if (pos > 0) {
-    highlightLine(search.currentShabad[pos - 1]);
+  const $currentLine = search.$shabad.querySelector('a.panktee.current').parentNode;
+  const prevLineCount = parseInt($currentLine.dataset.lineCount, 10) - 1;
+  if (prevLineCount > 0) {
+    highlightLine(null, prevLineCount);
   }
   e.preventDefault();
 }
@@ -71,8 +68,10 @@ function prevLine(e) {
 function nextLine(e) {
   // Find position of current line in Shabad
   const pos = search.currentShabad.indexOf(search.currentLine);
+  const $currentLine = search.$shabad.querySelector('a.panktee.current').parentNode;
+  const nextLineCount = (parseInt($currentLine.dataset.lineCount, 10)) + 1;
   if (pos < search.currentShabad.length - 1) {
-    highlightLine(search.currentShabad[pos + 1]);
+    highlightLine(search.currentShabad[pos + 1], nextLineCount);
   }
   e.preventDefault();
 }
@@ -141,6 +140,7 @@ module.exports = {
   platformMethod,
   themeEditor,
   shortcutTray,
+  toolbar,
   'custom-theme': () => {
     themeEditor.init();
   },
diff --git a/www/js/search.js b/www/js/search.js
index 1479d89e9..c70cb62f1 100644
--- a/www/js/search.js
+++ b/www/js/search.js
@@ -663,6 +663,44 @@ module.exports = {
       });
   },
 
+  getLineId(rows) {
+    const baniLengthList = ['small', 'medium', 'large', 'extraLarge'];
+    const baniLength = store.getUserPref('slide-layout.sunder-gutka.bani-length');
+    const line = rows.find((row) => row.baniLength[baniLengthList[baniLength]]);
+    return line ? line.ID : null;
+  },
+
+  loadBani(BaniID) {
+    const $shabadList = this.$shabad || document.getElementById('shabad');
+    $shabadList.innerHTML = '';
+    currentShabad.splice(0, currentShabad.length);
+    banidb.loadBani(BaniID)
+      .then(rowsDb => {
+        const shabadID = rowsDb[0].Bani.Token;
+        const rows = rowsDb.map((rowDb) => {
+          let row = rowDb;
+          // when object from db is not a verse itself
+          if (rowDb.Verse) { row = rowDb.Verse; }
+          // when its a custom panktee (decorator, bani heading, etc)
+          if (rowDb.Custom) {
+            row = rowDb.Custom;
+            row.shabadID = rowDb.Bani.Token;
+          }
+
+          row.baniLength = {
+            small: rowDb.existsSGPC,
+            medium: rowDb.existsMedium,
+            large: rowDb.existsTaksal,
+            extraLarge: rowDb.existsBuddhaDal,
+          };
+
+          return row;
+        });
+        const lineID = this.getLineId(rows);
+        return this.printShabad(rows, shabadID, lineID);
+      });
+  },
+
   loadAng(PageNo, SourceID) {
     banidb.loadAng(PageNo, SourceID)
       .then(rows => this.printShabad(rows));
@@ -688,6 +726,7 @@ module.exports = {
       });
   },
 
+
   printShabad(rows, ShabadID, LineID) {
     const lineID = LineID || rows[0].ID;
     const shabadID = ShabadID || (rows[0].Shabads ? rows[0].Shabads[0].ShabadID : '');
@@ -702,22 +741,35 @@ module.exports = {
       }
     }
 
+    let lineCount = 0;
     rows.forEach((item) => {
+      lineCount += 1;
+
       if (parseInt(lineID, 10) === item.ID) {
         mainLine = item;
       }
+
+      const mainLineExists = !!document.querySelector('.main.seen_check');
+
+      let baniLengthClasses = 'noLength';
+      if (item.baniLength) {
+        baniLengthClasses = Object.keys(item.baniLength).filter((key) => item.baniLength[key]).join('.');
+      }
+
       const shabadLine = h(
-        'li',
-        {},
+        `li#li_${lineCount}.${baniLengthClasses}`,
+        {
+          'data-line-count': lineCount,
+        },
         h(
           `a#line${item.ID}.panktee${
-            parseInt(lineID, 10) === item.ID ? '.current.main.seen_check' : ''
+            (parseInt(lineID, 10) === item.ID) && !mainLineExists ? '.current.main.seen_check' : ''
           }`,
           {
             'data-line-id': item.ID,
             'data-main-letters': item.MainLetters,
             onclick: e => this.clickShabad(e, item.ShabadID || shabadID,
-                           item.ID, item, rows),
+                          item.ID, item, rows),
           },
           [
             h('i.fa.fa-fw.fa-check'),
diff --git a/www/js/settings.json b/www/js/settings.json
index 975205778..1d8456682 100644
--- a/www/js/settings.json
+++ b/www/js/settings.json
@@ -74,6 +74,18 @@
             "step": 1
           }
         }
+      },
+      "sunder-gutka": {
+        "title": "Sundar Gutka",
+        "type": "range",
+        "options": {
+          "bani-length": {
+            "title": "Bani Length",
+            "max": 4,
+            "min": 1,
+            "step": 1
+          }
+        }
       }
     }
   },
diff --git a/www/js/toolbar.js b/www/js/toolbar.js
new file mode 100644
index 000000000..57abd08ac
--- /dev/null
+++ b/www/js/toolbar.js
@@ -0,0 +1,130 @@
+const h = require('hyperscript');
+const banidb = require('./banidb');
+const { remote } = require('electron');
+const anvaad = require('anvaad-js');
+
+const analytics = remote.getGlobal('analytics');
+
+const toolbarItems = ['sunder-gutka'];
+const nitnemBanis = [2, 4, 6, 9, 10, 20, 21, 23];
+const popularBanis = [90, 30, 31, 22];
+
+const $toolbar = document.querySelector('#toolbar');
+const $baniList = document.querySelector('.bani-list');
+const $baniExtras = document.querySelector('.bani-extras');
+
+const blockList = (lang, id) => h(
+  'section.blocklist',
+  h(`ul#${id}.lang`),
+);
+
+const toggleOverlayUI = () => {
+  document.querySelectorAll('.base-ui').forEach((uiElement) => {
+    uiElement.classList.toggle('blur');
+  });
+  document.querySelectorAll('.overlay-ui').forEach((uiElement) => {
+    uiElement.classList.toggle('hidden');
+  });
+};
+
+const translitSwitch = h(
+  'div.translit-switch',
+  [
+    h('span', 'Abc'),
+    h('div.switch',
+      [
+        h('input#sg-translit-toggle',
+          {
+            name: 'hg-trasnlit-toggle',
+            type: 'checkbox',
+            onclick: () => {
+              $baniList.classList.toggle('translit');
+            },
+            value: 'sg-translit' }),
+        h('label',
+          {
+            htmlFor: 'sg-translit-toggle' })])]);
+
+const baniGroupFactory = (baniGroupName) => {
+  const baniGroupClass = baniGroupName.replace(/ /g, '-');
+  return h(
+    'div.bani-group-container',
+    h(`header.bani-group-heading.${baniGroupClass}-heading`, baniGroupName),
+    h(`div.bani-group.${baniGroupClass}`),
+  );
+};
+
+const extrasTileFactory = (tileType, row) => h(
+  `div.extras-tile.${tileType}`,
+  {
+    onclick: () => {
+      global.core.search.loadBani(row.ID);
+      toggleOverlayUI();
+      analytics.trackEvent('sunderGutkaBanis', tileType, row.Token);
+    },
+  },
+  h('div.gurmukhi', row.Gurmukhi),
+);
+
+const printBanis = (rows) => {
+  const banisListID = 'sunder-gutka-banis';
+  $baniList.appendChild(blockList('gurmukhi', banisListID));
+  const $sunderGutkaBanis = document.querySelector(`#${banisListID}`);
+  const $nitnemBanis = document.querySelector('.nitnem-banis');
+  const $popularBanis = document.querySelector('.popular-banis');
+
+  rows.forEach((row) => {
+    let baniTag = 'none';
+    if (nitnemBanis.includes(row.ID)) {
+      baniTag = 'nitnem';
+      $nitnemBanis.appendChild(extrasTileFactory('nitnem-bani', row));
+    }
+    if (popularBanis.includes(row.ID)) {
+      baniTag = 'popular';
+      $popularBanis.appendChild(extrasTileFactory('popular-bani', row));
+    }
+    const $bani = h(
+      'li.sunder-gutka-bani',
+      {
+        onclick: () => {
+          analytics.trackEvent('sunderGutkaBanis', row.Token);
+          global.core.search.loadBani(row.ID);
+          toggleOverlayUI();
+        },
+      },
+      h(`span.tag.tag-${baniTag}`),
+      h('span.gurmukhi.gurmukhi-bani', row.Gurmukhi),
+      h('span.translit-bani', anvaad.translit(row.Gurmukhi)),
+    );
+    $sunderGutkaBanis.appendChild($bani);
+  });
+};
+
+const toolbarItemFactory = toolbarItem => h(
+  `div.toolbar-item#tool-${toolbarItem}`,
+  {
+    onclick: toggleOverlayUI,
+  },
+);
+
+const closeOverlayUI = h(
+  'div.close-overlay-ui.overlay-ui.hidden',
+  {
+    onclick: toggleOverlayUI,
+  },
+  h('i.fa.fa-times'),
+);
+
+
+module.exports = {
+  init() {
+    toolbarItems.forEach((toolbarItem) => {
+      $toolbar.appendChild(toolbarItemFactory(toolbarItem));
+      $toolbar.appendChild(closeOverlayUI);
+      $baniList.querySelector('header').appendChild(translitSwitch);
+      $baniExtras.appendChild(baniGroupFactory('nitnem banis'));
+      $baniExtras.appendChild(baniGroupFactory('popular banis'));
+      banidb.loadBanis().then(rows => printBanis(rows));
+    });
+  },
+};
diff --git a/www/js/viewer.js b/www/js/viewer.js
index a8042219f..7535dfa93 100644
--- a/www/js/viewer.js
+++ b/www/js/viewer.js
@@ -215,6 +215,7 @@ const createCards = (rows, LineID) => {
   const cards = [];
   const lines = [];
   const shabad = {};
+  // empty the object from previous values
   Object.keys(rows).forEach((key) => {
     row = rows[key];
     lines.push(row.ID);
@@ -248,8 +249,8 @@ const createCards = (rows, LineID) => {
           h('h2.transliteration', row.Transliteration),
         ]));
     shabad[row.ID] = {
-      gurmukhi: row.Gurmukhi,
-      gurmukhiWithoutBisram: row.Gurmukhi,
+      gurmukhi: row.Gurmukhi || row.PunjabiUni,
+      gurmukhiWithoutBisram: row.Gurmukhi || row.PunjabiUni,
       larivaar: taggedGurmukhi.join('<wbr>'),
       translation: row.English,
       teeka: row.Punjabi,
@@ -269,7 +270,7 @@ const createDeck = (cards, curSlide, shabad, ShabadID) => {
   }
   // Wait a tiny bit for rendering to finish before scrolling to the slide
   setTimeout(() => smoothScroll(`#slide${curSlide}`), 100);
-  currentShabad = parseInt(ShabadID, 10);
+  currentShabad = parseInt(ShabadID, 10) || ShabadID;
   decks[ShabadID] = shabad;
   castShabadLine(curSlide);
 };
@@ -308,7 +309,7 @@ const smoothScroll = (pos = 0) => {
 };
 
 const showLine = (ShabadID, LineID, rows) => {
-  const newShabadID = parseInt(ShabadID, 10);
+  const newShabadID = parseInt(ShabadID, 10) || ShabadID;
   if (apv && infiniteScroll) {
     createAPVContainer();
     if (!apvCur.ShabadID || apvCur.ShabadID !== ShabadID) {
@@ -326,7 +327,7 @@ const showLine = (ShabadID, LineID, rows) => {
       currentShabad = newShabadID;
     }
     [...$shabadDeck.querySelectorAll('.slide')].forEach(el => el.classList.remove('active'));
-    const line = document.getElementById(`slide${LineID}`);
+    const line = document.querySelector(`.deck.active #slide${LineID}`);
     line.classList.add('active');
     smoothScroll(line);
     castShabadLine(LineID);
diff --git a/www/src/scss/_header.scss b/www/src/scss/_header.scss
index 833df4c21..10f5c2498 100644
--- a/www/src/scss/_header.scss
+++ b/www/src/scss/_header.scss
@@ -161,7 +161,7 @@
 }
 
 .presenter-view.scale-viewer .nav-header-tab {
-  @media screen and (min-width: 1040px) {
+  @media screen and (min-width: 1140px) {
     font-size: inherit;
 
     &:hover {
diff --git a/www/src/scss/_notifications.scss b/www/src/scss/_notifications.scss
index 8fda668bb..a6fdedf45 100644
--- a/www/src/scss/_notifications.scss
+++ b/www/src/scss/_notifications.scss
@@ -1,3 +1,7 @@
+.desktop .tingle-modal {
+  z-index: 1400;
+}
+
 .notifications-modal {
   .tingle-modal-box__content {
     color: #000;
diff --git a/www/src/scss/_theme-a-new-day.scss b/www/src/scss/_theme-a-new-day.scss
index 3980a6df9..8aa80b8dc 100644
--- a/www/src/scss/_theme-a-new-day.scss
+++ b/www/src/scss/_theme-a-new-day.scss
@@ -94,6 +94,10 @@ $base-text-inactive: rgba(78, 78, 78, 0.5);
     color: $base-text;
   }
 
+  #toolbar {
+    background-color: $nav-bg;
+  }
+
   .nav-page {
     background-color: $nav-bg;
 
diff --git a/www/src/scss/_theme-baagi-blue.scss b/www/src/scss/_theme-baagi-blue.scss
index 38ebb3135..a71fad272 100644
--- a/www/src/scss/_theme-baagi-blue.scss
+++ b/www/src/scss/_theme-baagi-blue.scss
@@ -105,6 +105,10 @@ $highlight-text: #cfd8dc;
     color: $text-base;
   }
 
+  #toolbar {
+    background-color: $bg-alt;
+  }
+
   .nav-page,
   .takeover-page {
     background: $bg-alt;
diff --git a/www/src/scss/_theme-black-blue.scss b/www/src/scss/_theme-black-blue.scss
index 246d5f749..298e4da34 100644
--- a/www/src/scss/_theme-black-blue.scss
+++ b/www/src/scss/_theme-black-blue.scss
@@ -105,6 +105,10 @@ $highlight-text: #cfd8dc;
     color: $text-base;
   }
 
+  #toolbar {
+    background-color: $bg-alt;
+  }
+
   .nav-page,
   .takeover-page {
     background: $bg-alt;
diff --git a/www/src/scss/_theme-blue-darbar.scss b/www/src/scss/_theme-blue-darbar.scss
index 2334fba6e..9c09a4405 100644
--- a/www/src/scss/_theme-blue-darbar.scss
+++ b/www/src/scss/_theme-blue-darbar.scss
@@ -105,6 +105,10 @@ $highlight-text: #cfd8dc;
     color: $text-base;
   }
 
+  #toolbar {
+    background-color: $bg-alt;
+  }
+
   .nav-page,
   .takeover-page {
     background: $bg-alt;
diff --git a/www/src/scss/_theme-dark.scss b/www/src/scss/_theme-dark.scss
index e440f141c..b26244636 100644
--- a/www/src/scss/_theme-dark.scss
+++ b/www/src/scss/_theme-dark.scss
@@ -108,6 +108,10 @@ $highlight-text: #cfd8dc;
     color: $text-base;
   }
 
+  #toolbar {
+    background: $bg-alt;
+  }
+
   .nav-page,
   .takeover-page {
     background: $bg-alt;
diff --git a/www/src/scss/_theme-floral.scss b/www/src/scss/_theme-floral.scss
index 54261b7a5..a1747ff9c 100644
--- a/www/src/scss/_theme-floral.scss
+++ b/www/src/scss/_theme-floral.scss
@@ -95,6 +95,10 @@ $base-text-inactive: rgba(78, 78, 78, 0.5);
     color: $base-text;
   }
 
+  #toolbar {
+    background-color: $nav-bg;
+  }
+
   .nav-page {
     background-color: $nav-bg;
 
diff --git a/www/src/scss/_theme-high-contrast.scss b/www/src/scss/_theme-high-contrast.scss
index b92049ff7..ecd0bb8eb 100644
--- a/www/src/scss/_theme-high-contrast.scss
+++ b/www/src/scss/_theme-high-contrast.scss
@@ -117,6 +117,10 @@ $highlight-text: #cfd8dc;
     color: $text-base;
   }
 
+  #toolbar {
+    background-color: $bg-alt;
+  }
+
   .nav-page,
   .takeover-page {
     background: $bg-alt;
diff --git a/www/src/scss/_theme-khalsa-gold.scss b/www/src/scss/_theme-khalsa-gold.scss
index 4413bc28a..a42a1eda5 100644
--- a/www/src/scss/_theme-khalsa-gold.scss
+++ b/www/src/scss/_theme-khalsa-gold.scss
@@ -94,6 +94,10 @@ $base-text-inactive: rgba(78, 78, 78, 0.5);
     color: $base-text;
   }
 
+  #toolbar {
+    background-color: $nav-bg;
+  }
+
   .nav-page {
     background-color: $nav-bg;
 
diff --git a/www/src/scss/_theme-khalsa-rush.scss b/www/src/scss/_theme-khalsa-rush.scss
index 2539ca349..f96184322 100644
--- a/www/src/scss/_theme-khalsa-rush.scss
+++ b/www/src/scss/_theme-khalsa-rush.scss
@@ -90,6 +90,10 @@ $base-text-inactive: rgba(78, 78, 78, 0.5);
     color: $base-text;
   }
 
+  #toolbar {
+    background-color: $nav-bg;
+  }
+
   .nav-page {
     background-color: $nav-bg;
 
diff --git a/www/src/scss/_theme-light.scss b/www/src/scss/_theme-light.scss
index baced1d90..51fb2a1e4 100644
--- a/www/src/scss/_theme-light.scss
+++ b/www/src/scss/_theme-light.scss
@@ -89,6 +89,11 @@ $base-text-inactive: rgba(78, 78, 78, 0.5);
     color: $base-text;
   }
 
+  #toolbar,
+  .bani-list {
+    background-color: $nav-bg;
+  }
+
   .nav-page {
     background-color: $nav-bg;
 
diff --git a/www/src/scss/_theme-moody-blue.scss b/www/src/scss/_theme-moody-blue.scss
index e477a68e1..50d65b97a 100644
--- a/www/src/scss/_theme-moody-blue.scss
+++ b/www/src/scss/_theme-moody-blue.scss
@@ -105,6 +105,10 @@ $highlight-text: #cfd8dc;
     color: $text-base;
   }
 
+  #toolbar {
+    background-color: $bg-alt;
+  }
+
   .nav-page,
   .takeover-page {
     background: $bg-alt;
diff --git a/www/src/scss/styles.scss b/www/src/scss/styles.scss
index 7296f4d4d..2d7abec96 100644
--- a/www/src/scss/styles.scss
+++ b/www/src/scss/styles.scss
@@ -1,6 +1,12 @@
 $presenter-pane-gap: 25px;
 $title-bar-offset: 25px;
 $keyboard-height:128px;
+$toolbar-offset: 75px;
+$toolbar-small-offset: 50px;
+$toolbar-width-offset: $toolbar-offset/2;
+$bani-list-width: 300px;
+$tag-nitnem-color: #5488d6;
+$tag-popular-color: #ce744e;
 
 @mixin calculateTop ($row-num, $is-windows:0, $keyboard-offset:0) {
   $screen-offset: 50 * $row-num;
@@ -19,6 +25,14 @@ $keyboard-height:128px;
   }
 }
 
+@mixin calculateDimensions () {
+  height: calc(50% - calc(#{$presenter-pane-gap} * 1.5));
+
+  $presenter-panes-container: calc(50% - #{$toolbar-width-offset});
+
+  width: calc(#{$presenter-panes-container} - calc(#{$presenter-pane-gap} * 1.5));
+}
+
 @import
   "controller.scss",
   "markdown",
@@ -50,8 +64,241 @@ a {
   display: none;
 }
 
+.blur {
+  filter: blur(20px);
+}
+
+.fullscreen-fixed {
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+
 #app-frame {
+  @extend .fullscreen-fixed;
+
+  z-index: 1100;
+}
+
+.focus-overlay {
+  @extend .fullscreen-fixed;
+
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 1200;
+
+  &.hidden {
+    width: 0;
+  }
+}
+
+.small,
+.medium,
+.large,
+.extraLarge {
+  display: none;
+}
+
+.bani-length-4 .extraLarge { display: block; }
+.bani-length-3 .large { display: block; }
+.bani-length-2 .medium { display: block; }
+.bani-length-1 .small { display: block; }
+
+#toolbar {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
   height: 100%;
+  left: -$toolbar-small-offset;
+  padding-top: 10px;
+  position: absolute;
+  top: 0;
+  width: $toolbar-small-offset;
+  z-index: 1300;
+
+  .toolbar-item {
+    background-position: center center;
+    background-size: cover;
+    border-radius: 5px;
+    cursor: pointer;
+    height: 40px;
+    transition: 0.5s all ease;
+    width: 40px;
+
+    &:hover {
+      box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4);
+      transform: translateY(-2px);
+    }
+
+    &:active {
+      transform: translateY(1px);
+    }
+  }
+
+  .close-overlay-ui {
+    border: 2px solid white;
+    border-radius: 50%;
+    color: white;
+    cursor: pointer;
+    height: 40px;
+    line-height: 35px;
+    position: fixed;
+    right: $presenter-pane-gap;
+    text-align: center;
+    top: $presenter-pane-gap;
+    width: 40px;
+
+    i {
+      transition: 0.3s all ease;
+    }
+
+    &:hover i {
+      transform: scale(1.3);
+    }
+  }
+
+  .bani-list {
+    bottom: 0;
+    height: 300px;
+    overflow: hidden;
+    position: fixed;
+    right: 0;
+    width: 500px;
+    word-wrap: break-word;
+
+    .sunder-gutka-bani {
+      cursor: pointer;
+      padding: 0.3rem 1rem;
+    }
+
+    header,
+    .translit-switch {
+      align-items: center;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .translit-switch { display: none; }
+
+    .translit-bani {
+      display: none;
+      text-transform: capitalize;
+    }
+
+    &.translit {
+      .translit-bani { display: inline; }
+      .gurmukhi-bani { display: none; }
+    }
+
+    ul {
+      padding-bottom: 40px;
+    }
+
+    li .tag {
+      border-radius: 2px;
+      display: inline-block;
+      height: 10px;
+      margin: 0 5px;
+      width: 10px;
+
+      &.tag-nitnem {
+        background-color: $tag-nitnem-color;
+      }
+
+      &.tag-popular {
+        background-color: $tag-popular-color;
+      }
+    }
+
+    .blocklist {
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    header {
+      padding: 0.3rem 1rem;
+    }
+  }
+
+  .bani-extras {
+    bottom: 325px;
+    position: fixed;
+    right: 250px;
+    width: $bani-list-width;
+
+    .bani-group {
+      display: grid;
+      grid-gap: 15px;
+      grid-template-columns: 1fr 1fr 1fr;
+      width: 100%;
+    }
+
+    .bani-group-heading {
+      color: white;
+      padding: 1rem 0;
+      text-transform: capitalize;
+    }
+
+    .extras-tile {
+      align-items: center;
+      border-radius: 3px;
+      color: white;
+      cursor: pointer;
+      display: flex;
+      height: 75px;
+      justify-content: center;
+      line-height: 1.5;
+      padding: 5px;
+      text-align: center;
+      transition: 0.3s all ease;
+      width: 125px;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+
+      &.nitnem-bani {
+        background-color: $tag-nitnem-color;
+      }
+
+      &.popular-bani {
+        background-color: $tag-popular-color;
+      }
+    }
+
+    &.hidden {
+      display: none;
+    }
+  }
+
+  #tool-sunder-gutka {
+    background-image: url('../../assets/img/icons/sunder_gutka.png');
+  }
+}
+
+.presenter-view #toolbar {
+  @extend .fullscreen-fixed;
+
+  padding-top: $presenter-pane-gap;
+  width: $toolbar-offset;
+
+  .toolbar-item {
+    height: 60px;
+    width: 60px;
+  }
+
+  .bani-list {
+    height: calc(100vh - #{$presenter-pane-gap * 2});
+    left: $toolbar-offset + $presenter-pane-gap;
+    top: $presenter-pane-gap;
+    width: $bani-list-width;
+  }
+
+  .bani-extras {
+    left: $toolbar-offset + $bani-list-width + ($presenter-pane-gap * 2);
+    top: $presenter-pane-gap;
+  }
 }
 
 #main-viewer,
@@ -84,6 +331,8 @@ body.show-overlay {
 
   &.minimized {
     height: 40px;
+
+    #toolbar { display: none; }
   }
 }
 
@@ -98,9 +347,9 @@ body.show-overlay {
 .controller.scale-viewer.presenter-view {
   #navigator {
     bottom: $presenter-pane-gap;
-    height: calc(50% - calc(#{$presenter-pane-gap} * 1.5));
     right: $presenter-pane-gap;
-    width: calc(50% - calc(#{$presenter-pane-gap} * 1.5));
+
+    @include calculateDimensions();
   }
 
   #header {
@@ -118,9 +367,9 @@ body.show-overlay {
   }
 
   .fixed-takeover-pages {
-    height: calc(50% - calc(#{$presenter-pane-gap} * 1.5));
     position: fixed;
-    width: calc(50% - calc(#{$presenter-pane-gap} * 1.5));
+
+    @include calculateDimensions();
   }
 
   #custom-slides-page {
@@ -142,13 +391,13 @@ body.show-overlay {
 
   .nav-page {
     display: block;
-    height: calc(50% - calc(#{$presenter-pane-gap} * 1.5));
     position: fixed;
     transition: 0.5s height ease;
-    width: calc(50% - calc(#{$presenter-pane-gap} * 1.5));
+
+    @include calculateDimensions();
 
     &:nth-child(1) {
-      left: $presenter-pane-gap;
+      left: $presenter-pane-gap + $toolbar-offset;
 
       @include calculateTop(0);
     }
@@ -162,7 +411,7 @@ body.show-overlay {
     }
 
     &:nth-child(3) {
-      left: $presenter-pane-gap;
+      left: $presenter-pane-gap + $toolbar-offset;
 
       @include calculateTop(1);
     }