diff --git a/dictation_client/src/features/workflow/worktype/operations.ts b/dictation_client/src/features/workflow/worktype/operations.ts
index 6cbd133..0e45d33 100644
--- a/dictation_client/src/features/workflow/worktype/operations.ts
+++ b/dictation_client/src/features/workflow/worktype/operations.ts
@@ -312,6 +312,12 @@ export const updateActiveWorktypeAsync = createAsyncThunk<
         headers: { authorization: `Bearer ${accessToken}` },
       }
     );
+    thunkApi.dispatch(
+      openSnackbar({
+        level: "info",
+        message: getTranslationID("common.message.success"),
+      })
+    );
 
     return {};
   } catch (e) {
diff --git a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
index b2b8715..e176adf 100644
--- a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
+++ b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
@@ -1,7 +1,7 @@
 import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
 import Footer from "components/footer";
 import Header from "components/header";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import { getTranslationID } from "translation";
 import styles from "styles/app.module.scss";
 import undo from "assets/images/undo.svg";
@@ -39,32 +39,51 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
   const [isShowEditOptionItemPopup, setIsShowEditOptionItemPopup] =
     useState<boolean>(false);
 
+  // ActiveWorktypeIDのセレクトボックス表示の値
+  const [selectedActiveWorktypeId, setSelectedActiveWorktypeId] = useState<
+    number | undefined
+  >(undefined);
+
+  // 初期表示
   useEffect(() => {
     dispatch(listWorktypesAsync());
   }, [dispatch]);
 
-  const onChangeActiveWorktype = useCallback(
-    async (e: React.ChangeEvent<HTMLSelectElement>) => {
+  // APIから取得したactiveWorktypeIdを画面表示に反映
+  useEffect(() => {
+    setSelectedActiveWorktypeId(activeWorktypeId);
+  }, [activeWorktypeId]);
+
+  // ActiveWorktypeIDのセレクトボックス変更時（セレクトボックスに表示するActiveWorktypeIDの変更時）
+  useEffect(() => {
+    // 画面表示の変更後にダイアログを表示するため、setTimeoutを使用
+    const timeout = setTimeout(async () => {
+      if (selectedActiveWorktypeId === activeWorktypeId) {
+        return;
+      }
       // ダイアログ確認
       if (
         // eslint-disable-next-line no-alert
         !window.confirm(t(getTranslationID("common.message.dialogConfirm")))
       ) {
+        setSelectedActiveWorktypeId(activeWorktypeId);
         return;
       }
-      const { value } = e.target;
-      const active = value === "" ? undefined : Number(value);
-
       const { meta } = await dispatch(
-        updateActiveWorktypeAsync({ id: active })
+        updateActiveWorktypeAsync({ id: selectedActiveWorktypeId })
       );
 
       if (meta.requestStatus === "fulfilled") {
         dispatch(listWorktypesAsync());
+      } else {
+        setSelectedActiveWorktypeId(activeWorktypeId);
       }
-    },
-    [dispatch, t]
-  );
+    }, 0);
+    return () => {
+      clearTimeout(timeout);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedActiveWorktypeId]);
 
   return (
     <>
@@ -140,8 +159,12 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
                     <select
                       name="Active Worktype"
                       className={styles.formInput}
-                      value={activeWorktypeId ?? ""}
-                      onChange={onChangeActiveWorktype}
+                      value={selectedActiveWorktypeId ?? ""}
+                      onChange={(e) => {
+                        const { value } = e.target;
+                        const active = value === "" ? undefined : Number(value);
+                        setSelectedActiveWorktypeId(active);
+                      }}
                     >
                       {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
                       <option value="" />