diff --git a/public/language/en.json b/public/language/en.json
index 0f386ef..bafee50 100644
--- a/public/language/en.json
+++ b/public/language/en.json
@@ -136,5 +136,10 @@
     "reading": "Reading",
     "continue-reading": "Continue Reading",
     "delete-all": "Delete All",
+    "price": "Price",
+    "content": "Content",
+    "collaborators": "Collaborators",
+    "update-by": "Update By",
+    "search-for-users": "Search for users",
     "description_0": "The largest online comic reading website updated continuously every day - Join reading and discussing with more than 10 million members 🎉 at YouthBook ❤️💛💚"
 }
\ No newline at end of file
diff --git a/public/language/vi.json b/public/language/vi.json
index 890c907..491aae3 100644
--- a/public/language/vi.json
+++ b/public/language/vi.json
@@ -137,5 +137,10 @@
     "not-found-history": "Không tìm thấy lịch sử",
     "continue-reading": "Đọc tiếp",
     "delete-all": "Xóa tất cả",
+    "price": "Giá",
+    "content": "Nội dung",
+    "collaborators": "Collaborators",
+    "update-by": "Người cập nhật",
+    "search-for-users": "Tìm tài khoản",
     "description_0": "Web đọc truyện tranh online lớn nhất được cập nhật liên tục mỗi ngày - Cùng tham gia đọc truyện và thảo luận với hơn 10 triệu thành viên 🎉 tại YouthBook ❤️💛💚"
 }
\ No newline at end of file
diff --git a/src/components/Header/AccountInfo.tsx b/src/components/Header/AccountInfo.tsx
index 2d87ce6..79b9861 100644
--- a/src/components/Header/AccountInfo.tsx
+++ b/src/components/Header/AccountInfo.tsx
@@ -85,7 +85,7 @@ const AccountInfo = ({ userInfo }: AccountInfoProps) => {
                             <span className="mt-[2px] text-xs">{translate('account-page')}</span>
                         </Link>
                         <span className="my-1 h-[1px] w-[80%] border-b border-dashed" />
-                        {userInfo.role === ROLES.admin && (
+                        {(userInfo.role === ROLES.admin || userInfo.role === ROLES.collaborators) && (
                             <>
                                 <Link
                                     title={translate('management-page')}
diff --git a/src/components/Header/Navbar.tsx b/src/components/Header/Navbar.tsx
index 7a0cdd9..6218887 100644
--- a/src/components/Header/Navbar.tsx
+++ b/src/components/Header/Navbar.tsx
@@ -12,14 +12,14 @@ const Navbar = () => {
         {
             title: translate('new-comic-title'),
             link: {
-                pathname: APP_PATH.new,
+                pathname: APP_PATH.recent,
                 search: createSearchParams({
                     type: 'all',
                     page: '1',
                 }).toString(),
             },
             name: translate('new-comic'),
-            isCurrent: useMatch(APP_PATH.new),
+            isCurrent: useMatch(APP_PATH.recent),
         },
         {
             title: translate('top-comic-title'),
diff --git a/src/components/Pagination/Pagination.tsx b/src/components/Pagination/Pagination.tsx
index d8f7748..a3bf2c7 100644
--- a/src/components/Pagination/Pagination.tsx
+++ b/src/components/Pagination/Pagination.tsx
@@ -15,7 +15,6 @@ const Pagination = ({ page, totalPage, queryConfig }: PaginationProps) => {
     const RANGE = 2;
     const lang = useAppSelector((state) => selectLanguage(state.settings));
     const translate = useTranslation(lang);
-    if (totalPage <= 1) return <></>;
 
     const _renderPagination = () => {
         let dotAfter = false;
diff --git a/src/components/Preview/ListPreview.tsx b/src/components/Preview/ListPreview.tsx
index c4ce641..e24a1c6 100644
--- a/src/components/Preview/ListPreview.tsx
+++ b/src/components/Preview/ListPreview.tsx
@@ -8,7 +8,7 @@ interface ListPreviewProps {
 
 const ListPreview = ({ data, className }: ListPreviewProps) => {
     return (
-        <ul className={className || 'mt-5 grid grid-cols-3 gap-3 gap-y-5 sm:grid-cols-4 md:grid-cols-5'}>
+        <ul className={className || 'mt-5 grid grid-cols-3 gap-3 gap-y-5 sm:grid-cols-4 md:grid-cols-4'}>
             {data &&
                 data.map((item) => (
                     <li key={item._id}>
diff --git a/src/components/Preview/TopPreview.tsx b/src/components/Preview/TopPreview.tsx
index 3a2eaa9..6cdcf5a 100644
--- a/src/components/Preview/TopPreview.tsx
+++ b/src/components/Preview/TopPreview.tsx
@@ -50,7 +50,7 @@ const TopPreview = ({ data, top = 7 }: TopPreviewProps) => {
                             <Link
                                 title={item.name}
                                 to={`${APP_PATH.comics}/${item._id}`}
-                                className="text-base font-semibold leading-4 text-black hover:text-primary dark:text-white dark:hover:text-primary">
+                                className="line-clamp-2 text-base font-semibold leading-4 text-black hover:text-primary dark:text-white dark:hover:text-primary">
                                 {item.name}
                             </Link>
                             <p className="ml-[1px] line-clamp-1 text-sm leading-5 text-gray-400">
diff --git a/src/constants/settings.ts b/src/constants/settings.ts
index 99bd19a..f428d9b 100644
--- a/src/constants/settings.ts
+++ b/src/constants/settings.ts
@@ -27,6 +27,7 @@ export const COOKIE_KEYS = {
 
 export const ROLES = {
     admin: 1,
+    collaborators: 2,
 };
 
 export const ROLE_LIST = [
@@ -38,6 +39,10 @@ export const ROLE_LIST = [
         value: 1,
         name: 'admin',
     },
+    {
+        value: 2,
+        name: 'collaborators',
+    },
 ];
 
 export const COMIC_TYPES_LIST = [
@@ -74,16 +79,20 @@ export const FILTER_OPTIONS = [
         name: 'All',
         value: 0,
     },
-    {
-        name: '1 Year',
-        value: 12,
-    },
     {
         name: '3 Months',
-        value: 3,
+        value: 3 * 30,
     },
     {
         name: '1 Month',
+        value: 30,
+    },
+    {
+        name: '1 Week',
+        value: 7,
+    },
+    {
+        name: '1 Day',
         value: 1,
     },
 ];
diff --git a/src/layouts/ManagementLayout.tsx b/src/layouts/ManagementLayout.tsx
index 1fe126c..3597e25 100644
--- a/src/layouts/ManagementLayout.tsx
+++ b/src/layouts/ManagementLayout.tsx
@@ -1,13 +1,23 @@
 import { APP_PATH } from '@/constants/path';
+import { COOKIE_KEYS, ROLES } from '@/constants/settings';
 import { useAppSelector } from '@/hooks/reduxHook';
 import useTranslation from '@/hooks/useTranslation';
 import { selectLanguage } from '@/redux/slices/settings';
+import { getCookie } from '@/utils/cookies';
+import { decodeJWTToken } from '@/utils/token';
 import { Helmet } from 'react-helmet-async';
 import { Link, Outlet } from 'react-router-dom';
 
 const ManagementLayout = () => {
     const lang = useAppSelector((state) => selectLanguage(state.settings));
     const translate = useTranslation(lang);
+    const token = getCookie(COOKIE_KEYS.token);
+    const userInfoPayload = decodeJWTToken(token);
+
+    if (!userInfoPayload) {
+        window.location.href = APP_PATH.home;
+    }
+
     return (
         <div className="container ">
             <Helmet>
@@ -20,108 +30,114 @@ const ManagementLayout = () => {
             <div className="flex min-h-[600px] justify-start gap-4 px-4 pt-4 xl:px-0">
                 <div className="min-w-fit overflow-y-auto bg-gray-100 px-3 py-4 dark:bg-gray-800">
                     <ul className="space-y-2 font-medium">
-                        <li>
-                            <Link
-                                title={translate('comic-management')}
-                                to={APP_PATH.management_comics}
-                                className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
-                                <svg
-                                    className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-                                    viewBox="0 0 24 24"
-                                    fill="currentColor"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <g
-                                        id="SVGRepo_bgCarrier"
-                                        strokeWidth="0"></g>
-                                    <g
-                                        id="SVGRepo_tracerCarrier"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"></g>
-                                    <g id="SVGRepo_iconCarrier">
-                                        {' '}
-                                        <path
-                                            d="M4 19V6.2C4 5.0799 4 4.51984 4.21799 4.09202C4.40973 3.71569 4.71569 3.40973 5.09202 3.21799C5.51984 3 6.0799 3 7.2 3H16.8C17.9201 3 18.4802 3 18.908 3.21799C19.2843 3.40973 19.5903 3.71569 19.782 4.09202C20 4.51984 20 5.0799 20 6.2V17H6C4.89543 17 4 17.8954 4 19ZM4 19C4 20.1046 4.89543 21 6 21H20M9 7H15M9 11H15M19 17V21"
-                                            stroke="#000000"
-                                            strokeWidth="2"
-                                            strokeLinecap="round"
-                                            strokeLinejoin="round"></path>{' '}
-                                    </g>
-                                </svg>
-                                <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('comic-management')}</span>
-                            </Link>
-                        </li>
-                        <li>
-                            <Link
-                                title={translate('genres-management')}
-                                to={APP_PATH.management_genres}
-                                className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
-                                <svg
-                                    className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-                                    viewBox="0 0 24 24"
-                                    fill="currentColor"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <g
-                                        id="SVGRepo_bgCarrier"
-                                        strokeWidth="0"></g>
-                                    <g
-                                        id="SVGRepo_tracerCarrier"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"></g>
-                                    <g id="SVGRepo_iconCarrier">
-                                        {' '}
-                                        <path
-                                            d="M4 19V6.2C4 5.0799 4 4.51984 4.21799 4.09202C4.40973 3.71569 4.71569 3.40973 5.09202 3.21799C5.51984 3 6.0799 3 7.2 3H16.8C17.9201 3 18.4802 3 18.908 3.21799C19.2843 3.40973 19.5903 3.71569 19.782 4.09202C20 4.51984 20 5.0799 20 6.2V17H6C4.89543 17 4 17.8954 4 19ZM4 19C4 20.1046 4.89543 21 6 21H20M9 7H15M9 11H15M19 17V21"
-                                            stroke="#000000"
-                                            strokeWidth="2"
+                        {(userInfoPayload?.role === ROLES.admin || userInfoPayload?.role === ROLES.collaborators) && (
+                            <li>
+                                <Link
+                                    title={translate('billing-management')}
+                                    to={APP_PATH.management_billing}
+                                    className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                                    <svg
+                                        className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                                        viewBox="0 0 12 12"
+                                        enableBackground="new 0 0 12 12"
+                                        version="1.1"
+                                        fill="currentColor"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <g
+                                            id="SVGRepo_bgCarrier"
+                                            strokeWidth="0"></g>
+                                        <g
+                                            id="SVGRepo_tracerCarrier"
                                             strokeLinecap="round"
-                                            strokeLinejoin="round"></path>{' '}
-                                    </g>
-                                </svg>
-                                <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('genres-management')}</span>
-                            </Link>
-                        </li>
-                        <li>
-                            <Link
-                                title={translate('user-management')}
-                                to={APP_PATH.management_users}
-                                className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
-                                <svg
-                                    className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-                                    aria-hidden="true"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                    fill="currentColor"
-                                    viewBox="0 0 20 18">
-                                    <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
-                                </svg>
-                                <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('user-management')}</span>
-                            </Link>
-                        </li>
-                        <li>
-                            <Link
-                                title={translate('billing-management')}
-                                to={APP_PATH.management_billing}
-                                className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
-                                <svg
-                                    className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
-                                    viewBox="0 0 12 12"
-                                    enableBackground="new 0 0 12 12"
-                                    version="1.1"
-                                    fill="currentColor"
-                                    xmlns="http://www.w3.org/2000/svg">
-                                    <g
-                                        id="SVGRepo_bgCarrier"
-                                        strokeWidth="0"></g>
-                                    <g
-                                        id="SVGRepo_tracerCarrier"
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"></g>
-                                    <g id="SVGRepo_iconCarrier">
-                                        <path d="M11,1.5H1c-0.5517578,0-1,0.4482422-1,1v7c0,0.5517578,0.4482422,1,1,1h10c0.5517578,0,1-0.4482422,1-1v-7 C12,1.9482422,11.5517578,1.5,11,1.5z M4,8.5H2v-1h2V8.5z M8,8.5H5v-1h3V8.5z"></path>
-                                    </g>
-                                </svg>
-                                <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('billing-management')}</span>
-                            </Link>
-                        </li>
+                                            strokeLinejoin="round"></g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M11,1.5H1c-0.5517578,0-1,0.4482422-1,1v7c0,0.5517578,0.4482422,1,1,1h10c0.5517578,0,1-0.4482422,1-1v-7 C12,1.9482422,11.5517578,1.5,11,1.5z M4,8.5H2v-1h2V8.5z M8,8.5H5v-1h3V8.5z"></path>
+                                        </g>
+                                    </svg>
+                                    <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('billing-management')}</span>
+                                </Link>
+                            </li>
+                        )}
+                        {userInfoPayload?.role === ROLES.admin && (
+                            <>
+                                <li>
+                                    <Link
+                                        title={translate('comic-management')}
+                                        to={APP_PATH.management_comics}
+                                        className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                                        <svg
+                                            className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                                            viewBox="0 0 24 24"
+                                            fill="currentColor"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <g
+                                                id="SVGRepo_bgCarrier"
+                                                strokeWidth="0"></g>
+                                            <g
+                                                id="SVGRepo_tracerCarrier"
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"></g>
+                                            <g id="SVGRepo_iconCarrier">
+                                                {' '}
+                                                <path
+                                                    d="M4 19V6.2C4 5.0799 4 4.51984 4.21799 4.09202C4.40973 3.71569 4.71569 3.40973 5.09202 3.21799C5.51984 3 6.0799 3 7.2 3H16.8C17.9201 3 18.4802 3 18.908 3.21799C19.2843 3.40973 19.5903 3.71569 19.782 4.09202C20 4.51984 20 5.0799 20 6.2V17H6C4.89543 17 4 17.8954 4 19ZM4 19C4 20.1046 4.89543 21 6 21H20M9 7H15M9 11H15M19 17V21"
+                                                    stroke="#000000"
+                                                    strokeWidth="2"
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"></path>{' '}
+                                            </g>
+                                        </svg>
+                                        <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('comic-management')}</span>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link
+                                        title={translate('genres-management')}
+                                        to={APP_PATH.management_genres}
+                                        className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                                        <svg
+                                            className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                                            viewBox="0 0 24 24"
+                                            fill="currentColor"
+                                            xmlns="http://www.w3.org/2000/svg">
+                                            <g
+                                                id="SVGRepo_bgCarrier"
+                                                strokeWidth="0"></g>
+                                            <g
+                                                id="SVGRepo_tracerCarrier"
+                                                strokeLinecap="round"
+                                                strokeLinejoin="round"></g>
+                                            <g id="SVGRepo_iconCarrier">
+                                                {' '}
+                                                <path
+                                                    d="M4 19V6.2C4 5.0799 4 4.51984 4.21799 4.09202C4.40973 3.71569 4.71569 3.40973 5.09202 3.21799C5.51984 3 6.0799 3 7.2 3H16.8C17.9201 3 18.4802 3 18.908 3.21799C19.2843 3.40973 19.5903 3.71569 19.782 4.09202C20 4.51984 20 5.0799 20 6.2V17H6C4.89543 17 4 17.8954 4 19ZM4 19C4 20.1046 4.89543 21 6 21H20M9 7H15M9 11H15M19 17V21"
+                                                    stroke="#000000"
+                                                    strokeWidth="2"
+                                                    strokeLinecap="round"
+                                                    strokeLinejoin="round"></path>{' '}
+                                            </g>
+                                        </svg>
+                                        <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('genres-management')}</span>
+                                    </Link>
+                                </li>
+                                <li>
+                                    <Link
+                                        title={translate('user-management')}
+                                        to={APP_PATH.management_users}
+                                        className="group flex items-center rounded-lg fill-gray-700 p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700">
+                                        <svg
+                                            className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
+                                            aria-hidden="true"
+                                            xmlns="http://www.w3.org/2000/svg"
+                                            fill="currentColor"
+                                            viewBox="0 0 20 18">
+                                            <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
+                                        </svg>
+                                        <span className="ms-3 flex-1 whitespace-nowrap capitalize">{translate('user-management')}</span>
+                                    </Link>
+                                </li>
+                            </>
+                        )}
                     </ul>
                 </div>
                 <Outlet />
diff --git a/src/pages/Account/AccountInfo.tsx b/src/pages/Account/AccountInfo.tsx
index 78fb04f..e6fd731 100644
--- a/src/pages/Account/AccountInfo.tsx
+++ b/src/pages/Account/AccountInfo.tsx
@@ -61,14 +61,30 @@ const AccountInfo: React.FC = () => {
         refEmail.current && (refEmail.current.value = '');
     };
 
+    const handleUpdateAvatar = (e: React.ChangeEvent<HTMLInputElement>) => {
+        console.log(e.target.value);
+    };
+
     return (
         <div className="flex w-full justify-center rounded-lg border bg-white shadow dark:border dark:border-gray-700 dark:bg-gray-800 md:mt-0 xl:p-0">
             <div className="mx-4 mt-24 flex flex-col items-center gap-4">
-                <img
-                    className="h-[200px] w-[200px] rounded"
-                    src="https://randomuser.me/api/portraits/women/91.jpg"
-                    alt="Default avatar"
-                />
+                {userInfo?.avatarImg ? (
+                    <img
+                        className="h-[200px] w-[200px] rounded"
+                        src={userInfo.avatarImg}
+                    />
+                ) : (
+                    <svg
+                        className="h-[200px] w-[200px] rounded"
+                        viewBox="0 0 1024 1024"
+                        version="1.1"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M508.3136 498.2784A221.4912 221.4912 0 1 0 286.72 276.48a221.7984 221.7984 0 0 0 221.5936 221.7984z m0-393.8304A172.3392 172.3392 0 1 1 336.0768 276.48a172.4416 172.4416 0 0 1 172.2368-172.032zM680.5504 536.7808a44.7488 44.7488 0 0 0-37.5808 3.2768 276.48 276.48 0 0 1-266.752 1.4336 44.6464 44.6464 0 0 0-37.6832-2.8672A481.28 481.28 0 0 0 30.0032 942.08a24.576 24.576 0 0 0 22.016 26.9312h2.4576a24.576 24.576 0 0 0 24.4736-22.1184 432.5376 432.5376 0 0 1 275.0464-361.472A326.5536 326.5536 0 0 0 665.6 583.68a437.4528 437.4528 0 0 1 279.4496 362.9056 24.576 24.576 0 1 0 48.9472-4.5056 487.0144 487.0144 0 0 0-313.4464-405.2992z"
+                            fill=""
+                        />
+                    </svg>
+                )}
                 <div className="flex w-full flex-col items-center justify-center gap-4">
                     <label
                         htmlFor="files"
@@ -77,6 +93,7 @@ const AccountInfo: React.FC = () => {
                     </label>
                     <input
                         id="files"
+                        onChange={(e) => handleUpdateAvatar(e)}
                         hidden={true}
                         accept=".jpg,.jpeg,.png"
                         type="file"
diff --git a/src/pages/Account/PaymentHistory.tsx b/src/pages/Account/PaymentHistory.tsx
index a43e1e1..0998b6a 100644
--- a/src/pages/Account/PaymentHistory.tsx
+++ b/src/pages/Account/PaymentHistory.tsx
@@ -1,4 +1,5 @@
 import paymentApis from '@/apis/payment';
+import { Pagination } from '@/components/Pagination';
 import { COOKIE_KEYS, FILTER_OPTIONS, STATUS_OPTIONS } from '@/constants/settings';
 import { useAppSelector } from '@/hooks/reduxHook';
 import useRequestParams from '@/hooks/useRequestParams';
@@ -156,6 +157,13 @@ const PaymentHistory: React.FC = () => {
                     </tbody>
                 </table>
             </div>
+            {resultData?.totalPage && (
+                <Pagination
+                    queryConfig={queryParams}
+                    page={resultData?.currentPage}
+                    totalPage={resultData?.totalPage}
+                />
+            )}
         </div>
     );
 };
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 852b799..976f3b5 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -69,12 +69,12 @@ const Home: React.FC = () => {
                     img={iconRecommend}
                     title={translate('recommend')}
                     url={APP_PATH.recommend}
-                    isShowMore={true}
+                    isShowMore={false}
                 />
                 <Banner data={recommendData?.data} />
             </section>
             <div className="flex flex-row gap-4 pt-10">
-                <div className="">
+                <div className="flex-1">
                     <TitlePreview
                         img={iconRecent}
                         title={translate('recent-update')}
@@ -90,11 +90,11 @@ const Home: React.FC = () => {
                         />
                     )}
                 </div>
-                <div className="ml-4 hidden w-[350px] lg:block">
+                <div className="ml-4 hidden w-[300px] lg:block">
                     <div className="mb-2 border p-4">
                         <TitlePreview
                             title={translate('top-daily')}
-                            url={APP_PATH.recent}
+                            url={APP_PATH.top}
                             isShowMore={true}
                         />
                         {topDailyData && <TopPreview data={topDailyData?.data} />}
@@ -102,7 +102,7 @@ const Home: React.FC = () => {
                     <div className="mb-2 border p-4">
                         <TitlePreview
                             title={translate('top-weekly')}
-                            url={APP_PATH.recent}
+                            url={APP_PATH.top}
                             isShowMore={true}
                         />
                         {topWeeklyData && <TopPreview data={topWeeklyData?.data} />}
@@ -110,7 +110,7 @@ const Home: React.FC = () => {
                     <div className="mb-2 border p-4">
                         <TitlePreview
                             title={translate('top-monthly')}
-                            url={APP_PATH.recent}
+                            url={APP_PATH.top}
                             isShowMore={true}
                         />
                         {topMonthlyData && <TopPreview data={topMonthlyData?.data} />}
diff --git a/src/pages/Management/ChapterManagement.tsx b/src/pages/Management/ChapterManagement.tsx
index c5ac6bc..fab3e4a 100644
--- a/src/pages/Management/ChapterManagement.tsx
+++ b/src/pages/Management/ChapterManagement.tsx
@@ -14,6 +14,7 @@ import { useParams } from 'react-router-dom';
 import moment from 'moment';
 import Swal from 'sweetalert2';
 import useAlertMsg from '@/hooks/useAlertMsg';
+import { formatCurrency } from '@/utils/format';
 
 const ChapterManagement: React.FC = () => {
     const [isShowEditAction, setIsShowEditAction] = useState<boolean>(false);
@@ -279,6 +280,11 @@ const ChapterManagement: React.FC = () => {
                                 className="px-6 py-3">
                                 {translate('name')}
                             </th>
+                            <th
+                                scope="col"
+                                className="px-6 py-3">
+                                {translate('price')}
+                            </th>
                             <th
                                 scope="col"
                                 className="px-6 py-3">
@@ -302,7 +308,8 @@ const ChapterManagement: React.FC = () => {
                                 <tr
                                     key={chapter._id}
                                     className="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
-                                    <td className="px-6 py-4 font-bold capitalize">{chapter.name}</td>
+                                    <td className="max-w-60 px-6 py-4 font-bold capitalize">{chapter.name}</td>
+                                    <td className="min-w-20 px-6 py-4 font-bold text-primary">{formatCurrency(chapter.price)}</td>
                                     <td className="px-6 py-4 capitalize">{moment(chapter.createTime).format('DD/MM/YYYY')}</td>
                                     <td className="px-6 py-4 capitalize">{moment(chapter.updateTime).format('DD/MM/YYYY')}</td>
                                     <td className="px-6 py-4">
diff --git a/src/pages/Management/PaymentManagement.tsx b/src/pages/Management/PaymentManagement.tsx
index 3472aa3..8feef4c 100644
--- a/src/pages/Management/PaymentManagement.tsx
+++ b/src/pages/Management/PaymentManagement.tsx
@@ -1,4 +1,5 @@
 import paymentApis from '@/apis/payment';
+import { Pagination } from '@/components/Pagination';
 import { FILTER_OPTIONS, STATUS_OPTIONS } from '@/constants/settings';
 import { useAppSelector } from '@/hooks/reduxHook';
 import useAlertMsg from '@/hooks/useAlertMsg';
@@ -22,11 +23,13 @@ const PaymentManagement: React.FC = () => {
 
     const [filterOptions, setFilterOptions] = useState<number>(0);
     const [statusOptions, setStatusOptions] = useState<number[]>(STATUS_OPTIONS.map((x) => x.value));
+    const [searchText, setSearchText] = useState<string>('');
 
     const { data: transactionDataResult } = useQuery({
-        queryKey: ['getAllTransaction', queryParams, filterOptions, statusOptions],
-        queryFn: () => paymentApis.getAllTransaction(filterOptions, statusOptions, queryParams),
+        queryKey: ['getAllTransaction', { ...queryParams, q: searchText }, filterOptions, statusOptions],
+        queryFn: () => paymentApis.getAllTransaction(filterOptions, statusOptions, { ...queryParams, q: searchText }),
         staleTime: 60 * 1000,
+        // enabled:
     });
 
     const resultData = transactionDataResult?.data;
@@ -56,47 +59,74 @@ const PaymentManagement: React.FC = () => {
     return (
         <div className="relative h-full w-full overflow-x-auto border-2 p-8 sm:rounded-lg">
             <div className="flex-column flex flex-wrap items-center justify-between space-y-4 bg-white pb-4 dark:bg-gray-700 md:flex-row md:space-y-0">
-                <div className="inline-flex items-center rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:focus:ring-gray-700">
-                    {FILTER_OPTIONS.map((option) => (
-                        <>
-                            <div
-                                key={option.value}
-                                className="mb-[0.125rem] mr-8 inline-block min-h-[1.5rem] pl-[1.5rem]">
+                <div className="flex flex-col">
+                    <div className="inline-flex items-center rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:focus:ring-gray-700">
+                        {FILTER_OPTIONS.map((option) => (
+                            <>
+                                <div
+                                    key={option.value}
+                                    className="mb-[0.125rem] mr-8 inline-block min-h-[1.5rem] pl-[1.5rem]">
+                                    <input
+                                        className="relative float-left -ml-[1.5rem] mr-1 mt-0.5 h-5 w-5 appearance-none rounded-full border-2 border-solid border-neutral-300 before:pointer-events-none before:absolute before:h-4 before:w-4 before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-[0px_0px_0px_13px_transparent] before:content-[''] after:absolute after:z-[1] after:block after:h-4 after:w-4 after:rounded-full after:content-[''] checked:border-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:left-1/2 checked:after:top-1/2 checked:after:h-[0.625rem] checked:after:w-[0.625rem] checked:after:rounded-full checked:after:border-primary checked:after:bg-primary checked:after:content-[''] checked:after:[transform:translate(-50%,-50%)] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:outline-none focus:ring-0 focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:border-primary checked:focus:before:scale-100 checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:border-neutral-600 dark:checked:border-primary dark:checked:after:border-primary dark:checked:after:bg-primary dark:focus:before:shadow-[0px_0px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:border-primary dark:checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca]"
+                                        type="radio"
+                                        name="inlineRadioOptions"
+                                        id={option.name}
+                                        value={option.value}
+                                        checked={option.value == filterOptions}
+                                        onChange={() => setFilterOptions(option.value)}
+                                    />
+                                    <label
+                                        className="mt-px inline-block pl-[0.15rem] hover:cursor-pointer"
+                                        htmlFor={option.name}>
+                                        {translate(option.name)}
+                                    </label>
+                                </div>
+                            </>
+                        ))}
+                    </div>
+                    <div className="inline-flex items-center rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:focus:ring-gray-700">
+                        {STATUS_OPTIONS.map((option) => (
+                            <>
                                 <input
-                                    className="relative float-left -ml-[1.5rem] mr-1 mt-0.5 h-5 w-5 appearance-none rounded-full border-2 border-solid border-neutral-300 before:pointer-events-none before:absolute before:h-4 before:w-4 before:scale-0 before:rounded-full before:bg-transparent before:opacity-0 before:shadow-[0px_0px_0px_13px_transparent] before:content-[''] after:absolute after:z-[1] after:block after:h-4 after:w-4 after:rounded-full after:content-[''] checked:border-primary checked:before:opacity-[0.16] checked:after:absolute checked:after:left-1/2 checked:after:top-1/2 checked:after:h-[0.625rem] checked:after:w-[0.625rem] checked:after:rounded-full checked:after:border-primary checked:after:bg-primary checked:after:content-[''] checked:after:[transform:translate(-50%,-50%)] hover:cursor-pointer hover:before:opacity-[0.04] hover:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:shadow-none focus:outline-none focus:ring-0 focus:before:scale-100 focus:before:opacity-[0.12] focus:before:shadow-[0px_0px_0px_13px_rgba(0,0,0,0.6)] focus:before:transition-[box-shadow_0.2s,transform_0.2s] checked:focus:border-primary checked:focus:before:scale-100 checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca] checked:focus:before:transition-[box-shadow_0.2s,transform_0.2s] dark:border-neutral-600 dark:checked:border-primary dark:checked:after:border-primary dark:checked:after:bg-primary dark:focus:before:shadow-[0px_0px_0px_13px_rgba(255,255,255,0.4)] dark:checked:focus:border-primary dark:checked:focus:before:shadow-[0px_0px_0px_13px_#3b71ca]"
-                                    type="radio"
-                                    name="inlineRadioOptions"
+                                    onClick={(e) => onStatusChange(e, option.value)}
                                     id={option.name}
-                                    value={option.value}
-                                    checked={option.value == filterOptions}
-                                    onChange={() => setFilterOptions(option.value)}
+                                    type="checkbox"
+                                    checked={statusOptions.includes(option.value)}
+                                    className="focus:ring-3 h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-primary dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary"
                                 />
                                 <label
-                                    className="mt-px inline-block pl-[0.15rem] hover:cursor-pointer"
-                                    htmlFor={option.name}>
+                                    htmlFor={option.name}
+                                    className="w-30 mb-2 ml-2 mr-6 mt-2 text-sm font-medium capitalize text-gray-900 dark:text-white">
                                     {translate(option.name)}
                                 </label>
-                            </div>
-                        </>
-                    ))}
+                            </>
+                        ))}
+                    </div>
                 </div>
-                <div className="inline-flex items-center rounded-lg bg-white px-3 py-1.5 text-sm font-medium text-gray-500 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:focus:ring-gray-700">
-                    {STATUS_OPTIONS.map((option) => (
-                        <>
-                            <input
-                                onClick={(e) => onStatusChange(e, option.value)}
-                                id={option.name}
-                                type="checkbox"
-                                checked={statusOptions.includes(option.value)}
-                                className="focus:ring-3 h-4 w-4 rounded border border-gray-300 bg-gray-50 focus:ring-primary dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-primary"
+                <div className="relative">
+                    <div className="rtl:inset-r-0 pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
+                        <svg
+                            className="h-4 w-4 text-gray-500 dark:text-gray-400"
+                            aria-hidden="true"
+                            xmlns="http://www.w3.org/2000/svg"
+                            fill="none"
+                            viewBox="0 0 20 20">
+                            <path
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"
                             />
-                            <label
-                                htmlFor={option.name}
-                                className="w-30 mb-2 ml-2 mr-6 mt-2 text-sm font-medium capitalize text-gray-900 dark:text-white">
-                                {translate(option.name)}
-                            </label>
-                        </>
-                    ))}
+                        </svg>
+                    </div>
+                    <input
+                        type="text"
+                        onChange={(e) => setSearchText(e.target.value)}
+                        id="table-search-users"
+                        className="block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                        placeholder={translate('search-for-users')}
+                    />
                 </div>
             </div>
             <div className="relative h-96 w-full overflow-y-auto sm:rounded-lg">
@@ -123,12 +153,16 @@ const PaymentManagement: React.FC = () => {
                                 className="px-6 py-3">
                                 {translate('status')}
                             </th>
-
                             <th
                                 scope="col"
                                 className="px-6 py-3">
                                 {translate('update-at')}
                             </th>
+                            <th
+                                scope="col"
+                                className="px-6 py-3">
+                                {translate('update-by')}
+                            </th>
                             <th
                                 scope="col"
                                 className="px-6 py-3">
@@ -162,6 +196,7 @@ const PaymentManagement: React.FC = () => {
                                         </p>
                                     </td>
                                     <td className="px-6 py-4">{moment(transaction.updateTime).format('hh:mm:ss DD/MM/YYYY')}</td>
+                                    <td className="px-6 py-4">{transaction.updateUsers.length == 0 ? '-' : transaction.updateUsers[0].username}</td>
                                     <td className={`px-6 py-4 ${transaction.status !== 0 ? 'hidden' : ''}`}>
                                         <button
                                             onClick={() => onActionHandle(transaction._id, 1)}
@@ -179,6 +214,13 @@ const PaymentManagement: React.FC = () => {
                     </tbody>
                 </table>
             </div>
+            {resultData?.totalPage && (
+                <Pagination
+                    queryConfig={queryParams}
+                    page={resultData?.currentPage}
+                    totalPage={resultData?.totalPage}
+                />
+            )}
         </div>
     );
 };
diff --git a/src/pages/Management/UserManagement.tsx b/src/pages/Management/UserManagement.tsx
index 426584f..c87317d 100644
--- a/src/pages/Management/UserManagement.tsx
+++ b/src/pages/Management/UserManagement.tsx
@@ -16,7 +16,6 @@ import { formatCurrency } from '@/utils/format';
 import useAlertMsg from '@/hooks/useAlertMsg';
 
 const UserManagement: React.FC = () => {
-    const [isShowAction, setIsShowAction] = useState<boolean>(false);
     const [isShowEditAction, setIsShowEditAction] = useState<boolean>(false);
     const [searchText, setSearchText] = useState<string>('');
     const { updateSuccessAlert } = useAlertMsg();
@@ -152,55 +151,7 @@ const UserManagement: React.FC = () => {
                 />
             )}
             <div className="flex-column flex flex-wrap items-center justify-between space-y-4 bg-white pb-4 dark:bg-gray-700 md:flex-row md:space-y-0">
-                <div>
-                    <button
-                        onClick={() => setIsShowAction((prev) => !prev)}
-                        id="dropdownActionButton"
-                        data-dropdown-toggle="dropdownAction"
-                        className="inline-flex items-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-gray-600 dark:hover:bg-gray-700 dark:focus:ring-gray-700"
-                        type="button">
-                        <span className="sr-only">Action button</span>
-                        Action
-                        <svg
-                            className="ms-2.5 h-2.5 w-2.5"
-                            aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="none"
-                            viewBox="0 0 10 6">
-                            <path
-                                stroke="currentColor"
-                                strokeLinecap="round"
-                                strokeLinejoin="round"
-                                strokeWidth={2}
-                                d="m1 1 4 4 4-4"
-                            />
-                        </svg>
-                    </button>
-                    {isShowAction && (
-                        <div
-                            id="dropdownAction"
-                            className="fixed z-10 w-44 divide-y divide-gray-100 rounded-lg bg-white shadow dark:divide-gray-600 dark:bg-gray-700">
-                            <ul
-                                className="py-1 text-sm text-gray-700 dark:text-gray-200"
-                                aria-labelledby="dropdownActionButton">
-                                <li>
-                                    <a
-                                        href="#"
-                                        className="block px-4 py-2 capitalize hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                                        {translate('activate')}
-                                    </a>
-                                </li>
-                                <li>
-                                    <a
-                                        href="#"
-                                        className="block px-4 py-2 capitalize hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">
-                                        {translate('deactivate')}
-                                    </a>
-                                </li>
-                            </ul>
-                        </div>
-                    )}
-                </div>
+                <div></div>
                 <div className="relative">
                     <div className="rtl:inset-r-0 pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3">
                         <svg
@@ -223,7 +174,7 @@ const UserManagement: React.FC = () => {
                         onChange={(e) => setSearchText(e.target.value)}
                         id="table-search-users"
                         className="block w-80 rounded-lg border border-gray-300 bg-gray-50 p-2 ps-10 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
-                        placeholder="Search for users"
+                        placeholder={translate('search-for-users')}
                     />
                 </div>
             </div>
@@ -231,22 +182,6 @@ const UserManagement: React.FC = () => {
                 <table className="w-full text-left text-sm text-gray-500 dark:text-gray-400 rtl:text-right">
                     <thead className="sticky top-0 bg-gray-50 text-xs uppercase text-gray-700 dark:bg-gray-700 dark:text-gray-400">
                         <tr>
-                            <th
-                                scope="col"
-                                className="p-4">
-                                <div className="flex items-center">
-                                    <input
-                                        id="checkbox-all-search"
-                                        type="checkbox"
-                                        className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-800"
-                                    />
-                                    <label
-                                        htmlFor="checkbox-all-search"
-                                        className="sr-only">
-                                        checkbox
-                                    </label>
-                                </div>
-                            </th>
                             <th
                                 scope="col"
                                 className="px-6 py-3">
@@ -285,20 +220,6 @@ const UserManagement: React.FC = () => {
                                 <tr
                                     key={user._id}
                                     className="border-b bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-600">
-                                    <td className="w-4 p-4">
-                                        <div className="flex items-center">
-                                            <input
-                                                id="checkbox-table-search-1"
-                                                type="checkbox"
-                                                className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600 dark:focus:ring-offset-gray-800"
-                                            />
-                                            <label
-                                                htmlFor="checkbox-table-search-1"
-                                                className="sr-only">
-                                                checkbox
-                                            </label>
-                                        </div>
-                                    </td>
                                     <th
                                         scope="row"
                                         className="flex items-center whitespace-nowrap px-6 py-4 text-gray-900 dark:text-white">
diff --git a/src/routes/comic.tsx b/src/routes/comic.tsx
index 77a4786..c92d8eb 100644
--- a/src/routes/comic.tsx
+++ b/src/routes/comic.tsx
@@ -44,7 +44,7 @@ export default [
         ),
     },
     {
-        path: APP_PATH.new,
+        path: APP_PATH.recent,
         element: (
             <Suspense fallback={<LoadingPage />}>
                 <New />
diff --git a/src/routes/management.tsx b/src/routes/management.tsx
index ecf4641..5fdb871 100644
--- a/src/routes/management.tsx
+++ b/src/routes/management.tsx
@@ -21,7 +21,7 @@ export default [
             {
                 index: true,
                 path: APP_PATH.management,
-                loader: () => redirect(APP_PATH.management_comics),
+                loader: () => redirect(APP_PATH.management_billing),
             },
             {
                 path: APP_PATH.management_comics,
diff --git a/src/types/payment.ts b/src/types/payment.ts
index ec49a3f..ca16b95 100644
--- a/src/types/payment.ts
+++ b/src/types/payment.ts
@@ -9,7 +9,9 @@ export interface Transaction {
     status: number;
     createTime: Date;
     updateTime: Date;
+    updateBy: string;
     users: User[];
+    updateUsers: User[];
 }
 
 export interface TransactionData {
@@ -26,4 +28,5 @@ export interface TransactionModel {
     status: number;
     createTime: Date;
     updateTime: Date;
+    updateBy: string;
 }
diff --git a/src/utils/comic.ts b/src/utils/comic.ts
index 91b5d18..e5fdead 100644
--- a/src/utils/comic.ts
+++ b/src/utils/comic.ts
@@ -6,7 +6,7 @@ export const getComicResponse = (data: Comic): ComicModel => {
 };
 
 export const isEnabledRead = (chapter: Chapter, transaction: Transaction[] = []) => {
-    if (chapter.price <= 0 || transaction.map((trans) => trans.sourceId).includes(chapter._id)) {
+    if (!chapter || chapter.price <= 0 || transaction.map((trans) => trans.sourceId).includes(chapter._id)) {
         return true;
     }
 
diff --git a/src/utils/user.ts b/src/utils/user.ts
index 4af2194..0c66392 100644
--- a/src/utils/user.ts
+++ b/src/utils/user.ts
@@ -2,6 +2,7 @@ import { ROLES } from '@/constants/settings';
 
 export const getRoleName = (role: number): string => {
     if (role === ROLES.admin) return 'admin';
+    if (role === ROLES.collaborators) return 'collaborators';
     return 'normal';
 };