diff --git a/app/accounts/[id]/categories/[categoryId]/edit.tsx b/app/accounts/[id]/categories/[categoryId]/edit.tsx
new file mode 100644
index 0000000..080469b
--- /dev/null
+++ b/app/accounts/[id]/categories/[categoryId]/edit.tsx
@@ -0,0 +1,87 @@
+import { Stack, useRouter, useSearchParams } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { IconButton, TextInput } from "react-native-paper";
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  Account,
+  restoreAccount,
+  updateCategory,
+} from "../../../../../lib/account";
+import { createEvent, getEvents } from "../../../../../lib/api";
+
+function Inner(): JSX.Element {
+  const params = useSearchParams();
+  const accountId = `${params.id}`;
+  const nameDefault = decodeURIComponent(`${params.name}`);
+  const categoryId = `${params.categoryId}`;
+  const insets = useSafeAreaInsets();
+  const [account, setAccount] = useState<Account | null>(null);
+  const [name, setName] = useState<string>(nameDefault);
+  const router = useRouter();
+
+  useEffect(() => {
+    getEvents(accountId)
+      .then((events) => restoreAccount(events))
+      .then((account) => setAccount(account));
+  }, []);
+
+  const onClickOk = () => {
+    if (account === null) return;
+    const [_, event] = updateCategory(account, categoryId, name);
+    createEvent(event).then((_) => {
+      router.back();
+    });
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top,
+        },
+      ]}
+    >
+      <StatusBar style="auto" />
+      <Stack.Screen
+        options={{
+          title: "Edit Category",
+          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+        }}
+      />
+      <View style={{ flex: 1, width: "100%" }}>
+        <TextInput
+          label="Name"
+          mode="outlined"
+          onChangeText={setName}
+          style={styles.input}
+          value={name}
+        />
+      </View>
+    </View>
+  );
+}
+
+export default function AccountNew() {
+  return (
+    <SafeAreaProvider>
+      <Inner />
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+  input: {
+    margin: 16,
+  },
+});
diff --git a/app/accounts/[id]/categories/index.tsx b/app/accounts/[id]/categories/index.tsx
index 25d1887..25eabc5 100644
--- a/app/accounts/[id]/categories/index.tsx
+++ b/app/accounts/[id]/categories/index.tsx
@@ -1,35 +1,33 @@
-import { useSearchParams } from "expo-router";
+import { usePathname, useRouter, useSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
 import { StyleSheet, View } from "react-native";
 import { FAB } from "react-native-paper";
 import { CategoryList } from "../../../../components/CategoryList";
 import { DeleteCategoryDialog } from "../../../../components/DeleteCategoryDialog";
-import { EditCategoryDialog } from "../../../../components/EditCategoryDialog";
 import {
   Account,
-  createCategory,
   deleteCategory,
   restoreAccount,
-  updateCategory,
 } from "../../../../lib/account";
 import { createEvent, getEvents } from "../../../../lib/api";
 
 export default function Categories(): JSX.Element {
+  const pathname = usePathname();
   const params = useSearchParams();
+  const router = useRouter();
   const accountId = `${params.id}`;
   const [account, setAccount] = useState<Account | null>(null);
   const [name, setName] = useState<string>("");
   const [categoryId, setCategoryId] = useState<string | null>(null);
-  const [editDialogVisible, setEditDialogVisible] = useState<boolean>(false);
   const [deleteDialogVisible, setDeleteDialogVisible] =
     useState<boolean>(false);
   useEffect(() => {
     getEvents(accountId)
       .then((events) => restoreAccount(events))
       .then((account) => setAccount(account));
-  }, [account?.version]);
+  }, [pathname]);
   return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+    <View style={styles.container}>
       <CategoryList
         data={account?.categories ?? []}
         onLongPressCategory={(category) => {
@@ -38,15 +36,27 @@ export default function Categories(): JSX.Element {
           setDeleteDialogVisible(true);
         }}
         onPressCategory={(category) => {
-          setName(category.name);
-          setCategoryId(category.id);
-          setEditDialogVisible(true);
+          router.push({
+            pathname: "/accounts/[id]/categories/[categoryId]/edit",
+            params: {
+              id: accountId,
+              categoryId: category.id,
+              name: encodeURIComponent(category.name),
+            },
+          });
         }}
       />
       <FAB
         icon="plus"
         style={styles.fab}
-        onPress={() => setEditDialogVisible(true)}
+        onPress={() => {
+          router.push({
+            pathname: "/accounts/[id]/categories/new",
+            params: {
+              id: accountId,
+            },
+          });
+        }}
       />
       <DeleteCategoryDialog
         id={categoryId}
@@ -75,56 +85,16 @@ export default function Categories(): JSX.Element {
         }}
         visible={deleteDialogVisible}
       />
-      <EditCategoryDialog
-        id={categoryId}
-        name={name}
-        onChangeName={setName}
-        onClickCancel={() => {
-          setName("");
-          setCategoryId(null);
-          setEditDialogVisible(false);
-        }}
-        onClickOk={() => {
-          if (account === null) return;
-          if (categoryId === null) {
-            // update local state
-            const [newAccount, newEvent] = createCategory(account, name);
-
-            // update remote state
-            setAccount(newAccount);
-            createEvent(newEvent).catch((_) => {
-              setAccount(account);
-            });
-
-            setName("");
-            setCategoryId(null);
-            setEditDialogVisible(false);
-          } else {
-            // update local state
-            const [newAccount, newEvent] = updateCategory(
-              account,
-              categoryId,
-              name
-            );
-
-            // update remote state
-            setAccount(newAccount);
-            createEvent(newEvent).catch((_) => {
-              setAccount(account);
-            });
-
-            setName("");
-            setCategoryId(null);
-            setEditDialogVisible(false);
-          }
-        }}
-        visible={editDialogVisible}
-      />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
   fab: {
     bottom: 0,
     margin: 16,
diff --git a/app/accounts/[id]/categories/new.tsx b/app/accounts/[id]/categories/new.tsx
new file mode 100644
index 0000000..60d3458
--- /dev/null
+++ b/app/accounts/[id]/categories/new.tsx
@@ -0,0 +1,85 @@
+import { Stack, useRouter, useSearchParams } from "expo-router";
+import { StatusBar } from "expo-status-bar";
+import React, { useEffect, useState } from "react";
+import { StyleSheet, View } from "react-native";
+import { IconButton, TextInput } from "react-native-paper";
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
+import {
+  Account,
+  createCategory,
+  restoreAccount,
+} from "../../../../lib/account";
+import { createEvent, getEvents } from "../../../../lib/api";
+
+function Inner(): JSX.Element {
+  const params = useSearchParams();
+  const accountId = `${params.id}`;
+  const insets = useSafeAreaInsets();
+  const [account, setAccount] = useState<Account | null>(null);
+  const [name, setName] = useState<string>("");
+  const router = useRouter();
+
+  useEffect(() => {
+    getEvents(accountId)
+      .then((events) => restoreAccount(events))
+      .then((account) => setAccount(account));
+  }, []);
+
+  const onClickOk = () => {
+    if (account === null) return;
+    const [_, event] = createCategory(account, name);
+    createEvent(event).then((_) => {
+      router.back();
+    });
+  };
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          paddingTop: insets.top,
+        },
+      ]}
+    >
+      <StatusBar style="auto" />
+      <Stack.Screen
+        options={{
+          title: "Add Category",
+          headerRight: () => <IconButton icon="check" onPress={onClickOk} />,
+        }}
+      />
+      <View style={{ flex: 1, width: "100%" }}>
+        <TextInput
+          label="Name"
+          mode="outlined"
+          onChangeText={setName}
+          style={styles.input}
+          value={name}
+        />
+      </View>
+    </View>
+  );
+}
+
+export default function AccountNew() {
+  return (
+    <SafeAreaProvider>
+      <Inner />
+    </SafeAreaProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+    flex: 1,
+    justifyContent: "center",
+  },
+  input: {
+    margin: 16,
+  },
+});
diff --git a/components/EditCategoryDialog.tsx b/components/EditCategoryDialog.tsx
deleted file mode 100644
index 0af67ae..0000000
--- a/components/EditCategoryDialog.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { Button, Dialog, TextInput } from "react-native-paper";
-
-type Props = {
-  id: string | null;
-  name: string;
-  onChangeName: (text: string) => void;
-  onClickCancel: () => void;
-  onClickOk: () => void;
-  visible: boolean;
-};
-
-export function EditCategoryDialog({
-  id,
-  name,
-  onChangeName,
-  onClickCancel,
-  onClickOk,
-  visible,
-}: Props): JSX.Element {
-  return (
-    <Dialog visible={visible}>
-      <Dialog.Title>{id === null ? "Add" : "Edit"} Category</Dialog.Title>
-      <Dialog.Content>
-        <TextInput
-          label="Name"
-          mode="outlined"
-          onChangeText={onChangeName}
-          value={name}
-        />
-      </Dialog.Content>
-      <Dialog.Actions>
-        <Button onPress={onClickCancel}>Cancel</Button>
-        <Button onPress={onClickOk}>OK</Button>
-      </Dialog.Actions>
-    </Dialog>
-  );
-}