diff --git a/public/assets/images/auth/loginbg.webp b/public/assets/images/auth/loginbg.webp
new file mode 100644
index 0000000..ad5f1a6
Binary files /dev/null and b/public/assets/images/auth/loginbg.webp differ
diff --git a/src/app/(auth)/login/loginPage.module.scss b/src/app/(auth)/login/loginPage.module.scss
index a73c321..4a42fb7 100644
--- a/src/app/(auth)/login/loginPage.module.scss
+++ b/src/app/(auth)/login/loginPage.module.scss
@@ -4,8 +4,8 @@
   background: var(--bg_white);
   .images {
     width: 100%;
-    max-width: 500px;
-    object-fit: contain;
+    object-fit: cover;
     margin-inline: auto;
+    opacity: 0.6;
   }
 }
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index b43f488..1537abb 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -20,6 +20,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/services/store";
 import { setAuthTokens, setUserDetails } from "@/services/store/authSlice";
 import { routes } from "constant/route.constant";
+import { grey } from "@mui/material/colors";
 
 const loginSchema = z.object({
   username: z.string(),
@@ -30,15 +31,20 @@ type LoginFormValues = z.infer<typeof loginSchema>;
 
 export default function LoginPage() {
   const [loader, setLoader] = useState(false);
-  const router = useRouter()
-  const { register, handleSubmit, formState: { errors }, control } = useForm<LoginFormValues>({
+  const router = useRouter();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    control,
+  } = useForm<LoginFormValues>({
     resolver: zodResolver(loginSchema),
   });
   const [error, setError] = useState("");
   const dispatch = useDispatch();
   const onSubmit = async (data: LoginFormValues) => {
     try {
-      setLoader(true)
+      setLoader(true);
       const response = await loginApi(data);
       localStorage.setItem("token", response.token);
       localStorage.setItem("refreshToken", response.refreshToken);
@@ -52,8 +58,8 @@ export default function LoginPage() {
       setLoader(false)
       router.push(routes.PRODUCTS);
     } catch (err) {
-      setLoader(false)
-      setError('Invalid credentials');
+      setLoader(false);
+      setError("Invalid credentials");
     }
   };
 
@@ -63,7 +69,11 @@ export default function LoginPage() {
         <Grid item display={{ xs: "none", md: "block" }} md={7}>
           <Box
             height={"100%"}
-            sx={{ background: "var(--primary)" }}
+            sx={{
+              background: grey[900],
+              overflow: "hidden",
+              height: "100vh",
+            }}
             display={"flex"}
             alignItems={"center"}
             justifyContent={"space-between"}
@@ -88,7 +98,7 @@ export default function LoginPage() {
             paddingBlock={5}
           >
             <img src={UTILITY_CONSTANT.IMAGES.AUTH.HEADER_LOG} alt="logo" />
-            <form onSubmit={handleSubmit(onSubmit)}>
+            <form onSubmit={handleSubmit(onSubmit)} style={{ width: "100%" }}>
               <Typography variant="h4">Welcome to Convexsol</Typography>
               <Typography variant="h4">Sign in to your account</Typography>
               <Box
@@ -116,7 +126,10 @@ export default function LoginPage() {
                 />
               </Box>
               <Box width={"100%"} marginBlockStart={"20px"}>
-                <CustomizedButtons btnType="submit" label={!loader ? "Login" : "Login..."} />
+                <CustomizedButtons
+                  btnType="submit"
+                  label={!loader ? "Login" : "Login..."}
+                />
               </Box>
             </form>
             <Box
diff --git a/src/components/reviewModal/ReviewModal.tsx b/src/components/reviewModal/ReviewModal.tsx
index 78f1ad1..91e3435 100644
--- a/src/components/reviewModal/ReviewModal.tsx
+++ b/src/components/reviewModal/ReviewModal.tsx
@@ -53,8 +53,6 @@ const ReviewModal = ({
   handleClose,
   reviewModalData,
 }: ReviewModalProps) => {
-  console.log("reviewModalData", reviewModalData);
-
   return (
     <Box>
       <Modal
diff --git a/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx b/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx
index ef9f192..318e805 100644
--- a/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx
+++ b/src/components/reviewModal/components/reviewModalContent/ReviewModalContent.tsx
@@ -11,8 +11,6 @@ interface ReviewModalContentProps {
 }
 
 const ReviewModalContent = ({ data }: ReviewModalContentProps) => {
-  // const [value, setValue] = React.useState<number | null>(data?.rating);
-  // const [hover, setHover] = React.useState(-1);
   return (
     <>
       <Box
@@ -58,12 +56,6 @@ const ReviewModalContent = ({ data }: ReviewModalContentProps) => {
                 size="small"
                 precision={0.5}
                 readOnly
-                // onChange={(event, newValue) => {
-                //   setValue(newValue);
-                // }}
-                // onChangeActive={(event, newHover) => {
-                //   setHover(newHover);
-                // }}
                 emptyIcon={
                   <StarIcon style={{ opacity: 0.55 }} fontSize="inherit" />
                 }
diff --git a/src/components/table/TanStackTable.tsx b/src/components/table/TanStackTable.tsx
index d0da779..45b99f4 100644
--- a/src/components/table/TanStackTable.tsx
+++ b/src/components/table/TanStackTable.tsx
@@ -119,7 +119,6 @@ const TanStackTable = ({ data }: any) => {
   const handleButtonClick = (rowData: any) => {
     setReviewModalData(rowData?.reviews);
     handleOpen();
-    // console.log("Button clicked for row:", rowData?.reviews);
   };
 
   const table = useReactTable({
@@ -130,7 +129,6 @@ const TanStackTable = ({ data }: any) => {
 
   useEffect(() => {
     setTableData(data?.products);
-    console.log("Server data", data);
   }, [data]);
 
   return (
diff --git a/src/components/wrapper/dashboardWrapper.tsx b/src/components/wrapper/dashboardWrapper.tsx
index fe0488c..5057f12 100644
--- a/src/components/wrapper/dashboardWrapper.tsx
+++ b/src/components/wrapper/dashboardWrapper.tsx
@@ -94,10 +94,6 @@ export default function DashboardWrapper(props: Props) {
   };
   const [activeIndex, setActiveIndex] = useState<number | null>(null);
 
-  React.useEffect(() => {
-    console.log("User Data", userData);
-  }, [userData]);
-
   const drawer = (
     <>
       <Toolbar sx={{ minHeight: "72px !important" }}>
diff --git a/src/services/api/loginApi.ts b/src/services/api/loginApi.ts
index 59bb92e..b686e6b 100644
--- a/src/services/api/loginApi.ts
+++ b/src/services/api/loginApi.ts
@@ -1,5 +1,5 @@
 // api.ts
-import axiosInstance from '../axios/axiosInstance';
+import axiosInstance from "../axios/axiosInstance";
 
 export interface LoginResponse {
   id: number;
@@ -18,7 +18,8 @@ interface LoginData {
   password: string;
 }
 
+/** Login API POST */
 export const loginApi = async (data: LoginData): Promise<LoginResponse> => {
-  const response = await axiosInstance.post<LoginResponse>('/auth/login', data);
+  const response = await axiosInstance.post<LoginResponse>("/auth/login", data);
   return response.data;
 };
diff --git a/src/services/home.services.ts b/src/services/home.services.ts
index 70be01f..6596c5e 100644
--- a/src/services/home.services.ts
+++ b/src/services/home.services.ts
@@ -1,5 +1,6 @@
 import axios, { isAxiosError } from "axios";
 
+/** Product List Home Page */
 const homeServices = {
   getProducts: async () => {
     try {
diff --git a/src/theme.ts b/src/theme.ts
index d3945fa..1853398 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -1,20 +1,20 @@
-'use client';
-import { Roboto } from 'next/font/google';
-import { createTheme } from '@mui/material/styles';
+"use client";
+import { Roboto } from "next/font/google";
+import { createTheme } from "@mui/material/styles";
 
 const roboto = Roboto({
-  weight: ['300', '400', '500', '700'],
-  subsets: ['latin'],
-  display: 'swap',
+  weight: ["300", "400", "500", "700"],
+  subsets: ["latin"],
+  display: "swap",
 });
 
 const getCssVariableValue = (variable: string): string => {
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     return getComputedStyle(document.documentElement).getPropertyValue(
       variable
     );
   }
-  return '';
+  return "";
 };
 
 const theme = createTheme({
@@ -23,16 +23,16 @@ const theme = createTheme({
   },
   palette: {
     primary: {
-      main: getCssVariableValue('--primary').trim() || '#6290cb', // Fallback to default color
-      light: getCssVariableValue('--primary_light').trim() || '#dae7f9', // Fallback to default color
+      main: getCssVariableValue("--primary").trim() || "#6290cb", // Fallback to default color
+      light: getCssVariableValue("--primary_light").trim() || "#dae7f9", // Fallback to default color
     },
   },
   components: {
     MuiCardContent: {
       styleOverrides: {
         root: {
-          '&:last-child': {
-            paddingBottom: '16px', // Override the padding for the last child
+          "&:last-child": {
+            paddingBottom: "16px", // Override the padding for the last child
           },
         },
       },
diff --git a/src/utilities/utilityConstant.ts b/src/utilities/utilityConstant.ts
index b123ea0..81b2f99 100644
--- a/src/utilities/utilityConstant.ts
+++ b/src/utilities/utilityConstant.ts
@@ -2,7 +2,7 @@ export const UTILITY_CONSTANT = {
   IMAGES: {
     AUTH: {
       HEADER_LOG: "/assets/images/auth/headerLogo.webp",
-      LOGIN_BG: "/assets/images/auth/loginbg.svg",
+      LOGIN_BG: "/assets/images/auth/loginbg.webp",
     },
   },
 };