diff --git a/.changeset/curvy-carrots-nail.md b/.changeset/curvy-carrots-nail.md
new file mode 100644
index 0000000..9ae4240
--- /dev/null
+++ b/.changeset/curvy-carrots-nail.md
@@ -0,0 +1,5 @@
+---
+"water.css": patch
+---
+
+updated the ui of toggle dark theme
diff --git a/.changeset/lemon-ways-buy.md b/.changeset/lemon-ways-buy.md
new file mode 100644
index 0000000..1e5b9c3
--- /dev/null
+++ b/.changeset/lemon-ways-buy.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+done Adding dark mode and improved UI #347 , added code in index.html `// Toggle between dark and light themesthemeToggl`
diff --git a/.changeset/lucky-carrots-tell.md b/.changeset/lucky-carrots-tell.md
new file mode 100644
index 0000000..7467d67
--- /dev/null
+++ b/.changeset/lucky-carrots-tell.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+done Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons
diff --git a/.changeset/neat-boats-watch.md b/.changeset/neat-boats-watch.md
new file mode 100644
index 0000000..7467d67
--- /dev/null
+++ b/.changeset/neat-boats-watch.md
@@ -0,0 +1,5 @@
+---
+"water.css": minor
+---
+
+done Adding dark mode and improved UI #347 , added code in index.html , style.css and added two png in docs/icons
diff --git a/docs/icons/moon.png b/docs/icons/moon.png
new file mode 100644
index 0000000..b3f9cbe
Binary files /dev/null and b/docs/icons/moon.png differ
diff --git a/docs/icons/sun.png b/docs/icons/sun.png
new file mode 100644
index 0000000..40ba131
Binary files /dev/null and b/docs/icons/sun.png differ
diff --git a/docs/index.html b/docs/index.html
index d9ec359..202669e 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -71,11 +71,34 @@
         { element: '#icon-32', href: { dark: './icons/light-favicon-32x32.png' } }
       ])
     </script>
-  </head>
-
-  <body>
-    <h1>Water.css</h1>
+</head>
+<body>
+  <h1>Water.css</h1>
+  <!-- toggle dark-mode  -->
+  <div id="theme-container" aria-label="Toggle dark mode">
+    <button id="theme-toggle">
+      <img id="themeIcon" class="" src="./icons/sun.png" alt="Toggle dark mode icon"  />
+    </button>
+  </div>
+  <script>
+    const themeToggleButton = document.getElementById('theme-toggle')
+    const themeStylesheet = document.getElementById('js-stylesheet')
+    const themeIcon = document.getElementById('themeIcon')
+    // Toggle between dark and light themes
+    themeToggleButton.addEventListener('click', () => {
+      const currentTheme = themeStylesheet.getAttribute('href')
 
+      if (currentTheme.includes('light.min.css')) {
+        // Switch to dark theme
+        themeStylesheet.setAttribute('href', './water.css/dark.min.css')
+        themeIcon.setAttribute('src', './icons/sun.png') // Path to light mode icon
+      } else {
+        // Switch to light theme
+        themeStylesheet.setAttribute('href', './water.css/light.min.css')
+        themeIcon.setAttribute('src', './icons/moon.png') // Path to dark mode icon
+      }
+    })
+  </script>     
     <p>
       Water.css is a drop-in collection of CSS styles to make simple websites like this just a
       little bit nicer.
diff --git a/docs/style.css b/docs/style.css
index a0c3fc9..ee455ce 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -63,3 +63,34 @@ body > footer {
   align-items: center;
   justify-content: space-between;
 }
+
+/* toggle dark  theme */
+#theme-container {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1000;
+}
+
+#theme-toggle {
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  background-color: #dddbdb;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 5px #0003;
+  color: #000;
+}
+
+#theme-toggle:hover {
+  color: #fff;
+}
+
+#themeIcon {
+  height: 25px;
+  width: 25px;
+  display: block;
+  margin: 0 auto;
+}
