diff --git a/components/bible/bible-reader-app.tsx b/components/bible/bible-reader-app.tsx
index 5d464be..a2e6f8f 100644
--- a/components/bible/bible-reader-app.tsx
+++ b/components/bible/bible-reader-app.tsx
@@ -1,5 +1,6 @@
 'use client'
 import { useState, useEffect } from 'react'
+import { useLocale } from 'next-intl'
 import { Box, Typography, Button } from '@mui/material'
 import { BibleChapter, BibleVerse } from '@/types'
 import { getCachedChapter, cacheChapter } from '@/lib/cache-manager'
@@ -17,6 +18,7 @@ interface BookInfo {
 }
 
 export function BibleReaderApp() {
+  const locale = useLocale()
   const [bookId, setBookId] = useState(1) // Genesis (numeric ID from search)
   const [chapter, setChapter] = useState(1)
   const [currentChapter, setCurrentChapter] = useState<BibleChapter | null>(null)
@@ -30,10 +32,10 @@ export function BibleReaderApp() {
   const [error, setError] = useState<string | null>(null)
   const [booksLoading, setBooksLoading] = useState(true)
 
-  // Load books on mount
+  // Load books on mount or when locale changes
   useEffect(() => {
     loadBooks()
-  }, [])
+  }, [locale])
 
   // Load chapter when bookId or chapter changes
   useEffect(() => {
@@ -47,7 +49,7 @@ export function BibleReaderApp() {
     setError(null)
 
     try {
-      const response = await fetch('/api/bible/books')
+      const response = await fetch(`/api/bible/books?locale=${locale}`)
       if (!response.ok) {
         throw new Error(`Failed to load books: ${response.status}`)
       }
@@ -167,18 +169,14 @@ export function BibleReaderApp() {
   }
 
   return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: 'auto', overflow: 'hidden' }}>
       {/* Header with search */}
       <Box
         sx={{
-          position: 'fixed',
-          top: 0,
-          left: 0,
-          right: 0,
-          zIndex: 50,
           p: 2,
           bgcolor: 'background.paper',
-          boxShadow: 1
+          boxShadow: 1,
+          flexShrink: 0
         }}
       >
         <SearchNavigator
@@ -190,7 +188,7 @@ export function BibleReaderApp() {
       </Box>
 
       {/* Reading area */}
-      <Box sx={{ flex: 1, mt: '80px', overflow: 'auto' }}>
+      <Box sx={{ flex: 1, overflow: 'auto' }}>
         {!booksLoading && error ? (
           <Box sx={{ p: 4, textAlign: 'center' }}>
             <Typography color="error" variant="h6">{error}</Typography>