diff --git a/query2html.py b/query2html.py
index 8a81056..c288fb7 100644
--- a/query2html.py
+++ b/query2html.py
@@ -102,13 +102,20 @@ for answer in site.ask(query):
         # organize doc_imgs into a matrix (list of lists)
         # each sublist containing 4 items [[0,1,2,3][4,5,6,7],[8,9]]
         # for template
-        doc_imgs_matrix = [doc_imgs[i:i+4] for i in range(0, len(doc_imgs), 4)]
+        doc_imgs_matrix = [doc_imgs[i:i+100] for i in range(0, len(doc_imgs), 100)]
+
+        
+      
 
         # RENDER DOCUMENT
         # by passing all_document_parts html to document_template content
         document_html = document_template.render(
             title=printout_dict.get('Title'),
             date=printout_dict.get('Date'),
+            organization=printout_dict.get('Organization'),
+            creator=printout_dict.get('Creator'),
+            format=printout_dict.get('Format'),
+            topic=printout_dict.get('Topic'),
             imgsmatrix=doc_imgs_matrix,
             content=all_document_parts)  # render document template
         # print(document_html)
diff --git a/static/style.css b/static/style.css
index 662381e..62aea22 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,11 +1,196 @@
 
 
 body {
-  margin: 0;
   font-family: Arial, Helvetica, sans-serif;
   background-color: #aaa4a0;
 }
 
-div.row {display: inline; }
+/*div.row {display: inline; }
 div.column { display: inline; }
-div.column img{ width:24%; }
\ No newline at end of file
+div.column img{ width:24%; }*/
+
+.grid-container {
+  	display: grid;
+  	grid-template-columns: repeat(4, 1fr);
+  	grid-gap: 10px;
+  	position: absolute;
+  	top: 60%;
+	width: 96%;
+	height: auto;
+	left:2%;
+  	/*background-color: blue;*/
+  	text-align: : center;
+  	z-index: 5;
+
+}
+
+.grid-container > div {
+	position: relative;
+	/*background-color: green;*/
+	text-align: center;
+	/*padding-bottom: 1%;*/
+	z-index: 5;
+}
+
+img {
+	position: relative;
+	max-width: 100%;
+	max-height: 100%;
+
+	/*align-content: center;*/
+
+}
+
+/*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 {
+	
+	position: absolute;
+  	text-align: center;
+  	padding: 32px;
+  	top: 30%;
+  	right: 0%;
+  	z-index: 9;
+  	width: auto;
+  	height: auto;
+}
+
+p {
+	display: inline-block;
+	position: relative;
+}
+
+.btn {
+  border: none;
+  outline: none;
+  width: 110px;
+  text-align: center;
+  padding: 12px 0px;
+  background-color: grey;
+  cursor: pointer;
+  font-size: 18px;
+  margin-right: 5px;
+  z-index: 9;
+}
+
+.btn:hover {
+  background-color: black;
+  color: blue;
+}
+
+.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;
+}
diff --git a/templates/document.html b/templates/document.html
index bd3e46f..9785cb3 100644
--- a/templates/document.html
+++ b/templates/document.html
@@ -3,15 +3,62 @@
 <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="../static/style.css" />
+    <script type="text/javascript" src="../static/script.js"></script>
     <title>{{ title[0] }}</title>
 </head>
 <body>
-    <h1>{{ title[0] }}</h1>
-    <p><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></p>
+    <h1>{{ title[0] }} &#8629;</h1>
+    <h2><time datetime="{{date}}">{{ date.year }}.{{ date.month }}.{{ date.day }}</time></h2>
 
+<div class="metadata">
+<button class="collapsible cbtn">C</button>
+  <div class="content">
+<!-- metadata creator / format / topic  -->
+    <div class="metadata_creator">{{ creator }}</div>
+    <a class="metadata_links" href="allcreators.html">All Creators</a>
+  </div>
+<button class="collapsible fbtn">f</button>
+  <div class="content">    
+    <div class="metadata_format">{{ format }}</div>
+    <a class="metadata_links" href="allformats.html">All Formats</a>
+  </div>
+<button class="collapsible orgbtn">Org</button>
+  <div class="content">
+    <div class="metadata_organization">{{ organization }}</div>
+    <a class="metadata_links" href="allorganizations.html">All Organizations</a>
+  </div>
+<button class="collapsible tbtn">T</button>
+  <div class="content">    
+    <div class="metadata_topic">{{ topic }}</div>
+    <a class="metadata_links" href="alltopics.html">All Topics</a>
+  </div>
+</div>
+
+<!-- nav -->
+
+<!--     <div id="rightnav" class="rightnav">
+      <a href="index.html" id="titlenav">Title</a>
+    </div>
+
+    <div id="leftnav" class="leftnav">
+      <a href="timeline.html" id="datenav">Date</a>
+    </div> -->
+
+<!-- square -->
+
+<!--     <div class="square"></div> -->
+
+<!-- 2 btn grid switch for images -->
+
+    <div class="header" id="myHeader">
+    <p><button class="btn" onclick="myFunction()">100%</button></p>
+    <p><button class="btn" onclick="myFunction2()">overview</button></p>
+    </div>
+
+<!-- images -->
 
         {% for row in imgsmatrix %}
-            <div class="row">
+            <div class="grid-container" id="myDIV">
             {% for img in row %}
               <div class="column">
                 <img src="{{ img }}">
@@ -20,21 +67,21 @@
             </div>
         {% endfor %}
 
+<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>
-{#
-<div class="row">
-  <div class="column">
-    <img src="./images/VF383Hamok00.jpg" style="width:100%">
-  </div>
-  <div class="column">
-    <img src="./images/VF383Hamok01.jpg" style="width:100%">
-  </div>
-  <div class="column">
-    <img src="./images/VF383Hamok02.jpg" style="width:100%">
-  </div>
-  <div class="column">
-    <img src="./images/VF383Hamok03.jpg" style="width:100%">
-  </div>
-</div>
-#}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 8e45d6e..505e699 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>{{title}}</title>
+    <link rel="stylesheet" href="../static/style.css" />
 </head>
 <body>
 <h3>Resultsss from query:<br/><code>{{query}}</code></h3>