diff --git a/package.json b/package.json
index 79ee6c9..6f73de0 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "gluko",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "private": true,
   "type": "module",
   "scripts": {
diff --git a/src/App.vue b/src/App.vue
index 20de836..4912265 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -27,7 +27,7 @@ import ToastContainer from '@/components/base/ToastContainer.vue'
         'pb-20 lg:pb-4' // Mobile: Add bottom padding for bottom nav
       ]"
     >
-      <div class="container mx-auto px-4 py-6">
+      <div class="container mx-auto px-4 py-3">
         <RouterView />
       </div>
     </main>
diff --git a/src/components/base/BaseBottomNav.vue b/src/components/base/BaseBottomNav.vue
index f73b300..19aac46 100644
--- a/src/components/base/BaseBottomNav.vue
+++ b/src/components/base/BaseBottomNav.vue
@@ -21,31 +21,158 @@
         />
         <span class="sr-only">{{ item.label }}</span>
       </RouterLink>
+
+      <!-- Menu Button -->
+      <button
+        type="button"
+        class="nav-item relative"
+        :class="menuButtonClasses"
+        :aria-label="$t('navigation.menu')"
+        @click="showMenu = true"
+      >
+        <MoreHorizontalIcon class="w-6 h-6" />
+        <!-- Show badge if any overflow item has a badge -->
+        <span
+          v-if="hasOverflowBadge"
+          class="absolute top-1 right-1 w-2 h-2 bg-primary-600 dark:bg-primary-400 rounded-full"
+          aria-hidden="true"
+        />
+        <span class="sr-only">{{ $t('navigation.menu') }}</span>
+      </button>
     </div>
   </nav>
+
+  <!-- Menu Modal -->
+  <BaseModal v-model:open="showMenu" :title="$t('navigation.menu')" size="sm">
+    <nav class="space-y-2">
+      <!-- Navigation Items (Home, About, Settings) -->
+      <RouterLink
+        v-for="item in overflowItems"
+        :key="item.to"
+        :to="item.to"
+        class="flex items-center justify-between px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
+        @click="showMenu = false"
+      >
+        <div class="flex items-center space-x-3">
+          <component :is="item.icon" class="w-5 h-5" />
+          <span>{{ item.label }}</span>
+        </div>
+        <!-- Badge indicator for items with notifications -->
+        <span
+          v-if="item.showBadge"
+          class="w-2 h-2 bg-primary-600 dark:bg-primary-400 rounded-full"
+          aria-hidden="true"
+        />
+      </RouterLink>
+
+      <!-- Divider -->
+      <hr class="border-gray-200 dark:border-gray-700" />
+
+      <!-- Theme Toggle -->
+      <button
+        type="button"
+        class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150 w-full text-left"
+        @click="toggleTheme"
+      >
+        <SunIcon v-if="isDark" class="w-5 h-5" />
+        <MoonIcon v-else class="w-5 h-5" />
+        <span>{{ isDark ? $t('theme.light') : $t('theme.dark') }}</span>
+      </button>
+
+      <!-- Language Toggle -->
+      <button
+        type="button"
+        class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150 w-full text-left"
+        @click="toggleLanguage"
+      >
+        <LanguagesIcon class="w-5 h-5" />
+        <span>{{ locale === 'en' ? 'Français' : 'English' }}</span>
+      </button>
+
+      <!-- Divider -->
+      <hr class="border-gray-200 dark:border-gray-700" />
+
+      <!-- GitHub Link -->
+      <a
+        href="https://github.com/gcharest/gluko"
+        target="_blank"
+        rel="noopener"
+        class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
+        @click="showMenu = false"
+      >
+        <!-- GitHub icon from Simple Icons -->
+        <svg
+          class="w-5 h-5"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+          />
+        </svg>
+        <span>{{ $t('navigation.sourceCode') }}</span>
+      </a>
+    </nav>
+
+    <!-- Version Info -->
+    <div
+      class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400"
+    >
+      <p>Gluko © Guillaume Charest 2021-2023</p>
+      <p class="text-xs">ver. {{ version }} ({{ buildDate }})</p>
+    </div>
+  </BaseModal>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { useNavigationStore } from '@/stores/navigation'
+import { useDarkMode } from '@/composables/useDarkMode'
+import { useI18n } from 'vue-i18n'
+import BaseModal from './BaseModal.vue'
+import { MoreHorizontalIcon, SunIcon, MoonIcon, LanguagesIcon } from 'lucide-vue-next'
 
 const route = useRoute()
 const navigationStore = useNavigationStore()
+const { isDark, setLight, setDark } = useDarkMode()
+const { locale } = useI18n()
+const showMenu = ref(false)
+
+// Access build-time constants
+const version = __APP_VERSION__
+const buildDate = new Date(__BUILD_DATE__).toISOString().slice(0, 10)
 
 const bottomNavItems = computed(() => navigationStore.bottomNavItems)
 
+// Items that don't fit in bottom nav (overflow items: Home, About, Settings)
+const overflowItems = computed(() =>
+  navigationStore.navigationItems.filter((item) => !item.showInBottomNav)
+)
+
+// Check if any overflow item has a badge (for menu button badge inheritance)
+const hasOverflowBadge = computed(() => overflowItems.value.some((item) => item.showBadge))
+
 const navClasses = computed(() => [
   'bg-white dark:bg-gray-900',
   'border-t border-gray-200 dark:border-gray-800',
   'shadow-lg'
 ])
 
+const menuButtonClasses = computed(() => [
+  'flex flex-col items-center justify-center',
+  'flex-1 min-h-[56px]', // Increased from 44px to 56px for better touch targets
+  'transition-colors duration-150',
+  'rounded-lg mx-1',
+  'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
+])
+
 function navItemClasses(to: string) {
   const isActive = route.path === to
   return [
     'flex flex-col items-center justify-center',
-    'flex-1 min-h-[44px]',
+    'flex-1 min-h-[56px]', // Increased from 44px to 56px for better touch targets
     'transition-colors duration-150',
     'rounded-lg mx-1',
     isActive
@@ -53,6 +180,20 @@ function navItemClasses(to: string) {
       : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
   ]
 }
+
+function toggleTheme() {
+  if (isDark.value) {
+    setLight()
+  } else {
+    setDark()
+  }
+  showMenu.value = false
+}
+
+function toggleLanguage() {
+  locale.value = locale.value === 'en' ? 'fr' : 'en'
+  showMenu.value = false
+}
 </script>
 
 <style scoped>
diff --git a/src/components/base/BaseButton.vue b/src/components/base/BaseButton.vue
index 2bc92fc..e3ca814 100644
--- a/src/components/base/BaseButton.vue
+++ b/src/components/base/BaseButton.vue
@@ -10,7 +10,7 @@
     <span v-if="loading" class="absolute inset-0 flex items-center justify-center">
       <LoaderIcon class="w-5 h-5 animate-spin" />
     </span>
-    <span :class="{ 'opacity-0': loading }">
+    <span :class="{ 'opacity-0': loading }" class="inline-flex items-center justify-center gap-2">
       <slot />
     </span>
   </button>
diff --git a/src/components/base/BaseSideRail.vue b/src/components/base/BaseSideRail.vue
index d8e9dc6..f035bd9 100644
--- a/src/components/base/BaseSideRail.vue
+++ b/src/components/base/BaseSideRail.vue
@@ -4,12 +4,12 @@
     :class="sideRailClasses"
     :aria-label="$t('navigation.mainNavigation')"
   >
-    <div class="flex flex-col h-full py-4">
+    <div class="flex flex-col h-full py-4 px-3">
       <!-- Logo/Brand -->
-      <div class="px-4 mb-6">
+      <div class="mb-6">
         <RouterLink
           to="/"
-          class="flex items-center justify-center w-12 h-12 rounded-lg bg-primary-600 text-white font-bold text-xl hover:bg-primary-700 transition-colors"
+          class="flex items-center justify-center w-full h-12 rounded-lg bg-primary-600 text-white font-bold text-xl hover:bg-primary-700 transition-colors"
           aria-label="Gluko Home"
         >
           G
@@ -17,7 +17,7 @@
       </div>
 
       <!-- Navigation Items -->
-      <nav class="flex-1 px-3 space-y-1">
+      <nav class="flex-1 space-y-1">
         <RouterLink
           v-for="item in sideRailItems"
           :key="item.to"
@@ -33,12 +33,14 @@
             class="absolute top-1 right-1 w-2 h-2 bg-primary-600 dark:bg-primary-400 rounded-full"
             aria-hidden="true"
           />
-          <span class="text-xs mt-1 font-medium">{{ item.label }}</span>
+          <span class="text-xs mt-1 font-medium text-center">{{
+            item.shortLabel || item.label
+          }}</span>
         </RouterLink>
       </nav>
 
       <!-- Bottom Actions -->
-      <div class="px-3 space-y-2 border-t border-gray-200 dark:border-gray-700 pt-4">
+      <div class="space-y-2 border-t border-gray-200 dark:border-gray-700 pt-4">
         <!-- Theme Toggle -->
         <button
           type="button"
@@ -71,7 +73,17 @@
           :aria-label="$t('navigation.sourceCode')"
           :title="$t('navigation.sourceCode')"
         >
-          <GithubIcon class="w-6 h-6" />
+          <!-- GitHub icon from Simple Icons -->
+          <svg
+            class="w-6 h-6"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+            />
+          </svg>
         </a>
       </div>
     </div>
@@ -84,7 +96,7 @@ import { useRoute } from 'vue-router'
 import { useNavigationStore } from '@/stores/navigation'
 import { useDarkMode } from '@/composables/useDarkMode'
 import { useI18n } from 'vue-i18n'
-import { SunIcon, MoonIcon, LanguagesIcon, GithubIcon } from 'lucide-vue-next'
+import { SunIcon, MoonIcon, LanguagesIcon } from 'lucide-vue-next'
 
 const route = useRoute()
 const navigationStore = useNavigationStore()
diff --git a/src/components/base/BaseTopBar.vue b/src/components/base/BaseTopBar.vue
index f9c82bf..acdffe7 100644
--- a/src/components/base/BaseTopBar.vue
+++ b/src/components/base/BaseTopBar.vue
@@ -8,124 +8,21 @@
       {{ $t('navigation.skipToContent') }}
     </a>
 
-    <div class="flex items-center justify-between h-14 px-4">
-      <!-- Left: Menu Button (if needed) or Brand -->
-      <div class="flex items-center">
-        <RouterLink to="/" class="text-xl font-bold text-gray-900 dark:text-white">
-          Gluko
-        </RouterLink>
-      </div>
-
-      <!-- Right: Actions -->
-      <div class="flex items-center space-x-2">
-        <!-- Theme Toggle -->
-        <button
-          type="button"
-          class="flex items-center justify-center w-10 h-10 min-h-11 min-w-11 rounded-lg text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
-          :aria-label="$t('navigation.toggleTheme')"
-          @click="toggleTheme"
-        >
-          <SunIcon v-if="isDark" class="w-5 h-5" />
-          <MoonIcon v-else class="w-5 h-5" />
-        </button>
-
-        <!-- Language Toggle -->
-        <button
-          type="button"
-          class="flex items-center justify-center w-10 h-10 min-h-11 min-w-11 rounded-lg text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
-          :aria-label="$t('navigation.changeLanguage')"
-          @click="toggleLanguage"
-        >
-          <LanguagesIcon class="w-5 h-5" />
-        </button>
-
-        <!-- Menu Button (if we need overflow menu) -->
-        <button
-          type="button"
-          class="flex items-center justify-center w-10 h-10 min-h-11 min-w-11 rounded-lg text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
-          :aria-label="$t('navigation.menu')"
-          @click="showMenu = true"
-        >
-          <MoreVerticalIcon class="w-5 h-5" />
-        </button>
-      </div>
-    </div>
-  </header>
-
-  <!-- Overflow Menu Modal -->
-  <BaseModal v-model:open="showMenu" :title="$t('navigation.menu')" size="sm">
-    <nav class="space-y-2">
-      <RouterLink
-        v-for="item in overflowItems"
-        :key="item.to"
-        :to="item.to"
-        class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
-        @click="showMenu = false"
-      >
-        <component :is="item.icon" class="w-5 h-5" />
-        <span>{{ item.label }}</span>
+    <div class="flex items-center justify-center h-14 px-4">
+      <!-- Brand / Home Link -->
+      <RouterLink to="/" class="text-xl font-bold text-gray-900 dark:text-white">
+        Gluko
       </RouterLink>
-
-      <!-- GitHub Link -->
-      <a
-        href="https://github.com/gcharest/gluko"
-        target="_blank"
-        rel="noopener"
-        class="flex items-center space-x-3 px-4 py-3 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors duration-150"
-        @click="showMenu = false"
-      >
-        <GithubIcon class="w-5 h-5" />
-        <span>{{ $t('navigation.sourceCode') }}</span>
-      </a>
-    </nav>
-
-    <!-- Version Info -->
-    <div
-      class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400"
-    >
-      <p>Gluko © Guillaume Charest 2021-2023</p>
-      <p class="text-xs">ver. {{ version }} ({{ buildDate }})</p>
     </div>
-  </BaseModal>
+  </header>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import { useNavigationStore } from '@/stores/navigation'
-import { useDarkMode } from '@/composables/useDarkMode'
-import { useI18n } from 'vue-i18n'
-import BaseModal from './BaseModal.vue'
-import { SunIcon, MoonIcon, LanguagesIcon, MoreVerticalIcon, GithubIcon } from 'lucide-vue-next'
-
-const navigationStore = useNavigationStore()
-const { isDark, setLight, setDark } = useDarkMode()
-const { locale } = useI18n()
-const showMenu = ref(false)
-
-// Access build-time constants
-const version = __APP_VERSION__
-const buildDate = new Date(__BUILD_DATE__).toISOString().slice(0, 10)
+import { computed } from 'vue'
 
 const topBarClasses = computed(() => [
   'bg-white dark:bg-gray-900',
   'border-b border-gray-200 dark:border-gray-800',
   'shadow-sm'
 ])
-
-// Items that don't fit in bottom nav (overflow items)
-const overflowItems = computed(() =>
-  navigationStore.navigationItems.filter((item) => !item.showInBottomNav)
-)
-
-function toggleTheme() {
-  if (isDark.value) {
-    setLight()
-  } else {
-    setDark()
-  }
-}
-
-function toggleLanguage() {
-  locale.value = locale.value === 'en' ? 'fr' : 'en'
-}
 </script>
diff --git a/src/components/base/ReloadPrompt.vue b/src/components/base/ReloadPrompt.vue
index 74140b5..a5a93f4 100644
--- a/src/components/base/ReloadPrompt.vue
+++ b/src/components/base/ReloadPrompt.vue
@@ -3,16 +3,21 @@
 import { watch, onMounted } from 'vue'
 import { usePWAUpdate } from '@/composables/usePWAUpdate'
 import { useNavigationStore } from '@/stores/navigation'
+import { useToast } from '@/composables/useToast'
+import { useI18n } from 'vue-i18n'
 
 const pwaUpdate = usePWAUpdate()
 const navigationStore = useNavigationStore()
+const toast = useToast()
+const { t } = useI18n()
 
 // Watch for offline ready state and show toast
 watch(
   () => pwaUpdate.isOfflineReady.value,
   (isReady) => {
     if (isReady) {
-      pwaUpdate.notifyOfflineReady()
+      // Offline ready notification doesn't need a view context
+      toast.success(t('pwa.offlineReady'))
     }
   }
 )
@@ -22,7 +27,14 @@ watch(
   () => pwaUpdate.hasUpdate.value,
   (hasUpdate) => {
     if (hasUpdate) {
-      pwaUpdate.notifyUpdateAvailable()
+      // Show toast with context pointing to settings view
+      toast.info(t('pwa.updateAvailable'), {
+        context: {
+          viewPath: '/settings',
+          clearOnVisit: true
+        },
+        duration: 10000 // Show longer for important updates
+      })
       navigationStore.setSettingsBadge(true)
     } else {
       navigationStore.setSettingsBadge(false)
@@ -33,10 +45,16 @@ watch(
 onMounted(() => {
   // Check initial states
   if (pwaUpdate.isOfflineReady.value) {
-    pwaUpdate.notifyOfflineReady()
+    toast.success(t('pwa.offlineReady'))
   }
   if (pwaUpdate.hasUpdate.value) {
-    pwaUpdate.notifyUpdateAvailable()
+    toast.info(t('pwa.updateAvailable'), {
+      context: {
+        viewPath: '/settings',
+        clearOnVisit: true
+      },
+      duration: 10000
+    })
     navigationStore.setSettingsBadge(true)
   }
 })
diff --git a/src/components/base/Toast.vue b/src/components/base/Toast.vue
index 7f5678a..0f1cef7 100644
--- a/src/components/base/Toast.vue
+++ b/src/components/base/Toast.vue
@@ -4,6 +4,7 @@
     role="status"
     :aria-live="toast.variant === 'error' ? 'assertive' : 'polite'"
     class="pointer-events-auto"
+    @click="handleToastClick"
   >
     <div class="flex items-start gap-3">
       <!-- Icon -->
@@ -14,10 +15,18 @@
         <p :class="messageClasses">
           {{ toast.message }}
         </p>
+        <p v-if="toast.context?.viewPath" class="text-xs mt-1 opacity-70">
+          {{ $t('notifications.clickToView') }}
+        </p>
       </div>
 
       <!-- Action button (optional) -->
-      <button v-if="toast.action" type="button" :class="actionButtonClasses" @click="handleAction">
+      <button
+        v-if="toast.action"
+        type="button"
+        :class="actionButtonClasses"
+        @click.stop="handleAction"
+      >
         {{ toast.action.label }}
       </button>
 
@@ -26,7 +35,7 @@
         type="button"
         :class="closeButtonClasses"
         :aria-label="$t('common.actions.close')"
-        @click="handleClose"
+        @click.stop="handleClose"
       >
         <XIcon class="w-4 h-4" />
       </button>
@@ -36,6 +45,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useNotificationStore } from '@/stores/notification'
 import {
   CheckCircleIcon,
   AlertCircleIcon,
@@ -55,6 +66,9 @@ const emit = defineEmits<{
   close: []
 }>()
 
+const router = useRouter()
+const notificationStore = useNotificationStore()
+
 const iconComponent = computed(() => {
   const icons = {
     success: CheckCircleIcon,
@@ -66,7 +80,16 @@ const iconComponent = computed(() => {
 })
 
 const toastClasses = computed(() => {
-  const base = ['flex items-start gap-3 p-4 rounded-lg shadow-lg border', 'min-w-[320px] max-w-md']
+  const base = [
+    'flex items-start gap-3 p-4 rounded-lg shadow-lg border',
+    'min-w-[320px] max-w-md',
+    'transition-all duration-150'
+  ]
+
+  // Add cursor pointer if toast has a navigation context
+  if (props.toast.context?.viewPath) {
+    base.push('cursor-pointer hover:scale-[1.02]')
+  }
 
   const variants = {
     success: 'bg-green-50 border-green-200 dark:bg-green-950 dark:border-green-800',
@@ -142,4 +165,21 @@ function handleAction() {
 function handleClose() {
   emit('close')
 }
+
+/**
+ * Handle clicking on the toast body (not close button)
+ * If the toast has a view context, navigate to that view
+ */
+function handleToastClick() {
+  if (props.toast.context?.viewPath) {
+    // Navigate to the related view
+    router.push(props.toast.context.viewPath)
+    // Remove the notification from the store (user is taking action)
+    if (props.toast.notificationId) {
+      notificationStore.removeNotification(props.toast.notificationId)
+    }
+    // Close the toast
+    emit('close')
+  }
+}
 </script>
diff --git a/src/components/calculator/CalculatorControls.vue b/src/components/calculator/CalculatorControls.vue
index dad858e..aebec07 100644
--- a/src/components/calculator/CalculatorControls.vue
+++ b/src/components/calculator/CalculatorControls.vue
@@ -8,7 +8,7 @@ const emit = defineEmits(['add', 'reset'])
 <template>
   <div class="p-4 flex gap-3">
     <BaseButton variant="primary" class="flex-1" @click="emit('add')">
-      <PlusIcon class="w-5 h-5 mr-2" />
+      <PlusIcon class="w-5 h-5" />
       {{ $t('components.mealCalculator.actions.addNutrient') }}
     </BaseButton>
     <BaseButton variant="secondary" @click="emit('reset')">
diff --git a/src/components/calculator/MealCalculator.vue b/src/components/calculator/MealCalculator.vue
index b515564..be25fb2 100644
--- a/src/components/calculator/MealCalculator.vue
+++ b/src/components/calculator/MealCalculator.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onBeforeMount, ref, computed } from 'vue'
+import { ref, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import NutrientList from '@/components/nutrients/NutrientList.vue'
 import ConfirmationModal from '@/components/modals/ConfirmationModal.vue'
@@ -23,15 +23,10 @@ const nutrientCount = computed(() => store.nutrientCount)
 const totalCarbs = computed(() => store.mealCarbs)
 const isEditing = computed(() => !!store.editingHistoryId)
 
-onBeforeMount(async () => {
-  if (store.nutrientEmpty) {
-    await store.addEmptyNutrient()
-  }
-})
+// Meal calculator starts empty - no automatic nutrient addition
 
 async function handleResetConfirm() {
   await store.clearSession()
-  await store.addEmptyNutrient()
   showResetConfirmation.value = false
 }
 
@@ -84,7 +79,7 @@ function handleManageTags() {
       "
       @click="handleSaveToHistory"
     >
-      <BookPlusIcon class="w-5 h-5 mr-2" />
+      <BookPlusIcon class="w-5 h-5" />
       {{ $t('components.mealCalculator.actions.saveToHistory') }}
     </BaseButton>
   </div>
diff --git a/src/components/filters/SubjectSelector.vue b/src/components/filters/SubjectSelector.vue
index 46771a1..9e372ae 100644
--- a/src/components/filters/SubjectSelector.vue
+++ b/src/components/filters/SubjectSelector.vue
@@ -1,20 +1,5 @@
 <template>
   <div class="subject-selector">
-    <div v-if="allSubjectsOption" class="flex items-center mb-2">
-      <input
-        :id="allSubjectsId"
-        v-model="selectedSubjectId"
-        class="w-4 h-4 text-primary-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:ring-2"
-        type="radio"
-        name="subject"
-        :value="null"
-        @change="handleChange"
-      />
-      <label class="ml-2 text-sm text-gray-900 dark:text-white" :for="allSubjectsId">
-        {{ $t('components.subjectSelector.allSubjects') }}
-      </label>
-    </div>
-
     <!-- Loading state -->
     <div v-if="loading" class="text-center py-3">
       <div
@@ -36,37 +21,67 @@
         {{ $t('components.subjectSelector.noSubjects') }}
       </p>
       <BaseButton variant="primary" size="sm" @click="handleAddSubject">
-        {{ $t('components.subjectSelector.addSubject') }}
+        <SettingsIcon class="w-4 h-4" />
+        {{ $t('components.subjectSelector.manageSubjects') }}
+      </BaseButton>
+    </div>
+
+    <!-- Single subject: show only manage button -->
+    <div v-else-if="subjects.length === 1" class="text-center py-2">
+      <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
+        {{ subjects[0].name }}
+      </p>
+      <BaseButton variant="secondary" size="sm" class="w-full" @click="handleAddSubject">
+        <SettingsIcon class="w-4 h-4" />
+        {{ $t('components.subjectSelector.manageSubjects') }}
       </BaseButton>
     </div>
 
-    <!-- Subject list -->
-    <div v-else class="subject-list max-h-48 overflow-y-auto space-y-2">
-      <div v-for="subject in subjects" :key="subject.id" class="flex items-center">
+    <!-- Multiple subjects: show radio list -->
+    <div v-else>
+      <div v-if="allSubjectsOption" class="flex items-center mb-2">
         <input
-          :id="getSubjectInputId(subject.id)"
+          :id="allSubjectsId"
           v-model="selectedSubjectId"
           class="w-4 h-4 text-primary-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:ring-2"
           type="radio"
           name="subject"
-          :value="subject.id"
+          :value="null"
           @change="handleChange"
         />
-        <label
-          class="ml-2 text-sm text-gray-900 dark:text-white"
-          :for="getSubjectInputId(subject.id)"
-        >
-          {{ subject.name }}
+        <label class="ml-2 text-sm text-gray-900 dark:text-white" :for="allSubjectsId">
+          {{ $t('components.subjectSelector.allSubjects') }}
         </label>
       </div>
-    </div>
 
-    <!-- Add subject button -->
-    <div class="mt-3">
-      <BaseButton variant="primary" size="sm" class="w-full" @click="handleAddSubject">
-        <PlusCircleIcon class="w-4 h-4 mr-1" />
-        {{ $t('components.subjectSelector.addSubject') }}
-      </BaseButton>
+      <!-- Subject list -->
+      <div class="subject-list max-h-48 overflow-y-auto space-y-2">
+        <div v-for="subject in subjects" :key="subject.id" class="flex items-center">
+          <input
+            :id="getSubjectInputId(subject.id)"
+            v-model="selectedSubjectId"
+            class="w-4 h-4 text-primary-600 bg-gray-100 dark:bg-gray-700 border-gray-300 dark:border-gray-600 focus:ring-primary-500 focus:ring-2"
+            type="radio"
+            name="subject"
+            :value="subject.id"
+            @change="handleChange"
+          />
+          <label
+            class="ml-2 text-sm text-gray-900 dark:text-white"
+            :for="getSubjectInputId(subject.id)"
+          >
+            {{ subject.name }}
+          </label>
+        </div>
+      </div>
+
+      <!-- Manage subjects button -->
+      <div class="mt-3">
+        <BaseButton variant="secondary" size="sm" class="w-full" @click="handleAddSubject">
+          <SettingsIcon class="w-4 h-4" />
+          {{ $t('components.subjectSelector.manageSubjects') }}
+        </BaseButton>
+      </div>
     </div>
   </div>
 </template>
@@ -77,7 +92,7 @@ import { useSubjectStore } from '@/stores/subject'
 import type { Subject } from '@/types/meal-history'
 import BaseButton from '@/components/base/BaseButton.vue'
 import BaseAlert from '@/components/base/BaseAlert.vue'
-import { PlusCircleIcon } from 'lucide-vue-next'
+import { SettingsIcon } from 'lucide-vue-next'
 
 interface Props {
   modelValue: string | null
diff --git a/src/components/filters/TagSelector.vue b/src/components/filters/TagSelector.vue
index 7c67d67..6650910 100644
--- a/src/components/filters/TagSelector.vue
+++ b/src/components/filters/TagSelector.vue
@@ -20,9 +20,9 @@
       <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
         {{ $t('dialogs.tagManagement.noTags') }}
       </p>
-      <BaseButton variant="primary" size="sm" @click="handleManageTags">
-        <PlusCircleIcon class="w-4 h-4 mr-1" />
-        {{ $t('dialogs.tagManagement.addNew') }}
+      <BaseButton variant="primary" size="sm" class="w-full" @click="handleManageTags">
+        <SettingsIcon class="w-4 h-4" />
+        {{ $t('dialogs.tagManagement.title') }}
       </BaseButton>
     </div>
 
@@ -54,7 +54,7 @@
     <!-- Manage tags button -->
     <div v-if="tags.length" class="mt-3">
       <BaseButton variant="secondary" size="sm" class="w-full" @click="handleManageTags">
-        <TagIcon class="w-4 h-4 mr-1" />
+        <TagIcon class="w-4 h-4" />
         {{ $t('dialogs.tagManagement.title') }}
       </BaseButton>
     </div>
@@ -66,7 +66,7 @@ import { ref, computed, onMounted, watch } from 'vue'
 import { useTagStore } from '@/stores/tag'
 import BaseButton from '@/components/base/BaseButton.vue'
 import BaseAlert from '@/components/base/BaseAlert.vue'
-import { PlusCircleIcon, TagIcon } from 'lucide-vue-next'
+import { SettingsIcon, TagIcon } from 'lucide-vue-next'
 
 interface Props {
   modelValue: string[]
diff --git a/src/components/modals/ImportConfirmModal.vue b/src/components/modals/ImportConfirmModal.vue
index 00f9d72..94ea54e 100644
--- a/src/components/modals/ImportConfirmModal.vue
+++ b/src/components/modals/ImportConfirmModal.vue
@@ -66,13 +66,13 @@
     <div class="flex flex-col gap-2 w-full sm:flex-row-reverse mt-6">
       <!-- Merge (recommended) -->
       <BaseButton variant="primary" class="w-full sm:w-auto" @click="handleMerge">
-        <DatabaseIcon class="w-4 h-4 mr-2" />
+        <DatabaseIcon class="w-4 h-4" />
         {{ $t('dialogs.importConfirm.actions.merge') }}
       </BaseButton>
 
       <!-- Replace -->
       <BaseButton variant="danger" class="w-full sm:w-auto" @click="handleReplace">
-        <Trash2Icon class="w-4 h-4 mr-2" />
+        <Trash2Icon class="w-4 h-4" />
         {{ $t('dialogs.importConfirm.actions.replace') }}
       </BaseButton>
 
diff --git a/src/components/modals/SaveMealModal.vue b/src/components/modals/SaveMealModal.vue
index 06c1a53..4e8b100 100644
--- a/src/components/modals/SaveMealModal.vue
+++ b/src/components/modals/SaveMealModal.vue
@@ -97,7 +97,7 @@
     <!-- Action Buttons -->
     <div class="flex flex-col gap-2 w-full sm:flex-row-reverse mt-6">
       <BaseButton variant="primary" class="w-full sm:w-auto" @click="handleSave">
-        <BookPlusIcon class="w-4 h-4 mr-2" />
+        <BookPlusIcon class="w-4 h-4" />
         {{ isEditing ? $t('common.actions.save') : $t('dialogs.saveMeal.saveButton') }}
       </BaseButton>
       <BaseButton
diff --git a/src/components/modals/SubjectManagementModal.vue b/src/components/modals/SubjectManagementModal.vue
index 1ffee23..411d9d4 100644
--- a/src/components/modals/SubjectManagementModal.vue
+++ b/src/components/modals/SubjectManagementModal.vue
@@ -19,7 +19,7 @@
           required
         />
         <BaseButton type="submit" variant="primary" :disabled="!newSubjectName.trim()">
-          <PlusCircleIcon class="w-4 h-4 mr-1" />
+          <PlusCircleIcon class="w-4 h-4" />
           {{ $t('common.actions.add') }}
         </BaseButton>
       </form>
@@ -51,7 +51,7 @@
           required
         />
         <BaseButton type="submit" variant="primary" :disabled="!editSubjectName.trim()">
-          <CheckIcon class="w-4 h-4 mr-1" />
+          <CheckIcon class="w-4 h-4" />
           {{ $t('common.actions.save') }}
         </BaseButton>
       </form>
diff --git a/src/components/modals/TagManagementModal.vue b/src/components/modals/TagManagementModal.vue
index c69a976..154ac0a 100644
--- a/src/components/modals/TagManagementModal.vue
+++ b/src/components/modals/TagManagementModal.vue
@@ -19,7 +19,7 @@
           required
         />
         <BaseButton type="submit" variant="primary" :disabled="!newTagName.trim()">
-          <PlusCircleIcon class="w-4 h-4 mr-1" />
+          <PlusCircleIcon class="w-4 h-4" />
           {{ $t('common.actions.add') }}
         </BaseButton>
       </form>
@@ -51,7 +51,7 @@
           required
         />
         <BaseButton type="submit" variant="primary" :disabled="!editTagName.trim()">
-          <CheckIcon class="w-4 h-4 mr-1" />
+          <CheckIcon class="w-4 h-4" />
           {{ $t('common.actions.save') }}
         </BaseButton>
       </form>
diff --git a/src/components/modals/UnsavedChangesModal.vue b/src/components/modals/UnsavedChangesModal.vue
index bc54687..5dc53d5 100644
--- a/src/components/modals/UnsavedChangesModal.vue
+++ b/src/components/modals/UnsavedChangesModal.vue
@@ -76,13 +76,13 @@ function handleCancel() {
     <div class="flex flex-col gap-2 w-full sm:flex-row-reverse mt-6">
       <!-- Save & Load -->
       <BaseButton variant="primary" class="w-full sm:w-auto" @click="handleSaveAndLoad">
-        <SaveIcon class="w-4 h-4 mr-2" />
+        <SaveIcon class="w-4 h-4" />
         {{ $t('dialogs.unsavedChanges.actions.saveAndLoad') }}
       </BaseButton>
 
       <!-- Discard & Load -->
       <BaseButton variant="danger" class="w-full sm:w-auto" @click="handleDiscardAndLoad">
-        <Trash2Icon class="w-4 h-4 mr-2" />
+        <Trash2Icon class="w-4 h-4" />
         {{ $t('dialogs.unsavedChanges.actions.discardAndLoad') }}
       </BaseButton>
 
diff --git a/src/components/nutrients/NutrientList.vue b/src/components/nutrients/NutrientList.vue
index a57ec07..fe8f267 100644
--- a/src/components/nutrients/NutrientList.vue
+++ b/src/components/nutrients/NutrientList.vue
@@ -4,6 +4,7 @@ import NutrientListItem from './NutrientListItem.vue'
 import NutrientModal from '../modals/NutrientModal.vue'
 import CalculatorSummary from '../calculator/CalculatorSummary.vue'
 import CalculatorControls from '../calculator/CalculatorControls.vue'
+import { useMealStore } from '@/stores/meal'
 import type { Nutrient } from '@/stores/meal'
 
 const props = defineProps<{
@@ -12,9 +13,17 @@ const props = defineProps<{
 
 const emit = defineEmits(['add', 'reset'])
 
+const store = useMealStore()
 const currentNutrient: Ref<Nutrient | null> = ref(null)
 const isModalOpen = ref(false)
 
+// Helper to check if a nutrient is empty/unmodified
+function isNutrientEmpty(nutrient: Nutrient): boolean {
+  const hasNoData = nutrient.quantity === 0 && nutrient.factor === 0
+  const hasDefaultName = nutrient.name === '' || nutrient.name === 'Aliment'
+  return hasNoData && hasDefaultName
+}
+
 async function handleAdd() {
   // Reset currentNutrient to ensure we get a fresh one from props
   currentNutrient.value = null
@@ -31,12 +40,16 @@ function modifyCurrentNutrient(id: string) {
   }
 }
 
-function handleModalClose() {
+async function handleModalClose() {
   isModalOpen.value = false
   if (!currentNutrient.value) return
 
+  // Check if the nutrient is still empty/unmodified
   const nutrientData = props.nutrients.find((item) => item.id === currentNutrient.value?.id)
-  if (nutrientData) {
+  if (nutrientData && isNutrientEmpty(nutrientData)) {
+    // Remove empty nutrient when cancelled
+    await store.removeNutrient(nutrientData.id)
+  } else if (nutrientData) {
     currentNutrient.value = nutrientData
   }
 }
diff --git a/src/components/search/NutrientSearch.vue b/src/components/search/NutrientSearch.vue
index 57b9d25..c5aee78 100644
--- a/src/components/search/NutrientSearch.vue
+++ b/src/components/search/NutrientSearch.vue
@@ -99,7 +99,7 @@ const handleSelect = (item: any) => {
         :aria-label="searchButtonLabel || $t('common.actions.search')"
         @click="triggerSearch"
       >
-        <SearchIcon class="w-5 h-5 mr-2" />
+        <SearchIcon class="w-5 h-5" />
         {{ searchButtonLabel || $t('common.actions.search') }}
       </BaseButton>
     </div>
diff --git a/src/composables/__tests__/useToast.test.ts b/src/composables/__tests__/useToast.test.ts
index 0dddec4..baf9840 100644
--- a/src/composables/__tests__/useToast.test.ts
+++ b/src/composables/__tests__/useToast.test.ts
@@ -1,8 +1,19 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
 import { useToast } from '@/composables/useToast'
 
+// Mock the notification store
+vi.mock('@/stores/notification', () => ({
+  useNotificationStore: () => ({
+    addNotification: vi.fn(() => 'mock-notification-id'),
+    removeNotification: vi.fn(),
+    markAsSeen: vi.fn()
+  })
+}))
+
 describe('useToast', () => {
   beforeEach(() => {
+    setActivePinia(createPinia())
     vi.clearAllTimers()
     vi.useFakeTimers()
   })
diff --git a/src/composables/useToast.ts b/src/composables/useToast.ts
index fa24134..4724e11 100644
--- a/src/composables/useToast.ts
+++ b/src/composables/useToast.ts
@@ -1,4 +1,5 @@
 import { ref, computed } from 'vue'
+import { useNotificationStore, type NotificationContext } from '@/stores/notification'
 
 export interface Toast {
   id: string
@@ -9,18 +10,36 @@ export interface Toast {
     label: string
     onClick: () => void
   }
+  /** Optional notification context for view-related notifications */
+  context?: NotificationContext
+  /** ID of the notification in the notification store (if any) */
+  notificationId?: string
 }
 
 const toasts = ref<Toast[]>([])
 let toastIdCounter = 0
 
 export function useToast() {
+  const notificationStore = useNotificationStore()
+
   const show = (toast: Omit<Toast, 'id'>): string => {
     const id = `toast-${++toastIdCounter}`
+
+    // If the toast has a context, register it in the notification store
+    let notificationId: string | undefined
+    if (toast.context) {
+      notificationId = notificationStore.addNotification(
+        toast.message,
+        toast.variant,
+        toast.context
+      )
+    }
+
     const newToast: Toast = {
       id,
       duration: 5000,
-      ...toast
+      ...toast,
+      notificationId
     }
 
     toasts.value.push(newToast)
@@ -35,9 +54,14 @@ export function useToast() {
     return id
   }
 
-  const dismiss = (id: string) => {
+  const dismiss = (id: string, markNotificationAsSeen = true) => {
     const index = toasts.value.findIndex((t) => t.id === id)
     if (index !== -1) {
+      const toast = toasts.value[index]
+      // If the toast was closed via X button, mark the notification as seen but keep it in the store
+      if (markNotificationAsSeen && toast.notificationId) {
+        notificationStore.markAsSeen(toast.notificationId)
+      }
       toasts.value.splice(index, 1)
     }
   }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 85b44d8..ec1e152 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -72,7 +72,8 @@
     "subjectSelector": {
       "allSubjects": "All Subjects",
       "noSubjects": "No subjects found",
-      "addSubject": "Add Subject"
+      "addSubject": "Add Subject",
+      "manageSubjects": "Manage Subjects"
     },
     "mealHistoryCard": {
       "actions": {
@@ -159,6 +160,9 @@
     "reload": "Reload",
     "close": "Close"
   },
+  "notifications": {
+    "clickToView": "Click to view"
+  },
   "pwa": {
     "updateAvailable": "A new version of the app is available. Go to Settings to update.",
     "offlineReady": "App is ready to work offline",
diff --git a/src/i18n/locales/fr.json b/src/i18n/locales/fr.json
index 5ecdbf6..34fd41c 100644
--- a/src/i18n/locales/fr.json
+++ b/src/i18n/locales/fr.json
@@ -72,7 +72,8 @@
     "subjectSelector": {
       "allSubjects": "Tous les sujets",
       "noSubjects": "Aucun sujet trouvé",
-      "addSubject": "Ajouter un sujet"
+      "addSubject": "Ajouter un sujet",
+      "manageSubjects": "Gérer les sujets"
     },
     "mealHistoryCard": {
       "actions": {
@@ -159,6 +160,9 @@
     "reload": "Recharger",
     "close": "Fermer"
   },
+  "notifications": {
+    "clickToView": "Cliquez pour voir"
+  },
   "pwa": {
     "updateAvailable": "Une nouvelle version de l'application est disponible. Allez dans Paramètres pour mettre à jour.",
     "offlineReady": "L'application est prête à fonctionner hors ligne",
diff --git a/src/router/index.ts b/src/router/index.ts
index a7bb405..a5f7de6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,4 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useNotificationStore } from '@/stores/notification'
 import HomeView from '../views/HomeView.vue'
 import CarbFactor from '@/views/CarbFactor.vue'
 import CalculatorView from '@/views/CalculatorView.vue'
@@ -48,4 +49,16 @@ const router = createRouter({
   ]
 })
 
+/**
+ * Global navigation guard to clear view-related notifications
+ * When a user visits a view, clear any notifications that should be cleared on visit
+ */
+router.afterEach((to) => {
+  const notificationStore = useNotificationStore()
+  // Clear notifications for the view being visited
+  if (to.path) {
+    notificationStore.clearNotificationsForView(to.path)
+  }
+})
+
 export default router
diff --git a/src/stores/__tests__/mealHistory.expanded.spec.ts b/src/stores/__tests__/mealHistory.expanded.spec.ts
index bab6026..9e95999 100644
--- a/src/stores/__tests__/mealHistory.expanded.spec.ts
+++ b/src/stores/__tests__/mealHistory.expanded.spec.ts
@@ -166,9 +166,7 @@ describe('Meal History Store - Expanded', () => {
 
       history.setSearchQuery('Meal 5')
 
-      expect(
-        history.filteredEntries.some((e) => (e.name ?? '').includes('Meal 5'))
-      ).toBe(true)
+      expect(history.filteredEntries.some((e) => (e.name ?? '').includes('Meal 5'))).toBe(true)
     })
 
     it('filters entries by tags', () => {
diff --git a/src/stores/__tests__/navigation.spec.ts b/src/stores/__tests__/navigation.spec.ts
index 87cd14a..17a9d7f 100644
--- a/src/stores/__tests__/navigation.spec.ts
+++ b/src/stores/__tests__/navigation.spec.ts
@@ -96,13 +96,14 @@ describe('navigation Store', () => {
       })
     })
 
-    it('includes calculator, history, carb factor, and settings in bottom nav', () => {
+    it('includes calculator, history, and carb factor in bottom nav', () => {
       const store = useNavigationStore()
       const paths = store.bottomNavItems.map((item) => item.to)
       expect(paths).toContain('/calculator')
       expect(paths).toContain('/history')
       expect(paths).toContain('/carb-factor')
-      expect(paths).toContain('/settings')
+      // Settings was moved to the overflow menu
+      expect(paths).not.toContain('/settings')
     })
 
     it('excludes home and about from bottom nav', () => {
diff --git a/src/stores/__tests__/notification.spec.ts b/src/stores/__tests__/notification.spec.ts
new file mode 100644
index 0000000..cce735c
--- /dev/null
+++ b/src/stores/__tests__/notification.spec.ts
@@ -0,0 +1,124 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useNotificationStore } from '../notification'
+
+describe('notification Store', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  describe('Notification Management', () => {
+    it('adds a notification', () => {
+      const store = useNotificationStore()
+      const id = store.addNotification('Test message', 'info', {
+        viewPath: '/settings',
+        clearOnVisit: true
+      })
+
+      expect(id).toBeDefined()
+      expect(store.notifications.length).toBe(1)
+      expect(store.notifications[0].message).toBe('Test message')
+      expect(store.notifications[0].variant).toBe('info')
+    })
+
+    it('removes a notification', () => {
+      const store = useNotificationStore()
+      const id = store.addNotification('Test message', 'info')
+
+      expect(store.notifications.length).toBe(1)
+
+      store.removeNotification(id)
+
+      expect(store.notifications.length).toBe(0)
+    })
+
+    it('marks notification as seen', () => {
+      const store = useNotificationStore()
+      const id = store.addNotification('Test message', 'info')
+
+      expect(store.notifications[0].seen).toBe(false)
+
+      store.markAsSeen(id)
+
+      expect(store.notifications[0].seen).toBe(true)
+    })
+
+    it('clears notifications for a view', () => {
+      const store = useNotificationStore()
+      store.addNotification('Test 1', 'info', {
+        viewPath: '/settings',
+        clearOnVisit: true
+      })
+      store.addNotification('Test 2', 'info', {
+        viewPath: '/settings',
+        clearOnVisit: true
+      })
+      store.addNotification('Test 3', 'info', {
+        viewPath: '/about',
+        clearOnVisit: true
+      })
+
+      expect(store.notifications.length).toBe(3)
+
+      store.clearNotificationsForView('/settings')
+
+      expect(store.notifications.length).toBe(1)
+      expect(store.notifications[0].message).toBe('Test 3')
+    })
+
+    it('checks if view has unseen notifications', () => {
+      const store = useNotificationStore()
+      store.addNotification('Test', 'info', {
+        viewPath: '/settings'
+      })
+
+      expect(store.hasUnseenNotifications('/settings')).toBe(true)
+      expect(store.hasUnseenNotifications('/about')).toBe(false)
+    })
+
+    it('gets unseen count for a view', () => {
+      const store = useNotificationStore()
+      store.addNotification('Test 1', 'info', {
+        viewPath: '/settings'
+      })
+      store.addNotification('Test 2', 'info', {
+        viewPath: '/settings'
+      })
+      const id = store.addNotification('Test 3', 'info', {
+        viewPath: '/settings'
+      })
+
+      expect(store.getUnseenCount('/settings')).toBe(3)
+
+      store.markAsSeen(id)
+
+      expect(store.getUnseenCount('/settings')).toBe(2)
+    })
+
+    it('clears all notifications', () => {
+      const store = useNotificationStore()
+      store.addNotification('Test 1', 'info')
+      store.addNotification('Test 2', 'error')
+      store.addNotification('Test 3', 'warning')
+
+      expect(store.notifications.length).toBe(3)
+
+      store.clearAll()
+
+      expect(store.notifications.length).toBe(0)
+    })
+
+    it('tracks total unseen count', () => {
+      const store = useNotificationStore()
+      store.addNotification('Test 1', 'info')
+      store.addNotification('Test 2', 'info')
+      const id = store.addNotification('Test 3', 'info')
+
+      expect(store.totalUnseenCount).toBe(3)
+
+      store.markAsSeen(id)
+
+      expect(store.totalUnseenCount).toBe(2)
+    })
+  })
+})
diff --git a/src/stores/navigation.ts b/src/stores/navigation.ts
index b31f168..320145f 100644
--- a/src/stores/navigation.ts
+++ b/src/stores/navigation.ts
@@ -14,6 +14,8 @@ import {
 export interface NavigationItem {
   to: string
   label: string
+  /** Short label for compact displays (desktop side rail) */
+  shortLabel?: string
   icon: Component
   showInBottomNav?: boolean
   showInSideRail?: boolean
@@ -30,6 +32,7 @@ export const useNavigationStore = defineStore('navigation', () => {
     {
       to: '/',
       label: t('navigation.home'),
+      shortLabel: 'Home',
       icon: HomeIcon,
       showInBottomNav: false,
       showInSideRail: true
@@ -37,6 +40,7 @@ export const useNavigationStore = defineStore('navigation', () => {
     {
       to: '/calculator',
       label: t('components.mealCalculator.title'),
+      shortLabel: 'Calc',
       icon: CalculatorIcon,
       showInBottomNav: true,
       showInSideRail: true
@@ -44,6 +48,7 @@ export const useNavigationStore = defineStore('navigation', () => {
     {
       to: '/history',
       label: t('navigation.history'),
+      shortLabel: 'History',
       icon: HistoryIcon,
       showInBottomNav: true,
       showInSideRail: true
@@ -51,6 +56,7 @@ export const useNavigationStore = defineStore('navigation', () => {
     {
       to: '/carb-factor',
       label: t('navigation.carbFactor'),
+      shortLabel: 'Search',
       icon: SearchIcon,
       showInBottomNav: true,
       showInSideRail: true
@@ -58,6 +64,7 @@ export const useNavigationStore = defineStore('navigation', () => {
     {
       to: '/about',
       label: t('navigation.about'),
+      shortLabel: 'About',
       icon: InfoIcon,
       showInBottomNav: false,
       showInSideRail: true
@@ -65,8 +72,9 @@ export const useNavigationStore = defineStore('navigation', () => {
     {
       to: '/settings',
       label: t('navigation.settings'),
+      shortLabel: 'Settings',
       icon: SettingsIcon,
-      showInBottomNav: true,
+      showInBottomNav: false, // Now in menu dropdown instead
       showInSideRail: true,
       showBadge: settingsBadge.value
     }
diff --git a/src/stores/notification.ts b/src/stores/notification.ts
new file mode 100644
index 0000000..8e78298
--- /dev/null
+++ b/src/stores/notification.ts
@@ -0,0 +1,161 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+/**
+ * Notification context - defines which view(s) a notification relates to
+ */
+export interface NotificationContext {
+  /** The route path this notification relates to (e.g., '/settings') */
+  viewPath: string
+  /** Optional: specific section within the view */
+  section?: string
+  /** Whether the notification should be cleared when the user visits the view */
+  clearOnVisit?: boolean
+}
+
+/**
+ * Notification with optional view context
+ */
+export interface Notification {
+  /** Unique identifier */
+  id: string
+  /** Notification message */
+  message: string
+  /** Notification type */
+  variant: 'success' | 'error' | 'warning' | 'info'
+  /** Optional context - which view(s) this notification relates to */
+  context?: NotificationContext
+  /** Whether this notification has been seen by the user */
+  seen?: boolean
+  /** Timestamp when notification was created */
+  createdAt: number
+}
+
+export const useNotificationStore = defineStore('notification', () => {
+  // Store all notifications
+  const notifications = ref<Notification[]>([])
+
+  // Track which views have been visited (to clear notifications)
+  const visitedViews = ref<Set<string>>(new Set())
+
+  // Counter for generating unique IDs
+  let notificationIdCounter = 0
+
+  /**
+   * Add a new notification
+   */
+  function addNotification(
+    message: string,
+    variant: 'success' | 'error' | 'warning' | 'info',
+    context?: NotificationContext
+  ): string {
+    const id = `notification-${++notificationIdCounter}`
+    const notification: Notification = {
+      id,
+      message,
+      variant,
+      context,
+      seen: false,
+      createdAt: Date.now()
+    }
+
+    notifications.value.push(notification)
+    return id
+  }
+
+  /**
+   * Remove a notification by ID
+   */
+  function removeNotification(id: string) {
+    const index = notifications.value.findIndex((n) => n.id === id)
+    if (index !== -1) {
+      notifications.value.splice(index, 1)
+    }
+  }
+
+  /**
+   * Mark a notification as seen (but don't remove it)
+   */
+  function markAsSeen(id: string) {
+    const notification = notifications.value.find((n) => n.id === id)
+    if (notification) {
+      notification.seen = true
+    }
+  }
+
+  /**
+   * Clear notifications for a specific view path
+   * Called when user visits a view to clear related notifications
+   */
+  function clearNotificationsForView(viewPath: string) {
+    // Mark the view as visited
+    visitedViews.value.add(viewPath)
+
+    // Remove notifications that should be cleared on visit
+    notifications.value = notifications.value.filter((notification) => {
+      if (notification.context?.viewPath === viewPath && notification.context.clearOnVisit) {
+        return false
+      }
+      return true
+    })
+  }
+
+  /**
+   * Get all notifications for a specific view path
+   */
+  function getNotificationsForView(viewPath: string): Notification[] {
+    return notifications.value.filter((n) => n.context?.viewPath === viewPath)
+  }
+
+  /**
+   * Get unseen notifications for a specific view path
+   */
+  function getUnseenNotificationsForView(viewPath: string): Notification[] {
+    return notifications.value.filter((n) => n.context?.viewPath === viewPath && !n.seen)
+  }
+
+  /**
+   * Check if a view has unseen notifications (for badge display)
+   */
+  function hasUnseenNotifications(viewPath: string): boolean {
+    return notifications.value.some((n) => n.context?.viewPath === viewPath && !n.seen)
+  }
+
+  /**
+   * Get count of unseen notifications for a view
+   */
+  function getUnseenCount(viewPath: string): number {
+    return notifications.value.filter((n) => n.context?.viewPath === viewPath && !n.seen).length
+  }
+
+  /**
+   * Clear all notifications
+   */
+  function clearAll() {
+    notifications.value = []
+  }
+
+  /**
+   * Computed: All active notifications
+   */
+  const activeNotifications = computed(() => notifications.value)
+
+  /**
+   * Computed: Count of all unseen notifications
+   */
+  const totalUnseenCount = computed(() => notifications.value.filter((n) => !n.seen).length)
+
+  return {
+    notifications: activeNotifications,
+    totalUnseenCount,
+    addNotification,
+    removeNotification,
+    markAsSeen,
+    clearNotificationsForView,
+    getNotificationsForView,
+    getUnseenNotificationsForView,
+    hasUnseenNotifications,
+    getUnseenCount,
+    clearAll
+  }
+})
diff --git a/src/views/MealHistoryView.vue b/src/views/MealHistoryView.vue
index ecf56d0..3feb1b5 100644
--- a/src/views/MealHistoryView.vue
+++ b/src/views/MealHistoryView.vue
@@ -84,11 +84,11 @@
           <div class="flex gap-2">
             <!-- Export/Import buttons -->
             <BaseButton variant="secondary" @click="handleExport">
-              <DownloadIcon class="w-4 h-4 mr-1" />
+              <DownloadIcon class="w-4 h-4" />
               {{ $t('views.mealHistory.actions.export') }}
             </BaseButton>
             <BaseButton variant="secondary" @click="handleImport">
-              <UploadIcon class="w-4 h-4 mr-1" />
+              <UploadIcon class="w-4 h-4" />
               {{ $t('views.mealHistory.actions.import') }}
             </BaseButton>
           </div>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index d679d93..7e9898d 100644
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -32,7 +32,7 @@ const goHome = () => {
 
       <!-- Action Button -->
       <BaseButton variant="primary" size="lg" @click="goHome">
-        <HomeIcon class="w-5 h-5 mr-2" />
+        <HomeIcon class="w-5 h-5" />
         {{ $t('navigation.home') }}
       </BaseButton>
     </BaseCard>