diff --git a/frontend/src/components/BookSelector.tsx b/frontend/src/components/BookSelector.tsx
index 589bc435..017288c1 100644
--- a/frontend/src/components/BookSelector.tsx
+++ b/frontend/src/components/BookSelector.tsx
@@ -179,6 +179,20 @@ const BookSelector: React.FC<BookSelectorProps> = ({ books, onBookSelect, format
         </div>
       )}
 
+      {/* Search Bar */}
+      <div className="flex justify-center mb-8">
+        <div className="w-full max-w-md relative">
+          <input
+            type="text"
+            placeholder="Search for verses, words, or phrases..."
+            className="w-full pl-10 pr-4 py-3 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            onClick={onSearchClick}
+            readOnly
+          />
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
+        </div>
+      </div>
+
       <div className="text-center">
         <h1 className="text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4">
           {version.toUpperCase()} Bible
diff --git a/frontend/src/components/ChapterSelector.tsx b/frontend/src/components/ChapterSelector.tsx
index edc579ff..0a39d8a7 100644
--- a/frontend/src/components/ChapterSelector.tsx
+++ b/frontend/src/components/ChapterSelector.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ArrowLeft, FileText, Star, ChevronRight } from 'lucide-react';
+import { ArrowLeft, FileText, Star, ChevronRight, Search } from 'lucide-react';
 import { getBook } from '../services/api';
 
 interface ChapterSelectorProps {
@@ -10,6 +10,7 @@ interface ChapterSelectorProps {
   user?: any;
   onFavoriteChange?: () => void;
   version?: string;
+  onSearchClick?: () => void;
 }
 
 const ChapterSelector: React.FC<ChapterSelectorProps> = ({ book, onChapterSelect, onBack, formatBookName, user, onFavoriteChange, version = 'esv' }) => {