diff --git a/pkgs/frontend/app/routes/$treeId_.$hatId_.assign.tsx b/pkgs/frontend/app/routes/$treeId_.$hatId_.assign.tsx
index f40eecb..eb9c4b3 100644
--- a/pkgs/frontend/app/routes/$treeId_.$hatId_.assign.tsx
+++ b/pkgs/frontend/app/routes/$treeId_.$hatId_.assign.tsx
@@ -1,5 +1,5 @@
 import { Box, Grid, HStack, Text } from "@chakra-ui/react";
-import { useParams } from "@remix-run/react";
+import { useNavigate, useParams } from "@remix-run/react";
 import { useAddressesByNames } from "hooks/useENS";
 import { useGetHat } from "hooks/useHats";
 import { useMintHatFromTimeFrameModule } from "hooks/useHatsTimeFrameModule";
@@ -50,6 +50,8 @@ const AssignRole: FC = () => {
 
   const { hat, isLoading } = useGetHat(hatId ?? "");
 
+  const navigate = useNavigate();
+
   // Name resolution
   const { addresses, fetchAddresses } = useAddressesByNames(undefined, true);
 
@@ -96,7 +98,17 @@ const AssignRole: FC = () => {
         ? BigInt(new Date(startDatetime).getTime() / 1000)
         : BigInt(0),
     );
-  }, [hatId, resolvedAddress, inputValue, startDatetime, mintHat]);
+
+    navigate(`/${treeId}/${hatId}`);
+  }, [
+    treeId,
+    hatId,
+    resolvedAddress,
+    inputValue,
+    startDatetime,
+    navigate,
+    mintHat,
+  ]);
 
   return (
     <Grid gridTemplateRows="1fr auto" minH="calc(100vh - 100px)" pb={5}>
diff --git a/pkgs/frontend/app/routes/$treeId_.roles_.new.tsx b/pkgs/frontend/app/routes/$treeId_.roles_.new.tsx
index 844e84a..ab47ba2 100644
--- a/pkgs/frontend/app/routes/$treeId_.roles_.new.tsx
+++ b/pkgs/frontend/app/routes/$treeId_.roles_.new.tsx
@@ -6,7 +6,7 @@ import {
   useUploadImageFileToIpfs,
 } from "hooks/useIpfs";
 import { useActiveWallet } from "hooks/useWallet";
-import { type FC, useState } from "react";
+import { type FC, useCallback, useState } from "react";
 import type {
   HatsDetailsAuthorities,
   HatsDetailsResponsabilities,
@@ -47,12 +47,12 @@ const NewRole: FC = () => {
   const { getTreeInfo } = useHats();
   const navigate = useNavigate();
 
-  const handleSubmit = async () => {
+  const handleSubmit = useCallback(async () => {
     if (!wallet) {
       alert("ウォレットを接続してください。");
       return;
     }
-    if (!roleName || !roleDescription || !imageFile) {
+    if (!roleName) {
       alert("全ての項目を入力してください。");
       return;
     }
@@ -79,26 +79,33 @@ const NewRole: FC = () => {
       const hatterHatId = treeInfo?.hats?.[1]?.id;
       if (!hatterHatId) throw new Error("Hat ID is required");
 
-      console.log("resUploadHatsDetails", resUploadHatsDetails);
-      console.log("resUploadImage", resUploadImage);
-      console.log("hatterHatId", hatterHatId);
-
       const parsedLog = await createHat({
         parentHatId: BigInt(hatterHatId),
         details: resUploadHatsDetails?.ipfsUri,
         imageURI: resUploadImage?.ipfsUri,
       });
-      if (!parsedLog) throw new Error("Failed to create hat transaction");
-      console.log("parsedLog", parsedLog);
-
-      navigate(`/${treeId}/roles`);
+      const log = parsedLog?.find((log) => log.eventName === "HatCreated");
+      if (!log) throw new Error("Failed to create hat transaction");
+      setTimeout(() => {
+        navigate(`/${treeId}/0x00000${log.args.id?.toString(16)}`);
+      });
     } catch (error) {
       console.error(error);
       alert(`エラーが発生しました。${error}`);
-    } finally {
-      setIsLoading(false);
     }
-  };
+  }, [
+    authorities,
+    createHat,
+    navigate,
+    responsibilities,
+    roleName,
+    roleDescription,
+    treeId,
+    uploadHatsDetailsToIpfs,
+    uploadImageFileToIpfs,
+    wallet,
+    getTreeInfo,
+  ]);
 
   return (
     <>
@@ -113,7 +120,7 @@ const NewRole: FC = () => {
             mt={6}
           />
         </ContentContainer>
-        <SectionHeading>Responsibilities</SectionHeading>
+        <SectionHeading>役割</SectionHeading>
         <ContentContainer>
           <RoleAttributesList
             items={responsibilities}
@@ -125,7 +132,7 @@ const NewRole: FC = () => {
             setAttributes={setResponsibilities}
           />
         </ContentContainer>
-        <SectionHeading>Authorities</SectionHeading>
+        <SectionHeading>権限</SectionHeading>
         <ContentContainer>
           <RoleAttributesList items={authorities} setItems={setAuthorities} />
           <AddRoleAttributeDialog
@@ -144,13 +151,7 @@ const NewRole: FC = () => {
         >
           <BasicButton
             onClick={handleSubmit}
-            disabled={
-              !roleName ||
-              !roleDescription ||
-              !imageFile ||
-              responsibilities.length === 0 ||
-              authorities.length === 0
-            }
+            disabled={!roleName}
             loading={isLoading}
           >
             作成
diff --git a/pkgs/frontend/app/routes/$treeId_.splits.new.tsx b/pkgs/frontend/app/routes/$treeId_.splits.new.tsx
index d44e227..63bb426 100644
--- a/pkgs/frontend/app/routes/$treeId_.splits.new.tsx
+++ b/pkgs/frontend/app/routes/$treeId_.splits.new.tsx
@@ -221,7 +221,7 @@ const SplitterNew: FC = () => {
   const availableName = useMemo(() => {
     if (!splitterName) return false;
 
-    return addresses[0].length === 0;
+    return addresses?.[0]?.length === 0;
   }, [splitterName, addresses]);
 
   const { createSplits, previewSplits, isLoading } = useSplitsCreator(
diff --git a/pkgs/frontend/app/routes/signup.tsx b/pkgs/frontend/app/routes/signup.tsx
index 3b4699d..90cbd1b 100644
--- a/pkgs/frontend/app/routes/signup.tsx
+++ b/pkgs/frontend/app/routes/signup.tsx
@@ -30,7 +30,7 @@ const Login: FC = () => {
   const availableName = useMemo(() => {
     if (!userName) return false;
 
-    return addresses[0].length === 0;
+    return addresses?.[0]?.length === 0;
   }, [userName, addresses]);
 
   const handleSubmit = useCallback(async () => {