diff --git a/app/templates/timeline.html b/app/templates/timeline.html
index ebb5cc0..9125b71 100644
--- a/app/templates/timeline.html
+++ b/app/templates/timeline.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+<!doctype html>{% load sass_tags static %}
+<html>
   <head>
 	<title>{{ settings.title }}</title>
     <meta charset="utf-8">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-touch-fullscreen" content="yes">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
-	<base target="_blank" >
+    <link href="{% sass_src 'css/style.scss' %}" rel="stylesheet" type="text/css">
 	<link rel="stylesheet" href="{% static 'timeline/css/timeline.css' %}">
 	<link rel="stylesheet" href="{% static 'timeline/css/fonts/font.default.css' %}">
 	<style>
@@ -19,18 +19,70 @@
 		.tl-timeline {
 		
 		}
+		.tl-attribution {
+			display: none !important;
+		}
+
+		.active {
+			display: block
+		}
+		#intro, #contact {
+			display: none;
+		}
 	</style>
-  </head>
-  <body>
+	</head>
+	<body>
+	<div id="intro">
+		{{ intro.body | safe }}
+	</div>
     <div id="timeline"></div>
+    <div id="contact">
+		<form method="post">
+			<input type="text" placeholder="Subject"/><br>
+			<textarea placeholder="Message"></textarea><br>
+			<input type="submit" value="Send message">
+		</form>
+		{{ contact.body | safe }}
+	</div>
 	<script src="{% static 'timeline/js/timeline.js' %}"></script>
     <script>
 		var data = {{ timeline_json | safe }};
-		var timeline = new TL.Timeline('timeline', data, {
-			hash_bookmark: true,
-			debug: false,
-			timenav_height: 100,
-		});
+		var timeline
+
+		function load_timeline() {
+			timeline = new TL.Timeline('timeline', data, {
+				hash_bookmark: true,
+				debug: false,
+				timenav_height: 100,
+			});
+		}
+		document.querySelector('#intro').addEventListener('click', event => {
+			document.querySelector('#intro').style.display = 'none'
+			document.querySelector('#contact').style.display = 'none'
+			document.querySelector('#timeline').style.display = 'block'
+			load_timeline()
+		})
+		if (document.location.hash.slice(1).length) {
+			load_timeline()
+		}
+		function hashchange(event) {
+			console.log('hc', document.location.hash.slice(1).length, document.location.hash.slice(1))
+			if (document.location.hash.slice(1) == 'contact') {
+				document.querySelector('#intro').style.display = 'none'
+				document.querySelector('#contact').style.display = 'block'
+				document.querySelector('#timeline').style.display = 'none'
+			} else if (document.location.hash.slice(1).length) {
+				document.querySelector('#intro').style.display = 'none'
+				document.querySelector('#contact').style.display = 'none'
+				document.querySelector('#timeline').style.display = 'block'
+			} else {
+				document.querySelector('#intro').style.display = 'block'
+				document.querySelector('#contact').style.display = 'none'
+				document.querySelector('#timeline').style.display = 'none'
+			}
+		}
+		window.addEventListener('hashchange', hashchange)
+		hashchange()
     </script>
   </body>
 </html>
