diff --git a/src/lib/components/bottom-nav-links.svelte b/src/lib/components/bottom-nav-links.svelte
index 4e6419ffb8..847082e28a 100644
--- a/src/lib/components/bottom-nav-links.svelte
+++ b/src/lib/components/bottom-nav-links.svelte
@@ -9,14 +9,15 @@
 
   let { open = false, sections }: Props = $props();
 
-  const isNotLastSection = (i: number): boolean => i !== sections.length - 1;
+  const visualSections = $derived([...sections].reverse());
+
+  const isNotLastSection = (i: number): boolean =>
+    i !== visualSections.length - 1;
 </script>
 
 {#if open}
-  <div
-    class="flex h-full flex-col-reverse justify-start gap-6 overflow-auto px-4 py-8"
-  >
-    {#each sections as section, i (i)}
+  <div class="flex h-full flex-col justify-start gap-6 overflow-auto px-4 py-8">
+    {#each visualSections as section, i (i)}
       <NavSection navItems={section} />
       {#if isNotLastSection(i)}
         <hr class="border-subtle" />