diff --git a/src/App.js b/src/App.js
index 9556e8a..c12ef24 100644
--- a/src/App.js
+++ b/src/App.js
@@ -27,19 +27,22 @@ function App() {
   const toggleMode = () => {
     if (Mode === 'light') {
       setMode('dark');
-      setbtntxt('Enable Light Mode');
-      document.body.style.backgroundColor = '#000066'
-      document.body.style.color = 'white'
-      showAlert(" Dark mode has been enabled", "success");
+      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');
-      setbtntxt('Enable Dark Mode');
-      document.body.style.backgroundColor = 'white'
-      document.body.style.color = 'black'
-      showAlert(" Light mode has been enabled", "success");
+      document.body.style.backgroundColor = 'white';
+      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 d77ad30..c000863 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -20,6 +20,7 @@ export default function Navbar(props) {
           <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
             <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault" />
 
+
             <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{props.btntxt}</label>
           </div> 
         </div>