diff --git a/src/ui/app.ts b/src/ui/app.ts
index 789af15..24bc944 100644
--- a/src/ui/app.ts
+++ b/src/ui/app.ts
@@ -124,25 +124,15 @@ export class App {
               <summary class="cursor-pointer list-none hover:text-gold transition-colors flex items-center gap-1">${t.nav.library} <span class="text-xs">▾</span></summary>
               <div class="absolute left-0 top-full mt-1 z-50 min-w-56 rounded-lg bg-navy-light shadow-xl p-2 flex flex-col gap-1">
                 <a href="#bible" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="bible">${t.nav.bible}</a>
-                <details class="nav-group">
-                  <summary class="cursor-pointer list-none hover:text-gold transition-colors px-2 py-1 flex items-center gap-1">${t.nav.service} <span class="text-xs">▸</span></summary>
-                  <div class="ml-2 flex flex-col gap-1">
-                    <a href="#horologion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="horologion">${t.nav.horologion}</a>
-                    <a href="#sbornik" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="sbornik">${t.nav.sbornik}</a>
-                    <a href="#prayer" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="prayer">${t.nav.prayer}</a>
-                    <a href="#akathists" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="akathists">${t.nav.akathists}</a>
-                    <a href="#parimii" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="parimii">${t.nav.parimii}</a>
-                    <a href="#paraclete" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="paraclete">${t.nav.paraclete}</a>
-                    <a href="#irmologion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="irmologion">${t.nav.irmologion}</a>
-                  </div>
-                </details>
-                <details class="nav-group">
-                  <summary class="cursor-pointer list-none hover:text-gold transition-colors px-2 py-1 flex items-center gap-1">${t.nav.festal} <span class="text-xs">▸</span></summary>
-                  <div class="ml-2 flex flex-col gap-1">
-                    <a href="#menaion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="menaion">${t.nav.menaion}</a>
-                    <a href="#triodion" class="nav-link hover:text-gold transition-colors px-2 py-1 text-sm" data-view="triodion">${t.nav.triodion}</a>
-                  </div>
-                </details>
+                <a href="#prayer" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="prayer">${t.nav.prayer}</a>
+                <a href="#akathists" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="akathists">${t.nav.akathists}</a>
+                <a href="#horologion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="horologion">${t.nav.horologion}</a>
+                <a href="#sbornik" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="sbornik">${t.nav.sbornik}</a>
+                <a href="#parimii" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="parimii">${t.nav.parimii}</a>
+                <a href="#paraclete" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="paraclete">${t.nav.paraclete}</a>
+                <a href="#irmologion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="irmologion">${t.nav.irmologion}</a>
+                <a href="#menaion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="menaion">${t.nav.menaion}</a>
+                <a href="#triodion" class="nav-link hover:text-gold transition-colors px-2 py-1" data-view="triodion">${t.nav.triodion}</a>
               </div>
             </details>
             <a href="#settings" class="nav-link hover:text-gold transition-colors" data-view="settings">${t.nav.settings}</a>
diff --git a/src/ui/menaion-view.ts b/src/ui/menaion-view.ts
index aedcf81..851408f 100644
--- a/src/ui/menaion-view.ts
+++ b/src/ui/menaion-view.ts
@@ -56,7 +56,10 @@ export class MenaionView {
 
     this.container.innerHTML = `
       <div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
-        <h2 class="text-2xl font-bold text-red mb-2">${this.t.menaion.title}</h2>
+        <div class="flex flex-wrap gap-2 mb-4">
+          <button class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1 border border-gold bg-gold/10 text-navy font-bold">${this.t.nav.menaion}</button>
+          <button class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1 border border-gold/20 bg-white/50 text-navy hover:border-gold/50" data-view="triodion">${this.t.nav.triodion}</button>
+        </div>
         <div id="menaion-calendar"></div>
         <div id="menaion-content" class="bg-white/50 border border-gold/20 rounded-lg p-6 min-h-[300px]">
           <p class="text-navy-light italic">${this.t.prayer.selectSection}</p>
@@ -65,6 +68,15 @@ export class MenaionView {
     `;
 
     this.renderCalendar(this.currentMonth);
+    this.setupChips();
+  }
+
+  private setupChips() {
+    this.container.querySelectorAll('.sub-nav-chip[data-view]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        window.location.hash = btn.getAttribute('data-view')!;
+      });
+    });
   }
 
   private renderCalendar(month: number) {
diff --git a/src/ui/prayer-view.ts b/src/ui/prayer-view.ts
index c8edfcf..a23b203 100644
--- a/src/ui/prayer-view.ts
+++ b/src/ui/prayer-view.ts
@@ -190,34 +190,41 @@ export class PrayerView {
 
   async render() {
     const sections = this.getSections();
-    const isAkathists = this.collection === 'akathists';
-    const isParimii = this.collection === 'parimii';
-    const isHorologion = this.collection === 'horologion';
-    const isSbornik = this.collection === 'sbornik';
-    const isParaclete = this.collection === 'paraclete';
-    const isIrmologion = this.collection === 'irmologion';
     const isTriodion = this.collection === 'triodion';
-    const title = isTriodion ? this.t.triodion.title
-      : isAkathists ? this.t.akathists.title
-      : isParimii ? this.t.parimii.title
-      : isHorologion ? this.t.horologion.title
-      : isSbornik ? this.t.sbornik.title
-      : isParaclete ? this.t.paraclete.title
-      : isIrmologion ? this.t.irmologion.title
-      : this.t.prayer.title;
     const subtitle = isTriodion ? this.t.triodion.subtitle
-      : isAkathists ? this.t.akathists.subtitle
-      : isParimii ? this.t.parimii.subtitle
-      : isHorologion ? this.t.horologion.subtitle
-      : isSbornik ? this.t.sbornik.subtitle
-      : isParaclete ? this.t.paraclete.subtitle
-      : isIrmologion ? this.t.irmologion.subtitle
+      : this.collection === 'akathists' ? this.t.akathists.subtitle
+      : this.collection === 'parimii' ? this.t.parimii.subtitle
+      : this.collection === 'horologion' ? this.t.horologion.subtitle
+      : this.collection === 'sbornik' ? this.t.sbornik.subtitle
+      : this.collection === 'paraclete' ? this.t.paraclete.subtitle
+      : this.collection === 'irmologion' ? this.t.irmologion.subtitle
       : this.t.prayer.subtitle;
 
+    const subNavItems: { id: string; view: string; label: string }[] = [
+      { id: 'prayer', view: 'prayer', label: this.t.nav.prayer },
+      { id: 'akathists', view: 'akathists', label: this.t.nav.akathists },
+      { id: 'horologion', view: 'horologion', label: this.t.nav.horologion },
+      { id: 'sbornik', view: 'sbornik', label: this.t.nav.sbornik },
+      { id: 'parimii', view: 'parimii', label: this.t.nav.parimii },
+      { id: 'paraclete', view: 'paraclete', label: this.t.nav.paraclete },
+      { id: 'irmologion', view: 'irmologion', label: this.t.nav.irmologion },
+      { id: 'triodion', view: 'triodion', label: this.t.nav.triodion },
+    ];
+
     this.container.innerHTML = `
       <div class="p-6 max-w-4xl xl:max-w-6xl mx-auto">
-        <h2 class="text-2xl font-bold text-red mb-2">${title}</h2>
-        <p class="text-navy-light mb-4">${subtitle}</p>
+        <div class="flex flex-wrap gap-2 mb-4">
+          ${subNavItems.map(item => `
+            <button
+              class="sub-nav-chip text-sm transition-colors rounded-lg px-3 py-1
+                ${this.collection === item.id
+                  ? 'border border-gold bg-gold/10 text-navy font-bold'
+                  : 'border border-gold/20 bg-white/50 text-navy hover:border-gold/50'}"
+              data-view="${item.view}"
+            >${item.label}</button>
+          `).join('')}
+        </div>
+        <p class="text-navy-light text-sm mb-4">${subtitle}</p>
         <select id="prayer-select" class="w-full border border-gold/20 bg-white/50 text-navy rounded-lg px-3 py-2 text-sm mb-6">
           ${sections.map(s => `
             <option value="${s.id}" ${this.activeSection === s.id ? 'selected' : ''}>${s.name}</option>
@@ -229,6 +236,13 @@ export class PrayerView {
       </div>
     `;
 
+    this.container.querySelectorAll('.sub-nav-chip').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const view = btn.getAttribute('data-view')!;
+        window.location.hash = view;
+      });
+    });
+
     document.getElementById('prayer-select')?.addEventListener('change', (e) => {
       const id = (e.target as HTMLSelectElement).value;
       this.activeSection = id;