diff --git a/pkgs/frontend/app/components/BasicRole.tsx b/pkgs/frontend/app/components/BasicRole.tsx
index dcd51ce..c77ea58 100644
--- a/pkgs/frontend/app/components/BasicRole.tsx
+++ b/pkgs/frontend/app/components/BasicRole.tsx
@@ -44,18 +44,19 @@ export const RoleActions: FC<RoleActionsProps> = (params) => {
 
   const navigate = useNavigate();
 
-  const navigateToDetail = () => navigate(`/${treeId}/${hatId}/${address}`);
-
-  const navigateToAssistCredit = () =>
-    navigate(`/${treeId}/${hatId}/${address}/assistcredit/send`);
-
   return (
     <HStack>
       <Image rounded="4xl" width="1/3" src={imageUri} />
       <VStack width="full">
         <Text textStyle="xl">{detail?.data.name}</Text>
-        <BasicButton onClick={navigateToDetail}>See Detail</BasicButton>
-        <BasicButton onClick={navigateToAssistCredit}>
+        <BasicButton onClick={() => navigate(`/${treeId}/${hatId}/${address}`)}>
+          See Detail
+        </BasicButton>
+        <BasicButton
+          onClick={() =>
+            navigate(`/${treeId}/${hatId}/${address}/assistcredit/send`)
+          }
+        >
           Transfer Assist Credit
         </BasicButton>
       </VStack>
diff --git a/pkgs/frontend/app/routes/$treeId.tsx b/pkgs/frontend/app/routes/$treeId.tsx
index 226e38e..928ea32 100644
--- a/pkgs/frontend/app/routes/$treeId.tsx
+++ b/pkgs/frontend/app/routes/$treeId.tsx
@@ -24,7 +24,6 @@ const WorkspaceTop: FC = () => {
   const topHatId = tree?.hats?.find((h) => h.levelAtLocalTree === 0)?.id;
 
   const navigate = useNavigate();
-  const navigateToNewRole = () => navigate(`/workspaces/${topHatId}/roles/new`);
 
   return (
     <>
@@ -54,17 +53,18 @@ const WorkspaceTop: FC = () => {
           {tree?.hats
             ?.filter((h) => Number(h.levelAtLocalTree) >= 2)
             .map((h) => (
-              <HatsListItemParser
-                key={h.id}
-                imageUri={h.imageUri}
-                detailUri={h.details}
-              >
-                <VerticalRole />
-              </HatsListItemParser>
+              <Box key={h.id} onClick={() => navigate(`/${treeId}/${h.id}`)}>
+                <HatsListItemParser imageUri={h.imageUri} detailUri={h.details}>
+                  <VerticalRole />
+                </HatsListItemParser>
+              </Box>
             ))}
           <VStack>
             <AspectRatio width="full" ratio={1}>
-              <CommonButton rounded="4xl" onClick={navigateToNewRole}>
+              <CommonButton
+                rounded="4xl"
+                onClick={() => navigate(`/workspaces/${topHatId}/roles/new`)}
+              >
                 <FaPlus />
               </CommonButton>
             </AspectRatio>