diff --git a/files/assets/css/main.css b/files/assets/css/main.css
index 670d1a18c2..16662a18e9 100644
--- a/files/assets/css/main.css
+++ b/files/assets/css/main.css
@@ -7429,3 +7429,7 @@ th.disable-sort-click[disabled] {
 		margin-bottom: 50px;
 	}
 }
+
+#mobile-bottom-navigation-bar > button {
+	overflow: visible
+}
diff --git a/files/templates/mobile_navigation_bar.html b/files/templates/mobile_navigation_bar.html
index 14d9b339f6..bf95871ca5 100644
--- a/files/templates/mobile_navigation_bar.html
+++ b/files/templates/mobile_navigation_bar.html
@@ -2,76 +2,76 @@
 		<div class="row fixed-bottom bg-white border-top p-2" id="mobile-bottom-navigation-bar"
 		style="z-index: 1000; bottom: 0px; transition: bottom cubic-bezier(0, 0, 0.2, 1) 220ms;">
 
-				<button type="button" class="col px-0 ml-3 btn btn-dead m-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 ml-3 btn btn-dead m-0">
 						<a href="/" class="text-decoration-none">
 								<div class="text-center {% if request.path=='/' and request.full_path!='/?sort=hot&t=all' and request.full_path!='/?sort=new&t=all' %}text-primary{% else %}text-muted{% endif %}">
 										<i class="fas fa-home-alt text-lg"></i>
-										<div class="text-small">Home</div>
+										<div class="text-small-extra">Home</div>
 								</div>
 						</a>
 				</button>
 {% if v and v.defaultsorting == 'new' %}
-				<button type="button" class="col px-0 btn btn-dead m-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 btn btn-dead m-0">
 						<a href="/?sort=hot&t=all" class="text-decoration-none">
 								<div class="text-center {% if request.full_path=='/?sort=hot&t=all' %}text-primary{% else %}text-muted{% endif %}">
 										<i class="fas fa-fire text-lg"></i>
-										<div class="text-small">Hot</div>
+										<div class="text-small-extra">Hot</div>
 								</div>
 						</a>
 				</button>
 {% else %}
-				<button type="button" class="col px-0 btn btn-dead m-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 btn btn-dead m-0">
 						<a href="/?sort=new&t=all" class="text-decoration-none">
 								<div class="text-center {% if request.full_path=='/?sort=new&t=all' %}text-primary{% else %}text-muted{% endif %}">
 										<i class="fas fa-sparkles text-lg"></i>
-										<div class="text-small">New</div>
+										<div class="text-small-extra">New</div>
 								</div>
 						</a>
 				</button>
 {% endif %}
-				<button type="button" class="col px-2 btn btn-dead m-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 mr-2 btn btn-dead m-0">
 						<a href="/comments" class="text-decoration-none">
 								<div class="text-center {% if request.path=='/comments' %}text-primary{% else %}text-muted{% endif %}">
 										<i class="fas fa-comment-dots text-lg"></i>
-										<div class="text-small">Comments</div>
+										<div class="text-small-extra">Comments</div>
 								</div>
 						</a>
 				</button>
-				<button type="button" class="col px-0 btn btn-dead m-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 btn btn-dead m-0 ml-1">
 						<a href="/leaderboard" class="text-decoration-none">
 								<div class="text-center {% if request.path=='/leaderboard' %}text-primary{% else %}text-muted{% endif %}">
 										<i class="fas fa-trophy text-lg"></i>
-										<div class="text-small">Leaderboard</div>
+										<div class="text-small-extra">Leaderboard</div>
 								</div>
 						</a>
 				</button>
 {% if v %}
 				{% if FEATURES['CHAT'] and v.admin_level >= PERMS['CHAT'] -%}
-				<button type="button" class="col px-0 btn btn-dead m-0 pt-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 btn btn-dead m-0 pt-0">
 						<a href="/chat" class="text-decoration-none">
 								<div class="text-center {% if request.path=='/chat' %}text-primary{% else %}text-muted{% endif %}">
 									<b class="text-lg" style="padding-top:10px" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Users in chat right now">{{loggedin_chat}}</b>
-									<div class="text-small">Chat</div>
+									<div class="text-small-extra">Chat</div>
 								</div>
 						</a>
 				</button>
 				{%- endif %}
 				{% if FEATURES['AWARDS'] -%}
-				<button type="button" class="col px-0 mr-3 btn btn-dead m-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 mr-3 btn btn-dead m-0">
 						<a href="/shop/awards" class="text-decoration-none">
 								<div class="text-center {% if request.path=='/shop/awards' %}text-primary{% else %}text-muted{% endif %}">
 										<i class="fas fa-store text-lg"></i>
-										<div class="text-small">Shop</div>
+										<div class="text-small-extra">Shop</div>
 								</div>
 						</a>
 				</button>
 				{%- endif %}
 {% else %}
-				<button type="button" class="col px-0 mr-3 btn btn-dead m-0" style="background: None !important; border: None;">
+				<button type="button" class="nobackground border-0 col px-0 mr-3 btn btn-dead m-0">
 						<a href="/signup?redirect={{request.full_path | urlencode}}" class="text-decoration-none">
 								<div class="text-center text-muted">
 										<i class="fas fa-user-plus text-lg"></i>
-										<div class="text-small">Sign Up</div>
+										<div class="text-small-extra">Sign Up</div>
 								</div>
 						</a>
 				</button>