diff --git a/src/_res/assets/sass/layout/_auth.scss b/src/_res/assets/sass/layout/_auth.scss
new file mode 100644
index 0000000..0b4066a
--- /dev/null
+++ b/src/_res/assets/sass/layout/_auth.scss
@@ -0,0 +1,4 @@
+
+.auth-gray {
+	background-color: $gray-200;
+}
\ No newline at end of file
diff --git a/src/_res/assets/sass/layout/_layout.scss b/src/_res/assets/sass/layout/_layout.scss
index 1ee48df..e273c5e 100644
--- a/src/_res/assets/sass/layout/_layout.scss
+++ b/src/_res/assets/sass/layout/_layout.scss
@@ -12,4 +12,5 @@
 @import "header/header-sidebar-light";
 @import "content";
 @import "toolbar";
-@import "page-title";
\ No newline at end of file
+@import "page-title";
+@import "auth";
\ No newline at end of file
diff --git a/src/app/modules/auth/AuthLayout.tsx b/src/app/modules/auth/AuthLayout.tsx
index c49201e..b3d8ab6 100644
--- a/src/app/modules/auth/AuthLayout.tsx
+++ b/src/app/modules/auth/AuthLayout.tsx
@@ -54,7 +54,7 @@ const AuthLayout = () => {
   }, [])
 
   return (
-    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto'>
+    <div className='d-flex flex-column flex-lg-row flex-column-fluid overflow-auto' style={{backgroundImage: `${bgColor.backgroundImage}`}}>
       {/* begin::Body */}
       <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1 vh-100'>
         {/* begin::Form */}
@@ -64,7 +64,7 @@ const AuthLayout = () => {
           <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
         </div>
           {/* begin::Wrapper */}
-          <div className='w-lg-500px p-10'>
+          <div className='auth-gray w-lg-500px p-10 shadow-lg rounded-sm'>
             <Outlet />
           </div>
           {/* end::Wrapper */}
@@ -102,14 +102,13 @@ const AuthLayout = () => {
       {/* begin::Aside */}
       <div
         className='position-relative d-flex flex-lg-row-fluid w-lg-50 p-10 order-1 order-lg-2'
-        style={{backgroundImage: `${bgColor.backgroundImage}`}}
       >
         {/* begin::Content */}
         <div className='position-relative d-flex flex-column flex-center px-5 px-md-15 w-100'>
           {/* begin::Logo */}
-          <Link to='/' className='mb-12'>
+          {/* <Link to='/' className='mb-12'>
             <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-          </Link>
+          </Link> */}
           {/* end::Logo */}
 
           {/* <img
@@ -123,7 +122,7 @@ const AuthLayout = () => {
               className='img-fluid rounded'
               src={toAbsoluteUrl('/media/misc/auth-bg-new.png')}
               alt=''
-              style={{boxShadow: '0px 0px 10px white'}}
+              // style={{boxShadow: '0px 0px 10px white'}}
               />
           </div>
           {/* end::Image */}
@@ -135,7 +134,7 @@ const AuthLayout = () => {
               {/* end::Title */}
 
               {/* begin::Text */}
-              <div className='text-dark fs-base text-center'>
+              {/* <div className='text-dark fs-base text-center'>
                 In this kind of post,{' '}
                 <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
                   the blogger
@@ -146,7 +145,7 @@ const AuthLayout = () => {
                   the interviewee
                 </a>
                 and their <br /> work following this is a transcript of the interview.
-              </div>
+              </div> */}
               {/* end::Text */}
             </div>
         </div>