diff --git a/frontend/package.json b/frontend/package.json
index 1c15fe4..49f29a3 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,12 +17,15 @@
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
+    "tailwind-merge": "^2.4.0",
     "tailwindcss": "^3.4.6",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
     "vite": "^3.0.7"
   },
   "dependencies": {
-    "@tailwindcss/aspect-ratio": "^0.4.2"
+    "flowbite": "^2.4.1",
+    "flowbite-svelte": "^0.46.15",
+    "@popperjs/core": "^2.11.8"
   }
 }
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 6791225..69576c6 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -3,12 +3,22 @@ export default {
   content: [
     "./index.html",
     "./src/**/*.{svelte,js,ts,jsx,tsx}",
+    "./node_modules/flowbite/**/*.{html,js,svelte,ts}",
+    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
   ],
-  theme: {
-    extend: {},
-  },
   plugins: [
-    require('@tailwindcss/aspect-ratio'),
+    require('flowbite/plugin')
   ],
+
+  darkMode: 'media',
+
+  theme: {
+    extend: {
+      colors: {
+        // flowbite-svelte
+        primary: { 50: '#FFF5F2', 100: '#FFF1EE', 200: '#FFE4DE', 300: '#FFD5CC', 400: '#FFBCAD', 500: '#FE795D', 600: '#EF562F', 700: '#EB4F27', 800: '#CC4522', 900: '#A5371B'},
+      }
+    }
+  }
 }