diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index a6948ab..77df55b 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -68,8 +68,8 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
+import { ref, onMounted, watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
 import { useAuthStore } from './stores/auth'
 import { useOilsStore } from './stores/oils'
 import { useRecipesStore } from './stores/recipes'
@@ -83,8 +83,16 @@ const oils = useOilsStore()
 const recipeStore = useRecipesStore()
 const ui = useUiStore()
 const router = useRouter()
+const route = useRoute()
 const showUserMenu = ref(false)
 
+// Sync ui.currentSection from route on load and navigation
+const routeToSection = { '/': 'search', '/manage': 'manage', '/inventory': 'inventory', '/oils': 'oils', '/projects': 'projects', '/mydiary': 'mydiary', '/audit': 'audit', '/bugs': 'bugs', '/users': 'users' }
+watch(() => route.path, (path) => {
+  const section = routeToSection[path] || 'search'
+  ui.showSection(section)
+}, { immediate: true })
+
 // Preview environment detection: pr-{id}.oil.oci.euphon.net
 const hostname = window.location.hostname
 const prMatch = hostname.match(/^pr-(\d+)\./)