diff --git a/src/Components/Navigation.js b/src/Components/Navigation.js
index 7ee5b84..cffb55b 100755
--- a/src/Components/Navigation.js
+++ b/src/Components/Navigation.js
@@ -1,37 +1,80 @@
-import React from 'react';
+import React from "react";
 
-const Navigation = () => (
-  <div className="main thememain-header">
-    <div className="container">
-      <nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
-        <a className="navbar-brand" href="#" title="10secondsofcode">10secondsofcode</a>
-        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
-          <span className="navbar-toggler-icon" />
-        </button>
+const Navigation = () => {
+  const [currentmode, changeState] = React.useState("Light Mode");
+  const DocBody = document.getElementById("Apptheme");
+  const changemode = () => {
+    currentmode === "Light Mode"
+      ? ((DocBody.className = "thememain-dark"), changeState("Dark Mode"))
+      : ((DocBody.className = "thememain-white "), changeState("Light Mode"));
+  };
+  return (
+    <div className="main thememain-header d-flex align-items-center">
+      <div className="container">
+        <nav className="navbar navbar-expand-lg navbar-light bg-light thememain-header">
+          <a className="navbar-brand" href="#" title="10secondsofcode">
+            10secondsofcode
+          </a>
+          <button
+            className="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarTogglerDemo02"
+            aria-controls="navbarTogglerDemo02"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span className="navbar-toggler-icon" />
+          </button>
 
-        <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
-          <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
-            <li className="nav-item active">
-              <a className="nav-link" href="#" title="10secondsofcode">
-                Home
-                <span className="sr-only">(current)</span>
-              </a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link" href="#" title="ReactJs Tutorial">ReactJs</a>
-            </li>
-            <li className="nav-item">
-              <a className="nav-link disabled" href="#" title="Javascript Tutorial">Javascript</a>
-            </li>
-          </ul>
-          <form className="form-inline my-2 my-lg-0">
-            <input className="form-control mr-sm-2" type="search" placeholder="Search" />
-            <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-          </form>
-        </div>
-      </nav>
+          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
+            <ul className="navbar-nav mr-auto mt-2 mt-lg-0">
+              <li className="nav-item active">
+                <a className="nav-link" href="#" title="10secondsofcode">
+                  Home
+                  <span className="sr-only">(current)</span>
+                </a>
+              </li>
+              <li className="nav-item">
+                <a className="nav-link" href="#" title="ReactJs Tutorial">
+                  ReactJs
+                </a>
+              </li>
+              <li className="nav-item">
+                <a
+                  className="nav-link disabled"
+                  href="#"
+                  title="Javascript Tutorial"
+                >
+                  Javascript
+                </a>
+              </li>
+            </ul>
+            <form className="form-inline my-2 my-lg-0">
+              <input
+                className="form-control mr-sm-2"
+                type="search"
+                placeholder="Search"
+              />
+              <button
+                className="btn btn-outline-success my-2 my-sm-0"
+                type="submit"
+              >
+                Search
+              </button>
+            </form>
+          </div>
+        </nav>
+      </div>
+      <button
+        className="btn btn-outline-success btn-sm d-block h-75 mr-3"
+        type="button"
+        onClick={() => changemode()}
+      >
+        Switch to {currentmode}
+      </button>
     </div>
-  </div>
-);
+  );
+};
 
 export default Navigation;
diff --git a/src/index.html b/src/index.html
index 757bb43..9b20dc3 100755
--- a/src/index.html
+++ b/src/index.html
@@ -14,7 +14,7 @@
     <link rel="manifest" href="./public/manifest.json">
     <link rel="shortcut icon" href="./public/favicon.ico">
 </head>
-<body>
+<body id="Apptheme" class="thememain-white">
     <div id="app">
     </div>
     <script>
@@ -33,4 +33,4 @@
         }
       </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/style.css b/src/style.css
index 5b29dbe..beb977d 100755
--- a/src/style.css
+++ b/src/style.css
@@ -1,94 +1,128 @@
-.thememain-white{
-    background: white;
+.thememain-dark {
+  background: #333;
 }
 
-.thememain-header{
-    background: linear-gradient(165deg,#6e60cc,#484389);
-    color:white;
+.thememain-dark .thememain-header {
+  background: linear-gradient(165deg, #6e60cc, #484389);
+  color: #333;
 }
 
-.thememain-header a{
-    color:white !important;
+.thememain-dark .thememain-header a {
+  color: #333 !important;
+}
+.thememain-dark input {
+  background: #333;
+  border: #333;
+}
+.thememain-dark input:active,
+.thememain-dark input:focus {
+  background: #333;
+  border: #333;
+}
+.thememain-dark h3 {
+  color: #fff;
+}
+.thememain-dark .thememain-blue {
+  background: linear-gradient(165deg, #6e60cc, #484389);
+  width: 100%;
+  min-height: 30rem;
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 50px;
+  box-sizing: border-box;
+  color: #333;
+}
+
+.thememain-white {
+  background: #fff;
 }
 
-.thememain-blue{
-    background: linear-gradient(165deg,#6e60cc,#484389);
-    width: 100%;
-    min-height: 30rem;
-    width: 100%;
-    margin: 0 auto;
-    padding-top: 50px;
-    box-sizing: border-box;
-    color:white;
+.thememain-white .thememain-header {
+  background: linear-gradient(165deg, #6e60cc, #484389);
+  color: #fff;
 }
 
-.theme-text{
-    text-align: center;
-    /*padding-top: 10px;*/
-    font-size: 16px;
-    line-height: 1.5;
+.thememain-white .thememain-header a {
+  color: #fff !important;
 }
 
-.theme-search{
-    display: block !important;
-    margin-top: 10px;
-    text-align:center;
+.thememain-white .thememain-blue {
+  background: linear-gradient(165deg, #6e60cc, #484389);
+  width: 100%;
+  min-height: 30rem;
+  width: 100%;
+  margin: 0 auto;
+  padding-top: 50px;
+  box-sizing: border-box;
+  color: #fff;
+}
+.theme-text {
+  text-align: center;
+  /*padding-top: 10px;*/
+  font-size: 16px;
+  line-height: 1.5;
 }
 
-.theme-search-input{
-    width: 60% !important;
-    margin-top: 10px;
+.theme-search {
+  display: block !important;
+  margin-top: 10px;
+  text-align: center;
 }
 
-.theme-search-btn{
-    width: 14% !important;
-    margin-top: 10px !important;
+.theme-search-input {
+  width: 60% !important;
+  margin-top: 10px;
 }
 
-.content-main{
-    width:980px;
+.theme-search-btn {
+  width: 14% !important;
+  margin-top: 10px !important;
 }
 
-.content-main h3{
-    font-size: 20px;
-    margin-top: 15px;
-    padding-bottom: 15px;
-    margin-left: 41px;
-    border-bottom: 1px solid #ebebeb;
+.content-main {
+  width: 980px;
 }
 
-.content-main ul{
-    list-style : none;
+.content-main h3 {
+  font-size: 20px;
+  margin-top: 15px;
+  padding-bottom: 15px;
+  margin-left: 41px;
+  border-bottom: 1px solid #ebebeb;
 }
 
-.content-main li{
-    padding-bottom: 5px;
-    padding-left: 15px;
-    width:33%;
-    display: inline-flex !important;
+.content-main ul {
+  list-style: none;
 }
 
-.theme-text a{
-    color: #00A64D;
-    margin-left:10px;
+.content-main li {
+  padding-bottom: 5px;
+  padding-left: 15px;
+  width: 33%;
+  display: inline-flex !important;
 }
 
-.banner-text{
-    margin-top:20px;
-    font-size: 14px;    
+.theme-text a {
+  color: #00a64d;
+  margin-left: 10px;
 }
 
-.banner-text h2{
-    font-size: 25px !important; 
-    line-height: 1.5;
+.banner-text {
+  margin-top: 20px;
+  font-size: 14px;
 }
 
-.banner-text p{
-    font-size: 17px !important; 
-    line-height: 1.5;
-    word-wrap: break-word;
+.banner-text h2 {
+  font-size: 25px !important;
+  line-height: 1.5;
 }
 
-.search-content{
-    margin-top:15px;
-}
\ No newline at end of file
+.banner-text p {
+  font-size: 17px !important;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+
+.search-content {
+  margin-top: 15px;
+}