diff --git a/deepfence_frontend/apps/dashboard/src/api/api.ts b/deepfence_frontend/apps/dashboard/src/api/api.ts
index 2276dc8a0f..9f2de23b63 100644
--- a/deepfence_frontend/apps/dashboard/src/api/api.ts
+++ b/deepfence_frontend/apps/dashboard/src/api/api.ts
@@ -42,6 +42,12 @@ export function getUserApiClient() {
   const userApi = new UserApi(configuration);
   return {
     registerUser: userApi.registerUser.bind(userApi),
+    getUsers: userApi.getUsers.bind(userApi),
+    getUser: userApi.getUser.bind(userApi),
+    updateUser: userApi.updateUser.bind(userApi),
+    deleteUser: userApi.deleteUser.bind(userApi),
+    updatePassword: userApi.updatePassword.bind(userApi),
+    inviteUser: userApi.inviteUser.bind(userApi),
   };
 }
 
diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/ChangePassword.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/ChangePassword.tsx
new file mode 100644
index 0000000000..842dbcf071
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/settings/pages/ChangePassword.tsx
@@ -0,0 +1,153 @@
+import { IconContext } from 'react-icons';
+import { HiArrowSmLeft } from 'react-icons/hi';
+import { Link, useFetcher } from 'react-router-dom';
+import { ActionFunction, redirect } from 'react-router-dom';
+import { toast } from 'sonner';
+import { Button, Card, TextInput } from 'ui-components';
+
+import { getUserApiClient } from '@/api/api';
+import { ApiDocsBadRequestResponse } from '@/api/generated';
+import { DFLink } from '@/components/DFLink';
+import { SettingsTab } from '@/features/settings/components/SettingsTab';
+import { ApiError, makeRequest } from '@/utils/api';
+
+export type changePasswordActionReturnType = {
+  error?: string;
+  fieldErrors?: {
+    old_password?: string;
+    new_password?: string;
+    confirm_password?: string;
+  };
+};
+
+export const action: ActionFunction = async ({
+  request,
+}): Promise<changePasswordActionReturnType> => {
+  const formData = await request.formData();
+  // add console_url which is the origin of request
+  formData.append('consoleUrl', window.location.origin);
+  const body = Object.fromEntries(formData);
+  if (body.new_password !== body.confirm_password) {
+    return {
+      fieldErrors: {
+        confirm_password: 'Password does not match',
+      },
+    };
+  }
+  const r = await makeRequest({
+    apiFunction: getUserApiClient().updatePassword,
+    apiArgs: [
+      {
+        modelUpdateUserPasswordRequest: {
+          old_password: body.new_password as string,
+          new_password: body.new_password as string,
+        },
+      },
+    ],
+    errorHandler: async (r) => {
+      const error = new ApiError<changePasswordActionReturnType>({});
+      if (r.status === 400) {
+        const modelResponse: ApiDocsBadRequestResponse = await r.json();
+        return error.set({
+          fieldErrors: {
+            old_password: modelResponse.error_fields?.old_password as string,
+            new_password: modelResponse.error_fields?.new_password as string,
+          },
+        });
+      } else if (r.status === 403) {
+        const modelResponse: ApiDocsBadRequestResponse = await r.json();
+        return error.set({
+          error: modelResponse.message,
+        });
+      }
+    },
+  });
+
+  if (ApiError.isApiError(r)) {
+    return r.value();
+  }
+  toast.success('Password changed successfully');
+  throw redirect('/settings/user-management', 302);
+};
+
+const ChangePassword = () => {
+  const fetcher = useFetcher<changePasswordActionReturnType>();
+  const { data } = fetcher;
+  return (
+    <>
+      <SettingsTab value="user-management">
+        <div className="flex">
+          <DFLink
+            to="/settings/user-management"
+            className="shrink-0 flex items-center justify-start hover:no-underline active:no-underline focus:no-underline ml-5 mr-2 mt-2"
+          >
+            <IconContext.Provider
+              value={{
+                className: 'text-blue-600 dark:text-blue-500 ',
+              }}
+            >
+              <HiArrowSmLeft />
+            </IconContext.Provider>
+            <span className="text text-blue-600 dark:text-blue-500">Back</span>
+          </DFLink>
+          <span className="flex ml-2 mt-2 dark:text-white ">User Profile</span>
+        </div>
+        <Card className="flex-col p-5 mt-2 ml-5 gap-y-4">
+          <fetcher.Form method="post" className="flex flex-col gap-y-3">
+            <TextInput
+              label="Old Password"
+              type={'password'}
+              placeholder="Old Password"
+              name="old_password"
+              color={data?.fieldErrors?.old_password ? 'error' : 'default'}
+              sizing="sm"
+              className="w-3/4 min-[200px] max-w-xs"
+              helperText={data?.fieldErrors?.old_password}
+              required
+            />
+            <TextInput
+              label="New Password"
+              type={'password'}
+              placeholder="New Password"
+              name="new_password"
+              sizing="sm"
+              className="w-3/4 min-[200px] max-w-xs"
+              color={data?.fieldErrors?.new_password ? 'error' : 'default'}
+              helperText={data?.fieldErrors?.new_password}
+              required
+            />
+            <TextInput
+              label="Confirm Password"
+              type={'password'}
+              placeholder="Confirm Password"
+              name="confirm_password"
+              sizing="sm"
+              className="w-3/4 min-[200px] max-w-xs"
+              color={data?.fieldErrors?.confirm_password ? 'error' : 'default'}
+              helperText={data?.fieldErrors?.confirm_password}
+              required
+            />
+            <Button
+              color="primary"
+              className="w-3/4 max-w-xs pl-3"
+              type="submit"
+              size="xs"
+            >
+              Change Password
+            </Button>
+            <Link to="/settings/user-management">
+              <Button color="danger" className="w-3/4 max-w-xs pl-3" size="xs">
+                Cancel
+              </Button>
+            </Link>
+          </fetcher.Form>
+        </Card>
+      </SettingsTab>
+    </>
+  );
+};
+
+export const module = {
+  element: <ChangePassword />,
+  action,
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/EditUser.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/EditUser.tsx
new file mode 100644
index 0000000000..cb9c32171b
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/settings/pages/EditUser.tsx
@@ -0,0 +1,241 @@
+import { Suspense } from 'react';
+import { IconContext } from 'react-icons';
+import { HiArrowSmLeft } from 'react-icons/hi';
+import {
+  Link,
+  LoaderFunctionArgs,
+  useFetcher,
+  useLoaderData,
+  useParams,
+} from 'react-router-dom';
+import { ActionFunction, redirect } from 'react-router-dom';
+import { toast } from 'sonner';
+import {
+  Button,
+  Card,
+  CircleSpinner,
+  Select,
+  SelectItem,
+  TextInput,
+} from 'ui-components';
+
+import { getUserApiClient } from '@/api/api';
+import {
+  ApiDocsBadRequestResponse,
+  ModelUpdateUserIdRequestRoleEnum,
+} from '@/api/generated';
+import { ModelUser } from '@/api/generated/models/ModelUser';
+import { DFLink } from '@/components/DFLink';
+import { SettingsTab } from '@/features/settings/components/SettingsTab';
+import { ApiError, makeRequest } from '@/utils/api';
+import { typedDefer, TypedDeferredData } from '@/utils/router';
+import { DFAwait } from '@/utils/suspense';
+
+export type UpdateActionReturnType = {
+  error?: string;
+  fieldErrors?: {
+    firstName?: string;
+    lastName?: string;
+    role?: string;
+    status?: string;
+  };
+};
+
+export const action: ActionFunction = async ({
+  request,
+}): Promise<UpdateActionReturnType> => {
+  const formData = await request.formData();
+  // add console_url which is the origin of request
+  formData.append('consoleUrl', window.location.origin);
+  const body = Object.fromEntries(formData);
+
+  const r = await makeRequest({
+    apiFunction: getUserApiClient().updateUser,
+    apiArgs: [
+      {
+        id: Number(body.id),
+        modelUpdateUserIdRequest: {
+          first_name: body.firstName as string,
+          last_name: body.lastName as string,
+          role: body.role as ModelUpdateUserIdRequestRoleEnum,
+          is_active: body.status === 'true',
+        },
+      },
+    ],
+    errorHandler: async (r) => {
+      const error = new ApiError<UpdateActionReturnType>({});
+      if (r.status === 400) {
+        const modelResponse: ApiDocsBadRequestResponse = await r.json();
+        return error.set({
+          fieldErrors: {
+            firstName: modelResponse.error_fields?.first_name as string,
+            lastName: modelResponse.error_fields?.last_name as string,
+            status: modelResponse.error_fields?.is_active as string,
+            role: modelResponse.error_fields?.role as string,
+          },
+        });
+      } else if (r.status === 403) {
+        const modelResponse: ApiDocsBadRequestResponse = await r.json();
+        return error.set({
+          error: modelResponse.message,
+        });
+      }
+    },
+  });
+
+  if (ApiError.isApiError(r)) {
+    return r.value();
+  }
+  toast.success('User details updated successfully');
+  throw redirect('/settings/user-management', 302);
+};
+
+type LoaderDataType = {
+  message?: string;
+  data?: ModelUser;
+};
+const getUser = async (userId: number): Promise<LoaderDataType> => {
+  const usersPromise = await makeRequest({
+    apiFunction: getUserApiClient().getUser,
+    apiArgs: [{ id: userId }],
+  });
+
+  if (ApiError.isApiError(usersPromise)) {
+    return {
+      message: 'Error in getting users list',
+    };
+  }
+
+  return {
+    data: usersPromise,
+  };
+};
+const loader = async ({
+  params,
+}: LoaderFunctionArgs): Promise<TypedDeferredData<LoaderDataType>> => {
+  return typedDefer({
+    data: getUser(Number(params.userId)),
+  });
+};
+const EditUser = () => {
+  const loaderData = useLoaderData() as LoaderDataType;
+  const fetcher = useFetcher<UpdateActionReturnType>();
+  const { data } = fetcher;
+  const { userId } = useParams() as {
+    userId: string;
+  };
+
+  if (!userId) {
+    throw new Error('User ID is required');
+  }
+  return (
+    <>
+      <SettingsTab value="user-management">
+        <div className="flex">
+          <DFLink
+            to="/settings/user-management"
+            className="shrink-0 flex items-center justify-start hover:no-underline active:no-underline focus:no-underline mr-2 mt-2 ml-5"
+          >
+            <IconContext.Provider
+              value={{
+                className: 'text-blue-600 dark:text-blue-500 ',
+              }}
+            >
+              <HiArrowSmLeft />
+            </IconContext.Provider>
+            <span className="text text-blue-600 dark:text-blue-500">Back</span>
+          </DFLink>
+          <span className="flex ml-2 mt-2 dark:text-white ">User Profile</span>
+        </div>
+        <Card className="flex-col p-5 mt-2 ml-5 gap-y-4">
+          <Suspense fallback={<CircleSpinner size="xs" />}>
+            <DFAwait resolve={loaderData.data}>
+              {(user: LoaderDataType) => {
+                return (
+                  <fetcher.Form method="post" className="flex flex-col gap-y-3">
+                    <TextInput type="hidden" name="id" value={user.data?.id} />
+                    <TextInput
+                      label="First Name"
+                      type={'text'}
+                      placeholder="First Name"
+                      name="firstName"
+                      color={data?.fieldErrors?.firstName ? 'error' : 'default'}
+                      sizing="sm"
+                      className="w-3/4 max-w-xs"
+                      defaultValue={user.data?.first_name}
+                      helperText={data?.fieldErrors?.firstName}
+                      required
+                    />
+                    <TextInput
+                      label="Last Name"
+                      type={'text'}
+                      placeholder="Last Name"
+                      name="lastName"
+                      sizing="sm"
+                      className="w-3/4 max-w-xs"
+                      color={data?.fieldErrors?.lastName ? 'error' : 'default'}
+                      defaultValue={user.data?.last_name}
+                      helperText={data?.fieldErrors?.lastName}
+                      required
+                    />
+                    <div className="w-3/4 max-w-xs">
+                      <Select
+                        defaultValue={user.data?.role}
+                        name="role"
+                        label={'Role'}
+                        placeholder="admin"
+                        sizing="xs"
+                        helperText={data?.fieldErrors?.role}
+                      >
+                        <SelectItem
+                          value={ModelUpdateUserIdRequestRoleEnum['StandardUser']}
+                        >
+                          User
+                        </SelectItem>
+                        <SelectItem value={ModelUpdateUserIdRequestRoleEnum['Admin']}>
+                          Admin
+                        </SelectItem>
+                        <SelectItem
+                          value={ModelUpdateUserIdRequestRoleEnum['ReadOnlyUser']}
+                        >
+                          Read only user
+                        </SelectItem>
+                      </Select>
+                    </div>
+                    <div className="w-3/4 max-w-xs">
+                      <Select
+                        name="status"
+                        label={'Status'}
+                        placeholder="Active"
+                        sizing="xs"
+                        defaultValue={user.data?.is_active ? 'Active' : 'inActive'}
+                        helperText={data?.fieldErrors?.status}
+                      >
+                        <SelectItem value="true">Active</SelectItem>
+                        <SelectItem value="false">InActive</SelectItem>
+                      </Select>
+                    </div>
+                    <Button color="primary" className="w-3/4 max-w-xs pl-3" type="submit">
+                      Submit
+                    </Button>
+                    <Link to="/settings/user-management">
+                      <Button color="danger" className="w-3/4 max-w-xs pl-3">
+                        Cancel
+                      </Button>
+                    </Link>
+                  </fetcher.Form>
+                );
+              }}
+            </DFAwait>
+          </Suspense>
+        </Card>
+      </SettingsTab>
+    </>
+  );
+};
+
+export const module = {
+  element: <EditUser />,
+  loader,
+  action,
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/InviteUser.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/InviteUser.tsx
new file mode 100644
index 0000000000..135b5a2e3e
--- /dev/null
+++ b/deepfence_frontend/apps/dashboard/src/features/settings/pages/InviteUser.tsx
@@ -0,0 +1,174 @@
+import { IconContext } from 'react-icons';
+import { HiArrowSmLeft } from 'react-icons/hi';
+import { useFetcher } from 'react-router-dom';
+import { ActionFunction, redirect } from 'react-router-dom';
+import { toast } from 'sonner';
+import { Button, Card, Select, SelectItem, TextInput, Typography } from 'ui-components';
+
+import { getUserApiClient } from '@/api/api';
+import {
+  ApiDocsBadRequestResponse,
+  ModelInviteUserRequestActionEnum,
+  ModelInviteUserRequestRoleEnum,
+  ModelUpdateUserIdRequestRoleEnum,
+} from '@/api/generated';
+import { DFLink } from '@/components/DFLink';
+import { SettingsTab } from '@/features/settings/components/SettingsTab';
+import { ApiError, makeRequest } from '@/utils/api';
+
+export type inviteUserActionReturnType = {
+  error?: string;
+  fieldErrors?: {
+    email?: string;
+    role?: string;
+  };
+  message?: string;
+  invite_url?: string;
+  invite_expiry_hours?: number;
+};
+
+export const action: ActionFunction = async ({
+  request,
+}): Promise<inviteUserActionReturnType> => {
+  const formData = await request.formData();
+  // add console_url which is the origin of request
+  formData.append('consoleUrl', window.location.origin);
+  const body = Object.fromEntries(formData);
+
+  const r = await makeRequest({
+    apiFunction: getUserApiClient().inviteUser,
+    apiArgs: [
+      {
+        modelInviteUserRequest: {
+          action: body.intent as ModelInviteUserRequestActionEnum,
+          email: body.email as string,
+          role: body.role as ModelInviteUserRequestRoleEnum,
+        },
+      },
+    ],
+    errorHandler: async (r) => {
+      const error = new ApiError<inviteUserActionReturnType>({});
+      if (r.status === 400) {
+        const modelResponse: ApiDocsBadRequestResponse = await r.json();
+        return error.set({
+          fieldErrors: {
+            email: modelResponse.error_fields?.email as string,
+            role: modelResponse.error_fields?.role as string,
+          },
+        });
+      } else if (r.status === 403) {
+        const modelResponse: ApiDocsBadRequestResponse = await r.json();
+        return error.set({
+          error: modelResponse.message,
+        });
+      }
+    },
+  });
+
+  if (ApiError.isApiError(r)) {
+    return r.value();
+  }
+  if (body.intent == ModelInviteUserRequestActionEnum['GetInviteLink']) {
+    r.invite_url && navigator.clipboard.writeText(r.invite_url);
+    toast.success('User Invite URL copied!!!');
+    return r;
+  }
+  toast.success('User Invite Sent successfully');
+  throw redirect('/settings/user-management', 302);
+};
+
+const InviteUser = () => {
+  const fetcher = useFetcher<inviteUserActionReturnType>();
+  const { data } = fetcher;
+  return (
+    <>
+      <SettingsTab value="user-management">
+        <div className="flex">
+          <DFLink
+            to="/settings/user-management"
+            className="shrink-0 flex items-center justify-start hover:no-underline active:no-underline focus:no-underline ml-5 mr-2 mt-2"
+          >
+            <IconContext.Provider
+              value={{
+                className: 'text-blue-600 dark:text-blue-500 ',
+              }}
+            >
+              <HiArrowSmLeft />
+            </IconContext.Provider>
+            <span className="text text-blue-600 dark:text-blue-500">Back</span>
+          </DFLink>
+
+          <span className="flex ml-2 mt-2 dark:text-white ">User Profile</span>
+        </div>
+        <Card className="flex-col p-5 mt-2 ml-5 gap-y-4">
+          <fetcher.Form method="post" className="flex flex-col gap-y-3">
+            <TextInput
+              label="Emial"
+              type={'email'}
+              placeholder="Email"
+              name="email"
+              color={data?.fieldErrors?.email ? 'error' : 'default'}
+              sizing="sm"
+              className="w-3/4 min-[200px] max-w-xs"
+              required
+              helperText={data?.fieldErrors?.email}
+            />
+            <div className="w-3/4 max-w-xs">
+              <Select
+                name="role"
+                label={'Role'}
+                placeholder="admin"
+                sizing="xs"
+                helperText={data?.fieldErrors?.role}
+              >
+                <SelectItem value={ModelUpdateUserIdRequestRoleEnum['Admin']}>
+                  admin
+                </SelectItem>
+                <SelectItem value={ModelUpdateUserIdRequestRoleEnum['StandardUser']}>
+                  User
+                </SelectItem>
+                <SelectItem value={ModelUpdateUserIdRequestRoleEnum['ReadOnlyUser']}>
+                  read only user
+                </SelectItem>
+              </Select>
+            </div>
+            <Button
+              color="primary"
+              className="w-3/4 max-w-xs pl-3"
+              size="sm"
+              type="submit"
+              name="intent"
+              value={ModelInviteUserRequestActionEnum['SendInviteEmail']}
+            >
+              Send sign up request
+            </Button>
+
+            <Button
+              color="primary"
+              className="w-3/4 max-w-xs pl-3"
+              type="submit"
+              size="sm"
+              name="intent"
+              value={ModelInviteUserRequestActionEnum['GetInviteLink']}
+            >
+              Get an invite link
+            </Button>
+          </fetcher.Form>
+          {data?.invite_url && (
+            <p
+              className={`mt-1.5 w-3/4 max-w-xs ${Typography.size.sm} text-green-500 relative`}
+            >
+              Invite URL:{data?.invite_url}, invite will expire after{' '}
+              {data?.invite_expiry_hours} hours
+            </p>
+          )}
+        </Card>
+      </SettingsTab>
+    </>
+  );
+};
+
+export const module = {
+  element: <InviteUser />,
+  action,
+};
diff --git a/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx b/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx
index 19d96bca7b..c8863e23d5 100644
--- a/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx
+++ b/deepfence_frontend/apps/dashboard/src/features/settings/pages/UserManagement.tsx
@@ -1,13 +1,329 @@
+import { Suspense, useCallback, useMemo, useState } from 'react';
+import { IconContext } from 'react-icons';
+import { FaPencilAlt, FaTrashAlt } from 'react-icons/fa';
+import { HiDotsVertical, HiOutlineExclamationCircle } from 'react-icons/hi';
+import {
+  ActionFunctionArgs,
+  generatePath,
+  Link,
+  useFetcher,
+  useLoaderData,
+} from 'react-router-dom';
+import { toast } from 'sonner';
+import {
+  Button,
+  createColumnHelper,
+  Dropdown,
+  DropdownItem,
+  Modal,
+  Table,
+  TableSkeleton,
+} from 'ui-components';
+
+import { getUserApiClient } from '@/api/api';
+import { ApiDocsBadRequestResponse } from '@/api/generated';
+import { ModelUser } from '@/api/generated/models/ModelUser';
 import { SettingsTab } from '@/features/settings/components/SettingsTab';
+import { ApiError, makeRequest } from '@/utils/api';
+import { typedDefer, TypedDeferredData } from '@/utils/router';
+import { DFAwait } from '@/utils/suspense';
+import { usePageNavigation } from '@/utils/usePageNavigation';
+
+type LoaderDataType = {
+  message?: string;
+  data?: ModelUser[];
+};
+const getUsers = async (): Promise<LoaderDataType> => {
+  const usersPromise = await makeRequest({
+    apiFunction: getUserApiClient().getUsers,
+    apiArgs: [],
+  });
+
+  if (ApiError.isApiError(usersPromise)) {
+    return {
+      message: 'Error in getting users list',
+    };
+  }
+
+  return {
+    data: usersPromise,
+  };
+};
+const loader = async (): Promise<TypedDeferredData<LoaderDataType>> => {
+  return typedDefer({
+    data: getUsers(),
+  });
+};
+
+export type ActionReturnType = {
+  message?: string;
+  success: boolean;
+};
+
+export const action = async ({
+  request,
+}: ActionFunctionArgs): Promise<ActionReturnType> => {
+  const formData = await request.formData();
+  const id = Number(formData.get('userId'));
+  const r = await makeRequest({
+    apiFunction: getUserApiClient().deleteUser,
+    apiArgs: [
+      {
+        id,
+      },
+    ],
+    errorHandler: async (r) => {
+      const error = new ApiError<ActionReturnType>({ success: false });
+      if (r.status === 400) {
+        const modelResponse: ApiDocsBadRequestResponse = await r.json();
+        return error.set({
+          message: modelResponse.message ?? '',
+          success: false,
+        });
+      }
+    },
+  });
+
+  if (ApiError.isApiError(r)) {
+    return r.value();
+  }
+
+  toast('User account deleted sucessfully');
+  return {
+    success: true,
+  };
+};
+const ActionDropdown = ({ id }: { id: string }) => {
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const { navigate } = usePageNavigation();
 
+  return (
+    <>
+      {showDeleteDialog && (
+        <DeleteConfirmationModal
+          showDialog={showDeleteDialog}
+          userId={id}
+          setShowDialog={setShowDeleteDialog}
+        />
+      )}
+      <Dropdown
+        triggerAsChild={true}
+        align="end"
+        content={
+          <>
+            <DropdownItem
+              className="text-sm"
+              onClick={() => {
+                navigate(
+                  generatePath('/settings/user-management/edit/:userId', {
+                    userId: id,
+                  }),
+                );
+              }}
+            >
+              <span className="flex items-center gap-x-2 text-gray-700 dark:text-gray-400">
+                <IconContext.Provider
+                  value={{ className: 'text-gray-700 dark:text-gray-400' }}
+                >
+                  <FaPencilAlt />
+                </IconContext.Provider>
+                Edit
+              </span>
+            </DropdownItem>
+            <DropdownItem
+              className="text-sm"
+              onClick={() => {
+                setShowDeleteDialog(true);
+              }}
+            >
+              <span className="flex items-center gap-x-2 text-red-700 dark:text-red-400">
+                <IconContext.Provider
+                  value={{ className: 'text-red-700 dark:text-red-400' }}
+                >
+                  <FaTrashAlt className="text-red-500" />
+                </IconContext.Provider>
+                Delete
+              </span>
+            </DropdownItem>
+          </>
+        }
+      >
+        <Button size="xs" color="normal" className="hover:bg-transparent">
+          <IconContext.Provider value={{ className: 'text-gray-700 dark:text-gray-400' }}>
+            <HiDotsVertical />
+          </IconContext.Provider>
+        </Button>
+      </Dropdown>
+    </>
+  );
+};
 const UserManagement = () => {
+  const columnHelper = createColumnHelper<ModelUser>();
+  const loaderData = useLoaderData() as LoaderDataType;
+  const columns = useMemo(() => {
+    const columns = [
+      columnHelper.accessor('id', {
+        cell: (cell) => cell.getValue(),
+        header: () => 'ID',
+        minSize: 30,
+        size: 30,
+        maxSize: 85,
+      }),
+      columnHelper.accessor('first_name', {
+        cell: (cell) => cell.getValue(),
+        header: () => 'First Name',
+        minSize: 30,
+        size: 80,
+        maxSize: 85,
+      }),
+      columnHelper.accessor('last_name', {
+        cell: (cell) => cell.getValue(),
+        header: () => 'Last Name',
+        minSize: 30,
+        size: 80,
+        maxSize: 85,
+      }),
+      columnHelper.accessor('email', {
+        cell: (cell) => cell.getValue(),
+        header: () => 'Email',
+        minSize: 30,
+        size: 80,
+        maxSize: 85,
+      }),
+      columnHelper.accessor('role', {
+        cell: (cell) => cell.getValue(),
+        header: () => 'Role',
+        minSize: 30,
+        size: 80,
+        maxSize: 85,
+      }),
+      columnHelper.display({
+        id: 'actions',
+        enableSorting: false,
+        cell: (cell) => {
+          if (!cell.row.original.id) {
+            throw new Error('User id not found');
+          }
+          return <ActionDropdown id={cell.row.original.id.toString()} />;
+        },
+        header: () => '',
+        minSize: 20,
+        size: 20,
+        maxSize: 20,
+        enableResizing: false,
+      }),
+    ];
+    return columns;
+  }, []);
+
   return (
     <SettingsTab value="user-management">
-      <div className="h-full mt-2">User management</div>
+      <div className="h-full mt-2 p-2">
+        <Suspense fallback={<TableSkeleton columns={6} rows={5} size={'sm'} />}>
+          <DFAwait resolve={loaderData.data}>
+            {(resolvedData: LoaderDataType) => {
+              const { data, message } = resolvedData;
+              const users = data ?? [];
+
+              return (
+                <div>
+                  <div className="flex justify-between m-2">
+                    <h3 className="py-2 font-medium text-gray-900 dark:text-white uppercase text-sm tracking-wider">
+                      User Accounts
+                    </h3>
+                    <div className="flex justify-end gap-2">
+                      <Link to="/settings/user-management/change-password">
+                        <Button color="primary" size="sm">
+                          Change Password
+                        </Button>
+                      </Link>
+                      <Link to="/settings/user-management/invite-user">
+                        <Button color="primary" size="sm">
+                          Invite User
+                        </Button>
+                      </Link>
+                    </div>
+                  </div>
+
+                  {message ? (
+                    <p className="text-red-500 text-sm">{message}</p>
+                  ) : (
+                    <Table
+                      size="sm"
+                      data={users}
+                      columns={columns}
+                      enablePagination
+                      pageSize={5}
+                      enableColumnResizing
+                      enableSorting
+                    />
+                  )}
+                </div>
+              );
+            }}
+          </DFAwait>
+        </Suspense>
+      </div>
     </SettingsTab>
   );
 };
 
 export const module = {
   element: <UserManagement />,
+  loader,
+  action,
+};
+
+const DeleteConfirmationModal = ({
+  showDialog,
+  userId,
+  setShowDialog,
+}: {
+  showDialog: boolean;
+  userId: string;
+  setShowDialog: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
+  const fetcher = useFetcher();
+
+  const onDeleteAction = useCallback(() => {
+    const formData = new FormData();
+    formData.append('userId', userId);
+    fetcher.submit(formData, {
+      method: 'post',
+    });
+  }, [userId, fetcher]);
+
+  return (
+    <Modal open={showDialog} onOpenChange={() => setShowDialog(false)}>
+      <div className="grid place-items-center p-6">
+        <IconContext.Provider
+          value={{
+            className: 'mb-3 dark:text-red-600 text-red-400 w-[70px] h-[70px]',
+          }}
+        >
+          <HiOutlineExclamationCircle />
+        </IconContext.Provider>
+        <h3 className="mb-4 font-normal text-center text-sm">
+          Selected user will be deleted.
+          <br />
+          <span>Are you sure you want to delete?</span>
+        </h3>
+        <div className="flex items-center justify-right gap-4">
+          <Button size="xs" onClick={() => setShowDialog(false)}>
+            No, cancel
+          </Button>
+          <Button
+            size="xs"
+            color="danger"
+            onClick={() => {
+              onDeleteAction();
+              setShowDialog(false);
+            }}
+          >
+            Yes, I&apos;m sure
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
 };
diff --git a/deepfence_frontend/apps/dashboard/src/routes/private.tsx b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
index b581c406f4..a9022930eb 100644
--- a/deepfence_frontend/apps/dashboard/src/routes/private.tsx
+++ b/deepfence_frontend/apps/dashboard/src/routes/private.tsx
@@ -63,7 +63,10 @@ import { module as secret } from '@/features/secrets/pages/Secret';
 import { module as secretDetails } from '@/features/secrets/pages/SecretDetailModal';
 import { module as secretScanResults } from '@/features/secrets/pages/SecretScanResults';
 import { module as secretScans } from '@/features/secrets/pages/SecretScans';
+import { module as changePassword } from '@/features/settings/pages/ChangePassword';
 import { module as diagnosticLogs } from '@/features/settings/pages/DiagnosticLogs';
+import { module as editUser } from '@/features/settings/pages/EditUser';
+import { module as inviteUser } from '@/features/settings/pages/InviteUser';
 import { module as settings } from '@/features/settings/pages/Settings';
 import { module as userManagement } from '@/features/settings/pages/UserManagement';
 import { module as threatGraphDetailModal } from '@/features/threat-graph/data-components/DetailsModal';
@@ -459,6 +462,21 @@ export const privateRoutes: CustomRouteObject[] = [
             ...userManagement,
             meta: { title: 'User Management' },
           },
+          {
+            path: 'user-management/edit/:userId',
+            ...editUser,
+            meta: { title: 'Edit User Account' },
+          },
+          {
+            path: 'user-management/change-password',
+            ...changePassword,
+            meta: { title: 'Change your password' },
+          },
+          {
+            path: 'user-management/invite-user',
+            ...inviteUser,
+            meta: { title: 'Invite User' },
+          },
         ],
       },
     ],