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/docs/style.css b/docs/style.css
index 970b13a..ee455ce 100755
--- a/docs/style.css
+++ b/docs/style.css
@@ -64,7 +64,7 @@ body > footer {
   justify-content: space-between;
 }
 
-/* toggle dark mode */
+/* toggle dark  theme */
 #theme-container {
   position: fixed;
   top: 20px;
@@ -73,10 +73,12 @@ body > footer {
 }
 
 #theme-toggle {
-  padding: 10px 15px;
-  background-color: #bebebe;
+  width: 50px;
+  height: 50px;
+  padding: 0;
+  background-color: #dddbdb;
   border: none;
-  border-radius: 5px;
+  border-radius: 50%;
   cursor: pointer;
   box-shadow: 0 2px 5px #0003;
   color: #000;
@@ -88,4 +90,7 @@ body > footer {
 
 #themeIcon {
   height: 25px;
+  width: 25px;
+  display: block;
+  margin: 0 auto;
 }