diff --git a/app/app.py b/app/app.py
index 6051c36..f58b30b 100755
--- a/app/app.py
+++ b/app/app.py
@@ -355,19 +355,19 @@ def get_media_html(file, priority=False):
 		return '<audio src="/file/{0}" hidden></audio>'.format(file)
 	if file.endswith('.mp4'):
 		return f"""
-		<video src="/file/{file}" type="video/mp4" onloadeddata="setControlsWidth(this)"></video>
+		<video src="/file/{file}" type="video/mp4" onloadeddata="initializeControls(this)"></video>
 		<span class="controls button-wrapper">
-			<button name="play" onclick="toggleContent(this)">
-				<svg viewBox="0 0 24 24">
-					<use xlink:href="#icon-play"></use>
-				</svg>
-			</button>
-			<input name="scrub" type="range" value=0 oninput="seekContent(this)">
 			<button name="volume-button" onclick="toggleVolume(this)">
 				<svg viewBox="0 0 24 24">
 					<use xlink:href="#icon-audio"></use>
 				</svg>
 			</button>
+			<input name="scrub" type="range" value=0 oninput="seekContent(this)">
+			<button name="play" onclick="toggleContent(this)">
+				<svg viewBox="0 0 24 24">
+					<use xlink:href="#icon-play"></use>
+				</svg>
+			</button>
 		</span>
 		"""
 	if file.endswith('.webm'):
diff --git a/app/templates/index.html b/app/templates/index.html
index dceebdd..e3751b6 100755
--- a/app/templates/index.html
+++ b/app/templates/index.html
@@ -45,7 +45,6 @@
 			color: var(--light);
 			min-height: 100%;
 			margin: 0;
-			/* Removes default browser margin */
 		}
 
 		img,
@@ -54,6 +53,7 @@
 			max-height: 70vh;
 			width: auto;
 			height: auto;
+			display: block;
 		}
 
 		svg {
@@ -65,6 +65,42 @@
 			fill: currentColor;
 		}
 
+		.sidebar {
+			display: flex;
+			flex-wrap: nowrap;
+			position: sticky;
+			top: 0;
+			left: 0;
+			background-color: var(--dark);
+			outline: 2px solid var(--light);
+			z-index: 1000;
+		}
+
+		.sidebar a {
+			display: block;
+			color: var(--light);
+			text-decoration: none;
+			white-space: nowrap;
+			margin: 5px;
+			padding: 5px;
+		}
+
+		.sidebar a:hover {
+			background-color: var(--darker);
+			color: var(--light);
+		}
+
+		.content {
+			display: flex;
+			flex-grow: 1;
+			flex-direction: column;
+		}
+
+		.media-div, .text-content, .button-wrapper {
+			padding: 0;
+			margin: 15px 0 0 0;
+		}
+
 		div.post {
 			background-color: var(--dark);
 			border: 2px solid var(--light);
@@ -73,22 +109,8 @@
 			margin-bottom: 20px;
 		}
 
-		.sidebar {
-			outline: 2px solid var(--light);
-			position: sticky;
-			top: 0;
-			left: 0;
-			background-color: var(--dark);
-			display: flex;
-			flex-wrap: nowrap;
-			z-index: 1000;
-		}
-
-		.content {
-			display: flex;
-			flex-grow: 1;
-			/* Takes up remaining space */
-			flex-direction: column;
+		div.post h3, h5 {
+			margin: 0;
 		}
 
 		/* desktop */
@@ -115,8 +137,7 @@
 		/* phone */
 		@media (max-aspect-ratio: 1) {
 			div.post {
-				width: calc(100vw - 50px);
-				margin-top: 10px;
+				width: calc(100vw - 40px);
 			}
 
 			.container {
@@ -130,8 +151,7 @@
 				flex-direction: row;
 				overflow-x: auto;
 				align-items: center;
-				padding-top: 5px;
-				padding-bottom: 5px;
+				padding: 5px, 0px;
 				margin-bottom: 10px;
 			}
 
@@ -144,20 +164,6 @@
 			}
 		}
 
-		.sidebar a {
-			display: block;
-			color: var(--light);
-			text-decoration: none;
-			white-space: nowrap;
-			margin: 5px;
-			padding: 5px;
-		}
-
-		.sidebar a:hover {
-			background-color: var(--darker);
-			color: var(--light);
-		}
-
 		a.no-style-link {
 			color: inherit;
 			text-decoration: inherit;
@@ -173,11 +179,10 @@
 			display: flex;
 			width: 100%;
 			gap: 10px;
-			margin-top: 10px;
 		}
 
 		.button-wrapper.gallery {
-			gap: 5px;
+			gap: 0;
 		}
 
 		button {
@@ -197,13 +202,14 @@
 		}
 
 		.controls {
-			margin-top: -5.25em;
+			margin-top: -70px;
+			opacity: 0.5;
 		}
 
 		.controls button {
 			flex: 0 0 3em;
 			height: 3em;
-			margin: 0.5em;
+			margin: 5px;
 		}
 		
 		.controls input {
@@ -222,7 +228,7 @@
 		button.gallery {
 			padding: 5px;
 			background-color: var(--darker);
-			border-radius: 5px;
+			border-radius: 0;
 			border: none;
 			cursor: none;
 		}
@@ -234,7 +240,6 @@
 		.text-content {
 			overflow: hidden;
 			transition: max-height 0.3s ease-out;
-			/* Smooth transition */
 			max-height: 20vh;
 			position: relative;
 		}
@@ -271,19 +276,17 @@
 			{% for post in posts %}
 			<div class="post">
 				<h3>{{ post.title }}</h3>
-				<span>
-					{% if post.subreddit %}
-					<h5>
-						<a href="/r/{{ post.subreddit }}" class="no-style-link">/r/{{ post.subreddit }}</a>
-						{% if post.author %}
-						— {{ post.author }}
-						{% endif %}
-						{% if post.age %}
-						— {{ post.age }}
-						{% endif %}
-					</h5>
+				{% if post.subreddit %}
+				<h5>
+					<a href="/r/{{ post.subreddit }}" class="no-style-link">/r/{{ post.subreddit }}</a>
+					{% if post.author %}
+					— {{ post.author }}
 					{% endif %}
-				</span>
+					{% if post.age %}
+					— {{ post.age }}
+					{% endif %}
+				</h5>
+				{% endif %}
 				{% if post.media_html|length > 0 %}
 				<div class="media-div">
 					{% for media in post.media_html %}
@@ -473,6 +476,10 @@
 
 		window.addEventListener('resize', (event) => {
 			checkHeight()
+			videos = document.querySelectorAll('video');
+			videos.forEach(video => {
+				setControlsWidth(video);
+			});
 		});
 
 		// audio/video code
@@ -501,10 +508,14 @@
 		function setControlsWidth(video) {
 			controls = findSibling(video, '.controls');
 			controls.style.width = video.offsetWidth + 'px';
+		}
+
+		function initializeControls(video) {
 			scrub = findSibling(video, '[name="scrub"]');
 			scrub.value = 0;
 			audio = findSibling(video, 'audio');
 			audio.volume = 0;
+			setControlsWidth(video);
 		}
 
 		function toggleContent(button) {