diff --git a/public/assets/css/general.css b/public/assets/css/general.css
index ea6d4b83..c8f0f2f5 100644
--- a/public/assets/css/general.css
+++ b/public/assets/css/general.css
@@ -501,27 +501,32 @@ table {
 	width: calc(100% - 1rem);
 }
 
-/* Show page */
-
-#video-player {
-   	display: block;
-   	margin: 0 auto;
-    background-color: #fff;
-	cursor: pointer;
-}
-#showlite-body #video-player {
-  	margin-top: 2%;    	
-    padding: 6px;
-    max-width: 50%;
-	border: 1px solid #d0d0d0;
-}
+/* Assets */
 
 .asset {
 	max-width: 100%;
 }
 
-#showlite-body > .asset {
-    max-width: 50%;
+#show-body #asset-boilerpate {
+	display: none;
+}
+
+#showlite-body #asset-display-component {
+	max-width: 50%;
+	text-align: center;
+}
+
+/* video */
+
+#video-asset {
+    background-color: #fff;
+	cursor: pointer;
+}
+#showlite-body #video-asset {
+	width: calc(100% - 12px - 12px - 2px);
+	margin: 6px;
+	padding: 6px;
+	border: 1px solid #d0d0d0;
 }
 
 /* item lists */
diff --git a/public/assets/css/mediaQueries.css b/public/assets/css/mediaQueries.css
index 4f632183..251d419b 100644
--- a/public/assets/css/mediaQueries.css
+++ b/public/assets/css/mediaQueries.css
@@ -36,7 +36,7 @@
 		padding-right: 1.5em;
 	}
 
-	#showlite-body > asset {
+	#showlite-body #asset-display-component {
 		max-width: 100%;
 	}
 
diff --git a/views/partials/asset.handlebars b/views/partials/asset.handlebars
index 534f19f9..74207825 100644
--- a/views/partials/asset.handlebars
+++ b/views/partials/asset.handlebars
@@ -9,6 +9,7 @@
             {{> image}}
         {{/ifConditional}}
     </div>
+    <a id="asset-boilerpate" class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>
 </div>
 
 <script type="text/javascript">
@@ -24,7 +25,7 @@
         },
         showVideo: function () {
             console.log('showing video');
-            const video = document.getElementById('video-player');
+            const video = document.getElementById('video-asset');
             const source = document.createElement('source');
             source.setAttribute('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
             video.appendChild(source);
@@ -32,7 +33,7 @@
         },
         showImage: function () {
             console.log('showing image');
-            const asset = document.getElementById('asset');
+            const asset = document.getElementById('image-asset');
             asset.setAttribute('src', "/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}");
         },
         hideMessages: function () {
diff --git a/views/partials/image.handlebars b/views/partials/image.handlebars
index 0d0d77de..1091a2e5 100644
--- a/views/partials/image.handlebars
+++ b/views/partials/image.handlebars
@@ -1 +1 @@
-<img id="asset" class="asset"/>
\ No newline at end of file
+<img id="image-asset" class="asset"/>
\ No newline at end of file
diff --git a/views/partials/video.handlebars b/views/partials/video.handlebars
index 0ad3154b..57873e74 100644
--- a/views/partials/video.handlebars
+++ b/views/partials/video.handlebars
@@ -1,5 +1,5 @@
-<video id="video-player" controls poster="{{claimInfo.thumbnail}}">
-    <source id="asset">
+<video id="video-asset" class="asset" controls poster="{{claimInfo.thumbnail}}">
+    <source>
     <!--fallback-->
     Your browser does not support the <code>video</code> element.
 </video>
diff --git a/views/showLite.handlebars b/views/showLite.handlebars
index ef25b602..31b5ee78 100644
--- a/views/showLite.handlebars
+++ b/views/showLite.handlebars
@@ -1,2 +1,3 @@
-{{> asset }}
-<a class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>
\ No newline at end of file
+<div class="row row--tall flex-container--column flex-container--center-center">
+    {{> asset }}
+</div>
\ No newline at end of file