diff --git a/packages/ui/app/src/components/BottomNavigationButtons.tsx b/packages/ui/app/src/components/BottomNavigationButtons.tsx
index 2017bfa2cb..cd60c99c4a 100644
--- a/packages/ui/app/src/components/BottomNavigationButtons.tsx
+++ b/packages/ui/app/src/components/BottomNavigationButtons.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { FC } from "react";
 import { BottomNavigationButton } from "./BottomNavigationButton";
 
@@ -12,16 +13,22 @@ export const BottomNavigationButtons: FC<BottomNavigationButtonsProps> = ({ prev
         return null;
     }
 
+    const isGridEnabled = (prev != null && next != null) || alwaysShowGrid;
+
     return (
         <div
             className={
-                (prev != null && next != null) || alwaysShowGrid
-                    ? "not-prose grid gap-6 md:gap-8 lg:gap-12 grid-cols-2"
-                    : "not-prose grid grid-cols-1"
+                isGridEnabled ? "not-prose grid gap-6 md:gap-8 lg:gap-12 grid-cols-2" : "not-prose grid grid-cols-1"
             }
         >
             {prev != null && <BottomNavigationButton {...prev} dir="prev" />}
-            {next != null && <BottomNavigationButton {...next} dir="next" className="col-start-2" />}
+            {next != null && (
+                <BottomNavigationButton
+                    {...next}
+                    dir="next"
+                    className={clsx(isGridEnabled ? "col-start-2" : undefined, next.className)}
+                />
+            )}
         </div>
     );
 };