src/components/AuthPages/AuthLayout2.jsx

@@ -1,12 +1,18 @@
-import React from "react";
+import React, { lazy } from "react";
 import { Link } from "react-router-dom";
+import { localImgLoad } from "../../lib";
 
 export default function LoginLayout({ slogan, children }) {
+  const bgImg = localImgLoad('images/left-myft.jpg')
+
   return (
     <div className={`layout-wrapper login`}>
-      {/* <div className={`main-wrapper login-wrapper w-full h-screen overflow-y-auto p-2 sm:px-20 sm:py-5`}> */}
       <div className={`w-full min-h-screen overflow-y-auto lg:grid grid-cols-2`}>
-        <div className="auth-bg hidden lg:block bg-blue-200 relative"></div>
+        <div 
+            className={`auth-bg hidden lg:block bg-blue-50 relative bg-cover bg-no-repeat border-0 after:content-[''] after:absolute after:inset-0`} 
+            style={{backgroundImage: `url(${bgImg})`}}
+        >
+        </div>
         <div className="p-5 sm:p-7 flex place-content-center">
           <div className="py-10 w-11/12 h-full flex flex-col justify-between items-center content-wrapper login shadow-md xl:bg-white dark:bg-dark-white rounded-[0.475rem]">
             <div className="w-full flex justify-center items-center">

src/index.css

@@ -956,17 +956,11 @@ TODO: Responsive ===========================
 }
 
 .auth-bg {
-  background-image: url("./assets/images/left-myft.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
   border: none;
   /* box-shadow: inset 0 0 10px 20px #fff; */
 }
 
 .auth-bg::after {
-  content: '';
-  position: absolute;
-  inset: 0;
   background: linear-gradient(
     to right,
     transparent 0%,