diff --git a/web/src/App.tsx b/web/src/App.tsx
index e736681..4f9e38e 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -1,5 +1,6 @@
 import { Component, createSignal, onCleanup, onMount, ParentComponent } from 'solid-js'
-import { A, Route, Router } from '@solidjs/router'
+import { A, Route, Router, useLocation } from '@solidjs/router'
+import { Menu, X } from 'lucide-solid'
 
 import styles from './css/menu.module.css';
 import { Country } from './pages/country/Country';
@@ -34,21 +35,49 @@ const App: Component = () => {
 
 const AppLayout: ParentComponent = (props) => {
     const [isScrolled, setIsScrolled] = createSignal(false)
-    const pages = [
-        ['/station', 'Stations'], ['/cities', 'City analysis'], ['/faktiska', 'Faktiskā'], ['/udens-temperatura', 'Ūdens temperatūra'], ['/latvia', 'Latvia overview'],
-        ['/database', 'Data archive'], ['/harmonie', 'HARMONIE'], ['/lvgmc-forecast', 'LVĢMC forecast'],
+    const [isMoreOpen, setIsMoreOpen] = createSignal(false)
+    const location = useLocation()
+    let moreMenu: HTMLDivElement | undefined
+    const primaryPages = [
+        ['/station', 'Stations'], ['/cities', 'City analysis'], ['/faktiska', 'Faktiskā'], ['/udens-temperatura', 'Ūdens temperatūra'],
     ]
+    const secondaryPages = [
+        ['/latvia', 'Latvia overview'], ['/database', 'Data archive'], ['/harmonie', 'HARMONIE'], ['/lvgmc-forecast', 'LVĢMC forecast'],
+    ]
+    const isSecondaryPage = () => secondaryPages.some(([path]) => location.pathname === path)
     onMount(() => {
         const updateHeader = () => setIsScrolled(window.scrollY > 24)
+        const closeMoreMenu = (event: PointerEvent) => {
+            if (isMoreOpen() && moreMenu && !moreMenu.contains(event.target as Node)) setIsMoreOpen(false)
+        }
+        const closeMoreMenuWithEscape = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') setIsMoreOpen(false)
+        }
         updateHeader()
         window.addEventListener('scroll', updateHeader, { passive: true })
-        onCleanup(() => window.removeEventListener('scroll', updateHeader))
+        document.addEventListener('pointerdown', closeMoreMenu)
+        document.addEventListener('keydown', closeMoreMenuWithEscape)
+        onCleanup(() => {
+            window.removeEventListener('scroll', updateHeader)
+            document.removeEventListener('pointerdown', closeMoreMenu)
+            document.removeEventListener('keydown', closeMoreMenuWithEscape)
+        })
     })
     return (
         <div class="appShell">
                 <header class={styles.header} classList={{[styles.scrolled]: isScrolled()}}>
-                    <A class={styles.brand} href="/"><span class={styles.brandMark}>W</span><span><strong>WeatherTool</strong><small>Weather data workspace</small></span></A>
-                    <nav aria-label="Main navigation"><ul class={styles.menu}>{pages.map(([path, label]) => <li><A href={path} activeClass={styles.active}>{label}</A></li>)}</ul></nav>
+                    <A class={styles.brand} href="/" aria-label="WeatherTool main menu" onClick={() => setIsMoreOpen(false)}><span class={styles.brandMark}>W</span><span class={styles.brandCopy}><strong>WeatherTool</strong><small>Weather data workspace</small></span></A>
+                    <nav class={styles.navigation} aria-label="Main navigation">
+                        <ul class={styles.menu}>{primaryPages.map(([path, label]) => <li><A href={path} activeClass={styles.active} onClick={() => setIsMoreOpen(false)}>{label}</A></li>)}</ul>
+                        <div class={styles.moreMenu} ref={moreMenu}>
+                            <button class={styles.moreButton} classList={{[styles.active]: isSecondaryPage()}} type="button" aria-label={isMoreOpen() ? 'Close additional navigation' : 'Open additional navigation'} aria-haspopup="menu" aria-expanded={isMoreOpen()} onClick={() => setIsMoreOpen(value => !value)}>
+                                {isMoreOpen() ? <X size={23} strokeWidth={2.2}/> : <Menu size={23} strokeWidth={2.2}/>}<span class={styles.moreLabel}>More</span>
+                            </button>
+                            <div class={styles.morePanel} classList={{[styles.open]: isMoreOpen()}} role="menu">
+                                {secondaryPages.map(([path, label]) => <A href={path} activeClass={styles.active} role="menuitem" onClick={() => setIsMoreOpen(false)}>{label}</A>)}
+                            </div>
+                        </div>
+                    </nav>
                 </header>
                 <main class="appContent">
                     {props.children}
diff --git a/web/src/css/menu.module.css b/web/src/css/menu.module.css
index 0cbdad9..f44f1df 100644
--- a/web/src/css/menu.module.css
+++ b/web/src/css/menu.module.css
@@ -1,5 +1,7 @@
-.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:34px;min-height:88px;padding:0 clamp(24px,3vw,58px);border-bottom:1px solid rgba(99,145,202,.22);background:linear-gradient(110deg,rgba(249,252,255,.9),rgba(224,238,255,.84),rgba(239,248,255,.9));box-shadow:0 8px 28px rgba(41,92,151,.04);backdrop-filter:blur(20px) saturate(125%);transition:min-height 280ms cubic-bezier(.23,1,.32,1),background 280ms,box-shadow 280ms,border-color 280ms}
-.header.scrolled{min-height:58px;border-color:rgba(79,127,185,.3);background:linear-gradient(110deg,rgba(246,251,255,.82),rgba(218,234,253,.78),rgba(235,246,255,.84));box-shadow:0 8px 26px rgba(31,77,132,.12);backdrop-filter:blur(24px) saturate(140%)}
-.brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;transition:gap 280ms,opacity 280ms}.brand:hover{opacity:.88}.brandMark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#4499e6,#15579b);color:#fff;font-family:Monda,sans-serif;font-size:23px;box-shadow:0 9px 22px rgba(26,91,157,.28),0 0 0 5px rgba(52,137,216,.08);transition:width 280ms,height 280ms,border-radius 280ms,font-size 280ms,box-shadow 280ms}.brand strong,.brand small{display:block;white-space:nowrap}.brand strong{font-size:18px;letter-spacing:-.01em;transition:font-size 280ms}.brand small{max-height:18px;margin-top:3px;color:var(--text-muted);font-size:12px;opacity:1;overflow:hidden;transition:max-height 240ms,margin 240ms,opacity 180ms}.scrolled .brand{gap:10px}.scrolled .brandMark{width:36px;height:36px;border-radius:10px;font-size:18px;box-shadow:0 5px 13px rgba(26,91,157,.22)}.scrolled .brand strong{font-size:15px}.scrolled .brand small{max-height:0;margin-top:0;opacity:0}
-.menu{display:flex;align-items:center;gap:5px;margin:0;padding:0;list-style:none}.menu li{margin:0;padding:0}.menu a{position:relative;display:block;padding:11px 13px;border-radius:10px;color:var(--text-muted);font-size:14px;font-weight:700;text-decoration:none;transition:padding 280ms,font-size 280ms,color 180ms,background 180ms,transform 180ms}.menu a:after{content:"";position:absolute;right:13px;bottom:5px;left:13px;height:2px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleX(.35);transition:opacity 180ms,transform 220ms}.menu a:hover{background:rgba(255,255,255,.5);color:var(--text);transform:translateY(-1px)}.menu a.active{background:rgba(224,239,255,.78);color:var(--accent-strong)}.menu a.active:after{opacity:1;transform:scaleX(1)}.scrolled .menu a{padding:8px 11px;font-size:12.5px}.scrolled .menu a:after{right:11px;bottom:3px;left:11px}
-@media(max-width:1120px){.header{align-items:flex-start;flex-direction:column;gap:10px;padding:14px 20px}.header.scrolled{min-height:auto;padding-block:9px}.menu{max-width:100%;overflow-x:auto}.menu a{white-space:nowrap}.brand small,.scrolled .brand small{max-height:0;margin:0;opacity:0}}
+.header{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:34px;height:82px;padding:0 clamp(24px,3vw,58px);border-bottom:1px solid rgba(99,145,202,.22);background:linear-gradient(110deg,rgba(249,252,255,.9),rgba(224,238,255,.84),rgba(239,248,255,.9));box-shadow:0 8px 28px rgba(41,92,151,.04);backdrop-filter:blur(20px) saturate(125%);transition:background 280ms,box-shadow 280ms,border-color 280ms}
+.header.scrolled{border-color:rgba(79,127,185,.3);background:linear-gradient(110deg,rgba(246,251,255,.82),rgba(218,234,253,.78),rgba(235,246,255,.84));box-shadow:0 8px 26px rgba(31,77,132,.12);backdrop-filter:blur(24px) saturate(140%)}
+.brand{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none;transition:opacity 180ms}.brand:hover{opacity:.88}.brandMark{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(145deg,#4499e6,#15579b);color:#fff;font-family:Monda,sans-serif;font-size:23px;box-shadow:0 9px 22px rgba(26,91,157,.28),0 0 0 5px rgba(52,137,216,.08);transform-origin:left center;transition:transform 280ms cubic-bezier(.23,1,.32,1),box-shadow 280ms}.brandCopy{width:190px;transform-origin:left center;transition:transform 280ms cubic-bezier(.23,1,.32,1),opacity 220ms}.brand strong,.brand small{display:block;white-space:nowrap}.brand strong{font-size:18px;letter-spacing:-.01em}.brand small{margin-top:3px;color:var(--text-muted);font-size:12px}.scrolled .brandMark{transform:scale(.8);box-shadow:0 5px 13px rgba(26,91,157,.22)}.scrolled .brandCopy{transform:translateX(-7px) scale(.88);opacity:.82}
+.navigation,.menu{display:flex;align-items:center}.navigation{gap:8px}.menu{gap:5px;margin:0;padding:0;list-style:none}.menu li{margin:0;padding:0}.menu a,.moreButton,.morePanel a{font-size:14px;font-weight:700}.menu a{position:relative;display:block;padding:10px 13px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 180ms,background 180ms,transform 180ms}.menu a:after{content:"";position:absolute;right:13px;bottom:4px;left:13px;height:2px;border-radius:2px;background:var(--accent);opacity:0;transform:scaleX(.35);transition:opacity 180ms,transform 220ms}.menu a:hover{background:rgba(255,255,255,.5);color:var(--text);transform:translateY(-1px)}.menu a.active{background:rgba(224,239,255,.78);color:var(--accent-strong)}.menu a.active:after{opacity:1;transform:scaleX(1)}
+.moreMenu{position:relative}.moreButton{display:flex;align-items:center;justify-content:center;gap:8px;min-width:48px;height:44px;padding:0 12px;border:1px solid rgba(88,134,187,.24);border-radius:12px;background:rgba(255,255,255,.56);color:var(--text-muted);cursor:pointer;transition:color 180ms,background 180ms,border-color 180ms,transform 180ms}.moreButton:hover,.moreButton.active{border-color:rgba(42,119,199,.36);background:rgba(224,239,255,.88);color:var(--accent-strong)}.moreButton:hover{transform:translateY(-1px)}.moreLabel{font-size:13px}.morePanel{position:absolute;top:calc(100% + 10px);right:0;display:grid;min-width:230px;padding:8px;border:1px solid rgba(87,133,185,.28);border-radius:15px;background:rgba(247,251,255,.97);box-shadow:0 18px 50px rgba(25,65,110,.2);opacity:0;visibility:hidden;transform:translateY(-7px) scale(.98);transform-origin:top right;transition:opacity 160ms,transform 180ms,visibility 160ms;backdrop-filter:blur(22px)}.morePanel.open{opacity:1;visibility:visible;transform:none}.morePanel a{padding:12px 14px;border-radius:10px;color:var(--text-muted);text-decoration:none;transition:color 160ms,background 160ms}.morePanel a:hover,.morePanel a.active{background:rgba(222,238,255,.88);color:var(--accent-strong)}
+@media(max-width:980px){.header{gap:16px;padding-inline:20px}.brandCopy{width:auto}.brand small{display:none}.moreLabel{display:none}.menu a{padding-inline:9px;font-size:13px}}
+@media(max-width:760px){.header{height:auto;min-height:74px;align-items:flex-start;flex-direction:column;padding-block:12px}.navigation{width:100%}.menu{max-width:calc(100% - 58px);overflow-x:auto}.menu a{white-space:nowrap}.moreMenu{margin-left:auto}.morePanel{position:fixed;top:132px;right:16px;left:16px}}