diff --git a/frontend/src/pages/project/[id]/roles/[roleId]/index.tsx b/frontend/src/pages/project/[id]/roles/[roleId]/index.tsx
new file mode 100644
index 000000000..13a6278bc
--- /dev/null
+++ b/frontend/src/pages/project/[id]/roles/[roleId]/index.tsx
@@ -0,0 +1,20 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useTranslation } from "react-i18next";
+import Head from "next/head";
+
+import { RolePage } from "@app/views/Project/RolePage";
+
+export default function Role() {
+  const { t } = useTranslation();
+  return (
+    <>
+      <Head>
+        <title>{t("common.head-title", { title: t("settings.org.title") })}</title>
+        <link rel="icon" href="/infisical.ico" />
+      </Head>
+      <RolePage />
+    </>
+  );
+}
+
+Role.requireAuth = true;
diff --git a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
index e19e61aec..4ea04c8f6 100644
--- a/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/views/Project/MembersPage/components/ProjectRoleListTab/components/ProjectRoleList/ProjectRoleList.tsx
@@ -1,14 +1,17 @@
-import { useState } from "react";
-import { faEdit, faMagnifyingGlass, faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+import { faEllipsis, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
 
 import { createNotification } from "@app/components/notifications";
 import { ProjectPermissionCan } from "@app/components/permissions";
 import {
   Button,
   DeleteActionModal,
-  IconButton,
-  Input,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
   Table,
   TableContainer,
   TableSkeleton,
@@ -28,11 +31,11 @@ type Props = {
 };
 
 export const ProjectRoleList = ({ onSelectRole }: Props) => {
-  const [searchRoles, setSearchRoles] = useState("");
-
+  const router = useRouter();
   const { popUp, handlePopUpOpen, handlePopUpClose } = usePopUp(["deleteRole"] as const);
   const { currentWorkspace } = useWorkspace();
   const projectSlug = currentWorkspace?.slug || "";
+  const projectId = currentWorkspace?.id || "";
 
   const { data: roles, isLoading: isRolesLoading } = useGetProjectRoles(projectSlug);
 
@@ -54,21 +57,20 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
   };
 
   return (
-    <div className="w-full">
-      <div className="mb-4 flex">
-        <div className="mr-4 flex-1">
-          <Input
-            value={searchRoles}
-            onChange={(e) => setSearchRoles(e.target.value)}
-            leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
-            placeholder="Search roles..."
-          />
-        </div>
+    <div className="rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+      <div className="mb-4 flex justify-between">
+        <p className="text-xl font-semibold text-mineshaft-100">Project Roles</p>
         <ProjectPermissionCan I={ProjectPermissionActions.Create} a={ProjectPermissionSub.Role}>
           {(isAllowed) => (
             <Button
+              colorSchema="primary"
+              type="submit"
               leftIcon={<FontAwesomeIcon icon={faPlus} />}
               onClick={() => onSelectRole()}
+              // onClick={() => {
+              //   TODO
+              //   handlePopUpOpen("role");
+              // }}
               isDisabled={!isAllowed}
             >
               Add Role
@@ -76,27 +78,86 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
           )}
         </ProjectPermissionCan>
       </div>
-      <div>
-        <TableContainer>
-          <Table>
-            <THead>
-              <Tr>
-                <Th>Name</Th>
-                <Th>Slug</Th>
-                <Th aria-label="actions" />
-              </Tr>
-            </THead>
-            <TBody>
-              {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
-              {roles?.map((role) => {
-                const { id, name, slug } = role;
-                const isNonMutatable = ["admin", "member", "viewer", "no-access"].includes(slug);
+      <TableContainer>
+        <Table>
+          <THead>
+            <Tr>
+              <Th>Name</Th>
+              <Th>Slug</Th>
+              <Th aria-label="actions" className="w-5" />
+            </Tr>
+          </THead>
+          <TBody>
+            {isRolesLoading && <TableSkeleton columns={4} innerKey="org-roles" />}
+            {roles?.map((role) => {
+              const { id, name, slug } = role;
+              const isNonMutatable = ["admin", "member", "viewer", "no-access"].includes(slug);
 
-                return (
-                  <Tr key={`role-list-${id}`}>
-                    <Td>{name}</Td>
-                    <Td>{slug}</Td>
-                    <Td>
+              return (
+                <Tr
+                  key={`role-list-${id}`}
+                  className="h-10 cursor-pointer transition-colors duration-300 hover:bg-mineshaft-700"
+                  onClick={() => router.push(`/project/${projectId}/roles/${slug}`)}
+                >
+                  <Td>{name}</Td>
+                  <Td>{slug}</Td>
+                  <Td>
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild className="rounded-lg">
+                        <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                          <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                        </div>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="start" className="p-1">
+                        <ProjectPermissionCan
+                          I={ProjectPermissionActions.Edit}
+                          a={ProjectPermissionSub.Role}
+                        >
+                          {(isAllowed) => (
+                            <DropdownMenuItem
+                              className={twMerge(
+                                !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                              )}
+                              onClick={(e) => {
+                                e.stopPropagation();
+
+                                // TODO: remove/replace
+                                onSelectRole(role.slug);
+                                // router.push(`/project/${projectId}/roles/${id}`);
+                              }}
+                              disabled={!isAllowed}
+                            >
+                              {`${isNonMutatable ? "View" : "Edit"} Role`}
+                            </DropdownMenuItem>
+                          )}
+                        </ProjectPermissionCan>
+                        {!isNonMutatable && (
+                          <ProjectPermissionCan
+                            I={ProjectPermissionActions.Delete}
+                            a={ProjectPermissionSub.Role}
+                          >
+                            {(isAllowed) => (
+                              <DropdownMenuItem
+                                className={twMerge(
+                                  isAllowed
+                                    ? "hover:!bg-red-500 hover:!text-white"
+                                    : "pointer-events-none cursor-not-allowed opacity-50"
+                                )}
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePopUpOpen("deleteRole", role);
+                                }}
+                                disabled={!isAllowed}
+                              >
+                                Delete Role
+                              </DropdownMenuItem>
+                            )}
+                          </ProjectPermissionCan>
+                        )}
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Td>
+                  {/* <Td>
                       <div className="flex justify-end space-x-2">
                         <ProjectPermissionCan
                           I={ProjectPermissionActions.Edit}
@@ -135,18 +196,18 @@ export const ProjectRoleList = ({ onSelectRole }: Props) => {
                           )}
                         </ProjectPermissionCan>
                       </div>
-                    </Td>
-                  </Tr>
-                );
-              })}
-            </TBody>
-          </Table>
-        </TableContainer>
-      </div>
+                    </Td> */}
+                </Tr>
+              );
+            })}
+          </TBody>
+        </Table>
+      </TableContainer>
       <DeleteActionModal
         isOpen={popUp.deleteRole.isOpen}
-        title={`Are you sure want to delete ${(popUp?.deleteRole?.data as TProjectRole)?.name || " "
-          } role?`}
+        title={`Are you sure want to delete ${
+          (popUp?.deleteRole?.data as TProjectRole)?.name || " "
+        } role?`}
         deleteKey={(popUp?.deleteRole?.data as TProjectRole)?.slug || ""}
         onClose={() => handlePopUpClose("deleteRole")}
         onDeleteApproved={handleRoleDelete}
diff --git a/frontend/src/views/Project/RolePage/RolePage.tsx b/frontend/src/views/Project/RolePage/RolePage.tsx
new file mode 100644
index 000000000..4294a018b
--- /dev/null
+++ b/frontend/src/views/Project/RolePage/RolePage.tsx
@@ -0,0 +1,173 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { useRouter } from "next/router";
+import { faChevronLeft, faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { twMerge } from "tailwind-merge";
+
+import { createNotification } from "@app/components/notifications";
+// import { OrgPermissionCan } from "@app/components/permissions";
+// import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { ProjectPermissionCan } from "@app/components/permissions";
+import {
+  Button,
+  DeleteActionModal,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Tooltip
+} from "@app/components/v2";
+import { ProjectPermissionActions, ProjectPermissionSub, useWorkspace } from "@app/context";
+// import { withPermission } from "@app/hoc";
+import { withProjectPermission } from "@app/hoc";
+import { useDeleteOrgRole, useGetOrgRole, useGetProjectRoleBySlug } from "@app/hooks/api";
+import { usePopUp } from "@app/hooks/usePopUp";
+
+// import { RoleDetailsSection, RoleModal, RolePermissionsSection } from "./components";
+
+export const RolePage = withProjectPermission(
+  () => {
+    const router = useRouter();
+    const roleSlug = router.query.roleSlug as string;
+    const { currentWorkspace } = useWorkspace();
+    const projectId = currentWorkspace?.id || "";
+
+    console.log("RolePage currentWorkspace: ", currentWorkspace);
+
+    // const { currentOrg } = useOrganization();
+    // const orgId = currentOrg?.id || "";
+
+    const { data } = useGetProjectRoleBySlug(currentWorkspace?.slug ?? "", roleSlug as string);
+
+    console.log("useGetProjectRoleBySlug data: ", data);
+
+    // const { data } = useGetOrgRole(orgId, roleId); // TODO: get project role
+    const { mutateAsync: deleteOrgRole } = useDeleteOrgRole();
+
+    const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
+      "role",
+      "deleteOrgRole"
+    ] as const);
+
+    const onDeleteOrgRoleSubmit = async () => {
+      try {
+        // if (!orgId || !roleId) return;
+        // await deleteOrgRole({
+        //   orgId,
+        //   id: roleId
+        // });
+        // createNotification({
+        //   text: "Successfully deleted organization role",
+        //   type: "success"
+        // });
+        // handlePopUpClose("deleteOrgRole");
+        // router.push(`/org/${orgId}/members`);
+      } catch (err) {
+        console.error(err);
+        const error = err as any;
+        const text = error?.response?.data?.message ?? "Failed to delete organization role";
+
+        createNotification({
+          text,
+          type: "error"
+        });
+      }
+    };
+
+    const isCustomRole = !["admin", "member", "no-access"].includes(data?.slug ?? "");
+
+    return (
+      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+        {data && (
+          <div className="mx-auto mb-6 w-full max-w-7xl py-6 px-6">
+            <Button
+              variant="link"
+              type="submit"
+              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
+              onClick={() => {
+                router.push(`/project/${projectId}/members`);
+              }}
+              className="mb-4"
+            >
+              Roles
+            </Button>
+            <div className="mb-4 flex items-center justify-between">
+              <p className="text-3xl font-semibold text-white">{data.name}</p>
+              {isCustomRole && (
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild className="rounded-lg">
+                    <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
+                      <Tooltip content="More options">
+                        <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                      </Tooltip>
+                    </div>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="start" className="p-1">
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Edit}
+                      a={ProjectPermissionSub.Role}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            !isAllowed && "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={async () => {
+                            // TODO
+                            // handlePopUpOpen("role", {
+                            //   roleId
+                            // });
+                          }}
+                          disabled={!isAllowed}
+                        >
+                          Edit Role
+                        </DropdownMenuItem>
+                      )}
+                    </ProjectPermissionCan>
+                    <ProjectPermissionCan
+                      I={ProjectPermissionActions.Delete}
+                      a={ProjectPermissionSub.Role}
+                    >
+                      {(isAllowed) => (
+                        <DropdownMenuItem
+                          className={twMerge(
+                            isAllowed
+                              ? "hover:!bg-red-500 hover:!text-white"
+                              : "pointer-events-none cursor-not-allowed opacity-50"
+                          )}
+                          onClick={async () => {
+                            handlePopUpOpen("deleteOrgRole");
+                          }}
+                          disabled={!isAllowed}
+                        >
+                          Delete Role
+                        </DropdownMenuItem>
+                      )}
+                    </ProjectPermissionCan>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              )}
+            </div>
+            <div className="flex">
+              <div className="mr-4 w-96">
+                RoleDetailsSection here
+                {/* <RoleDetailsSection roleId={roleId} handlePopUpOpen={handlePopUpOpen} /> */}
+              </div>
+              RolePermissionsSection here
+              {/* <RolePermissionsSection roleId={roleId} /> */}
+            </div>
+          </div>
+        )}
+        {/* <RoleModal popUp={popUp} handlePopUpToggle={handlePopUpToggle} /> */}
+        <DeleteActionModal
+          isOpen={popUp.deleteOrgRole.isOpen}
+          title={`Are you sure want to delete the project role ${data?.name ?? ""}?`}
+          onChange={(isOpen) => handlePopUpToggle("deleteOrgRole", isOpen)}
+          deleteKey="confirm"
+          onDeleteApproved={() => onDeleteOrgRoleSubmit()}
+        />
+      </div>
+    );
+  },
+  { action: ProjectPermissionActions.Read, subject: ProjectPermissionSub.Role }
+);
diff --git a/frontend/src/views/Project/RolePage/index.tsx b/frontend/src/views/Project/RolePage/index.tsx
new file mode 100644
index 000000000..71e7114fc
--- /dev/null
+++ b/frontend/src/views/Project/RolePage/index.tsx
@@ -0,0 +1 @@
+export { RolePage } from "./RolePage";