diff --git a/_includes/header-custom.html b/_includes/header-custom.html
index b1a1773..8a58b8d 100644
--- a/_includes/header-custom.html
+++ b/_includes/header-custom.html
@@ -1,12 +1,4 @@
 <header id="header">
-	<div class="action-container action-container--left">
-		<!-- Dark Mode Button -->
-		<label class="switch">
-			<input type="checkbox">
-			<span class="slider round"></span>
-		</label>
-	</div>
-	
 	<a href="{{ site.baseurl }}">
 		<img class="logo" src="{{ "/img/revuo-monero-logo.png" | prepend: site.baseurl | replace: '//', '/' }}" alt="Revuo Monero Logo">
 	</a>
diff --git a/_includes/menu-toggle.html b/_includes/menu-toggle.html
new file mode 100644
index 0000000..8030ae9
--- /dev/null
+++ b/_includes/menu-toggle.html
@@ -0,0 +1,4 @@
+<input class="nojs-toggle" id="menu-toggle" type="checkbox" name="menu-toggle">
+<label {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %} for="menu-toggle" class="menu-toggle">
+    <div id="menu"></div>
+</label>
\ No newline at end of file
diff --git a/_includes/menu.html b/_includes/menu.html
index ec5923d..56a0d50 100644
--- a/_includes/menu.html
+++ b/_includes/menu.html
@@ -1,11 +1,6 @@
 <nav {% if site.reverse == true %}id="nav-left"{% else %}id="nav"{% endif %}>
 	<div id="nav-list">
 		<div class="nav-actions">
-			<!-- Dark Mode Button -->
-			<label class="switch">
-				<input type="checkbox">
-				<span class="slider round"></span>
-			</label>
 			<a class="icon" href="https://revuo-xmr.com/support/" target="_blank"><img src="/img/donate.png" alt="Donate" title="Donate" /></a>
 			<a class="icon" href="/atom.xml" target="_blank"><img src="/img/rss_1.png" alt="ATOM Feed" title="ATOM Feed" /></a>
 		</div>
diff --git a/_includes/theme-switcher.html b/_includes/theme-switcher.html
new file mode 100644
index 0000000..c47cecf
--- /dev/null
+++ b/_includes/theme-switcher.html
@@ -0,0 +1,5 @@
+<!-- Unfortunately, targeting the parent is not a thing in CSS. This is a workaround. -->
+<input class="nojs-toggle" id="theme-switcher" type="checkbox" name="theme-switcher">
+<label class="switch" for="theme-switcher" id="main-theme-switcher">
+    <span class="slider round"></span>
+</label>
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index a29fe19..9dc16c1 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,15 +4,13 @@
 {% include head.html %}
 
 <body>
+	{% include theme-switcher.html %}
+
 	<div id="wrap">
 	  	
 		<!-- Navigation -->
+		{% include menu-toggle.html %}
 		{% include menu.html %}
-		
-		<!-- Icon menu -->
-		<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
-			<div id="menu"></div>
-		</a>
 
 		<!-- Header -->
 		{% if site.custom_header == true %}
diff --git a/_layouts/revuo-period.html b/_layouts/revuo-period.html
index 5649181..fad5443 100644
--- a/_layouts/revuo-period.html
+++ b/_layouts/revuo-period.html
@@ -4,16 +4,14 @@
 {% include head.html %}
 
 <body>
+	{% include theme-switcher.html %}
+
 	<div id="wrap">
 		<div id="periodical">
 
 		<!-- Navigation -->
+		{% include menu-toggle.html %}
 		{% include menu.html %}
-    
-		<!-- Icon menu -->
-		<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
-			<div id="menu"></div>
-		</a>
 
 		<!-- Header -->
 		{% if site.custom_header == true %}
diff --git a/_layouts/revuo-weekly.html b/_layouts/revuo-weekly.html
index 0188854..aa2a2e6 100644
--- a/_layouts/revuo-weekly.html
+++ b/_layouts/revuo-weekly.html
@@ -4,17 +4,15 @@
 {% include head.html %}
 
 <body>
+	{% include theme-switcher.html %}
+
 	<div id="wrap">
 		<div id="weekly">
 
 			<!-- Navigation -->
+			{% include menu-toggle.html %}
 			{% include menu.html %}
 
-			<!-- Icon menu -->
-			<a {% if site.reverse == true %}id="nav-menu-left"{% else %}id="nav-menu"{% endif %}>
-				<div id="menu"></div>
-			</a>
-
 			<!-- Header -->
 			{% if site.custom_header == true %}
 				{% include header-custom.html %}
diff --git a/css/main.scss b/css/main.scss
index 01bd0a6..01895ba 100644
--- a/css/main.scss
+++ b/css/main.scss
@@ -53,17 +53,31 @@
 	--menu-color: #e1e1e1;
 	--license-color: #666666;
 }
-// Was entered incorrectly.. Dark = Light
-[data-theme="dark"] {
-    --primary-color: #666666;
-    --secondary-color: #555555;
-    --font-color: #555555;
-    --link-color: #444444;
-    --bg-color: #f0f0f0;
-    --heading-color: #666666;
-    --block-bg-color: #d7d7d7;
-    --block-bg-color-secondary: #c0c0c0;
-    --block-bg-color-heading: #a5a5a5;
+
+.nojs-toggle {
+  display: none;
+}
+
+// BEGIN theme switcher
+#main-theme-switcher {
+  left: 25px;
+  top: 35px;
+  z-index: 999;
+  display: block !important;
+  position: absolute !important;
+  transition: all .3s ease;
+}
+
+#theme-switcher:checked ~ * {
+  --primary-color: #666666;
+  --secondary-color: #555555;
+  --font-color: #555555;
+  --link-color: #444444;
+  --bg-color: #f0f0f0;
+  --heading-color: #666666;
+  --block-bg-color: #d7d7d7;
+  --block-bg-color-secondary: #c0c0c0;
+  --block-bg-color-heading: #a5a5a5;
 	--table-color: #000000;
 	--head-nav-bg-color: transparent;
 	--head-nav-text-color: #d56f2a;
@@ -71,14 +85,67 @@
 	--license-color: #666666;
 }
 
-body {
-    background-color: var(--bg-color);
-    color: var(--font-color);
+#theme-switcher:checked ~ .switch .slider {
+  background-color: #d56f2a;
+}
+
+#theme-switcher:checked ~ .switch .slider::before {
+  -webkit-transform: translateX(26px);
+  -moz-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+@media (max-width: 480px) {
+  #main-theme-switcher {
+    top: 19px;
+    right: 10px;
+  }
+}
+// END theme switcher
+
+// BEGIN menu toggle
+#menu-toggle:checked ~ #nav {
+  -webkit-transform: translateX(-14rem);
+  -moz-transform: translateX(-14rem);
+  -ms-transform: translateX(-14rem);
+  transform: translateX(-14rem);
+  width: 100%;
+}
+
+#menu-toggle:checked ~ .menu-toggle #menu {
+  background: none;
+  transition: all 0.1s ease-in;
+}
+
+#menu-toggle:checked ~ .menu-toggle #menu::before {
+  top: 0;
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -ms-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  background-color: #0F0F0F;
+}
+
+#menu-toggle:checked ~ .menu-toggle #menu::after {
+  top: -4px;
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -ms-transform: rotate(45deg);
+  transform: rotate(45deg);
+  background-color: #0F0F0F;
+}
+
+@media (min-width: 940px) {
+  #menu-toggle:checked ~ #nav {
+    width: 30%;
+  }
 }
+// END menu toggle
 
-html {
-    background-color: var(--bg-color);
-    color: var(--font-color);
+#wrap {
+  background-color: var(--bg-color);
+  color: var(--font-color);
 }
 
 h1 {
diff --git a/js/main.js b/js/main.js
index f673a07..24257e2 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,82 +1,14 @@
-var normal = document.getElementById("nav-menu");
-var reverse = document.getElementById("nav-menu-left");
+// Saves themes in-between pages to LocalStorage.
+const themeSwitcher = document.getElementById('theme-switcher');
 
-var icon = normal !== null ? normal : reverse;
-
-
-const toggleSwitches = document.querySelectorAll('.switch input[type="checkbox"]');
-const currentTheme = localStorage.getItem('theme');
-
-if (currentTheme) {
-	document.documentElement.setAttribute('data-theme', currentTheme);
- 
-	if (currentTheme === 'dark') {
-		toggleSwitches.forEach(s => s.checked = true);
-	} else {
-		toggleSwitches.forEach(s => s.checked = false);
-	}
-}
-
-function switchTheme(e) {
-	if (e.target.checked) {
-		document.documentElement.setAttribute('data-theme', 'dark');
-		localStorage.setItem('theme', 'dark');
-		toggleSwitches.forEach(s => s.checked = true);
-	} else {
-		document.documentElement.setAttribute('data-theme', 'light');
-		localStorage.setItem('theme', 'light');
-		toggleSwitches.forEach(s => s.checked = false);
-	}
-}
-
-toggleSwitches.forEach((s) => s.addEventListener('change', switchTheme, false));
-
-
-
-//const currentTheme = localStorage.getItem("theme");
-//const btn = document.querySelector("switch");
-//const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
-
-// Toggle the "menu-open" % "menu-opn-left" classes
-function toggle() {
-	  var navRight = document.getElementById("nav");
-	  var navLeft = document.getElementById("nav-left");
-	  var nav = navRight !== null ? navRight : navLeft;
-
-	  var button = document.getElementById("menu");
-	  var site = document.getElementById("wrap");
-	  
-	  if (nav.className == "menu-open" || nav.className == "menu-open-left") {
-	  	  nav.className = "";
-	  	  button.className = "";
-	  	  site.className = "";
-	  } else if (reverse !== null) {
-	  	  nav.className += "menu-open-left";
-	  	  button.className += "btn-close";
-	  	  site.className += "fixed";
-	  } else {
-	  	  nav.className += "menu-open";
-	  	  button.className += "btn-close";
-	  	  site.className += "fixed";
-	    }
-	}
+const setTheme = e => localStorage.setItem('theme', e.target.checked ? 'dark' : 'light');
+const checkTheme = () => themeSwitcher.checked = localStorage.getItem('theme') === 'dark';
 
 // Ensures backward compatibility with IE old versions
-function menuClick() {
-	if (document.addEventListener && icon !== null) {
-		icon.addEventListener('click', toggle);
-	} else if (document.attachEvent && icon !== null) {
-		icon.attachEvent('onclick', toggle);
-	} else {
-		return;
-	}
+if (document.addEventListener) {
+	themeSwitcher.addEventListener('click', setTheme);
+} else if (document.attachEvent) {
+	themeSwitcher.attachEvent('onclick', setTheme);
 }
 
-//function toggledark(checkbox) {
-  //var elementb = document.body;
-  //var elementh = document.html;
-  //elementh.classList.toggle("dark-theme");
-  //elementb.classList.toggle("dark-theme");
-//}
-
-menuClick();
+checkTheme()
\ No newline at end of file
