diff --git a/src/app/[locale]/unauthorized/page.tsx b/src/app/[locale]/unauthorized/page.tsx
new file mode 100644
index 00000000..5b258f62
--- /dev/null
+++ b/src/app/[locale]/unauthorized/page.tsx
@@ -0,0 +1,27 @@
+'use client';
+import React from 'react';
+import { useRouter } from 'next/navigation';
+
+const UnauthorizedPage = () => {
+  const router = useRouter();
+  const handleGoBack = () => {
+    router.push('/dashboard');
+  };
+
+  return (
+    <div className='flex min-h-screen flex-col items-center justify-center'>
+      <div className='rounded-lg p-8 text-center shadow-lg'>
+        <h1 className='mb-4 text-4xl font-bold text-red-600'>Acceso No Autorizado</h1>
+        <p className='mb-6 text-xl text-gray-700'>Lo sentimos, no tienes permiso para acceder a esta página.</p>
+        <button
+          onClick={handleGoBack}
+          className='rounded bg-blue-500 px-6 py-2 text-white transition-colors hover:bg-blue-600'
+        >
+          Volver
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default UnauthorizedPage;
diff --git a/src/app/[locale]/users/page.tsx b/src/app/[locale]/users/page.tsx
index 371b9a55..89678298 100644
--- a/src/app/[locale]/users/page.tsx
+++ b/src/app/[locale]/users/page.tsx
@@ -2,6 +2,7 @@ import React, { Suspense } from 'react';
 
 import { unstable_setRequestLocale } from 'next-intl/server';
 
+import { paginationInitialParams } from '@/features/items/constants/paginationInitialParams';
 import { LoaderStarsWars } from '@/features/shared/atoms/loader/LoaderStarsWars';
 import { UsersTemplate } from '@/features/users/template/UsersTemplate';
 import { PrivateLayout } from '@/layout/private-layout/PrivateLayout';
@@ -16,8 +17,13 @@ export default async function Page({ searchParams, params: { locale } }: Props)
   const params = new URLSearchParams(searchParams);
 
   const queryParams: QueryParams = {
+    pagination: {
+      offset: params.get('pagination[offset]') ?? paginationInitialParams.offset,
+      limit: params.get('pagination[limit]') ?? paginationInitialParams.limit,
+    },
     filter: params,
   };
+
   unstable_setRequestLocale(locale);
 
   return (
diff --git a/src/app/[locale]/users/update/page.tsx b/src/app/[locale]/users/update/page.tsx
index e76924c1..89eb2b87 100644
--- a/src/app/[locale]/users/update/page.tsx
+++ b/src/app/[locale]/users/update/page.tsx
@@ -9,6 +9,7 @@ type Props = {
   readonly searchParams: { readonly [key: string]: string };
   readonly params: { locale: string };
 };
+
 export default function Page({ searchParams, params: { locale } }: Props) {
   const { id } = searchParams;
   unstable_setRequestLocale(locale);
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 3f81cf2a..264a9f6f 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -5,16 +5,20 @@ import React from 'react';
 import { NextUIProvider } from '@nextui-org/react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes';
 import { Bounce, ToastContainer } from 'react-toastify';
+
 import '../features/shared/atoms/toast/toast.css';
+import { UserProvider } from '@/contexts/UserContext';
 
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <NextUIProvider>
       <NextThemesProvider attribute='class' defaultTheme='dark'>
-        <main>
-          <ToastContainer autoClose={3000} transition={Bounce} theme={'dark'} />
-          {children}
-        </main>
+        <UserProvider>
+          <main>
+            <ToastContainer autoClose={3000} transition={Bounce} theme={'dark'} />
+            {children}
+          </main>
+        </UserProvider>
       </NextThemesProvider>
     </NextUIProvider>
   );
diff --git a/src/features/shared/actions/config.ts b/src/config/config.ts
similarity index 100%
rename from src/features/shared/actions/config.ts
rename to src/config/config.ts
diff --git a/src/contexts/UserContext.tsx b/src/contexts/UserContext.tsx
new file mode 100644
index 00000000..7b7e28ac
--- /dev/null
+++ b/src/contexts/UserContext.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import React, { createContext, useState, useContext } from 'react';
+import { StaticImageData } from 'next/image';
+
+import { images } from '@/features/shared/hooks/images';
+
+interface UserContextType {
+  avatar: StaticImageData | string;
+  handleSetAvatar: (avatar: string) => void;
+}
+
+const UserContext = createContext<UserContextType | undefined>(undefined);
+
+export function UserProvider({ children }: { children: React.ReactNode }) {
+  const { Avatar } = images();
+  const [avatar, setUserAvatar] = useState<StaticImageData | string>(Avatar);
+
+  const handleSetAvatar = (avatar: string): void => {
+    setUserAvatar(avatar);
+  };
+
+  return <UserContext.Provider value={{ avatar, handleSetAvatar }}>{children}</UserContext.Provider>;
+}
+
+export function useContextUser() {
+  const context = useContext(UserContext);
+
+  if (!context) throw new Error('Context not defined');
+
+  return context;
+}
diff --git a/src/features/auth/forgot-password/actions/forgotPasswordAction.ts b/src/features/auth/forgot-password/actions/forgotPasswordAction.ts
index fbe4e4e5..383db3b6 100644
--- a/src/features/auth/forgot-password/actions/forgotPasswordAction.ts
+++ b/src/features/auth/forgot-password/actions/forgotPasswordAction.ts
@@ -1,10 +1,10 @@
 'use server';
 
 import { env } from '@/config/api';
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 export const handleRecoverPassword = async (username: string) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
 
   const { error } = await supabase.auth.resetPasswordForEmail(username, {
     redirectTo: `${env.urlFront}/auth/update-password`,
diff --git a/src/features/auth/login/actions/loginAction.ts b/src/features/auth/login/actions/loginAction.ts
index ccdee655..aed794e3 100644
--- a/src/features/auth/login/actions/loginAction.ts
+++ b/src/features/auth/login/actions/loginAction.ts
@@ -4,12 +4,12 @@ import { redirect, RedirectType } from 'next/navigation';
 
 import { getLang } from '@/features/shared/hooks/getLang';
 
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 import { ILoginForm } from '../interfaces/IloginForm';
 
 export const handleSignIn = async (data: ILoginForm) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
   const { lang } = getLang();
 
   const { error } = await supabase.auth.signInWithPassword({
diff --git a/src/features/auth/recovery-code/actions/recoveryCodeAction.ts b/src/features/auth/recovery-code/actions/recoveryCodeAction.ts
index 848736d5..49632d7c 100644
--- a/src/features/auth/recovery-code/actions/recoveryCodeAction.ts
+++ b/src/features/auth/recovery-code/actions/recoveryCodeAction.ts
@@ -4,12 +4,12 @@ import { redirect, RedirectType } from 'next/navigation';
 
 import { getLang } from '@/features/shared/hooks/getLang';
 
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 import { IrecoveryCode } from '../interfaces/IrecoveryCode';
 
 export const handleRecoveryCode = async (email: string, data: IrecoveryCode) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
   const { lang } = getLang();
 
   const { error } = await supabase.auth.verifyOtp({ email, token: data.code, type: 'recovery' });
diff --git a/src/features/auth/register/actions/registerAction.ts b/src/features/auth/register/actions/registerAction.ts
index effa3dad..90c07efa 100644
--- a/src/features/auth/register/actions/registerAction.ts
+++ b/src/features/auth/register/actions/registerAction.ts
@@ -4,10 +4,10 @@ import { redirect, RedirectType } from 'next/navigation';
 
 import { env } from '@/config/api';
 import { IRegisterForm } from '@/features/auth/register/interfaces/IRegisterForm';
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 export const handleSignUp = async (props: IRegisterForm) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
 
   const { error } = await supabase.auth.signUp({
     email: props.email,
diff --git a/src/features/auth/shared/actions/singOutAction.ts b/src/features/auth/shared/actions/singOutAction.ts
index 73ed1168..614020b9 100644
--- a/src/features/auth/shared/actions/singOutAction.ts
+++ b/src/features/auth/shared/actions/singOutAction.ts
@@ -2,10 +2,10 @@
 
 import { redirect, RedirectType } from 'next/navigation';
 
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 export const handleSignOut = async () => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
 
   const { error } = await supabase.auth.signOut();
 
diff --git a/src/features/auth/update-password/actions/updatePasswordAction.ts b/src/features/auth/update-password/actions/updatePasswordAction.ts
index ee04f08e..e895ee2d 100644
--- a/src/features/auth/update-password/actions/updatePasswordAction.ts
+++ b/src/features/auth/update-password/actions/updatePasswordAction.ts
@@ -2,10 +2,10 @@
 
 import { redirect, RedirectType } from 'next/navigation';
 
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 export const handleUpdatePassword = async (password: string, code: string) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
 
   await supabase.auth.exchangeCodeForSession(code);
 
diff --git a/src/features/items/actions/ItemAction.ts b/src/features/items/actions/ItemAction.ts
index 5176f759..6adbcfc4 100644
--- a/src/features/items/actions/ItemAction.ts
+++ b/src/features/items/actions/ItemAction.ts
@@ -2,8 +2,8 @@
 import { revalidatePath } from 'next/cache';
 import { redirect } from 'next/navigation';
 
+import { config } from '@/config/config';
 import { ItemPayload, ItemsResponse } from '@/features/items/interfaces/itemsResponse';
-import { config } from '@/features/shared/actions/config';
 import PayloadProps from '@/features/shared/interfaces/PayloadProps';
 import HttpService from '@/service/HttpService';
 import { HeadersContentType, IHttpParams } from '@/service/IHttpParams';
diff --git a/src/features/items/constants/paginationInitialParams.ts b/src/features/items/constants/paginationInitialParams.ts
index ce09b30e..99631095 100644
--- a/src/features/items/constants/paginationInitialParams.ts
+++ b/src/features/items/constants/paginationInitialParams.ts
@@ -1,6 +1,6 @@
 import { InitialPaginationParams } from '@/features/shared/interfaces/InitialPaginationParams';
 
 export const paginationInitialParams: InitialPaginationParams = {
-  limit: '5',
+  limit: '6',
   offset: '0',
 };
diff --git a/src/features/items/organisms/List.tsx b/src/features/items/organisms/List.tsx
index b4493c64..379437e4 100644
--- a/src/features/items/organisms/List.tsx
+++ b/src/features/items/organisms/List.tsx
@@ -87,12 +87,9 @@ export const List = ({ items, pagination }: Props) => {
     handleSearchType();
   }, [handleSearchType]);
 
-  // TODO: Analizar si esto es realmente necesario
   useEffect(() => {
-    if (items.length === 0) {
-      handlePage(1);
-    }
-  }, [handlePage, items]);
+    handleReplaceURL();
+  }, [currentPage]);
 
   return (
     <section className={style.container}>
diff --git a/src/features/navbar/constants/dataNav.ts b/src/features/navbar/constants/dataNav.ts
index 504fb133..4afa9fd4 100644
--- a/src/features/navbar/constants/dataNav.ts
+++ b/src/features/navbar/constants/dataNav.ts
@@ -1,20 +1,19 @@
 import { icons } from '@/features/shared/hooks/icons';
 import { images } from '@/features/shared/hooks/images';
 
-const { HomeIcon, ItemsIcon, CloseIcon, IconUser, IconSettings, IconLogOut, IconDropdown, UsersIcon } = icons();
-const { BgUser } = images();
+const { HomeIcon, ItemsIcon, CloseIcon, IconSettings, IconLogOut, IconDropdown, UsersIcon } = icons();
+const { Avatar } = images();
 
 export const dataClose = {
   image: CloseIcon,
 };
 export const dataUser = {
-  image: BgUser,
+  image: Avatar,
   username: 'babyoda@gmail.com',
   icon: IconDropdown,
 };
 export const dataPerfil = [
   {
-    icon: IconUser,
     description: 'perfil',
     path: '/profile',
   },
diff --git a/src/features/navbar/molecules/dropdown/DropdownUser.tsx b/src/features/navbar/molecules/dropdown/DropdownUser.tsx
index 5e16c186..b54d263c 100644
--- a/src/features/navbar/molecules/dropdown/DropdownUser.tsx
+++ b/src/features/navbar/molecules/dropdown/DropdownUser.tsx
@@ -11,15 +11,15 @@ import { toast } from 'react-toastify';
 
 import { locales } from '@/config';
 import { handleSignOut } from '@/features/auth/shared/actions/singOutAction';
-import { User } from '@/features/navbar/organisms/NavbarTop';
 import { icons } from '@/features/shared/hooks/icons';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 import { AccordionComponent } from '@/features/shared/molecules/accordion/accordion';
 
 import style from './dropdown-user.module.css';
 
 type Props = {
+  avatar: string | StaticImageData;
   dataPerfil: {
-    icon: StaticImageData;
     description: string;
     path: string;
   }[];
@@ -37,7 +37,7 @@ type Props = {
   isUserDropdownOpen: boolean;
   handleDropdownUser: () => void;
   id?: string;
-  user?: User;
+  user?: UserHasRole;
 };
 
 export const DropdownUser = (props: Props) => {
@@ -64,12 +64,12 @@ export const DropdownUser = (props: Props) => {
     <div className={style.container}>
       <div className={style.containerIconUser}>
         <button onClick={props.handleDropdownUser} className={`${style.iconUser} ${background}`}>
-          <Image src={props.user?.image_id ?? props.dataUser.image} alt={'Icon user'} height={1080} width={1080} />
+          <Image src={props.avatar} alt={'Icon user'} height={1080} width={1080} />
           <Image
             className={`${style.dropdown} ${rotate}`}
             width={82}
             height={82}
-            src={props.user?.image_id ?? props.dataUser.icon}
+            src={props.user?.user_id.image_id ?? props.dataUser.icon}
             alt={'dropdown'}
           />
         </button>
@@ -84,12 +84,12 @@ export const DropdownUser = (props: Props) => {
           <div className={style.containerIconUserOpen}>
             <Image
               className={style.profileImage}
-              src={props.user?.image_id ?? props.dataUser.image}
+              src={props.user?.user_id.image_id ?? props.dataUser.image}
               alt={'Icon user'}
               width={82}
               height={82}
             />
-            <p>{props.user?.first_name ?? props.dataUser.username}</p>
+            <p>{props.user?.user_id.first_name ?? props.dataUser.username}</p>
           </div>
           {props.dataPerfil.map(({ description, path }) => (
             <Link href={path ?? '#'} key={t(description)} className={style.perfilSections}>
diff --git a/src/features/navbar/organisms/NavbarTop.tsx b/src/features/navbar/organisms/NavbarTop.tsx
index fb3f36bf..2ad94798 100644
--- a/src/features/navbar/organisms/NavbarTop.tsx
+++ b/src/features/navbar/organisms/NavbarTop.tsx
@@ -1,28 +1,23 @@
 'use client';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
+import { useContextUser } from '@/contexts/UserContext';
 import { dataLogin, dataPerfil, dataUser } from '@/features/navbar/constants/dataNav';
 import { DropdownUser } from '@/features/navbar/molecules/dropdown/DropdownUser';
 import { ChangeLanguage } from '@/features/shared/atoms/changeLanguage/changeLanguage';
 import ThemeSwitcher from '@/features/shared/atoms/swich/ThemeSwitcher';
 
-import style from './navbar-top.module.css';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 
-export interface User {
-  phone: string | null;
-  email: string | null;
-  last_name: string | null;
-  first_name: string | null;
-  id: string;
-  image_id: string | null;
-}
+import style from './navbar-top.module.css';
 
 type Props = {
   isPublic: boolean;
-  user?: User;
+  user?: UserHasRole;
 };
 
 export const NavbarTop = (props: Props) => {
+  const { avatar, handleSetAvatar } = useContextUser();
   const [isUserDropdownOpen, setIsUserDropdownOpen] = useState<boolean>(false);
   const [isLangDropdownOpen, setIsLangDropdownOpen] = useState<boolean>(false);
   const handleDropdownUser = () => {
@@ -33,6 +28,15 @@ export const NavbarTop = (props: Props) => {
     setIsLangDropdownOpen(!isLangDropdownOpen);
     setIsUserDropdownOpen(false);
   };
+  const handleSetAvatarUser = () => {
+    if (props.user?.user_id.image_id) {
+      handleSetAvatar(props.user.user_id.image_id);
+    }
+  };
+
+  useEffect(() => {
+    handleSetAvatarUser();
+  }, []);
 
   return (
     <header className={style.container}>
@@ -46,6 +50,7 @@ export const NavbarTop = (props: Props) => {
           <>
             <ChangeLanguage isLangDropdownOpen={isLangDropdownOpen} handleDropdownLang={handleDropdownLang} />
             <DropdownUser
+              avatar={avatar}
               dataPerfil={dataPerfil}
               style={style}
               dataUser={dataUser}
diff --git a/src/features/navbar/template/NavbarTopTemplate.tsx b/src/features/navbar/template/NavbarTopTemplate.tsx
index 514dc9eb..11f782a6 100644
--- a/src/features/navbar/template/NavbarTopTemplate.tsx
+++ b/src/features/navbar/template/NavbarTopTemplate.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 
 import { NavbarTop } from '@/features/navbar/organisms/NavbarTop';
-import { fetchUser } from '@/features/shared/actions/fetchUsers';
+import { handleGetFile } from '@/features/shared/actions/fileActions';
+import { fetchUser } from '@/features/shared/actions/userActions';
 
 type Props = {
   isPublic: boolean;
@@ -9,5 +10,11 @@ type Props = {
 
 export const NavbarTopTemplate = async (props: Props) => {
   const user = props.isPublic ? undefined : await fetchUser();
+
+  if (user) {
+    const metadata = await handleGetFile(user.user_id.image_id);
+    user.user_id.image_id = metadata.path;
+  }
+
   return <NavbarTop isPublic={props.isPublic} user={user} />;
 };
diff --git a/src/features/profile/actions/ProfileAction.ts b/src/features/profile/actions/ProfileAction.ts
index 9f970f85..4fde4cee 100644
--- a/src/features/profile/actions/ProfileAction.ts
+++ b/src/features/profile/actions/ProfileAction.ts
@@ -1,12 +1,12 @@
 'use server';
 import { redirect, RedirectType } from 'next/navigation';
 
-import { updateRole } from '@/features/shared/actions/fetchUsers';
-import { SupabaseTable } from '@/features/shared/actions/supabaseTables';
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { updateRole } from '@/features/shared/actions/roleActions';
+import { SupabaseTable } from '@/features/shared/constants/supabaseTables';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 export const getSession = async () => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
 
   const { data, error } = await supabase.auth.getSession();
   const user = data?.session?.user;
@@ -24,13 +24,13 @@ export const getSession = async () => {
 type UpdatedUser = {
   first_name?: string;
   last_name?: string;
-  phone?: number;
+  phone?: string;
   role?: string;
   account_active?: boolean;
 };
 
 export const updateUser = async (data: UpdatedUser, id: string) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
   const phone = data.phone ? data.phone.toString() : null;
 
   const { error } = await supabase
@@ -60,7 +60,7 @@ type UpdatedUserImage = {
 };
 
 export const updateUserImage = async (props: UpdatedUserImage) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
 
   const { error } = await supabase
     .from(SupabaseTable.PROFILES)
diff --git a/src/features/profile/interfaces/profileResponse.ts b/src/features/profile/interfaces/profileResponse.ts
index a62bb44c..a48a46fe 100644
--- a/src/features/profile/interfaces/profileResponse.ts
+++ b/src/features/profile/interfaces/profileResponse.ts
@@ -11,7 +11,7 @@ export interface ProfileResponse {
 export type ProfileType = {
   first_name?: string;
   last_name?: string;
-  phone?: number;
+  phone?: string;
 };
 
 export interface ProfilePayload extends ProfileType {}
diff --git a/src/features/profile/molecules/updateInfoUser/updateInfoUser.tsx b/src/features/profile/molecules/updateInfoUser/updateInfoUser.tsx
index 808d4905..3bc6cecc 100644
--- a/src/features/profile/molecules/updateInfoUser/updateInfoUser.tsx
+++ b/src/features/profile/molecules/updateInfoUser/updateInfoUser.tsx
@@ -11,13 +11,13 @@ import { updateUser } from '@/features/profile/actions/ProfileAction';
 import { ProfileType as IProfileType } from '@/features/profile/interfaces/profileResponse';
 import style from '@/features/profile/molecules/updateInfoUser/updateInfoUser.module.css';
 import { profileUpdateSchema } from '@/features/profile/validations/profileUpdateSchema';
-import { User } from '@/features/shared/actions/fetchUsers';
 import { ButtonAuth } from '@/features/shared/atoms/button/ButtonAuth';
 import { InputForm, InputType } from '@/features/shared/atoms/inputForm/InputForm';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 
 interface Props {
   edit: boolean;
-  userProfile: User;
+  userProfile: UserHasRole;
   handleEditButton: () => void;
   phoneNumber: string;
 }
@@ -35,7 +35,7 @@ export const UpdateInfoUser = ({ edit, userProfile, handleEditButton, phoneNumbe
   });
 
   const onSubmit = handleSubmit(async (data: IProfileType) => {
-    await toast.promise(updateUser(data, userProfile.id), {
+    await toast.promise(updateUser(data, userProfile.user_id.id), {
       error: `${alert('error')}`,
       success: `${alert('success')}`,
       pending: `${alert('pending')}`,
@@ -54,7 +54,7 @@ export const UpdateInfoUser = ({ edit, userProfile, handleEditButton, phoneNumbe
         className={style.infoUserEdit}
         input_type={InputType.SIMPLE}
         classNameError={style.inputError}
-        placeholder={userProfile.first_name ?? t('p_name')}
+        placeholder={userProfile.user_id.first_name ?? t('p_name')}
         disabled={!edit && true}
       />
       <InputForm<IProfileType>
@@ -67,19 +67,19 @@ export const UpdateInfoUser = ({ edit, userProfile, handleEditButton, phoneNumbe
         className={style.infoUserEdit}
         input_type={InputType.SIMPLE}
         classNameError={style.inputError}
-        placeholder={userProfile.last_name ?? t('p_lastname')}
+        placeholder={userProfile.user_id.last_name ?? t('p_lastname')}
         disabled={!edit && true}
       />
       <div>
         <p>{t('p_email')}:</p>
-        <p className={style.infoUser}>{userProfile.email ?? <>{t('p_email')}</>}</p>
+        <p className={style.infoUser}>{userProfile.user_id.email ?? <>{t('p_email')}</>}</p>
       </div>
       <InputForm<IProfileType>
         errors={errors}
         id={'phone'}
         name={'phone'}
         register={register}
-        type={'number'}
+        type={'text'}
         label={`${t('p_phone')}:`}
         className={style.infoUserEdit}
         input_type={InputType.SIMPLE}
diff --git a/src/features/profile/molecules/userImage/UserImage.tsx b/src/features/profile/molecules/userImage/UserImage.tsx
index 8be6edd5..2acc3ed6 100644
--- a/src/features/profile/molecules/userImage/UserImage.tsx
+++ b/src/features/profile/molecules/userImage/UserImage.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React from 'react';
 
 import { yupResolver } from '@hookform/resolvers/yup';
-import Image, { StaticImageData } from 'next/image';
+import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
 import { useForm } from 'react-hook-form';
@@ -9,13 +9,13 @@ import { toast } from 'react-toastify';
 
 import IconPencil from '@/asset/images/pencil.svg';
 import IconPencilWhite from '@/asset/images/pencilWhite.svg';
+import { useContextUser } from '@/contexts/UserContext';
 import { updateUserImage } from '@/features/profile/actions/ProfileAction';
 import style from '@/features/profile/molecules/userImage/user-image.module.css';
 import { profileImageSchema } from '@/features/profile/validations/profileImageSchema';
-import { User } from '@/features/shared/actions/fetchUsers';
-import { handleGetFile, handleUploadFile } from '@/features/shared/actions/fileAction';
+import { handleGetFile, handleUploadFile } from '@/features/shared/actions/fileActions';
 import { InputForm, InputType } from '@/features/shared/atoms/inputForm/InputForm';
-import { images } from '@/features/shared/hooks/images';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 
 type IProfileForm = {
   file?: object | string | null;
@@ -23,13 +23,12 @@ type IProfileForm = {
 };
 
 interface Props {
-  userProfile: User;
+  userProfile: UserHasRole;
   edit: boolean;
 }
 
 export const UserImage = ({ userProfile, edit }: Props) => {
-  const { user } = images();
-  const [imagePath, setImagePath] = useState<StaticImageData | string>(user);
+  const { avatar, handleSetAvatar } = useContextUser();
   const alert = useTranslations('ToastUpdate');
   const { theme } = useTheme();
   const pencilToggle = theme === 'dark' ? IconPencilWhite : IconPencil;
@@ -58,11 +57,11 @@ export const UserImage = ({ userProfile, edit }: Props) => {
       file.append('file', event.target.files[0]);
       const fileMetadata = await handleUploadFile(file);
       const data = {
-        id: userProfile.id,
-        first_name: userProfile.first_name,
-        last_name: userProfile.last_name,
-        phone: userProfile.phone,
-        email: userProfile.email,
+        id: userProfile.user_id.id,
+        first_name: userProfile.user_id.first_name,
+        last_name: userProfile.user_id.last_name,
+        phone: userProfile.user_id.phone,
+        email: userProfile.user_id.email,
         image_id: fileMetadata.id,
       };
 
@@ -75,7 +74,7 @@ export const UserImage = ({ userProfile, edit }: Props) => {
         });
 
         const image = await handleGetFile(fileMetadata.id);
-        setImagePath(image.path);
+        handleSetAvatar(image.path);
       }
     }
   };
@@ -83,7 +82,7 @@ export const UserImage = ({ userProfile, edit }: Props) => {
   return (
     <>
       <div className={style.containerImg}>
-        <Image src={imagePath} alt={'user'} width={82} height={82} className={style.profileImage} />
+        <Image src={avatar} alt={'user'} width={82} height={82} className={style.profileImage} />
         {edit && (
           <button onClick={handleFileInputClick}>
             <Image src={pencilToggle} alt={'pencil'} className={style.pencil} />
diff --git a/src/features/profile/organisms/profile.tsx b/src/features/profile/organisms/profile.tsx
index c719ff4f..c9fcef89 100644
--- a/src/features/profile/organisms/profile.tsx
+++ b/src/features/profile/organisms/profile.tsx
@@ -6,19 +6,21 @@ import { useTranslations } from 'next-intl';
 import { InfoUser } from '@/features/profile/molecules/infoUser/infoUser';
 import { UpdateInfoUser } from '@/features/profile/molecules/updateInfoUser/updateInfoUser';
 import { UserImage } from '@/features/profile/molecules/userImage/UserImage';
-import { User } from '@/features/shared/actions/fetchUsers';
+
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 
 import style from './profile.module.css';
 
 type Props = {
-  userProfile: User;
+  userProfile: UserHasRole;
 };
 
 export const Profile = ({ userProfile }: Props) => {
   const t = useTranslations('Profile');
   const [edit, setEdit] = React.useState(false);
 
-  const phoneNumber = userProfile.phone && userProfile.phone?.length > 0 ? userProfile.phone : t('p_phone');
+  const phoneNumber =
+    userProfile.user_id.phone && userProfile.user_id.phone?.length > 0 ? userProfile.user_id.phone : t('p_phone');
 
   const handleEditButton = () => {
     if (!edit) {
@@ -41,7 +43,7 @@ export const Profile = ({ userProfile }: Props) => {
         <h1 data-aos='fade-down' data-aos-duration='1500'>
           {t('title')}
         </h1>
-        <div className={style.containerList} id={userProfile.id}>
+        <div className={style.containerList} id={userProfile.user_id.id}>
           <UserImage userProfile={userProfile} edit={edit} />
           {edit ? (
             <UpdateInfoUser
diff --git a/src/features/profile/template/ProfileTemplate.tsx b/src/features/profile/template/ProfileTemplate.tsx
index ec77564a..b38ed4a9 100644
--- a/src/features/profile/template/ProfileTemplate.tsx
+++ b/src/features/profile/template/ProfileTemplate.tsx
@@ -1,9 +1,16 @@
 import React from 'react';
 
 import { Profile } from '@/features/profile/organisms/profile';
-import { fetchUser } from '@/features/shared/actions/fetchUsers';
+import { handleGetFile } from '@/features/shared/actions/fileActions';
+import { fetchUser } from '@/features/shared/actions/userActions';
 
 export const ProfileTemplate = async () => {
   const user = await fetchUser();
+
+  if (user) {
+    const metadata = await handleGetFile(user.user_id.image_id);
+    user.user_id.image_id = metadata.path;
+  }
+
   return <Profile userProfile={user} />;
 };
diff --git a/src/features/profile/validations/profileUpdateSchema.ts b/src/features/profile/validations/profileUpdateSchema.ts
index dcf95243..feeffac1 100644
--- a/src/features/profile/validations/profileUpdateSchema.ts
+++ b/src/features/profile/validations/profileUpdateSchema.ts
@@ -4,6 +4,6 @@ export const profileUpdateSchema = yup
   .shape({
     first_name: yup.string().min(3).max(20),
     last_name: yup.string().min(3).max(20),
-    phone: yup.number().min(6).optional(),
+    phone: yup.string().min(6).optional(),
   })
   .required();
diff --git a/src/features/shared/actions/fetchUsers.ts b/src/features/shared/actions/fetchUsers.ts
deleted file mode 100644
index 18e18288..00000000
--- a/src/features/shared/actions/fetchUsers.ts
+++ /dev/null
@@ -1,217 +0,0 @@
-'use server';
-
-import { getSession } from '@/features/profile/actions/ProfileAction';
-import { handleGetFile } from '@/features/shared/actions/fileAction';
-import { SupabaseTable } from '@/features/shared/actions/supabaseTables';
-import { filterSupabase, getCurrentUserRole } from '@/features/users/actions/usersAction';
-import { PayloadUpdateRole, RolesResponse } from '@/features/users/interfaces/rolesResponse';
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
-
-export interface User {
-  id: string;
-  image_id: string | null;
-  phone: string | null;
-  email: string | null;
-  last_name: string | null;
-  first_name: string | null;
-  role: RolesResponse;
-  account_active: boolean;
-}
-
-export interface PaginatedResponse {
-  data: User[];
-  pagination: {
-    total: number;
-    offset: number;
-    limit: number;
-    perPage: number;
-    currentPage: number;
-    lastPage: number;
-    from: number;
-    to: number;
-    path: string;
-    firstUrl: string;
-    lastUrl: string;
-    nextUrl: string;
-    prevUrl: string;
-    currentUrl: string;
-  };
-}
-
-interface QueryParms {
-  filter?: URLSearchParams | undefined;
-}
-
-type Props = {
-  queryParams?: QueryParms;
-};
-
-export const fetchUser = async (id?: string | undefined): Promise<User> => {
-  const supabase = supabaseClientManager.getPublicClient();
-  const user = await getSession();
-
-  if (user && user.id && !id) {
-    const { data, error } = await supabase
-      .from(SupabaseTable.USER_HAS_ROLES)
-      .select('*, user_id!inner(*), role_id!inner(*)')
-      .eq('user_id', user.id);
-
-    if (error) {
-      throw new Error('Error at getting the user');
-    }
-
-    let image = data[0]?.image_id ?? null;
-    if (image) {
-      image = await handleGetFile(image);
-      image = image?.path;
-    }
-
-    return {
-      id: user.id,
-      image_id: image,
-      phone: data[0]?.user_id.phone ?? null,
-      email: data[0]?.user_id.email ?? null,
-      last_name: data[0]?.user_id.last_name,
-      first_name: data[0]?.user_id.first_name,
-      account_active: data[0]?.user_id.account_active,
-      role: data[0]?.role_id,
-    };
-  } else if (id) {
-    const { data, error } = await supabase
-      .from(SupabaseTable.USER_HAS_ROLES)
-      .select('*, user_id!inner(*), role_id!inner(*)')
-      .eq('user_id', id);
-
-    if (error) {
-      throw new Error('Error at getting the user');
-    }
-
-    let image = data[0]?.image_id ?? null;
-    if (image) {
-      image = await handleGetFile(image);
-      image = image?.path;
-    }
-
-    return {
-      id: id,
-      image_id: image,
-      phone: data[0]?.user_id.phone ?? null,
-      email: data[0]?.user_id.email ?? null,
-      last_name: data[0]?.user_id.last_name,
-      first_name: data[0]?.user_id.first_name,
-      account_active: data[0]?.user_id.account_active,
-      role: data[0].role_id,
-    };
-  } else {
-    throw new Error('User not found');
-  }
-};
-
-export const fetchUsers = async (props?: Props): Promise<PaginatedResponse> => {
-  const supabase = supabaseClientManager.getPublicClient();
-  const currentUserRole = await getCurrentUserRole();
-
-  if (currentUserRole[0].role_id.slug !== 'admin') {
-    throw new Error("You don't have the required permission to perform this request");
-  }
-
-  let query = supabase
-    .from(SupabaseTable.USER_HAS_ROLES)
-    .select('*, user_id!inner(*), role_id!inner(*)', { count: 'exact' });
-
-  const pagination = {
-    offset: 0,
-    limit: 2,
-  };
-
-  if (props && props.queryParams) {
-    const filterConditions = filterSupabase(props.queryParams);
-
-    pagination.offset = Number(filterConditions.offset) || 0;
-    pagination.limit = Number(filterConditions.limit) || 2;
-
-    const filters: Record<string, string> = Object.entries(filterConditions).reduce(
-      (acc, [key, value]) => {
-        if (key === 'offset' || key === 'limit') {
-          return acc;
-        }
-        acc[key] = value;
-        return acc;
-      },
-      {} as Record<string, string>,
-    );
-
-    Object.entries(filters).forEach(([column, value]) => {
-      query = query.ilike(column, value);
-    });
-  }
-
-  query = query.range(pagination.offset, pagination.limit);
-
-  const { data, count, error } = await query;
-
-  if (error) {
-    console.error('Error at getting all users', error);
-  }
-
-  const formattedUsers = data
-    ? data.map((user) => ({
-        id: user.user_id.id,
-        image_id: user.user_id.image_id,
-        phone: user.user_id.phone,
-        email: user.user_id.email,
-        last_name: user.user_id.last_name,
-        first_name: user.user_id.first_name,
-        account_active: user.user_id.account_active,
-        role: user.role_id.name,
-      }))
-    : [];
-
-  const paginationResponse: PaginatedResponse = {
-    data: formattedUsers,
-    pagination: {
-      total: count || 0,
-      offset: pagination.offset,
-      limit: pagination.limit,
-      perPage: pagination.limit,
-      currentPage: Math.ceil(pagination.offset / pagination.limit) + 1,
-      lastPage: Math.ceil((count || 0) / pagination.limit - 1),
-      from: pagination.offset + 1,
-      to: Math.min(pagination.offset + pagination.limit, count || 0),
-      path: '',
-      firstUrl: '',
-      lastUrl: '',
-      nextUrl: '',
-      prevUrl: '',
-      currentUrl: '',
-    },
-  };
-
-  return paginationResponse;
-};
-
-export const getRoles = async () => {
-  const supabase = supabaseClientManager.getPrivateClient();
-
-  const { data, error } = await supabase.from('roles').select();
-  if (error) {
-    throw new Error('Error getting the roles');
-  } else {
-    return data;
-  }
-};
-
-export const updateRole = async ({ user_id, role_id }: PayloadUpdateRole) => {
-  const supabase = supabaseClientManager.getPrivateClient();
-
-  const { error: RolUpdateError } = await supabase
-    .from(SupabaseTable.USER_HAS_ROLES)
-    .update({
-      role_id,
-    })
-    .eq('user_id', user_id);
-
-  if (RolUpdateError) {
-    throw new Error('Error updating the role of the user');
-  }
-};
diff --git a/src/features/shared/actions/fileAction.ts b/src/features/shared/actions/fileActions.ts
similarity index 86%
rename from src/features/shared/actions/fileAction.ts
rename to src/features/shared/actions/fileActions.ts
index 0cee0e0e..a7d09866 100644
--- a/src/features/shared/actions/fileAction.ts
+++ b/src/features/shared/actions/fileActions.ts
@@ -1,5 +1,5 @@
 'use server';
-import { config } from '@/features/shared/actions/config';
+import { config } from '@/config/config';
 import { FileMetadata } from '@/features/shared/interfaces/FileMetadata';
 import HttpService from '@/service/HttpService';
 import { HeadersContentType, IHttpParams } from '@/service/IHttpParams';
@@ -16,7 +16,7 @@ export const handleUploadFile = async (data: FormData): Promise<FileMetadata> =>
       data,
     };
 
-    return HttpService.request(config);
+    return await HttpService.request(config);
   } catch (e) {
     throw new Error((e as { message: string })?.message);
   }
@@ -29,7 +29,7 @@ export const handleGetFile = async (id: string): Promise<FileMetadata> => {
       method: 'GET',
     };
 
-    return HttpService.request(config);
+    return await HttpService.request(config);
   } catch (e) {
     throw new Error((e as { message: string })?.message);
   }
diff --git a/src/features/shared/actions/getData.ts b/src/features/shared/actions/getData.ts
deleted file mode 100644
index b3249c68..00000000
--- a/src/features/shared/actions/getData.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { env } from '@/config/api';
-
-export async function getData<T>(uri: string) {
-  const res = await fetch(`${env.urlBase}/${uri}`, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  if (!res.ok) {
-    throw new Error('Failed to fetch data');
-  }
-
-  return (await res.json()).data as T;
-}
diff --git a/src/features/shared/actions/roleActions.ts b/src/features/shared/actions/roleActions.ts
new file mode 100644
index 00000000..1a9d4954
--- /dev/null
+++ b/src/features/shared/actions/roleActions.ts
@@ -0,0 +1,29 @@
+import { SupabaseTable } from '@/features/shared/constants/supabaseTables';
+import { PayloadUpdateRole } from '@/features/users/interfaces/rolesResponse';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
+
+export const getRoles = async () => {
+  const supabase = supabaseServerClientManager.getServerPublicClient();
+
+  const { data, error } = await supabase.from('roles').select();
+  if (error) {
+    throw new Error('Error getting the roles');
+  } else {
+    return data;
+  }
+};
+
+export const updateRole = async ({ user_id, role_id }: PayloadUpdateRole) => {
+  const supabase = supabaseServerClientManager.getServerPublicClient();
+
+  const { error: RolUpdateError } = await supabase
+    .from(SupabaseTable.USER_HAS_ROLES)
+    .update({
+      role_id,
+    })
+    .eq('user_id', user_id);
+
+  if (RolUpdateError) {
+    throw new Error('Error updating the role of the user');
+  }
+};
diff --git a/src/features/shared/actions/setInitialPaginationParams.ts b/src/features/shared/actions/setInitialPaginationParams.ts
deleted file mode 100644
index 991e306c..00000000
--- a/src/features/shared/actions/setInitialPaginationParams.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { URLSearchParams } from 'url';
-
-import { InitialPaginationParams } from '@/features/shared/interfaces/InitialPaginationParams';
-
-export const setInitialPaginationParams = (params: URLSearchParams, initialParams: InitialPaginationParams) => {
-  if (!params.get('pagination[offset]')) {
-    params.set('pagination[offset]', initialParams.offset);
-  }
-  if (!params.get('pagination[limit]')) {
-    params.set('pagination[limit]', initialParams.limit);
-  }
-};
diff --git a/src/features/shared/actions/supabase/getPaginatedEntity.ts b/src/features/shared/actions/supabase/getPaginatedEntity.ts
new file mode 100644
index 00000000..004a8ea2
--- /dev/null
+++ b/src/features/shared/actions/supabase/getPaginatedEntity.ts
@@ -0,0 +1,81 @@
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { SupabaseTable } from '@/features/shared/constants/supabaseTables';
+import { filterSupabase } from '@/features/shared/helpers/supabase/createFilterSupabase';
+import { QueryParams } from '@/service/IHttpParams';
+
+export interface SupabasePagination<T> {
+  data: T[];
+  pagination: {
+    total: number;
+    offset: number;
+    limit: number;
+    perPage: number;
+    currentPage: number;
+    lastPage: number;
+    from: number;
+    to: number;
+  };
+}
+
+type GetPaginatedSupabaseQueryPayload = {
+  supabase: SupabaseClient;
+  table: SupabaseTable;
+  queryParams: QueryParams;
+  select: string;
+};
+
+export async function getPaginatedSupabaseQuery<T>(
+  payload: GetPaginatedSupabaseQueryPayload,
+): Promise<SupabasePagination<T>> {
+  const { table, queryParams, supabase, select } = payload;
+
+  if (!queryParams?.filter || !queryParams?.pagination) {
+    throw new Error('Invalid query params: both filter and pagination must be defined');
+  }
+
+  const { offset, limit } = queryParams.pagination;
+
+  const numericOffset = Number(offset);
+  const numericLimit = Number(limit);
+
+  if (isNaN(numericOffset) || isNaN(numericLimit) || numericOffset < 0 || numericLimit <= 0) {
+    throw new Error('Invalid pagination parameters: offset and limit must be non-negative numbers');
+  }
+
+  let query = supabase.from(table).select(select, { count: 'exact' });
+
+  const filterConditions = filterSupabase(queryParams);
+
+  await Promise.all(
+    Object.entries(filterConditions).map(async ([column, value]) => {
+      query = query.ilike(column, `%${value}%`);
+    }),
+  );
+
+  query = query.range(numericOffset, numericOffset + numericLimit - 1);
+
+  const { data, count, error } = await query;
+
+  if (error) {
+    throw new Error(`Supabase query error: ${error.message}`);
+  }
+
+  const totalCount = count ?? 0;
+
+  const paginationResponse: SupabasePagination<T> = {
+    data: data as T[],
+    pagination: {
+      total: totalCount,
+      offset: numericOffset,
+      limit: numericLimit,
+      perPage: numericLimit,
+      currentPage: Math.floor(numericOffset / numericLimit) + 1,
+      lastPage: Math.ceil(totalCount / numericLimit),
+      from: numericOffset + 1,
+      to: Math.min(numericOffset + numericLimit, totalCount),
+    },
+  };
+
+  return paginationResponse;
+}
diff --git a/src/features/shared/actions/userActions.ts b/src/features/shared/actions/userActions.ts
new file mode 100644
index 00000000..ba34b734
--- /dev/null
+++ b/src/features/shared/actions/userActions.ts
@@ -0,0 +1,54 @@
+'use server';
+
+import { PostgrestSingleResponse } from '@supabase/supabase-js';
+import { redirect } from 'next/navigation';
+import { NextResponse } from 'next/server';
+
+import { getSession } from '@/features/profile/actions/ProfileAction';
+import { getPaginatedSupabaseQuery, SupabasePagination } from '@/features/shared/actions/supabase/getPaginatedEntity';
+import { SupabaseTable } from '@/features/shared/constants/supabaseTables';
+import { Role } from '@/features/shared/interfaces/Role';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
+import { getCurrentUserRole } from '@/features/users/actions/usersAction';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
+import { QueryParams } from '@/service/IHttpParams';
+
+type Props = {
+  queryParams: QueryParams;
+};
+
+export const fetchUser = async (id?: string): Promise<UserHasRole> => {
+  const supabase = supabaseServerClientManager.getServerPublicClient();
+  const session = await getSession();
+  const userId = id || session?.id;
+
+  if (!userId) {
+    throw new Error('User ID not provided and no active session');
+  }
+
+  const { data, error }: PostgrestSingleResponse<UserHasRole> = await supabase
+    .from(SupabaseTable.USER_HAS_ROLES)
+    .select('*, user_id!inner(*), role_id!inner(*)')
+    .eq('user_id', userId)
+    .single();
+
+  if (error) throw new Error('Error al obtener el usuario');
+
+  return data;
+};
+
+export const listUsers = async (props: Props): Promise<NextResponse | SupabasePagination<UserHasRole>> => {
+  const supabase = supabaseServerClientManager.getServerPublicClient();
+  const currentUserRole = await getCurrentUserRole();
+
+  if (currentUserRole[0].role_id.slug !== Role.ADMIN) {
+    return redirect('/unauthorized');
+  }
+
+  return getPaginatedSupabaseQuery<UserHasRole>({
+    supabase,
+    table: SupabaseTable.USER_HAS_ROLES,
+    queryParams: props.queryParams,
+    select: '*, user_id!inner(*), role_id!inner(*)',
+  });
+};
diff --git a/src/features/shared/atoms/noEntitiesToDisplay/NoEntitiesToDisplay.tsx b/src/features/shared/atoms/noEntitiesToDisplay/NoEntitiesToDisplay.tsx
index a957af86..7e25a166 100644
--- a/src/features/shared/atoms/noEntitiesToDisplay/NoEntitiesToDisplay.tsx
+++ b/src/features/shared/atoms/noEntitiesToDisplay/NoEntitiesToDisplay.tsx
@@ -14,7 +14,6 @@ type Props<Type> = {
 export const NoEntitiesToDisplay = <Type,>({ data, section }: Props<Type>) => {
   const t = useTranslations(section);
   const { IconNoItems } = icons();
-
   return (
     <>
       {data.length === 0 && (
diff --git a/src/features/shared/actions/supabaseTables.ts b/src/features/shared/constants/supabaseTables.ts
similarity index 100%
rename from src/features/shared/actions/supabaseTables.ts
rename to src/features/shared/constants/supabaseTables.ts
diff --git a/src/features/shared/helpers/supabase/createFilterSupabase.ts b/src/features/shared/helpers/supabase/createFilterSupabase.ts
new file mode 100644
index 00000000..d0e5f431
--- /dev/null
+++ b/src/features/shared/helpers/supabase/createFilterSupabase.ts
@@ -0,0 +1,27 @@
+import { FilterApplied } from '@/features/shared/hooks/useFilter';
+
+export const filterSupabase = (queryParams: { filter?: URLSearchParams | undefined }) => {
+  const createFilterFromPair = ([key, value]: [string, string]): FilterApplied => {
+    const newKey = key.replace('filter[', '').replace(']', '');
+    return { key: newKey, term: value };
+  };
+
+  const filterObject: Record<string, string> = {};
+
+  if (queryParams.filter) {
+    queryParams.filter.forEach((value, key) => {
+      if (key.startsWith('filter[')) {
+        filterObject[key] = value;
+      }
+    });
+  }
+
+  return Object.entries(filterObject).reduce(
+    (acc, [key, value]) => {
+      const { key: newKey, term } = createFilterFromPair([key, value as string]);
+      acc[newKey] = term;
+      return acc;
+    },
+    {} as Record<string, string>,
+  );
+};
diff --git a/src/features/shared/hooks/images.ts b/src/features/shared/hooks/images.ts
index 2c88152d..deab681f 100644
--- a/src/features/shared/hooks/images.ts
+++ b/src/features/shared/hooks/images.ts
@@ -1,9 +1,9 @@
 import user from '../../../asset/images/user.webp';
-import BgUser from '../../../asset/images/userLogo.webp';
+import Avatar from '../../../asset/images/userLogo.webp';
 
 export const images = () => {
   return {
-    BgUser,
+    Avatar,
     user,
   };
 };
diff --git a/src/features/shared/hooks/usePagination.ts b/src/features/shared/hooks/usePagination.ts
index 9a0b3214..f81a841b 100644
--- a/src/features/shared/hooks/usePagination.ts
+++ b/src/features/shared/hooks/usePagination.ts
@@ -10,8 +10,8 @@ export const usePagination = (pagination: PaginationAPI, params: URLSearchParams
   };
 
   const setPaginationParams = () => {
-    const offset = (currentPage - 1) * pagination?.perPage;
-    setParams(offset, pagination?.limit);
+    const offset = (currentPage - 1) * pagination.perPage;
+    setParams(offset, pagination.limit);
   };
 
   const handlePage = (page: number) => {
diff --git a/src/features/shared/interfaces/Role.ts b/src/features/shared/interfaces/Role.ts
new file mode 100644
index 00000000..54dcbd4e
--- /dev/null
+++ b/src/features/shared/interfaces/Role.ts
@@ -0,0 +1,4 @@
+export enum Role {
+  ADMIN = 'admin',
+  OPERATOR = 'operator',
+}
diff --git a/src/features/shared/interfaces/UserHasRole.ts b/src/features/shared/interfaces/UserHasRole.ts
new file mode 100644
index 00000000..9782d17c
--- /dev/null
+++ b/src/features/shared/interfaces/UserHasRole.ts
@@ -0,0 +1,7 @@
+import { RolesResponse } from '@/features/users/interfaces/rolesResponse';
+import { UserResponse } from '@/features/users/interfaces/usersResponse';
+
+export interface UserHasRole {
+  user_id: UserResponse;
+  role_id: RolesResponse;
+}
diff --git a/src/features/users/actions/adminUserAction.ts b/src/features/users/actions/adminUserAction.ts
index f68a7a92..84bc12bc 100644
--- a/src/features/users/actions/adminUserAction.ts
+++ b/src/features/users/actions/adminUserAction.ts
@@ -1,8 +1,8 @@
 'use server';
 
-import { updateRole } from '@/features/shared/actions/fetchUsers';
+import { updateRole } from '@/features/shared/actions/roleActions';
 import { getCurrentUserRole } from '@/features/users/actions/usersAction';
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 type NewUserByAdmin = {
   first_name?: string;
@@ -15,7 +15,7 @@ type NewUserByAdmin = {
 };
 
 export const addNewUserByAdmin = async (props: NewUserByAdmin) => {
-  const supabase = supabaseClientManager.getPrivateClient();
+  const supabase = supabaseServerClientManager.getServerPrivateClient();
 
   const phone = props.phone ? props.phone.toString() : null;
 
@@ -60,7 +60,7 @@ export const updateUserByAdmin = async () => {
 };
 
 export const deleteUserByAdmin = async (id: string) => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
   const role = await getCurrentUserRole();
 
   if (role[0].role_id === 'admin') {
diff --git a/src/features/users/actions/usersAction.ts b/src/features/users/actions/usersAction.ts
index f3563090..25284c63 100644
--- a/src/features/users/actions/usersAction.ts
+++ b/src/features/users/actions/usersAction.ts
@@ -2,11 +2,11 @@
 
 import { redirect, RedirectType } from 'next/navigation';
 
-import { SupabaseTable } from '@/features/shared/actions/supabaseTables';
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { SupabaseTable } from '@/features/shared/constants/supabaseTables';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
 export const getCurrentUserRole = async () => {
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
   const {
     data: { session },
     error,
@@ -27,44 +27,3 @@ export const getCurrentUserRole = async () => {
     throw new Error('Error at getting the current user role');
   }
 };
-
-export const filterSupabase = (queryParams: { filter?: URLSearchParams | undefined }) => {
-  const createFilterFromPair = ([key, value]: [string, string]) => {
-    const keyFirstPartName = key.includes('role') ? 'role_id.' : 'user_id.';
-
-    const newKey = key.includes('role')
-      ? key.replace('filter[role]', 'role_id.slug')
-      : key.replace('filter[', keyFirstPartName).replace(']', '');
-
-    return { key: newKey, term: `%${value}%` };
-  };
-
-  const createPaginationFromPair = ([key, value]: [string, string]) => {
-    const newKey = key.replace('pagination[', '').replace(']', '');
-    return { key: newKey, term: value };
-  };
-
-  const filterObject: Record<string, string> = {};
-
-  if (queryParams.filter) {
-    queryParams.filter.forEach((value, key) => {
-      filterObject[key] = value;
-    });
-  }
-  return Object.entries(filterObject).reduce(
-    (acc, [key, value]) => {
-      if (key.startsWith('filter[')) {
-        const { key: newKey, term } = createFilterFromPair([key, value]);
-        acc[newKey] = term;
-        return acc;
-      }
-      if (key.startsWith('pagination[')) {
-        const { key: newKey, term } = createPaginationFromPair([key, value]);
-        acc[newKey] = term;
-        return acc;
-      }
-      return acc;
-    },
-    {} as Record<string, string>,
-  );
-};
diff --git a/src/features/users/constants/selectOptionsData.ts b/src/features/users/constants/selectOptionsData.ts
index 93387eee..76122f81 100644
--- a/src/features/users/constants/selectOptionsData.ts
+++ b/src/features/users/constants/selectOptionsData.ts
@@ -1,13 +1,5 @@
-export const rolesOptions = [
-  {
-    label: 'Admin',
-    value: 'admin',
-  },
-  {
-    label: 'Operator',
-    value: 'operator',
-  },
-];
+import { EnumFilterApply } from '@/features/shared/molecules/inputDynamic/InputDynamic';
+import { OptionKey } from '@/features/users/interfaces/OptionKey';
 
 export const activeOptions = [
   {
@@ -19,3 +11,28 @@ export const activeOptions = [
     value: false,
   },
 ];
+
+export const selectOptionsData: OptionKey[] = [
+  {
+    label: 'Email',
+    value: 'user_id.email',
+    type: 'text',
+    filter: EnumFilterApply.Single,
+  },
+  {
+    type: 'text',
+    label: 'Role',
+    value: 'role_id.slug',
+    filter: EnumFilterApply.Options,
+    options: [
+      {
+        label: 'Admin',
+        value: 'admin',
+      },
+      {
+        label: 'Operator',
+        value: 'operator',
+      },
+    ],
+  },
+];
diff --git a/src/features/users/interfaces/IUpdateUser.ts b/src/features/users/interfaces/IUpdateUser.ts
index db347ce8..5aaeca75 100644
--- a/src/features/users/interfaces/IUpdateUser.ts
+++ b/src/features/users/interfaces/IUpdateUser.ts
@@ -1,7 +1,7 @@
 export type User = {
   first_name: string;
   last_name: string;
-  phone?: number;
+  phone?: string;
   email: string;
   role: string;
   account_active: boolean;
diff --git a/src/features/users/interfaces/usersResponse.ts b/src/features/users/interfaces/usersResponse.ts
index 6e7a56aa..2308ea37 100644
--- a/src/features/users/interfaces/usersResponse.ts
+++ b/src/features/users/interfaces/usersResponse.ts
@@ -1,10 +1,11 @@
-export interface UsersResponse {
+export interface UserResponse {
   id: string;
   first_name: string;
   last_name: string;
   email: string;
-  phone?: number;
-  password: string;
+  phone?: string;
+  image_id: string;
+  account_active: boolean;
   createdAt: number;
   updatedAt: number;
 }
diff --git a/src/features/users/organisms/UsersList.tsx b/src/features/users/organisms/UsersList.tsx
index 0ec35e81..0446fb94 100644
--- a/src/features/users/organisms/UsersList.tsx
+++ b/src/features/users/organisms/UsersList.tsx
@@ -5,9 +5,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
 import { useTranslations } from 'next-intl';
 
-import { selectOptionsData } from '@/features/items/constants/selectOptionsData';
 import styleCard from '@/features/items/organisms/card.module.css';
-import { User } from '@/features/shared/actions/fetchUsers';
 import { AddBtn } from '@/features/shared/atoms/addBtn/AddBtn';
 import { CardEntity } from '@/features/shared/atoms/card/CardEntity';
 import { FilterModal } from '@/features/shared/atoms/filterModal/filterModal';
@@ -18,18 +16,19 @@ import { SizeType } from '@/features/shared/atoms/swich/switch';
 import { Title } from '@/features/shared/atoms/title/Title';
 
 import { useFilter } from '@/features/shared/hooks/useFilter';
-import { PaginationAPI } from '@/features/shared/interfaces/PaginationAPI';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 import { FiltersApplied } from '@/features/shared/molecules/filtersApplied/FiltersApplied';
 import { FilterAndSearch } from '@/features/shared/organisms/filterAndSearch/FilterAndSearch';
 import { usePagination } from '@/features/users/atoms/usePagination/usePagination';
 
+import { selectOptionsData } from '@/features/users/constants/selectOptionsData';
 import { OptionKey } from '@/features/users/interfaces/OptionKey';
 
 import styles from './users-list.module.css';
 
 interface Props {
-  users: User[];
-  pagination: PaginationAPI;
+  users: UserHasRole[];
+  pagination: any;
 }
 
 export const UserList = (props: Props) => {
@@ -90,10 +89,8 @@ export const UserList = (props: Props) => {
   }, [handleSearchType]);
 
   useEffect(() => {
-    if (props.users.length === 0) {
-      handlePage(1);
-    }
-  }, [handlePage, props.users]);
+    handleReplaceURL();
+  }, [currentPage]);
 
   return (
     <section className={styles.container}>
@@ -143,23 +140,23 @@ export const UserList = (props: Props) => {
               editPath={'users/update'}
               // @ts-expect-error test
               handleDelete={() => fetch('')}
-              key={user.id}
+              key={user.user_id.id}
               className={{
                 card:
-                  openDropdownId === user.id
+                  openDropdownId === user.user_id.id
                     ? `${styleCard.backgroundHover} ${styleCard.container}`
                     : styleCard.container,
                 header: styleCard.containerHeader,
               }}
               radius={SizeType.SMALL}
-              id={user.id}
-              handleDropdown={() => handleDropdown(user.id)}
-              isDropdownOpen={openDropdownId === user.id}
+              id={user.user_id.id}
+              handleDropdown={() => handleDropdown(user.user_id.id)}
+              isDropdownOpen={openDropdownId === user.user_id.id}
               item={
                 <div className={styleCard.containerInfo}>
-                  {user.first_name ? <h2 className={styleCard.name}>{user.first_name}</h2> : <></>}
-                  <p className='text-md'>Email: {user.email}</p>
-                  <p className='text-md'>Role: {user.role.name}</p>
+                  {user.user_id.first_name ? <h2 className={styleCard.name}>{user.user_id.first_name}</h2> : <></>}
+                  <p className='text-md'>Email: {user.user_id.email}</p>
+                  <p className='text-md'>Role: {user.role_id.name}</p>
                 </div>
               }
             />
diff --git a/src/features/users/organisms/formUpdate/FormUpdateUser.tsx b/src/features/users/organisms/formUpdate/FormUpdateUser.tsx
index 81e2e805..d8bc4f94 100644
--- a/src/features/users/organisms/formUpdate/FormUpdateUser.tsx
+++ b/src/features/users/organisms/formUpdate/FormUpdateUser.tsx
@@ -6,8 +6,8 @@ import { useForm } from 'react-hook-form';
 import { toast } from 'react-toastify';
 
 import { updateUser } from '@/features/profile/actions/ProfileAction';
-import { User } from '@/features/shared/actions/fetchUsers';
 import { InputForm, InputType } from '@/features/shared/atoms/inputForm/InputForm';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 import { BtnFormCreateUpdate } from '@/features/shared/molecules/btnFormCreateUpdate/BtnFormCreateUpdate';
 import { activeOptions } from '@/features/users/constants/selectOptionsData';
 import { transformToInputOptions } from '@/features/users/helpers/transformToInputOptions';
@@ -18,7 +18,7 @@ import { updateUserSchema } from '@/features/users/validations/usersSchema';
 
 type Props = {
   id: string;
-  data: User;
+  data: UserHasRole;
   roles: RolesResponse[];
 };
 
@@ -29,12 +29,12 @@ export const FormUpdateUser = ({ id, data, roles }: Props) => {
     formState: { errors },
   } = useForm<IUpdateUser>({
     defaultValues: {
-      role: data.role.id,
-      account_active: data.account_active,
-      first_name: data.first_name ?? undefined,
-      last_name: data.last_name ?? undefined,
-      phone: Number(data.phone) ?? undefined,
-      email: data.email ?? undefined,
+      role: data.role_id.id,
+      account_active: data.user_id.account_active,
+      first_name: data.user_id.first_name,
+      last_name: data.user_id.last_name,
+      phone: data.user_id?.phone,
+      email: data.user_id.email,
     },
     resolver: yupResolver(updateUserSchema),
   });
@@ -108,7 +108,7 @@ export const FormUpdateUser = ({ id, data, roles }: Props) => {
           classNameError={style.inputError}
         />
         <InputForm<IUpdateUser>
-          type={'number'}
+          type={'text'}
           name={'phone'}
           label={t('phone')}
           register={register}
diff --git a/src/features/users/template/UsersTemplate.tsx b/src/features/users/template/UsersTemplate.tsx
index 556d2c44..882e3273 100644
--- a/src/features/users/template/UsersTemplate.tsx
+++ b/src/features/users/template/UsersTemplate.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 
-import { fetchUsers } from '@/features/shared/actions/fetchUsers';
+import { SupabasePagination } from '@/features/shared/actions/supabase/getPaginatedEntity';
+import { listUsers } from '@/features/shared/actions/userActions';
+import { UserHasRole } from '@/features/shared/interfaces/UserHasRole';
 import { UserList } from '@/features/users/organisms/UsersList';
 import { QueryParams } from '@/service/IHttpParams';
 
@@ -9,24 +11,10 @@ type Props = {
 };
 
 export const UsersTemplate = async ({ queryParams }: Props) => {
-  const result = await fetchUsers({ queryParams });
-  const data = result.data ?? [];
-  const pagination = result.pagination ?? {
-    total: 0,
-    offset: 0,
-    limit: 0,
-    perPage: 0,
-    currentPage: 1,
-    lastPage: 1,
-    from: 0,
-    to: 0,
-    path: '',
-    firstUrl: '',
-    lastUrl: '',
-    nextUrl: '',
-    prevUrl: '',
-    currentUrl: '',
-  };
+  const result = await listUsers({ queryParams });
+
+  const paginatedResponse = result as SupabasePagination<UserHasRole>;
+  const { data, pagination } = paginatedResponse;
 
   return <UserList users={data} pagination={pagination} />;
 };
diff --git a/src/features/users/template/createUser/CreateUserTemplate.tsx b/src/features/users/template/createUser/CreateUserTemplate.tsx
index 08e405cf..6b7b51e8 100644
--- a/src/features/users/template/createUser/CreateUserTemplate.tsx
+++ b/src/features/users/template/createUser/CreateUserTemplate.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { getRoles } from '@/features/shared/actions/fetchUsers';
+import { getRoles } from '@/features/shared/actions/roleActions';
 import { SubTitle } from '@/features/users/atoms/subtitle/Subtitle';
 import { RolesResponse } from '@/features/users/interfaces/rolesResponse';
 import { FormCreate } from '@/features/users/organisms/formCreate/FormCreateUser';
diff --git a/src/features/users/template/updateUser/UpdateUserTemplate.tsx b/src/features/users/template/updateUser/UpdateUserTemplate.tsx
index 6af47d80..3f934cde 100644
--- a/src/features/users/template/updateUser/UpdateUserTemplate.tsx
+++ b/src/features/users/template/updateUser/UpdateUserTemplate.tsx
@@ -1,7 +1,8 @@
 import React from 'react';
 import { getTranslations } from 'next-intl/server';
 
-import { fetchUser, getRoles } from '@/features/shared/actions/fetchUsers';
+import { getRoles } from '@/features/shared/actions/roleActions';
+import { fetchUser } from '@/features/shared/actions/userActions';
 import { icons } from '@/features/shared/hooks/icons';
 
 import { RolesResponse } from '@/features/users/interfaces/rolesResponse';
@@ -14,6 +15,7 @@ type Props = {
 };
 export const UpdateUserTemplate = async ({ id }: Props) => {
   const data = await fetchUser(id);
+
   const roles = await getRoles();
   const t = await getTranslations('Update');
   const { IoCreateOutline } = icons();
diff --git a/src/features/users/validations/usersSchema.ts b/src/features/users/validations/usersSchema.ts
index d0ba0afa..8b135bb2 100644
--- a/src/features/users/validations/usersSchema.ts
+++ b/src/features/users/validations/usersSchema.ts
@@ -32,7 +32,7 @@ export const updateUserSchema = yup
   .shape({
     first_name: yup.string().min(3).required('*User name is a required field'),
     last_name: yup.string().min(3).required('*Lastname is a required field'),
-    phone: yup.number(),
+    phone: yup.string(),
     email: yup.string().email('Enter a valid email address').required('*Email is a required field'),
     role: yup.string().min(3).required('*Role is a required field'),
     account_active: yup.boolean().required('*Active user is a required field'),
diff --git a/src/lib/SupabaseBrowserClientManager.ts b/src/lib/SupabaseBrowserClientManager.ts
new file mode 100644
index 00000000..a97b94ca
--- /dev/null
+++ b/src/lib/SupabaseBrowserClientManager.ts
@@ -0,0 +1,11 @@
+import { createBrowserClient } from '@supabase/ssr';
+
+import { env } from '@/config/api';
+
+class SupabaseBrowserClientManager {
+  getBrowserClient() {
+    return createBrowserClient(env.supabaseUrl!, env.supabaseAnonKey!);
+  }
+}
+
+export const supabaseBrowserClientManager = new SupabaseBrowserClientManager();
diff --git a/src/lib/SupabaseClientManager.ts b/src/lib/SupabaseServerClientManager.ts
similarity index 88%
rename from src/lib/SupabaseClientManager.ts
rename to src/lib/SupabaseServerClientManager.ts
index dfc0e81a..8a353602 100644
--- a/src/lib/SupabaseClientManager.ts
+++ b/src/lib/SupabaseServerClientManager.ts
@@ -1,10 +1,9 @@
 import { createServerClient, type CookieOptions } from '@supabase/ssr';
-
 import { cookies } from 'next/headers';
 
 import { env } from '@/config/api';
 
-class SupabaseClientManager {
+class SupabaseServerClientManager {
   private createClientWithOptions(options: object) {
     const cookieStore = cookies();
     return createServerClient(env.supabaseUrl!, env.supabaseAnonKey!, {
@@ -31,7 +30,7 @@ class SupabaseClientManager {
     });
   }
 
-  getPrivateClient() {
+  getServerPrivateClient() {
     return this.createClientWithOptions({
       global: {
         headers: {
@@ -41,9 +40,9 @@ class SupabaseClientManager {
     });
   }
 
-  getPublicClient() {
+  getServerPublicClient() {
     return this.createClientWithOptions({});
   }
 }
 
-export const supabaseClientManager = new SupabaseClientManager();
+export const supabaseServerClientManager = new SupabaseServerClientManager();
diff --git a/src/service/HttpHelper.ts b/src/service/HttpHelper.ts
index fcb6a8c9..22b82357 100644
--- a/src/service/HttpHelper.ts
+++ b/src/service/HttpHelper.ts
@@ -1,6 +1,6 @@
-import { supabaseClientManager } from '@/lib/SupabaseClientManager';
+import { supabaseServerClientManager } from '@/lib/SupabaseServerClientManager';
 
-import { config as Config } from '../features/shared/actions/config';
+import { config as Config } from '../config/config';
 
 import { HeadersContentType, QueryParams } from './IHttpParams';
 
@@ -12,7 +12,7 @@ interface DefaultHeaders {
 export async function getDefaultHeaders(headers?: HeadersContentType): Promise<DefaultHeaders> {
   const { credentials } = Config.apiGateway.server;
 
-  const supabase = supabaseClientManager.getPublicClient();
+  const supabase = supabaseServerClientManager.getServerPublicClient();
 
   const {
     data: { session },
diff --git a/src/service/IHttpParams.ts b/src/service/IHttpParams.ts
index b1ef152a..e752b81a 100644
--- a/src/service/IHttpParams.ts
+++ b/src/service/IHttpParams.ts
@@ -26,8 +26,8 @@ export enum HeadersContentType {
 }
 
 export interface PaginationParams {
-  limit: string | null;
-  offset: string | null;
+  limit: string;
+  offset: string;
 }
 
 export interface QueryParams {