diff --git a/src/app/(private)/admin-registration-applications/[id]/page.tsx b/src/app/(private)/admin-registration-applications/[id]/page.tsx
index 6f5eb78a..704e2d18 100644
--- a/src/app/(private)/admin-registration-applications/[id]/page.tsx
+++ b/src/app/(private)/admin-registration-applications/[id]/page.tsx
@@ -64,7 +64,7 @@ const Page = ({ params }: { params: { slug: string; id: string } }) => {
     }
 
     fetchDetails()
-  }, [params.id])
+  }, [params.id, t, toast])
 
   return (
     <div className="p-6 bg-white dark:bg-gray-800 rounded-md shadow-md text-black dark:text-white">
diff --git a/src/app/(private)/role-listing/page.tsx b/src/app/(private)/role-listing/page.tsx
new file mode 100644
index 00000000..e2779fcf
--- /dev/null
+++ b/src/app/(private)/role-listing/page.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import { useEffect, useMemo, useState } from 'react'
+import PrivateRoute from '@/app/hocs/isAuth'
+import { useTranslation } from 'react-i18next'
+import { useToast } from '@/components/ui/use-toast'
+import { useSearchParams } from 'next/navigation'
+import { Permission } from '@/constants/permissions'
+import { postRoleListing } from '@/modules/roleListing/service'
+import { searchParamsSchema } from '@/modules/roleListing/constants/searchParamsSchema'
+import { RoleListing } from '@/modules/roleListing/constants/types'
+import { useDataTable } from '@/app/hocs/useDataTable'
+import { DataTable, DataTableToolbar } from '@/components/dataTable'
+import { columns } from '@/modules/roleListing/components/columns'
+import filterFields from '@/modules/roleListing/constants/filterFields'
+
+const Page = () => {
+  const searchParams = useSearchParams()
+  const search = searchParamsSchema.parse(
+    Object.fromEntries(searchParams.entries()),
+  )
+
+  const { t } = useTranslation()
+  const { toast } = useToast()
+  const [data, setData] = useState<RoleListing>({
+    content: [],
+    totalPageCount: 0,
+  })
+  const [isLoading, setIsLoading] = useState<boolean>(false)
+  const searchParamsString = useMemo(() => JSON.stringify(search), [search])
+
+  useEffect(() => {
+    setIsLoading(true)
+    postRoleListing({
+      page: search.page,
+      per_page: search.per_page,
+      sort: search.sort,
+      status: search.status,
+      name: search.name,
+      createdAt: search.createdAt,
+      updatedAt: search.updatedAt,
+    })
+      .then((responseData) => {
+        setData(responseData.data.response)
+      })
+      .catch(() => {
+        toast({
+          title: t('error'),
+          description: t('defaultError'),
+          variant: 'destructive',
+        })
+      })
+      .finally(() => setIsLoading(false))
+  }, [
+    searchParamsString,
+    search.createdAt,
+    search.name,
+    search.page,
+    search.per_page,
+    search.sort,
+    search.status,
+    search.updatedAt,
+    t,
+    toast,
+  ])
+
+  const { table } = useDataTable({
+    data: data.content,
+    columns,
+    pageCount: data.totalPageCount,
+    filterFields,
+  })
+
+  return (
+    <PrivateRoute requiredPermissions={[Permission.ROLE_LIST]}>
+      <div className="space-y-1">
+        <DataTable
+          className="px-2"
+          table={table}
+          loading={isLoading}
+          enableRowClick
+        >
+          <div className="flex flex-col w-full gap-4">
+            <h1 className="text-2xl font-medium">{t('roleListing')}</h1>
+            <DataTableToolbar table={table} filterFields={filterFields} />
+          </div>
+        </DataTable>
+      </div>
+    </PrivateRoute>
+  )
+}
+
+export default Page
diff --git a/src/app/(public)/login/page.tsx b/src/app/(public)/login/page.tsx
index ddad3f6a..4d64e0bc 100644
--- a/src/app/(public)/login/page.tsx
+++ b/src/app/(public)/login/page.tsx
@@ -93,7 +93,7 @@ const Page = () => {
     if (tokenInfo) {
       router.push('/dashboard')
     }
-  }, [tokenInfo])
+  }, [tokenInfo, router])
 
   return tokenInfo ? (
     <></>
diff --git a/src/components/dataTable/dataTableSearchField.tsx b/src/components/dataTable/dataTableSearchField.tsx
index 4753d138..a699e2ad 100644
--- a/src/components/dataTable/dataTableSearchField.tsx
+++ b/src/components/dataTable/dataTableSearchField.tsx
@@ -21,6 +21,7 @@ const DataTableSearchField = <TData,>({
   table,
 }: DataTableSearchFieldProps<TData>) => {
   const schema = getValidationSchema(field.value)
+  
   const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = event.target.value
     const validation = schema.safeParse(inputValue)
diff --git a/src/components/dataTable/dataTableSort.tsx b/src/components/dataTable/dataTableSort.tsx
index 3536f4d6..693b688c 100644
--- a/src/components/dataTable/dataTableSort.tsx
+++ b/src/components/dataTable/dataTableSort.tsx
@@ -5,11 +5,10 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from '@/components/ui/tooltip'
-import i18next from 'i18next'
 import i18n from 'i18next'
 import { BiSort, BiSortDown, BiSortUp } from 'react-icons/bi'
 
-const DataTableSort = ({ column }: { column: any }) => {
+const DataTableSort = ({ column, label }: { column: any, label: string }) => {
   return (
     <TooltipProvider>
       <Tooltip>
@@ -18,7 +17,7 @@ const DataTableSort = ({ column }: { column: any }) => {
           onClick={() => column.toggleSorting()}
         >
           <span className="flex items-center gap-2">
-            {i18next.t('createdAt')}
+            {label}
             <SortIcon sort={column.getIsSorted()} />
           </span>
         </TooltipTrigger>
diff --git a/src/components/ui/filterInput.tsx b/src/components/ui/filterInput.tsx
index 789ac08f..755cdbbe 100644
--- a/src/components/ui/filterInput.tsx
+++ b/src/components/ui/filterInput.tsx
@@ -8,7 +8,15 @@ import { z } from 'zod'
 import { toast } from '@/components/ui/use-toast'
 import { cn } from '@/lib/utils'
 
-const FilterInput = ({ param, min = 2, max = 100 }: { param: string, min?: number, max?: number }) => {
+const FilterInput = ({
+  param,
+  min = 2,
+  max = 100,
+}: {
+  param: string
+  min?: number
+  max?: number
+}) => {
   const searchParams = useSearchParams()
   const router = useRouter()
   const pathname = usePathname()
@@ -16,7 +24,10 @@ const FilterInput = ({ param, min = 2, max = 100 }: { param: string, min?: numbe
   const [search, setSearch] = useState(initialValue || '')
   const debouncedSearch = useDebounce(search, 500)
 
-  const schema = z.string().min(min, { message: i18next.t('minLength', { field: min }) }).max(max, { message: i18next.t('maxLength', { field: max }) })
+  const schema = z
+    .string()
+    .min(min, { message: i18next.t('minLength', { field: min }) })
+    .max(max, { message: i18next.t('maxLength', { field: max }) })
 
   useEffect(() => {
     const newSearchParams = new URLSearchParams()
@@ -24,19 +35,29 @@ const FilterInput = ({ param, min = 2, max = 100 }: { param: string, min?: numbe
       const validation = schema.safeParse(debouncedSearch)
       if (validation.success) {
         newSearchParams.set(param, debouncedSearch)
-        router.replace(`${pathname}?${newSearchParams.toString()}`, { scroll: false })
+        router.replace(`${pathname}?${newSearchParams.toString()}`, {
+          scroll: false,
+        })
       } else {
-        toast({ title: validation.error.errors[0].message, variant: 'destructive' })
+        toast({
+          title: validation.error.errors[0].message,
+          variant: 'destructive',
+        })
       }
     } else if (!debouncedSearch && initialValue) {
       newSearchParams.delete(param)
-      router.replace(`${pathname}?${newSearchParams.toString()}`, { scroll: false })
+      router.replace(`${pathname}?${newSearchParams.toString()}`, {
+        scroll: false,
+      })
     }
-  }, [debouncedSearch])
+  }, [debouncedSearch, initialValue, param, pathname, router, schema])
 
-  const handleInputChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearch(e.currentTarget.value)
-  }, [])
+  const handleInputChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearch(e.currentTarget.value)
+    },
+    [],
+  )
 
   return (
     <div className="relative">
@@ -45,7 +66,9 @@ const FilterInput = ({ param, min = 2, max = 100 }: { param: string, min?: numbe
         placeholder=""
         value={search}
         onChange={handleInputChange}
-        className={cn('block focus-visible:ring-0 focus-visible:ring-offset-0 p-3 w-full text-sm text-gray-900 bg-transparent rounded-lg border-[2px] border-gray-200 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer')}
+        className={cn(
+          'block focus-visible:ring-0 focus-visible:ring-offset-0 p-3 w-full text-sm text-gray-900 bg-transparent rounded-lg border-[2px] border-gray-200 appearance-none dark:text-white dark:border-gray-600 dark:focus:border-blue-500 focus:outline-none focus:ring-0 focus:border-blue-600 peer',
+        )}
       />
       <Label
         htmlFor={param}
diff --git a/src/constants/menuItems.ts b/src/constants/menuItems.ts
index 8726e28b..2acc7c52 100644
--- a/src/constants/menuItems.ts
+++ b/src/constants/menuItems.ts
@@ -1,4 +1,4 @@
-import { BusFront, HomeIcon, UserRoundCheck } from 'lucide-react'
+import { BusFront, HomeIcon, UserRoundCheck, ClipboardPenLine } from 'lucide-react'
 import React from 'react'
 import { Permission } from '@/constants/permissions'
 
@@ -27,4 +27,10 @@ export const MenuItems: Menu[] = [
     icon: BusFront,
     requiredPermissions: [Permission.EVACUATION_LIST],
   },
+  {
+    key: '/role-listing',
+    label: 'roleListing',
+    icon: ClipboardPenLine,
+    requiredPermissions: [Permission.ROLE_LIST],
+  },
 ]
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 01d1a46d..c8eef381 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -10,6 +10,7 @@
   "page": "Page",
   "adminRegistrationApplications": "Admin Registration Applications",
   "emergencyEvacuationApplications": "Emergency Evacuation Applications",
+  "roleListing": "Role Listing",
   "all": "All",
   "status": "Status",
   "waiting": "Waiting",
@@ -20,6 +21,7 @@
   "active": "Active",
   "passive": "Passive",
   "pending": "Pending",
+  "deleted": "Deleted",
   "inReview": "In Review",
   "inProgress": "In Progress",
   "receivedFirstApprove": "Received First Approve",
@@ -81,5 +83,8 @@
   "city": "City of Locate",
   "emailAddress": "E-mail Address",
   "seatingCountValidationMessage": "Only positive numbers with a maximum of {{field}} digits are allowed.",
-  "referenceNumberValidationMessage": "Only positive numerical values are allowed."
+  "referenceNumberValidationMessage": "Only positive numerical values are allowed.",
+  "name": "Role Name",
+  "createdDateTime": "Creation Date and Time",
+  "updatedDateTime": "Update Date and Time"
 }
diff --git a/src/i18n/locales/tr.json b/src/i18n/locales/tr.json
index e4815938..0c6b6697 100644
--- a/src/i18n/locales/tr.json
+++ b/src/i18n/locales/tr.json
@@ -10,6 +10,7 @@
   "page": "Sayfa",
   "adminRegistrationApplications": "Yönetici Kayıt Başvuruları",
   "emergencyEvacuationApplications": "Acil Durum Tahliye Başvurusu",
+  "roleListing": "Rol Listeleme",
   "all": "Hepsini Seç",
   "status": "Durum",
   "waiting": "Beklemede",
@@ -19,6 +20,7 @@
   "notVerified": "Doğrulanmadı",
   "active": "Aktif",
   "passive": "Pasif",
+  "deleted": "Silinmiş",
   "pending": "Bekleniyor",
   "inReview": "İnceleniyor",
   "inProgress": "İşlemde",
@@ -81,5 +83,8 @@
   "targetDistrict": "Tahliye Sağlanılacak İlçe",
   "phoneNumber": "Telefon Numarası",
   "seatingCountValidationMessage": "Sadece maksimum {{field}} haneli, pozitif sayı değerleri alabilir.",
-  "referenceNumberValidationMessage": "Sadece pozitif sayısal değerler alabilir."
+  "referenceNumberValidationMessage": "Sadece pozitif sayısal değerler alabilir.",
+  "name": "Rol Adı",
+  "createdDateTime": "Oluşturulma Tarihi ve Saati",
+  "updatedDateTime": "Güncellenme Tarihi ve Saat"
 }
diff --git a/src/lib/formatDateTime.ts b/src/lib/formatDateTime.ts
index 5a032cc5..25cca0bc 100644
--- a/src/lib/formatDateTime.ts
+++ b/src/lib/formatDateTime.ts
@@ -1,6 +1,9 @@
 import { DateTime } from "luxon";
 
-export const formatDateTime = (date: string) => {
+export const formatDateTime = (date: string | null) => {
+  if (!date) {
+    return "";
+  }
   return DateTime
     .fromISO(date, { zone: "UTC" })
     .setZone(DateTime.local().zoneName)
diff --git a/src/modules/adminRegistrationApplications/components/columns.tsx b/src/modules/adminRegistrationApplications/components/columns.tsx
index 49253e98..6331ab0c 100644
--- a/src/modules/adminRegistrationApplications/components/columns.tsx
+++ b/src/modules/adminRegistrationApplications/components/columns.tsx
@@ -41,7 +41,7 @@ export const columns: ColumnDef<AdminRegistrationApplication>[] = [
   {
     accessorKey: 'createdAt',
     header: ({ column }) => {
-      return <DataTableSort column={column} />
+      return <DataTableSort column={column} label={i18next.t('createdAt')}/>
     },
     size: 155,
     cell: ({ row }) => {
diff --git a/src/modules/emergencyEvacuationApplications/components/columns.tsx b/src/modules/emergencyEvacuationApplications/components/columns.tsx
index c2fbe958..20174cbb 100644
--- a/src/modules/emergencyEvacuationApplications/components/columns.tsx
+++ b/src/modules/emergencyEvacuationApplications/components/columns.tsx
@@ -53,7 +53,7 @@ export const columns: ColumnDef<EmergencyEvacuationApplicationsTableProps>[] = [
   {
     accessorKey: 'createdAt',
     header: ({ column }) => {
-      return <DataTableSort column={column} />
+      return <DataTableSort column={column} label={i18next.t('createdAt')} />
     },
     cell: ({ row }) => {
       return <div className="px-2">{formatDateTime(row.getValue('createdAt'))}</div>
diff --git a/src/modules/roleListing/components/columns.tsx b/src/modules/roleListing/components/columns.tsx
new file mode 100644
index 00000000..cf6ed009
--- /dev/null
+++ b/src/modules/roleListing/components/columns.tsx
@@ -0,0 +1,37 @@
+import { ColumnDef } from '@tanstack/table-core'
+import i18next from 'i18next'
+import { formatDateTime } from '@/lib/formatDateTime'
+import DataTableSort from '@/components/dataTable/dataTableSort'
+import { RoleListingTableProps } from '../constants/types';
+import Status from './status';
+
+export const columns: ColumnDef<RoleListingTableProps>[] = [
+  {
+    accessorKey: 'name',
+    header: () => i18next.t("name"),
+    cell: ({ row }) => row.original.name,
+    size: 200,
+  },
+  {
+    accessorKey: 'status',
+    header: () => i18next.t('status'),
+    cell: ({ row }) => <Status status={row.getValue('status')} />,
+    size: 100,
+  },
+  {
+    accessorKey: 'createdAt',
+    header: ({ column }) => {
+      return <DataTableSort column={column} label={i18next.t('createdAt')} />
+    },
+    cell: ({ row }) => {
+      return <div className="px-2">{formatDateTime(row.getValue('createdAt'))}</div>
+    },
+    size: 170,
+  },
+  {
+    accessorKey: 'updatedAt',
+    header: () => i18next.t('updatedDateTime'),
+    cell: ({ row }) => <div className="px-2">{formatDateTime(row.getValue('updatedAt'))}</div>,
+    size: 170,
+  },
+];
diff --git a/src/modules/roleListing/components/status.tsx b/src/modules/roleListing/components/status.tsx
new file mode 100644
index 00000000..24091393
--- /dev/null
+++ b/src/modules/roleListing/components/status.tsx
@@ -0,0 +1,37 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cn } from '@/lib/utils'
+import { StatusProps } from '../constants/types'
+import { StatusData } from '../constants/status'
+
+const Status = ({ status }: StatusProps) => {
+  const [statusData, setStatusData] = useState<{
+    label: string
+    color: string
+  }>({ label: '', color: '' })
+  const { t } = useTranslation()
+
+  const getStatus = (status: string) => {
+    const statusItem = StatusData.find((item) => item.value === status)
+    const color = statusItem ? statusItem.color : ''
+    const label = statusItem ? statusItem.label : ''
+    return { color, label }
+  }
+
+  useEffect(() => {
+    setStatusData(getStatus(status))
+  }, [status])
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-md px-2 py-1 text-xs',
+        statusData?.color,
+      )}
+    >
+      {t(`${statusData.label}`)}
+    </span>
+  )
+}
+
+export default Status
diff --git a/src/modules/roleListing/constants/filterFields.ts b/src/modules/roleListing/constants/filterFields.ts
new file mode 100644
index 00000000..af1a07e7
--- /dev/null
+++ b/src/modules/roleListing/constants/filterFields.ts
@@ -0,0 +1,22 @@
+import { StatusData } from "./status"
+
+const filterFields: FilterFields = [
+  {
+    label: 'Role Name',
+    value: 'name',
+    placeholder: '',
+    type: 'string',
+    fieldsType: 'inputField',
+  },
+  {
+    label: 'status',
+    value: 'status',
+    options: StatusData.map((status) => ({
+      label: status.label,
+      value: status.value,
+    })),
+    fieldsType: 'selectBoxField',
+  },
+]
+
+export default filterFields
diff --git a/src/modules/roleListing/constants/searchParamsSchema.ts b/src/modules/roleListing/constants/searchParamsSchema.ts
new file mode 100644
index 00000000..21c2e1c2
--- /dev/null
+++ b/src/modules/roleListing/constants/searchParamsSchema.ts
@@ -0,0 +1,12 @@
+import * as z from 'zod'
+import { pageSize } from '@/constants/common'
+
+export const searchParamsSchema = z.object({
+  page: z.coerce.number().default(1),
+  per_page: z.coerce.number().default(pageSize),
+  sort: z.string().optional(),
+  status: z.string().optional(),
+  name: z.string().optional(),
+  createdAt: z.string().optional(),
+  updatedAt: z.string().optional(),
+})
diff --git a/src/modules/roleListing/constants/status.ts b/src/modules/roleListing/constants/status.ts
new file mode 100644
index 00000000..af6fb858
--- /dev/null
+++ b/src/modules/roleListing/constants/status.ts
@@ -0,0 +1,5 @@
+export const StatusData = [
+  { label: 'active', value: 'ACTIVE', color: 'bg-green-500 text-white' },
+  { label: 'passive', value: 'PASSIVE', color: 'bg-yellow-500 text-white' },
+  { label: 'deleted', value: 'DELETED', color: 'bg-red-500 text-white' },
+]
diff --git a/src/modules/roleListing/constants/types.ts b/src/modules/roleListing/constants/types.ts
new file mode 100644
index 00000000..52f6b411
--- /dev/null
+++ b/src/modules/roleListing/constants/types.ts
@@ -0,0 +1,24 @@
+export interface RoleListing {
+  content: any[]
+  totalPageCount: number
+}
+export interface RoleListingTableProps {
+  name: string
+  status: string
+  createdAt: string
+  updatedAt: string
+}
+
+export interface Search {
+  page: number
+  per_page: number
+  sort: string | undefined
+  name: string | undefined
+  status: string | undefined
+  createdAt: string | undefined
+  updatedAt: string | undefined
+}
+
+export interface StatusProps {
+  status: string
+}
diff --git a/src/modules/roleListing/service.ts b/src/modules/roleListing/service.ts
new file mode 100644
index 00000000..1d002da1
--- /dev/null
+++ b/src/modules/roleListing/service.ts
@@ -0,0 +1,28 @@
+import http from '@/configs/axiosConfig'
+import { Search } from '../roleListing/constants/types'
+
+export function postRoleListing(search: Search) {
+  const sortBy = search.sort
+    ? [
+        {
+          property: search.sort.split('.')[0],
+          direction: search.sort.split('.')[1].toUpperCase(),
+        },
+      ]
+    : []
+  const filterStatus = search.status
+    ? search.status?.toUpperCase().split(`.`)
+    : []
+
+  return http.post('/api/v1/roles', {
+    pageable: {
+      page: search.page,
+      pageSize: search.per_page,
+      orders: sortBy,
+    },
+    filter: {
+      name: search.name,
+      statuses: filterStatus,
+    },
+  })
+}