diff --git a/app/layout.tsx b/app/layout.tsx
index 5e92573..b37091b 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,11 +1,16 @@
 import "@/styles/globals.css";
 import { fontSans } from "@/lib/fonts";
 import { cn } from "@/lib/utils";
+import { ThemeProvider } from "@/components/ui/theme-provider";
 
 export const metadata = {
   title: "M-OAuth",
   description:
     "Access token generator for Akkoma, Pleroma, Mastodon, Misskey APIs.",
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "white" },
+    { media: "(prefers-color-scheme: dark)", color: "black" },
+  ],
 };
 
 export default function RootLayout({
@@ -18,11 +23,13 @@ export default function RootLayout({
       <head />
       <body
         className={cn(
-          "grid min-h-screen place-content-center place-items-center bg-background px-2 font-sans antialiased md:px-5 md:pb-10 md:pt-5",
+          "grid min-h-screen place-content-center place-items-center  bg-background px-2 font-sans antialiased md:px-5 md:pb-10 md:pt-5",
           fontSans.variable
         )}
       >
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/components/Brand.tsx b/components/Brand.tsx
index 203e693..6a1e351 100644
--- a/components/Brand.tsx
+++ b/components/Brand.tsx
@@ -12,7 +12,7 @@ const headlines = [
 ];
 const Brand = () => {
   return (
-    <section className="rounded-lg px-5 py-4 bg-slate-50">
+    <section className="rounded-lg px-5 py-4 bg-slate-50 dark:bg-muted">
       <h1 className="scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
         M-OAuth
       </h1>
@@ -68,7 +68,7 @@ const Brand = () => {
                 width="15"
                 height="15"
                 alt="Github"
-                className="mr-2"
+                className="mr-2 dark:invert"
               />
               Github
             </Button>
@@ -80,7 +80,7 @@ const Brand = () => {
                 width="15"
                 height="15"
                 alt="Codeberg"
-                className="mr-2"
+                className="mr-2 dark:invert"
               />
               Codeberg
             </Button>
@@ -89,7 +89,7 @@ const Brand = () => {
           <ul className="flex flex-col gap-2 mb-2 justify-self-end">
             {headlines.map((headline) => (
               <li className="flex items-center gap-2" key={headline}>
-                <BadgeCheck className="-mt-[2px] h-5 w-5 stroke-green-600" />
+                <BadgeCheck className="-mt-[2px] h-5 w-5 stroke-green-600 dark:stroke-green-500" />
                 {headline}
               </li>
             ))}
diff --git a/components/CreatAppForm.tsx b/components/CreatAppForm.tsx
index 3d8ce70..0694e60 100644
--- a/components/CreatAppForm.tsx
+++ b/components/CreatAppForm.tsx
@@ -132,7 +132,8 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                         className="mr-2"
                       />
                       Pleroma
-                    </span></SelectItem>
+                    </span>
+                  </SelectItem>
                   <SelectItem value="akkoma">
                     <span className="flex">
                       <Image
@@ -143,9 +144,9 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                         className="mr-2"
                       />
                       Akkoma
-                    </span></SelectItem>
+                    </span>
+                  </SelectItem>
                   <SelectItem value="misskey">
-                    
                     <span className="flex">
                       <Image
                         src="https://cdn.simpleicons.org/misskey"
@@ -155,7 +156,8 @@ const CreateAppForm: React.FC<CreateAppFormProps> = ({
                         className="mr-2"
                       />
                       Misskey
-                    </span></SelectItem>
+                    </span>
+                  </SelectItem>
                 </SelectContent>
               </Select>
               <FormMessage />
diff --git a/components/FormContainer.tsx b/components/FormContainer.tsx
index 4fcedff..c114c4c 100644
--- a/components/FormContainer.tsx
+++ b/components/FormContainer.tsx
@@ -24,7 +24,7 @@ const FormContainer = () => {
   });
 
   return (
-    <>
+    <>  
       <Card>
         <CardHeader>
           <CardTitle>Create an Application</CardTitle>
diff --git a/components/scopes/ScopeSection.tsx b/components/scopes/ScopeSection.tsx
index 89819a0..bff8bfb 100644
--- a/components/scopes/ScopeSection.tsx
+++ b/components/scopes/ScopeSection.tsx
@@ -21,7 +21,7 @@ const ScopeSection: React.FC<ScopeSectionProps> = ({ info, field }) => {
   const { method, description, scopes, label } = info;
   const isNested = scopes && scopes.length !== 0;
   return (
-    <Collapsible className="flex flex-col rounded-md bg-slate-50 px-4 py-3">
+    <Collapsible className="flex flex-col rounded-md bg-slate-50 px-4 py-3 dark:bg-muted">
       <div className="flex justify-between">
         <div className="items-top flex space-x-2 ">
           <Checkbox
diff --git a/components/ui/theme-provider.tsx b/components/ui/theme-provider.tsx
new file mode 100644
index 0000000..3a8ef58
--- /dev/null
+++ b/components/ui/theme-provider.tsx
@@ -0,0 +1,9 @@
+"use client"
+
+import * as React from "react"
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import { ThemeProviderProps } from "next-themes/dist/types"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 66270eb..cd03bab 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,5 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  reactStrictMode: true,
   experimental: {
     appDir: true,
   },
@@ -8,4 +9,4 @@ const nextConfig = {
   },
 };
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/package.json b/package.json
index 47c03c7..4ed016d 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "eslint-config-next": "13.4.4",
     "lucide-react": "^0.240.0",
     "next": "13.4.4",
+    "next-themes": "^0.2.1",
     "postcss": "^8.4.24",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3f79acf..aaccbec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -52,6 +52,9 @@ dependencies:
   next:
     specifier: 13.4.4
     version: 13.4.4(react-dom@18.2.0)(react@18.2.0)
+  next-themes:
+    specifier: ^0.2.1
+    version: 0.2.1(next@13.4.4)(react-dom@18.2.0)(react@18.2.0)
   postcss:
     specifier: ^8.4.24
     version: 8.4.24
@@ -2637,6 +2640,18 @@ packages:
   /natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  /next-themes@0.2.1(next@13.4.4)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==}
+    peerDependencies:
+      next: '*'
+      react: '*'
+      react-dom: '*'
+    dependencies:
+      next: 13.4.4(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /next@13.4.4(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-C5S0ysM0Ily9McL4Jb48nOQHT1BukOWI59uC3X/xCMlYIh9rJZCv7nzG92J6e1cOBqQbKovlpgvHWFmz4eKKEA==}
     engines: {node: '>=16.8.0'}
