diff --git a/aimenet-web/app/layout.tsx b/aimenet-web/app/layout.tsx
index 1d6e280..4371073 100644
--- a/aimenet-web/app/layout.tsx
+++ b/aimenet-web/app/layout.tsx
@@ -2,6 +2,7 @@ import type {Metadata} from "next";
 import {Inter as FontSans} from "next/font/google";
 import {cn} from "@/lib/utils";
 import "./globals.css";
+import {ThemeProvider} from "@/components/theme-provider";
 
 const fontSans = FontSans({
     subsets: ["latin"],
@@ -19,7 +20,9 @@ export default function RootLayout({children}: Readonly<{ children: React.ReactN
             <title>AimeNet</title>
         </head>
         <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
+            {children}
+        </ThemeProvider>
         </body>
         </html>
     );
diff --git a/aimenet-web/components/theme-provider.tsx b/aimenet-web/components/theme-provider.tsx
new file mode 100644
index 0000000..e90aa8c
--- /dev/null
+++ b/aimenet-web/components/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { type ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/aimenet-web/tailwind.config.ts b/aimenet-web/tailwind.config.ts
index 8a3e97d..094765c 100644
--- a/aimenet-web/tailwind.config.ts
+++ b/aimenet-web/tailwind.config.ts
@@ -4,10 +4,7 @@ import {fontFamily} from "tailwindcss/defaultTheme"
 const config = {
     darkMode: ["class"],
     content: [
-        './pages/**/*.{ts,tsx}',
-        './components/**/*.{ts,tsx}',
-        './app/**/*.{ts,tsx}',
-        './src/**/*.{ts,tsx}',
+        '**/*.{ts,tsx}',
     ],
     prefix: "",
     theme: {
