diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
index 6637a97..06448d2 100644
--- a/src/app/auth/page.tsx
+++ b/src/app/auth/page.tsx
@@ -1,19 +1,21 @@
 import FormAuth from '@/components/Pages/Auth/FormAuth'
 import ImageCard from '@/components/Pages/Auth/ImageCard'
+import ButtonThemeToggle from '@/components/UI/ButtonThemeToggle'
 import IconGolub from '@/components/UI/Icons/IconGolub'
 import Layout from '@/components/UI/Layout'
 
 export default function Auth() {
   return (
     <section className="h-screen w-screen bg-gradient-blue-white">
-      <Layout className="flex items-center justify-center">
-        <div className="card p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] bg-white">
+      <Layout className="flex items-center justify-center dark:bg-none dark:bg-base-gray-8">
+        <div className="card p-7 sm:p-10 flex gap-7 md:gap-[3.75rem] bg-base-white dark:bg-base-black">
           <ImageCard className="hidden sm:block -my-[4.375rem] flex-shrink-0">
             <IconGolub />
           </ImageCard>
           <div>
             <h1 className="title-lg">Authentication</h1>
             <FormAuth />
+            <ButtonThemeToggle />
           </div>
         </div>
       </Layout>