diff --git a/src/app/modules/auth/AuthLayout.tsx b/src/app/modules/auth/AuthLayout.tsx
index 38b4544..7403f24 100644
--- a/src/app/modules/auth/AuthLayout.tsx
+++ b/src/app/modules/auth/AuthLayout.tsx
@@ -1,47 +1,10 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-import {useEffect, useState} from 'react'
+import {useEffect} from 'react'
 import {Outlet, Link} from 'react-router-dom'
 import {toAbsoluteUrl} from '../../../_res/helpers'
 
 const AuthLayout = () => {
-  //initial background color
-  let [bgColor, setBgColor] = useState({
-    backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
-  })
-
-  // function to determine background color
-  let changeBgColor = () => {
-    // let randomNum = Math.round(Math.random() * 3)
-    let randomNum = Number(localStorage.getItem('bg-num'))
-    if(randomNum){
-      if(randomNum <= 1){
-        setBgColor({
-          backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
-        })
-        localStorage.setItem('bg-num', '2')
-      }else if(randomNum <= 2){
-        setBgColor({
-          backgroundImage: 'linear-gradient(70deg, #eee, #fff)'
-        })
-        localStorage.setItem('bg-num', '3')
-      }else{
-        setBgColor({
-          backgroundImage: 'linear-gradient(70deg, #d5e1f5, #75a5f0)'
-        })
-        localStorage.setItem('bg-num', '1')
-      }
-    }else{
-      setBgColor({
-        backgroundImage: 'linear-gradient(70deg, #E6E7F9, #b4caed)'
-      })
-      localStorage.setItem('bg-num', '1')
-    }
-  }
-
   useEffect(() => {
-
-    changeBgColor() // calls the change color function after page loads
-
     const root = document.getElementById('root')
     if (root) {
       root.style.height = '100%'
@@ -54,17 +17,13 @@ const AuthLayout = () => {
   }, [])
 
   return (
-    <div className='auth-height d-flex flex-column flex-lg-row flex-column-fluid' style={{backgroundImage: `${bgColor.backgroundImage}`}}>
+    <div className='d-flex flex-column flex-lg-row flex-column-fluid h-100'>
       {/* begin::Body */}
       <div className='d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1'>
         {/* begin::Form */}
         <div className='d-flex flex-center flex-column flex-lg-row-fluid'>
-          <div className='text-center mb-11'>
-          {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
-          <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
-        </div>
           {/* begin::Wrapper */}
-          <div className='bg-white w-lg-500px p-10 shadow-lg rounded'>
+          <div className='w-lg-500px p-10'>
             <Outlet />
           </div>
           {/* end::Wrapper */}
@@ -99,6 +58,51 @@ const AuthLayout = () => {
       </div>
       {/* end::Body */}
 
+      {/* begin::Aside */}
+      <div
+        className='d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2'
+        style={{backgroundImage: `url(${toAbsoluteUrl('/media/misc/auth-bg.png')})`}}
+      >
+        {/* begin::Content */}
+        <div className='d-flex flex-column flex-center py-15 px-5 px-md-15 w-100'>
+          {/* begin::Logo */}
+          <Link to='/' className='mb-12'>
+            <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
+          </Link>
+          {/* end::Logo */}
+
+          {/* begin::Image */}
+          <img
+            className='mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20'
+            src={toAbsoluteUrl('/media/misc/auth-screens.png')}
+            alt=''
+          />
+          {/* end::Image */}
+
+          {/* begin::Title */}
+          <h1 className='text-white fs-2qx fw-bolder text-center mb-7'>
+            Fast, Efficient and Productive
+          </h1>
+          {/* end::Title */}
+
+          {/* begin::Text */}
+          <div className='text-white fs-base text-center'>
+            In this kind of post,{' '}
+            <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
+              the blogger
+            </a>
+            introduces a person they’ve interviewed <br /> and provides some background information
+            about
+            <a href='#' className='opacity-75-hover text-warning fw-bold me-1'>
+              the interviewee
+            </a>
+            and their <br /> work following this is a transcript of the interview.
+          </div>
+          {/* end::Text */}
+        </div>
+        {/* end::Content */}
+      </div>
+      {/* end::Aside */}
     </div>
   )
 }
diff --git a/src/app/modules/auth/components/ForgotPassword.tsx b/src/app/modules/auth/components/ForgotPassword.tsx
index 4bb8dce..3945f93 100644
--- a/src/app/modules/auth/components/ForgotPassword.tsx
+++ b/src/app/modules/auth/components/ForgotPassword.tsx
@@ -50,6 +50,12 @@ export function ForgotPassword() {
       id='kt_login_password_reset_form'
       onSubmit={formik.handleSubmit}
     >
+      {/* begin::Heading */}
+      <div className='text-center mb-11'>
+        {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
+        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
+      </div>
+      {/* begin::Heading */}
       <div className='text-center mb-10'>
         {/* begin::Link */}
         <div className='text-gray-500 fw-semibold fs-6'>
diff --git a/src/app/modules/auth/components/Login.tsx b/src/app/modules/auth/components/Login.tsx
index 16b701c..ff2e053 100644
--- a/src/app/modules/auth/components/Login.tsx
+++ b/src/app/modules/auth/components/Login.tsx
@@ -8,8 +8,6 @@ import {getUserByToken, login} from '../core/_requests'
 import {toAbsoluteUrl} from '../../../../_metronic/helpers'
 import {useAuth} from '../core/Auth'
 
-import {useNavigate} from 'react-router-dom'
-
 const loginSchema = Yup.object().shape({
   email: Yup.string()
     .email('Wrong email format')
@@ -34,7 +32,6 @@ const initialValues = {
 */
 
 export function Login() {
-  const navigate = useNavigate()
   const [loading, setLoading] = useState(false)
   const {saveAuth, setCurrentUser} = useAuth()
 
@@ -42,14 +39,22 @@ export function Login() {
     initialValues,
     validationSchema: loginSchema,
     onSubmit: async (values, {setStatus, setSubmitting}) => {
+      setStatus('')
       setLoading(true)
       try {
         const {data: auth} = await login(values.email, values.password)
-        saveAuth(auth)
         // const {data: user} = await getUserByToken(auth.session_token)
         // setCurrentUser(user)
+        if(auth.status <= 0){ // checking if request is not successful
+          setStatus('The login details are incorrect')
+          setSubmitting(false)
+          setLoading(false)
+          console.log(auth)  //remove later
+          return
+        }
+        saveAuth(auth)
         setCurrentUser(auth.profile)
-        navigate('/dashboard')
+        console.log(auth)  //remove later
       } catch (error) {
         console.error(error)
         saveAuth(undefined)
@@ -68,6 +73,11 @@ export function Login() {
       id='kt_login_signin_form'
     >
       {/* begin::Heading */}
+      <div className='text-center mb-11'>
+        {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
+        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
+      </div>
+      {/* begin::Heading */}
 
       {/* begin::Login options */}
       <div className='row g-3 mb-9'>
diff --git a/src/app/modules/auth/components/Registration.tsx b/src/app/modules/auth/components/Registration.tsx
index 1f50932..715433b 100644
--- a/src/app/modules/auth/components/Registration.tsx
+++ b/src/app/modules/auth/components/Registration.tsx
@@ -86,7 +86,12 @@ export function Registration() {
       id='kt_login_signup_form'
       onSubmit={formik.handleSubmit}
     >
-
+      {/* begin::Heading */}
+      <div className='text-center mb-11'>
+        {/* <h1 className='text-dark fw-bolder mb-3'>Sign In</h1> */}
+        <img alt='Float Mobility' src={toAbsoluteUrl('/media/logos/logo.png')} className='h-35px' />
+      </div>
+      {/* begin::Heading */}
       {/* begin::Login options */}
       <div className='row g-3 mb-9'>
         {/* begin::Col */}