diff --git a/contact.html b/contact.html
index 849cea4..efd5545 100644
--- a/contact.html
+++ b/contact.html
@@ -33,6 +33,29 @@
     <!-- Custom CSS -->
     <link rel="stylesheet" href="css/custom.css" />
 
+    <!-- DARK MODE============================================================ -->
+    <link disabled id="dark-reader" rel="stylesheet" href="css/dark.css" />
+    <script>
+      function dark_toggle() {
+        var el1 = document.getElementById("dark-reader");
+        if (el1.disabled) {
+          el1.disabled = false;
+          localStorage.setItem("darkreader", "enabled");
+        } else {
+          el1.disabled = true;
+          localStorage.setItem("darkreader", "disabled");
+        }
+      }
+    </script>
+    <script>
+      if (localStorage.getItem("darkreader") == "enabled") {
+        document.getElementById("dark-reader").disabled = false;
+      } else {
+        document.getElementById("dark-reader").disabled = true;
+      }
+    </script>
+    <!-- DARK MODE============================================================ -->
+
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
@@ -85,6 +108,17 @@
               <li><a class="nav-link" href="research.html">Research</a></li>
               <li><a class="nav-link" href="news.html">News</a></li>
               <li><a class="nav-link" href="contact.html">Contact us</a></li>
+              <!-- DARK MODE  -->
+              <li>
+                <a
+                  class="nav-link"
+                  href="javascript:void(0)"
+                  onclick="dark_toggle();return false;"
+                  title="Toggle night mode"
+                  >Dark Mode
+                </a>
+              </li>
+              <!-- DARK MODE  -->
             </ul>
           </div>
           <div class="search-box">
@@ -117,7 +151,7 @@ <h3>Contact us</h3>
     <!-- section -->
     <div
       class="section layout_padding contact_section"
-      style="background:#f6f6f6;"
+      style="background: #f6f6f6;"
     >
       <div class="container">
         <div class="row">
@@ -176,7 +210,9 @@ <h3>Contact us</h3>
               </div>
               <div class="full white_fonts">
                 <p>
-                 Welcome to Perfect learn! PL is a fun, responsive and effective way to learn online. Have a look at our exciting Smart Lessons in Science, English, Maths!
+                  Welcome to Perfect learn! PL is a fun, responsive and
+                  effective way to learn online. Have a look at our exciting
+                  Smart Lessons in Science, English, Maths!
                 </p>
               </div>
             </div>
@@ -265,11 +301,11 @@ <h3>Contact us</h3>
     <script>
       /* counter js */
 
-      (function($) {
-        $.fn.countTo = function(options) {
+      (function ($) {
+        $.fn.countTo = function (options) {
           options = options || {};
 
-          return $(this).each(function() {
+          return $(this).each(function () {
             // set options for current element
             var settings = $.extend(
               {},
@@ -355,10 +391,10 @@ <h3>Contact us</h3>
         }
       })(jQuery);
 
-      jQuery(function($) {
+      jQuery(function ($) {
         // custom formatting example
         $(".count-number").data("countToOptions", {
-          formatter: function(value, options) {
+          formatter: function (value, options) {
             return value
               .toFixed(options.decimals)
               .replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
diff --git a/css/dark.css b/css/dark.css
new file mode 100644
index 0000000..2784d91
--- /dev/null
+++ b/css/dark.css
@@ -0,0 +1,86 @@
+/* Dark Mode */
+html,
+body,
+:not([style*="background-color:"]) {
+  background-color: rgb(28, 31, 33) !important;
+}
+html,
+body,
+:not([style*="color:"]) {
+  color: rgb(168, 158, 139) !important;
+}
+h1:not([style*="color:"]),
+h2:not([style*="color:"]),
+h3:not([style*="color:"]),
+h4:not([style*="color:"]),
+h5:not([style*="color:"]),
+h6:not([style*="color:"]) {
+  color: rgb(190, 146, 109) !important;
+}
+cite:not([style*="color:"]) {
+  color: rgb(138, 197, 147) !important;
+}
+input:not([style*="background-color:"]),
+textarea:not([style*="background-color:"]),
+button:not([style*="background-color:"]),
+[role="button"] {
+  background-color: rgb(45, 57, 68) !important;
+}
+input:not([style*="background-color:"]):hover,
+textarea:not([style*="background-color:"]):hover,
+button:not([style*="background-color:"]):hover,
+[role="button"]:hover {
+  background-color: rgb(42, 62, 82) !important;
+}
+input:not([style*="background-color:"]):active,
+input:not([style*="background-color:"]):focus,
+textarea:not([style*="background-color:"]):active,
+textarea:not([style*="background-color:"]):focus,
+button:not([style*="background-color:"]):active,
+button:not([style*="background-color:"]):focus,
+[role="button"]:active,
+[role="button"]:focus {
+  background-color: rgb(41, 64, 87) !important;
+}
+a:not([style*="color:"]) {
+  color: rgb(137, 179, 192) !important;
+}
+a:not([style*="color:"]):hover {
+  color: rgb(148, 190, 208) !important;
+}
+a:not([style*="color:"]):active,
+a:not([style*="color:"]):focus {
+  color: rgb(160, 202, 224) !important;
+}
+:not([style*="border-color:"]),
+::before,
+::after {
+  border-color: rgb(91, 118, 130) !important;
+}
+div:empty {
+  background-color: rgb(28, 31, 33) !important;
+}
+input::placeholder,
+textarea::placeholder {
+  color: rgb(168, 158, 139) !important;
+}
+input:not([style*="background-image:"]),
+textarea:not([style*="background-image:"]) {
+  background-image: none !important;
+}
+
+/* end dark reader generated */
+
+/* Manual Tweaks */
+
+svg * {
+  stroke: rgb(168, 158, 139) !important;
+}
+
+i#dark-reader-icon {
+  color: rgb(190, 146, 109) !important;
+}
+
+body:not(.navbar) {
+  background-color: rgb(28, 31, 33) !important;
+}