diff --git a/__pycache__/contextualise.cpython-35.pyc b/__pycache__/contextualise.cpython-35.pyc
index 6ea608f..6bc8282 100644
Binary files a/__pycache__/contextualise.cpython-35.pyc and b/__pycache__/contextualise.cpython-35.pyc differ
diff --git a/contextualise.py b/contextualise.py
index 36fd7ab..fb52315 100644
--- a/contextualise.py
+++ b/contextualise.py
@@ -107,7 +107,7 @@ def home():
     #add the very first time of connection to the interface
     # if veryfirstnow is None :
     session['veryfirstnow'] = datetime.now()
-    return render_template('home.html', wordlist_dict=wordlist_dict, index_dict=index_dict)
+    return render_template('home.html', wordlist_dict=wordlist_dict)
 def functionsession():
     return(session)
 
@@ -276,6 +276,12 @@ def get_file():
         tadam = '\n'.join(out)
 
 
+######################################################################################
+#INDEX PAGE
+######################################################################################
+@app.route("/index")
+def index():
+    return render_template('theindex.html', wordlist_dict=wordlist_dict, index_dict=index_dict)
 
 # have a message in file if no nav has been recorded so it's less dull than error page
     if tadam is None:
diff --git a/static/css/main.css b/static/css/main.css
new file mode 100644
index 0000000..4649567
--- /dev/null
+++ b/static/css/main.css
@@ -0,0 +1,191 @@
+@font-face {
+    font-family: 'whoismono';
+    src: url('whois-mono-webfont.woff2') format('woff2'),
+         url('whois-mono-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+
+}
+
+body{
+	background: #ffffff;
+	color:blue;
+	font-family: 'whoismono';
+	width: 100%;
+	top:0;
+	left: 0;
+  margin: 0;
+  padding: 0;
+}
+
+h1{
+	margin-top: 50px;
+}
+
+/********************************************************/
+/* TEXT */
+/********************************************************/
+
+a{
+	text-decoration: none;
+}
+
+a:visited {
+    color:purple;
+}
+
+a:hover{
+	background: pink;
+
+}
+
+
+ul{
+	list-style: none;
+}
+li a{
+	text-decoration: none;
+	color: #0000FF
+}
+
+li a:hover{
+	color: orange;
+}
+
+img{
+	max-width: 500px;
+	margin-bottom: 15px;
+	/* float: left; */
+}
+video{
+	max-width: 400px;
+}
+
+div{
+	margin:0 auto;
+	/* padding: 1em 2em 1em; */
+}
+
+/********************************************************/
+/* THE CLICKED WORDS DISPLAYED */
+/********************************************************/
+
+#thewordpath{
+	display: block;
+	/* background-color: yellow; */
+	position: fixed;
+	width: 100%;
+	top:0;
+	right: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
+	padding: 10px;
+	z-index: 2;
+	width: auto;
+	background-color: white;
+	/* border:1px blue solid; */
+/* -webkit-transform-origin: right top;
+	-webkit-transform: rotate(90deg);
+-moz-transform: rotate(90deg);
+-o-transform: rotate(90deg);
+-ms-transform: rotate(90deg);
+transform: rotate(90deg); */
+}
+.word{
+	color:silver;
+
+}
+
+/********************************************************/
+/* THE CONTENT IN TWO COLUMNS */
+/********************************************************/
+
+.description{
+	width: 80%;
+	/* border: 1px solid red; */
+}
+.text{
+	float: right;
+	width: 50%;
+	/* border:1px solid #444; */
+	/* position: relative; */
+ }
+
+.item{
+	/* position: relative; */
+	float: left;
+	width: 50%;
+	/* vertical-align: top; */
+	/* border:1px solid #444; */
+ }
+
+/* .text{
+	float: right;
+}
+.item{
+	float: left;
+}
+
+.column{
+  padding: 10px;
+	float: left;
+width: 40%;
+}
+.allcontent:after {
+  content: "";
+  display: table;
+  clear: both;
+} */
+
+/********************************************************/
+/* NAVIGATION AT THE BOTTOM OF DESCRIPTION*/
+/********************************************************/
+.index {
+	display: block;
+}
+
+nav.nav_bottom {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  height: auto;
+  z-index: 1000;
+  bottom: 0px;
+  text-transform: uppercase;
+  font-size: 15px;
+  line-height: 18px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  list-style-type: none;
+  overflow: hidden;
+}
+
+nav.nav_bottom div li {
+  margin-right: 2em;
+}
+
+nav.nav_bottom div li:first-child {
+  margin-right: 0;
+}
+
+div#bottom_descrip_left, div#bottom_descrip_right {
+
+}
+
+
+li.index {
+	float: left;
+}
+
+li.prev_item, li.next_item, li.no_here {
+	float: right;
+}
+
+/********************************************************/
+/* DIVERGE */
+/********************************************************/
+
+.diverge{
+	margin-left: 1em;
+}
diff --git a/templates/home.html b/templates/home.html
index 2d53cbd..7f1655d 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 {% block content %}
 <div class="home">
-  <h1>Welcome to the Pushing Scores archive</h1>
+
 			{% for word in wordlist_dict %}
 		       {% set address = "/diverge?search=" + word %}
 		       <a href={{address}}>
@@ -10,10 +10,3 @@
 			{% endfor %}
 </div>
 {% endblock content %}
-
-{% block index %}
-	{% for each in index_dict %}
-		{% set address = "/description?id=" + each %}
-		<a href={{address}}>{{index_dict[each]}}</a> |
-	{% endfor %}
-{% endblock index %}
diff --git a/templates/layout.html b/templates/layout.html
index 2e0814d..4353b55 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -18,6 +18,7 @@
             <h1 class="logo"><a href="{{ url_for('home') }}">P.u.s.h.i.n.g.S.c.o.r.e.s</a></h1>
             <strong><nav>
               <ul class="menu">
+                <li><a href="{{ url_for('index') }}">Index</a></li>
                 <li><a href="{{ url_for('about') }}">About</a></li>
                 <li><a href="{{ url_for('get_file') }}">Generate the score</a></li>
               </ul>
diff --git a/templates/theindex.html b/templates/theindex.html
new file mode 100644
index 0000000..8fcc389
--- /dev/null
+++ b/templates/theindex.html
@@ -0,0 +1,15 @@
+{% extends "layout.html" %}
+{% block content %}
+<div class="foldersindex">
+
+<h1>COUCOU BLABLA</h1>
+
+</div>
+
+{% endblock %}
+{% block index %}
+	{% for each in index_dict %}
+		{% set address = "/description?id=" + each %}
+		<a href={{address}}>{{index_dict[each]}}</a> |
+	{% endfor %}
+{% endblock index %}