diff --git a/web/src/reader/reader.ts b/web/src/reader/reader.ts
index 345b02c..ee3f989 100644
--- a/web/src/reader/reader.ts
+++ b/web/src/reader/reader.ts
@@ -1,13 +1,22 @@
-import "../alpine";
+import "foliate-js/view.js";
 import { Alpine } from "../alpine";
-// Core utilities (minimal set needed by reader)
-import "../api"; // API calls for reading progress
-import "../dom"; // DOM helpers
-import "../events"; // Event system
-import "../storage"; // localStorage helpers
-import "../theme"; // Theme support (reader needs theme)
-import "../toast"; // Toast notifications
-import "../toast-error"; // Error toasts
-// Reader functionality
-import "./reader-shell";
+
+document.addEventListener("alpine:init", () => {
+  Alpine.data("readerShell", () => ({
+    async initReader() {
+      console.log("Reader initialized");
+    },
+    nextPage() {
+      const view = document.querySelector("#reader-view");
+      // @ts-ignore - foliate custom element
+      view?.next?.();
+    },
+    previousPage() {
+      const view = document.querySelector("#reader-view");
+      // @ts-ignore - foliate custom element
+      view?.prev?.();
+    },
+  }));
+});
+
 Alpine.start();