diff --git a/dictation_client/src/pages/WorkflowPage/index.tsx b/dictation_client/src/pages/WorkflowPage/index.tsx
index e5b4994..0ea3e51 100644
--- a/dictation_client/src/pages/WorkflowPage/index.tsx
+++ b/dictation_client/src/pages/WorkflowPage/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import Header from "components/header";
 import Footer from "components/footer";
 import styles from "styles/app.module.scss";
@@ -14,10 +14,13 @@ import { listWorkflowAsync } from "features/workflow/operations";
 import { selectIsLoading, selectWorkflows } from "features/workflow";
 import progress_activit from "assets/images/progress_activit.svg";
 import { getTranslationID } from "translation";
+import { AddWorkflowPopup } from "./addworkflowPopup";
 
 const WorkflowPage: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();
   const [t] = useTranslation();
+  // 追加Popupの表示制御
+  const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);
   const workflows = useSelector(selectWorkflows);
   const isLoading = useSelector(selectIsLoading);
 
@@ -25,139 +28,167 @@ const WorkflowPage: React.FC = (): JSX.Element => {
     dispatch(listWorkflowAsync());
   }, [dispatch]);
   return (
-    <div className={styles.wrap}>
-      <Header userName="XXXXXX" />
-      <UpdateTokenTimer />
-      <main className={styles.main}>
-        <div className="">
-          <div className={styles.pageHeader}>
-            <h1 className={styles.pageTitle}>
-              {t(getTranslationID("workflowPage.label.title"))}
-            </h1>
-          </div>
-          <section className={styles.workflow}>
-            <div>
-              <ul className={`${styles.menuAction} ${styles.alignRight}`}>
-                <li className={styles.floatLeft}>
-                  <a className={`${styles.menuLink} ${styles.isActive}`}>
-                    <img
-                      src={ruleAddImg}
-                      alt="addRoutingRule"
-                      className={styles.menuIcon}
-                    />
-                    {t(getTranslationID("workflowPage.label.addRoutingRule"))}
-                  </a>
-                </li>
-
-                <li>
-                  <a
-                    href="/workflow/template"
-                    className={`${styles.menuLink} ${styles.isActive}`}
-                  >
-                    <img
-                      src={templateSettingImg}
-                      alt="templateSetting"
-                      className={styles.menuIcon}
-                    />
-                    {t(getTranslationID("workflowPage.label.templateSetting"))}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="/workflow/worktype-id"
-                    className={`${styles.menuLink} ${styles.isActive}`}
-                  >
-                    <img
-                      src={worktypeSettingImg}
-                      alt="worktypeIdSetting"
-                      className={styles.menuIcon}
-                    />
-                    {t(
-                      getTranslationID("workflowPage.label.worktypeIdSetting")
-                    )}
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="/workflow/typist-group"
-                    className={`${styles.menuLink} ${styles.isActive}`}
-                  >
-                    <img
-                      src={groupSettingImg}
-                      alt="typistGroupSetting"
-                      className={styles.menuIcon}
-                    />
-                    {t(
-                      getTranslationID("workflowPage.label.typistGroupSetting")
-                    )}
-                  </a>
-                </li>
-              </ul>
-              <table className={`${styles.table} ${styles.workflow}`}>
-                <tr className={styles.tableHeader}>
-                  <th className={styles.clm0}>{/** empty th */}</th>
-                  <th>{t(getTranslationID("workflowPage.label.authorID"))}</th>
-                  <th>{t(getTranslationID("workflowPage.label.worktype"))}</th>
-                  <th>
-                    {t(getTranslationID("workflowPage.label.transcriptionist"))}
-                  </th>
-                  <th>{t(getTranslationID("workflowPage.label.template"))}</th>
-                </tr>
-                {workflows?.map((workflow) => (
-                  <tr key={workflow.id}>
-                    <td className={styles.clm0}>
-                      <ul className={styles.menuInTable}>
-                        <li>
-                          <a href="">
-                            {t(getTranslationID("workflowPage.label.editRule"))}
-                          </a>
-                        </li>
-                        <li>
-                          <a href="">
-                            {t(getTranslationID("common.label.delete"))}
-                          </a>
-                        </li>
-                      </ul>
-                    </td>
-                    <td>{workflow.author.authorId}</td>
-                    <td>{workflow.worktype?.worktypeId ?? "-"}</td>
-
-                    <td className={styles.txWsline}>
-                      {workflow.typists.map((typist, i) => (
-                        <>
-                          {typist.typistName}
-                          {i !== workflow.typists.length - 1 && <br />}
-                        </>
-                      ))}
-                    </td>
-                    <td>{workflow.template?.fileName ?? "-"}</td>
-                  </tr>
-                ))}
-              </table>
-              {!isLoading &&
-                (workflows === undefined || workflows.length === 0) && (
-                  <p
-                    style={{
-                      margin: "10px",
-                      textAlign: "center",
-                    }}
-                  >
-                    {t(getTranslationID("common.message.listEmpty"))}
-                  </p>
-                )}
-              {isLoading && (
-                <img
-                  src={progress_activit}
-                  className={styles.icLoading}
-                  alt="Loading"
-                />
-              )}
+    <>
+      {isShowAddPopup && (
+        <AddWorkflowPopup
+          onClose={() => {
+            setIsShowAddPopup(false);
+          }}
+        />
+      )}
+      <div className={styles.wrap}>
+        <Header userName="XXXXXX" />
+        <UpdateTokenTimer />
+        <main className={styles.main}>
+          <div className="">
+            <div className={styles.pageHeader}>
+              <h1 className={styles.pageTitle}>
+                {t(getTranslationID("workflowPage.label.title"))}
+              </h1>
             </div>
-          </section>
-        </div>
-      </main>
-      <Footer />
-    </div>
+            <section className={styles.workflow}>
+              <div>
+                <ul className={`${styles.menuAction} ${styles.alignRight}`}>
+                  <li className={styles.floatLeft}>
+                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+                    <a
+                      className={`${styles.menuLink} ${styles.isActive}`}
+                      onClick={() => {
+                        setIsShowAddPopup(true);
+                      }}
+                    >
+                      <img
+                        src={ruleAddImg}
+                        alt="addRoutingRule"
+                        className={styles.menuIcon}
+                      />
+                      {t(getTranslationID("workflowPage.label.addRoutingRule"))}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="/workflow/template"
+                      className={`${styles.menuLink} ${styles.isActive}`}
+                    >
+                      <img
+                        src={templateSettingImg}
+                        alt="templateSetting"
+                        className={styles.menuIcon}
+                      />
+                      {t(
+                        getTranslationID("workflowPage.label.templateSetting")
+                      )}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="/workflow/worktype-id"
+                      className={`${styles.menuLink} ${styles.isActive}`}
+                    >
+                      <img
+                        src={worktypeSettingImg}
+                        alt="worktypeIdSetting"
+                        className={styles.menuIcon}
+                      />
+                      {t(
+                        getTranslationID("workflowPage.label.worktypeIdSetting")
+                      )}
+                    </a>
+                  </li>
+                  <li>
+                    <a
+                      href="/workflow/typist-group"
+                      className={`${styles.menuLink} ${styles.isActive}`}
+                    >
+                      <img
+                        src={groupSettingImg}
+                        alt="typistGroupSetting"
+                        className={styles.menuIcon}
+                      />
+                      {t(
+                        getTranslationID(
+                          "workflowPage.label.typistGroupSetting"
+                        )
+                      )}
+                    </a>
+                  </li>
+                </ul>
+                <table className={`${styles.table} ${styles.workflow}`}>
+                  <tr className={styles.tableHeader}>
+                    <th className={styles.clm0}>{/** empty th */}</th>
+                    <th>
+                      {t(getTranslationID("workflowPage.label.authorID"))}
+                    </th>
+                    <th>
+                      {t(getTranslationID("workflowPage.label.worktype"))}
+                    </th>
+                    <th>
+                      {t(
+                        getTranslationID("workflowPage.label.transcriptionist")
+                      )}
+                    </th>
+                    <th>
+                      {t(getTranslationID("workflowPage.label.template"))}
+                    </th>
+                  </tr>
+                  {workflows?.map((workflow) => (
+                    <tr key={workflow.id}>
+                      <td className={styles.clm0}>
+                        <ul className={styles.menuInTable}>
+                          <li>
+                            <a href="">
+                              {t(
+                                getTranslationID("workflowPage.label.editRule")
+                              )}
+                            </a>
+                          </li>
+                          <li>
+                            <a href="">
+                              {t(getTranslationID("common.label.delete"))}
+                            </a>
+                          </li>
+                        </ul>
+                      </td>
+                      <td>{workflow.author.authorId}</td>
+                      <td>{workflow.worktype?.worktypeId ?? "-"}</td>
+
+                      <td className={styles.txWsline}>
+                        {workflow.typists.map((typist, i) => (
+                          <>
+                            {typist.typistName}
+                            {i !== workflow.typists.length - 1 && <br />}
+                          </>
+                        ))}
+                      </td>
+                      <td>{workflow.template?.fileName ?? "-"}</td>
+                    </tr>
+                  ))}
+                </table>
+                {!isLoading &&
+                  (workflows === undefined || workflows.length === 0) && (
+                    <p
+                      style={{
+                        margin: "10px",
+                        textAlign: "center",
+                      }}
+                    >
+                      {t(getTranslationID("common.message.listEmpty"))}
+                    </p>
+                  )}
+                {isLoading && (
+                  <img
+                    src={progress_activit}
+                    className={styles.icLoading}
+                    alt="Loading"
+                  />
+                )}
+              </div>
+            </section>
+          </div>
+        </main>
+        <Footer />
+      </div>
+    </>
   );
 };