diff --git a/.eslintrc.json b/.eslintrc.json
index ceea5f1..f8fd0b7 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -21,6 +21,7 @@
     "no-extra-parens": [
       "error",
       "functions"
-    ]
+    ],
+    "no-unused-vars": "off"
   }
 }
diff --git a/index.html b/index.html
index d0df848..f828ffc 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,18 @@
     <title>Let me Google that for you</title>
   </head>
 
-  <body>
+  <body class="bg-light">
+    <!-- Navbar -->
+    <nav class="navbar navbar-light bg-light">
+      <div class="container-fluid">
+        <div></div>
+        <button
+          class="btn bi-brightness-high btn-light"
+          onclick="toggleBrightness()"
+        ></button>
+      </div>
+    </nav>
+
     <!-- Content -->
     <div class="container">
       <form class="row g-3 text-center mt-5">
@@ -52,7 +63,7 @@
         <!-- Input -->
         <div
           class="
-            bg-body
+            bg-light
             border border-1 border-light
             input-group
             rounded-pill
@@ -60,12 +71,12 @@
           "
         >
           <label
-            class="input-group-text bi-search bg-body border-0"
+            class="bg-light bi-search border-0 input-group-text text-dark"
             for="input"
             id="searchicon"
           ></label>
           <input
-            class="form-control border-0 bg-body"
+            class="form-control border-0 bg-light text-dark"
             id="input"
             maxlength="2048"
             name="search"
diff --git a/index.js b/index.js
index f762a89..30ff038 100644
--- a/index.js
+++ b/index.js
@@ -19,6 +19,8 @@ window.addEventListener("load", async () => {
   input = document.getElementById("input")
   input.value = ""
 
+  setBrightness(JSON.parse(localStorage.getItem("dark") ?? "false"))
+
   if (!query.search) return
 
   await setMessage("Step 1", "Type in your question")
@@ -46,8 +48,10 @@ window.addEventListener("load", async () => {
 })
 
 function makeCursor() {
+  const dark = JSON.parse(localStorage.getItem("dark") ?? "false")
+
   const cursor = document.createElement("span")
-  cursor.className = "bi-cursor-fill"
+  cursor.className = `bi-cursor-fill text-${dark ? "light" : "dark"}`
   cursor.id = "cursor"
   document.body.appendChild(cursor)
   return cursor
@@ -117,3 +121,39 @@ async function setMessage(heading, content, type = "alert-primary") {
   message.classList.remove("opacity-0")
   await new Promise(resolve => setTimeout(resolve, 300))
 }
+
+function toggleBrightness() {
+  const dark = JSON.parse(localStorage.getItem("dark") ?? "false")
+  localStorage.setItem("dark", !dark)
+  setBrightness(!dark)
+}
+
+/**
+ * Apply brightness on the page.
+ * @param {boolean} dark
+ */
+function setBrightness(dark) {
+  const newbrightness = dark ? "dark" : "light"
+  const oldBrightness = dark ? "light" : "dark"
+
+  for (const oldClass of [
+    `bg-${oldBrightness}`,
+    `navbar-${oldBrightness}`,
+    `btn-${oldBrightness}`,
+    `border-${oldBrightness}`,
+  ]) {
+    const newClass = oldClass.replace(oldBrightness, newbrightness)
+    for (const element of document.querySelectorAll(`.${oldClass}`)) {
+      element.classList.remove(oldClass)
+      element.classList.add(newClass)
+    }
+  }
+
+  for (const oldClass of [`text-${newbrightness}`]) {
+    const newClass = oldClass.replace(newbrightness, oldBrightness)
+    for (const element of document.querySelectorAll(`.${oldClass}`)) {
+      element.classList.remove(oldClass)
+      element.classList.add(newClass)
+    }
+  }
+}
