diff --git a/assets/css/custom.css b/assets/css/custom.css
index c6131fc..98cdfa1 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -1,4 +1,9 @@
-body {
+dark-mode-toggle {
+  --dark-mode-toggle-dark-icon: url("/wp-content/moon.png");
+  --dark-mode-toggle-dark-icon: url("/wp-content/moon.png");
+}
+
+body.light {
   background: #fffcf5;
 }
 
@@ -26,21 +31,22 @@ a[rel*="external"]::after {
 nav a {
   padding: 2px;
 }
-nav a.active {
+.light nav a.active {
   background-color: inherit;
   color: #000;
 }
-a {
+.light a {
   color: #422eff;
   border-bottom: 1px solid #00ff9c;
 }
-a:hover {
+.light a:hover {
   color: #000;
   background-color: #00ff9c;
 }
 .muted, .help-block {
   opacity: 0.70;
 }
+.light
 .hack .muted,
 .hack .help-block {
   color: #0e0e0e;
diff --git a/config.toml b/config.toml
index f508446..b843966 100644
--- a/config.toml
+++ b/config.toml
@@ -27,7 +27,7 @@ footnoteReturnLinkContents = "↩" # Provides a nicer footnote return link
   has_cookies = true # Optional, set true to disable cookie disclaimer
   disable_csp = false # Optional, set true to disable content security policy
   images = [
-    "https://source.unsplash.com/collection/983219/2000x1322"
+    "https://rohanverma.net/wp-content/uploads/me.jpg"
   ] # Suggested, controls default Open Graph images
 
 [params.layout.menu.main]
diff --git a/content/wp-content/moon.png b/content/wp-content/moon.png
new file mode 100644
index 0000000..9c30223
Binary files /dev/null and b/content/wp-content/moon.png differ
diff --git a/content/wp-content/sun.png b/content/wp-content/sun.png
new file mode 100644
index 0000000..c44a435
Binary files /dev/null and b/content/wp-content/sun.png differ
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 0339bde..c335ac9 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -57,6 +57,7 @@
   {{ $hackcss_mode := .Site.Params.hackcss.mode | default "hack" }}
   {{ $hackcss_palette := .Site.Params.hackcss.palette | default "dark" }}
   <body class="{{ if ne $hackcss_disabled true }}{{ $hackcss_mode }} {{ $hackcss_palette }} main container{{ end }}">
+    {{ partial "body/darkmode.html" . }} 
     <header>{{ block "header" . }}{{ end }}</header>
     <main>{{ block "main" . }}{{ end }}</main>
     <footer>
@@ -70,5 +71,6 @@
         {{ partial "modules/toxic-swamp/toolbar.html" dict }}
       {{ end }}
     {{ end }}
+    {{ partial "body/scripts.html" . }}
   </body>
 </html>
diff --git a/layouts/partials/body/darkmode.html b/layouts/partials/body/darkmode.html
new file mode 100644
index 0000000..fab5f51
--- /dev/null
+++ b/layouts/partials/body/darkmode.html
@@ -0,0 +1,6 @@
+<dark-mode-toggle
+    id="dark-mode-toggle-1"
+    appearance="toggle"
+    permanent=true
+    style="position:absolute;top:5px;right:50%"
+></dark-mode-toggle>
\ No newline at end of file
diff --git a/layouts/partials/body/scripts.html b/layouts/partials/body/scripts.html
new file mode 100644
index 0000000..6634d31
--- /dev/null
+++ b/layouts/partials/body/scripts.html
@@ -0,0 +1,22 @@
+<script type="module">
+    import * as DarkModeToggle from 'https://unpkg.com/dark-mode-toggle';
+
+    const toggle = document.querySelector('dark-mode-toggle');
+    const body = document.body;
+
+    // Set or remove the `dark` class the first time.
+    body.classList.remove('dark');
+    body.classList.remove('light');
+    if (toggle.mode === 'dark') {
+        body.classList.add('dark')
+    } else {
+        body.classList.add('light')
+    }
+
+    // Listen for toggle changes (which includes `prefers-color-scheme` changes)
+    // and toggle the `dark` class accordingly.
+    toggle.addEventListener('colorschemechange', () => {
+        body.classList.toggle('dark', toggle.mode === 'dark');
+        body.classList.toggle('light', toggle.mode !== 'dark');
+    });
+</script>
\ No newline at end of file
diff --git a/layouts/partials/head/custom.html b/layouts/partials/head/custom.html
index d0a1976..fbaecaf 100644
--- a/layouts/partials/head/custom.html
+++ b/layouts/partials/head/custom.html
@@ -1,3 +1,5 @@
 <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700|Roboto+Slab:400,700" rel="stylesheet"> 
 <link rel="authorization_endpoint" href="https://indieauth.com/auth">
- <link rel="webmention" href="https://webmention.io/rhnvrm/webmention" />
\ No newline at end of file
+<link rel="webmention" href="https://webmention.io/rohanverma.net/webmention" />
+<link rel="pingback" href="https://webmention.io/rohanverma.net/xmlrpc" />
+<script type="module" src="https://unpkg.com/dark-mode-toggle"></script>  
\ No newline at end of file
