diff --git a/site/src/app.css b/site/src/app.css
index f1d8c73..b480fdf 100644
--- a/site/src/app.css
+++ b/site/src/app.css
@@ -1 +1,9 @@
 @import "tailwindcss";
+
+html, body {
+	overflow: hidden;
+	height: 100%;
+	width: 100%;
+	position: fixed;
+	overscroll-behavior: none;
+}
diff --git a/site/src/lib/app.ts b/site/src/lib/app.ts
index ea0e048..fa84cae 100644
--- a/site/src/lib/app.ts
+++ b/site/src/lib/app.ts
@@ -1,10 +1,10 @@
-import { Data, Effect, Schema } from "effect";
+import { Data, Effect, Schema, Option } from "effect";
 import type { BibleBook } from "$lib/book";
 import { BibleBookSchema, getDisplayName as getBibleBookDisplayName, getShortName } from "$lib/book";
 import type { Translation } from "$lib/translations/translation";
 import { TranslationSchema } from "$lib/translations/translation";
 
-// Effect Schema definitions - App content without IDs
+// Effect Schema definitions - App-specific state
 export const BibleStateSchema = Schema.Struct({
 	currentBook: BibleBookSchema,
 	currentChapter: Schema.Number,
@@ -17,8 +17,8 @@ export const StopwatchStateSchema = Schema.Struct({
 	isRunning: Schema.Boolean
 });
 
-// App content schema - just the app-specific data
-export const AppContentSchema = Schema.Union(
+// App schema - represents the application running in a tab
+export const AppSchema = Schema.Union(
 	Schema.Struct({
 		_tag: Schema.Literal("Bible"),
 		bibleState: BibleStateSchema
@@ -35,30 +35,43 @@ export const AppContentSchema = Schema.Union(
 	})
 );
 
-// Tab schema - combines ID with app content
-export const TabSchema = Schema.Struct({
+// TabState schema - combines ID with app
+export const TabStateSchema = Schema.Struct({
 	id: Schema.String,
-	app: AppContentSchema
+	app: AppSchema
 });
 
-// Type exports
-export type BibleState = Schema.Schema.Type<typeof BibleStateSchema>;
-export type StopwatchState = Schema.Schema.Type<typeof StopwatchStateSchema>;
-export type AppContent = Schema.Schema.Type<typeof AppContentSchema>;
-export type Tab = Schema.Schema.Type<typeof TabSchema>;
+// TabsState schema - the complete tabs system state
+export const TabsStateSchema = Schema.Struct({
+	tabs: Schema.Array(TabStateSchema),
+	activeTabId: Schema.String,
+	nextTabId: Schema.Number
+});
+
+// Helper type to make deeply readonly types writable (for Svelte $state compatibility)
+type DeepWritable<T> = T extends object
+	? { -readonly [P in keyof T]: DeepWritable<T[P]> }
+	: T;
+
+// Type exports - Schema.Type generates readonly types, make them writable for $state
+type BibleStateReadonly = Schema.Schema.Type<typeof BibleStateSchema>;
+type StopwatchStateReadonly = Schema.Schema.Type<typeof StopwatchStateSchema>;
+type AppReadonly = Schema.Schema.Type<typeof AppSchema>;
+type TabStateReadonly = Schema.Schema.Type<typeof TabStateSchema>;
+type TabsStateReadonly = Schema.Schema.Type<typeof TabsStateSchema>;
 
+export type BibleState = DeepWritable<BibleStateReadonly>;
+export type StopwatchState = DeepWritable<StopwatchStateReadonly>;
+export type App = DeepWritable<AppReadonly>;
+export type TabState = DeepWritable<TabStateReadonly>;
+export type TabsState = DeepWritable<TabsStateReadonly>;
 
 // Maintain backward compatibility with Data constructors
 export const BibleState = Data.case<BibleState>();
 export const StopwatchState = Data.case<StopwatchState>();
 
-// AppContent constructors
-export const { Bible, About, ChooseApp, Stopwatch, $match } = Data.taggedEnum<AppContent>()
-
-// Tab ID management using Effect
-export const getTabId = (tab: Tab): string => {
-	return tab.id;
-};
+// App constructors
+export const { Bible, About, ChooseApp, Stopwatch, $match } = Data.taggedEnum<App>()
 
 // Format time as MM:SS for tab title
 const formatTimeForTitle = (milliseconds: number): string => {
@@ -68,77 +81,172 @@ const formatTimeForTitle = (milliseconds: number): string => {
 	return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 };
 
-// Get display name for Tab (tab title) using $match
-export const getDisplayName = (tab: Tab): string => {
-	return $match(tab.app, {
-		Bible: ({ bibleState }) => `${getBibleBookDisplayName(bibleState.currentBook)} ${bibleState.currentChapter} (${bibleState.translation.metadata.shortName})`,
-		About: () => "About",
-		ChooseApp: () => "Choose App",
-		Stopwatch: ({ stopwatchState }) => {
-			if (stopwatchState.elapsedTime > 0 || stopwatchState.isRunning) {
-				return formatTimeForTitle(stopwatchState.elapsedTime);
+// App namespace - operations on App type
+export namespace App {
+	export const getUrl = (app: App): string => {
+		return $match(app, {
+			Bible: ({ bibleState }) => {
+				const bookShort = getShortName(bibleState.currentBook);
+				return `/${bookShort}/${bibleState.currentChapter}`;
+			},
+			About: () => "/about",
+			ChooseApp: () => "/",
+			Stopwatch: () => "/stopwatch"
+		});
+	};
+
+	export const getTitle = (app: App): string => {
+		return $match(app, {
+			Bible: ({ bibleState }) => `${getBibleBookDisplayName(bibleState.currentBook)} ${bibleState.currentChapter} (${bibleState.translation.metadata.shortName})`,
+			About: () => "About",
+			ChooseApp: () => "Choose App",
+			Stopwatch: ({ stopwatchState }) => {
+				if (stopwatchState.elapsedTime > 0 || stopwatchState.isRunning) {
+					return formatTimeForTitle(stopwatchState.elapsedTime);
+				}
+				return "Stopwatch";
 			}
-			return "Stopwatch";
-		}
-	});
+		});
+	};
+}
+
+// TabsState namespace - operations on TabsState type
+export namespace TabsState {
+	export const addTab = (state: TabsState, app: App): Effect.Effect<TabsState> => {
+		return Effect.sync(() => {
+			const tabId = `tab${state.nextTabId}`;
+			const newTab: TabState = { id: tabId, app };
+
+			return {
+				tabs: [...state.tabs, newTab],
+				activeTabId: tabId,
+				nextTabId: state.nextTabId + 1
+			};
+		});
+	};
+
+	export const removeTab = (state: TabsState, tabId: string): Effect.Effect<TabsState> => {
+		return Effect.sync(() => {
+			// Don't allow removing last tab
+			if (state.tabs.length === 1) {
+				return state;
+			}
+
+			const newTabs = state.tabs.filter(tab => tab.id !== tabId);
+
+			// If removing active tab, switch to first tab
+			const newActiveTabId = state.activeTabId === tabId
+				? newTabs[0]?.id ?? state.activeTabId
+				: state.activeTabId;
+
+			return {
+				tabs: newTabs,
+				activeTabId: newActiveTabId,
+				nextTabId: state.nextTabId
+			};
+		});
+	};
+
+	export const setActiveTab = (state: TabsState, tabId: string): Effect.Effect<TabsState> => {
+		return Effect.sync(() => {
+			// Verify tab exists
+			const tabExists = state.tabs.some(tab => tab.id === tabId);
+			if (!tabExists) {
+				console.error(`Tab ${tabId} not found`);
+				return state;
+			}
+
+			return {
+				...state,
+				activeTabId: tabId
+			};
+		});
+	};
+
+	export const nextTab = (state: TabsState): Effect.Effect<TabsState> => {
+		return Effect.sync(() => {
+			const currentIndex = state.tabs.findIndex(tab => tab.id === state.activeTabId);
+			if (currentIndex === -1) return state;
+
+			const nextIndex = (currentIndex + 1) % state.tabs.length;
+			return {
+				...state,
+				activeTabId: state.tabs[nextIndex].id
+			};
+		});
+	};
+
+	export const previousTab = (state: TabsState): Effect.Effect<TabsState> => {
+		return Effect.sync(() => {
+			const currentIndex = state.tabs.findIndex(tab => tab.id === state.activeTabId);
+			if (currentIndex === -1) return state;
+
+			const prevIndex = currentIndex === 0 ? state.tabs.length - 1 : currentIndex - 1;
+			return {
+				...state,
+				activeTabId: state.tabs[prevIndex].id
+			};
+		});
+	};
+
+	export const updateTab = (state: TabsState, updatedTab: TabState): Effect.Effect<TabsState> => {
+		return Effect.sync(() => {
+			return {
+				...state,
+				tabs: state.tabs.map(tab => tab.id === updatedTab.id ? updatedTab : tab)
+			};
+		});
+	};
+
+	export const getActiveTab = (state: TabsState): Option.Option<TabState> => {
+		const tab = state.tabs.find(t => t.id === state.activeTabId);
+		return tab ? Option.some(tab) : Option.none();
+	};
+}
+
+
+// Create tab configuration types
+export type CreateTabConfig =
+	| { app: "Bible", id: string, book: BibleBook, chapter: number, translation: Translation, showCanonExplorer: boolean }
+	| { app: "Stopwatch", id: string }
+	| { app: "About", id: string }
+	| { app: "ChooseApp", id: string };
+
+// Unified tab creation function
+export const createTab = (config: CreateTabConfig): Effect.Effect<TabState> => {
+	switch (config.app) {
+		case "Bible":
+			return Effect.succeed({
+				id: config.id,
+				app: Bible({
+					bibleState: BibleState({
+						currentBook: config.book,
+						currentChapter: config.chapter,
+						translation: config.translation as any, // Translation types are readonly but compatible
+						showCanonExplorer: config.showCanonExplorer
+					})
+				})
+			});
+		case "Stopwatch":
+			return Effect.succeed({
+				id: config.id,
+				app: Stopwatch({
+					stopwatchState: StopwatchState({
+						elapsedTime: 0,
+						isRunning: false
+					})
+				})
+			});
+		case "About":
+			return Effect.succeed({
+				id: config.id,
+				app: About()
+			});
+		case "ChooseApp":
+			return Effect.succeed({
+				id: config.id,
+				app: ChooseApp()
+			});
+	}
 };
 
-// Tab state transformations using Effect
-export const transformTab = (tab: Tab, transform: (tab: Tab) => Tab): Effect.Effect<Tab> =>
-	Effect.succeed(transform(tab));
-
-export const createBibleTab = (
-	id: string,
-	book: BibleBook,
-	chapter: number,
-	translation: Translation,
-	showCanonExplorer: boolean
-): Effect.Effect<Tab> =>
-	Effect.succeed({
-		id,
-		app: Bible({
-			bibleState: BibleState({
-				currentBook: book,
-				currentChapter: chapter,
-				translation,
-				showCanonExplorer
-			})
-		})
-	});
-
-export const createAboutTab = (id: string): Effect.Effect<Tab> =>
-	Effect.succeed({
-		id,
-		app: About()
-	});
-
-export const createChooseTab = (id: string): Effect.Effect<Tab> =>
-	Effect.succeed({
-		id,
-		app: ChooseApp()
-	});
-
-export const createStopwatchTab = (id: string): Effect.Effect<Tab> =>
-	Effect.succeed({
-		id,
-		app: Stopwatch({
-			stopwatchState: StopwatchState({
-				elapsedTime: 0,
-				isRunning: false
-			})
-		})
-	});
-
-
-// Map Tab instances to their corresponding URLs
-export const getTabUrl = (tab: Tab): string => {
-	return $match(tab.app, {
-		Bible: ({ bibleState }) => {
-			const bookShort = getShortName(bibleState.currentBook);
-			return `/${bookShort}/${bibleState.currentChapter}`;
-		},
-		About: () => "/about",
-		ChooseApp: () => "/", // Default to home for choose app
-		Stopwatch: () => "/stopwatch"
-	});
-};
\ No newline at end of file
diff --git a/site/src/lib/components/AppContainer.svelte b/site/src/lib/components/AppContainer.svelte
index 5001ac8..69fbe52 100644
--- a/site/src/lib/components/AppContainer.svelte
+++ b/site/src/lib/components/AppContainer.svelte
@@ -2,14 +2,12 @@
 	import type { Translation } from "$lib/translations/translation";
 	import { BibleBook } from "$lib/book";
 	import {
-		type Tab,
-		getTabId,
-		getTabUrl,
-		getDisplayName,
-		createBibleTab,
-		createAboutTab,
-		createChooseTab,
-		createStopwatchTab
+		type TabsState,
+		type TabState,
+		App,
+		TabsState as TabsStateNS,
+		createTab,
+		ChooseApp
 	} from "$lib/app";
 	import { NavigationServiceLive } from "$lib/services/NavigationService";
 	import { ResponsiveServiceLive } from "$lib/services/ResponsiveService";
@@ -17,134 +15,138 @@
 	import TabContent from "$lib/components/tabs/TabContent.svelte";
 	import { page } from "$app/stores";
 	import { onMount } from "svelte";
-	import { Effect } from "effect";
+	import { Effect, Option } from "effect";
 
 	let { translation }: { translation: Translation } = $props();
 
-	// State management
-	let tabs = $state<Tab[]>([]);
-	let activeTabId = $state<string>("tab1");
-	let nextTabId = $state<number>(2);
+	// State management - single source of truth
+	let tabsState = $state<TabsState>({
+		tabs: [],
+		activeTabId: "tab1",
+		nextTabId: 2
+	});
 
 	// Initialize the first tab using Effect
 	async function initializeTab() {
-		try {
-			const initialState = await Effect.runPromise(NavigationServiceLive.getInitialState());
-			
-			let initialTab: Tab;
-			if (initialState.isAbout) {
-				// Create About tab if URL is /about
-				initialTab = await Effect.runPromise(createAboutTab("tab1"));
-			} else if (initialState.isStopwatch) {
-				// Create Stopwatch tab if URL is /stopwatch
-				initialTab = await Effect.runPromise(createStopwatchTab("tab1"));
-			} else {
-				// Create Bible tab with parsed book/chapter
-				const canonState = await Effect.runPromise(ResponsiveServiceLive.getInitialCanonState());
-				initialTab = await Effect.runPromise(
-					createBibleTab(
-						"tab1", 
-						initialState.book, 
-						initialState.chapter, 
-						translation, 
-						canonState
-					)
-				);
-			}
-			
-			tabs = [initialTab];
-		} catch (error) {
-			console.error("Failed to initialize tab:", error);
-			// Fallback to default
-			const fallbackTab = await Effect.runPromise(
-				createBibleTab("tab1", BibleBook.John, 1, translation, true)
+		const initialState = await Effect.runPromise(NavigationServiceLive.getInitialState())
+			.catch(error => {
+				console.error("Failed to get initial state:", error);
+				return { book: BibleBook.John, chapter: 1, isAbout: false, isStopwatch: false };
+			});
+
+		let initialTab: TabState;
+		if (initialState.isAbout) {
+			// Create About tab if URL is /about
+			initialTab = await Effect.runPromise(createTab({ app: "About", id: "tab1" }));
+		} else if (initialState.isStopwatch) {
+			// Create Stopwatch tab if URL is /stopwatch
+			initialTab = await Effect.runPromise(createTab({ app: "Stopwatch", id: "tab1" }));
+		} else {
+			// Create Bible tab with parsed book/chapter
+			const canonState = await Effect.runPromise(ResponsiveServiceLive.getInitialCanonState());
+			initialTab = await Effect.runPromise(
+				createTab({
+					app: "Bible",
+					id: "tab1",
+					book: initialState.book,
+					chapter: initialState.chapter,
+					translation,
+					showCanonExplorer: canonState
+				})
 			);
-			tabs = [fallbackTab];
 		}
+
+		tabsState.tabs = [initialTab];
 	}
 
-	// Get active tab reference
-	let activeTab = $derived(tabs.find(tab => getTabId(tab) === activeTabId));
+	// Get active tab reference - derived from tabsState
+	let activeTabOption = $derived(TabsStateNS.getActiveTab(tabsState));
 
 	// Update browser title when active tab changes
 	$effect(() => {
-		if (activeTab && typeof document !== 'undefined') {
-			document.title = getDisplayName(activeTab);
+		if (Option.isSome(activeTabOption) && typeof document !== 'undefined') {
+			document.title = App.getTitle(activeTabOption.value.app);
 		}
 	});
 
 	// Update tab state
-	function updateTabState(updatedTab: Tab) {
-		const tabId = getTabId(updatedTab);
-		tabs = tabs.map(tab => getTabId(tab) === tabId ? updatedTab : tab);
-		
-		// Update URL if this is the active tab
-		if (tabId === activeTabId) {
-			const url = getTabUrl(updatedTab);
-			Effect.runPromise(NavigationServiceLive.navigateToUrl(url));
-		}
+	function updateTabState(updatedTab: TabState) {
+		Effect.runPromise(TabsStateNS.updateTab(tabsState, updatedTab))
+			.then(newState => {
+				tabsState = newState;
+
+				// Update URL if this is the active tab
+				if (updatedTab.id === tabsState.activeTabId) {
+					const url = App.getUrl(updatedTab.app);
+					Effect.runPromise(NavigationServiceLive.navigateToUrl(url))
+						.catch(error => console.error("Failed to navigate:", error));
+				}
+			})
+			.catch(error => console.error("Failed to update tab:", error));
 	}
 
 	// Add new tab
-	async function addTab() {
-		try {
-			const tabId = `tab${nextTabId}`;
-			const newTab = await Effect.runPromise(createChooseTab(tabId));
-			tabs = [...tabs, newTab];
-			activeTabId = tabId;
-			nextTabId++;
-		} catch (error) {
-			console.error("Failed to add tab:", error);
-		}
+	function addTab() {
+		Effect.runPromise(TabsStateNS.addTab(tabsState, ChooseApp()))
+			.then(newState => {
+				tabsState = newState;
+			})
+			.catch(error => console.error("Failed to add tab:", error));
 	}
 
 	// Remove tab
-	async function removeTab(tabId: string) {
-		if (tabs.length === 1) return;
-		
-		// Clean up background tasks for the removed tab (no longer needed with simplified approach)
-		
-		tabs = tabs.filter(tab => getTabId(tab) !== tabId);
-		
-		if (activeTabId === tabId) {
-			const firstTab = tabs[0];
-			if (firstTab) {
-				activeTabId = getTabId(firstTab);
-			}
-		}
+	function removeTab(tabId: string) {
+		Effect.runPromise(TabsStateNS.removeTab(tabsState, tabId))
+			.then(newState => {
+				tabsState = newState;
+			})
+			.catch(error => console.error("Failed to remove tab:", error));
 	}
 
 	// Set active tab
 	function setActiveTab(tabId: string) {
-		activeTabId = tabId;
-		
-		// Update URL for any tab type using the mapping function
-		const tab = tabs.find(tab => getTabId(tab) === tabId);
-		if (tab) {
-			const url = getTabUrl(tab);
-			Effect.runPromise(NavigationServiceLive.navigateToUrl(url));
-		}
+		Effect.runPromise(TabsStateNS.setActiveTab(tabsState, tabId))
+			.then(newState => {
+				tabsState = newState;
+
+				// Update URL
+				const activeTabOption = TabsStateNS.getActiveTab(newState);
+				if (Option.isSome(activeTabOption)) {
+					const url = App.getUrl(activeTabOption.value.app);
+					Effect.runPromise(NavigationServiceLive.navigateToUrl(url))
+						.catch(error => console.error("Failed to navigate:", error));
+				}
+			})
+			.catch(error => console.error("Failed to set active tab:", error));
 	}
 
 	// Tab navigation functions
 	function goToNextTab() {
-		const currentIndex = tabs.findIndex(tab => getTabId(tab) === activeTabId);
-		if (currentIndex !== -1 && currentIndex < tabs.length - 1) {
-			setActiveTab(getTabId(tabs[currentIndex + 1]));
-		} else if (tabs.length > 1) {
-			// Wrap to first tab
-			setActiveTab(getTabId(tabs[0]));
-		}
+		Effect.runPromise(TabsStateNS.nextTab(tabsState))
+			.then(newState => {
+				tabsState = newState;
+				const activeTabOption = TabsStateNS.getActiveTab(newState);
+				if (Option.isSome(activeTabOption)) {
+					const url = App.getUrl(activeTabOption.value.app);
+					Effect.runPromise(NavigationServiceLive.navigateToUrl(url))
+						.catch(error => console.error("Failed to navigate:", error));
+				}
+			})
+			.catch(error => console.error("Failed to navigate to next tab:", error));
 	}
 
 	function goToPreviousTab() {
-		const currentIndex = tabs.findIndex(tab => getTabId(tab) === activeTabId);
-		if (currentIndex > 0) {
-			setActiveTab(getTabId(tabs[currentIndex - 1]));
-		} else if (tabs.length > 1) {
-			// Wrap to last tab
-			setActiveTab(getTabId(tabs[tabs.length - 1]));
-		}
+		Effect.runPromise(TabsStateNS.previousTab(tabsState))
+			.then(newState => {
+				tabsState = newState;
+				const activeTabOption = TabsStateNS.getActiveTab(newState);
+				if (Option.isSome(activeTabOption)) {
+					const url = App.getUrl(activeTabOption.value.app);
+					Effect.runPromise(NavigationServiceLive.navigateToUrl(url))
+						.catch(error => console.error("Failed to navigate:", error));
+				}
+			})
+			.catch(error => console.error("Failed to navigate to previous tab:", error));
 	}
 
 	// Handle keyboard shortcuts
@@ -166,78 +168,93 @@
 			goToPreviousTab();
 		} else if (event.key === 'w') {
 			event.preventDefault();
-			removeTab(activeTabId);
+			removeTab(tabsState.activeTabId);
 		}
 	}
 
 	// Handle app choice in ChooseApp tabs
 	async function handleAppChoice(appType: "bible" | "about" | "stopwatch") {
-		try {
-			const tabIndex = tabs.findIndex(tab => getTabId(tab) === activeTabId);
-			if (tabIndex === -1) return;
-
-			let newTab: Tab;
-			if (appType === "bible") {
-				const canonState = await Effect.runPromise(ResponsiveServiceLive.getInitialCanonState());
-				newTab = await Effect.runPromise(
-					createBibleTab(activeTabId, BibleBook.John, 1, translation, canonState)
-				);
-			} else if (appType === "about") {
-				newTab = await Effect.runPromise(createAboutTab(activeTabId));
-			} else if (appType === "stopwatch") {
-				newTab = await Effect.runPromise(createStopwatchTab(activeTabId));
-			} else {
-				throw new Error(`Unknown app type: ${appType}`);
-			}
-			
-			tabs = tabs.map((tab, index) => index === tabIndex ? newTab : tab);
-			
-			// Update URL using the mapping function
-			const url = getTabUrl(newTab);
-			Effect.runPromise(NavigationServiceLive.navigateToUrl(url));
-		} catch (error) {
-			console.error("Failed to handle app choice:", error);
+		const tabIndex = tabsState.tabs.findIndex(tab => tab.id === tabsState.activeTabId);
+		if (tabIndex === -1) return;
+
+		let newTab: TabState;
+		if (appType === "bible") {
+			const canonState = await Effect.runPromise(ResponsiveServiceLive.getInitialCanonState());
+			newTab = await Effect.runPromise(
+				createTab({
+					app: "Bible",
+					id: tabsState.activeTabId,
+					book: BibleBook.John,
+					chapter: 1,
+					translation,
+					showCanonExplorer: canonState
+				})
+			);
+		} else if (appType === "about") {
+			newTab = await Effect.runPromise(createTab({ app: "About", id: tabsState.activeTabId }));
+		} else if (appType === "stopwatch") {
+			newTab = await Effect.runPromise(createTab({ app: "Stopwatch", id: tabsState.activeTabId }));
+		} else {
+			console.error(`Unknown app type: ${appType}`);
+			return;
 		}
+
+		tabsState.tabs = tabsState.tabs.map((tab, index) => index === tabIndex ? newTab : tab);
+
+		// Update URL using the mapping function
+		const url = App.getUrl(newTab.app);
+		Effect.runPromise(NavigationServiceLive.navigateToUrl(url))
+			.catch(error => console.error("Failed to navigate:", error));
 	}
 
 	// Handle browser navigation
 	async function syncFromURL() {
-		try {
-			const currentPage = $page;
-			const params = currentPage.params;
-			if (params.book && params.chapter) {
-				const urlState = await Effect.runPromise(
-					NavigationServiceLive.parseURL(currentPage.url.pathname)
-				);
-				
-				if (urlState && activeTab && activeTab.app._tag === "Bible") {
-					const currentBook = activeTab.app.bibleState.currentBook;
-					const currentChapter = activeTab.app.bibleState.currentChapter;
-					
-					if (currentBook !== urlState.book || currentChapter !== urlState.chapter) {
-						const updatedTab = await Effect.runPromise(
-							createBibleTab(
-								activeTab.id,
-								urlState.book,
-								urlState.chapter,
-								activeTab.app.bibleState.translation,
-								activeTab.app.bibleState.showCanonExplorer
-							)
-						);
-						updateTabState(updatedTab);
-					}
-				}
-			}
-		} catch (error) {
-			console.error("Failed to sync from URL:", error);
-		}
+		const currentPage = $page;
+		const params = currentPage.params;
+
+		if (!params.book || !params.chapter) return;
+
+		const urlStateOption = await Effect.runPromise(
+			NavigationServiceLive.parseURL(currentPage.url.pathname)
+		).catch(error => {
+			console.error("Failed to parse URL:", error);
+			return Option.none();
+		});
+
+		if (Option.isNone(urlStateOption)) return;
+		if (Option.isNone(activeTabOption)) return;
+
+		const activeTab = activeTabOption.value;
+		if (activeTab.app._tag !== "Bible") return;
+
+		const urlState = urlStateOption.value;
+		const currentBook = activeTab.app.bibleState.currentBook;
+		const currentChapter = activeTab.app.bibleState.currentChapter;
+
+		if (currentBook === urlState.book && currentChapter === urlState.chapter) return;
+
+		const updatedTab = await Effect.runPromise(
+			createTab({
+				app: "Bible",
+				id: activeTab.id,
+				book: urlState.book,
+				chapter: urlState.chapter,
+				translation: activeTab.app.bibleState.translation,
+				showCanonExplorer: activeTab.app.bibleState.showCanonExplorer
+			})
+		).catch(error => {
+			console.error("Failed to create updated tab:", error);
+			return activeTab; // Return unchanged on error
+		});
+
+		updateTabState(updatedTab);
 	}
 
 	// Initialize on mount
-	onMount(async () => {
-		await initializeTab();
-		await syncFromURL();
-		
+	onMount(() => {
+		// Start async initialization (don't await in onMount)
+		initializeTab().then(() => syncFromURL());
+
 		// Add global keyboard event listener
 		if (typeof window !== 'undefined') {
 			window.addEventListener('keydown', handleGlobalKeydown);
@@ -253,18 +270,17 @@
 </script>
 
 <div class="h-full flex flex-col bg-gray-900">
-	<TabBar 
-		{tabs}
-		{activeTabId}
+	<TabBar
+		tabs={tabsState.tabs}
+		activeTabId={tabsState.activeTabId}
 		onTabSelect={setActiveTab}
 		onTabRemove={removeTab}
 		onAddTab={addTab}
 	/>
 
-	<TabContent 
-		{tabs}
-		{activeTabId}
-		{getTabId}
+	<TabContent
+		tabs={tabsState.tabs}
+		activeTabId={tabsState.activeTabId}
 		onStateChange={updateTabState}
 		onAppChoice={handleAppChoice}
 	/>
diff --git a/site/src/lib/components/bible/BibleChapterViewer.svelte b/site/src/lib/components/bible/BibleChapterViewer.svelte
index fb6ebdc..4087253 100644
--- a/site/src/lib/components/bible/BibleChapterViewer.svelte
+++ b/site/src/lib/components/bible/BibleChapterViewer.svelte
@@ -1,23 +1,49 @@
 <script lang="ts">
 	import { Option } from "effect";
 	import type { Chapter } from "$lib/translations/translation";
+	import { BibleBook, getDisplayName } from "$lib/book";
 
 	let {
-		chapterData = Option.none()
+		chapterData = Option.none(),
+		chapterRef = undefined,
+		showBookHeader = false
 	}: {
 		chapterData: Option.Option<Chapter>;
+		chapterRef?: { book: BibleBook; chapter: number; key: string };
+		showBookHeader?: boolean;
 	} = $props();
+
+	// Generate chapter key for sentinels
+	const chapterKey = $derived(
+		chapterRef ? chapterRef.key : Option.isSome(chapterData) ? Option.getOrThrow(chapterData).name.toLowerCase().replace(/\s+/g, '-') : 'unknown'
+	);
 </script>
 
-<div class="flex-1 h-full overflow-y-auto">
+<div class="flex-1 w-full">
 	{#if Option.isSome(chapterData)}
+		<!-- Top sentinel for IntersectionObserver -->
+		<div id="top-sentinel-{chapterKey}" data-sentinel="top" data-chapter-key={chapterKey} style="height: 1px; pointer-events: none;"></div>
+
 		<div class="p-8">
 			<div class="max-w-4xl mx-auto">
-				<header class="mb-8">
-					<h1 class="text-3xl font-bold text-gray-100 mb-2">{Option.getOrThrow(chapterData).name}</h1>
-					<div class="h-1 w-20 bg-blue-500 rounded"></div>
-				</header>
-				
+				<!-- Book header (when crossing book boundaries) -->
+				{#if showBookHeader && chapterRef}
+					<header class="mb-6 text-center">
+						<h1 class="text-4xl font-bold text-gray-100 uppercase tracking-wide">{getDisplayName(chapterRef.book)}</h1>
+						<div class="h-1 w-32 bg-blue-500 rounded mx-auto mt-3"></div>
+					</header>
+				{/if}
+
+				<!-- Chapter number header -->
+				{#if chapterRef}
+					<div class="text-center mb-8">
+						<h2 class="text-xl text-gray-400 font-light">— {chapterRef.chapter} —</h2>
+					</div>
+				{/if}
+
+				<!-- Middle sentinel for IntersectionObserver (active chapter detection) -->
+				<div id="middle-sentinel-{chapterKey}" data-sentinel="middle" data-chapter-key={chapterKey} style="height: 1px; pointer-events: none;"></div>
+
 				<div class="space-y-4">
 					{#each Option.getOrThrow(chapterData).verses as verse}
 						<div class="flex gap-4 group">
@@ -32,6 +58,9 @@
 				</div>
 			</div>
 		</div>
+
+		<!-- Bottom sentinel for IntersectionObserver -->
+		<div id="bottom-sentinel-{chapterKey}" data-sentinel="bottom" data-chapter-key={chapterKey} style="height: 1px; pointer-events: none;"></div>
 	{:else}
 		<div class="flex items-center justify-center h-full">
 			<div class="text-center text-gray-400">
diff --git a/site/src/lib/components/bible/BibleReader.svelte b/site/src/lib/components/bible/BibleReader.svelte
index 91cad90..b47e860 100644
--- a/site/src/lib/components/bible/BibleReader.svelte
+++ b/site/src/lib/components/bible/BibleReader.svelte
@@ -1,12 +1,10 @@
 <script lang="ts">
     import type { Translation, TranslationContent } from "$lib/translations/translation";
-    import { getChapterFromContent, getNextChapterFromContent, getPreviousChapterFromContent } from "$lib/translations/translation";
     import { loadTranslationContent } from "$lib/translations/loadTranslationContent";
     import { BibleBook, getShortName, toBibleBook } from "$lib/book";
-    import { protestantBookOrder } from "$lib/translations/bookOrder";
     import { Option, Effect } from "effect";
     import BibleCanonExplorerWithSearch from "$lib/components/bible/BibleCanonExplorerWithSearch.svelte";
-    import BibleChapterViewer from "$lib/components/bible/BibleChapterViewer.svelte";
+    import VirtualBibleScroll from "$lib/components/bible/VirtualBibleScroll.svelte";
     import { availableTranslations } from "$lib/translations/availableTranslations";
     import { onMount } from "svelte";
 
@@ -15,6 +13,7 @@
         currentBook = BibleBook.John,
         currentChapter = 1,
         showCanonExplorer = true,
+        isActive = true,
         onStateChange = () => {},
         onToggleCanonExplorer = () => {},
         onTranslationChange = () => {},
@@ -23,6 +22,7 @@
         currentBook?: BibleBook;
         currentChapter?: number;
         showCanonExplorer?: boolean;
+        isActive?: boolean;
         onStateChange?: (book: BibleBook, chapter: number) => void;
         onToggleCanonExplorer?: () => void;
         onTranslationChange?: (translation: Translation) => void;
@@ -39,7 +39,7 @@
     let shouldFocusSearch = $state(false);
 
     // Translation content state
-    let translationContent = $state<TranslationContent | null>(null);
+    let translationContent = $state<Option.Option<TranslationContent>>(Option.none());
 
     // Update internal state when props change (tab switch)
     $effect(() => {
@@ -50,34 +50,19 @@
     // Load translation content when translation changes
     $effect(() => {
         if (translation) {
+            console.log('BibleReader: Loading translation content for', translation.metadata.shortName);
             Effect.runPromise(loadTranslationContent(translation))
                 .then((content) => {
-                    translationContent = content;
+                    console.log('BibleReader: Translation content loaded successfully, books:', content.books.length);
+                    translationContent = Option.some(content);
                 })
                 .catch((error) => {
                     console.error("Failed to load translation content:", error);
-                    translationContent = null;
+                    translationContent = Option.none();
                 });
         }
     });
 
-    let currentChapterData = $state<Option.Option<any>>(Option.none());
-
-    // Update chapter data when internal state or translation content changes
-    $effect(() => {
-        if (internalBook && internalChapter && translationContent) {
-            Effect.runPromise(getChapterFromContent(translationContent, internalBook, internalChapter))
-                .then((chapterOption) => {
-                    currentChapterData = chapterOption;
-                })
-                .catch(() => {
-                    currentChapterData = Option.none();
-                });
-        } else {
-            currentChapterData = Option.none();
-        }
-    });
-
     function selectChapter(bookShort: string, chapter: number) {
         const bookOption = toBibleBook(bookShort);
         if (Option.isSome(bookOption)) {
@@ -95,28 +80,6 @@
         }
     }
 
-    function navigateToNextChapter() {
-        if (!translationContent) return;
-        const nextChapterOption = getNextChapterFromContent(translationContent, internalBook, internalChapter, protestantBookOrder);
-        if (Option.isSome(nextChapterOption)) {
-            const { book, chapter } = nextChapterOption.value;
-            internalBook = book;
-            internalChapter = chapter;
-            onStateChange(book, chapter);
-        }
-    }
-
-    function navigateToPreviousChapter() {
-        if (!translationContent) return;
-        const previousChapterOption = getPreviousChapterFromContent(translationContent, internalBook, internalChapter, protestantBookOrder);
-        if (Option.isSome(previousChapterOption)) {
-            const { book, chapter } = previousChapterOption.value;
-            internalBook = book;
-            internalChapter = chapter;
-            onStateChange(book, chapter);
-        }
-    }
-
     function handleTranslationChange(event: Event) {
         const target = event.target as HTMLSelectElement;
         const selectedTranslation = availableTranslations.find(t => t.metadata.shortName === target.value);
@@ -126,7 +89,10 @@
     }
 
     function handleGlobalKeydown(event: KeyboardEvent) {
-        // Only handle if not typing in an input/textarea and if this is a Bible tab
+        // Only handle if this tab is active
+        if (!isActive) return;
+
+        // Only handle if not typing in an input/textarea
         const target = event.target as HTMLElement;
         if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.contentEditable === 'true')) {
             return;
@@ -218,26 +184,6 @@
                 {/each}
             </select>
         </div>
-
-        <!-- Navigation buttons -->
-        <div class="flex items-center gap-1">
-            <button
-                onclick={navigateToPreviousChapter}
-                disabled={!translationContent || Option.isNone(getPreviousChapterFromContent(translationContent, internalBook, internalChapter, protestantBookOrder))}
-                class="px-2 py-1 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:text-gray-500 text-gray-300 text-sm rounded transition-colors"
-                title="Previous chapter"
-            >
-                ←
-            </button>
-            <button
-                onclick={navigateToNextChapter}
-                disabled={!translationContent || Option.isNone(getNextChapterFromContent(translationContent, internalBook, internalChapter, protestantBookOrder))}
-                class="px-2 py-1 bg-gray-700 hover:bg-gray-600 disabled:bg-gray-800 disabled:text-gray-500 text-gray-300 text-sm rounded transition-colors"
-                title="Next chapter"
-            >
-                →
-            </button>
-        </div>
     </div>
 
     <!-- Main Content -->
@@ -251,7 +197,7 @@
                          : 'w-80 border-r relative'}"
             >
                 <BibleCanonExplorerWithSearch
-                    content={translationContent}
+                    content={Option.isSome(translationContent) ? translationContent.value : null}
                     currentBook={internalBook}
                     currentChapter={internalChapter}
                     onChapterSelect={selectChapter}
@@ -262,7 +208,12 @@
 
         <!-- Chapter Viewer -->
         <div class="flex-1 {isMobile && showCanonExplorer ? 'hidden' : 'block'}">
-            <BibleChapterViewer chapterData={currentChapterData} />
+            <VirtualBibleScroll
+                {translationContent}
+                initialBook={internalBook}
+                initialChapter={internalChapter}
+                onStateChange={onStateChange}
+            />
         </div>
     </div>
 </div>
diff --git a/site/src/lib/components/bible/VirtualBibleScroll.svelte b/site/src/lib/components/bible/VirtualBibleScroll.svelte
new file mode 100644
index 0000000..a09c3cc
--- /dev/null
+++ b/site/src/lib/components/bible/VirtualBibleScroll.svelte
@@ -0,0 +1,642 @@
+<script lang="ts">
+	import { Option, Effect } from "effect";
+	import { onDestroy } from "svelte";
+	import type { TranslationContent, Chapter, ChapterReference } from "$lib/translations/translation";
+	import {
+		getChapterFromContent,
+		getChapterKey,
+		getChapterRangeFromContent,
+		isFirstChapterInBible,
+		isLastChapterInBible
+	} from "$lib/translations/translation";
+	import { BibleBook } from "$lib/book";
+	import { protestantBookOrder } from "$lib/translations/bookOrder";
+	import BibleChapterViewer from "$lib/components/bible/BibleChapterViewer.svelte";
+
+	let {
+		translationContent,
+		initialBook,
+		initialChapter,
+		onStateChange = () => {}
+	}: {
+		translationContent: Option.Option<TranslationContent>;
+		initialBook: BibleBook;
+		initialChapter: number;
+		onStateChange?: (book: BibleBook, chapter: number) => void;
+	} = $props();
+
+	// State for virtual scrolling
+	interface ChapterData {
+		ref: ChapterReference;
+		chapter: Chapter;
+		showBookHeader: boolean;
+	}
+
+	let renderedChapters = $state<Map<string, ChapterData>>(new Map());
+	let renderedChaptersVersion = $state(0); // Increment this to trigger derived updates
+	let activeChapterRef = $state<ChapterReference>({
+		book: initialBook,
+		chapter: initialChapter,
+		key: getChapterKey(initialBook, initialChapter)
+	});
+	let isLoadingPrevious = $state(false);
+	let isLoadingNext = $state(false);
+	let isScrolling = $state(false);
+	let scrollTimeout: ReturnType<typeof setTimeout> | null = null;
+	let scrollContainer: HTMLDivElement | null = null;
+	let pendingLoadPrevious = $state(false);
+	let pendingLoadNext = $state(false);
+
+	// Update active chapter ref when props change
+	$effect(() => {
+		activeChapterRef = {
+			book: initialBook,
+			chapter: initialChapter,
+			key: getChapterKey(initialBook, initialChapter)
+		};
+	});
+
+	// IntersectionObserver instances
+	let topObserver: IntersectionObserver | null = null;
+	let middleObserver: IntersectionObserver | null = null;
+	let bottomObserver: IntersectionObserver | null = null;
+
+	// Debounce timer for URL updates
+	let urlUpdateTimer: ReturnType<typeof setTimeout> | null = null;
+
+	// Derived array of rendered chapters for iteration
+	const renderedChaptersArray = $derived.by(() => {
+		// Depend on version to trigger recomputation when Map changes
+		renderedChaptersVersion;
+
+		const arr = Array.from(renderedChapters.values()).sort((a, b) => {
+			// Sort by book order, then by chapter number
+			const contentValue = translationContent;
+			if (Option.isNone(contentValue)) return 0;
+
+			const aBookIndex = protestantBookOrder.books.findIndex(book => book === a.ref.book);
+			const bBookIndex = protestantBookOrder.books.findIndex(book => book === b.ref.book);
+
+			if (aBookIndex !== bBookIndex) {
+				return aBookIndex - bBookIndex;
+			}
+			return a.ref.chapter - b.ref.chapter;
+		});
+		console.log('renderedChaptersArray computed, length:', arr.length);
+		return arr;
+	});
+
+	// Load a single chapter and add to rendered map
+	async function loadChapter(ref: ChapterReference, showBookHeader: boolean) {
+		if (Option.isNone(translationContent)) return;
+
+		try {
+			const chapterOption = await Effect.runPromise(
+				getChapterFromContent(translationContent.value, ref.book, ref.chapter)
+			);
+
+			if (Option.isSome(chapterOption)) {
+				console.log('Adding chapter to renderedChapters:', ref.key, 'verses:', chapterOption.value.verses.length);
+				renderedChapters.set(ref.key, {
+					ref,
+					chapter: chapterOption.value,
+					showBookHeader
+				});
+				renderedChaptersVersion++; // Trigger derived update
+				console.log('renderedChapters size after add:', renderedChapters.size);
+			} else {
+				console.log('Chapter option is None for:', ref.key);
+			}
+		} catch (error) {
+			console.error(`Failed to load chapter ${ref.key}:`, error);
+		}
+	}
+
+	// Load multiple chapters in a range
+	async function loadChapterRange(refs: ChapterReference[]) {
+		if (refs.length === 0) return;
+
+		// Determine which refs need book headers (first chapter or book transition)
+		let lastBook: BibleBook | null = null;
+
+		// Check if there's already a chapter before the first ref to determine book header
+		const allRefs = Array.from(renderedChapters.values()).map(c => c.ref);
+		const sortedRefs = [...allRefs, ...refs].sort((a, b) => {
+			const aIndex = protestantBookOrder.books.findIndex(book => book === a.book);
+			const bIndex = protestantBookOrder.books.findIndex(book => book === b.book);
+			if (aIndex !== bIndex) return aIndex - bIndex;
+			return a.chapter - b.chapter;
+		});
+
+		await Promise.all(
+			refs.map(async (ref) => {
+				// Find previous ref in sorted order
+				const refIndex = sortedRefs.findIndex(r => r.key === ref.key);
+				const previousRef = refIndex > 0 ? sortedRefs[refIndex - 1] : null;
+
+				// Show book header if first in Bible or book changed
+				const showBookHeader =
+					!previousRef ||
+					previousRef.book !== ref.book ||
+					(ref.book === previousRef.book && ref.chapter === 1);
+
+				await loadChapter(ref, showBookHeader);
+			})
+		);
+	}
+
+	// Load chapters before the first rendered chapter
+	async function loadPreviousChapters() {
+		// If scrolling, queue the request for later
+		if (isScrolling) {
+			pendingLoadPrevious = true;
+			return;
+		}
+
+		if (isLoadingPrevious || Option.isNone(translationContent)) return;
+
+		const firstChapter = renderedChaptersArray[0];
+		if (!firstChapter) return;
+
+		// Check if at the beginning of the Bible
+		if (isFirstChapterInBible(firstChapter.ref, protestantBookOrder)) {
+			return;
+		}
+
+		isLoadingPrevious = true;
+
+		try {
+			const refs = getChapterRangeFromContent(
+				translationContent.value,
+				firstChapter.ref,
+				10, // Load 10 chapters
+				'backward',
+				protestantBookOrder
+			);
+
+			// Filter out already rendered chapters
+			const newRefs = refs.filter(ref => !renderedChapters.has(ref.key));
+			await loadChapterRange(newRefs);
+
+			// Prune chapters that are too far away
+			pruneRenderedChapters();
+		} catch (error) {
+			console.error("Failed to load previous chapters:", error);
+		} finally {
+			isLoadingPrevious = false;
+		}
+	}
+
+	// Load chapters after the last rendered chapter
+	async function loadNextChapters() {
+		// If scrolling, queue the request for later
+		if (isScrolling) {
+			pendingLoadNext = true;
+			return;
+		}
+
+		if (isLoadingNext || Option.isNone(translationContent)) return;
+
+		const lastChapter = renderedChaptersArray[renderedChaptersArray.length - 1];
+		if (!lastChapter) return;
+
+		// Check if at the end of the Bible
+		if (isLastChapterInBible(translationContent.value, lastChapter.ref, protestantBookOrder)) {
+			return;
+		}
+
+		isLoadingNext = true;
+
+		try {
+			const refs = getChapterRangeFromContent(
+				translationContent.value,
+				lastChapter.ref,
+				10, // Load 10 chapters
+				'forward',
+				protestantBookOrder
+			);
+
+			// Filter out already rendered chapters and the start chapter
+			const newRefs = refs.filter(ref => !renderedChapters.has(ref.key) && ref.key !== lastChapter.ref.key);
+			await loadChapterRange(newRefs);
+
+			// Prune chapters that are too far away
+			pruneRenderedChapters();
+		} catch (error) {
+			console.error("Failed to load next chapters:", error);
+		} finally {
+			isLoadingNext = false;
+		}
+	}
+
+	// Remove chapters that are too far from the active chapter
+	function pruneRenderedChapters() {
+		if (Option.isNone(translationContent) || renderedChapters.size <= 41) return;
+
+		// Find active chapter index in sorted array
+		const activeIndex = renderedChaptersArray.findIndex(c => c.ref.key === activeChapterRef.key);
+		if (activeIndex === -1) return;
+
+		// Keep chapters within 20 positions of active chapter
+		const keysToKeep = new Set<string>();
+		const bufferSize = 20;
+
+		for (let i = Math.max(0, activeIndex - bufferSize); i <= Math.min(renderedChaptersArray.length - 1, activeIndex + bufferSize); i++) {
+			keysToKeep.add(renderedChaptersArray[i].ref.key);
+		}
+
+		// Remove chapters not in the keep set
+		let didDelete = false;
+		for (const key of renderedChapters.keys()) {
+			if (!keysToKeep.has(key)) {
+				renderedChapters.delete(key);
+				didDelete = true;
+			}
+		}
+
+		if (didDelete) {
+			renderedChaptersVersion++; // Trigger derived update
+		}
+	}
+
+	// Handle scroll events to detect when user is scrolling
+	function handleScroll() {
+		isScrolling = true;
+
+		if (scrollTimeout) {
+			clearTimeout(scrollTimeout);
+		}
+
+		// Wait 150ms after scrolling stops before allowing chapter loading
+		scrollTimeout = setTimeout(() => {
+			isScrolling = false;
+
+			// Execute any pending load requests
+			if (pendingLoadPrevious) {
+				pendingLoadPrevious = false;
+				loadPreviousChapters();
+			}
+
+			if (pendingLoadNext) {
+				pendingLoadNext = false;
+				loadNextChapters();
+			}
+		}, 150);
+	}
+
+	// Update active chapter and URL (debounced)
+	function updateActiveChapter(ref: ChapterReference) {
+		// Don't update if we're in the middle of a programmatic scroll
+		if (isProgrammaticScroll) {
+			return;
+		}
+
+		activeChapterRef = ref;
+
+		// Set timestamp IMMEDIATELY to prevent navigation effect from thinking this is a canon click
+		lastStateChangeTime = Date.now();
+
+		// Debounce URL update
+		if (urlUpdateTimer) {
+			clearTimeout(urlUpdateTimer);
+		}
+
+		urlUpdateTimer = setTimeout(() => {
+			onStateChange(ref.book, ref.chapter);
+		}, 500);
+	}
+
+	// Setup IntersectionObservers
+	function setupObservers() {
+		// Top sentinel observer - triggers loading previous chapters
+		topObserver = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						loadPreviousChapters();
+					}
+				});
+			},
+			{
+				rootMargin: '200px 0px 0px 0px',
+				threshold: 0
+			}
+		);
+
+		// Middle sentinel observer - updates active chapter for URL
+		middleObserver = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						const chapterKey = entry.target.getAttribute('data-chapter-key');
+						if (chapterKey) {
+							const chapterData = renderedChapters.get(chapterKey);
+							if (chapterData) {
+								updateActiveChapter(chapterData.ref);
+							}
+						}
+					}
+				});
+			},
+			{
+				rootMargin: '-20% 0px -60% 0px', // Trigger when chapter is in the top 20-40% of viewport
+				threshold: 0
+			}
+		);
+
+		// Bottom sentinel observer - triggers loading next chapters
+		bottomObserver = new IntersectionObserver(
+			(entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting) {
+						loadNextChapters();
+					}
+				});
+			},
+			{
+				rootMargin: '0px 0px 200px 0px',
+				threshold: 0
+			}
+		);
+
+		// Observe all existing sentinels
+		observeSentinels();
+	}
+
+	// Observe sentinels for all rendered chapters
+	function observeSentinels() {
+		if (!topObserver || !middleObserver || !bottomObserver) return;
+
+		// Observe all sentinels
+		renderedChapters.forEach((chapterData) => {
+			const topSentinel = document.getElementById(`top-sentinel-${chapterData.ref.key}`);
+			const middleSentinel = document.getElementById(`middle-sentinel-${chapterData.ref.key}`);
+			const bottomSentinel = document.getElementById(`bottom-sentinel-${chapterData.ref.key}`);
+
+			if (topSentinel && topObserver) topObserver.observe(topSentinel);
+			if (middleSentinel && middleObserver) middleObserver.observe(middleSentinel);
+			if (bottomSentinel && bottomObserver) bottomObserver.observe(bottomSentinel);
+		});
+	}
+
+	// Effect to observe sentinels when chapters are added/removed
+	$effect(() => {
+		// Access renderedChaptersArray to trigger effect
+		renderedChaptersArray.length;
+
+		// Re-observe sentinels after a brief delay to ensure DOM is updated
+		setTimeout(() => {
+			observeSentinels();
+		}, 50);
+	});
+
+	// Effect to setup scroll listener
+	$effect(() => {
+		if (scrollContainer) {
+			scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
+			return () => {
+				if (scrollContainer) {
+					scrollContainer.removeEventListener('scroll', handleScroll);
+				}
+			};
+		}
+	});
+
+	// Track if initial load has been done
+	let initialLoadDone = $state(false);
+	let isProgrammaticScroll = $state(false);
+	let lastStateChangeTime = $state(0);
+
+	// Initialize content when translation content becomes available
+	$effect(() => {
+		// Access translationContent to establish dependency
+		const content = translationContent;
+		console.log('VirtualBibleScroll effect running:', Option.isSome(content), 'initialLoadDone:', initialLoadDone);
+
+		if (Option.isSome(content) && !initialLoadDone) {
+			console.log('Starting to load chapters...');
+			// Load initial buffer of chapters (current + 2 before + 2 after)
+			const initialRef: ChapterReference = {
+				book: initialBook,
+				chapter: initialChapter,
+				key: getChapterKey(initialBook, initialChapter)
+			};
+
+			// Load chapters around initial chapter
+			const beforeRefs = getChapterRangeFromContent(
+				content.value,
+				initialRef,
+				20, // Current + 20 before
+				'backward',
+				protestantBookOrder
+			);
+
+			const afterRefs = getChapterRangeFromContent(
+				content.value,
+				initialRef,
+				20, // Current + 20 after (includes current)
+				'forward',
+				protestantBookOrder
+			);
+
+			// Combine and deduplicate
+			const allRefs = [...beforeRefs, ...afterRefs.slice(1)]; // Skip duplicate current chapter
+
+			loadChapterRange(allRefs).then(() => {
+				console.log('Chapters loaded successfully, count:', allRefs.length);
+				initialLoadDone = true;
+
+				// Scroll to target chapter after a brief delay
+				setTimeout(() => {
+					const targetElement = document.getElementById(`middle-sentinel-${initialRef.key}`);
+					if (targetElement) {
+						// Scroll to position the chapter near the top of the viewport
+						const container = targetElement.closest('.overflow-y-auto');
+						if (container) {
+							const offsetTop = targetElement.getBoundingClientRect().top + (container as HTMLElement).scrollTop - 100;
+							(container as HTMLElement).scrollTo({
+								top: offsetTop,
+								behavior: 'instant'
+							});
+						}
+					}
+
+					// Setup observers after scroll settles
+					setTimeout(() => {
+						setupObservers();
+					}, 100);
+				}, 100);
+			});
+		}
+	});
+
+	// Handle navigation from canon explorer clicks
+	$effect(() => {
+		const targetKey = getChapterKey(initialBook, initialChapter);
+
+		// Only run after initial load
+		if (!initialLoadDone || Option.isNone(translationContent)) {
+			return;
+		}
+
+		// Don't run if we're currently loading chapters (prevents feedback loop)
+		if (isLoadingPrevious || isLoadingNext || isProgrammaticScroll) {
+			console.log('Currently loading or scrolling, skipping navigation effect');
+			return;
+		}
+
+		// Check if this props update came shortly after we called onStateChange (from scrolling)
+		const timeSinceLastStateChange = Date.now() - lastStateChangeTime;
+		if (timeSinceLastStateChange < 2000) {
+			// Props update within 2000ms of our own state change - likely from scrolling
+			console.log('Props update from recent scroll feedback, skipping snap:', targetKey);
+			return;
+		}
+
+		// Check if chapter is already visible in viewport (don't snap if user is already viewing it)
+		const targetElement = document.getElementById(`middle-sentinel-${targetKey}`);
+		if (targetElement) {
+			const rect = targetElement.getBoundingClientRect();
+			// Check if chapter is anywhere in the viewport - be very generous
+			// If user can see this chapter at all, don't snap
+			const isVisible = rect.top >= -200 && rect.top <= window.innerHeight;
+
+			if (isVisible) {
+				// Chapter is already visible - don't snap
+				console.log('Chapter already visible, skipping snap:', targetKey);
+				return;
+			}
+		}
+
+		// Chapter is not at top position and not from recent scroll - this is a canon explorer click
+
+		console.log('Canon explorer navigation to:', targetKey);
+
+		const targetRef: ChapterReference = {
+			book: initialBook,
+			chapter: initialChapter,
+			key: targetKey
+		};
+
+		// Set flag to prevent observer updates during programmatic scroll
+		isProgrammaticScroll = true;
+
+		// Safety timeout to force-reset the flag in case something goes wrong
+		const safetyTimeout = setTimeout(() => {
+			if (isProgrammaticScroll) {
+				console.warn('Safety timeout triggered - resetting isProgrammaticScroll');
+				isProgrammaticScroll = false;
+			}
+		}, 2000);
+
+		// Check if chapter is already loaded
+		if (renderedChapters.has(targetKey)) {
+			// Just scroll to it
+			setTimeout(() => {
+				try {
+					const targetElement = document.getElementById(`middle-sentinel-${targetKey}`);
+					if (targetElement) {
+						const container = targetElement.closest('.overflow-y-auto');
+						if (container) {
+							const offsetTop = targetElement.getBoundingClientRect().top + (container as HTMLElement).scrollTop - 100;
+							(container as HTMLElement).scrollTo({
+								top: offsetTop,
+								behavior: 'instant'
+							});
+						}
+					}
+				} catch (error) {
+					console.error('Error during programmatic scroll:', error);
+				} finally {
+					// Re-enable observer updates after scroll completes
+					setTimeout(() => {
+						clearTimeout(safetyTimeout);
+						isProgrammaticScroll = false;
+					}, 500);
+				}
+			}, 50);
+		} else {
+			// Load chapter and surrounding chapters
+			const beforeRefs = getChapterRangeFromContent(
+				translationContent.value,
+				targetRef,
+				20,
+				'backward',
+				protestantBookOrder
+			);
+
+			const afterRefs = getChapterRangeFromContent(
+				translationContent.value,
+				targetRef,
+				20,
+				'forward',
+				protestantBookOrder
+			);
+
+			const allRefs = [...beforeRefs, ...afterRefs.slice(1)];
+			const newRefs = allRefs.filter(ref => !renderedChapters.has(ref.key));
+
+			loadChapterRange(newRefs)
+				.then(() => {
+					setTimeout(() => {
+						try {
+							const targetElement = document.getElementById(`middle-sentinel-${targetKey}`);
+							if (targetElement) {
+								const container = targetElement.closest('.overflow-y-auto');
+								if (container) {
+									const offsetTop = targetElement.getBoundingClientRect().top + (container as HTMLElement).scrollTop - 100;
+									(container as HTMLElement).scrollTo({
+										top: offsetTop,
+										behavior: 'instant'
+									});
+								}
+							}
+						} catch (error) {
+							console.error('Error during programmatic scroll:', error);
+						} finally {
+							// Re-enable observer updates after scroll completes
+							setTimeout(() => {
+								clearTimeout(safetyTimeout);
+								isProgrammaticScroll = false;
+							}, 500);
+						}
+					}, 100);
+
+					pruneRenderedChapters();
+				})
+				.catch((error) => {
+					console.error('Error loading chapters for navigation:', error);
+					clearTimeout(safetyTimeout);
+					isProgrammaticScroll = false;
+				});
+		}
+	});
+
+	// Cleanup on unmount
+	onDestroy(() => {
+		if (topObserver) topObserver.disconnect();
+		if (middleObserver) middleObserver.disconnect();
+		if (bottomObserver) bottomObserver.disconnect();
+		if (urlUpdateTimer) clearTimeout(urlUpdateTimer);
+		if (scrollTimeout) clearTimeout(scrollTimeout);
+	});
+</script>
+
+<div class="h-full overflow-y-auto" bind:this={scrollContainer}>
+	{#if renderedChaptersArray.length > 0}
+		{#each renderedChaptersArray as chapterData (chapterData.ref.key)}
+			<BibleChapterViewer
+				chapterData={Option.some(chapterData.chapter)}
+				chapterRef={chapterData.ref}
+				showBookHeader={chapterData.showBookHeader}
+			/>
+		{/each}
+	{:else}
+		<div class="flex items-center justify-center h-full">
+			<div class="text-center text-gray-400">
+				<h2 class="text-xl font-semibold mb-2">Loading...</h2>
+				<p>Please wait while the content loads.</p>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/site/src/lib/components/tabs/Tab.svelte b/site/src/lib/components/tabs/Tab.svelte
index 2e3243d..6cb5025 100644
--- a/site/src/lib/components/tabs/Tab.svelte
+++ b/site/src/lib/components/tabs/Tab.svelte
@@ -1,17 +1,19 @@
 <script lang="ts">
-	import type { Tab } from "$lib/app";
+	import type { TabState } from "$lib/app";
 	import { Bible, BibleState, Stopwatch, StopwatchState } from "$lib/app";
 	import BibleComponent from "$lib/components/bible/BibleReader.svelte";
 	import ChooseAppComponent from "$lib/components/ui/ChooseApp.svelte";
 	import StopwatchComponent from "$lib/components/ui/Stopwatch.svelte";
 
-	let { 
+	let {
 		app,
+		isActive = false,
 		onStateChange,
 		onAppChoice
-	}: { 
-		app: Tab; 
-		onStateChange?: (app: Tab) => void;
+	}: {
+		app: TabState;
+		isActive?: boolean;
+		onStateChange?: (app: TabState) => void;
 		onAppChoice?: (appType: "bible" | "about" | "stopwatch") => void;
 	} = $props();
 
@@ -72,6 +74,7 @@
 		currentBook={app.app.bibleState.currentBook}
 		currentChapter={app.app.bibleState.currentChapter}
 		showCanonExplorer={app.app.bibleState.showCanonExplorer}
+		{isActive}
 		onStateChange={handleBibleStateChange}
 		onToggleCanonExplorer={handleToggleCanonExplorer}
 		onTranslationChange={handleTranslationChange}
@@ -104,8 +107,9 @@
 {:else if app.app._tag === "ChooseApp"}
 	<ChooseAppComponent onChooseApp={(appType) => onAppChoice?.(appType)} />
 {:else if app.app._tag === "Stopwatch"}
-	<StopwatchComponent 
+	<StopwatchComponent
 		stopwatchState={app.app.stopwatchState}
+		{isActive}
 		onStateChange={handleStopwatchStateChange}
 	/>
 {/if}
\ No newline at end of file
diff --git a/site/src/lib/components/tabs/TabBar.svelte b/site/src/lib/components/tabs/TabBar.svelte
index 9ccdb19..717cfd0 100644
--- a/site/src/lib/components/tabs/TabBar.svelte
+++ b/site/src/lib/components/tabs/TabBar.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
-	import type { Tab } from "$lib/app";
-	import { getDisplayName, getTabId } from "$lib/app";
+	import type { TabState } from "$lib/app";
+	import { App } from "$lib/app";
 
-	let { 
+	let {
 		tabs,
 		activeTabId,
 		onTabSelect,
 		onTabRemove,
 		onAddTab
-	}: { 
-		tabs: Tab[]; 
+	}: {
+		tabs: TabState[];
 		activeTabId: string;
 		onTabSelect: (tabId: string) => void;
 		onTabRemove: (tabId: string) => void;
@@ -20,14 +20,14 @@
 <div class="bg-gray-800 border-b border-gray-700 flex items-center px-4 py-2">
 	<div class="flex items-center gap-2 flex-1 overflow-x-auto" title="Navigate tabs: (n) next, (p) previous">
 		{#each tabs as tab}
-			{@const tabId = getTabId(tab)}
-			{@const tabTitle = getDisplayName(tab)}
+			{@const tabId = tab.id}
+			{@const tabTitle = App.getTitle(tab.app)}
 			<div class="flex items-center bg-gray-700 rounded-lg overflow-hidden min-w-0">
 				<button
 					onclick={() => onTabSelect(tabId)}
 					class="px-4 py-2 text-sm font-medium transition-colors whitespace-nowrap {
-						activeTabId === tabId 
-							? 'bg-blue-600 text-white' 
+						activeTabId === tabId
+							? 'bg-blue-600 text-white'
 							: 'text-gray-300 hover:bg-gray-600'
 					}"
 				>
diff --git a/site/src/lib/components/tabs/TabContent.svelte b/site/src/lib/components/tabs/TabContent.svelte
index a61ecba..4590bfa 100644
--- a/site/src/lib/components/tabs/TabContent.svelte
+++ b/site/src/lib/components/tabs/TabContent.svelte
@@ -1,33 +1,34 @@
 <script lang="ts">
-	import type { Tab } from "$lib/app";
+	import type { TabState } from "$lib/app";
 	import TabComponent from "./Tab.svelte";
 
-	let { 
+	let {
 		tabs,
 		activeTabId,
 		onStateChange,
-		onAppChoice,
-		getTabId
-	}: { 
-		tabs: Tab[];
+		onAppChoice
+	}: {
+		tabs: TabState[];
 		activeTabId: string;
-		onStateChange?: (tab: Tab) => void;
+		onStateChange?: (tab: TabState) => void;
 		onAppChoice?: (appType: "bible" | "about" | "stopwatch") => void;
-		getTabId: (tab: Tab) => string;
 	} = $props();
 </script>
 
 <div class="flex-1 overflow-hidden">
-	{#each tabs as tab (getTabId(tab))}
-		<div 
-			class="h-full w-full {getTabId(tab) === activeTabId ? 'block' : 'hidden'}"
-			aria-hidden={getTabId(tab) !== activeTabId}
+	{#each tabs as tab (tab.id)}
+		<div
+			class="h-full w-full {tab.id === activeTabId ? 'block' : 'hidden'}"
+			aria-hidden={tab.id !== activeTabId}
 		>
-			<TabComponent 
-				app={tab}
-				{onStateChange}
-				{onAppChoice}
-			/>
+			{#key tab.id}
+				<TabComponent
+					app={tab}
+					isActive={tab.id === activeTabId}
+					{onStateChange}
+					{onAppChoice}
+				/>
+			{/key}
 		</div>
 	{/each}
 </div>
\ No newline at end of file
diff --git a/site/src/lib/components/ui/Stopwatch.svelte b/site/src/lib/components/ui/Stopwatch.svelte
index 0a235b4..f417dca 100644
--- a/site/src/lib/components/ui/Stopwatch.svelte
+++ b/site/src/lib/components/ui/Stopwatch.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
 	import { onMount, onDestroy } from "svelte";
+	import { Option } from "effect";
 	import type { StopwatchState } from "$lib/app";
 
-	let { 
+	let {
 		stopwatchState,
-		onStateChange 
-	}: { 
+		isActive = false,
+		onStateChange
+	}: {
 		stopwatchState: StopwatchState;
+		isActive?: boolean;
 		onStateChange?: (newState: StopwatchState) => void;
 	} = $props();
 
 	// Simple local state
 	let displayTime = $state<number>(0);
 	let isRunning = $state<boolean>(false);
-	let startTime = $state<number | null>(null);
+	let startTime = $state<Option.Option<number>>(Option.none());
 	let intervalId: number | undefined;
 
 	// Format time as MM:SS.mmm
@@ -30,13 +33,13 @@
 	function startStopwatch() {
 		if (!isRunning) {
 			const now = Date.now();
-			startTime = now - displayTime; // Account for existing elapsed time
+			startTime = Option.some(now - displayTime); // Account for existing elapsed time
 			isRunning = true;
-			
+
 			// Simple interval that will work even when tab is hidden (since element stays in DOM)
 			intervalId = setInterval(() => {
-				if (startTime !== null) {
-					displayTime = Date.now() - startTime;
+				if (Option.isSome(startTime)) {
+					displayTime = Date.now() - startTime.value;
 					onStateChange?.({
 						elapsedTime: displayTime,
 						isRunning: true
@@ -70,10 +73,10 @@
 				intervalId = undefined;
 			}
 		}
-		
+
 		displayTime = 0;
-		startTime = null;
-		
+		startTime = Option.none();
+
 		onStateChange?.({
 			elapsedTime: 0,
 			isRunning: false
@@ -90,6 +93,9 @@
 
 	// Handle keyboard shortcuts
 	function handleKeydown(event: KeyboardEvent) {
+		// Only handle if this tab is active
+		if (!isActive) return;
+
 		// Only handle if not typing in an input/textarea
 		const target = event.target as HTMLElement;
 		if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.contentEditable === 'true')) {
diff --git a/site/src/lib/services/NavigationService.ts b/site/src/lib/services/NavigationService.ts
index a2cd73a..fb35952 100644
--- a/site/src/lib/services/NavigationService.ts
+++ b/site/src/lib/services/NavigationService.ts
@@ -1,13 +1,11 @@
-import { Effect, Context } from "effect";
+import { Effect, Context, Option } from "effect";
 import { goto } from "$app/navigation";
-import { page } from "$app/stores";
 import { BibleBook, getShortName, toBibleBook } from "$lib/book";
-import { Option } from "effect";
 
 export interface NavigationService {
   readonly updateURL: (book: BibleBook, chapter: number) => Effect.Effect<void>;
   readonly navigateToUrl: (url: string) => Effect.Effect<void>;
-  readonly parseURL: (pathname: string) => Effect.Effect<{ book: BibleBook; chapter: number } | null>;
+  readonly parseURL: (pathname: string) => Effect.Effect<Option.Option<{ book: BibleBook; chapter: number }>>;
   readonly getInitialState: () => Effect.Effect<{ book: BibleBook; chapter: number; isAbout: boolean; isStopwatch: boolean }>;
 }
 
@@ -32,10 +30,10 @@ export const NavigationServiceLive = NavigationService.of({
         const bookOption = toBibleBook(urlParts[1]);
         const chapter = parseInt(urlParts[2]);
         if (Option.isSome(bookOption) && !isNaN(chapter) && chapter > 0) {
-          return { book: bookOption.value, chapter };
+          return Option.some({ book: bookOption.value, chapter });
         }
       }
-      return null;
+      return Option.none();
     }),
 
   getInitialState: () =>
diff --git a/site/src/lib/translations/translation.ts b/site/src/lib/translations/translation.ts
index 65947b0..77691ff 100644
--- a/site/src/lib/translations/translation.ts
+++ b/site/src/lib/translations/translation.ts
@@ -130,3 +130,70 @@ export const getPreviousChapterFromContent = (
     return Option.some({ book: previousBook, chapter: lastChapter });
 };
 
+// Chapter reference type for virtual scrolling
+export interface ChapterReference {
+    book: BibleBook;
+    chapter: number;
+    key: string;
+}
+
+// Helper to create a unique key for a chapter
+export const getChapterKey = (book: BibleBook, chapter: number): string => {
+    return `${book}-${chapter}`;
+};
+
+// Check if a chapter is the first in the Bible
+export const isFirstChapterInBible = (
+    ref: { book: BibleBook; chapter: number },
+    bookOrder: BookOrder
+): boolean => {
+    const firstBook = bookOrder.books[0];
+    return ref.book === firstBook && ref.chapter === 1;
+};
+
+// Check if a chapter is the last in the Bible
+export const isLastChapterInBible = (
+    content: TranslationContent,
+    ref: { book: BibleBook; chapter: number },
+    bookOrder: BookOrder
+): boolean => {
+    const lastBook = bookOrder.books[bookOrder.books.length - 1];
+    if (ref.book !== lastBook) return false;
+
+    const bookData = content.books.find(b => b.name === lastBook);
+    if (!bookData || bookData.chapters.length === 0) return false;
+
+    const lastChapter = Math.max(...bookData.chapters.map(c => c.chapter));
+    return ref.chapter === lastChapter;
+};
+
+// Get a range of chapters in sequence (for virtual scrolling buffer)
+export const getChapterRangeFromContent = (
+    content: TranslationContent,
+    startRef: { book: BibleBook; chapter: number },
+    count: number,
+    direction: 'forward' | 'backward',
+    bookOrder: BookOrder
+): ChapterReference[] => {
+    const refs: ChapterReference[] = [];
+    let currentRef: Option.Option<{ book: BibleBook; chapter: number }> = Option.some(startRef);
+
+    for (let i = 0; i < count && Option.isSome(currentRef); i++) {
+        const ref = currentRef.value;
+        refs.push({
+            book: ref.book,
+            chapter: ref.chapter,
+            key: getChapterKey(ref.book, ref.chapter)
+        });
+
+        // Get next reference based on direction
+        if (direction === 'forward') {
+            currentRef = getNextChapterFromContent(content, ref.book, ref.chapter, bookOrder);
+        } else {
+            currentRef = getPreviousChapterFromContent(content, ref.book, ref.chapter, bookOrder);
+        }
+    }
+
+    return direction === 'backward' ? refs.reverse() : refs;
+};
+
diff --git a/site/src/routes/+layout.svelte b/site/src/routes/+layout.svelte
index 50c3c01..fba57ad 100644
--- a/site/src/routes/+layout.svelte
+++ b/site/src/routes/+layout.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
 	import "../app.css";
+	import { Option } from "effect";
 	import AppContainer from "$lib/components/AppContainer.svelte";
 	import type { LayoutData } from "./$types";
 
 	let { children, data }: { children: any; data: LayoutData } = $props();
 </script>
 
-<div class="h-screen bg-gray-900 text-white">
+<div class="h-screen overflow-hidden bg-gray-900 text-white">
 	<div class="h-full">
-		{#if data.bibleData}
-			<AppContainer translation={data.bibleData} />
+		{#if Option.isSome(data.bibleData)}
+			<AppContainer translation={data.bibleData.value} />
 		{:else}
 			<div class="flex items-center justify-center h-full">
 				<div class="text-center">
diff --git a/site/src/routes/+layout.ts b/site/src/routes/+layout.ts
index d019e69..8a68e88 100644
--- a/site/src/routes/+layout.ts
+++ b/site/src/routes/+layout.ts
@@ -1,31 +1,27 @@
-import { Effect } from "effect";
+import { Effect, Option } from "effect";
 import { loadBibleData } from "$lib/translations/loadBibleData";
 
 export const prerender = false;
 export const ssr = false;
 
 export async function load() {
-    try {
-        console.log('Starting to load bible data...');
-        const bibleData = await Effect.runPromise(loadBibleData());
+    const bibleDataOption = await Effect.runPromise(loadBibleData())
+        .then(bibleData => {
+            // Check if content is loaded
+            if (bibleData.content._tag === "Local") {
+                console.log('Bible data loaded successfully:', bibleData.content.data.books?.length, 'books');
+            } else {
+                console.log('Bible data metadata loaded, content will be fetched from:', bibleData.content.url);
+            }
+            return Option.some(bibleData);
+        })
+        .catch(error => {
+            console.error('Failed to load bible data:', error);
+            console.error('Error details:', JSON.stringify(error, null, 2));
+            return Option.none();
+        });
 
-        // Check if content is loaded
-        if (bibleData.content._tag === "Local") {
-            console.log('Bible data loaded successfully:', bibleData.content.data.books?.length, 'books');
-        } else {
-            console.log('Bible data metadata loaded, content will be fetched from:', bibleData.content.url);
-        }
-
-        return {
-            bibleData
-        };
-    } catch (error) {
-        console.error('Failed to load bible data:', error);
-        console.error('Error details:', JSON.stringify(error, null, 2));
-
-        // Return null to indicate failure
-        return {
-            bibleData: null
-        };
-    }
+    return {
+        bibleData: bibleDataOption
+    };
 }
diff --git a/site/src/routes/[book]/[chapter]/+page.svelte b/site/src/routes/[book]/[chapter]/+page.svelte
index ddeedbf..7dd9c98 100644
--- a/site/src/routes/[book]/[chapter]/+page.svelte
+++ b/site/src/routes/[book]/[chapter]/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { getChapter } from "$lib/translations/translation";
     import type { PageData } from "./$types";
 
     let { data }: { data: PageData } = $props();
diff --git a/site/src/routes/[book]/[chapter]/+page.ts b/site/src/routes/[book]/[chapter]/+page.ts
index 74fb7b0..2a8ee0e 100644
--- a/site/src/routes/[book]/[chapter]/+page.ts
+++ b/site/src/routes/[book]/[chapter]/+page.ts
@@ -19,8 +19,12 @@ export const load: PageLoad = async ({ params, parent }) => {
 
     const { bibleData } = await parent();
 
+    if (Option.isNone(bibleData)) {
+        error(500, 'Failed to load Bible data');
+    }
+
     // Load translation content
-    const content = await Effect.runPromise(loadTranslationContent(bibleData));
+    const content = await Effect.runPromise(loadTranslationContent(bibleData.value));
 
     const chapterOption = await Effect.runPromise(getChapterFromContent(content, bibleBook.value, chapterNumber));