diff --git a/src/frontend/src/components/PaginatorComponent/index.tsx b/src/frontend/src/components/PaginatorComponent/index.tsx
index 8fcd8683f..ebad18506 100644
--- a/src/frontend/src/components/PaginatorComponent/index.tsx
+++ b/src/frontend/src/components/PaginatorComponent/index.tsx
@@ -12,16 +12,16 @@ import { Button } from "../ui/button";
 
 export default function PaginatorComponent({
   pageSize = 10,
-  pageIndex = 1,
-  rowsCount = [10, 20, 30],
+  pageIndex = 0,
+  rowsCount = [10, 20, 50, 100],
   totalRowsCount = 0,
   paginate,
 }: PaginatorComponentType) {
+  
   const [size, setPageSize] = useState(pageSize);
   const [index, setPageIndex] = useState(pageIndex);
-
   const [maxIndex, setMaxPageIndex] = useState(
-    Math.ceil(totalRowsCount / pageSize)
+    100
   );
 
   return (
@@ -34,8 +34,8 @@ export default function PaginatorComponent({
             <Select
               onValueChange={(pageSize: string) => {
                 setPageSize(Number(pageSize));
-                setMaxPageIndex(Math.ceil(totalRowsCount / Number(pageSize)));
-                paginate(Number(pageSize), index);
+                setMaxPageIndex(100);
+                paginate(Number(pageSize), 0);
               }}
             >
               <SelectTrigger className="w-[100px]">
@@ -51,30 +51,27 @@ export default function PaginatorComponent({
             </Select>
           </div>
           <div className="flex w-[100px] items-center justify-center text-sm font-medium">
-            Page {index} of {maxIndex}
+            Page {index+1} of {maxIndex}
           </div>
           <div className="flex items-center space-x-2">
             <Button
+            disabled={index <= 0}
               variant="outline"
               className="hidden h-8 w-8 p-0 lg:flex"
               onClick={() => {
-                setPageIndex(1);
-                paginate(size, 1);
+                setPageIndex(0);
+                paginate(size, 0);
               }}
             >
               <span className="sr-only">Go to first page</span>
               <IconComponent name="ChevronsLeft" className="h-4 w-4" />
             </Button>
             <Button
+              disabled={index <= 0}
               onClick={() => {
-                if (index <= 1) {
-                  setPageIndex(1);
-                  paginate(size, 1);
-                } else {
-                  {
-                    setPageIndex(index - 1);
-                    paginate(size, index - 1);
-                  }
+                if (index > 0) {
+                  setPageIndex(index - 1);
+                  paginate(size, index - 1);
                 }
               }}
               variant="outline"
@@ -84,14 +81,10 @@ export default function PaginatorComponent({
               <IconComponent name="ChevronLeft" className="h-4 w-4" />
             </Button>
             <Button
+            disabled={maxIndex === index}
               onClick={() => {
-                if (index >= maxIndex) {
-                  setPageIndex(maxIndex);
-                  paginate(size, maxIndex);
-                } else {
-                  setPageIndex(index + 1);
-                  paginate(size, index + 1);
-                }
+                setPageIndex(index + 1);
+                paginate(size, index + 1);
               }}
               variant="outline"
               className="h-8 w-8 p-0"
@@ -100,6 +93,7 @@ export default function PaginatorComponent({
               <IconComponent name="ChevronRight" className="h-4 w-4" />
             </Button>
             <Button
+            disabled={maxIndex === index}
               variant="outline"
               className="hidden h-8 w-8 p-0 lg:flex"
               onClick={() => {
diff --git a/src/frontend/src/components/authGuard/index.tsx b/src/frontend/src/components/authGuard/index.tsx
index 95d7c4131..e75559423 100644
--- a/src/frontend/src/components/authGuard/index.tsx
+++ b/src/frontend/src/components/authGuard/index.tsx
@@ -3,12 +3,13 @@ import { Navigate } from "react-router-dom";
 import { AuthContext } from "../../contexts/authContext";
 
 export const ProtectedRoute = ({ children }) => {
-    const { isAuthenticated, logout, getAuthentication } = useContext(AuthContext);
-    
-    if (!isAuthenticated && !getAuthentication()) {
-      logout();
-      return <Navigate to="/login" replace />;
-    }
-  
-    return children;
-  };
\ No newline at end of file
+  const { isAuthenticated, logout, getAuthentication } =
+    useContext(AuthContext);
+
+  if (!isAuthenticated && !getAuthentication()) {
+    logout();
+    return <Navigate to="/login" replace />;
+  }
+
+  return children;
+};
diff --git a/src/frontend/src/components/authLoginGuard/index.tsx b/src/frontend/src/components/authLoginGuard/index.tsx
new file mode 100644
index 000000000..361909d55
--- /dev/null
+++ b/src/frontend/src/components/authLoginGuard/index.tsx
@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { Navigate } from "react-router-dom";
+import { AuthContext } from "../../contexts/authContext";
+
+export const ProtectedLoginRoute = ({ children }) => {
+  const { getAuthentication } = useContext(AuthContext);
+
+  if (getAuthentication()) {
+    window.location.replace('/');
+    return <Navigate to="/" replace />;
+  }
+
+  return children;
+};
diff --git a/src/frontend/src/components/genericIconComponent/index.tsx b/src/frontend/src/components/genericIconComponent/index.tsx
index 186c2e253..c1565de4a 100644
--- a/src/frontend/src/components/genericIconComponent/index.tsx
+++ b/src/frontend/src/components/genericIconComponent/index.tsx
@@ -1,17 +1,21 @@
+import React, { forwardRef } from 'react';
 import { IconComponentProps } from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 
-export default function IconComponent({
+const ForwardedIconComponent = forwardRef(({
   name,
   className,
   iconColor,
-}: IconComponentProps): JSX.Element {
+}: IconComponentProps, ref) => {
   const TargetIcon = nodeIconsLucide[name] ?? nodeIconsLucide["unknown"];
   return (
     <TargetIcon
       strokeWidth={1.5}
       className={className}
       style={{ color: iconColor }}
+      ref={ref}
     />
   );
-}
+});
+
+export default ForwardedIconComponent;
diff --git a/src/frontend/src/components/ui/checkbox.tsx b/src/frontend/src/components/ui/checkbox.tsx
index 55d805027..ba16ba865 100644
--- a/src/frontend/src/components/ui/checkbox.tsx
+++ b/src/frontend/src/components/ui/checkbox.tsx
@@ -20,7 +20,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Indicator
       className={cn("flex items-center justify-center text-current")}
     >
-      <IconComponent name="Check" className="h-4 w-4" />
+      <IconComponent name="Check" className="h-3 w-3" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
diff --git a/src/frontend/src/constants/constants.ts b/src/frontend/src/constants/constants.ts
index 27584fd32..5353453b1 100644
--- a/src/frontend/src/constants/constants.ts
+++ b/src/frontend/src/constants/constants.ts
@@ -520,6 +520,14 @@ export const CONTROL_LOGIN_STATE = {
   username: "",
   password: "",
 };
+
+export const CONTROL_NEW_USER = {
+  username: "",
+  password: "",
+  is_disabled: false,
+  is_superuser: false,
+};
+
 export const tabsCode = [];
 
 export function tabsArray(codes: string[], method: number) {
diff --git a/src/frontend/src/contexts/authContext.tsx b/src/frontend/src/contexts/authContext.tsx
index f7f16111e..dddefa619 100644
--- a/src/frontend/src/contexts/authContext.tsx
+++ b/src/frontend/src/contexts/authContext.tsx
@@ -36,14 +36,8 @@ export function AuthProvider({ children }): React.ReactElement {
   function getAuthentication(){
     const storedRefreshToken = cookies.get('refresh_token');
     const storedAccess = cookies.get('refresh_token');
-    if (storedAccess && storedRefreshToken) {
-      setAccessToken(storedAccess);
-      setRefreshToken(storedRefreshToken);
-      return true;
-    }
-    else{
-      return false;
-    }
+    const auth = storedAccess && storedRefreshToken ? true : false;
+    return auth;
   }
 
   function login(newAccessToken: string, refreshToken: string) {
diff --git a/src/frontend/src/controllers/API/api.tsx b/src/frontend/src/controllers/API/api.tsx
index 8c71752b2..6b163182c 100644
--- a/src/frontend/src/controllers/API/api.tsx
+++ b/src/frontend/src/controllers/API/api.tsx
@@ -1,10 +1,10 @@
 import axios, { AxiosError, AxiosInstance } from "axios";
-import { useContext, useEffect, useRef, useState } from "react";
+import { useContext, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { renewAccessToken } from ".";
+import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
 import { alertContext } from "../../contexts/alertContext";
 import { AuthContext } from "../../contexts/authContext";
-import { URL_EXCLUDED_FROM_ERROR_RETRIES } from "../../constants/constants";
-import { renewAccessToken } from ".";
-import { useNavigate } from "react-router-dom";
 
 // Create a new Axios instance
 const api: AxiosInstance = axios.create({
@@ -23,67 +23,69 @@ function ApiInterceptor() {
         if (URL_EXCLUDED_FROM_ERROR_RETRIES.includes(error.config?.url)) {
           return Promise.reject(error);
         }
-
-        if(error.response?.status === 401){
+        if (error.response?.status === 401) {
           const refreshToken = localStorage.getItem("refresh_token");
           if (refreshToken) {
-              const res = await renewAccessToken(refreshToken);
-              login(res.data.access_token, res.data.refresh_token);
-              try {
-                  const accessToken = localStorage.getItem("access_token");
-                  delete error.config.headers["Authorization"];
-                  error.config.headers["Authorization"] = `Bearer ${accessToken}`;
-                  const response = await axios.request(error.config);
-                  return response;
-                }
-               catch (error) {
-                if(error.response?.status === 401){
-                  logout();
-                  navigate("/login");
-                }
+            const res = await renewAccessToken(refreshToken);
+            login(res.data.access_token, res.data.refresh_token);
+            try {
+              const accessToken = localStorage.getItem("access_token");
+              delete error.config.headers["Authorization"];
+              error.config.headers["Authorization"] = `Bearer ${accessToken}`;
+              const response = await axios.request(error.config);
+              return response;
+            } catch (error) {
+              if (error.response?.status === 401) {
+                logout();
+                navigate("/login");
               }
             }
           }
-
-          else{
-            let retryCount = 0;
-            while (retryCount < 4) {
-              await sleep(5000); // Sleep for 5 seconds
-              retryCount++;
-              try {
-                const response = await axios.request(error.config);
-                return response;
-              } catch (error) {
-                if (retryCount === 3) {
-                  setErrorData({
-                    title: "There was an error on web connection, please: ",
-                    list: [
-                      "Refresh the page",
-                      "Use a new flow tab",
-                      "Check if the backend is up",
-                      "Endpoint: " + error.config?.url,
-                    ],
-                  });
-                  return Promise.reject(error);
-                }
+        } else {
+          let retryCount = 0;
+          while (retryCount < 4) {
+            await sleep(5000); // Sleep for 5 seconds
+            retryCount++;
+            try {
+              const response = await axios.request(error.config);
+              return response;
+            } catch (error) {
+              if (retryCount === 3) {
+                setErrorData({
+                  title: "There was an error on web connection, please: ",
+                  list: [
+                    "Refresh the page",
+                    "Use a new flow tab",
+                    "Check if the backend is up",
+                    "Endpoint: " + error.config?.url,
+                  ],
+                });
+                return Promise.reject(error);
               }
             }
           }
+        }
       }
     );
 
     // Request interceptor to add access token to every request
     const requestInterceptor = api.interceptors.request.use(
       (config) => {
-        
         if (accessToken) {
           config.headers["Authorization"] = `Bearer ${accessToken}`;
         }
-        
-        if(
-          config?.url?.includes("https://raw.githubusercontent.com/logspace-ai/langflow_examples/main/examples") ||
-          config?.url?.includes("https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples"))
-          {
+
+        if (
+          config?.url?.includes(
+            "https://raw.githubusercontent.com/logspace-ai/langflow_examples/main/examples"
+          ) ||
+          config?.url?.includes(
+            "https://api.github.com/repos/logspace-ai/langflow_examples/contents/examples"
+          ) ||
+          config?.url?.includes(
+            "https://api.github.com/repos/logspace-ai/langflow"
+          )
+        ) {
           delete config.headers["Authorization"];
         }
 
diff --git a/src/frontend/src/controllers/API/index.ts b/src/frontend/src/controllers/API/index.ts
index 0fc57d357..5e66b6241 100644
--- a/src/frontend/src/controllers/API/index.ts
+++ b/src/frontend/src/controllers/API/index.ts
@@ -1,7 +1,13 @@
 import { AxiosResponse } from "axios";
 import { ReactFlowJsonObject } from "reactflow";
 import { api } from "../../controllers/API/api";
-import { APIObjectType, LoginAuthType, LoginType, sendAllProps } from "../../types/api/index";
+import {
+  APIObjectType,
+  LoginType,
+  Users,
+  sendAllProps,
+} from "../../types/api/index";
+import { UserInputType } from "../../types/components";
 import { FlowStyleType, FlowType } from "../../types/flow";
 import {
   APIClassType,
@@ -347,9 +353,7 @@ export async function postCustomComponent(
   return await api.post(`/api/v1/custom_component`, { code });
 }
 
-export async function onLogin(
-  user: LoginType
-) {
+export async function onLogin(user: LoginType) {
   try {
     const response = await api.post(
       "http://localhost:7860/login",
@@ -373,9 +377,7 @@ export async function onLogin(
   }
 }
 
-export async function renewAccessToken(
-  token: string
-){
+export async function renewAccessToken(token: string) {
   try {
     return await api.post(`http://localhost:7860/refresh?token=${token}`);
   } catch (error) {
@@ -384,4 +386,64 @@ export async function renewAccessToken(
   }
 }
 
+export async function getUsers(): Promise<Users> {
+  try {
+    return await api.get(`http://localhost:7860/user`);
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
 
+export async function addUser(user: UserInputType): Promise<Users> {
+  try {
+    const res = await api.post(`http://localhost:7860/user`, user);
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
+
+export async function getUsersPage(
+  skip: number,
+  limit: number
+): Promise<[Users]> {
+  try {
+    const res = await api.get(
+      `http://localhost:7860/users?skip=${skip}&limit=${limit}`
+    );
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
+
+export async function deleteUser(user_id: string) {
+  try {
+    const res = await api.delete(`http://localhost:7860/user/${user_id}`);
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
+
+export async function updateUser(user_id: string, user: Users) {
+  try {
+    const res = await api.patch(`http://localhost:7860/user/${user_id}`, user);
+    if (res.status === 200) {
+      return res.data;
+    }
+  } catch (error) {
+    console.log("Error:", error);
+    throw error;
+  }
+}
diff --git a/src/frontend/src/modals/UserManagementModal/index.tsx b/src/frontend/src/modals/UserManagementModal/index.tsx
index 22595faf3..b5d6194dd 100644
--- a/src/frontend/src/modals/UserManagementModal/index.tsx
+++ b/src/frontend/src/modals/UserManagementModal/index.tsx
@@ -1,7 +1,14 @@
 import * as Form from "@radix-ui/react-form";
+import { Eye, EyeOff } from "lucide-react";
 import { useEffect, useState } from "react";
 import { Button } from "../../components/ui/button";
-import { UserManagementType } from "../../types/components";
+import { Checkbox } from "../../components/ui/checkbox";
+import { CONTROL_NEW_USER } from "../../constants/constants";
+import {
+  UserInputType,
+  UserManagementType,
+  inputHandlerEventType,
+} from "../../types/components";
 import { nodeIconsLucide } from "../../utils/styleUtils";
 import BaseModal from "../baseModal";
 
@@ -17,18 +24,30 @@ export default function UserManagementModal({
   onConfirm,
 }: UserManagementType) {
   const Icon: any = nodeIconsLucide[icon];
+  const [pwdVisible, setPwdVisible] = useState(false);
+  const [confirmPwdVisible, setConfirmPwdVisible] = useState(false);
 
   const [open, setOpen] = useState(false);
 
   const [password, setPassword] = useState(data?.password ?? "");
-  const [username, setUserName] = useState(data?.user ?? "");
+  const [username, setUserName] = useState(data?.username ?? "");
   const [confirmPassword, setConfirmPassword] = useState(data?.password ?? "");
+  const [isDisabled, setIsDisabled] = useState(data?.is_disabled ?? false);
+  const [isSuperUser, setIsSuperUser] = useState(data?.is_superuser ?? false);
+
+  const [inputState, setInputState] = useState<UserInputType>(CONTROL_NEW_USER);
+
+  function handleInput({
+    target: { name, value },
+  }: inputHandlerEventType): void {
+    setInputState((prev) => ({ ...prev, [name]: value }));
+  }
 
   useEffect(() => {
     if (!data) {
       resetForm();
     }
-  }, [data, open]);
+  }, [open]);
 
   function resetForm() {
     setPassword("");
@@ -54,10 +73,8 @@ export default function UserManagementModal({
               event.preventDefault();
               return;
             }
-
-            const data = Object.fromEntries(new FormData(event.currentTarget));
             resetForm();
-            onConfirm(index ?? -1, data);
+            onConfirm(1, inputState);
             setOpen(false);
             event.preventDefault();
           }}
@@ -78,8 +95,9 @@ export default function UserManagementModal({
               </div>
               <Form.Control asChild>
                 <input
-                  onChange={(input) => {
-                    setUserName(input.target.value);
+                  onChange={({ target: { value } }) => {
+                    handleInput({ target: { name: "username", value } });
+                    setUserName(value);
                   }}
                   value={username}
                   className="primary-input"
@@ -104,21 +122,38 @@ export default function UserManagementModal({
                       justifyContent: "space-between",
                     }}
                   >
-                    <Form.Label className="data-[invalid]:label-invalid">
+                    <Form.Label className="data-[invalid]:label-invalid flex">
                       Password{" "}
-                      <span className="font-medium text-destructive">*</span>
+                      <span className="ml-1 mr-1 font-medium text-destructive">
+                        *
+                      </span>
+                      {pwdVisible && (
+                        <Eye
+                        onClick={() => setPwdVisible(!pwdVisible)}
+                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                      )}
+
+                        {!pwdVisible && (
+                        <EyeOff
+                        onClick={() => setPwdVisible(!pwdVisible)}
+                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                      )}
+
                     </Form.Label>
                   </div>
                   <Form.Control asChild>
                     <input
-                      onChange={(input) => {
-                        setPassword(input.target.value);
+                      onChange={({ target: { value } }) => {
+                        handleInput({ target: { name: "password", value } });
+                        setPassword(value);
                       }}
                       value={password}
                       className="primary-input"
                       required
+                      type={pwdVisible ? "text" : "password"}
                     />
                   </Form.Control>
+
                   <Form.Message className="field-invalid" match="valueMissing">
                     Please enter a password
                   </Form.Message>
@@ -143,9 +178,22 @@ export default function UserManagementModal({
                       justifyContent: "space-between",
                     }}
                   >
-                    <Form.Label className="data-[invalid]:label-invalid">
+                    <Form.Label className="data-[invalid]:label-invalid flex">
                       Confirm password{" "}
-                      <span className="font-medium text-destructive">*</span>
+                      <span className="ml-1 mr-1 font-medium text-destructive">
+                        *
+                      </span>
+                      {confirmPwdVisible && (
+                        <Eye
+                        onClick={() => setConfirmPwdVisible(!confirmPwdVisible)}
+                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                      )}
+
+                        {!confirmPwdVisible && (
+                        <EyeOff
+                        onClick={() => setConfirmPwdVisible(!confirmPwdVisible)}
+                        className="h-5 cursor-pointer" strokeWidth={1.5} />
+                      )}
                     </Form.Label>
                   </div>
                   <Form.Control asChild>
@@ -156,6 +204,7 @@ export default function UserManagementModal({
                       value={confirmPassword}
                       className="primary-input"
                       required
+                      type={confirmPwdVisible ? "text" : "password"}
                     />
                   </Form.Control>
                   <Form.Message className="field-invalid" match="valueMissing">
@@ -164,57 +213,49 @@ export default function UserManagementModal({
                 </Form.Field>
               </div>
             </div>
+            <div className="flex gap-8">
+              <Form.Field name="is_disabled">
+                <div>
+                  <Form.Label className="data-[invalid]:label-invalid mr-3">
+                    Disabled
+                  </Form.Label>
+                  <Form.Control asChild>
+                    <Checkbox
+                      value={isDisabled}
+                      checked={isDisabled}
+                      id="is_disabled"
+                      className="relative top-0.5"
+                      onCheckedChange={(value) => {
+                        handleInput({ target: { name: "is_disabled", value } });
+                        setIsDisabled(value);
+                      }}
+                    />
+                  </Form.Control>
+                </div>
+              </Form.Field>
 
-            {/* 
-            <Form.Field name="email">
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "baseline",
-                  justifyContent: "space-between",
-                }}
-              >
-                <Form.Label className="data-[invalid]:label-invalid">
-                  Email <span className="font-medium text-destructive">*</span>
-                </Form.Label>
-                <Form.Message className="field-invalid" match="valueMissing">
-                  Please enter your email
-                </Form.Message>
-                <Form.Message className="field-invalid" match="typeMismatch">
-                  Please provide a valid email
-                </Form.Message>
-              </div>
-              <Form.Control asChild>
-                <input className="primary-input" type="email" required />
-              </Form.Control>
-            </Form.Field> */}
-
-            {/* 
-            <Form.Field name="birth">
-              <div
-                style={{
-                  display: "flex",
-                  alignItems: "baseline",
-                  justifyContent: "space-between",
-                }}
-              >
-                <Form.Label className="data-[invalid]:label-invalid">
-                  Date of birth{" "}
-                  <span className="font-medium text-destructive">*</span>
-                </Form.Label>
-                <Form.Message className="field-invalid" match="valueMissing">
-                  Please enter your date of birth
-                </Form.Message>
-              </div>
-              <Form.Control asChild>
-                <input
-                  type="date"
-                  className="primary-input"
-                  required
-                  max={new Date().toISOString().split("T")[0]}
-                />
-              </Form.Control>
-            </Form.Field> */}
+              <Form.Field name="is_superuser">
+                <div>
+                  <Form.Label className="data-[invalid]:label-invalid mr-3">
+                    Superuser
+                  </Form.Label>
+                  <Form.Control asChild>
+                    <Checkbox
+                      checked={isSuperUser}
+                      value={isSuperUser}
+                      id="is_superuser"
+                      className="relative top-0.5"
+                      onCheckedChange={(value) => {
+                        handleInput({
+                          target: { name: "is_superuser", value },
+                        });
+                        setIsSuperUser(value);
+                      }}
+                    />
+                  </Form.Control>
+                </div>
+              </Form.Field>
+            </div>
           </div>
 
           <div className="float-right">
diff --git a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
index 74cc75d07..bcc545e9b 100644
--- a/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/LoginPage/index.tsx
@@ -1,12 +1,49 @@
+import { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "../../../components/ui/button";
 import { Input } from "../../../components/ui/input";
+import { CONTROL_LOGIN_STATE } from "../../../constants/constants";
+import { alertContext } from "../../../contexts/alertContext";
+import { AuthContext } from "../../../contexts/authContext";
+import { onLogin } from "../../../controllers/API";
+import { LoginType } from "../../../types/api";
+import {
+  inputHandlerEventType,
+  loginInputStateType,
+} from "../../../types/components";
 
 export default function LoginAdminPage() {
   const navigate = useNavigate();
 
-  function loginAdmin() {
-    navigate("/admin/");
+  const [inputState, setInputState] =
+    useState<loginInputStateType>(CONTROL_LOGIN_STATE);
+  const { login } = useContext(AuthContext);
+
+  const { password, username } = inputState;
+  const { setErrorData } = useContext(alertContext);
+
+  function handleInput({
+    target: { name, value },
+  }: inputHandlerEventType): void {
+    setInputState((prev) => ({ ...prev, [name]: value }));
+  }
+
+  function signIn() {
+    const user: LoginType = {
+      username: username,
+      password: password,
+    };
+    onLogin(user)
+      .then((user) => {
+        login(user.access_token, user.refresh_token);
+        navigate("/admin/");
+      })
+      .catch((error) => {
+        setErrorData({
+          title: "Error signing in",
+          list: [error["response"]["data"]["detail"]],
+        });
+      });
   }
 
   return (
@@ -14,11 +51,24 @@ export default function LoginAdminPage() {
       <div className="flex w-72 flex-col items-center justify-center gap-2">
         <span className="mb-4 text-5xl">⛓️</span>
         <span className="mb-6 text-2xl font-semibold text-primary">Admin</span>
-        <Input className="bg-background" placeholder="Email address" />
-        <Input className="bg-background" placeholder="Password" />
+        <Input
+          onChange={({ target: { value } }) => {
+            handleInput({ target: { name: "username", value } });
+          }}
+          className="bg-background"
+          placeholder="Username"
+        />
+        <Input
+          type="password"
+          onChange={({ target: { value } }) => {
+            handleInput({ target: { name: "password", value } });
+          }}
+          className="bg-background"
+          placeholder="Password"
+        />
         <Button
           onClick={() => {
-            loginAdmin();
+            signIn();
           }}
           variant="default"
           className="w-full"
diff --git a/src/frontend/src/pages/AdminPage/index.tsx b/src/frontend/src/pages/AdminPage/index.tsx
index e598af8b4..4dec9ced2 100644
--- a/src/frontend/src/pages/AdminPage/index.tsx
+++ b/src/frontend/src/pages/AdminPage/index.tsx
@@ -1,10 +1,11 @@
 import _ from "lodash";
 import { X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState,useContext } from "react";
 import PaginatorComponent from "../../components/PaginatorComponent";
 import ShadTooltip from "../../components/ShadTooltipComponent";
 import IconComponent from "../../components/genericIconComponent";
 import { Button } from "../../components/ui/button";
+import { Checkbox } from "../../components/ui/checkbox";
 import { Input } from "../../components/ui/input";
 import {
   Table,
@@ -14,237 +15,125 @@ import {
   TableHeader,
   TableRow,
 } from "../../components/ui/table";
+import {
+  addUser,
+  deleteUser,
+  getUsersPage,
+  updateUser,
+} from "../../controllers/API";
 import ConfirmationModal from "../../modals/ConfirmationModal";
 import UserManagementModal from "../../modals/UserManagementModal";
+import { alertContext } from "../../contexts/alertContext";
 
 export default function AdminPage() {
   const [inputValue, setInputValue] = useState("");
 
   const [size, setPageSize] = useState(10);
-  const [index, setPageIndex] = useState(1);
+  const [index, setPageIndex] = useState(0);
+  const [loadingUsers, setLoadingUsers] = useState(true);
+  const { setErrorData, setSuccessData } = useContext(alertContext);
 
-  const userList = useRef([
-    {
-      user: generateRandomString(50),
-      email: generateRandomString(50) + "@example.com",
-      password: generateRandomString(50),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-    {
-      user: generateRandomString(8),
-      email: generateRandomString(10) + "@example.com",
-      password: generateRandomString(12),
-      register_date: generateRandomDate(),
-    },
-  ]);
+  const userList = useRef([]);
+
+  useEffect(() => {
+    setTimeout(() => {
+      getUsers();
+    }, 500);
+  }, []);
 
   const [filterUserList, setFilterUserList] = useState(userList.current);
 
-  function generateRandomString(length) {
-    const characters =
-      "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
-    let result = "";
-    for (let i = 0; i < length; i++) {
-      const randomIndex = Math.floor(Math.random() * characters.length);
-      result += characters.charAt(randomIndex);
-    }
-    return result;
+  function getUsers() {
+    setLoadingUsers(true);
+    getUsersPage(index, size)
+      .then((users) => {
+        userList.current = users;
+        setFilterUserList(users);
+        setLoadingUsers(false);
+      })
+      .catch((error) => {
+        setLoadingUsers(false);
+      });
   }
 
-  function generateRandomDate() {
-    const start = new Date(2010, 0, 1);
-    const end = new Date();
-    const randomTimestamp =
-      start.getTime() + Math.random() * (end.getTime() - start.getTime());
-    const randomDate = new Date(randomTimestamp);
-
-    const options = { year: "numeric", month: "short", day: "numeric" };
-    return randomDate.toLocaleDateString("en-US");
-  }
-
-  const [editUser, setEditUser] = useState(-1);
-  const [editedUser, setEditedUser] = useState("");
-  const [modalEditOpen, setModalEditOpen] = useState(false);
-  const [modalDeleteOpen, setModalDeleteOpen] = useState(false);
-
-  useEffect(() => {
-    resetFilter();
-  }, []);
-
-  const handleInputChange = (event, index) => {
-    const user = _.cloneDeepWith(userList.current);
-    user[index].password = event.target.value;
-    userList.current = user;
-
-    const userFilter = _.cloneDeepWith(filterUserList);
-    userFilter[index].password = event.target.value;
-    setFilterUserList(userFilter);
-
-    setEditedUser(event.target.value);
-  };
-
   function handleChangePagination(pageIndex: number, pageSize: number) {
-    setPageIndex(pageIndex);
-    setPageSize(pageSize);
-
-    const startIndex = (pageIndex - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    const newList = userList.current.slice(startIndex, endIndex);
-
-    setFilterUserList(newList);
+    setLoadingUsers(true);
+    getUsersPage(pageIndex, pageSize)
+      .then((users) => {
+        userList.current = users;
+        setFilterUserList(users);
+        setLoadingUsers(false);
+      })
+      .catch((error) => {
+        setLoadingUsers(false);
+      });
   }
 
   function resetFilter() {
-    setFilterUserList(userList.current);
-    setPageIndex(1);
+    setPageIndex(0);
     setPageSize(10);
-
-    const startIndex = (index - 1) * size;
-    const endIndex = index + size - 1;
-    const newList = userList.current.slice(startIndex, endIndex);
-
-    console.log(userList.current);
-
-    setFilterUserList(newList);
+    getUsers();
   }
 
   function handleFilterUsers(input: string) {
     setInputValue(input);
 
     if (input === "") {
-      resetFilter();
+      setFilterUserList(userList.current);
     } else {
-      const filteredList = userList.current.filter(
-        (user) =>
-          user.user.toLowerCase().includes(input.toLowerCase()) ||
-          user.email.toLowerCase().includes(input.toLowerCase())
+      const filteredList = userList.current.filter((user) =>
+        user.username.toLowerCase().includes(input.toLowerCase())
       );
       setFilterUserList(filteredList);
     }
   }
 
-  function handleDeleteUser(index) {
-    const user = _.cloneDeepWith(userList.current);
-    user.splice(index, 1);
-    userList.current = user;
-
-    const userFilter = _.cloneDeepWith(filterUserList);
-    userFilter.splice(index, 1);
-    setFilterUserList(userFilter);
-
-    resetFilter();
+  function handleDeleteUser(user) {
+    deleteUser(user.id)
+      .then((res) => {
+        resetFilter();
+        setSuccessData({
+          title: "Success! User deleted!"
+        });
+      })
+      .catch((error) => {
+        setErrorData({
+          title: "Error on delete user",
+          list: [error["response"]["data"]["detail"]],
+        });
+      });
   }
 
-  function handleEditUser(index, user) {
-    const newUser = _.cloneDeepWith(userList.current);
-    newUser[index].password = user.password;
-    newUser[index].user = user.username;
-    userList.current = newUser;
-    resetFilter();
+  function handleEditUser(userId, user) {
+    updateUser(userId, user)
+      .then((res) => {
+        resetFilter();
+        setSuccessData({
+          title: "Success! User edited!"
+        });
+      })
+      .catch((error) => {
+        setErrorData({
+          title: "Error on edit user",
+          list: [error["response"]["data"]["detail"]],
+        });
+      });
   }
 
   function handleNewUser(user) {
-    const newUser = {
-      user: user.username,
-      email: generateRandomString(50) + "@example.com",
-      password: user.password,
-      register_date: generateRandomDate(),
-    };
-
-    userList.current.unshift(newUser);
-    console.log(userList.current);
-
-    resetFilter();
+    addUser(user)
+      .then((res) => {
+        resetFilter();
+        setSuccessData({
+          title: "Success! New user added!"
+        });
+      })
+      .catch((error) => {
+        setErrorData({
+          title: "Error on add new user",
+          list: [error["response"]["data"]["detail"]],
+        });
+      });
   }
 
   return (
@@ -265,85 +154,138 @@ export default function AdminPage() {
                 <div className="flex items-center space-x-2"></div>
               </div>
 
-              {userList.current.length === 0 && (
+              {userList.current.length === 0 && !loadingUsers && (
                 <>
                   <div className="flex items-center justify-between">
-                    <h2>There's no users left :)</h2>
+                    <h2>There's no users registered :)</h2>
                   </div>
                 </>
               )}
-              {userList.current.length > 0 && (
-                <>
-                  <div className="flex items-center justify-between">
-                    <div className="flex flex-1 items-center space-x-2">
-                      <Input
-                        value={inputValue}
-                        placeholder="Filter users..."
-                        className="h-8 w-[150px] lg:w-[250px]"
-                        onChange={(e) => handleFilterUsers(e.target.value)}
-                      />
-                      {inputValue.length > 0 && (
-                        <Button
-                          onClick={() => {
-                            resetFilter();
-                            setInputValue("");
-                          }}
-                          variant="ghost"
-                          className="h-8 px-2 lg:px-3"
-                        >
-                          Reset
-                          <X className="ml-2 h-4 w-4" />
-                        </Button>
-                      )}
-                    </div>
-                    <div>
-                      <UserManagementModal
-                        title="New User"
-                        titleHeader={"Add a new user"}
-                        cancelText="Cancel"
-                        confirmationText="Save"
-                        icon={"UserPlus2"}
-                        onConfirm={(index, user) => {
-                          handleNewUser(user);
+              <>
+                <div className="flex items-center justify-between">
+                  <div className="flex flex-1 items-center space-x-2">
+                    <Input
+                      value={inputValue}
+                      placeholder="Filter users..."
+                      className="h-8 w-[150px] lg:w-[250px]"
+                      onChange={(e) => handleFilterUsers(e.target.value)}
+                    />
+                    {inputValue.length > 0 && (
+                      <Button
+                        onClick={() => {
+                          setInputValue("");
+                          setFilterUserList(userList.current);
                         }}
+                        variant="ghost"
+                        className="h-8 px-2 lg:px-3"
                       >
-                        <Button>New User</Button>
-                      </UserManagementModal>
-                    </div>
+                        Reset
+                        <X className="ml-2 h-4 w-4" />
+                      </Button>
+                    )}
                   </div>
-                  <div
-                    className="overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted 
-            custom-scroll"
-                  >
-                    <Table className="table-fixed bg-muted outline-1 ">
-                      <TableHeader>
-                        <TableRow>
-                          <TableHead className="h-10">User</TableHead>
-                          <TableHead className="h-10">Password</TableHead>
-                          <TableHead className="h-10 w-[100px]  text-right"></TableHead>
-                        </TableRow>
-                      </TableHeader>
+                  <div>
+                    <UserManagementModal
+                      title="New User"
+                      titleHeader={"Add a new user"}
+                      cancelText="Cancel"
+                      confirmationText="Save"
+                      icon={"UserPlus2"}
+                      onConfirm={(index, user) => {
+                        handleNewUser(user);
+                      }}
+                    >
+                      <Button>New User</Button>
+                    </UserManagementModal>
+                  </div>
+                </div>
+                {loadingUsers && (
+                  <div>
+                    <strong>Loading...</strong>
+                  </div>
+                )}
+                <div
+                  className={
+                    "overflow-scroll overflow-x-hidden rounded-md border-2 bg-muted custom-scroll max-h-[26rem]" +
+                    (loadingUsers ? " border-0" : "")
+                  }
+                >
+                  <Table className={"table-fixed bg-muted outline-1"}>
+                    <TableHeader
+                      className={
+                        loadingUsers
+                          ? "hidden"
+                          : "table-fixed bg-muted outline-1"
+                      }
+                    >
+                      <TableRow>
+                        <TableHead className="h-10">Id</TableHead>
+                        <TableHead className="h-10">Username</TableHead>
+                        <TableHead className="h-10">Disabled</TableHead>
+                        <TableHead className="h-10">Superuser</TableHead>
+                        <TableHead className="h-10">Created At</TableHead>
+                        <TableHead className="h-10">Updated At</TableHead>
+                        <TableHead className="h-10 w-[100px]  text-right"></TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    {!loadingUsers && (
                       <TableBody>
                         {filterUserList.map((user, index) => (
-                          <TableRow key={user.user}>
+                          <TableRow key={index}>
                             <TableCell className="truncate py-2 font-medium">
-                              {user.user}
+                              <ShadTooltip content={user.id}>
+                                <span className="cursor-default">
+                                  {user.id}
+                                </span>
+                              </ShadTooltip>
                             </TableCell>
                             <TableCell className="truncate py-2">
-                              {user.password}
+                              <ShadTooltip content={user.username}>
+                                <span className="cursor-default">
+                                  {user.username}
+                                </span>
+                              </ShadTooltip>
+                            </TableCell>
+                            <TableCell className="relative left-5 truncate py-2">
+                              <Checkbox
+                                id="is_disabled"
+                                checked={user.is_disabled}
+                                disabled
+                              />
+                            </TableCell>
+                            <TableCell className="relative left-5 truncate py-2">
+                              <Checkbox
+                                id="is_superuser"
+                                checked={user.is_superuser}
+                                disabled
+                              />
+                            </TableCell>
+                            <TableCell className="truncate py-2 ">
+                              {
+                                new Date(user.create_at)
+                                  .toISOString()
+                                  .split("T")[0]
+                              }
+                            </TableCell>
+                            <TableCell className="truncate py-2">
+                              {
+                                new Date(user.updated_at)
+                                  .toISOString()
+                                  .split("T")[0]
+                              }
                             </TableCell>
                             <TableCell className="flex w-[100px] py-2 text-right">
                               <div className="flex">
                                 <UserManagementModal
                                   title="Edit"
-                                  titleHeader={`${user.user}`}
+                                  titleHeader={`${user.id}`}
                                   cancelText="Cancel"
                                   confirmationText="Edit"
                                   icon={"UserPlus2"}
                                   data={user}
                                   index={index}
-                                  onConfirm={(index, user) => {
-                                    handleEditUser(index, user);
+                                  onConfirm={(index, editUser) => {
+                                    handleEditUser(user.id, editUser);
                                   }}
                                 >
                                   <ShadTooltip content="Edit" side="top">
@@ -365,7 +307,7 @@ export default function AdminPage() {
                                   data={user}
                                   index={index}
                                   onConfirm={(index, user) => {
-                                    handleDeleteUser(index);
+                                    handleDeleteUser(user);
                                   }}
                                 >
                                   <ShadTooltip content="Delete" side="top">
@@ -380,18 +322,19 @@ export default function AdminPage() {
                           </TableRow>
                         ))}
                       </TableBody>
-                    </Table>
-                  </div>
-                  <PaginatorComponent
-                    pageIndex={index}
-                    pageSize={size}
-                    totalRowsCount={filterUserList.length}
-                    paginate={(pageIndex, pageSize) => {
-                      handleChangePagination(pageSize, pageIndex);
-                    }}
-                  ></PaginatorComponent>
-                </>
-              )}
+                    )}
+                  </Table>
+                </div>
+
+                <PaginatorComponent
+                  pageIndex={index}
+                  pageSize={size}
+                  totalRowsCount={filterUserList.length}
+                  paginate={(pageIndex, pageSize) => {
+                    handleChangePagination(pageSize, pageIndex);
+                  }}
+                ></PaginatorComponent>
+              </>
             </div>
           </div>
         </div>
diff --git a/src/frontend/src/pages/loginPage/index.tsx b/src/frontend/src/pages/loginPage/index.tsx
index de9f9342f..aaa07096a 100644
--- a/src/frontend/src/pages/loginPage/index.tsx
+++ b/src/frontend/src/pages/loginPage/index.tsx
@@ -6,15 +6,14 @@ import InputComponent from "../../components/inputComponent";
 import { Button } from "../../components/ui/button";
 import { Input } from "../../components/ui/input";
 import { CONTROL_LOGIN_STATE } from "../../constants/constants";
+import { alertContext } from "../../contexts/alertContext";
+import { AuthContext } from "../../contexts/authContext";
+import { onLogin } from "../../controllers/API";
+import { LoginType } from "../../types/api";
 import {
   inputHandlerEventType,
   loginInputStateType,
 } from "../../types/components";
-import { onLogin } from "../../controllers/API";
-import { LoginType } from "../../types/api";
-import { AuthContext } from "../../contexts/authContext";
-import { alertContext } from "../../contexts/alertContext";
-import { error } from "console";
 
 export default function LoginPage(): JSX.Element {
   const [inputState, setInputState] =
@@ -31,25 +30,22 @@ export default function LoginPage(): JSX.Element {
     setInputState((prev) => ({ ...prev, [name]: value }));
   }
 
-  function signIn(){
-
+  function signIn() {
     const user: LoginType = {
       username: username,
-      password: password
+      password: password,
     };
-
-      onLogin(
-        user
-      ).then((user) => {
+    onLogin(user)
+      .then((user) => {
         login(user.access_token, user.refresh_token);
         navigate("/");
-      }).catch(error => {
+      })
+      .catch((error) => {
         setErrorData({
           title: "Error signing in",
-          list: [error['response']['data']['detail']],
-        })
+          list: [error["response"]["data"]["detail"]],
+        });
       });
-
   }
 
   return (
@@ -137,9 +133,9 @@ export default function LoginPage(): JSX.Element {
           </div>
           <div className="w-full">
             <Form.Submit asChild>
-              <Button
-              onClick={()=>signIn()}
-              className="mr-3 mt-6 w-full">Sign in</Button>
+              <Button onClick={() => signIn()} className="mr-3 mt-6 w-full">
+                Sign in
+              </Button>
             </Form.Submit>
           </div>
           <div className="w-full">
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index db0c47770..4875478f9 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -1,5 +1,6 @@
 import { Route, Routes } from "react-router-dom";
 import { ProtectedRoute } from "./components/authGuard";
+import { ProtectedLoginRoute } from "./components/authLoginGuard";
 import AdminPage from "./pages/AdminPage";
 import LoginAdminPage from "./pages/AdminPage/LoginPage";
 import CommunityPage from "./pages/CommunityPage";
@@ -47,9 +48,30 @@ const Router = () => {
         }
       />
 
-      <Route path="/login" element={<LoginPage />} />
-      <Route path="/signup" element={<SignUp />} />
-      <Route path="/login/admin" element={<LoginAdminPage />} />
+      <Route
+        path="/login"
+        element={
+          <ProtectedLoginRoute>
+            <LoginPage />
+          </ProtectedLoginRoute>
+        }
+      />
+      <Route
+        path="/signup"
+        element={
+          <ProtectedLoginRoute>
+            <SignUp />
+          </ProtectedLoginRoute>
+        }
+      />
+      <Route
+        path="/login/admin"
+        element={
+          <ProtectedLoginRoute>
+            <LoginAdminPage />
+          </ProtectedLoginRoute>
+        }
+      />
 
       <Route
         path="/admin"
diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts
index b355a71e4..9dafae733 100644
--- a/src/frontend/src/types/api/index.ts
+++ b/src/frontend/src/types/api/index.ts
@@ -77,3 +77,12 @@ export type LoginAuthType = {
   refresh_token: string;
   token_type?: string;
 };
+
+export type Users = {
+  id: string;
+  username: string;
+  is_disabled: boolean;
+  is_superuser: boolean;
+  create_at: Date;
+  updated_at: Date;
+};
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index aa3de1bca..cd0844fb8 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -182,7 +182,7 @@ export type signUpInputStateType = {
 
 export type inputHandlerEventType = {
   target: {
-    value: string;
+    value: string | boolean;
     name: string;
   };
 };
@@ -224,3 +224,10 @@ export type loginInputStateType = {
   username: string;
   password: string;
 };
+
+export type UserInputType = {
+  username: string;
+  password: string;
+  is_disabled:boolean;
+  is_superuser: boolean;
+};
diff --git a/src/frontend/src/utils/styleUtils.ts b/src/frontend/src/utils/styleUtils.ts
index 79c1603d7..8ae5742a3 100644
--- a/src/frontend/src/utils/styleUtils.ts
+++ b/src/frontend/src/utils/styleUtils.ts
@@ -19,6 +19,8 @@ import {
   Edit,
   Eraser,
   ExternalLink,
+  Eye,
+  EyeOff,
   File,
   FileDown,
   FileSearch,
@@ -288,4 +290,6 @@ export const nodeIconsLucide = {
   ChevronsLeft,
   FaGithub,
   FaApple,
+  EyeOff,
+  Eye,
 };