diff --git a/static/css/style.css b/static/css/style.css
index e439db6..7d2a51f 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -46,7 +46,7 @@ font-style: normal;
 		 line-height: 1.63;
 	}
 /* 12 18 */ div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, 
-div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
+div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type  {
 		font-size: calc(12px + 6 * (100vw - 320px) / 1600);
 		line-height: 16px;
 	}
@@ -101,7 +101,7 @@ body, tbody tr th, .mw-parser-output ul, .mw-parser-output a, .artwork-intro,
 		font-size: 18px;
 	}
 div#footer-title-br p, div#footer-title-others p, div#footer-title-contact p, 
-div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item {
+div#footer-title-socials p, thead tr th, .artwork-nav-label, .label-item, .tns-item p:first-of-type {
 		font-size: 	font-size: 18px;
 	}
 div#navigation a, .title, .metadata-link, .metadata-link a, .metadata-link a span, 
@@ -206,7 +206,7 @@ img.artwork-mockuppage{
 	left: 0;
 }
 .soon-nofix {
-	margin: 80px 80px;
+	margin: 10vh 8vw 25vh;
 }
 @media screen and (min-width: 1920px) {
 	.soon-nofix + #footer {
@@ -842,6 +842,8 @@ div#home-top-div{
 	grid-row-end: 3;
 	align-self: end;
 	margin-bottom: 2vw;
+	max-width: 800px;
+	justify-self: center;
 }
 #home-top-div #wrapper-bt{
 	/* margin: 36px 26px 0px 0vw;  8vmin*/
@@ -861,7 +863,7 @@ div#home-top-div{
 	box-shadow: 1px 1px 5px 3px #00000024;
 	border-radius: 6px;
 }
- #wrapper-vid a {
+ #wrapper-vid p a {
  	text-align: center;
 	width: 100%;
 	display: inline-grid;
@@ -1040,6 +1042,7 @@ div#home-top-div{
 
 img.home-recent-imgs, img.browsethearchive-imgs, img.selfpublishedindex-imgs, img.zinesindex-imgs {
 	width: 100%;
+	max-height: 450px;
 }
 
 div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.selfpublishedindex-items {
@@ -1053,7 +1056,7 @@ div.home-recent-items, div.browsethearchive-items, div.zinesindex-items, div.sel
 	height: 100%;
 }
 
-div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a {
+div.home-recent-items a, div.browsethearchive-items a, div.zinesindex-items a, div.selfpublishedindex-items a, .artwork-relatedworks-tile a, .artwork-lists-title a {
 	/*	font-size: 18px;
 	line-height: 26px;
 	display: flex;
@@ -1410,8 +1413,11 @@ div.browsebycategory-categories:hover {
 	grid-template-columns: repeat(18, 1fr);
 	border-bottom: 3px solid #000;
 }
-
-.artwork-nav-label, .label-item {
+.artwork-nav-label{
+	width: 100%;
+	text-align: center;
+}
+.artwork-nav-label, .label-item, .tns-item p:first-of-type {
   margin: 25px 0 12px 1px;
   font-family: Roboto Condensed;
 /*  font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (1600 - 320)));
@@ -1429,7 +1435,6 @@ div.browsebycategory-categories:hover {
 	grid-row-start: 1;
 	grid-row-end: 1;
 }
-
 .artwork-nav-label-about:before {
 	content: "";
 	position: absolute;
@@ -1441,7 +1446,7 @@ div.browsebycategory-categories:hover {
 	height: 45px;
 	max-width: 2px;
 	margin-top: 410px;
-	left: 21.5%;
+	left: 24.5%;
 }
 .artwork-nav-label-record:before {
 	content: "";
@@ -1454,7 +1459,7 @@ div.browsebycategory-categories:hover {
 	height: 45px;
 	max-width: 2px;
 	margin-top: 410px;
-	left: 44%;
+	left: 46.5%;
 }
 .artwork-nav-label-record {
 	grid-column-start: 8;
@@ -1537,12 +1542,11 @@ div.browsebycategory-categories:hover {
 	grid-row-start: 2;
 	grid-row-end: 2;
 }
-.artwork-rightcolumn-top{
-	border-bottom: 3px solid #000;
-}
+
 .artwork-rightcolumn-top, .artwork-rightcolumn-bottom {
-	margin: 0 !important;
+	margin: 0 0 0 0 !important;
 	display: grid;
+	padding: 0 0 20px 0;
 }
 
 .artwork-rightcolumn-top-contributors {
@@ -1570,7 +1574,6 @@ div.browsebycategory-categories:hover {
 	grid-column-end: 18;
 	grid-row-start: 3;
 	grid-row-end: 3;	
-	border-top: 0.5px solid var(--brown-grey);;
 }
 .artwork-rightcolumn-top-date + div.artwork-rightcolumn-description  {
 	grid-column-start: 9;
@@ -1588,8 +1591,16 @@ div.browsebycategory-categories:hover {
 	grid-column-end: 18;
 	grid-row-start: 5;
 	grid-row-end: 5;	
-	border-top: 0.5px solid var(--brown-grey);;
 }
+.exh + .artwork-rightcolumn-exhibition {
+	padding: 20px 0;
+	border-bottom: 0.5px solid var(--brown-grey);
+}
+.artwork-rightcolumn-bottom:nth-of-type(2) {
+	padding: 20px 0 0 0;
+	border-top: 0.5px solid var(--brown-grey);
+}
+
 .artwork-rightcolumn-description + .artwork-rightcolumn-exhibition {
 	grid-column-start: 9;
 	grid-column-end: 18;
@@ -1611,6 +1622,12 @@ div.browsebycategory-categories:hover {
 	grid-row-end: 1;
 	margin: 1em 0 0.5em;
 }
+.des-exh-section .des, .des-exh-section .exh {
+ border-top: 3px solid #000;
+ margin: 0px;
+ padding: 20px 0;
+}
+
 .text-description {
 	grid-column-start: 1;
 	grid-column-end: 8;
@@ -1698,8 +1715,12 @@ div.browsebycategory-categories:hover {
   font-style: normal;
   letter-spacing: 0.9px;
   margin-top: 0px;
+}
+
+.artwork-rightcolumn-top-date p.label-item > .label-item-date-artwork {
   margin-bottom: 30px; 	
 }
+
 .metadata-link:hover, .metadata-link a:hover,  .metadata-link a span:hover, .metadata-link p  {
   color: black;	
   text-decoration-color: black;	
@@ -1717,6 +1738,18 @@ div.browsebycategory-categories:hover {
 	margin-bottom: 1em;
 	margin-top: 0px !important;
 }
+.artwork-rightcolumn-top-date p.label-item:first-of-type {
+	margin-bottom: 1em;
+	margin-top: 0px !important;
+}
+.artwork-rightcolumn-top-date p.label-item{
+	margin-bottom: 0.5em;
+	margin-top: 1em !important;
+}
+.artwork-rightcolumn-top-date .source {
+	margin-bottom: 1em;
+	margin-top: 0.5em ;	
+}
 .artwork-about-bottom .mw-parser-output, .artwork-about-bottom div.label-item, .artwork-about-bottom div.mw-parser-output {
   width: 100%;
   padding: 30px 0px 0px 0px;
@@ -1753,7 +1786,7 @@ div.browsebycategory-categories:hover {
   grid-column-end: 18;
   margin: 0 !important;
 }
-.artwork-relatedworks-tile:hover, .artwork-relatedworks-tile:hover ~ .artwork-relatedworks-date  {
+.artwork-relatedworks-tile a:hover, .artwork-relatedworks-tile a:hover ~ .artwork-relatedworks-date, .artwork-lists-title a:hover  {
 	color: var(--blue-blue);
 }
 img.artwork-relatedworks-imgs, .artwork-lists-img img{
@@ -1769,38 +1802,71 @@ img.artwork-relatedworks-imgs, .artwork-lists-img img{
 
 .artwork-lists-img {}
 
+.artwork-about-under-img a , .artwork-about-under-img a:visited{
+	color: #000;
+	text-decoration: none;
+	cursor: pointer;
+}
+.artwork-about-under-img a:hover {
+	color: var(--blue-blue);	
+}
+.artwork-about-under-img .distri-links a, .artwork-about-under-img .distri-links a:visited{
+	color: var(--blue-blue);
+}
+.artefact, .facsimile {
+	align-items: center;
+	display: flex;
+}
 
+/* LIBRARY */
 .tns-controls { text-align: center; margin-bottom: 10px; }
 .tns-controls [aria-controls] {
   display: none;
 }
-
-.tns-outer {
-	display: flex;
-	flex-direction: column-reverse;
-}
-
 .tns-nav {
   text-align: center;
   margin: 10px 0;
 }
 .tns-nav > [aria-controls] {
-  width: 9px;
-  height: 9px;
+  width: 12px;
+  height: 12px;
   padding: 0;
-  margin: 0 5px;
+  margin: 0 5px 0 0;
   border-radius: 50%;
-  background: #ddd;
-  border: 0;
+  border: 1px solid #000;
+  background: #FFF;
+}
+.tns-nav-active {
+	background: #000 !important;
 }
-
 #tns1-iw {
     margin: 0px -10px 0px 0px !important;
 }
 
-/*.tns-item img {
-	width: inherit;
-}*/
+.tns-item p:nth-of-type(1) {
+ 	text-transform: uppercase;
+}
+.tns-item p{
+	text-align: center;
+}
+.tns-outer {
+	display: inline-grid;
+}
+.tns-outer {
+  -webkit-transform: scaleY(-1);
+  -ms-transform: scaleY(-1);
+  transform: scaleY(-1);
+}
+.tns-outer > * {
+  -webkit-transform: scaleY(-1);
+  -ms-transform: scaleY(-1);
+  transform: scaleY(-1);
+}
+.tns-item img {
+	width: 100%;
+    max-width: inherit;
+}
+
 
 /*************************************/
 /************ WIKI PAGES ************/
@@ -1821,11 +1887,12 @@ div#tutorials-intro h3, div#tutorials-intro p {
 
 /************ Disactive Mobile ************/
 
-#navigation-mobile {
+#navigation-mobile, #message-mobile {
 	display:  none;
 }
 
 
+
 /********************************** RESPONSIVE DESIGN *********************************/
 
 
@@ -1837,6 +1904,31 @@ div#tutorials-intro h3, div#tutorials-intro p {
 
 @media screen and (min-width:0px) and (max-width: 768px) {
 
+#message-mobile {
+		display: block;
+		position: fixed;
+		width: 100%;
+		top: 0;
+		left: 0;
+		width: 100%;
+		z-index: 10000;
+		height: 100%;
+		background-color: rgba(255, 255, 255, 0.96);
+		overflow-y: hidden;
+}
+
+#message-mobile p {
+	text-align: center;
+	font-family: Roboto Condensed;
+	font-size: 24px;
+	line-height: 1.58;
+	letter-spacing: 1.33px;
+	margin: 25vw 8vw;
+}
+#message-mobile ~ * {
+   overflow: hidden;
+	position: static;
+}
 /********** NAV 
 
 	#navigation {
@@ -1848,6 +1940,20 @@ div#tutorials-intro h3, div#tutorials-intro p {
 	div#header-top {
 	    border-bottom: 0px !important;
 	}
+
+	input[type="checkbox"]:checked ~ #navigation-mobile {
+    transform: translateY(0);
+	}
+	input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-menu {
+    display: none;
+	}
+    input[type="checkbox"]:checked ~ .sidebarIconToggle > .icon-cross {
+    display: block;
+	}
+
+	.sidebarIconToggle {
+		cursor: pointer;
+	}
 	#navigation-mobile {
 		display: block;
 		position: fixed;
@@ -1858,7 +1964,10 @@ div#tutorials-intro h3, div#tutorials-intro p {
 		height: 100%;
 		background-color: rgba(255, 255, 255, 0.96);
 		overflow-y: hidden;
+		transition: transform 250ms ease-in-out;
 	}
+
+
 	.navigation-mobile-items{
 		margin: 100px 0px 0px 0px;
 		display: flex;
@@ -1877,6 +1986,7 @@ div#tutorials-intro h3, div#tutorials-intro p {
 		  color: var(--black);
 		  text-decoration: none;
 		  margin: 30px 0px;
+		  cursor: pointer;
 	 }
 
 	.navigation-mobile-items div a {
diff --git a/templates/artwork.html b/templates/artwork.html
index 004661b..d35cc06 100644
--- a/templates/artwork.html
+++ b/templates/artwork.html
@@ -93,21 +93,21 @@
 						{% endif %}
 
 						{% if 'DownloadDigitalFacsimile' in x %}
-						<div>
+						<div class="facsimile">
 							<a target="_blank" href="{{ x['DownloadDigitalFacsimile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_download.svg') }}"></a>
 							<a target="_blank" href="{{ x['DownloadDigitalFacsimile']['value'] }}"><span>Download digital facsimile</span></a>
 						</div>
 						{% endif %}
 
 						{% if 'DigitalFacsimileExternalLink' in x %}
-						<div>
+						<div  class="facsimile">
 							<a target="_blank" href="{{ x['DigitalFacsimileExternalLink']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_external_link.svg') }}"></a>
 							<a target="_blank" href="{{ x['DigitalFacsimileExternalLink']['value'] }}"><span>External digital facsimile link</span></a>
 						</div>
 						{% endif %}
 
 						{% if 'DigitalFacsimileExternalLink2' in x %}
-						<div>
+						<div  class="facsimile">
 							<a target="_blank" href="{{ x['DigitalFacsimileExternalLink2']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_external_link.svg') }}"></a>
 							<a target="_blank" href="{{ x['DigitalFacsimileExternalLink2']['value'] }}"><span>External digital facsimile link 2</span></a>
 						</div>
@@ -132,21 +132,21 @@
 						{% endif %}
 
 							{% if 'VideoFile' in x %}
-							<div>
+							<div class="artefact">
 								<a target="_blank" href="{{ x['VideoFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_video.svg') }}"></a>
 								<a target="_blank" href="{{ x['VideoFile']['value'] }}"><span>Video</span></a>
 							</div>
 							{% endif %}
 
 							{% if 'AudioFile' in x %}
-							<div>
+							<div class="artefact">
 								<a target="_blank" href="{{ x['AudioFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_audio.svg') }}"></a>
 								<a target="_blank" href="{{ x['AudioFile']['value'] }}"><span>Audio</span></a>
 							</div>
 							{% endif %}
 
 							{% if 'ImageFile' in x %}
-							<div>
+							<div class="artefact">
 								<a target="_blank" href="{{ x['ImageFile']['value'] }}"><img src="{{ url_for('static', filename='/imgs/Icons/icn_image.svg') }}"></a>
 								<a target="_blank" href="{{ x['ImageFile']['value'] }}"><span>Image</span></a>
 							</div>
@@ -157,7 +157,7 @@
 				</div>
 
 <!-- DISTRIBUTOR LINKS -->
-				<div>
+				<div class="distri-links">
 					{% if artworkdistributorlinks['results']['bindings']==[] %}
 					{% else %}		
 						<p class="label-item">DISTRIBUTOR LINKS</p>
@@ -225,7 +225,7 @@
 								
 							<!-- extra info if available -->
 								{% if 'sourceLabel' in x %}
-								<div>Source: {{ x['sourceLabel']['value'] }}</div>
+								<div class="source">Source: {{ x['sourceLabel']['value'] }}</div>
 								{% endif %}
 							{% endfor %}
 							{% endif %}
@@ -262,12 +262,12 @@
 <!-- end of about right top -->
 
 <!-- start of about right column bottom -->
-			<div class="">
+			<div class="des-exh-section">
 
 <!-- description -->
 
 				<!-- if there is a description add description here -->
-				<p class="label-item">DESCRIPTION</p>
+				<p class="label-item des">DESCRIPTION</p>
 
 				{% if artworkdescriptiondata['results']['bindings']==[] %}
 				<p>information not available</p>
@@ -312,7 +312,7 @@
 <!-- end description loop -->
 
 <!-- exhibition and distribution history loop-->
-				<p class="label-item">EXHIBITION AND DISTRIBUTION HISTORY</p>
+				<p class="label-item exh">EXHIBITION AND DISTRIBUTION HISTORY</p>
 				<!-- if exhibition in, then do show that -->
 				{% if artworkexhibitiondata['results']['bindings']==[] %}
 				<p>information not available</p>
@@ -436,7 +436,7 @@
 
 <!-- LISTS DESIGN IF NO LISTS TO BE CLARIFIED-->
 	<div class="artwork-lists">
-		<div class="Heading_C">LISTS</div>
+		<div class="Heading_C">Lists</div>
 
 		{% if artworklists['results']['bindings']==[] %}
 		{% else %}
@@ -475,7 +475,7 @@
       640: {
         edgePadding: 20,
         gutter: 20,
-        items: 2
+        items: 1
       },
       700: {
         gutter: 30
diff --git a/templates/home.html b/templates/home.html
index 567d79a..4b1b996 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -34,7 +34,9 @@
 			<video preload="meta" autoplay="" loop="">
 				 <source src="{{ url_for('static', filename='/vid/DAAP_video_reduced.mp4') }}" type="video/mp4">
 			</video>
-			<a class="metadata-link" target="_blank" href="https://query.daap.bannerrepeater.org/embed.html#%23defaultView%3AGraph%0ASELECT%20%3Fwork%20%3FworkLabel%20%3Fimage_on_Commons%20%3Fplace_of_publication%20%3Fplace_of_publicationLabel%20%3Fcreator_of%20%3Fcreator_ofLabel%20WHERE%20%7B%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%20%20%3Fwork%20wdt%3AP9%20wd%3AQ421.%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP31%20%3Fimage_on_Commons.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP12%20%3Fplace_of_publication.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP9%20%3Fcreator_of.%20%7D%0A%7D%0ALIMIT%20100">Explore Data Visualization</a>
+			<p>
+				<a class="metadata-link" target="_blank" href="https://query.daap.bannerrepeater.org/embed.html#%23defaultView%3AGraph%0ASELECT%20%3Fwork%20%3FworkLabel%20%3Fimage_on_Commons%20%3Fplace_of_publication%20%3Fplace_of_publicationLabel%20%3Fcreator_of%20%3Fcreator_ofLabel%20WHERE%20%7B%0A%20%20SERVICE%20wikibase%3Alabel%20%7B%20bd%3AserviceParam%20wikibase%3Alanguage%20%22%5BAUTO_LANGUAGE%5D%2Cen%22.%20%7D%0A%20%20%3Fwork%20wdt%3AP9%20wd%3AQ421.%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP31%20%3Fimage_on_Commons.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP12%20%3Fplace_of_publication.%20%7D%0A%20%20OPTIONAL%20%7B%20%3Fwork%20wdt%3AP9%20%3Fcreator_of.%20%7D%0A%7D%0ALIMIT%20100">See Live Data Visualization</a>
+			</p>
 		</div>
 </div>
 
diff --git a/templates/layout.html b/templates/layout.html
index 9c66e04..3da62f1 100644
--- a/templates/layout.html
+++ b/templates/layout.html
@@ -22,6 +22,9 @@
 			</div>
 		</div>
 
+		<div id="message-mobile">
+			<p>Mobile version coming soon, please view on desktop</p>
+		</div>
 
 <div id="header">
 	<div id="animatedlogo">
@@ -35,7 +38,11 @@
 			</div> 
 			<!-- <div id="header-keyword-search">
 			<input type="text" id="fname" name="fname" value="" placeholder="Keyword search"> 
-			</div> -->
+			</div> 
+			<div class="container" onclick="myFunction(this)"> 
+
+			</div>
+			-->
 			<div class="web-dev-placeholder">
 				<p>WEBSITE IN DEVELOPMENT</p>
 			</div>
@@ -99,7 +106,12 @@
 	</div>	
 </div>
 
-
+<script type="text/javascript">
+	
+function menutoggle(x) {
+  x.classList.toggle("change");
+}
+</script>