diff --git a/README.md b/README.md
index 7f997c1..a3d3bdc 100644
--- a/README.md
+++ b/README.md
@@ -41,7 +41,7 @@ create archive folder: `mkdir archive`
 
 run script outputting to archive folder and displaying the images from the wiki:
 
-`python dumpwiki.py --output archive --local`
+`python3 dumpwiki.py --output archive --local`
 
 
 ### Categories and Templates:
diff --git a/static/timeline.css b/static/timeline.css
new file mode 100644
index 0000000..db8c68d
--- /dev/null
+++ b/static/timeline.css
@@ -0,0 +1,3 @@
+body { background: red;
+       color: white;
+}
\ No newline at end of file
diff --git a/static/title.css b/static/title.css
index 868340b..0a7a6d1 100644
--- a/static/title.css
+++ b/static/title.css
@@ -1,67 +1,3 @@
-h1 {
-	position: fixed;
-	right:0%;
-	top:3%;
-	text-align: right;
-	background-color: grey;
-	padding: 3px 30px 3px 10px;
-	z-index: 10;
-	color: black;
-	font-size: 28px;
-}
-
-h2{
-	position: fixed;
-	right: 0%;
-	top: 15%;
-	text-align: left;
-	background-color: grey;
-	color: black;
-	padding: 3px 3px 3px 30px;
-	z-index: 10;
-	font-size: 20px;
-}
-
-.metadata{
-	position: fixed;
-	top:5%;
-	left:0%;
-	background-color: ;
-	width: 40%;
-	z-index: 10;
-	opacity: 0.7;
-}
-
-.collapsible {
-  background-color: #777;
-  color: white;
-  cursor: pointer;
-  padding: 18px;
-  width: 10%;
-  height: auto;
-  border: none;
-  text-align: right;
-  outline: none;
-  font-size: 15px;
-  z-index: 10;
-  margin-top: 10px;
-}
-
-.metadata_links {
-	display: block;
-	width: 100%;
-	position: relative;
-	right: 0%;
-	padding: 10px;
-	text-align: left;
-	/*background-color: blue;*/
-	font-size: 18px;
-}
-
-.fbtn {
-	font-style: italic;
-}
-
 
 .grid-container {
   	display: grid;
@@ -86,7 +22,7 @@ h2{
 	z-index: 5;
 }
 
-.image {
+a:image {
 	position: relative;
 	max-width: 100%;
 	max-height: 100%;
@@ -95,6 +31,53 @@ h2{
 
 }
 
+/*links*/
+
+a:link {
+  text-decoration: none;
+  color: black;
+}
+
+a:visited {
+  text-decoration: none;
+  color: blue;
+}
+
+a:hover {
+	text-decoration: none;
+  	color: blue;
+}
+
+h1 {
+	position: fixed;
+	right:0%;
+	top:3%;
+	text-align: right;
+	background-color: grey;
+	padding: 3px 30px 3px 10px;
+	z-index: 10;
+	color: black;
+	font-size: 28px;
+}
+
+h2{
+	position: fixed;
+	right: 0%;
+	top: 15%;
+	text-align: left;
+	background-color: grey;
+	color: black;
+	padding: 3px 3px 3px 30px;
+	z-index: 10;
+	font-size: 20px;
+}
+
+.indexlist {
+  position: absolute;
+  top:20%;
+}
+
+
 /* Grid buttons */
 
 .header {
@@ -135,4 +118,89 @@ p {
 .btn:active {
   background-color: black;
   color: white;
+}
+
+
+.metadata{
+	position: fixed;
+	top:5%;
+	left:0%;
+	background-color: ;
+	width: 40%;
+	z-index: 10;
+	opacity: 0.7;
+}
+
+.collapsible {
+  background-color: #777;
+  color: white;
+  cursor: pointer;
+  padding: 18px;
+  width: 10%;
+  height: auto;
+  border: none;
+  text-align: right;
+  outline: none;
+  font-size: 15px;
+  z-index: 10;
+  margin-top: 10px;
+}
+
+.active, .collapsible:hover {
+  background-color: #555;
+}
+
+.content {
+  position: relative;
+  padding: 0px 18px;
+  max-height: 0;
+  overflow: hidden;
+  width: 90%;
+  transition: max-height 0.2s ease-out;
+  background-color: grey;
+  color: white;
+  z-index: 10;
+  text-align: right;
+}
+
+.metadata_links {
+	display: block;
+	width: 100%;
+	position: relative;
+	right: 0%;
+	padding: 10px;
+	text-align: left;
+	/*background-color: blue;*/
+	font-size: 18px;
+}
+
+.metadata_organization {
+	font-size: 14px;
+}
+
+
+
+
+.fbtn {
+	font-style: italic;
+}
+
+.smw-template-furtherresults {
+	display: none;
+}
+
+.indexlink {
+	position: fixed;
+	bottom:0%;
+	right:10%;
+	background-color: white;
+	z-index: 10;
+}
+
+.timelinelink {
+	position: fixed;
+	bottom:0%;
+	right:5%;
+	background-color: white;
+	z-index: 10;
 }
\ No newline at end of file
diff --git a/static/title.js b/static/title.js
index d9ba108..c590e3a 100644
--- a/static/title.js
+++ b/static/title.js
@@ -1,19 +1,3 @@
-var coll = document.getElementsByClassName("collapsible");
-var i;
-
-for (i = 0; i < coll.length; i++) {
-  coll[i].addEventListener("click", function() {
-    this.classList.toggle("active");
-    var content = this.nextElementSibling;
-    if (content.style.maxHeight){
-      content.style.maxHeight = null;
-    } else {
-      content.style.maxHeight = content.scrollHeight + "px";
-    } 
-  });
-}
-
-
 // image grid
 
 function myFunction() {
diff --git a/templates/timeline.html b/templates/timeline.html
new file mode 100644
index 0000000..6e6f183
--- /dev/null
+++ b/templates/timeline.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
+    <link rel="stylesheet" href="{{ staticpath }}/static/timeline.css" />
+    <title>{{ page.name }}</title>
+</head>
+<body>
+    <h1>{{ page.name }}</h1>
+    <div id="body">{{ body|safe }}</div>
+
+</body>
+</html>
diff --git a/templates/title.html b/templates/title.html
index 4a1b6a1..58bcc93 100644
--- a/templates/title.html
+++ b/templates/title.html
@@ -18,6 +18,21 @@
     </div>
 
 	<div id="body">{{ body|safe }}</div>
+<script>
+var coll = document.getElementsByClassName("collapsible");
+var i;
 
+for (i = 0; i < coll.length; i++) {
+  coll[i].addEventListener("click", function() {
+    this.classList.toggle("active");
+    var content = this.nextElementSibling;
+    if (content.style.maxHeight){
+      content.style.maxHeight = null;
+    } else {
+      content.style.maxHeight = content.scrollHeight + "px";
+    } 
+  });
+}
+</script>
 </body>
 </html>