diff --git a/images/moon.svg b/images/moon.svg
new file mode 100644
index 0000000..7737d40
--- /dev/null
+++ b/images/moon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" ?><svg id="Слой_6" style="enable-background:new 0 0 192 192;" version="1.1" viewBox="0 0 192 192" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FFCF48;}
+	.st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFBC33;}
+</style><g><path class="st0" d="M111.2,176.9c-1,0-2,0-3-0.1c-34.3-1.5-61.6-29.7-62.1-64c-0.3-17.6,6.4-34.2,18.7-46.7   c12.3-12.5,28.8-19.4,46.4-19.4c1.5,0,3,0.1,4.6,0.2c1.3,0.1,2.4,1,2.7,2.3c0.3,1.3-0.2,2.6-1.3,3.3C103.7,61,95.4,76.8,95.4,93.8   c0,26.2,19.4,47.6,43.2,47.6c11.4,0,22.2-4.9,30.3-13.7c0.5-0.6,1.3-0.9,2-0.9c0.9,0,1.7,0.4,2.2,1.1c0.5,0.7,0.7,1.6,0.4,2.4   C165.4,157.8,139.8,176.9,111.2,176.9z"/><path d="M111.2,49c1.5,0,3,0.1,4.4,0.2c0.8,0.1,1,1,0.4,1.4c-13.6,8.6-22.8,24.7-22.8,43.2c0,27.5,20.3,49.8,45.4,49.8   c12.5,0,23.8-5.5,32-14.4c0.1-0.1,0.2-0.2,0.4-0.2c0.3,0,0.6,0.3,0.5,0.7c-7.7,26-31.8,44.9-60.2,44.9c-1,0-1.9,0-2.9-0.1   c-33-1.5-59.4-28.8-59.9-61.8C47.8,77.6,76.1,49,111.2,49 M111.2,44.5c-18.2,0-35.2,7.1-48,20.1c-12.8,12.9-19.6,30.1-19.4,48.3   c0.3,17.1,7,33.4,19,45.8c12,12.4,28.1,19.7,45.2,20.4c1,0,2.1,0.1,3.1,0.1c14.8,0,28.9-4.7,40.6-13.6   c11.4-8.6,19.9-20.9,23.9-34.5c0.5-1.5,0.2-3.2-0.8-4.4c-0.9-1.3-2.5-2-4-2c-1.4,0-2.7,0.6-3.7,1.6c-7.7,8.4-17.9,13-28.7,13   c-22.6,0-40.9-20.3-40.9-45.3c0-16.3,7.9-31.4,20.7-39.4c1.9-1.2,2.9-3.5,2.3-5.8c-0.6-2.2-2.5-3.8-4.7-4   C114.3,44.6,112.7,44.5,111.2,44.5L111.2,44.5z"/></g><g><g><path class="st1" d="M58.3,112.8c-0.5-33.3,25-60.8,57.5-63.5c-0.1,0-0.2-0.1-0.3-0.1c-1.5-0.1-2.9-0.2-4.4-0.2    c-35,0-63.3,28.6-62.8,63.8c0.5,33,26.9,60.3,59.9,61.8c2.7,0.1,5.4,0.1,8-0.1C84.2,172,58.8,145.1,58.3,112.8z"/></g></g><g><path class="st1" d="M58.3,48.4c-0.9,0-2.3-0.4-2.3-3c0-7.4-6-13.4-13.4-13.4c-0.4,0-0.6,0-0.8,0c-1.5-0.2-2.2-1.3-2.2-2.3   c0-0.7,0.3-2.3,3-2.3c7.4,0,13.4-6,13.4-13.4c0-2.7,1.6-3,2.3-3c0.7,0,2.3,0.3,2.3,3c0,7.4,6,13.4,13.4,13.4c2.7,0,3,1.6,3,2.3   c0,1-0.7,2.1-2.2,2.3c-0.2,0-0.5,0-0.8,0c-7.4,0-13.4,6-13.4,13.4c0,0.4,0,0.7,0,0.8C60.4,47.7,59.3,48.4,58.3,48.4   C58.3,48.4,58.3,48.4,58.3,48.4z"/><path d="M58.3,13.1c0,0,0.1,0.3,0.1,0.8c0,8.7,7,15.7,15.7,15.7c1,0,1.1,0.2,0,0.2c-8.7,0-15.7,7-15.7,15.7c0,0.5,0,0.8-0.1,0.8   c0,0-0.1-0.3-0.1-0.8c0-8.7-7-15.7-15.7-15.7c-1,0-1-0.2,0-0.2c8.7,0,15.7-7,15.7-15.7C58.2,13.4,58.2,13.1,58.3,13.1 M58.3,8.6   c-0.2,0-4.6,0.1-4.6,5.3c0,6.2-5,11.2-11.2,11.2c-5.2,0-5.3,4.4-5.3,4.6c0,2,1.4,4.2,4.2,4.5c0.3,0,0.7,0,1.1,0   c6.2,0,11.2,5,11.2,11.2c0,5.2,4.4,5.3,4.6,5.3c0.2,0,4.6-0.1,4.6-5.3c0-6.2,5-11.2,11.2-11.2c5.2,0,5.3-4.4,5.3-4.6   c0-0.2-0.1-4.6-5.3-4.6c-6.2,0-11.2-5-11.2-11.2C62.9,8.7,58.5,8.6,58.3,8.6L58.3,8.6z"/></g><g><path class="st1" d="M33.1,76.9c-0.4,0-2.3-0.1-2.3-2.8c0-4.7-3.8-8.5-8.5-8.5c-0.3,0-0.5,0-0.6,0c-1.5-0.2-2.1-1.3-2.1-2.3   c0-0.4,0.1-2.3,2.8-2.3c4.7,0,8.5-3.8,8.5-8.5c0-2.6,1.9-2.8,2.3-2.8c0.4,0,2.3,0.1,2.3,2.8c0,4.7,3.8,8.5,8.5,8.5   c2.7,0,2.8,1.9,2.8,2.3s-0.1,2.3-2.8,2.3c-4.7,0-8.5,3.8-8.5,8.5c0,0.3,0,0.5,0,0.6C35.2,76.2,34.1,76.9,33.1,76.9   C33.1,76.9,33.1,76.9,33.1,76.9z"/><path d="M33.1,51.9c0,0,0.1,0.2,0.1,0.5c0,5.9,4.8,10.8,10.8,10.8c0.7,0,0.7,0.1,0,0.1c-5.9,0-10.8,4.8-10.8,10.8   c0,0.4,0,0.5-0.1,0.5c0,0-0.1-0.2-0.1-0.5c0-5.9-4.8-10.8-10.8-10.8c-0.7,0-0.7-0.1,0-0.1c5.9,0,10.8-4.8,10.8-10.8   C33.1,52.1,33.1,51.9,33.1,51.9 M33.1,47.4c-1.6,0-4.6,1.1-4.6,5c0,3.5-2.8,6.3-6.3,6.3c-4,0-5,3-5,4.6c0,1.6,1.1,4.6,5,4.6   c3.5,0,6.3,2.8,6.3,6.3c0,4,3,5,4.6,5c1.6,0,4.6-1.1,4.6-5c0-3.5,2.8-6.3,6.3-6.3c4,0,5-3,5-4.6c0-2-1.4-4.2-4.2-4.5   c-0.3,0-0.6,0-0.9,0c-3.5,0-6.3-2.8-6.3-6.3C37.7,48.5,34.7,47.4,33.1,47.4L33.1,47.4z"/></g></svg>
\ No newline at end of file
diff --git a/images/sun.svg b/images/sun.svg
new file mode 100644
index 0000000..1f8cd58
--- /dev/null
+++ b/images/sun.svg
@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg  viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg"><defs><style>.cls-1{fill:#f8b62d;}.cls-2{fill:#231815;}.cls-3{font-size:161.72px;fill:#fff;stroke:#231815;stroke-miterlimit:10;font-family:DINAlternate-Bold, DIN Alternate;font-weight:800;}.cls-4{letter-spacing:-0.02em;}.cls-5{letter-spacing:-0.07em;}</style></defs><title/><g data-name="图层 1" id="图层_1"><circle class="cls-1" cx="250" cy="250" r="84.8"/><path class="cls-2" d="M327.3,250c-.26,31.93-20.27,61.69-50.61,72.59a78.28,78.28,0,0,1-86.62-23.7c-20.52-24.83-22.88-61.14-6.38-88.66s49.76-42.55,81.4-36.08A78.17,78.17,0,0,1,327.3,250c.08,9.65,15.08,9.67,15,0a93.46,93.46,0,0,0-61-86.83c-36.08-13.29-78.52-1.52-102.67,28.34s-27.79,72.65-7.9,105.83c20,33.39,59.57,50.62,97.68,43.11C311.16,332,342,293.16,342.3,250,342.38,240.35,327.38,240.34,327.3,250Z"/><path class="cls-2" d="M257.5,131.39v-32c0-9.65-15-9.67-15,0v32c0,9.65,15,9.67,15,0Z"/><line class="cls-2" x1="190.69" x2="174.71" y1="147.28" y2="119.59"/><path class="cls-2" d="M197.17,143.49l-16-27.69c-4.83-8.36-17.79-.81-13,7.57l16,27.69c4.83,8.36,17.79.81,13-7.57Z"/><line class="cls-2" x1="147.28" x2="119.59" y1="190.69" y2="174.71"/><path class="cls-2" d="M151.06,184.22l-27.69-16c-8.38-4.84-15.94,8.12-7.57,13l27.69,16c8.38,4.84,15.94-8.12,7.57-13Z"/><line class="cls-2" x1="131.39" x2="99.42" y1="250" y2="250"/><path class="cls-2" d="M131.39,242.5h-32c-9.65,0-9.67,15,0,15h32c9.65,0,9.67-15,0-15Z"/><line class="cls-2" x1="147.28" x2="119.59" y1="309.31" y2="325.29"/><path class="cls-2" d="M143.49,302.83l-27.69,16c-8.36,4.83-.81,17.79,7.57,13l27.69-16c8.36-4.83.81-17.79-7.57-13Z"/><line class="cls-2" x1="190.69" x2="174.71" y1="352.72" y2="380.41"/><path class="cls-2" d="M184.22,348.94l-16,27.69c-4.84,8.38,8.12,15.94,13,7.57l16-27.69c4.84-8.38-8.12-15.94-13-7.57Z"/><line class="cls-2" x1="250" x2="250" y1="368.61" y2="400.58"/><path class="cls-2" d="M242.5,368.61v32c0,9.65,15,9.67,15,0v-32c0-9.65-15-9.67-15,0Z"/><line class="cls-2" x1="309.31" x2="325.29" y1="352.72" y2="380.41"/><path class="cls-2" d="M302.83,356.51l16,27.69c4.83,8.36,17.79.81,13-7.57l-16-27.69c-4.83-8.36-17.79-.81-13,7.57Z"/><line class="cls-2" x1="352.72" x2="380.41" y1="309.31" y2="325.29"/><path class="cls-2" d="M348.94,315.78l27.69,16c8.38,4.84,15.94-8.12,7.57-13l-27.69-16c-8.38-4.84-15.94,8.12-7.57,13Z"/><line class="cls-2" x1="368.61" x2="400.58" y1="250" y2="250"/><path class="cls-2" d="M368.61,257.5h32c9.65,0,9.67-15,0-15h-32c-9.65,0-9.67,15,0,15Z"/><line class="cls-2" x1="352.72" x2="380.41" y1="190.69" y2="174.71"/><path class="cls-2" d="M356.51,197.17l27.69-16c8.36-4.83.81-17.79-7.57-13l-27.69,16c-8.36,4.83-.81,17.79,7.57,13Z"/><line class="cls-2" x1="309.31" x2="325.29" y1="147.28" y2="119.59"/><path class="cls-2" d="M315.78,151.06l16-27.69c4.84-8.38-8.12-15.94-13-7.57l-16,27.69c-4.84,8.38,8.12,15.94,13,7.57Z"/><text class="cls-3" transform="translate(-3.4 -30.77)"><tspan class="cls-4"/><tspan class="cls-5" x="98.94" y="0"/><tspan x="185.56" y="0"/></text></g></svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index a7ca98a..436c212 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,13 @@
       <div class="upper-box">
         <div class="upper-box-inital">
       <header>IP Address Tracker</header>
+        
+      <!-- Dark Mode Toggler -->
+      <label class="switch">
+        <input type="checkbox" id="darkModeToggle">
+        <span class="slider round"></span>
+      </label>
+
       <form>
         <input
           type="text"
diff --git a/scripts.js b/scripts.js
index a0f83ef..edbb0f7 100644
--- a/scripts.js
+++ b/scripts.js
@@ -74,10 +74,11 @@ const fetchIPdata = function () {
     .then((result) => {
       renderData(result);
       leafed(result);
-    }).catch((error) => {
+    })
+    .catch((error) => {
       console.error(error); // Log the error for debugging
       showToast(error.message);
-    });;
+    });
 };
 const renderData = function (result) {
   ipAddressElement.innerText = result.ip;
@@ -102,3 +103,11 @@ const leafed = function (result) {
   }).addTo(map);
   marker.bindPopup("<b>You are Here!").openPopup();
 };
+
+// Function to toggle the dark mode
+const toggleDarkMode = () => {
+  var element = document.getElementById("darkModeToggle");
+  element.addEventListener("change", () => {
+    document.body.classList.toggle("dark-mode");
+  });
+};
diff --git a/styles.css b/styles.css
index 14e5ad5..4d0b96b 100644
--- a/styles.css
+++ b/styles.css
@@ -15,6 +15,12 @@ body {
   margin: 0%;
   padding: 0%;
 }
+
+.dark-mode {
+  background-color: black;
+  color: white;
+}
+
 header {
   font-size: 36px;
   font-weight: bold;
@@ -145,3 +151,82 @@ input[type="submit"]:hover {
     max-width: 50%;
   }
 }
+
+/* Container for Dark Mode Toggler */
+.switch {
+  position: absolute;
+  display: inline-block;
+  top: 10px;
+  right: 40px; 
+  /* Change Height and width of the container here */
+  width: 100px;
+  height: 50px;
+}
+
+
+.switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #eee;
+  transition: 0.4s;
+  border-radius: 24px;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 50px;
+  width: 56px;
+  left: 6px;
+  background-image: url('./images/sun.svg');
+  background-repeat: no-repeat;
+  transition: 0.4s;
+  border-radius: 16px;
+}
+
+
+input:checked + .slider::before {
+  transform: translateX(40px);
+  background-image: url('./images/moon.svg');
+  width: 50px;
+  height: 45px;
+  bottom: 3px;
+}
+
+input:checked + .slider {
+  background-color: black;
+}
+
+/* Made the slider responsive */
+@media (max-width: 600px) {
+  .switch {
+    top: 24px;
+    right: 10px;
+    width: 50px;
+    height: 30px;
+  }
+
+  .slider:before {
+    width: 30px;
+    height: 30px;
+    left: 2px;
+  }
+
+  input:checked + .slider::before {
+    transform: translateX(20px);
+    background-image: url('./images/moon.svg');
+    width: 40px;
+    height: 25px;
+    bottom: 3px;
+  }
+}