diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 1a90c0f0..8aa98268 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -89,6 +89,7 @@ enum WorkMode {
 enum Role {
   USER
   ADMIN
+  HR
 }
 
 enum EmployementType {
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 5a47f17f..7a16f7f6 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -14,6 +14,7 @@ const prisma = new PrismaClient();
 const users = [
   { id: '1', name: 'Jack', email: 'user@gmail.com' },
   { id: '2', name: 'Admin', email: 'admin@gmail.com', role: Role.ADMIN },
+  { id: '3', name: 'Hr', email: 'hr@gmail.com', role: Role.HR },
 ];
 
 let jobs = [
diff --git a/src/components/navitem.tsx b/src/components/navitem.tsx
index 9b90519e..33e159c0 100644
--- a/src/components/navitem.tsx
+++ b/src/components/navitem.tsx
@@ -11,7 +11,7 @@ export const NavItem = ({
 }: {
   path: string;
   label: string;
-  roleRequired?: string;
+  roleRequired?: string[];
   isPrivate?: boolean;
 }) => {
   const session = useSession();
@@ -22,7 +22,12 @@ export const NavItem = ({
   if (!session.data?.user && isPrivate) {
     return;
   }
-  if (session && roleRequired && session.data?.user.role !== roleRequired) {
+  if (
+    session &&
+    roleRequired &&
+    session.data?.user.role &&
+    !roleRequired.includes(session.data?.user.role)
+  ) {
     return;
   }
 
diff --git a/src/config/app.config.ts b/src/config/app.config.ts
index 607f42d6..2e332f78 100644
--- a/src/config/app.config.ts
+++ b/src/config/app.config.ts
@@ -1,4 +1,5 @@
 export const ADMIN_ROLE = 'ADMIN';
+export const HR_ROLE = 'HR';
 export const USER_ROLE = 'USER';
 export const JOBS_PER_PAGE = 10;
 export const DEFAULT_PAGE = 1;
diff --git a/src/layouts/header.tsx b/src/layouts/header.tsx
index cf3ecf53..a3c19f54 100644
--- a/src/layouts/header.tsx
+++ b/src/layouts/header.tsx
@@ -12,7 +12,7 @@ import Image from 'next/image';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Moon, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
-import { ADMIN_ROLE } from '@/config/app.config';
+import { ADMIN_ROLE, HR_ROLE } from '@/config/app.config';
 import { useEffect, useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
@@ -76,7 +76,8 @@ const Header = () => {
                     <Skeleton className="h-4 w-[60px]" key={index} />
                   ))
                 : session.data?.user
-                  ? session.data?.user.role === ADMIN_ROLE
+                  ? session.data?.user.role === ADMIN_ROLE ||
+                    session.data?.user.role === HR_ROLE
                     ? adminNavbar.map((item) => (
                         <NavItem {...item} key={item.id} />
                       ))
diff --git a/src/layouts/mobile-nav.tsx b/src/layouts/mobile-nav.tsx
index 9e77652a..cecc259b 100644
--- a/src/layouts/mobile-nav.tsx
+++ b/src/layouts/mobile-nav.tsx
@@ -28,7 +28,7 @@ import { signOut, useSession } from 'next-auth/react';
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
 import { CompanyLogo } from './header';
-import { ADMIN_ROLE, USER_ROLE } from '@/config/app.config';
+import { ADMIN_ROLE, HR_ROLE, USER_ROLE } from '@/config/app.config';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { getNameInitials } from '@/lib/utils';
 export function MobileNav() {
@@ -78,7 +78,8 @@ export function MobileNav() {
           <ul className="flex flex-col gap-2 text-sm justify-items-start px-4 py-2">
             {session.status !== 'loading' && session.data?.user && (
               <div className="w-full flex items-center">
-                {session.data?.user.role === ADMIN_ROLE ? (
+                {session.data?.user.role === ADMIN_ROLE ||
+                session.data?.user.role === HR_ROLE ? (
                   <div className="w-12 h-12 rounded-full flex items-center justify-center border-none ouline-none dark:bg-[#0F172A] dark:text-white bg-slate-200">
                     <p>HS</p>
                   </div>
@@ -165,7 +166,7 @@ const Item = ({
 }: {
   path: string;
   label: string;
-  roleRequired?: string;
+  roleRequired?: string[];
   isPrivate?: boolean;
 }) => {
   const session = useSession();
@@ -176,7 +177,12 @@ const Item = ({
   if (!session.data?.user && isPrivate) {
     return;
   }
-  if (session && roleRequired && session.data?.user.role !== roleRequired)
+  if (
+    session &&
+    roleRequired &&
+    session.data?.user.role &&
+    !roleRequired.includes(session.data?.user.role)
+  )
     return;
   return (
     <li className="my-1 dark:hover:bg-slate-800 hover:bg-slate-50 p-2 rounded-lg">
diff --git a/src/lib/constant/app.constant.ts b/src/lib/constant/app.constant.ts
index 0e25f152..a1f2abec 100644
--- a/src/lib/constant/app.constant.ts
+++ b/src/lib/constant/app.constant.ts
@@ -25,14 +25,14 @@ export const adminNavbar = [
     id: 2,
     label: 'Manage Jobs',
     path: APP_PATHS.MANAGE_JOBS,
-    roleRequired: 'ADMIN',
+    roleRequired: ['ADMIN', 'HR'],
     icon: PackageSearch,
   },
   {
     id: 3,
     label: 'Post a job',
     path: APP_PATHS.POST_JOB,
-    roleRequired: 'ADMIN',
+    roleRequired: ['ADMIN', 'HR'],
     icon: PackageSearch,
   },
 ];
diff --git a/src/middleware.tsx b/src/middleware.tsx
index a1e051ca..d306cac6 100644
--- a/src/middleware.tsx
+++ b/src/middleware.tsx
@@ -8,7 +8,11 @@ export async function middleware(req: NextRequest) {
   if (!token && pathname === '/create') {
     return NextResponse.redirect(new URL('/signin', req.url));
   }
-  if (pathname === '/create' && token?.role !== 'ADMIN') {
+  if (
+    pathname === '/create' &&
+    token?.role !== 'ADMIN' &&
+    token?.role !== 'HR'
+  ) {
     return NextResponse.redirect(new URL('/', req.url));
   }
   return NextResponse.next();