diff --git a/package-lock.json b/package-lock.json
index b309241..b703701 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,6 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
-        "gh-pages": "^6.1.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^6.23.1",
@@ -5177,14 +5176,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/array.prototype.findlast": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
@@ -7222,11 +7213,6 @@
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.772.tgz",
       "integrity": "sha512-jFfEbxR/abTTJA3ci+2ok1NTuOBBtB4jH+UT6PUmRN+DY3WSD4FFRsgoVQ+QNIJ0T7wrXwzsWCI2WKC46b++2A=="
     },
-    "node_modules/email-addresses": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
-      "integrity": "sha512-4OIPYlA6JXqtVn8zpHpGiI7vE6EQOAg16aGnDMIAlZVinnoZ8208tW1hAbjWydgN/4PLTT9q+O1K6AH/vALJGw=="
-    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
@@ -8486,30 +8472,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/filename-reserved-regex": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-2.0.0.tgz",
-      "integrity": "sha512-lc1bnsSr4L4Bdif8Xb/qrtokGbq5zlsms/CYH8PP+WtCkGNF65DPiQY8vG3SakEdRn8Dlnm+gW/qWKKjS5sZzQ==",
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/filenamify": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-4.3.0.tgz",
-      "integrity": "sha512-hcFKyUG57yWGAzu1CMt/dPzYZuv+jAJUT85bL8mrXvNe6hWj6yEHEc4EdcgiA6Z3oi1/9wXJdZPXF2dZNgwgOg==",
-      "dependencies": {
-        "filename-reserved-regex": "^2.0.0",
-        "strip-outer": "^1.0.1",
-        "trim-repeated": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/filesize": {
       "version": "8.0.7",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-8.0.7.tgz",
@@ -8998,74 +8960,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/gh-pages": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.1.tgz",
-      "integrity": "sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw==",
-      "dependencies": {
-        "async": "^3.2.4",
-        "commander": "^11.0.0",
-        "email-addresses": "^5.0.0",
-        "filenamify": "^4.3.0",
-        "find-cache-dir": "^3.3.1",
-        "fs-extra": "^11.1.1",
-        "globby": "^6.1.0"
-      },
-      "bin": {
-        "gh-pages": "bin/gh-pages.js",
-        "gh-pages-clean": "bin/gh-pages-clean.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/gh-pages/node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dependencies": {
-        "array-uniq": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gh-pages/node_modules/commander": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-11.1.0.tgz",
-      "integrity": "sha512-yPVavfyCcRhmorC7rWlkHn15b4wDVgVmBA7kV4QVBsF7kv/9TKJAbAXVTxvTnwP8HHKjRCJDClKbciiYS7p0DQ==",
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/gh-pages/node_modules/fs-extra": {
-      "version": "11.2.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.2.0.tgz",
-      "integrity": "sha512-PmDi3uwK5nFuXh7XDTlVnS17xJS7vW36is2+w3xcv8SVxiB4NyATf4ctkVY5bkSjX0Y4nbvZCq1/EjtEyr9ktw==",
-      "dependencies": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=14.14"
-      }
-    },
-    "node_modules/gh-pages/node_modules/globby": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
-      "dependencies": {
-        "array-union": "^1.0.1",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -13461,25 +13355,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
-      "dependencies": {
-        "pinkie": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/pirates": {
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
@@ -16616,17 +16491,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/strip-outer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/strip-outer/-/strip-outer-1.0.1.tgz",
-      "integrity": "sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==",
-      "dependencies": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/style-loader": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.4.tgz",
@@ -17134,17 +16998,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/trim-repeated": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
-      "integrity": "sha512-pkonvlKk8/ZuR0D5tLW8ljt5I8kmxp2XKymhepUeOdCEfKpZaktSArkLHZt76OB1ZvO9bssUsDty4SWhLvZpLg==",
-      "dependencies": {
-        "escape-string-regexp": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/tryer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz",
diff --git a/package.json b/package.json
index 7a2d6ac..457a802 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,4 @@
 {
-  "homepage": "https://Dp20703.github.io/TextUtils",
   "name": "TextUtils",
   "version": "0.1.0",
   "private": true,
@@ -7,7 +6,6 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "gh-pages": "^6.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.23.1",
@@ -40,4 +38,4 @@
       "last 1 safari version"
     ]
   }
-}
+}
\ No newline at end of file
diff --git a/public/android-icon-144x144.png b/public/android-icon-144x144.png
new file mode 100644
index 0000000..3c1286d
Binary files /dev/null and b/public/android-icon-144x144.png differ
diff --git a/public/android-icon-192x192.png b/public/android-icon-192x192.png
new file mode 100644
index 0000000..00430d8
Binary files /dev/null and b/public/android-icon-192x192.png differ
diff --git a/public/android-icon-36x36.png b/public/android-icon-36x36.png
new file mode 100644
index 0000000..7171628
Binary files /dev/null and b/public/android-icon-36x36.png differ
diff --git a/public/android-icon-48x48.png b/public/android-icon-48x48.png
new file mode 100644
index 0000000..86117c7
Binary files /dev/null and b/public/android-icon-48x48.png differ
diff --git a/public/android-icon-72x72.png b/public/android-icon-72x72.png
new file mode 100644
index 0000000..f7b2bc6
Binary files /dev/null and b/public/android-icon-72x72.png differ
diff --git a/public/android-icon-96x96.png b/public/android-icon-96x96.png
new file mode 100644
index 0000000..d55061f
Binary files /dev/null and b/public/android-icon-96x96.png differ
diff --git a/public/apple-icon-114x114.png b/public/apple-icon-114x114.png
new file mode 100644
index 0000000..8407ec2
Binary files /dev/null and b/public/apple-icon-114x114.png differ
diff --git a/public/apple-icon-120x120.png b/public/apple-icon-120x120.png
new file mode 100644
index 0000000..1a1e519
Binary files /dev/null and b/public/apple-icon-120x120.png differ
diff --git a/public/apple-icon-144x144.png b/public/apple-icon-144x144.png
new file mode 100644
index 0000000..3c1286d
Binary files /dev/null and b/public/apple-icon-144x144.png differ
diff --git a/public/apple-icon-152x152.png b/public/apple-icon-152x152.png
new file mode 100644
index 0000000..5120684
Binary files /dev/null and b/public/apple-icon-152x152.png differ
diff --git a/public/apple-icon-180x180.png b/public/apple-icon-180x180.png
new file mode 100644
index 0000000..6d2bf66
Binary files /dev/null and b/public/apple-icon-180x180.png differ
diff --git a/public/apple-icon-57x57.png b/public/apple-icon-57x57.png
new file mode 100644
index 0000000..aa9adfb
Binary files /dev/null and b/public/apple-icon-57x57.png differ
diff --git a/public/apple-icon-60x60.png b/public/apple-icon-60x60.png
new file mode 100644
index 0000000..cb647d9
Binary files /dev/null and b/public/apple-icon-60x60.png differ
diff --git a/public/apple-icon-72x72.png b/public/apple-icon-72x72.png
new file mode 100644
index 0000000..f7b2bc6
Binary files /dev/null and b/public/apple-icon-72x72.png differ
diff --git a/public/apple-icon-76x76.png b/public/apple-icon-76x76.png
new file mode 100644
index 0000000..0044483
Binary files /dev/null and b/public/apple-icon-76x76.png differ
diff --git a/public/apple-icon-precomposed.png b/public/apple-icon-precomposed.png
new file mode 100644
index 0000000..a57fc91
Binary files /dev/null and b/public/apple-icon-precomposed.png differ
diff --git a/public/apple-icon.png b/public/apple-icon.png
new file mode 100644
index 0000000..a57fc91
Binary files /dev/null and b/public/apple-icon.png differ
diff --git a/public/browserconfig.xml b/public/browserconfig.xml
new file mode 100644
index 0000000..c554148
--- /dev/null
+++ b/public/browserconfig.xml
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>
\ No newline at end of file
diff --git a/public/index.html b/public/index.html
index 29dc8ec..dc359d5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,8 +7,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description"
-    content="TextUtils is a Utility  which can be used to manipulate your text in the way you want" />
-  <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-16x16.png" />
+  content="TextUtils is a word counter and a character counting utility which can be used to manipulate your text in the way you want. You can remove extra spaces, copy the manipulated text as well as convert your text from Uppercase to lowercase and lowercase to Uppercase"/>
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-16x16.png" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -26,8 +26,7 @@
 
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
     integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
-  <title>TextUitls - Home</title>
-</head>
+    <title>TextUtils - Word counter | character counter | lowercase to uppercase | uppercase to lowercase</title></head>
 
 <body>
   <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/public/manifest.json b/public/manifest.json
index 080d6c7..013d4a6 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -1,25 +1,41 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}
\ No newline at end of file
diff --git a/public/ms-icon-144x144.png b/public/ms-icon-144x144.png
new file mode 100644
index 0000000..3c1286d
Binary files /dev/null and b/public/ms-icon-144x144.png differ
diff --git a/public/ms-icon-150x150.png b/public/ms-icon-150x150.png
new file mode 100644
index 0000000..adc5bde
Binary files /dev/null and b/public/ms-icon-150x150.png differ
diff --git a/public/ms-icon-310x310.png b/public/ms-icon-310x310.png
new file mode 100644
index 0000000..279b17f
Binary files /dev/null and b/public/ms-icon-310x310.png differ
diff --git a/public/ms-icon-70x70.png b/public/ms-icon-70x70.png
new file mode 100644
index 0000000..7f9d122
Binary files /dev/null and b/public/ms-icon-70x70.png differ
diff --git a/src/App.js b/src/App.js
index f1ec560..3d65f77 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,18 +1,24 @@
 // import logo from './logo.svg';
 import "./App.css";
-// import About from "./components/About";
+import About from "./components/About";
 import Alert from "./components/Alert";
 import Navbar from "./components/Navbar";
 import TextForm from "./components/TextForm";
 import React, { useState } from "react";
-// import {
-//   BrowserRouter as Router,
-//   Routes,
-//   Route,
-// } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Routes,
+  Route,
+} from "react-router-dom";
 
 function App() {
+ 
+
+  //For Dark and Light Mode in Navbar.js File
+  // const [mode, setMode] = useState("light");
   const [mode, setMode] = useState("light");
+
+  //For Alert in Alert.js File
   const [alert, setAlert] = useState(null);
   const showAlert = (message, type) => {
     setAlert({
@@ -23,46 +29,64 @@ function App() {
       setAlert(null);
     }, 1500);
   }
+const removeClassList=()=>{
+  document.body.classList.remove('bg-primary');
+  document.body.classList.remove('bg-danger');
+  document.body.classList.remove('bg-warning');
+  document.body.classList.remove('bg-success');
+  document.body.classList.remove('bg-dark');
+  document.body.classList.remove('bg-light');
+}
+  //For Dark Mode in Navbar.js File
+  const toggleMode = (cls) => {
+    removeClassList();
+    // console.log(cls)
+document.body.classList.add('bg-'+cls)
+cls==='dark'?setMode('light'):setMode('dark')
+
+
 
-  const toggleMode = () => {
-    if (mode === "light") {
-      setMode("dark");
-      document.body.style.backgroundColor = "#042743";
-      showAlert("Dark Mode has been Enabled", 'success');
-      document.title = 'TextUtils - Dark Mode';
-      // setInterval(()=>{
-      //   document.title = 'TextUtils - Is Amazing Mode';
-      // },2000)
-      // setInterval(()=>{
-      //   document.title = 'TextUtils Install now';
-      // },1500)
-    } else {
-      setMode("light");
-      document.body.style.backgroundColor = "white";
-      showAlert("Light Mode has been Enabled", 'success')
-      document.title = 'TextUtils - Light Mode';
-    }
   };
+  //   if (mode === "light") {
+      // setMode("dark");
+  //     document.body.style.backgroundColor = "#042743";
+  //     showAlert("Dark Mode has been Enabled", 'success');
+  //     // document.title = 'TextUtils - Dark Mode';
+  //     // setInterval(()=>{
+  //     //   document.title = 'TextUtils - Is Amazing Mode';
+  //     // },2000)
+  //     // setInterval(()=>{
+  //     //   document.title = 'TextUtils Install now';
+  //     // },1500)
+      
+  //   } else {
+  //     setMode("light");
+  //     document.body.style.backgroundColor = "white";
+  //     showAlert("Light Mode has been Enabled", 'success')
+  //     // document.title = 'TextUtils - Light Mode';
+     
+  //   }
+  // };
 
   return (
     <>
-      {/* <Router> */}
+      <Router>
         <Navbar title="TextUtils" mode={mode} toggleStyle={toggleMode} />
         {/* <Navbar title={3} about="about Text" /> */}
         {/* <Navbar /> */}
         <Alert Alert={alert} />
         <div className="container my-3">
-          {/* <Routes > */}
+          <Routes>
             {/* <Route extract path="/about"> */}
-            {/* <Route path='/about' element={<About />} > */}
+            <Route path='/about' element={<About mode={mode}  />} >
               {/* <About/> */}
-            {/* </Route> */}
-            {/* <Route extract path="/" element={<TextForm showAlert={showAlert} heading="Enter the text to analyze blow" mode={mode} />}> */}
-            {/* </Route> */}
-          {/* </Routes> */}
-              <TextForm showAlert={showAlert} heading="Enter the text to analyze blow" mode={mode} />
+            </Route>
+            <Route extract path="/" element={<TextForm showAlert={showAlert} heading="Try TextUtils - word counter, character counter, remove extra spaces" mode={mode} />}>
+            </Route>
+          </Routes>
+          {/* <TextForm showAlert={showAlert} heading="Enter the text to analyze blow" mode={mode} /> */}
         </div>
-      {/* </Router> */}
+      </Router>
     </>
   );
 }
diff --git a/src/components/About.js b/src/components/About.js
index c83113d..7451bf7 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -1,136 +1,60 @@
-import React, { useState, useSyncExternalStore } from "react";
+import React from 'react'
 
-export default function About() {
-  const [mystyle, SetMystyle] = useState({
-    color: "black",
-    backgroundColor: "white",
-  });
+export default function About(props) {
 
-  const [btnText, SetBtnText] = useState("Enable Dark Mode");
-
-  const toggleStyle = () => {
-    if (mystyle.color === "black") {
-      SetMystyle({
-        color: "white",
-        backgroundColor: "black",
-        border: "1px solid white",
-      });
-      SetBtnText("Enable Light Mode");
-    } else {
-      SetMystyle({
-        color: "black",
-        backgroundColor: "white",
-      });
-      SetBtnText("Enable Dark Mode");
+    // const [myStyle, setMyStyle] = useState({
+    //     color: 'black',
+    //     backgroundColor: 'white'
+    // }) 
+    let myStyle = {
+        color: props.mode ==='dark'?'white':'#042743',
+        backgroundColor: props.mode ==='dark'?'rgb(36 74 104)':'white', 
     }
-  };
-  return (
-    <div className="container my-5" style={mystyle}>
-      <h1 className="my-3">About Us</h1>
-      <div className="accordion" id="accordionExample">
-        <div className="accordion-item">
-          <h2 className="accordion-header">
-            <button
-              className="accordion-button"
-              type="button"
-              style={mystyle}
-              data-bs-toggle="collapse"
-              data-bs-target="#collapseOne"
-              aria-expanded="true"
-              aria-controls="collapseOne"
-            >
-              Accordion Item #1
-            </button>
-          </h2>
-          <div
-            id="collapseOne"
-            className="accordion-collapse collapse show"
-            data-bs-parent="#accordionExample"
-          >
-            <div className="accordion-body" style={mystyle}>
-              <strong>This is the first item's accordion body.</strong> It is
-              shown by default, until the collapse plugin adds the appropriate
-              classes that we use to style each element. These classes control
-              the overall appearance, as well as the showing and hiding via CSS
-              transitions. You can modify any of this with custom CSS or
-              overriding our default variables. It's also worth noting that just
-              about any HTML can go within the <code>.accordion-body</code>,
-              though the transition does limit overflow.
-            </div>
-          </div>
-        </div>
-        <div className="accordion-item">
-          <h2 className="accordion-header">
-            <button
-              className="accordion-button collapsed"
-              type="button"
-              style={mystyle}
-              data-bs-toggle="collapse"
-              data-bs-target="#collapseTwo"
-              aria-expanded="false"
-              aria-controls="collapseTwo"
-            >
-              Accordion Item #2
-            </button>
-          </h2>
-          <div
-            id="collapseTwo"
-            className="accordion-collapse collapse"
-            data-bs-parent="#accordionExample"
-          >
-            <div className="accordion-body" style={mystyle}>
-              <strong>This is the second item's accordion body.</strong> It is
-              hidden by default, until the collapse plugin adds the appropriate
-              classes that we use to style each element. These classes control
-              the overall appearance, as well as the showing and hiding via CSS
-              transitions. You can modify any of this with custom CSS or
-              overriding our default variables. It's also worth noting that just
-              about any HTML can go within the <code>.accordion-body</code>,
-              though the transition does limit overflow.
-            </div>
-          </div>
-        </div>
-        <div className="accordion-item">
-          <h2 className="accordion-header">
-            <button
-              className="accordion-button collapsed"
-              type="button"
-              style={mystyle}
-              data-bs-toggle="collapse"
-              data-bs-target="#collapseThree"
-              aria-expanded="false"
-              aria-controls="collapseThree"
-            >
-              Accordion Item #3
-            </button>
-          </h2>
-          <div
-            id="collapseThree"
-            className="accordion-collapse collapse"
-            data-bs-parent="#accordionExample"
-          >
-            <div className="accordion-body" style={mystyle}>
-              <strong>This is the third item's accordion body.</strong> It is
-              hidden by default, until the collapse plugin adds the appropriate
-              classes that we use to style each element. These classes control
-              the overall appearance, as well as the showing and hiding via CSS
-              transitions. You can modify any of this with custom CSS or
-              overriding our default variables. It's also worth noting that just
-              about any HTML can go within the <code>.accordion-body</code>,
-              though the transition does limit overflow.
+    
+    return (
+        <div className="container">
+            <h1 className="my-3" style={{color: props.mode ==='dark'?'white':'#042743'}}>About Us</h1>
+            <div className="accordion" id="accordionExample">
+                <div className="accordion-item">
+                    <h2 className="accordion-header" id="headingOne">
+                    <button className="accordion-button" type="button" style={myStyle} data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                    <strong>Analyze Your text </strong>
+                    </button>
+                    </h2>
+                    <div id="collapseOne" className="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
+                    <div className="accordion-body" style={myStyle}>
+                    Textutils gives you a way to analyze your text quickly and efficiently. Be it word count, character count or 
+
+                    </div>
+                    </div>
+                </div>
+                <div className="accordion-item">
+                    <h2 className="accordion-header" id="headingTwo">
+                    <button className="accordion-button collapsed" style={myStyle} type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                    <strong>Free to use </strong>
+                    </button>
+                    </h2>
+                    <div id="collapseTwo" className="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
+                    <div className="accordion-body" style={myStyle}>
+                    TextUtils is a free character counter tool that provides instant character count & word count statistics for a given text. TextUtils reports the number of words and characters. Thus it is suitable for writing text with word/ character limit.
+                    </div>
+                    </div>
+                </div>
+                <div className="accordion-item">
+                    <h2 className="accordion-header" id="headingThree">
+                    <button className="accordion-button collapsed" style={myStyle} type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                    <strong>Browser Compatible </strong>
+                    </button>
+                    </h2>
+                    <div id="collapseThree" className="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
+                    <div className="accordion-body" style={myStyle}>
+                    This word counter software works in any web browsers such as Chrome, Firefox, Internet Explorer, Safari, Opera. It suits to count characters in facebook, blog, books, excel document, pdf document, essays, etc.
+
+                    </div>
+                    </div>
+                </div>
             </div>
-          </div>
+
         </div>
-      </div>
-      <div className="container my-3">
-        <button
-          onClick={toggleStyle}
-          type="button"
-          className="btn btn-primary my-3"
-        >
-          {btnText}
-        </button>
-      </div>
-    </div>
-  );
-}
+    )
+}
\ No newline at end of file
diff --git a/src/components/Alert.js b/src/components/Alert.js
index 723fed8..43b4933 100644
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -6,11 +6,13 @@ function Alert(props) {
         return lower.charAt(0).toUpperCase() + lower.slice(1);
     }
     return (
-        props.Alert &&
+        <div style={{height:'50px'}}>
+        {props.Alert &&
         <div className={`alert alert-${props.Alert.type} alert-dismissible fade show`} role="alert">
             <strong>{captialize(props.Alert.type)}</strong>: {props.Alert.msg}
+        </div>}
         </div>
     )
 }
 
-export default Alert
+export default Alert
\ No newline at end of file
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index b37d3ad..6c4a111 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-// import { Link } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 export default function Navbar(props) {
   return (
@@ -8,9 +8,9 @@ export default function Navbar(props) {
       className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}
     >
       <div className="container-fluid">
-        <a className="navbar-brand" href="#">
+        <Link className="navbar-brand" to="/">
           {props.title}
-        </a>
+        </Link>
         <button
           className="navbar-toggler"
           type="button"
@@ -25,18 +25,18 @@ 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">
-              <a className="nav-link active" aria-current="page" href="#">
+              {/* <a className="nav-link active" aria-current="page" href="#">
                 Home
-              </a>
-              {/* <Link className="nav-link active" aria-current="page" to="/">
+              </a> */}
+              <Link className="nav-link active" aria-current="page" to="/">
                 Home
-              </Link> */}
+              </Link>
             </li>
-            {/* <li className="nav-item">
+            <li className="nav-item">
               <Link className="nav-link " to="/about">
-              About
+                About
               </Link>
-            </li> */}
+            </li>
           </ul>
 
           {/* <form className="d-flex" role="search">
@@ -50,8 +50,17 @@ export default function Navbar(props) {
               Search
             </button>
           </form> */}
+          <div className="d-flex">
+            <div className="bg-primary rounded mx-2 border border-light" onClick={() => { props.toggleStyle('primary') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
+            <div className="bg-danger rounded mx-2 border border-light" onClick={() => { props.toggleStyle('danger') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
+            <div className="bg-success rounded mx-2 border border-light" onClick={() => { props.toggleStyle('success') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
+            <div className="bg-warning rounded mx-2 border border-light" onClick={() => { props.toggleStyle('warning') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
+            <div className="bg-light rounded mx-2 border border-light" onClick={() => { props.toggleStyle('light') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
+            <div className="bg-dark rounded mx-2 border border-light" onClick={() => { props.toggleStyle('dark') }} style={{ height: '30px', width: '30px', cursor: 'pointer' }}></div>
+            
+          </div>
 
-          <div
+          {/* <div
             className={`form-check form-switch text-${props.mode === "light" ? "dark" : "light"}`}>
             <input onClick={props.toggleStyle}
               className="form-check-input"
@@ -65,7 +74,7 @@ export default function Navbar(props) {
               Enable Dark Mode
             </label>
 
-          </div>
+          </div> */}
 
 
         </div>
diff --git a/src/components/TextForm.js b/src/components/TextForm.js
index 6ed0cd3..826d355 100644
--- a/src/components/TextForm.js
+++ b/src/components/TextForm.js
@@ -24,6 +24,7 @@ export default function TextForm(props) {
     let newText = document.getElementById("mybox");
     newText.select();
     navigator.clipboard.writeText(newText.value);
+    document.getSelection().removeAllRanges();
     props.showAlert("Copied to Clipboard", "success");
 
   };
@@ -46,7 +47,7 @@ export default function TextForm(props) {
         className="container "
         style={{ color: props.mode === "dark" ? "white" : "#042743" }}
       >
-        <h1>{props.heading}</h1>
+          <h1 className='mb-4'>{props.heading}</h1>
         <div className="mb-3">
           <textarea
             className="form-control"
@@ -61,40 +62,29 @@ export default function TextForm(props) {
             }}
           ></textarea>
         </div>
-        <button className="btn btn-primary mx-1" onClick={HandleUpClick}>
+        <button disabled={text.length===0} className="btn btn-primary mx-1 my-1" onClick={HandleUpClick}>
           Convert to Upercase
         </button>
-        <button className="btn btn-primary mx-1" onClick={HandleLoClick}>
+        <button disabled={text.length===0} className="btn btn-primary mx-1 my-1" onClick={HandleLoClick}>
           Convert to Lowercase
         </button>
-        <button className="btn btn-primary mx-1" onClick={HandleClearClick}>
+        <button disabled={text.length===0} className="btn btn-primary mx-1 my-1" onClick={HandleClearClick}>
           Clear
         </button>
-        <button className="btn btn-primary mx-1" onClick={HandleCopy}>
+        <button disabled={text.length===0} className="btn btn-primary mx-1 my-1" onClick={HandleCopy}>
           Copy Text
         </button>
-        <button className="btn btn-primary mx-1" onClick={HandleExtraSpaces}>
+        <button disabled={text.length===0} className="btn btn-primary mx-1 my-1" onClick={HandleExtraSpaces}>
           Remove Extra Spaces
         </button>
       </div>
-      <div
-        className="container my-3"
-        style={{ color: props.mode === "dark" ? "white" : "#042743" }}
-      >
-        <h2>Text Summary</h2>
-        <p>
-          <b>
-            {(text.length > 0) ? text.split(" ").length : 0} words and {text.length} Characters
-          </b>
-        </p>
-        <p>{0.008 * text.split(" ").length} Minutes read </p>
-        <h2>Preview</h2>
-        <p>
-          {text.length > 0
-            ? text
-            : "Enter something in the textbox above to Preview it here"}
-        </p>
-      </div>
+      <div className="container my-3" style={{color: props.mode==='dark'?'white':'#042743'}}>
+            <h2>Your text summary</h2>
+            <p>{text.split(/\s+/).filter((element)=>{return element.length!==0}).length} words and {text.length} characters</p>
+            <p>{0.008 *  text.split(/\s+/).filter((element)=>{return element.length!==0}).length} Minutes read</p>
+            <h2>Preview</h2>
+            <p>{text.length>0?text:"Nothing to preview!"}</p>
+        </div>
     </>
   );
 }