diff --git a/apps/web/app/(main)/profile/page.tsx b/apps/web/app/(main)/profile/page.tsx
index a842a55..557785f 100644
--- a/apps/web/app/(main)/profile/page.tsx
+++ b/apps/web/app/(main)/profile/page.tsx
@@ -15,7 +15,7 @@ export default async function ProfilePage() {
   const photoUrl = user?.photoUrl ?? 'https://github.com/shadcn.png';
 
   return (
-    <div className="container mx-auto h-screen max-w-md p-4">
+    <div className="mx-auto h-screen max-w-md">
       <Card>
         <CardHeader className="flex flex-row items-center space-x-4 pb-2">
           <Avatar className="size-12">
@@ -36,7 +36,8 @@ export default async function ProfilePage() {
           {user?.role === 'client' && (
             <form action={becomeMaster}>
               <Button
-                className="w-full bg-gradient-to-r from-purple-500 to-purple-700 text-white hover:from-purple-600 hover:to-purple-800"
+                className="w-full bg-gradient-to-r from-purple-500 to-purple-700 text-white hover:from-purple-600 hover:to-purple-800
+             dark:from-purple-700 dark:to-purple-900 dark:hover:from-purple-800 dark:hover:to-purple-950"
                 type="submit"
               >
                 Стать мастером
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 44010eb..def6cb2 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -1,7 +1,8 @@
 import { AuthProvider } from '@/providers';
+import { ThemeProvider } from '@/providers/theme-provider';
 import { I18nProvider } from '@/utils/i18n/provider';
-import { type Metadata } from 'next';
 import '@repo/ui/globals.css';
+import { type Metadata } from 'next';
 import { getLocale } from 'next-intl/server';
 import { type PropsWithChildren } from 'react';
 
@@ -14,9 +15,11 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
 
   return (
     <html lang={locale}>
-      <body className="bg-[#f7f7f7]">
+      <body className="bg-secondary">
         <I18nProvider>
-          <AuthProvider>{children}</AuthProvider>
+          <ThemeProvider>
+            <AuthProvider>{children}</AuthProvider>
+          </ThemeProvider>
         </I18nProvider>
       </body>
     </html>
diff --git a/apps/web/components/profile/profile-field.tsx b/apps/web/components/profile/profile-field.tsx
index a1d972e..e2a0b34 100644
--- a/apps/web/components/profile/profile-field.tsx
+++ b/apps/web/components/profile/profile-field.tsx
@@ -35,7 +35,7 @@ export function ProfileField({
     <div className="space-y-2">
       <Label htmlFor={id}>{label}</Label>
       <Input
-        className="outline-none focus:ring-0 focus:ring-offset-0"
+        className="bg-secondary outline-none focus:ring-0 focus:ring-offset-0"
         disabled={disabled || isPending}
         id={id}
         onChange={handleChange}
diff --git a/apps/web/package.json b/apps/web/package.json
index cb7f982..ec60d87 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -21,6 +21,7 @@
     "next": "catalog:",
     "next-auth": "^4.24.11",
     "next-intl": "catalog:",
+    "next-themes": "^0.4.4",
     "react": "catalog:",
     "react-dom": "catalog:",
     "zod": "catalog:"
diff --git a/apps/web/providers/theme-provider.tsx b/apps/web/providers/theme-provider.tsx
new file mode 100644
index 0000000..eeb356a
--- /dev/null
+++ b/apps/web/providers/theme-provider.tsx
@@ -0,0 +1,35 @@
+'use client';
+import { ThemeProvider as NextThemesProvider, useTheme } from 'next-themes';
+import { type ComponentProps, useEffect, useState } from 'react';
+
+/**
+ * mouted - fix for Next.js 15 Hydration Failed
+ */
+export function ThemeProvider({
+  children,
+  ...props
+}: Readonly<ComponentProps<typeof NextThemesProvider>>) {
+  const [mounted, setMounted] = useState(false);
+  useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <></>;
+  }
+
+  return (
+    <NextThemesProvider
+      {...props}
+      attribute="class"
+      defaultTheme="system"
+      disableTransitionOnChange
+      enableSystem
+    >
+      {children}
+    </NextThemesProvider>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f2cb3ea..1577049 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -234,6 +234,9 @@ importers:
       next-intl:
         specifier: 'catalog:'
         version: 3.26.0(next@15.1.0(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)
+      next-themes:
+        specifier: ^0.4.4
+        version: 0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       react:
         specifier: 'catalog:'
         version: 19.0.0
@@ -4535,6 +4538,12 @@ packages:
       next: ^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0
       react: ^16.8.0 || ^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0
 
+  next-themes@0.4.4:
+    resolution: {integrity: sha512-LDQ2qIOJF0VnuVrrMSMLrWGjRMkq+0mpgl6e0juCLqdJ+oo8Q84JRWT6Wh11VDQKkMMe+dVzDKLWs5n87T+PkQ==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   next@15.1.0:
     resolution: {integrity: sha512-QKhzt6Y8rgLNlj30izdMbxAwjHMFANnLwDwZ+WQh5sMhyt4lEBqDK9QpvWHtIM4rINKPoJ8aiRZKg5ULSybVHw==}
     engines: {node: ^18.18.0 || ^19.8.0 || >= 20.0.0}
@@ -10893,6 +10902,11 @@ snapshots:
       react: 19.0.0
       use-intl: 3.26.0(react@19.0.0)
 
+  next-themes@0.4.4(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
+    dependencies:
+      react: 19.0.0
+      react-dom: 19.0.0(react@19.0.0)
+
   next@15.1.0(@babel/core@7.26.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0):
     dependencies:
       '@next/env': 15.1.0
