diff --git a/web/app/activate/page.tsx b/web/app/activate/page.tsx
index c002b2dc21..221559ff28 100644
--- a/web/app/activate/page.tsx
+++ b/web/app/activate/page.tsx
@@ -1,25 +1,12 @@
 import React from 'react'
 import Header from '../signin/_header'
-import style from '../signin/page.module.css'
 import ActivateForm from './activateForm'
 import cn from '@/utils/classnames'
 
 const Activate = () => {
   return (
-    <div className={cn(
-      'bg-background-body',
-      style.background,
-      'flex min-h-screen w-full',
-      'sm:p-4 lg:p-8',
-      'gap-x-20',
-      'justify-center lg:justify-start',
-    )}>
-      <div className={
-        cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
-          'space-between',
-        )
-      }>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
         <Header />
         <ActivateForm />
         <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
diff --git a/web/app/forgot-password/page.tsx b/web/app/forgot-password/page.tsx
index ccbdcbdf0c..ed3d0d529d 100644
--- a/web/app/forgot-password/page.tsx
+++ b/web/app/forgot-password/page.tsx
@@ -1,9 +1,8 @@
 'use client'
 import React from 'react'
-import classNames from 'classnames'
+import cn from 'classnames'
 import { useSearchParams } from 'next/navigation'
 import Header from '../signin/_header'
-import style from '../signin/page.module.css'
 import ForgotPasswordForm from './ForgotPasswordForm'
 import ChangePasswordForm from '@/app/forgot-password/ChangePasswordForm'
 
@@ -12,20 +11,8 @@ const ForgotPassword = () => {
   const token = searchParams.get('token')
 
   return (
-    <div className={classNames(
-      'bg-background-body',
-      style.background,
-      'flex w-full min-h-screen',
-      'p-4 lg:p-8',
-      'gap-x-20',
-      'justify-center lg:justify-start',
-    )}>
-      <div className={
-        classNames(
-          'flex w-full flex-col bg-background-section-burn shadow rounded-2xl shrink-0',
-          'md:w-[608px] space-between',
-        )
-      }>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
         <Header />
         {token ? <ChangePasswordForm /> : <ForgotPasswordForm />}
         <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
diff --git a/web/app/init/page.tsx b/web/app/init/page.tsx
index 5b3e9f4141..c3d439fcb1 100644
--- a/web/app/init/page.tsx
+++ b/web/app/init/page.tsx
@@ -1,24 +1,11 @@
 import React from 'react'
-import style from '../signin/page.module.css'
 import InitPasswordPopup from './InitPasswordPopup'
 import cn from '@/utils/classnames'
 
 const Install = () => {
   return (
-    <div className={cn(
-      'bg-background-body',
-      style.background,
-      'flex min-h-screen w-full',
-      'p-4 lg:p-8',
-      'gap-x-20',
-      'justify-center lg:justify-start',
-    )}>
-      <div className={
-        cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
-          'space-between',
-        )
-      }>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
         <div className="m-auto block w-96">
           <InitPasswordPopup />
         </div>
diff --git a/web/app/install/page.tsx b/web/app/install/page.tsx
index f41c63ff37..f63fdf8443 100644
--- a/web/app/install/page.tsx
+++ b/web/app/install/page.tsx
@@ -1,25 +1,12 @@
 import React from 'react'
 import Header from '../signin/_header'
-import style from '../signin/page.module.css'
 import InstallForm from './installForm'
-import classNames from '@/utils/classnames'
+import cn from '@/utils/classnames'
 
 const Install = () => {
   return (
-    <div className={classNames(
-      'bg-background-body',
-      style.background,
-      'flex w-full min-h-screen',
-      'p-4 lg:p-8',
-      'gap-x-20',
-      'justify-center lg:justify-start',
-    )}>
-      <div className={
-        classNames(
-          'flex w-full flex-col bg-background-section-burn shadow rounded-2xl shrink-0',
-          'md:w-[608px] space-between',
-        )
-      }>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
         <Header />
         <InstallForm />
         <div className='px-8 py-6 text-sm font-normal text-text-tertiary'>
diff --git a/web/app/reset-password/layout.tsx b/web/app/reset-password/layout.tsx
index 58ac3a642e..3d053e4d34 100644
--- a/web/app/reset-password/layout.tsx
+++ b/web/app/reset-password/layout.tsx
@@ -1,24 +1,11 @@
 import Header from '../signin/_header'
-import style from '../signin/page.module.css'
 
 import cn from '@/utils/classnames'
 
 export default async function SignInLayout({ children }: any) {
   return <>
-    <div className={cn(
-      'bg-background-body',
-      style.background,
-      'flex min-h-screen w-full',
-      'sm:p-4 lg:p-8',
-      'gap-x-20',
-      'justify-center lg:justify-start',
-    )}>
-      <div className={
-        cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
-          'space-between',
-        )
-      }>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
         <Header />
         <div className={
           cn(
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index a8800a1c63..3a138807fc 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -91,8 +91,8 @@ export default function CheckCode() {
     <div className='py-2'>
       <div className='h-px bg-gradient-to-r from-background-gradient-mask-transparent via-divider-regular to-background-gradient-mask-transparent'></div>
     </div>
-    <Link href={`/signin?${searchParams.toString()}`} className='flex h-9 items-center justify-center text-text-tertiary'>
-      <div className='bg-background-default-dimm inline-block rounded-full p-1'>
+    <Link href={`/signin?${searchParams.toString()}`} className='flex h-9 items-center justify-center text-text-tertiary hover:text-text-primary'>
+      <div className='inline-block rounded-full bg-background-default-dimmed p-1'>
         <RiArrowLeftLine size={12} />
       </div>
       <span className='system-xs-regular ml-2'>{t('login.backToLogin')}</span>
diff --git a/web/app/signin/assets/background.png b/web/app/signin/assets/background.png
deleted file mode 100644
index a410f7e074..0000000000
Binary files a/web/app/signin/assets/background.png and /dev/null differ
diff --git a/web/app/signin/layout.tsx b/web/app/signin/layout.tsx
index fbdd4c66e7..1af4082c73 100644
--- a/web/app/signin/layout.tsx
+++ b/web/app/signin/layout.tsx
@@ -1,32 +1,13 @@
 import Header from './_header'
-import style from './page.module.css'
 
 import cn from '@/utils/classnames'
 
 export default async function SignInLayout({ children }: any) {
   return <>
-    <div className={cn(
-      'bg-background-body',
-      style.background,
-      'flex min-h-screen w-full',
-      'sm:p-4 lg:p-8',
-      'gap-x-20',
-      'justify-center lg:justify-start',
-    )}>
-      <div className={
-        cn(
-          'flex w-full shrink-0 flex-col rounded-2xl bg-background-section-burn shadow',
-          'space-between',
-        )
-      }>
+    <div className={cn('flex min-h-screen w-full justify-center bg-background-default-burn p-6')}>
+      <div className={cn('flex w-full shrink-0 flex-col rounded-2xl border border-effects-highlight bg-background-default-subtle')}>
         <Header />
-        <div className={
-          cn(
-            'flex w-full grow flex-col items-center justify-center',
-            'px-6',
-            'md:px-[108px]',
-          )
-        }>
+        <div className={cn('flex w-full grow flex-col items-center justify-center px-6 md:px-[108px]')}>
           <div className='flex flex-col md:w-[400px]'>
             {children}
           </div>
diff --git a/web/app/signin/page.module.css b/web/app/signin/page.module.css
index de80af772a..5d12925980 100644
--- a/web/app/signin/page.module.css
+++ b/web/app/signin/page.module.css
@@ -4,9 +4,4 @@
 
 .googleIcon {
   background: center/contain url('./assets/google.svg');
-}
-
-.background {
-  background-image: url('./assets/background.png');
-  background-size: cover;
 }
\ No newline at end of file