diff --git a/reader/.gitignore b/reader/.gitignore
index a547bf3..a9b26d1 100644
--- a/reader/.gitignore
+++ b/reader/.gitignore
@@ -8,7 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*
 
 node_modules
-dist
+#dist
 dist-ssr
 *.local
 
diff --git a/reader/src/App.jsx b/reader/src/App.jsx
index 849485b..db14e22 100644
--- a/reader/src/App.jsx
+++ b/reader/src/App.jsx
@@ -143,9 +143,12 @@ export default function App() {
           {selectedIndex === 0 ? (
             <div className="flex-1 border-r border-blue-200" />
           ) : (
-            <div className="border-r border-blue-200 w-1/2 flex-1 p-4 hover:bg-blue-200 cursor-pointer flex align-center">
+            <div
+              onClick={() => setSelectedIndex((prev) => prev - 1)}
+              className="border-r border-blue-200 w-1/2 flex-1 p-4 hover:bg-blue-200 cursor-pointer flex align-center justify-start"
+            >
               <ArrowBackIcon />
-              <span className="ml-2 truncate w-full">
+              <span className="ml-2 truncate w-full ">
                 {selectedIndex}: {structure[selectedIndex - 1].title}
               </span>
             </div>
@@ -153,7 +156,10 @@ export default function App() {
           {selectedIndex === structure.length - 1 ? (
             <div className="flex-1" />
           ) : (
-            <div className="flex-1 p-4 hover:bg-blue-200 w-1/2 cursor-pointer flex align-center justify-end">
+            <div
+              onClick={() => setSelectedIndex((prev) => prev + 1)}
+              className="flex-1 p-4 hover:bg-blue-200 w-1/2 cursor-pointer flex align-center justify-end"
+            >
               <span className="mr-2 w-full truncate">
                 {selectedIndex + 2}: {structure[selectedIndex + 1].title}
               </span>