diff --git a/README.md b/README.md
index cecaa8f..46380a8 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,3 @@
 # NUSH Flipbook
 
 NUSH Flipbook displays PDF Yearbooks interactively.
- 
diff --git a/files/assets/css/main.css b/files/assets/css/main.css
new file mode 100644
index 0000000..9182b9d
--- /dev/null
+++ b/files/assets/css/main.css
@@ -0,0 +1,37 @@
+.main {
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  width: 100vw;
+  height: 100vh;
+}
+
+.navbar {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  background-color: black;
+}
+
+.nav-link {
+  color: white;
+  padding: 8px;
+  text-decoration: none;
+  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+}
+
+.nav-link:visited {
+  color: white;
+}
+
+.nav-link:hover {
+  background-color: dimgrey;
+}
+
+.nav-link:active {
+  background-color: dimgrey;
+}
+
+.active-nav-link {
+  background-color: dimgrey;
+}
diff --git a/files/assets/js/index.js b/files/assets/js/index.js
index cf6c6b5..bb02dd2 100644
--- a/files/assets/js/index.js
+++ b/files/assets/js/index.js
@@ -1,39 +1,45 @@
-const validFlipbooks = ["2020", "2019", "2018"]
-let flipBook = location.search.length === 0 ? validFlipbooks[0] : location.search.substring(1);
+const validFlipbooks = ["2020", "2019", "2018"];
+let flipBook =
+  location.search.length === 0
+    ? validFlipbooks[0]
+    : location.search.substring(1);
 if (!validFlipbooks.includes(flipBook)) {
   flipBook = validFlipbooks[0];
 }
 
 document.title = `NUSH Year Book ${flipBook}`;
 
+// set the active navlink
+$(`#nav-${flipBook}`).addClass("active-nav-link");
+
 const options = {
   pdf: `./assets/Yearbook-${flipBook}.pdf`,
   controlsProps: {
-    downloadURL: `./assets/Yearbook-${flipBook}.pdf`
+    downloadURL: `./assets/Yearbook-${flipBook}.pdf`,
   },
   template: {
-    html: './assets/templates/default-book-view.html',
-    styles: [
-      './assets/templates/black-book-view.css'
-    ],
+    html: "./assets/templates/default-book-view.html",
+    styles: ["./assets/templates/black-book-view.css"],
     sounds: {
-      startFlip: './assets/sounds/start-flip.mp3',
-      endFlip: './assets/sounds/end-flip.mp3'
+      startFlip: "./assets/sounds/start-flip.mp3",
+      endFlip: "./assets/sounds/end-flip.mp3",
     },
-    links: [{
-      rel: 'stylesheet',
-      href: './assets/css/fontawesome.min.css'
-    },{
-      rel: 'stylesheet',
-      href: './assets/css/solid.min.css'
-    }],
-    script: './assets/templates/default-book-view.js',
-  }
+    links: [
+      {
+        rel: "stylesheet",
+        href: "./assets/css/fontawesome.min.css",
+      },
+      {
+        rel: "stylesheet",
+        href: "./assets/css/solid.min.css",
+      },
+    ],
+    script: "./assets/templates/default-book-view.js",
+  },
 };
 
 const book = $("#flipbook").FlipBook(options);
 
 var home = () => {
-  book.ctrl.goToPage(2)
-}
-
+  book.ctrl.goToPage(2);
+};
diff --git a/files/assets/js/remap.js b/files/assets/js/remap.js
index 8ad1e10..88b6d0f 100644
--- a/files/assets/js/remap.js
+++ b/files/assets/js/remap.js
@@ -1,3 +1,3 @@
 window.PDFJS_LOCALE = {
-  pdfJsWorker: './assets/js/pdf.worker.js',
+  pdfJsWorker: "./assets/js/pdf.worker.js",
 };
diff --git a/files/assets/js/removeSw.js b/files/assets/js/removeSw.js
index f411f75..63017dc 100644
--- a/files/assets/js/removeSw.js
+++ b/files/assets/js/removeSw.js
@@ -1,9 +1,9 @@
-if ('serviceWorker' in navigator) {
-  navigator.serviceWorker.getRegistrations().then(function(registrations) {
-    for(let registration of registrations) {
-        registration.unregister();
-    } 
-});
+if ("serviceWorker" in navigator) {
+  navigator.serviceWorker.getRegistrations().then(function (registrations) {
+    for (let registration of registrations) {
+      registration.unregister();
+    }
+  });
 } else {
   console.log("Service worker not available.");
 }
diff --git a/files/assets/templates/black-book-view.css b/files/assets/templates/black-book-view.css
index 7c65e79..393110a 100644
--- a/files/assets/templates/black-book-view.css
+++ b/files/assets/templates/black-book-view.css
@@ -11,7 +11,8 @@
 .flip-book .view .fnav {
 }
 
-.flip-book .view .prev, .flip-book .view .next {
+.flip-book .view .prev,
+.flip-book .view .next {
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
@@ -26,7 +27,6 @@
   right: 20px;
 }
 
-
 .flip-book .view .fnav a {
   font-size: 72pt;
   color: #666;
@@ -82,12 +82,12 @@
 }
 
 .flip-book .loading-progress .progress::after {
-  content: ' ';
+  content: " ";
   display: block;
   width: 100%;
   height: 100%;
   background-size: contain;
-  background-image: url('../images/light-loader.gif');
+  background-image: url("../images/light-loader.gif");
 }
 
 .flip-book .page-loading {
@@ -105,19 +105,19 @@
 }
 
 .flip-book .page-loading::after {
-  content: ' ';
+  content: " ";
   display: block;
   width: 100%;
   height: 100%;
   background-size: contain;
-  background-image: url('../images/light-loader.gif');
+  background-image: url("../images/light-loader.gif");
 }
 
 .flip-book .loading-progress .caption {
   background-color: #555;
   border: 1px solid #333;
   padding: 7px 10px;
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 10pt;
   border-radius: 5px;
   font-style: italic;
@@ -141,10 +141,8 @@
   transition: opacity 1s ease;
 }
 
-
-
 .ctrl {
-  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 .ctrl ul {
   margin: 0;
@@ -152,7 +150,7 @@
 }
 .ctrl .fnavbar {
   text-align: center;
-  background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
+  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
   background-repeat: repeat-x;
   padding: 3px;
   overflow: visible;
@@ -167,7 +165,7 @@
   display: inline-block;
   text-align: left;
 }
-.ctrl .fnavbar .fnav li{
+.ctrl .fnavbar .fnav li {
   font-size: 12pt;
   margin: 0;
   width: auto;
@@ -178,33 +176,34 @@
 .ctrl .fnavbar .fnav .hidden {
   display: none;
 }
-.ctrl .fnavbar .fnav .fnav-item>a {
+.ctrl .fnavbar .fnav .fnav-item > a {
   padding: 10px;
   display: inline-block;
   color: #ccc;
 }
-.ctrl .fnavbar .fnav>.active>a {
+.ctrl .fnavbar .fnav > .active > a {
   color: #fff;
 }
-.ctrl .fnavbar .fnav .fnav-item>a:hover {
+.ctrl .fnavbar .fnav .fnav-item > a:hover {
   color: #fff;
   cursor: pointer;
 }
-.ctrl .fnavbar .fnav .fnav-item>a:active {
+.ctrl .fnavbar .fnav .fnav-item > a:active {
   text-shadow: 0 0 2px #fff;
 }
-.ctrl .fnavbar .fnav>.disabled>a {
+.ctrl .fnavbar .fnav > .disabled > a {
   color: #888;
 }
-.ctrl .fnavbar .fnav>.disabled>a:hover {
+.ctrl .fnavbar .fnav > .disabled > a:hover {
   color: #888;
   cursor: not-allowed;
 }
-.ctrl .fnavbar .fnav>.active {
+.ctrl .fnavbar .fnav > .active {
   background: #222;
 }
 
-.ctrl .fnavbar .fnav .dropdown, .ctrl .fnavbar .fnav .dropup {
+.ctrl .fnavbar .fnav .dropdown,
+.ctrl .fnavbar .fnav .dropup {
   position: relative;
 }
 .ctrl .fnavbar .fnav .dropdown .menu {
@@ -276,7 +275,8 @@
   font-size: 0;
 }
 
-.ctrl .pages .number, .ctrl .pages .amount {
+.ctrl .pages .number,
+.ctrl .pages .amount {
   width: 50px;
   height: 20px;
   text-align: center;
@@ -322,7 +322,7 @@
 .flip-book .float-wnd .header {
   border-radius: 4px 4px 0 0;
   background-color: #3c3c3c;
-  background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
+  background-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);
   background-repeat: repeat-x;
   padding: 7px 10px;
   border: 1px solid #444;
@@ -330,6 +330,7 @@
   color: #fff;
   font-weight: bold;
   cursor: move;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .flip-book .float-wnd .header .close {
@@ -357,7 +358,7 @@
 /* toc */
 
 .ctrl .toc {
-  font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }
 
 .ctrl .toc a {
@@ -394,7 +395,6 @@
   color: #fff;
 }
 
-
 .ctrl .toc .toc-view {
   padding: 10px 0;
   max-height: 80vh;
@@ -425,7 +425,9 @@
   border-right: 2px solid #1a1a1a;
 }
 
-.ctrl .bookmarks .white-space, .ctrl .bookmarks .togle, .ctrl .bookmarks .togle i {
+.ctrl .bookmarks .white-space,
+.ctrl .bookmarks .togle,
+.ctrl .bookmarks .togle i {
   width: 18px;
   height: 18px;
 }
@@ -483,7 +485,7 @@
 }
 
 .ctrl .bookmarks .togle::before {
-  content: ' ';
+  content: " ";
   position: absolute;
   left: 50%;
   top: 50%;
@@ -508,7 +510,6 @@
   transition: transform 0.2s;
 }
 
-
 .ctrl .thumbnails .item a {
   color: #fff;
   font-size: 14px;
@@ -529,7 +530,7 @@
   position: relative;
 }
 .ctrl .thumbnails .loading::after {
-  content: ' ';
+  content: " ";
   position: absolute;
   width: 40px;
   height: 40px;
@@ -537,7 +538,7 @@
   top: 50%;
   transform: translate(-50%, -50%);
   background-size: contain;
-  background-image: url('../images/light-loader.gif');
+  background-image: url("../images/light-loader.gif");
 }
 .ctrl .thumbnails .item {
   display: inline-block;
@@ -555,7 +556,6 @@
   height: 20px;
 }
 
-
 .ctrl .search .result {
   padding: 7px 10px;
   cursor: pointer;
diff --git a/files/assets/templates/default-book-view.html b/files/assets/templates/default-book-view.html
index a01cd4d..526c828 100644
--- a/files/assets/templates/default-book-view.html
+++ b/files/assets/templates/default-book-view.html
@@ -77,7 +77,7 @@
             <a href="#"><div class="icon-caret"><span class="icon"><i class="fa fa-cog" title="<$tr>Settings</$tr>"></i> <i class="caret"></i></span></div></a>
             <ul class="menu hidden">
               <li  class="cmdSmartPan"><a href="#"><span class="icon"><i class="fa fa-eye"></i></span> <$tr>Smart pan</$tr></a></li>
-              <li  class="cmdSinglePage"><a href="#"><span class="icon"><i class="fa fa-file-o"></i></span> <$tr>Single page</$tr></a></li>
+              <li  class="cmdSinglePage"><a href="#"><span class="icon"><i class="fa fa-file"></i></span> <$tr>Single page</$tr></a></li>
               <li  class="cmdSounds"><a href="#"><span class="icon"><i class="fa fa-volume-up"></i></span> <$tr>Sounds</$tr></a></li>
               <li  class="cmdStats"><a href="#"><span class="icon"><i class="fa fa-line-chart"></i></span> <$tr>Stats</$tr></a></li>
               <li class="divider"></li>
diff --git a/files/assets/templates/default-book-view.js b/files/assets/templates/default-book-view.js
index c84c847..cdbfef4 100644
--- a/files/assets/templates/default-book-view.js
+++ b/files/assets/templates/default-book-view.js
@@ -1,97 +1,120 @@
 function init(container) {
   var instance;
-  if(window.jQuery) {
+  if (window.jQuery) {
     var $ = window.jQuery;
     instance = {
-      floatWnd: container.find('.float-wnd'),
+      floatWnd: container.find(".float-wnd"),
       binds: {
-        showDropMenu: function(e) {
+        showDropMenu: function (e) {
           e.preventDefault();
           var el = $(e.target);
-          while(!el.hasClass('toggle')) {
+          while (!el.hasClass("toggle")) {
             el = $(el[0].parentNode);
           }
-          var menu = el.find('.menu');
-          if(menu.hasClass('hidden')) {
-            container.find('.ctrl .fnavbar .menu').addClass('hidden');
-            menu.removeClass('hidden');
+          var menu = el.find(".menu");
+          if (menu.hasClass("hidden")) {
+            container.find(".ctrl .fnavbar .menu").addClass("hidden");
+            menu.removeClass("hidden");
             e.stopPropagation();
           }
         },
-        hideDropMenu: function() {
-          container.find('.ctrl .fnavbar .menu').addClass('hidden');
+        hideDropMenu: function () {
+          container.find(".ctrl .fnavbar .menu").addClass("hidden");
         },
-        pickFloatWnd: function(e) {
-          if(instance.pos) {
+        pickFloatWnd: function (e) {
+          if (instance.pos) {
             instance.binds.dropFloatWnd();
-          }
-          else {
+          } else {
             instance.pos = {
               x: e.pageX,
-              y: e.pageY
+              y: e.pageY,
             };
           }
         },
-        moveFloatWnd: function(e) {
-          if(instance.pos) {
+        moveFloatWnd: function (e) {
+          if (instance.pos) {
             var dv = {
-              x: e.pageX-instance.pos.x,
-              y: e.pageY-instance.pos.y
-            }, old = {
-              x: parseInt(instance.floatWnd.css('left')),
-              y: parseInt(instance.floatWnd.css('top'))
-            };
-            instance.floatWnd.css('left', old.x+dv.x+'px').css('top', old.y+dv.y+'px');
+                x: e.pageX - instance.pos.x,
+                y: e.pageY - instance.pos.y,
+              },
+              old = {
+                x: parseInt(instance.floatWnd.css("left")),
+                y: parseInt(instance.floatWnd.css("top")),
+              };
+            instance.floatWnd
+              .css("left", old.x + dv.x + "px")
+              .css("top", old.y + dv.y + "px");
             instance.pos = {
               x: e.pageX,
-              y: e.pageY
+              y: e.pageY,
             };
           }
         },
-        dropFloatWnd: function() {
+        dropFloatWnd: function () {
           delete instance.pos;
         },
-        jsCenter: function() {
-          var ns = container.find('.js-center');
-          for(var i=0; i<ns.length; ++i) {
-            var n = $(ns[i]), parentWidth = $(ns[i].parentNode).width(), width = n.width();
-            n.css('left', 0.5*(parentWidth-width)+'px');
+        jsCenter: function () {
+          var ns = container.find(".js-center");
+          for (var i = 0; i < ns.length; ++i) {
+            var n = $(ns[i]),
+              parentWidth = $(ns[i].parentNode).width(),
+              width = n.width();
+            n.css("left", 0.5 * (parentWidth - width) + "px");
           }
-        }
+        },
       },
-      appLoaded: function() {
+      appLoaded: function () {
         instance.binds.jsCenter();
       },
-      linkLoaded: function(link) {
+      linkLoaded: function (link) {
         instance.binds.jsCenter();
       },
-      dispose: function() {
-        container.find('.ctrl .fnavbar .fnav .toggle').off('click', instance.binds.showDropMenu);
-        $(container[0].ownerDocument).off('click', instance.binds.hideDropMenu);
+      dispose: function () {
+        container
+          .find(".ctrl .fnavbar .fnav .toggle")
+          .off("click", instance.binds.showDropMenu);
+        $(container[0].ownerDocument).off("click", instance.binds.hideDropMenu);
 
-        $(container[0].ownerDocument).off('mousemove', instance.binds.moveFloatWnd);
-        $(container[0].ownerDocument).off('mouseup', instance.binds.dropFloatWnd);
-        instance.floatWnd.find('.header').off('mousedown', instance.binds.pickFloatWnd);
+        $(container[0].ownerDocument).off(
+          "mousemove",
+          instance.binds.moveFloatWnd,
+        );
+        $(container[0].ownerDocument).off(
+          "mouseup",
+          instance.binds.dropFloatWnd,
+        );
+        instance.floatWnd
+          .find(".header")
+          .off("mousedown", instance.binds.pickFloatWnd);
 
-        $(container[0].ownerDocument.defaultView).off('resize', instance.binds.jsCenter);
-      }
+        $(container[0].ownerDocument.defaultView).off(
+          "resize",
+          instance.binds.jsCenter,
+        );
+      },
     };
-    container.find('.ctrl .fnavbar .fnav .toggle').on('click', instance.binds.showDropMenu);
-    $(container[0].ownerDocument).on('click', instance.binds.hideDropMenu);
+    container
+      .find(".ctrl .fnavbar .fnav .toggle")
+      .on("click", instance.binds.showDropMenu);
+    $(container[0].ownerDocument).on("click", instance.binds.hideDropMenu);
 
-    $(container[0].ownerDocument).on('mousemove', instance.binds.moveFloatWnd);
-    $(container[0].ownerDocument).on('mouseup', instance.binds.dropFloatWnd);
-    instance.floatWnd.find('.header').on('mousedown', instance.binds.pickFloatWnd);
+    $(container[0].ownerDocument).on("mousemove", instance.binds.moveFloatWnd);
+    $(container[0].ownerDocument).on("mouseup", instance.binds.dropFloatWnd);
+    instance.floatWnd
+      .find(".header")
+      .on("mousedown", instance.binds.pickFloatWnd);
 
-    $(container[0].ownerDocument.defaultView).on('resize', instance.binds.jsCenter);
+    $(container[0].ownerDocument.defaultView).on(
+      "resize",
+      instance.binds.jsCenter,
+    );
     instance.binds.jsCenter();
-  }
-  else {
+  } else {
     instance = {
-      dispose: function() {
-      }
+      dispose: function () {},
     };
-    console.error('jQuery is not found');
+    console.error("jQuery is not found");
   }
   return instance;
-} init
+}
+init;
diff --git a/files/index.html b/files/index.html
index 464a8c2..52fc406 100644
--- a/files/index.html
+++ b/files/index.html
@@ -1,20 +1,27 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>NUSH Year Book 2019</title>
-</head>
-<body>
+    <link rel="stylesheet" href="./assets/css/main.css" />
+  </head>
+  <body style="margin: 0">
+    <div class="main">
+      <nav class="navbar">
+        <a id="nav-2018" href="?2018" class="nav-link">2018</a>
+        <a id="nav-2019" href="?2019" class="nav-link">2019</a>
+        <a id="nav-2020" href="?2020" class="nav-link">2020</a>
+      </nav>
+      <div id="flipbook" style="flex-grow: 1"></div>
+    </div>
 
-<div id="flipbook" style="height: 95vh;margin: auto"></div>
-
-<script src="./assets/js/jquery.min.js"></script>
-<script src="./assets/js/three.min.js"></script>
-<script src="./assets/js/html2canvas.min.js"></script>
-<script src="./assets/js/remap.js"></script>
-<script src="./assets/js/pdf.min.js"></script>
-<script src="./assets/js/3dflipbook.min.js"></script>
-<script src="./assets/js/index.js"></script>
-<script src="./assets/js/removeSw.js"></script>
-</body>
+    <script src="./assets/js/jquery.min.js"></script>
+    <script src="./assets/js/three.min.js"></script>
+    <script src="./assets/js/html2canvas.min.js"></script>
+    <script src="./assets/js/remap.js"></script>
+    <script src="./assets/js/pdf.min.js"></script>
+    <script src="./assets/js/3dflipbook.min.js"></script>
+    <script src="./assets/js/index.js"></script>
+    <script src="./assets/js/removeSw.js"></script>
+  </body>
 </html>