diff --git a/dictation_client/src/components/delegate/index.tsx b/dictation_client/src/components/delegate/index.tsx
new file mode 100644
index 0000000..264facc
--- /dev/null
+++ b/dictation_client/src/components/delegate/index.tsx
@@ -0,0 +1,36 @@
+// 代行操作中に表示するコンポーネント
+// ------------------------------------------------------
+import React from "react";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import styles from "../../styles/app.module.scss";
+import exit from "../../assets/images/exit.svg";
+import reportWhite from "../../assets/images/report_white.svg";
+import { getTranslationID } from "translation";
+
+interface DelegationBarProps {
+  delegatedCompanyName: string;
+}
+
+export const DelegationBar: React.FC<DelegationBarProps> = (
+  porps
+): JSX.Element => {
+  const { delegatedCompanyName } = porps;
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.manageInfo}>
+      <img src={reportWhite} className={styles.manageIcon} alt="report" />
+      <p className={styles.txNormal}>
+        {t(getTranslationID("common.label.operationInsteadOf"))}
+        <span>{delegatedCompanyName}</span>
+      </p>
+      <img
+        src={exit}
+        className={styles.manageIconClose}
+        alt="Exit"
+        title="Exit"
+      />
+    </div>
+  );
+};
diff --git a/dictation_client/src/features/auth/authSlice.ts b/dictation_client/src/features/auth/authSlice.ts
index a35be42..a9c5dc5 100644
--- a/dictation_client/src/features/auth/authSlice.ts
+++ b/dictation_client/src/features/auth/authSlice.ts
@@ -14,6 +14,8 @@ const initialState: AuthState = {
   configuration: initialConfig(),
   accessToken: loadAccessToken(),
   refreshToken: loadRefreshToken(),
+  delegatedAccessToken: null,
+  delegatedRefreshToken: null,
 };
 
 export const authSlice = createSlice({
@@ -22,7 +24,12 @@ export const authSlice = createSlice({
   reducers: {
     setToken: (
       state,
-      action: PayloadAction<Omit<AuthState, "configuration">>
+      action: PayloadAction<
+        Omit<
+          AuthState,
+          "configuration" | "delegatedAccessToken" | "delegatedRefreshToken"
+        >
+      >
     ) => {
       const { accessToken, refreshToken } = action.payload;
       if (accessToken && refreshToken) {
diff --git a/dictation_client/src/features/auth/selectors.ts b/dictation_client/src/features/auth/selectors.ts
index db5f6a9..db20981 100644
--- a/dictation_client/src/features/auth/selectors.ts
+++ b/dictation_client/src/features/auth/selectors.ts
@@ -22,3 +22,7 @@ export const isTokenExpired = (state: RootState): boolean => {
   }
   return true;
 };
+
+// 代行操作用のトークンを取得する
+export const selectDelegatedAccessToken = (state: RootState): string | null =>
+  state.auth.delegatedAccessToken;
diff --git a/dictation_client/src/features/auth/state.ts b/dictation_client/src/features/auth/state.ts
index 8fbfd8a..1d8d82d 100644
--- a/dictation_client/src/features/auth/state.ts
+++ b/dictation_client/src/features/auth/state.ts
@@ -4,4 +4,6 @@ export interface AuthState {
   configuration: ConfigurationParameters;
   accessToken: string | null;
   refreshToken: string | null;
+  delegatedAccessToken: string | null;
+  delegatedRefreshToken: string | null;
 }
diff --git a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
index e20c9f1..4ccc949 100644
--- a/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
+++ b/dictation_client/src/pages/LicensePage/licenseOrderHistory.tsx
@@ -30,6 +30,8 @@ import { selectSelectedRow } from "features/license/partnerLicense";
 import undo from "../../assets/images/undo.svg";
 import history from "../../assets/images/history.svg";
 import progress_activit from "../../assets/images/progress_activit.svg";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";
 
 interface LicenseOrderHistoryProps {
   onReturn: () => void;
@@ -46,6 +48,8 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
   const currentPage = useSelector(selectCurrentPage);
   const isLoading = useSelector(selectIsLoading);
   const selectedRow = useSelector(selectSelectedRow);
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
 
   // Return押下時の処理
   const returnGui = useCallback(() => {
@@ -154,7 +158,14 @@ export const LicenseOrderHistory: React.FC<LicenseOrderHistoryProps> = (
   }, [dispatch, currentPage]);
 
   return (
-    <div className={styles.wrap}>
+    <div
+      className={`${styles.wrap} ${delegatedAccessToken ? styles.manage : ""}`}
+    >
+      {
+        // 代行操作中の場合は、代行操作バーを表示する
+        // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+        delegatedAccessToken && <DelegationBar delegatedCompanyName="XXXXXX" />
+      }
       <Header userName="XXXXXX" />
 
       <UpdateTokenTimer />
diff --git a/dictation_client/src/pages/LicensePage/licenseSummary.tsx b/dictation_client/src/pages/LicensePage/licenseSummary.tsx
index 8700902..85b0fd0 100644
--- a/dictation_client/src/pages/LicensePage/licenseSummary.tsx
+++ b/dictation_client/src/pages/LicensePage/licenseSummary.tsx
@@ -22,6 +22,8 @@ import { LicenseOrderPopup } from "./licenseOrderPopup";
 import { CardLicenseActivatePopup } from "./cardLicenseActivatePopup";
 // eslint-disable-next-line import/no-named-as-default
 import LicenseOrderHistory from "./licenseOrderHistory";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";
 
 interface LicenseSummaryProps {
   onReturn?: () => void;
@@ -33,6 +35,8 @@ export const LicenseSummary: React.FC<LicenseSummaryProps> = (
   const dispatch: AppDispatch = useDispatch();
   const [t] = useTranslation();
   const selectedRow = useSelector(selectSelectedRow);
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
 
   // popup制御関係
   const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false);
@@ -96,7 +100,18 @@ export const LicenseSummary: React.FC<LicenseSummaryProps> = (
         />
       )}
       {!islicenseOrderHistoryOpen && (
-        <div className={styles.wrap}>
+        <div
+          className={`${styles.wrap} ${
+            delegatedAccessToken ? styles.manage : ""
+          }`}
+        >
+          {
+            // 代行操作中の場合は、代行操作バーを表示する
+            // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+            delegatedAccessToken && (
+              <DelegationBar delegatedCompanyName="XXXXXX" />
+            )
+          }
           <Header userName="XXXXXX" />
 
           <UpdateTokenTimer />
diff --git a/dictation_client/src/pages/TemplateFilePage/index.tsx b/dictation_client/src/pages/TemplateFilePage/index.tsx
index 117ba01..17959c0 100644
--- a/dictation_client/src/pages/TemplateFilePage/index.tsx
+++ b/dictation_client/src/pages/TemplateFilePage/index.tsx
@@ -15,10 +15,14 @@ import {
   selectIsLoading,
 } from "features/workflow/template";
 import { AddTemplateFilePopup } from "./addTemplateFilePopup";
+import { DelegationBar } from "components/delegate";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
 
 export const TemplateFilePage: React.FC = () => {
   const dispatch: AppDispatch = useDispatch();
   const [t] = useTranslation();
+  // authStateに配置予定の代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
   const templates = useSelector(selectTemplates);
   const isLoading = useSelector(selectIsLoading);
 
@@ -38,7 +42,18 @@ export const TemplateFilePage: React.FC = () => {
           }}
         />
       )}
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
         <Header userName="XXXXXXXX" />
         <UpdateTokenTimer />
         <main className={styles.main}>
diff --git a/dictation_client/src/pages/TypistGroupSettingPage/index.tsx b/dictation_client/src/pages/TypistGroupSettingPage/index.tsx
index 6b1ff06..d6958ef 100644
--- a/dictation_client/src/pages/TypistGroupSettingPage/index.tsx
+++ b/dictation_client/src/pages/TypistGroupSettingPage/index.tsx
@@ -17,11 +17,14 @@ import { useTranslation } from "react-i18next";
 import { getTranslationID } from "translation";
 import { AddTypistGroupPopup } from "./addTypistGroupPopup";
 import { EditTypistGroupPopup } from "./editTypistGroupPopup";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";
 
 const TypistGroupSettingPage: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();
   const [t] = useTranslation();
-
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
   const isLoading = useSelector(selectIsLoading);
   const typistGroup = useSelector(selectTypistGroups);
 
@@ -60,7 +63,18 @@ const TypistGroupSettingPage: React.FC = (): JSX.Element => {
         isOpen={isEditPopupOpen}
         typistGroupId={editTypistGroupId}
       />
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
         <Header userName="XXXXXX" />
         <UpdateTokenTimer />
         <main className={styles.main}>
diff --git a/dictation_client/src/pages/UserListPage/index.tsx b/dictation_client/src/pages/UserListPage/index.tsx
index cd875a6..d5dc966 100644
--- a/dictation_client/src/pages/UserListPage/index.tsx
+++ b/dictation_client/src/pages/UserListPage/index.tsx
@@ -28,10 +28,14 @@ import progress_activit from "../../assets/images/progress_activit.svg";
 import { UserAddPopup } from "./popup";
 import { UserUpdatePopup } from "./updatePopup";
 import { AllocateLicensePopup } from "./allocateLicensePopup";
+import { DelegationBar } from "components/delegate";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
 
 const UserListPage: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();
   const [t] = useTranslation();
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
 
   const [isPopupOpen, setIsPopupOpen] = useState(false);
   const [isUpdatePopupOpen, setIsUpdatePopupOpen] = useState(false);
@@ -106,7 +110,18 @@ const UserListPage: React.FC = (): JSX.Element => {
           setIsAllocateLicensePopupOpen(false);
         }}
       />
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
         <Header userName="XXXXXX" />
         <UpdateTokenTimer />
         <main className={styles.main}>
diff --git a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
index 0f4c03f..c1502fe 100644
--- a/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
+++ b/dictation_client/src/pages/WorkTypeIdSettingPage/index.tsx
@@ -24,10 +24,14 @@ import { AppDispatch } from "app/store";
 import { AddWorktypeIdPopup } from "./addWorktypeIdPopup";
 import { EditWorktypeIdPopup } from "./editWorktypeIdPopup";
 import { EditOptionItemsPopup } from "./editOptionItemsPopup";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
+import { DelegationBar } from "components/delegate";
 
 const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();
   const [t] = useTranslation();
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
   const isLoading = useSelector(selectIsLoading);
   const worktypes = useSelector(selectWorktypes);
   const activeWorktypeId = useSelector(selectActiveWorktypeId);
@@ -124,7 +128,18 @@ const WorktypeIdSettingPage: React.FC = (): JSX.Element => {
         }}
         isOpen={isShowEditOptionItemPopup}
       />
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
         <Header userName="XXXXXXX" />
         <UpdateTokenTimer />
         <main className={styles.main}>
diff --git a/dictation_client/src/pages/WorkflowPage/index.tsx b/dictation_client/src/pages/WorkflowPage/index.tsx
index 16f5c49..49bfced 100644
--- a/dictation_client/src/pages/WorkflowPage/index.tsx
+++ b/dictation_client/src/pages/WorkflowPage/index.tsx
@@ -21,6 +21,8 @@ import progress_activit from "assets/images/progress_activit.svg";
 import { getTranslationID } from "translation";
 import { AddWorkflowPopup } from "./addworkflowPopup";
 import { EditWorkflowPopup } from "./editworkflowPopup";
+import { DelegationBar } from "components/delegate";
+import { selectDelegatedAccessToken } from "features/auth/selectors";
 
 const WorkflowPage: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();
@@ -29,7 +31,8 @@ const WorkflowPage: React.FC = (): JSX.Element => {
   const [isShowAddPopup, setIsShowAddPopup] = useState<boolean>(false);
   // 編集Popupの表示制御
   const [isShowEditPopup, setIsShowEditPopup] = useState<boolean>(false);
-
+  // 代行操作用のトークンを取得する
+  const delegatedAccessToken = useSelector(selectDelegatedAccessToken);
   const workflows = useSelector(selectWorkflows);
   const isLoading = useSelector(selectIsLoading);
 
@@ -70,7 +73,18 @@ const WorkflowPage: React.FC = (): JSX.Element => {
           }}
         />
       )}
-      <div className={styles.wrap}>
+      <div
+        className={`${styles.wrap} ${
+          delegatedAccessToken ? styles.manage : ""
+        }`}
+      >
+        {
+          // 代行操作中の場合は、代行操作バーを表示する
+          // TODO　代行操作中の会社名と、代行操作用のトークンを取得があれば表示するという風にする（別タスクで）
+          delegatedAccessToken && (
+            <DelegationBar delegatedCompanyName="XXXXXX" />
+          )
+        }
         <Header userName="XXXXXX" />
         <UpdateTokenTimer />
         <main className={styles.main}>
diff --git a/dictation_client/src/translation/de.json b/dictation_client/src/translation/de.json
index 55ce9ea..d821ebc 100644
--- a/dictation_client/src/translation/de.json
+++ b/dictation_client/src/translation/de.json
@@ -16,6 +16,7 @@
       "save": "Speichern",
       "delete": "Löschen",
       "return": "zurückkehren",
+      "operationInsteadOf": "(de)Operation instead of:",
       "tier1": "(de)Admin",
       "tier2": "(de)BC",
       "tier3": "(de)Distributor",
diff --git a/dictation_client/src/translation/en.json b/dictation_client/src/translation/en.json
index 1958181..f11c1ad 100644
--- a/dictation_client/src/translation/en.json
+++ b/dictation_client/src/translation/en.json
@@ -16,6 +16,7 @@
       "save": "Save",
       "delete": "Delete",
       "return": "Return",
+      "operationInsteadOf": "Operation instead of:",
       "tier1": "Admin",
       "tier2": "BC",
       "tier3": "Distributor",
diff --git a/dictation_client/src/translation/es.json b/dictation_client/src/translation/es.json
index 6bd2dbb..b96b55d 100644
--- a/dictation_client/src/translation/es.json
+++ b/dictation_client/src/translation/es.json
@@ -16,6 +16,7 @@
       "save": "Ahorrar",
       "delete": "Delete",
       "return": "Devolver",
+      "operationInsteadOf": "(es)Operation instead of:",
       "tier1": "(es)Admin",
       "tier2": "(es)BC",
       "tier3": "(es)Distributor",
diff --git a/dictation_client/src/translation/fr.json b/dictation_client/src/translation/fr.json
index e236a8b..750cfbf 100644
--- a/dictation_client/src/translation/fr.json
+++ b/dictation_client/src/translation/fr.json
@@ -16,6 +16,7 @@
       "save": "Sauvegarder",
       "delete": "Delete",
       "return": "Retour",
+      "operationInsteadOf": "(fr)Operation instead of:",
       "tier1": "(fr)Admin",
       "tier2": "(fr)BC",
       "tier3": "(fr)Distributor",