diff --git a/client/mysql-gui-client/src/app/app.component.html b/client/mysql-gui-client/src/app/app.component.html
index 8a2058d..dff673e 100644
--- a/client/mysql-gui-client/src/app/app.component.html
+++ b/client/mysql-gui-client/src/app/app.component.html
@@ -1,3 +1,7 @@
 <app-layout-horizontal>
-    <router-outlet></router-outlet>
+  <button (click)="toggleDarkMode()" class="p-2 m-2 rounded bg-gray-200 dark:bg-gray-800 dark:text-white">
+    🌓 Dark Mode
+  </button>
+
+  <router-outlet></router-outlet>
 </app-layout-horizontal>
diff --git a/client/mysql-gui-client/src/app/app.component.ts b/client/mysql-gui-client/src/app/app.component.ts
index 79f8e35..64ce1ba 100644
--- a/client/mysql-gui-client/src/app/app.component.ts
+++ b/client/mysql-gui-client/src/app/app.component.ts
@@ -15,3 +15,7 @@ export class AppComponent implements OnInit {
 
     ngOnInit(): void {}
 }
+
+toggleDarkMode() {
+  document.documentElement.classList.toggle('dark');
+}
\ No newline at end of file
diff --git a/client/mysql-gui-client/tailwind.config.ts b/client/mysql-gui-client/tailwind.config.ts
index 9a8baa3..3099d43 100644
--- a/client/mysql-gui-client/tailwind.config.ts
+++ b/client/mysql-gui-client/tailwind.config.ts
@@ -16,7 +16,7 @@ const CUSTOM_PLUGINS = [addDynamicIconSelectors()];
 /** @type {import('tailwindcss').Config} */
 export default {
     content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}', './src/**/*.{js,jsx,ts,tsx}'],
-    darkMode: 'class',
+    darkMode: 'class',//activar
     theme: {
         fontFamily: {
             display: ['Oswald', 'sans-serif'],