diff --git a/src/App.jsx b/src/App.jsx
index 1b4a01f..dddd5d3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -17,15 +17,13 @@ function App() {
 
   const[mode,setMode]=useState('light');
 
-  const toggleMode=()=>{
-    if(mode==='light'){
-      setMode('dark');
-      document.body.style.backgroundColor='#042743';
-    }
-    else{
-      setMode('light');
-      document.body.style.backgroundColor = '#fff';
-    }
+  const toggleMode = () => {
+    setMode(prevMode => (prevMode === 'light' ? 'dark' : 'light'));
+  };
+    // else{
+    //   setMode('light');
+    //   document.body.style.backgroundColor = '#fff';
+    // }
   }
 
   return (
@@ -48,6 +46,6 @@ function App() {
         </div>
       </>
   );
-}
+
 
 export default App;
diff --git a/src/assets/styles/App.css b/src/assets/styles/App.css
index dd47eee..554aa7e 100644
--- a/src/assets/styles/App.css
+++ b/src/assets/styles/App.css
@@ -1,13 +1,19 @@
-/* 
+
 .app-container.light {
-  background-color: white;
-  color: black;
-} */
+  --bg-color: #ffffff;
+  --text-color: #000000;
+}
 
-/* Dark mode styles */
 .app-container.dark {
-  background-color: #042743;
-  color: white;
+  --bg-color: #042743;
+  --text-color: #ffffff;
+}
+
+.app-container {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  min-height: 100vh;
+  transition: all 0.3s ease;
 }
 
 
diff --git a/src/assets/styles/Books.css b/src/assets/styles/Books.css
index e014e44..aea17b0 100644
--- a/src/assets/styles/Books.css
+++ b/src/assets/styles/Books.css
@@ -29,6 +29,23 @@
     border: 2px solid #0aa5ff;
 }
 
+/* Container for search status messages */
+.search-status-container {
+    text-align: center;
+    margin: 20px 0;
+    font-family: 'Poppins', sans-serif;
+}
+
+.status-text {
+    font-size: 1.5rem;
+    color: var(--text-color);
+    text-transform: capitalize;
+    border-bottom: 2px solid #2ecc71;
+    display: inline-block;
+    padding-bottom: 5px;
+}
+
+
 @media (max-width: 900px) {
 
     .searchBook-div input {
diff --git a/src/pages/Books.jsx b/src/pages/Books.jsx
index c27f627..c7ad3c7 100644
--- a/src/pages/Books.jsx
+++ b/src/pages/Books.jsx
@@ -45,6 +45,14 @@ const Books = ({mode,changeMode}) => {
                 />
             </div>
         </form>
+        {/* Container for search status messages */}
+        <div className="search-status-container">
+            {isLoading ? (
+                <h2 className="status-text">Searching for "{search}"...</h2>
+            ) : (
+                <h2 className="status-text">{searchResult}</h2>
+            )}
+        </div>
 
         <BookList/>
       <Footer/>
diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx
index 341571d..1d302a0 100644
--- a/src/pages/Login.jsx
+++ b/src/pages/Login.jsx
@@ -42,7 +42,7 @@ const Login=({mode,changeMode})=>{
     return (
         <div className='login-container'>
          <Navbar mode={mode} changeMode={changeMode}/>
-         <section className={`sectionclass {$mode}`}>
+         <section className={`sectionclass ${mode}`}>
             <form>
             <h1>Login</h1>
                 <label htmlFor="username">