diff --git a/dictation_client/src/AppRouter.tsx b/dictation_client/src/AppRouter.tsx
index 048d72e..08b7185 100644
--- a/dictation_client/src/AppRouter.tsx
+++ b/dictation_client/src/AppRouter.tsx
@@ -16,6 +16,8 @@ import UserListPage from "pages/UserListPage";
 import LicensePage from "pages/LicensePage";
 import DictationPage from "pages/DictationPage";
 import PartnerPage from "pages/PartnerPage";
+import WorkflowPage from "pages/WorkflowPage";
+import TypistGroupSettingPage from "pages/TypistGroupSettingPage";
 
 const AppRouter: React.FC = () => (
   <Routes>
@@ -58,7 +60,11 @@ const AppRouter: React.FC = () => (
     />
     <Route
       path="/workflow"
-      element={<RouteAuthGuard component={<SamplePage />} />}
+      element={<RouteAuthGuard component={<WorkflowPage />} />}
+    />
+    <Route
+      path="/workflow/typist-group"
+      element={<RouteAuthGuard component={<TypistGroupSettingPage />} />}
     />
     <Route
       path="/partners"
diff --git a/dictation_client/src/components/header/constants.ts b/dictation_client/src/components/header/constants.ts
index f3788f1..a182ffa 100644
--- a/dictation_client/src/components/header/constants.ts
+++ b/dictation_client/src/components/header/constants.ts
@@ -26,6 +26,7 @@ export const HEADER_NAME = "ODMS Cloud";
 export const ADMIN_ONLY_TABS = [
   HEADER_MENUS_LICENSE,
   HEADER_MENUS_USER,
+  HEADER_MENUS_WORKFLOW,
   HEADER_MENUS_PARTNER,
 ];
 
diff --git a/dictation_client/src/pages/TypistGroupSettingPage/index.tsx b/dictation_client/src/pages/TypistGroupSettingPage/index.tsx
new file mode 100644
index 0000000..1d8669c
--- /dev/null
+++ b/dictation_client/src/pages/TypistGroupSettingPage/index.tsx
@@ -0,0 +1,18 @@
+import React from "react";
+import Header from "components/header";
+import Footer from "components/footer";
+import styles from "styles/app.module.scss";
+import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
+
+const TypistGroupSettingPage: React.FC = (): JSX.Element => (
+  <div className={styles.wrap}>
+    <Header userName="XXXXXX" />
+    <UpdateTokenTimer />
+    <main className={styles.main}>
+      <div className="">Transcriptionist Group Setting</div>
+    </main>
+    <Footer />
+  </div>
+);
+
+export default TypistGroupSettingPage;
diff --git a/dictation_client/src/pages/WorkflowPage/index.tsx b/dictation_client/src/pages/WorkflowPage/index.tsx
new file mode 100644
index 0000000..e817a00
--- /dev/null
+++ b/dictation_client/src/pages/WorkflowPage/index.tsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Header from "components/header";
+import Footer from "components/footer";
+import styles from "styles/app.module.scss";
+import { UpdateTokenTimer } from "components/auth/updateTokenTimer";
+
+const WorkflowPage: React.FC = (): JSX.Element => (
+  <div className={styles.wrap}>
+    <Header userName="XXXXXX" />
+    <UpdateTokenTimer />
+    <main className={styles.main}>
+      <div className="">
+        <span>
+          <a style={{ margin: 20 }} href="/workflow/typist-group">
+            Transcriptionist Group Setting
+          </a>
+        </span>
+      </div>
+    </main>
+    <Footer />
+  </div>
+);
+
+export default WorkflowPage;
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss
index 3fd239f..995e34a 100644
--- a/dictation_client/src/styles/app.module.scss
+++ b/dictation_client/src/styles/app.module.scss
@@ -935,13 +935,75 @@ h3 + .brCrumb .tlIcon {
 .modal .formInput {
   padding: 0.5rem 0.8rem;
 }
+.modal .formInput[type="file"] {
+  border: none;
+  background: inherit;
+}
+.modal .formInput[type="file"].isHide {
+  display: none;
+}
 .modal .form label {
   padding: 0.5rem 0 0.2rem;
 }
+.modal .form label.formFileButton {
+  padding: 0.5rem 0.8rem;
+  border: 1px #999999 solid;
+  background: #ffffff;
+  font-size: 16px;
+  line-height: 1.4;
+  letter-spacing: 0.01rem;
+  font-weight: normal;
+  cursor: pointer;
+  border-radius: 0.3rem;
+  position: relative;
+  -moz-transition: all 0.3s ease-out;
+  -ms-transition: all 0.3s ease-out;
+  -webkit-transition: all 0.3s ease-out;
+  transition: all 0.3s ease-out;
+}
+.modal .form label.formFileButton:hover {
+  background: #f0f0f0;
+}
+.modal .formFileName {
+  display: inline-block;
+  width: 350px;
+  padding: 0.6rem 0.8rem;
+  border: 1px #e6e6e6 solid;
+  background: #e6e6e6;
+  box-sizing: border-box;
+  font-size: 16px;
+  line-height: 1.4;
+  letter-spacing: 0;
+  font-weight: normal;
+  text-align: left;
+}
 .modal .form .icLoading {
   bottom: 1.5rem;
   left: calc(50% - 25px);
 }
+.modal .form .tableWrap {
+  max-height: 60vh;
+  overflow-y: scroll;
+  margin-bottom: 1rem;
+}
+.modal .form .table {
+  width: 95%;
+  margin: 0 auto;
+}
+.modal .form .table .tableHeader th {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  padding: 0.4rem 0.5rem;
+  background: #282828;
+}
+.modal .form .table td {
+  padding: 0.6rem 0.4rem;
+}
+.modal .form .table .formInput {
+  width: inherit;
+  padding: 0.2rem 0.5rem;
+}
 .modal .encryptionPass {
   display: none;
 }
@@ -2199,12 +2261,38 @@ tr.isSelected .menuInTable li a {
 .workflow .table.workflow td.txWsline {
   white-space: pre;
 }
-.workflow .table.group {
+.workflow .table.group,
+.workflow .table.template {
   width: 600px;
 }
-.workflow .table.group td:last-child {
+.workflow .table.group td:last-child,
+.workflow .table.template td:last-child {
   text-align: right;
 }
+.workflow .table.worktype {
+  width: 1000px;
+}
+.workflow .table.worktype td:last-child {
+  text-align: right;
+}
+.workflow .table .menuLink {
+  min-width: 3rem;
+  text-align: center;
+}
+.workflow .menuAction.worktype {
+  width: 1000px;
+}
+.workflow .menuAction.worktype .selectMenu {
+  padding-top: 0.5rem;
+  float: right;
+  font-size: 0.9rem;
+}
+.workflow .menuAction.worktype .formInput {
+  width: inherit;
+  margin-left: 0.5rem;
+  padding: 0.2rem 0.8rem;
+  font-size: 0.9rem;
+}
 
 .formList dd.formChange {
   display: flex;
diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts
index 2f0dd3c..30434e7 100644
--- a/dictation_client/src/styles/app.module.scss.d.ts
+++ b/dictation_client/src/styles/app.module.scss.d.ts
@@ -60,6 +60,12 @@ declare const classNames: {
   readonly modalTitleIcon: "modalTitleIcon";
   readonly last: "last";
   readonly slideSet: "slideSet";
+  readonly isHide: "isHide";
+  readonly formFileButton: "formFileButton";
+  readonly formFileName: "formFileName";
+  readonly tableWrap: "tableWrap";
+  readonly table: "table";
+  readonly tableHeader: "tableHeader";
   readonly encryptionPass: "encryptionPass";
   readonly pageHeader: "pageHeader";
   readonly pageTitle: "pageTitle";
@@ -75,8 +81,6 @@ declare const classNames: {
   readonly snackbarMessage: "snackbarMessage";
   readonly snackbarIcon: "snackbarIcon";
   readonly snackbarIconClose: "snackbarIconClose";
-  readonly table: "table";
-  readonly tableHeader: "tableHeader";
   readonly hasSort: "hasSort";
   readonly isActiveAz: "isActiveAz";
   readonly isActiveZa: "isActiveZa";
@@ -100,8 +104,8 @@ declare const classNames: {
   readonly menuAction: "menuAction";
   readonly inTable: "inTable";
   readonly menuLink: "menuLink";
-  readonly colorLink: "colorLink";
   readonly menuIcon: "menuIcon";
+  readonly colorLink: "colorLink";
   readonly isDisable: "isDisable";
   readonly icCheckCircle: "icCheckCircle";
   readonly icInTable: "icInTable";
@@ -112,7 +116,6 @@ declare const classNames: {
   readonly displayOptions: "displayOptions";
   readonly tableFilter: "tableFilter";
   readonly tableFilter2: "tableFilter2";
-  readonly tableWrap: "tableWrap";
   readonly txWsline: "txWsline";
   readonly hidePri: "hidePri";
   readonly opPri: "opPri";
@@ -178,6 +181,9 @@ declare const classNames: {
   readonly changeTitle: "changeTitle";
   readonly role4: "role4";
   readonly group: "group";
+  readonly template: "template";
+  readonly worktype: "worktype";
+  readonly selectMenu: "selectMenu";
   readonly alignCenter: "alignCenter";
   readonly alignLeft: "alignLeft";
   readonly alignRight: "alignRight";
@@ -203,6 +209,5 @@ declare const classNames: {
   readonly txNormal: "txNormal";
   readonly txIcon: "txIcon";
   readonly txWswrap: "txWswrap";
-  readonly widthMid: "widthMid";
 };
 export = classNames;