diff --git a/src/App.js b/src/App.js
index f5e9f22..1b6ad09 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,14 +27,19 @@ function App() {
     if (Mode === 'light') {
       setMode('dark');
       document.body.style.backgroundColor = '#042743';
+      document.getElementById('darkmode-id').style.color='white'
+      document.getElementById('darkmode-id').innerText = "Enable Lightmode"
       showAlert(" Dark mode has been enabled", "primary");
       document.title = 'TextEdit-Dark Mode';
 
     }
-    else {
+    else
+    {
       setMode('light');
       document.body.style.backgroundColor = 'white';
-      showAlert(" Light mode has been enabled", "success");
+      document.getElementById('darkmode-id').style.color='#042743'
+      document.getElementById('darkmode-id').innerText = "Enable Darkmode"
+      showAlert("Light mode has been enabled", "primary");
       document.title = 'TextEdit-Light Mode';
 
     }
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 75b1fcf..0eadac9 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -19,7 +19,7 @@ export default function Navbar(props) {
           </ul>
           <div className={`form-check form-switch text-${props.Mode==='light'?'black':'white'}`}>
             <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
-            <label className="form-check-label" htmlfor="flexSwitchCheckDefault">Enable LightMode</label>
+            <label className="form-check-label" htmlfor="flexSwitchCheckDefault" id='darkmode-id'>Enable LightMode</label>
           </div> 
         </div>
       </div>