diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue
index 7922ab0086..19be88c2b3 100644
--- a/packages/frontend/src/ui/universal.vue
+++ b/packages/frontend/src/ui/universal.vue
@@ -285,8 +285,10 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 		z-index: 1000;
 		bottom: 0;
 		left: 0;
-		padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 16px) 16px;
-		display: flex;
+		padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + 8px) 12px;
+		display: grid;
+		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+		grid-gap: 8px;
 		width: 100%;
 		box-sizing: border-box;
 		-webkit-backdrop-filter: var(--blur, blur(32px));
@@ -296,26 +298,15 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 
 		> .button {
 			position: relative;
-			flex: 1;
 			padding: 0;
+			aspect-ratio: 1;
+			width: 100%;
+			max-width: 60px;
 			margin: auto;
-			height: 64px;
-			border-radius: 8px;
+			border-radius: 100%;
 			background: var(--panel);
 			color: var(--fg);
 
-			&:not(:last-child) {
-				margin-right: 12px;
-			}
-
-			@media (max-width: 400px) {
-				height: 60px;
-
-				&:not(:last-child) {
-					margin-right: 8px;
-				}
-			}
-
 			&:hover {
 				background: var(--X2);
 			}
@@ -329,14 +320,6 @@ const wallpaper = localStorage.getItem('wallpaper') != null;
 				animation: blink 1s infinite;
 			}
 
-			&:first-child {
-				margin-left: 0;
-			}
-
-			&:last-child {
-				margin-right: 0;
-			}
-
 			> * {
 				font-size: 20px;
 			}