diff --git a/src/App.js b/src/App.js
index 45fd636..3031d5d 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,16 +22,16 @@ setTimeout(()=>{
   setAlert(null);
 },2600)
   }
- const removeBodyClasses=()=>{
-   document.body.classList.remove("bg-light");
-   document.body.classList.remove("bg-dark");
-   document.body.classList.remove("bg-warning");
-   document.body.classList.remove("bg-danger");
-   document.body.classList.remove("bg-success");
- }
+//  const removeBodyClasses=()=>{
+//    document.body.classList.remove("bg-light");
+//    document.body.classList.remove("bg-dark");
+//    document.body.classList.remove("bg-warning");
+//    document.body.classList.remove("bg-danger");
+//    document.body.classList.remove("bg-success");
+//  }
   const toggleMode = (cls)=>{
-    removeBodyClasses();
-    document.body.classList.add("bg-"+cls);
+    // removeBodyClasses();
+    // document.body.classList.add("bg-"+cls);
     
     if(mode==='light'){
       setMode('dark');
diff --git a/src/component/About.js b/src/component/About.js
index 4e73046..392c027 100644
--- a/src/component/About.js
+++ b/src/component/About.js
@@ -1,4 +1,4 @@
-import React ,{useState} from 'react'
+import React from 'react'
 
 export default function About(props) {
 //  const [myStyle,setmyStyle]=useState({
diff --git a/src/component/Navbar.js b/src/component/Navbar.js
index 8d5013d..d67652e 100644
--- a/src/component/Navbar.js
+++ b/src/component/Navbar.js
@@ -13,17 +13,17 @@ export default function Navbar(props) {
           <div className="collapse navbar-collapse" id="navbarSupportedContent">
             <ul className="navbar-nav me-auto mb-2 mb-lg-0">
               <li className="nav-item">
-                <Link className="nav-link active" aria-current="page" to="/">Home</Link>
+                <Link className="nav-link " aria-current="page" to="/">Home</Link>
               </li>
               <li className="nav-item">
                 <Link className="nav-link" to="/About">About</Link>
               </li>
             </ul>
-            <div className="d-flex">
+            {/* <div className="d-flex">
               <div className="bg-success rounded mx-2" onClick={()=> props.toggleMode('success')} style={{height:'20px',width:'20px',cursor:'pointer'}}></div>
               <div className="bg-danger rounded mx-2" onClick={()=> props.toggleMode('danger')} style={{height:'20px',width:'20px',cursor:'pointer'}}></div>
               <div className="bg-warning rounded mx-2" onClick={()=> props.toggleMode('warning')} style={{height:'20px',width:'20px',cursor:'pointer'}}></div>
-            </div>
+            </div> */}
             <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
               <input className="form-check-input" onClick={()=>{props.toggleMode(null)}} type="checkbox" id="flexSwitchCheckDefault"/>
              <label className="form-check-label" htmlFor="flexSwitchCheckDefault">{`Toggle mode`}</label>
diff --git a/src/component/TextForm.js b/src/component/TextForm.js
index ce0c76e..699a3d7 100644
--- a/src/component/TextForm.js
+++ b/src/component/TextForm.js
@@ -14,30 +14,31 @@ export default function TextForm(props) {
     const handleOnChange=(event)=>{
     setText(event.target.value);
     }
+    const txt=document.getElementById("myBox");
     const bold=()=>{
-        const txt=document.getElementById("myBox");
+       
         txt.style.fontWeight="700";
     }
     const normal=()=>{
-        const txt=document.getElementById("myBox");
+        
         txt.style.fontWeight="400";
     }
     const italic=()=>{
-        const txt=document.getElementById("myBox");
+        
         txt.style.fontStyle="italic";
     }
     const textNormal=()=>{
-        const txt=document.getElementById("myBox");
+        
         txt.style.fontStyle="normal";
     }
     
     const color=()=>{
-        const txt=document.getElementById("myBox");
+        
         const clr=document.getElementById("color");
         txt.style.color=clr.value;
     }
     const txtarbg=()=>{
-        const txt=document.getElementById("myBox");
+        
         const clr=document.getElementById("color2");
         txt.style.backgroundColor=clr.value;
     }
@@ -46,7 +47,7 @@ export default function TextForm(props) {
         setText(newText);
     }
     const handleCopy=()=>{
-        const txt=document.getElementById("myBox");
+        
         txt.select();
         navigator.clipboard.writeText(txt.value);
         document.getSelection().removeAllRanges();
@@ -85,7 +86,7 @@ export default function TextForm(props) {
 </div>
 <div className={`container my-3 text-${props.mode==='light'?'dark':'light'}`}>
     <h1>Your text summary</h1>
-    <p><b>{text.split(" ").filter((e)=>{return e.length!==0}).length }</b> words,<b>{text.length}</b> characters</p>
+    <p><b>{text.split(/\s+/).filter((e)=>{return e.length!==0}).length }</b> words,<b>{text.length}</b> characters</p>
     <p><b>{.008*text.split(" ").filter((e)=>{return e.length!==0}).length}</b> minutes to read</p>
     <h3>Preview</h3>
     <p>{text.length>0?text:"Enter something in the text box to preview it here!"}</p>