diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 68a9ee44..ca528eff 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Routes, Route, useNavigate, useParams, useLocation } from 'react-router-dom';
-import { Book, ChevronRight, Moon, Sun, LogOut, Search } from 'lucide-react';
+import { Book, ChevronRight, Moon, Sun, LogOut, Search, User } from 'lucide-react';
 import BookSelector from './components/BookSelector';
 import ChapterSelector from './components/ChapterSelector';
 import BibleReader from './components/BibleReader';
@@ -452,10 +452,10 @@ function App() {
                   ) : (
                     <button
                       onClick={handleLogin}
-                      className="text-sm px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+                      className="text-sm px-3 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
                     >
                       <span className="hidden sm:inline">Login</span>
-                      <span className="sm:hidden">👤</span>
+                      <User className="sm:hidden h-4 w-4" />
                     </button>
                   )}
                 </div>