diff --git a/nhentai/utils.py b/nhentai/utils.py
index 4af629d..ce7033c 100644
--- a/nhentai/utils.py
+++ b/nhentai/utils.py
@@ -94,7 +94,7 @@ def generate_html(output_dir='.', doujinshi_obj=None):
         with open(os.path.join(doujinshi_dir, 'metadata.json'), 'w') as f:
             json.dump(metadata, f, separators=','':')
     else:
-        metadata= {'Title': 'nHentai HTML Viewer'}
+        metadata = {'Title': 'nHentai HTML Viewer'}
 
     data = html.format(TITLE=metadata['Title'], IMAGES=image_html, SCRIPTS=js, STYLES=css)
     try:
@@ -117,10 +117,11 @@ def generate_main_html(output_dir='./'):
     Default output folder will be the CLI path.
     """
 
-    count = 0
     image_html = ''
     main = readfile('viewer/main.html')
     css = readfile('viewer/main.css')
+    js = readfile('viewer/main.js')
+
     element = '\n\
             <div class="gallery-favorite">\n\
                 <div class="gallery">\n\
@@ -133,18 +134,24 @@ def generate_main_html(output_dir='./'):
 
     os.chdir(output_dir)
     doujinshi_dirs = next(os.walk('.'))[1]
+    database = open('data.js', 'w')
+    database.write("var data = JSON.parse('[")
 
     for folder in doujinshi_dirs:
-
+        folder_json = ',"Folder":"'+folder+'"}'
         files = os.listdir(folder)
         files.sort()
 
         if 'index.html' in files:
-            count += 1
             logger.info('Add doujinshi \'{}\''.format(folder))
         else:
             continue
 
+        database.write(open(output_dir + folder + '/' + files[-1], 'r').read()[:-2]+folder_json)
+        if folder != doujinshi_dirs[-1]:
+            database.write(",'+\n'")
+        else:
+            database.write("]')")
         image = files[0]  # 001.jpg or 001.png
         if folder is not None:
             title = folder.replace('_', ' ')
@@ -153,11 +160,12 @@ def generate_main_html(output_dir='./'):
 
         image_html += element.format(FOLDER=folder, IMAGE=image, TITLE=title)
 
+    database.close()
     if image_html == '':
         logger.warning('None index.html found, --gen-main paused.')
         return
     try:
-        data = main.format(STYLES=css, COUNT=count, PICTURE=image_html)
+        data = main.format(STYLES=css, SCRIPTS=js, PICTURE=image_html)
         if sys.version_info < (3, 0):
             with open('./main.html', 'w') as f:
                 f.write(data)
diff --git a/nhentai/viewer/main.css b/nhentai/viewer/main.css
index 60494e3..dc63203 100644
--- a/nhentai/viewer/main.css
+++ b/nhentai/viewer/main.css
@@ -13,7 +13,7 @@ body {
 
 h1 {
     font-size: 2em;
-    margin: .67em 0
+    margin: .67em 0;
 }
 
 a {
@@ -130,14 +130,14 @@ blockquote {
 .container {
     display: block;
     clear: both;
-    margin-left: auto;
+    margin-left: 200px;
     margin-right: auto;
     margin-bottom: 10px;
     margin-top: 10px;
     padding: 10px;
     border-radius: 9px;
     background-color: #ecf0f1;
-    width: 100%;
+    width: 100% - 200px;
     max-width: 1200px
 }
 
@@ -222,6 +222,35 @@ blockquote {
     width: 100%
 }
 
+.sidenav {
+  height: 100%;
+  width: 200px;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: #111;
+  overflow-x: hidden;
+  padding-top: 20px;
+}
+
+.sidenav a {
+  padding: 6px 6px 6px 32px;
+  text-decoration: none;
+  font-size: 25px;
+  color: #818181;
+  display: block;
+}
+
+.sidenav a:hover {
+  color: #f1f1f1;
+}
+
+@media screen and (max-height: 450px) {
+  .sidenav {padding-top: 15px;}
+  .sidenav a {font-size: 18px;}
+}
+
 html.theme-black,html.theme-black body {
     color: #d9d9d9;
     background-color: #0d0d0d
@@ -252,4 +281,4 @@ html.theme-black code {
     color: #ed2553;
     border: none;
     background-color: #292929
-}
\ No newline at end of file
+}
diff --git a/nhentai/viewer/main.html b/nhentai/viewer/main.html
index b966780..410f8a2 100644
--- a/nhentai/viewer/main.html
+++ b/nhentai/viewer/main.html
@@ -6,6 +6,7 @@
     <meta name="theme-color" content="#1f1f1f" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes, viewport-fit=cover" />
     <title>nHentai &raquo; Viewer</title>
+    <script type="text/javascript" src="data.js"></script>
         <!-- <link rel="stylesheet" href="./main.css"> -->
 <style>
 {STYLES}
@@ -14,9 +15,7 @@
 
 <body>
     <div id="content">
-
-        <h1>Main Folder({COUNT})</h1>
-
+        <nav class="sidenav">nHentai Viewer</nav>
         <div class="container" id="favcontainer">
 
             {PICTURE}
@@ -24,7 +23,9 @@
         </div> <!-- container -->
 
     </div>
-
+<script>
+    {SCRIPTS}
+</script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/nhentai/viewer/main.js b/nhentai/viewer/main.js
new file mode 100644
index 0000000..e69de29