diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index e5c3784a8..17975f73e 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7689,17 +7689,17 @@ thead {
 	min-width: 300px
 }
 
-.imgnav {
+#imgnav-next, #imgnav-prev {
 	border: 4px solid transparent;
 	color: black !important;
 	font-size: 35px;
-	background-color: #bbbbbb !important;
+	background-color: #939393 !important;
 	margin-left: -5px;
 	cursor: pointer;
 	text-decoration: none !important;
 }
 
-.imgnav:hover {
+#imgnav-next:hover, #imgnav-prev:hover {
 	border: 4px solid var(--primary);
 }
 
diff --git a/files/templates/modals/expanded_image.html b/files/templates/modals/expanded_image.html
index 040426c38..bbdfc430c 100644
--- a/files/templates/modals/expanded_image.html
+++ b/files/templates/modals/expanded_image.html
@@ -1,11 +1,11 @@
 <div class="modal" id="expandImageModal" tabindex="-1">
 	<div class="modal-dialog modal-dialog-centered">
-		<a id="imgnav-prev" class="imgnav fas fa-arrow-left px-5 py-3 px-md-4 py-md-5 d-none"></a>
+		<a id="imgnav-prev" class="fas fa-arrow-left px-5 py-3 px-md-4 py-md-5 d-none"></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="imgnav fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
+		<a id="imgnav-next" class="fas fa-arrow-right px-5 py-3 px-md-4 py-md-5 d-none"></a>
 	</div>
 </div>