diff --git a/dumpwiki.py b/dumpwiki.py
index 1f883ed..e57ad49 100644
--- a/dumpwiki.py
+++ b/dumpwiki.py
@@ -94,7 +94,7 @@ def rewriteimgs(html):
                 # get its filename
                 img_filename = images_info[img_page]['filename']
             except KeyError:
-                print(Colors.WARNING, f"{printout_dict['page']} is not is missing from the local downloaded images")
+                print(Colors.WARNING, f"{img_page} is not is missing from the local downloaded images")
                 print(Colors.GREEN, 'run python3 download_imgs.py to fix the issue', Colors.ENDC)
                 sys.exit()
             # same dir as HTML files: archive/
diff --git a/static/index.css b/static/index.css
index f3dc0b8..1fb3728 100644
--- a/static/index.css
+++ b/static/index.css
@@ -3,7 +3,7 @@ body {
     max-width: 100%;
     height:100%;
     display: inline-table;
-    font-family: Inria Sans;
+    font-family: Roboto Mono;
     bottom: 20px;
 
 }
@@ -62,16 +62,41 @@ display: inline-block;
     color: grey; 
 }
 
+.pagelink{
+  position: fixed;
+  display: inline-block;
+  left:0px;
+  width:20px;
+  padding:10px;
+  background-color: white;
+  z-index: 10;
+  font-size: 15px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: #371F10
+}
+
+.pagelink .pagename{
+  display: block;
+  position: absolute;
+  width:auto;
+  padding: 5px;
+  font-size: 10px;
+  background-color: white;
+  visibility: hidden;
+  font-size: 15px;
+}
+
+.pagelink:hover .pagename{
+  visibility: visible;
+}
 
 .tooltip {
   position: relative;
   display: inline-block;
   width: 70px;
-  /*font-family: helvetica;*/
-  font-size: 14px;
   margin: 16px;
   vertical-align: top;
-
 }
 
 .tooltip .tooltiptext {
@@ -142,7 +167,7 @@ ul#menu li{
 ul#menu{
     margin-left: 10px;
     margin-right: 10px;
-    top:40px;
+    top:0px;
     bottom: 10px;
     padding-left: 0px;
     border: none;
@@ -175,9 +200,16 @@ div#myBtnContainer{
     overflow-y: scroll;
     /*z-index: -1;*/
 
-    /*overflow-y: hidden;*/
+   /* overflow-y: hidden;*/
 }
 
+div#bigbtncontainer{
+  overflow-y: hidden;
+  -ms-overflow-style: none;  /* Internet Explorer 10+ */
+  scrollbar-width: thin;
+  /*overflow-y: scroll;*/
+  
+}
 /*div#myBtnContainer:hover{
   background-color: white;
   z-index: 1;
@@ -186,13 +218,13 @@ div#myBtnContainer{
 
 .filter {
     display: inline-block;
-    box-shadow: 8px 8px 8px #9D9C9C;
+    box-shadow: 8px 8px 8px #C4BCB9;
 }
 
 .show {
 display: inline-block;
-/*box-shadow: 8px 8px 8px #303E88*/;
-box-shadow: 10px 10px 20px #0BEFEB;
+/*box-shadow: 8px 8px 8px #303E88;*/
+box-shadow: 10px 10px 15px #0BEFEB;
 }
 
 /*.container {
@@ -207,16 +239,17 @@ margin-left: 40px;
 .btn {
   border: none;
   outline: none;
-  font-family: Inria Sans;
-  font-size: 20px;
+  font-family: Roboto Mono;
+  font-size: 18px;
   text-align: left;
   display: block;
   /*padding: 4px 6px;*/
   /*text-shadow: 2px 2px 2px #9D9C9C;*/
   /*background-color: blue;*/
   cursor: pointer;
-  margin: 4px 4px 2px 2px;
-  color: #0BEFEB;
+  margin: 8px 2px 8px 2px;
+  padding: 4px;
+  color: #371F10;
   background-color: transparent;
 }
 
diff --git a/static/title.css b/static/title.css
index c68f3fc..8141ab1 100644
--- a/static/title.css
+++ b/static/title.css
@@ -1,13 +1,13 @@
 body {
-    background-color: #aaa4a0;
-    font-family: Arial, Helvetica, sans-serif;
+    background-color: #F4EBE8;
+    font-family: Roboto Mono;
 }
 .grid-container {
   	display: grid;
   	grid-template-columns: repeat(4, 1fr);
   	grid-gap: 10px;
   	position: absolute;
-  	top: 60%;
+  	top: 15%;
 	width: 96%;
 	height: auto;
 	left:2%;
@@ -47,16 +47,18 @@ a:hover {
   	color: blue;
 }
 
+
 h1 {
 	position: fixed;
 	right:0%;
-	top:3%;
+	top:5%;
 	text-align: right;
-	background-color: grey;
+	background-color: #0BEFEB;
 	padding: 3px 30px 3px 10px;
 	z-index: 10;
 	color: black;
 	font-size: 28px;
+	opacity: 0.7;
 }
 
 h2{
@@ -64,58 +66,55 @@ h2{
 	right: 0%;
 	top: 15%;
 	text-align: left;
-	background-color: grey;
-	color: black;
+	background-color: #0BEFEB;
+	/*color: black;*/
 	padding: 3px 3px 3px 30px;
 	z-index: 10;
 	font-size: 20px;
+  	opacity: 0.7;
 }
 
-/*.indexlist {
-  position: absolute;
-  top:20%;
-}*/
-
 .viewnav {
 	position: fixed;
-	top:0%;
-	right:0%;
-	background-color: red ;
-	width: 40%;
+	top:30%;
+	right:5%;
+	background-color: transparent;
+	width: 10%;
 	z-index: 10;
 	opacity: 0.7;
 }
 
 .collapsible2 {
-  	background-color: #777;
-	color: white;
+  	background-color: transparent;
+	color: black;
 	cursor: pointer;
 	padding: 0px;
 	width: 100%;
-	height: px;
+	height: auto;
 	border: none;
-	text-align: left;
+	text-align: right;
 	outline: none;
 	font-size: 40px;
 	z-index: 10;
 	margin-top: 0px;
 }
 
-.active, .collapsible2:hover {
-  background-color: #555;
+.collapsible2:hover {
+  background-color: transparent;
+  color: blue;
 }
 
 .content2 {
-  position: relative;
-  padding: 0px 18px;
+  position: absolute;
   max-height: 0;
   overflow: hidden;
-  width: 50%;
-  transition: max-height 0.2s ease-out;
-  background-color: grey;
+  width: 100%;
+  transition: max-height 0.3s ease-out;
+  background-color: transparent;
   color: white;
   z-index: 10;
-  text-align: left;
+  text-align: center;
+  bottom: 50%;
 }
 
 
@@ -145,7 +144,7 @@ p {
   width: 110px;
   text-align: center;
   padding: 12px 0px;
-  background-color: grey;
+  background-color: transparent;
   cursor: pointer;
   font-size: 18px;
   margin-right: 5px;
@@ -167,20 +166,20 @@ p {
 	position: fixed;
 	top:5%;
 	left:0%;
-	background-color: ;
+	background-color: transparent;
 	width: 40%;
 	z-index: 10;
-	opacity: 0.7;
+	opacity: 1;
 }
 
 .collapsible {
-  background-color: #777;
-  color: white;
+  background-color: transparent;
+  color: black;
   cursor: pointer;
   padding: 18px;
   width: 10%;
   height: auto;
-  border: none;
+  border: solid 1px;
   text-align: right;
   outline: none;
   font-size: 15px;
@@ -189,7 +188,7 @@ p {
 }
 
 .active, .collapsible:hover {
-  background-color: #555;
+  background-color: transparent;
 }
 
 .content {
@@ -199,10 +198,12 @@ p {
   overflow: hidden;
   width: 90%;
   transition: max-height 0.2s ease-out;
-  background-color: grey;
+  background-color: #0BEFEB;
   color: white;
   z-index: 10;
   text-align: right;
+  opacity: 0.7;
+
 }
 
 a.content:link {
@@ -234,43 +235,95 @@ a.content:link {
 	display: none;
 }
 
-.indexlink {
+.orglink {
 	position: fixed;
 	bottom:0%;
-	right:3%;
+	left:18%;
 	background-color: white;
 	z-index: 10;
 	font-size: 30px;
 }
 
+.orglink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+  /* Position the tooltip */
+  position: absolute;
+  left: 50px;
+  z-index: 10;
+}
+
+.orglink:hover .htext {
+  visibility: visible;
+}
+
 .timelinelink {
 	position: fixed;
-	bottom:0%;
-	right:10%;
+	bottom: 0%;
+	left: 3%;
 	background-color: white;
 	z-index: 10;
 	font-size: 30px;
+	padding: 0px 5px 0px 5px; 
 }
 
-.orglink {
+.timelinelink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+  /* Position the tooltip */
+  position: absolute;
+  left: 50px;
+  z-index: 10;
+}
+
+.timelinelink:hover .htext {
+  visibility: visible;
+}
+
+.indexlink {
 	position: fixed;
 	bottom:0%;
-	left:10%;
+	right:3%;
 	background-color: white;
 	z-index: 10;
 	font-size: 30px;
 }
 
-.orglink:hover .hiddentext {
-	visibility: visible;
+.indexlink .htext {
+  visibility: hidden;
+  width: 120px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 6px;
+  padding: 5px 0;
+  font-size: 15px;
+
+  /* Position the tooltip */
+  position: absolute;
+  right: 50px;
+  z-index: 10;
 }
 
-.hiddentext {
-	visibility: hidden;
-	  width: 120px;
-	  background-color: black;
-	  color: #fff;
-	  text-align: center;
-	  padding: 5px 0;
-	  border-radius: 6px;
-}
\ No newline at end of file
+.indexlink:hover .htext {
+  visibility: visible;
+}
+
+
+/*.timelinelink:hover .htext {
+  visibility: visible;
+}*/
diff --git a/templates/index.html b/templates/index.html
index a74dbce..bb6a9ec 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -4,13 +4,17 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="{{ staticpath }}/static/archive.css"/>
     <link rel="stylesheet" href="{{ staticpath }}/static/index.css"/>
-    <link href='https://fonts.googleapis.com/css?family=Inria+Sans' rel='stylesheet' type='text/css'>
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
     <!-- <script type="text/javascript" src="{{ staticpath }}/static/index.js"></script> -->
     <title>{{ page.name }}</title>
 </head>
 <body>
+<!-- <div class="pagelink">[[Overview_main_page|&#8625;]]<span class="pagename">Main Page</span></div>
+<div class="pagelink">[[Dates_of_Events|&#9481;]]<span class="pagename">Timeline</span></div>
+<div class="pagelink">[[Organizations|&#9636;]]<span class="pagename">Organizations</span></div> -->
+<div class="bigbtncontainer">
   <div id="myBtnContainer">
-  <button class="btn active" onclick="filterSelection('All')">All</button>
+  <button class="btn active" onclick="filterSelection('All')">All Publications</button>
   <button class="btn" onclick="filterSelection('Arts and Culture')">Arts and Culture</button>
   <button class="btn" onclick="filterSelection('Civil Rights')">Civil Rights</button>
   <button class="btn" onclick="filterSelection('Clergy / Religion')">Clergy / Religion</button>
@@ -57,9 +61,10 @@
   <button class="btn" onclick="filterSelection('Song')">Song</button>
   <button class="btn" onclick="filterSelection('Statement')">Statement</button>
 </div>
-<ul id="menu">
+</div>
+<!-- <ul id="menu"> -->
     {{ body|safe }}
-</ul>
+<!-- </ul> -->
 
 </body>
 </html>
diff --git a/templates/title.html b/templates/title.html
index f47d886..f21a816 100644
--- a/templates/title.html
+++ b/templates/title.html
@@ -6,6 +6,7 @@
     <script type="text/javascript" src="{{ staticpath }}/static/archive.js"></script>
     <link rel="stylesheet" href="{{ staticpath }}/static/title.css" />
     <script type="text/javascript" src="{{ staticpath }}/static/title.js"></script>
+    <link href='https://fonts.googleapis.com/css?family=Roboto+Mono' rel='stylesheet' type='text/css'>
     <title>{{ page.name }}</title>
 </head>
 <body class="title">
@@ -21,9 +22,7 @@
     </div>
   </div> 
 <div>
-
-<span class="hiddentext">All Organizations</span>
-
+  
 	<div id="body">{{ body|safe }}</div>
   
 <script>