diff --git a/static/topicformat.css b/static/topicformat.css
new file mode 100644
index 0000000..a605bca
--- /dev/null
+++ b/static/topicformat.css
@@ -0,0 +1,317 @@
+body {
+    background-color: #fcf7e8;
+    padding-top: 120px;
+    padding-left: 120px;
+    padding-right: 120px
+}
+.grid-container {
+  	display: inline-grid;
+  	grid-template-columns: repeat(8, 1fr);
+  	grid-column-gap: 10px;
+    grid-auto-flow: dense;
+  	position: relative;
+  	top: 60%;
+	width: 96%;
+	height: auto;
+	left:2%;
+  	text-align: : center;
+  	z-index: 5;
+
+}
+
+.grid-container > div {
+	position: relative;
+	text-align: left;
+	z-index: 5;
+}
+
+
+.img {
+  display: inline-block;
+  border-style:  hidden  hidden solid hidden;
+  border-color: #5ce0db;
+  height: 500px;
+}
+
+.title {
+  display:block;
+  font-family: 'Work Sans', sans-serif;
+  font-size: large;
+  font-weight: 700;
+}
+
+.tooltiptext {
+  display:block;
+  font-weight: normal;
+}
+
+
+.metatext {
+  display: inline-block;
+  width: 300px;
+  border-style: hidden;
+}
+
+
+.thumbborder {
+	position: relative;
+	max-width: 100%;
+	max-height: 100%;
+
+}
+
+
+/*links*/
+
+a:link {
+  text-decoration: none;
+  color: black;
+}
+
+a:visited {
+  text-decoration: none;
+  color: black;
+}
+
+.metatext:hover a {
+  color: white;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+
+.metatext:hover  {
+  background-color: #5ce0db;
+  color: white;
+
+}
+
+h1 {
+	position: fixed;
+	right:0%;
+	top:3%;
+	text-align: right;
+	background-color: #5ce0db;
+	padding: 3px 30px 3px 10px;
+	z-index: 10;
+	color: white;
+	font-size: 32px;
+}
+
+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%;
+}*/
+
+.viewnav {
+	position: fixed;
+	top:0%;
+	right:0%;
+	background-color: red ;
+	width: 40%;
+	z-index: 10;
+	opacity: 0.7;
+}
+
+.collapsible2 {
+  	background-color: #777;
+	color: white;
+	cursor: pointer;
+	padding: 0px;
+	width: 100%;
+	height: px;
+	border: none;
+	text-align: left;
+	outline: none;
+	font-size: 40px;
+	z-index: 10;
+	margin-top: 0px;
+}
+
+.active, .collapsible2:hover {
+  background-color: #555;
+}
+
+.content2 {
+  position: relative;
+  padding: 0px 18px;
+  max-height: 0;
+  overflow: hidden;
+  width: 50%;
+  transition: max-height 0.2s ease-out;
+  background-color: grey;
+  color: white;
+  z-index: 10;
+  text-align: left;
+}
+
+
+/* Grid buttons */
+
+.header {
+
+	position: absolute;
+  	text-align: center;
+  	padding: 32px;
+  	top: 30%;
+  	right: 0%;
+  	z-index: 9;
+  	width: auto;
+  	height: auto;
+  	background-color: pink;
+}
+
+p {
+	display: 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;
+}
+
+a.content:link {
+	color:white;
+}
+
+.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:3%;
+	background-color: white;
+	z-index: 10;
+	font-size: 30px;
+}
+
+.timelinelink {
+	position: fixed;
+	bottom:0%;
+	right:10%;
+	background-color: white;
+	z-index: 10;
+	font-size: 30px;
+}
+
+.orglink {
+	position: fixed;
+	bottom:0%;
+	left:10%;
+	background-color: white;
+	z-index: 10;
+	font-size: 30px;
+}
+
+.orglink:hover .hiddentext {
+	visibility: visible;
+}
+
+.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
diff --git a/templates/format.html b/templates/format.html
index 77df8b6..0881b6e 100644
--- a/templates/format.html
+++ b/templates/format.html
@@ -4,8 +4,7 @@
     <meta charset="utf-8">
     <link rel="stylesheet" href="{{ staticpath }}//static/archive.css" />
     <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 rel="stylesheet" href="{{ staticpath }}//static/topicformat.css" />
     <title>{{ page.name }}</title>
 </head>
 <body class="title">
diff --git a/templates/topic.html b/templates/topic.html
new file mode 100644
index 0000000..0881b6e
--- /dev/null
+++ b/templates/topic.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="{{ staticpath }}//static/archive.css" />
+    <script type="text/javascript" src="{{ staticpath }}//static/archive.js"></script>
+    <link rel="stylesheet" href="{{ staticpath }}//static/topicformat.css" />
+    <title>{{ page.name }}</title>
+</head>
+<body class="title">
+
+    <h1>{{ page.name }}</h1>
+  <div id="body">{{ body|safe }}</div>
+
+</body>
+</html>