diff --git a/public/6300830.jpg b/public/6300830.jpg
new file mode 100644
index 00000000..9ef7cebd
Binary files /dev/null and b/public/6300830.jpg differ
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
index 8f05c41a..14b00d04 100644
--- a/public/locales/en/common.json
+++ b/public/locales/en/common.json
@@ -12,6 +12,8 @@
     "REASON_FOR_DELETION": "Reason for Deletion",
     "INCORRECT_DATA_ENTRY": "Incorrect Data Entry",
     "DUPLICATED_USER": "Duplicate User",
+    
+    "ALL":"All",
     "NO_GO_BACK": "No, go back",
     "YES": "Yes",
     "SURE_REASSIGN_CENTER": "Are you sure you want to re-assign Center to this user?",
diff --git a/public/login.jpg b/public/login.jpg
new file mode 100644
index 00000000..e8bc9598
Binary files /dev/null and b/public/login.jpg differ
diff --git a/src/components/ActionIcon.tsx b/src/components/ActionIcon.tsx
new file mode 100644
index 00000000..60db6173
--- /dev/null
+++ b/src/components/ActionIcon.tsx
@@ -0,0 +1,64 @@
+// components/ActionCell.tsx
+
+import React from "react";
+import {
+  Box,
+  Divider,
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+} from "@mui/material";
+// import EditIcon from '@mui/icons-material/ModeEditOutlineOutlined';
+// import DeleteIcon from '@mui/icons-material/DeleteOutlined';
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import { useTranslation } from "next-i18next";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+interface ActionCellProps {
+  onEdit: (rowData: any) => void;
+  onDelete: (rowData: any) => void;
+  rowData: any;
+}
+
+const ActionIcon: React.FC<ActionCellProps> = ({
+  rowData,
+  onEdit,
+  onDelete,
+}) => {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "20px",
+      }}
+    >
+       <Box
+        onClick={() => {
+          onDelete(rowData);
+        }}
+        style={{ cursor: "pointer" }}
+      >
+        <DeleteIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+      </Box>
+      <Box
+        onClick={() => {
+          onEdit(rowData);
+        }}
+        style={{
+          cursor: "pointer",
+          opacity: 0.5, // Reduced opacity to make it appear disabled
+          pointerEvents: "auto", // Enable pointer events to allow click
+        }}
+      >
+        <EditIcon style={{ color: "rgba(0, 0, 0, 0.5)" }} />
+      </Box>
+     
+    </Box>
+  );
+};
+
+export default ActionIcon;
diff --git a/src/components/FormControl.tsx b/src/components/FormControl.tsx
index 1ac93075..f60d6c0d 100644
--- a/src/components/FormControl.tsx
+++ b/src/components/FormControl.tsx
@@ -5,7 +5,7 @@ import MenuItem from '@mui/material/MenuItem';
 import FormControl from '@mui/material/FormControl';
 import ListItemText from '@mui/material/ListItemText';
 import Select, { SelectChangeEvent } from '@mui/material/Select';
-import Checkbox from '@mui/material/Checkbox';
+import { useTranslation } from "next-i18next";
 
 const ITEM_HEIGHT = 48;
 const ITEM_PADDING_TOP = 8;
@@ -28,6 +28,7 @@ interface MultipleSelectCheckmarksProps {
 }
 
 const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ names, codes, tagName, selectedCategories, onCategoryChange, disabled = false }) => {
+  const { t } = useTranslation();
   const handleChange = (event: SelectChangeEvent<typeof selectedCategories>) => {
     const {
       target: { value },
@@ -39,7 +40,7 @@ const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ nam
 
   return (
     <div>
-      <FormControl sx={{ m: 1, width: 300 }} disabled={disabled}>
+      <FormControl sx={{ m: 1, width: 200 }} disabled={disabled}>
         <InputLabel id="multiple-checkbox-label">{tagName}</InputLabel>
         <Select
           labelId="multiple-checkbox-label"
@@ -52,7 +53,7 @@ const MultipleSelectCheckmarks: React.FC<MultipleSelectCheckmarksProps> = ({ nam
           MenuProps={MenuProps}
         >
           <MenuItem value="">
-            <em>None</em>
+            <em> {t("COMMON.ALL")}</em>
           </MenuItem>
           {names.map((name) => (
             <MenuItem key={name} value={name}>
diff --git a/src/components/HeaderComponent.tsx b/src/components/HeaderComponent.tsx
index 204ffc71..418ac1d8 100644
--- a/src/components/HeaderComponent.tsx
+++ b/src/components/HeaderComponent.tsx
@@ -156,7 +156,7 @@ const HeaderComponent = ({
           <Grid container spacing={isMobile ? 1 : 2}>
             <Grid item xs={12} sm={isMediumScreen ? 12 : 4}>
               <MultipleSelectCheckmarks
-                names={allStates.map((state) => state.label)}
+                names={allStates.map((state) => state.label?.toLowerCase().charAt(0).toUpperCase() + state.label?.toLowerCase().slice(1))}
                 codes={allStates.map((state) => state.value)}
                 tagName={t("FACILITATORS.ALL_STATES")}
                 selectedCategories={selectedState}
diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx
index 2118b934..8b209705 100644
--- a/src/components/KaTableComponent.tsx
+++ b/src/components/KaTableComponent.tsx
@@ -8,7 +8,7 @@ import "ka-table/style.css";
 import { IPagingProps } from "ka-table/props";
 import { updatePageIndex, updatePageSize } from "ka-table/actionCreators";
 import ActionCell from "./ActionCell";
-
+import ActionIcon from "./ActionIcon";
 interface KaTableComponentProps {
   columns: ITableProps["columns"];
   data?: ITableProps["data"];
@@ -17,7 +17,8 @@ interface KaTableComponentProps {
   PagesSelector?: any;
   PageSizeSelector?: any;
   pageSizes?:any
-
+  onDelete?:any
+  onEdit?:any
 
   extraActions: {
     name: string;
@@ -37,7 +38,8 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
   PageSizeSelector,
 
   extraActions,
-
+  onEdit,
+   onDelete,
   showIcons,
   pageSizes
 }) => {
@@ -70,7 +72,8 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
             content: (props) => {
               if (props.column.key === "actions") {
                 return (
-                  <ActionCell
+                  <>
+                  {/* <ActionCell
                     rowData={props.rowData}
                     extraActions={extraActions}
                     showIcons={showIcons}
@@ -80,7 +83,14 @@ const KaTableComponent: React.FC<KaTableComponentProps> = ({
                     onDelete={function (rowData: any): void {
                       throw new Error("Function not implemented.");
                     }}
+                  /> */}
+                  <ActionIcon
+                  rowData={props.rowData}
+                   onEdit={onEdit}
+                   onDelete={onDelete}
                   />
+                  </>
+                  
                 );
               }
               return null;
diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx
index 0a5d98f9..9ddbe9ba 100644
--- a/src/components/UserTable.tsx
+++ b/src/components/UserTable.tsx
@@ -92,7 +92,7 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
   const [selectedUserId, setSelectedUserId] = useState("");
   const [selectedReason, setSelectedReason] = useState("");
   const [otherReason, setOtherReason] = useState("");
-  const [confirmButtonDisable, setConfirmButtonDisable] = useState(true);
+  const [confirmButtonDisable, setConfirmButtonDisable] = useState(false);
   const [filters, setFilters] = useState<FilterDetails>({
     role: role,
     status: "active",
@@ -205,6 +205,7 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
   };
 
   const handleDelete = (rowData: any) => {
+
     setIsDeleteModalOpen(true);
     setSelectedUserId(rowData.userId);
     //const userData="";
@@ -322,6 +323,8 @@ const UserTable: React.FC<UserTableProps> = ({ role , userType, searchPlaceholde
           pageSizes={pageSizeArray}
           extraActions={extraActions}
           showIcons={true}
+          onEdit={handleEdit}
+          onDelete={handleDelete}
         />
       <DeleteUserModal
         open={isDeleteModalOpen}
diff --git a/src/components/layouts/header/Profile.tsx b/src/components/layouts/header/Profile.tsx
index 6deaf946..649552ff 100644
--- a/src/components/layouts/header/Profile.tsx
+++ b/src/components/layouts/header/Profile.tsx
@@ -82,7 +82,11 @@ const Profile = () => {
               fontWeight="700"
               sx={{
                 ml: 1,
-              }}
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+               // whiteSpace: 'nowrap',
+                // maxWidth: '200px',  
+                          }}
             >
               {userName ? userName : ""}
             </Typography>
diff --git a/src/components/layouts/sidebar/MenuItems.js b/src/components/layouts/sidebar/MenuItems.js
index ba4739a0..4bca6672 100644
--- a/src/components/layouts/sidebar/MenuItems.js
+++ b/src/components/layouts/sidebar/MenuItems.js
@@ -66,4 +66,4 @@ const Menuitems = [
   },
 ];
 
-export default Menuitems;
+export default Menuitems;
\ No newline at end of file
diff --git a/src/pages/login.tsx b/src/pages/login.tsx
index 50e23ab3..b00906d1 100644
--- a/src/pages/login.tsx
+++ b/src/pages/login.tsx
@@ -5,6 +5,9 @@ import {
   IconButton,
   InputAdornment,
   TextField,
+  Grid,
+  Typography,
+  useMediaQuery, // Import useMediaQuery hook
 } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
 import Select, { SelectChangeEvent } from "@mui/material/Select";
@@ -25,6 +28,7 @@ import { telemetryFactory } from "@/utils/telemetry";
 import { logEvent } from "@/utils/googleAnalytics";
 import { showToastMessage } from "@/components/Toastify";
 import Link from "@mui/material/Link";
+import loginImage from "../../public/6300830.jpg";
 
 const LoginPage = () => {
   const { t } = useTranslation();
@@ -38,23 +42,23 @@ const LoginPage = () => {
   const [lang, setLang] = useState("");
   const [selectedLanguage, setSelectedLanguage] = useState(lang);
   const [language, setLanguage] = useState(selectedLanguage);
-  const [scrolling, setScrolling] = useState(false);
 
   const theme = useTheme<any>();
   const router = useRouter();
+  
+  // Use useMediaQuery to detect screen size
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isMedium = useMediaQuery(theme.breakpoints.between('sm', 'md'));
 
   const passwordRef = useRef<HTMLInputElement>(null);
   const loginButtonRef = useRef<HTMLButtonElement>(null);
 
   useEffect(() => {
     if (typeof window !== "undefined" && window.localStorage) {
-      if (localStorage.getItem("preferredLanguage")) {
-        var lang = localStorage.getItem("preferredLanguage") || "en";
-      } else {
-        lang = "en";
-      }
-      setLanguage(lang);
-      setLang(lang);
+      const preferredLang = localStorage.getItem("preferredLanguage") || "en";
+      setLanguage(preferredLang);
+      setLang(preferredLang);
+
       const token = localStorage.getItem("token");
       if (token) {
         router.push("/dashboard");
@@ -66,8 +70,7 @@ const LoginPage = () => {
     const { value } = event.target;
     const trimmedValue = value.trim();
     setUsername(trimmedValue);
-    const containsSpace = /\s/.test(trimmedValue);
-    setUsernameError(containsSpace);
+    setUsernameError(/\s/.test(trimmedValue));
   };
 
   const handlePasswordChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -100,10 +103,7 @@ const LoginPage = () => {
     if (!usernameError && !passwordError) {
       setLoading(true);
       try {
-        const response = await login({
-          username: username,
-          password: password,
-        });
+        const response = await login({ username, password });
         if (response) {
           if (typeof window !== "undefined" && window.localStorage) {
             const token = response?.result?.access_token;
@@ -116,20 +116,16 @@ const LoginPage = () => {
             const userResponse = await getUserId();
             localStorage.setItem("userId", userResponse?.userId);
             localStorage.setItem("name", userResponse?.name);
-            const tenentId = userResponse?.tenantData?.[0]?.tenantId;
-            localStorage.setItem("tenentId", tenentId);
+            const tenantId = userResponse?.tenantData?.[0]?.tenantId;
+            localStorage.setItem("tenantId", tenantId);
           }
         }
         setLoading(false);
         const telemetryInteract = {
-          context: {
-            env: "sign-in",
-            cdata: [],
-          },
+          context: { env: "sign-in", cdata: [] },
           edata: {
             id: "login-success",
             type: "CLICK",
-            subtype: "",
             pageid: "sign-in",
             uid: localStorage.getItem("userId") || "Anonymous",
           },
@@ -138,18 +134,11 @@ const LoginPage = () => {
         router.push("/dashboard");
       } catch (error: any) {
         setLoading(false);
-        if (error.response && error.response.status === 404) {
-          showToastMessage(
-            t("LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT"),
-            "error"
-          );
-        } else {
-          console.error("Error:", error);
-          showToastMessage(
-            t("LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT"),
-            "error"
-          );
-        }
+        const errorMessage =
+          error.response && error.response.status === 404
+            ? t("LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT")
+            : t("LOGIN_PAGE.USERNAME_PASSWORD_NOT_CORRECT");
+        showToastMessage(errorMessage, "error");
       }
     }
   };
@@ -161,34 +150,14 @@ const LoginPage = () => {
     const newLocale = event.target.value;
     if (typeof window !== "undefined" && window.localStorage) {
       localStorage.setItem("preferredLanguage", newLocale);
-      setLanguage(event.target.value);
+      setLanguage(newLocale);
       ReactGA.event("select-language-login-page", {
-        selectedLanguage: event.target.value,
+        selectedLanguage: newLocale,
       });
       router.push("/login", undefined, { locale: newLocale });
     }
   };
 
-  useEffect(() => {
-    const handlePasswordFocus = () => {
-      if (loginButtonRef.current) {
-        setTimeout(() => {
-          loginButtonRef.current?.scrollIntoView({
-            behavior: "smooth",
-            block: "center",
-          });
-        }, 200); // Delay of 200 milliseconds
-      }
-    };
-    const passwordField = passwordRef.current;
-    if (passwordField) {
-      passwordField.addEventListener("focus", handlePasswordFocus);
-      return () => {
-        passwordField.removeEventListener("focus", handlePasswordFocus);
-      };
-    }
-  }, []);
-
   const handleForgotPasswordClick = () => {
     logEvent({
       action: "forgot-password-link-clicked",
@@ -198,187 +167,167 @@ const LoginPage = () => {
   };
 
   return (
-    <Box sx={{ height: "100vh", background: "white" }}>
-      <form onSubmit={handleFormSubmit}>
-        <Box
-          display="flex"
-          flexDirection="column"
-          bgcolor={theme.palette.warning.A200}
-        >
-          {loading && (
-            <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
-          )}
-          <Box
-            display={"flex"}
-            overflow="auto"
-            alignItems={"center"}
-            justifyContent={"center"}
-            zIndex={99}
-            sx={{ margin: "32px 0 65px" }}
-          >
-            <Image src={appLogo} alt="App Logo" height={100} />{" "}
-          </Box>
-        </Box>
+    <Grid container sx={{ }}>
+      {!(isMobile || isMedium) && ( // Render only on desktop view
+        <Grid
+          item
+          xs={12}
+          md={6}
+          sx={{
+            background: `url(${loginImage.src}) no-repeat center center`,
+            backgroundSize: "cover",
+            height: "100vh"
+          }}
+        />
+      )}
+      <Grid
+        item
+        xs={12}
+        md={6}
+        display="flex"
+        alignItems="center"
+        sx={{
+          backgroundColor: "white",
+        }}
+      >
         <Box
-          flexGrow={1}
-          display={"flex"}
-          bgcolor="white"
-          height="auto"
-          borderRadius={"2rem 2rem 0 0"}
-          zIndex={99}
-          justifyContent={"center"}
-          p={"2rem"}
-          marginTop={"-25px"}
+          sx={{
+            width: "100%",
+            maxWidth: 500,
+            margin: "auto",
+            padding: 4,
+            boxShadow: isMedium||isMobile? null: 3,
+          }}
         >
-          <Box
-            position={"relative"}
-            sx={{
-              "@media (max-width: 700px)": {
-                width: "100%",
-              },
-            }}
-          >
-            <Box mt={"0.5rem"}>
-              <FormControl sx={{ m: "1rem 0 1rem" }}>
-                <Select
-                  className="SelectLanguages"
-                  value={language}
-                  onChange={handleChange}
-                  displayEmpty
-                  style={{
-                    borderRadius: "0.5rem",
-                    color: theme.palette.warning["A200"],
-                    width: "117px",
-                    height: "32px",
-                    marginBottom: "0rem",
-                    fontSize: "14px",
-                  }}
-                >
-                  {config?.languages.map((lang) => (
-                    <MenuItem value={lang.code} key={lang.code}>
-                      {lang.label}
-                    </MenuItem>
-                  ))}
-                </Select>
-              </FormControl>
-            </Box>
+          <form onSubmit={handleFormSubmit}>
             <Box
-              marginY={"1rem"}
-              sx={{
-                width: "668px",
-                "@media (max-width: 700px)": {
-                  width: "100%",
-                },
-              }}
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              bgcolor={theme.palette.warning.A200}
+              p={2}
+              borderRadius={2}
             >
-              <TextField
-                id="username"
-                InputLabelProps={{
-                  shrink: true,
-                }}
-                label={t("LOGIN_PAGE.USERNAME")}
-                placeholder={t("LOGIN_PAGE.USERNAME_PLACEHOLDER")}
-                value={username}
-                onChange={handleUsernameChange}
-                error={usernameError}
-                className="userName"
-              />
+              {loading && (
+                <Loader showBackdrop={true} loadingText={t("COMMON.LOADING")} />
+              )}
+              <Image src={appLogo} alt="App Logo" height={100} />
             </Box>
-            <Box
-              sx={{
-                width: "668px",
-                "@media (max-width: 768px)": {
-                  width: "100%",
-                },
-              }}
-              margin={"2rem 0 0"}
+            <Typography
+              variant="h4"
+              gutterBottom
+              textAlign="center"
+              sx={{ mt: 2 }}
             >
-              <TextField
-                type={showPassword ? "text" : "password"}
-                id="password"
-                InputLabelProps={{
-                  shrink: true,
+              {t("LOGIN_PAGE.LOGIN")}
+            </Typography>
+            <FormControl fullWidth margin="normal">
+              <Select
+                className="SelectLanguages"
+                value={language}
+                onChange={handleChange}
+                displayEmpty
+                sx={{
+                  borderRadius: "0.5rem",
+                  color: theme.palette.warning.A200,
+                  width: "117px",
+                  height: "32px",
+                  marginBottom: "0rem",
+                  fontSize: "14px",
                 }}
-                onClick={() => setScrolling(!scrolling)}
-                className="password"
-                InputProps={{
-                  endAdornment: (
-                    <InputAdornment position="end">
-                      <IconButton
-                        aria-label="toggle password visibility"
-                        onClick={handleClickShowPassword}
-                        onMouseDown={handleMouseDownPassword}
-                        edge="end"
-                      >
-                        {showPassword ? <VisibilityOff /> : <Visibility />}
-                      </IconButton>
-                    </InputAdornment>
-                  ),
-                }}
-                label={t("LOGIN_PAGE.PASSWORD")}
-                placeholder={t("LOGIN_PAGE.PASSWORD_PLACEHOLDER")}
-                value={password}
-                onChange={handlePasswordChange}
-                error={passwordError}
-                inputRef={passwordRef}
-              />
-            </Box>
-
-            {
-              <Box marginTop={"1rem"} marginLeft={"0.8rem"}>
-                <Link
-                  sx={{ color: theme.palette.secondary.main }}
-                  href="https://qa.prathamteacherapp.tekdinext.com/auth/realms/pratham/login-actions/reset-credentials?client_id=security-admin-console&tab_id=rPJFHSFv50M"
-                  underline="none"
-                  onClick={handleForgotPasswordClick}
-                >
-                  {t("LOGIN_PAGE.FORGOT_PASSWORD")}
-                </Link>
-              </Box>
-            }
-            <Box marginTop={"1.2rem"} className="remember-me-checkbox">
+              >
+                {config.languages.map((lang) => (
+                  <MenuItem value={lang.code} key={lang.code}>
+                    {lang.label}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+            <TextField
+              fullWidth
+              id="username"
+              InputLabelProps={{ shrink: true }}
+              label={t("LOGIN_PAGE.USERNAME")}
+              placeholder={t("LOGIN_PAGE.USERNAME_PLACEHOLDER")}
+              value={username}
+              onChange={handleUsernameChange}
+              error={usernameError}
+              margin="normal"
+            />
+            <TextField
+              fullWidth
+              type={showPassword ? "text" : "password"}
+              id="password"
+              InputLabelProps={{ shrink: true }}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      aria-label="toggle password visibility"
+                      onClick={handleClickShowPassword}
+                      onMouseDown={handleMouseDownPassword}
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                ),
+              }}
+              label={t("LOGIN_PAGE.PASSWORD")}
+              placeholder={t("LOGIN_PAGE.PASSWORD_PLACEHOLDER")}
+              value={password}
+              onChange={handlePasswordChange}
+              error={passwordError}
+              margin="normal"
+              inputRef={passwordRef}
+            />
+          
+            <Box
+              display="flex"
+              alignItems="center"
+              marginTop="1.2rem"
+              className="remember-me-checkbox"
+            >
               <Checkbox
                 onChange={(e) => setRememberMe(e.target.checked)}
                 checked={rememberMe}
               />
-              <span
-                style={{
-                  cursor: "pointer",
-                  color: theme.palette.warning["300"],
-                }}
-                className="fw-400"
+              <Typography
+                variant="body2"
                 onClick={() => {
                   setRememberMe(!rememberMe);
                   logEvent({
                     action: "remember-me-button-clicked",
                     category: "Login Page",
-                    label: `Remember Me ${rememberMe ? "Checked" : "Unchecked"}`,
+                    label: `Remember Me ${
+                      rememberMe ? "Checked" : "Unchecked"
+                    }`,
                   });
                 }}
+                sx={{
+                  cursor: "pointer",
+                  marginTop:"15px",
+                  color: theme.palette.warning[300],
+                }}
               >
                 {t("LOGIN_PAGE.REMEMBER_ME")}
-              </span>
+              </Typography>
             </Box>
-            <Box
-              alignContent={"center"}
-              textAlign={"center"}
-              marginTop={"2rem"}
-              width={"100%"}
-            >
+            <Box marginTop="2rem" textAlign="center">
               <Button
                 variant="contained"
                 type="submit"
-                fullWidth={true}
+                fullWidth
                 disabled={isButtonDisabled}
                 ref={loginButtonRef}
               >
                 {t("LOGIN_PAGE.LOGIN")}
               </Button>
             </Box>
-          </Box>
+          </form>
         </Box>
-      </form>
-    </Box>
+      </Grid>
+    </Grid>
   );
 };