diff --git a/static/css/main.css b/static/css/main.css
index e0b1acf..85423cb 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -16,12 +16,13 @@ a {
   background: #a99f8a;
 }
 
+/*padding to be moved to the sub stuff */
 .main-column-left {
-  padding: 1.7em 0em;
+  /*padding: 1.7em 0em;*/
   float: left;
   width: 50%;
   background: #ea4f2b;
-  overflow-y: scroll;
+  /*overflow-y: scroll;*/
   height: 100vh;
 }
 
@@ -101,27 +102,60 @@ span.librarian-names:hover, span.file-names:hover {
   cursor: pointer;
 }
 
+/**********************************/
+/* container for names and files */
+/********************************/
+
+  #nav-container {
+    /*width: 50%;*/
+display: grid;
+grid-template-columns: 1fr;
+grid-template-rows: 25% 75%;
+grid-column-gap: 0px;
+grid-row-gap: 0px;
+height: inherit;
+
+}
+
+
+
+/***********************/
+/* Block list of names*/
+/*********************/
+
 #listofpeople{
+  /*border-bottom: black 1px solid;*/
+  padding: 1.7em 0em;
+  overflow-y: scroll;
   /* border: lime 1px solid; */
-  position: fixed;
-  width: 50%;
-  padding: 0em;
-  top: 25px;
-  left: 0;
-  z-index: 1;
+  /*position: fixed;*/
+  /*width: 50%;*/
+  /*padding: 0em;*/
+  /*top: 25px;*/
+  /*left: 0;*/
+  /*z-index: 1;*/
+}
+/***********************/
+/* Block list of files*/
+/*********************/
+
+#listoffiles{
+  overflow: hidden;
+
 }
 
 .file-names-container {
-  /* IE 9 */
-  -ms-transform: rotate(-90deg) translate(-78%, 0%);
-  /* Safari */
-  -webkit-transform: rotate(-90deg) translate(-78%, 0%);
-  /* Standard syntax */
+  /*overflow: scroll;*/
+   /*IE 9 */
+ -ms-transform: rotate(-90deg) translate(-78%, 0%);
+   /*Safari */
+ -webkit-transform: rotate(-90deg) translate(-78%, 0%);
+   /*Standard syntax */
   transform: rotate(-90deg) translate(-0%, 0%);
   transform-origin: top left;
-  /* border:blue 1px solid; */
+   /*border:blue 1px solid; */
   height: 50vw;
-  width: 40vw;
+  width: 34vw;
   overflow-y: scroll;
   overflow-x: hidden;
   position: absolute;
@@ -130,6 +164,35 @@ span.librarian-names:hover, span.file-names:hover {
 
 }
 
+/**************/
+/* scROLLBARS*/
+/*************/
+
+
+/* The emerging W3C standard
+   that is currently Firefox-only */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: #8048b7 #ea4f2b;
+}
+
+/* Works on Chrome/Edge/Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+*::-webkit-scrollbar-track {
+  background: #ea4f2b;
+}
+*::-webkit-scrollbar-thumb {
+  background-color: #8048b7;
+  border-radius: 20px;
+  border: 3px solid #ea4f2b;
+}
+
+
+
+
+
 img.listed-images {
   width: 100%;
 }
diff --git a/templates/layout.html b/templates/layout.html
index 17461d8..3ac1808 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -12,6 +12,68 @@
      <script type="text/javascript">
     $(document).ready(function() {
 
+
+
+
+// // COOKIE
+// function setCookie(cname,cvalue,exdays) {
+//   var d = new Date();
+//   d.setTime(d.getTime() + (exdays*24*60*60*1000));
+//   var expires = "expires=" + d.toGMTString();
+//   document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+// }
+
+// function getCookie(cname) {
+//   var name = cname + "=";
+//   var decodedCookie = decodeURIComponent(document.cookie);
+//   var ca = decodedCookie.split(';');
+//   for(var i = 0; i < ca.length; i++) {
+//     var c = ca[i];
+//     while (c.charAt(0) == ' ') {
+//       c = c.substring(1);
+//     }
+//     if (c.indexOf(name) == 0) {
+//       return c.substring(name.length, c.length);
+//     }
+//   }
+//   return "";
+// }
+
+// function checkCookie() {
+//   var cookiecontent=getCookie("bundleselection");
+//   if (cookiecontent != "") {
+//     alert("your selection is " + cookiecontent);
+//   } else {
+//      alert("You haven't selected anything");
+//      if (cookiecontent != "" && cookiecontent != null) {
+//        setCookie("bundleselection", cookiecontent, 30);
+//      }
+//   }
+// }
+
+function setCookie(name,value,days) {
+    var expires = "";
+    if (days) {
+        var date = new Date();
+        date.setTime(date.getTime() + (days*24*60*60*1000));
+        expires = "; expires=" + date.toUTCString();
+    }
+    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+}
+function getCookie(name) {
+    var nameEQ = name + "=";
+    var ca = document.cookie.split(';');
+    for(var i=0;i < ca.length;i++) {
+        var c = ca[i];
+        while (c.charAt(0)==' ') c = c.substring(1,c.length);
+        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
+    }
+    return null;
+}
+
+
+
+
 ///////URLS/////////////
 
         // setting up variables that we will use for the url later
@@ -200,14 +262,23 @@ var flag = true;
 ///////////CHECKBOXES////////////////
 
       var listofselecteddocs = [];
+      var storedincookie = ["1","2","3"];
+
+      setCookie("cookiecontent",storedincookie,30); //set "user_email" cookie, expires in 30 days
+      var cookiecontent=getCookie("cookiecontent");//the list in the cookie
 
       $(document.body).on("click", "input[type='checkbox']", function() {
+
             var self=$(this);
             if(self.is(":checked")){
               theid = self.attr("id");
               alert("checkbox  id ="+theid +"is checked ");
               listofselecteddocs.push(theid);
-              alert(listofselecteddocs.length);
+              // push to cookie
+              $.cookie("cookiecontent", $.cookie('cookiecontent') + '&' + theid);
+              alert(cookiecontent);
+
+              // alert(listofselecteddocs.length);
             }else {
               theid = self.attr("id");
               alert("id = "+theid +"is Unchecked ");
@@ -220,6 +291,7 @@ var flag = true;
             });
 
 
+
 //THE SENDING OF THE LIST TO PYTHON ///////////////////
 
       $("#listoffiles").click(function(){
@@ -277,17 +349,61 @@ var flag = true;
     <div class="main">
       <div class="main-column-left">
 
+<div id="nav-container">
+<!-- UP-->
         <div id="listofpeople">
         {% for librarian in librarians %}
           <span class="librarian-names" id={{librarian}}>{{librarian}}</span>
         {% endfor %}
       </div>
+<!-- END UP -->
 
-<!-- submit data -->
+<!-- DOWN -->
+      <div id="listoffiles">
+        <div class="file-names-container">
+          <!--librarians-focused-->
+          {% for querylibrarian in urllibrarian %}
+            {% for file in filetoname_dict %}
+              {% for item in file['librarian'] %}
+                {% if item == querylibrarian and urlmethod == []%}
+                  {% set show_file = file['debrisname'] %}
+                  <span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
+                  {% elif item == querylibrarian %}
+                      {% for urlmeth in urlmethod %}
+                        {% if urlmeth.lower() == file['method'].lower() %}
+                          {% set show_file = file['debrisname'] %}
+                          <span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
+                        {% endif %}
+                      {% endfor %}
+                {% endif %}
+              {% endfor %}
+            {% endfor %}
+          {% endfor %}
+
+          <!--method-focused-->
+          {% for querymethod in urlmethod %}
+            {% for file in filetoname_dict %}
+              {% if querymethod.lower() == file['method'].lower() and urllibrarian==[] %}
+                {% set show_file = file['debrisname'] %}
+                <span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+        </div>
+      </div>
+<!-- END DOWN -->
+</div>
+
+
+
+<!-- submit data and buttons-->
       <button id="about">About</button>
       <a href="/test/" target="_blank"><button id="listoffiles">Print</button></a>
       <a href="/"><button id="reset">Reset</button></a>
       <button id="showall">Show All</button>
+
+
+<!-- ABOUT -->
       <div id="intro">
         <div id="closeintro">x</div>
         <h1>author</h1>
@@ -355,44 +471,16 @@ var flag = true;
 
         <p>Please consider our absent studio in these following sonic (add term when we have the sound files).</p>
       </div>
+<!--  -->
 
+<!-- HOW TO -->
       <div id="howto">
         <div id="closehowto">x</div>
         <h1>how to</h1>
         <p>this text will follow soon</p>
       </div>
+<!--  -->
 
-        <br>
-        <div class="file-names-container">
-          <!--librarians-focused-->
-          {% for querylibrarian in urllibrarian %}
-            {% for file in filetoname_dict %}
-              {% for item in file['librarian'] %}
-                {% if item == querylibrarian and urlmethod == []%}
-                  {% set show_file = file['debrisname'] %}
-                  <span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
-                  {% elif item == querylibrarian %}
-                      {% for urlmeth in urlmethod %}
-                        {% if urlmeth.lower() == file['method'].lower() %}
-                          {% set show_file = file['debrisname'] %}
-                          <span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
-                        {% endif %}
-                      {% endfor %}
-                {% endif %}
-              {% endfor %}
-            {% endfor %}
-          {% endfor %}
-
-          <!--method-focused-->
-          {% for querymethod in urlmethod %}
-            {% for file in filetoname_dict %}
-              {% if querymethod.lower() == file['method'].lower() and urllibrarian==[] %}
-                {% set show_file = file['debrisname'] %}
-                <span class="file-names" id="{{show_file}}">{{show_file}}</span><br>
-              {% endif %}
-            {% endfor %}
-          {% endfor %}
-        </div>
       </div>
 
       <div class="main-column-right">