diff --git a/src/components/PermissionList.tsx b/src/components/PermissionList.tsx
index a54b8541..828c6aac 100644
--- a/src/components/PermissionList.tsx
+++ b/src/components/PermissionList.tsx
@@ -1,77 +1,62 @@
-import { Permission } from "@/interfaces/permissions";
-import {
-  createColumnHelper,
-  flexRender,
-  getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table";
+import {Permission} from "@/interfaces/permissions";
+import {createColumnHelper, flexRender, getCoreRowModel, useReactTable} from "@tanstack/react-table";
 import Link from "next/link";
+import {convertCamelCaseToReadable} from "@/utils/string";
 
-
-interface Props{
-  permissions: Permission[]
+interface Props {
+	permissions: Permission[];
 }
 
 const columnHelper = createColumnHelper<Permission>();
 
 const defaultColumns = [
-  columnHelper.accessor('type', {
-    header: () => <span>Type</span>,
-    cell: ({row, getValue}) => (
-      <Link href={`/permissions/${row.original.id}`} key={row.id} className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
-       {getValue() as string}
-        </Link>
-    )
-  })
+	columnHelper.accessor("type", {
+		header: () => <span>Type</span>,
+		cell: ({row, getValue}) => (
+			<Link
+				href={`/permissions/${row.original.id}`}
+				key={row.id}
+				className="underline text-mti-purple-light hover:text-mti-purple-dark transition ease-in-out duration-300 cursor-pointer">
+				{convertCamelCaseToReadable(getValue() as string)}
+			</Link>
+		),
+	}),
 ];
 
 export default function PermissionList({permissions}: Props) {
-  
-  const table = useReactTable({
-    data: permissions,
-    columns: defaultColumns,
-    getCoreRowModel: getCoreRowModel(),
-
-  })
-  return (
-    <div className="w-full">
-        <div className="w-full flex flex-col gap-2">
-          <table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
-            <thead>
-              {table.getHeaderGroups().map((headerGroup) => (
-                <tr key={headerGroup.id}>
-                  {headerGroup.headers.map((header) => (
-                    <th className="py-4 px-4 text-left" key={header.id}>
-                      {header.isPlaceholder
-                        ? null
-                        : flexRender(
-                            header.column.columnDef.header,
-                            header.getContext()
-                          )}
-                    </th>
-                  ))}
-                </tr>
-              ))}
-            </thead>
-            <tbody className="px-2">
-              {table.getRowModel().rows.map((row) => (
-                <tr
-                  className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2"
-                  key={row.id}
-                >
-                  {row.getVisibleCells().map((cell) => (
-                    <td className="px-4 py-2 items-center w-fit" key={cell.id}>
-                      {flexRender(
-                        cell.column.columnDef.cell,
-                        cell.getContext()
-                      )}
-                    </td>
-                  ))}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      </div>
-  )
+	const table = useReactTable({
+		data: permissions,
+		columns: defaultColumns,
+		getCoreRowModel: getCoreRowModel(),
+	});
+	return (
+		<div className="w-full">
+			<div className="w-full flex flex-col gap-2">
+				<table className="rounded-xl bg-mti-purple-ultralight/40 w-full">
+					<thead>
+						{table.getHeaderGroups().map((headerGroup) => (
+							<tr key={headerGroup.id}>
+								{headerGroup.headers.map((header) => (
+									<th className="py-4 px-4 text-left" key={header.id}>
+										{header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+									</th>
+								))}
+							</tr>
+						))}
+					</thead>
+					<tbody className="px-2">
+						{table.getRowModel().rows.map((row) => (
+							<tr className="odd:bg-white even:bg-mti-purple-ultralight/40 rounded-lg py-2" key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<td className="px-4 py-2 items-center w-fit" key={cell.id}>
+										{flexRender(cell.column.columnDef.cell, cell.getContext())}
+									</td>
+								))}
+							</tr>
+						))}
+					</tbody>
+				</table>
+			</div>
+		</div>
+	);
 }