diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 4eb9315e4..a2572c26d 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7686,17 +7686,14 @@ thead {
 }
 
 #imgnav-next, #imgnav-prev {
-	border: 4px solid transparent;
-	color: black !important;
-	font-size: 35px;
-	background-color: #939393 !important;
 	margin-left: -5px;
 	cursor: pointer;
 	text-decoration: none !important;
 }
 
 #imgnav-next:hover, #imgnav-prev:hover {
-	border: 4px solid var(--primary);
+	background-color: var(--primary) !important;
+	border-color: var(--primary) !important;
 }
 
 
diff --git a/files/templates/modals/expanded_image.html b/files/templates/modals/expanded_image.html
index 245dfce24..336802de9 100644
--- a/files/templates/modals/expanded_image.html
+++ b/files/templates/modals/expanded_image.html
@@ -1,12 +1,18 @@
 <div class="modal" id="expandImageModal" tabindex="-1">
 	<div class="modal-dialog modal-dialog-centered">
-		<a id="imgnav-prev" class="fas fa-arrow-left px-5 py-3 px-md-4 py-md-5 d-none"></a>
+		<a id="imgnav-prev" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
+			<img b class="emoji mirrored" alt=":!marseyyes:" title=":!marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
+		</a>
+
 		<div class="modal-body text-center p-0">
 			<a rel="noopener" target="_blank" id="expanded-image-wrap-link">
 				<img loading="lazy" alt="expanded image" class="rounded" id="expanded-image">
 			</a>
 		</div>
-		<a id="imgnav-next" class="fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
+
+		<a id="imgnav-next" class="btn btn-primary px-5 py-3 px-md-4 py-md-5 d-none">
+			<img b class="emoji" alt=":marseyyes:" title=":marseyyes:" height="30" src="{{SITE_FULL_IMAGES}}/e/marseyyes.webp">
+		</a>
 	</div>
 </div>