diff --git a/dictation_client/src/App.tsx b/dictation_client/src/App.tsx
index 10c1610..676df3d 100644
--- a/dictation_client/src/App.tsx
+++ b/dictation_client/src/App.tsx
@@ -8,7 +8,6 @@ import { useDispatch, useSelector } from "react-redux";
 import globalAxios, { AxiosError, AxiosResponse } from "axios";
 import { clearToken } from "features/auth";
 import { useTranslation } from "react-i18next";
-import "./styles/GlobalStyle.css";
 import Snackbar from "components/snackbar";
 import { selectSnackber } from "features/ui/selectors";
 import { closeSnackbar } from "features/ui/uiSlice";
diff --git a/dictation_client/src/assets/images/ODMScloud.png b/dictation_client/src/assets/images/ODMScloud.png
index 1be7a16..7298011 100644
Binary files a/dictation_client/src/assets/images/ODMScloud.png and b/dictation_client/src/assets/images/ODMScloud.png differ
diff --git a/dictation_client/src/assets/images/progress_activit.svg b/dictation_client/src/assets/images/progress_activit.svg
new file mode 100644
index 0000000..4dc3a9f
--- /dev/null
+++ b/dictation_client/src/assets/images/progress_activit.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 27.6.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<path class="st0" d="M24,44c-2.8,0-5.4-0.5-7.9-1.5s-4.5-2.5-6.3-4.2s-3.2-3.9-4.2-6.4S4,26.8,4,24s0.5-5.4,1.6-7.9S8,11.6,9.8,9.8
+	s3.9-3.2,6.3-4.2S21.2,4,24,4c0.4,0,0.8,0.2,1.1,0.4c0.3,0.3,0.4,0.7,0.4,1.1s-0.1,0.8-0.4,1.1C24.8,6.8,24.4,7,24,7
+	c-4.7,0-8.7,1.7-12,5s-5,7.3-5,12s1.7,8.7,5,12s7.3,5,12,5s8.7-1.7,12-5s5-7.3,5-12c0-0.4,0.2-0.8,0.5-1c0.3-0.3,0.7-0.5,1-0.5
+	c0.4,0,0.8,0.1,1,0.5c0.3,0.3,0.5,0.6,0.5,1c0,2.8-0.5,5.4-1.5,7.9s-2.5,4.6-4.2,6.4s-3.9,3.2-6.4,4.2S26.8,44,24,44z"/>
+</svg>
diff --git a/dictation_client/src/components/footer/footer.module.scss b/dictation_client/src/components/footer/footer.module.scss
deleted file mode 100644
index 51a89db..0000000
--- a/dictation_client/src/components/footer/footer.module.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.footer {
-  grid-area: footer;
-  padding: 0.6rem 0;
-  text-align: center;
-  font-size: 11px;
-  line-height: 1.45;
-  letter-spacing: 0.4px;
-  font-weight: normal;
-  color: #999999;
-}
diff --git a/dictation_client/src/components/footer/footer.module.scss.d.ts b/dictation_client/src/components/footer/footer.module.scss.d.ts
deleted file mode 100644
index de4fd16..0000000
--- a/dictation_client/src/components/footer/footer.module.scss.d.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-declare const classNames: {
-  readonly footer: "footer";
-};
-export = classNames;
diff --git a/dictation_client/src/components/footer/index.tsx b/dictation_client/src/components/footer/index.tsx
index 360b9a9..cf07b5a 100644
--- a/dictation_client/src/components/footer/index.tsx
+++ b/dictation_client/src/components/footer/index.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./footer.module.scss";
+import styles from "styles/app.module.scss";
 
 const Footer: React.FC = () => (
   <footer className={`${styles.footer}`}>
diff --git a/dictation_client/src/components/header/header.module.scss b/dictation_client/src/components/header/header.module.scss
deleted file mode 100644
index b25130d..0000000
--- a/dictation_client/src/components/header/header.module.scss
+++ /dev/null
@@ -1,47 +0,0 @@
-.header {
-  grid-area: header;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  box-shadow: 0 0 3px #282828;
-  background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%);
-  z-index: 4;
-}
-.headerLogo {
-  margin: 1.2rem 2rem 1rem;
-  font-size: 1.71rem;
-  line-height: 2rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-}
-.headerLogo img {
-  width: 198px;
-}
-.headerSub {
-  margin: 1.4rem 2rem 1rem;
-  font-size: 1.2rem;
-  line-height: 2rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-  font-weight: 600;
-  text-align: right;
-}
-
-@media only screen and (min-width: 1280px) {
-  .header.home {
-    display: block;
-    padding-top: 30vh;
-    padding-left: 40%;
-    background: none;
-    box-shadow: none;
-  }
-
-  .header.home .headerSub {
-    font-size: 1.4rem;
-    line-height: 2rem;
-    letter-spacing: 0.07rem;
-    font-weight: 600;
-    text-align: left;
-  }
-}
diff --git a/dictation_client/src/components/header/header.module.scss.d.ts b/dictation_client/src/components/header/header.module.scss.d.ts
deleted file mode 100644
index 772a72d..0000000
--- a/dictation_client/src/components/header/header.module.scss.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-declare const classNames: {
-  readonly header: "header";
-  readonly headerLogo: "headerLogo";
-  readonly headerSub: "headerSub";
-  readonly home: "home";
-};
-export = classNames;
diff --git a/dictation_client/src/components/header/loginedHeader.module.scss b/dictation_client/src/components/header/loginedHeader.module.scss
deleted file mode 100644
index b807ee1..0000000
--- a/dictation_client/src/components/header/loginedHeader.module.scss
+++ /dev/null
@@ -1,87 +0,0 @@
-.header {
-  grid-area: header;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  box-shadow: 0 0 3px #282828;
-  background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%);
-  z-index: 4;
-}
-.headerLogo {
-  margin: 1.2rem 2rem 1rem;
-  font-size: 1.71rem;
-  line-height: 2rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-}
-.headerLogo img {
-  width: 198px;
-}
-.headerSub {
-  margin: 1.4rem 2rem 1rem;
-  font-size: 1.2rem;
-  line-height: 2rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-  font-weight: 600;
-  text-align: right;
-}
-.headerMenu {
-  width: 100%;
-}
-.headerMenu ul {
-  display: flex;
-  flex-wrap: wrap;
-  padding: 0 2rem;
-}
-.headerMenu ul li {
-  font-size: 1rem;
-  line-height: 2rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-  border-left: 1px #e6e6e6 solid;
-}
-.headerMenu ul li a {
-  display: block;
-  padding: 0 2rem;
-  color: #333333;
-  text-decoration: none;
-  -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;
-}
-.headerMenu ul li a:hover {
-  background: #fafafa;
-  text-decoration: underline;
-}
-.headerMenu ul li a.isActive {
-  font-weight: 600;
-  pointer-events: none;
-  position: relative;
-}
-.headerMenu ul li a.isActive::after {
-  content: "";
-  border-right: 0.6rem transparent solid;
-  border-bottom: 0.6rem #282828 solid;
-  border-left: 0.6rem transparent solid;
-  position: absolute;
-  bottom: -4px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.accountInfo {
-  position: absolute;
-  right: 2rem;
-  bottom: 0.3rem;
-  font-size: 0.8rem;
-  line-height: 1.6rem;
-  letter-spacing: 0.04rem;
-  font-weight: normal;
-}
-.accountIcon {
-  width: 1.4rem;
-  vertical-align: top;
-}
diff --git a/dictation_client/src/components/header/loginedHeader.module.scss.d.ts b/dictation_client/src/components/header/loginedHeader.module.scss.d.ts
deleted file mode 100644
index 2e3ed1a..0000000
--- a/dictation_client/src/components/header/loginedHeader.module.scss.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-declare const classNames: {
-  readonly header: "header";
-  readonly headerLogo: "headerLogo";
-  readonly headerSub: "headerSub";
-  readonly headerMenu: "headerMenu";
-  readonly isActive: "isActive";
-  readonly accountInfo: "accountInfo";
-  readonly accountIcon: "accountIcon";
-};
-export = classNames;
diff --git a/dictation_client/src/components/header/loginedHeader.tsx b/dictation_client/src/components/header/loginedHeader.tsx
index 7acc934..c124236 100644
--- a/dictation_client/src/components/header/loginedHeader.tsx
+++ b/dictation_client/src/components/header/loginedHeader.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { isAdminUser } from "features/auth/utils";
-import styles from "./loginedHeader.module.scss";
+import styles from "styles/app.module.scss";
 
 import logo from "../../assets/images/OMS_logo_black.svg";
 import ac from "../../assets/images/account_circle.svg";
diff --git a/dictation_client/src/components/header/notLoginHeader.tsx b/dictation_client/src/components/header/notLoginHeader.tsx
index ba5b532..0c788cc 100644
--- a/dictation_client/src/components/header/notLoginHeader.tsx
+++ b/dictation_client/src/components/header/notLoginHeader.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import styles from "./header.module.scss";
+import styles from "styles/app.module.scss";
 
 import logo from "../../assets/images/OMS_logo_black.svg";
 import { HEADER_NAME } from "./constants";
diff --git a/dictation_client/src/components/snackbar/index.tsx b/dictation_client/src/components/snackbar/index.tsx
index 8b02ed9..cf6d2c2 100644
--- a/dictation_client/src/components/snackbar/index.tsx
+++ b/dictation_client/src/components/snackbar/index.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useRef } from "react";
+import styles from "styles/app.module.scss";
 import reportWhite from "../../assets/images/report_white.svg";
 import closeWhite from "../../assets/images/close_white.svg";
 import checkCircleWhite from "../../assets/images/check_circle_white.svg";
-import styles from "../../styles/app.module.scss";
 
 export type SnackbarLevel = "info" | "error";
 
diff --git a/dictation_client/src/pages/SamplePage/index.tsx b/dictation_client/src/pages/SamplePage/index.tsx
index a30f0ee..1d62cfa 100644
--- a/dictation_client/src/pages/SamplePage/index.tsx
+++ b/dictation_client/src/pages/SamplePage/index.tsx
@@ -6,7 +6,7 @@ import Header from "components/header";
 import { clearToken } from "features/auth";
 import React from "react";
 import { useDispatch } from "react-redux";
-import styles from "./sample.module.scss";
+import styles from "styles/app.module.scss";
 
 const SamplePage: React.FC = (): JSX.Element => {
   const { instance } = useMsal();
@@ -18,7 +18,7 @@ const SamplePage: React.FC = (): JSX.Element => {
       <div>
         <button
           type="button"
-          className={styles.button}
+          className={styles.buttonText}
           onClick={() => {
             instance.logout({ postLogoutRedirectUri: "/" });
             dispatch(clearToken());
diff --git a/dictation_client/src/pages/SamplePage/sample.module.scss b/dictation_client/src/pages/SamplePage/sample.module.scss
deleted file mode 100644
index b4aed36..0000000
--- a/dictation_client/src/pages/SamplePage/sample.module.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.wrap {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 1fr;
-  grid-template-areas: "header" "main" "footer";
-  min-height: 100vh;
-}
-
-.button {
-  display: block;
-  padding: 12px 0;
-  color: #ffffff;
-  text-decoration: none;
-  background: #005eb8;
-  border: 1px #005eb8 solid;
-  margin-left: 100px;
-  cursor: pointer;
-  :hover {
-    background: rgba(0, 94, 184, 0.7);
-  }
-}
diff --git a/dictation_client/src/pages/SamplePage/sample.module.scss.d.ts b/dictation_client/src/pages/SamplePage/sample.module.scss.d.ts
deleted file mode 100644
index 0853d13..0000000
--- a/dictation_client/src/pages/SamplePage/sample.module.scss.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare const classNames: {
-  readonly wrap: "wrap";
-  readonly button: "button";
-};
-export = classNames;
diff --git a/dictation_client/src/pages/SignupPage/signup.module.scss b/dictation_client/src/pages/SignupPage/signup.module.scss
deleted file mode 100644
index 1f8fe1d..0000000
--- a/dictation_client/src/pages/SignupPage/signup.module.scss
+++ /dev/null
@@ -1,213 +0,0 @@
-.wrap {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 1fr;
-  grid-template-areas: "header" "main" "footer";
-  min-height: 100vh;
-}
-.main {
-  grid-area: main;
-}
-.mainSmall {
-  width: 600px;
-  margin: 0 auto;
-  padding: 3.2rem 0;
-}
-
-.formList {
-  display: flex;
-  flex-wrap: wrap;
-  margin-bottom: 3rem;
-  dt {
-    font-size: 14px;
-    line-height: 1.7;
-    letter-spacing: 0;
-    font-weight: normal;
-    width: 22%;
-    padding: 0.5rem 4% 0;
-    text-align: right;
-  }
-  dd {
-    font-size: 14px;
-    line-height: 1.7;
-    letter-spacing: 0;
-    font-weight: normal;
-    width: 66%;
-    padding-right: 4%;
-    margin-bottom: 1.5rem;
-  }
-  dt.formTitle {
-    width: 100%;
-    padding: 0.5rem 4%;
-    text-align: left;
-    font-size: 1.2rem;
-    line-height: 1.7;
-    letter-spacing: 0.07rem;
-    font-weight: normal;
-  }
-  dt.overLine {
-    padding: 0 4% 0;
-    line-height: 1.4;
-  }
-  dd.full {
-    width: 100%;
-    padding-right: 0;
-    background: none;
-  }
-}
-.formListHasbg {
-  border-top: 2px #282828 solid;
-  background: #fafafa;
-}
-
-.formInput {
-  width: 350px;
-  padding: 0.6rem 0.8rem;
-  border: 1px #999999 solid;
-  background: #ffffff;
-  box-sizing: border-box;
-  font-size: 14px;
-  line-height: 1.4;
-  letter-spacing: 0;
-  font-weight: normal;
-}
-.formInputIsError {
-  background: rgba(229, 0, 0, 0.08);
-}
-.formInputPassword[type="password"] {
-  + {
-    span {
-      background: url(../../assets/images/visibility_off.svg) no-repeat top
-        right;
-    }
-  }
-}
-.formInputPassword[type="text"] {
-  + {
-    span {
-      background: url(../../assets/images/visibility_off.svg) no-repeat top
-        right;
-    }
-  }
-}
-
-.formIconEye {
-  width: 40px;
-  height: 40px;
-  float: right;
-  margin-top: -40px;
-  margin-right: 45px;
-  position: relative;
-  cursor: pointer;
-}
-.formIconEyeImg {
-  width: 2.5rem;
-}
-.formCheck {
-  width: 1.2rem;
-  height: 1.2rem;
-  margin-right: 0.5rem;
-  vertical-align: bottom;
-}
-
-.formError {
-  display: block;
-  padding-top: 0.3rem;
-  color: #e60000;
-  font-size: 13px;
-  line-height: 1.4;
-  letter-spacing: 0;
-  font-weight: normal;
-}
-.formComment {
-  display: inline-block;
-  padding-top: 0.5rem;
-  color: #999999;
-  font-size: 13px;
-  line-height: 1.4;
-  letter-spacing: 0;
-  font-weight: normal;
-}
-
-.formSubmit {
-  min-width: 15rem;
-  padding: 0.8rem 2rem;
-  border: 1px #999999 solid;
-  font-size: 14px;
-  line-height: 1.4;
-  letter-spacing: 0.04rem;
-  font-weight: normal;
-  opacity: 0.7;
-  pointer-events: none;
-  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;
-}
-.formSubmitIsActive {
-  cursor: pointer;
-  opacity: 1;
-  color: #ffffff;
-  background: #004086;
-  border: 1px #004086 solid;
-  pointer-events: auto;
-  &:hover {
-    background: rgba(0, 94, 184, 0.7);
-  }
-}
-
-.formConfirm {
-  width: 350px;
-  padding: 0.6rem 0.6rem;
-  background: #f0f0f0;
-}
-
-.formButtonTx {
-  padding: 0.2rem 2rem;
-  border: none;
-  background: none;
-  color: #0084b2;
-  font-size: 14px;
-  line-height: 1.4;
-  letter-spacing: 0.04rem;
-  font-weight: normal;
-  cursor: pointer;
-  -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;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-.formDone {
-  width: 100px;
-}
-
-.linkTx {
-  color: #0084b2;
-  text-decoration: none;
-  cursor: pointer;
-  img {
-    width: 1rem;
-    margin: 0 4px;
-    vertical-align: middle;
-  }
-  &:hover {
-    text-decoration: underline;
-  }
-}
-.alignCenter {
-  text-align: center;
-}
-.marginBtm0 {
-  margin-bottom: 0.5rem;
-}
-.marginBtm1 {
-  margin-bottom: 1rem;
-}
-.marginBtm2 {
-  margin-bottom: 2rem;
-}
diff --git a/dictation_client/src/pages/SignupPage/signup.module.scss.d.ts b/dictation_client/src/pages/SignupPage/signup.module.scss.d.ts
deleted file mode 100644
index 9b60088..0000000
--- a/dictation_client/src/pages/SignupPage/signup.module.scss.d.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-declare const classNames: {
-  readonly wrap: "wrap";
-  readonly main: "main";
-  readonly mainSmall: "mainSmall";
-  readonly formList: "formList";
-  readonly formTitle: "formTitle";
-  readonly overLine: "overLine";
-  readonly full: "full";
-  readonly formListHasbg: "formListHasbg";
-  readonly formInput: "formInput";
-  readonly formInputIsError: "formInputIsError";
-  readonly formInputPassword: "formInputPassword";
-  readonly formIconEye: "formIconEye";
-  readonly formIconEyeImg: "formIconEyeImg";
-  readonly formCheck: "formCheck";
-  readonly formError: "formError";
-  readonly formComment: "formComment";
-  readonly formSubmit: "formSubmit";
-  readonly formSubmitIsActive: "formSubmitIsActive";
-  readonly formConfirm: "formConfirm";
-  readonly formButtonTx: "formButtonTx";
-  readonly formDone: "formDone";
-  readonly linkTx: "linkTx";
-  readonly alignCenter: "alignCenter";
-  readonly marginBtm0: "marginBtm0";
-  readonly marginBtm1: "marginBtm1";
-  readonly marginBtm2: "marginBtm2";
-};
-export = classNames;
diff --git a/dictation_client/src/pages/SignupPage/signupConfirm.tsx b/dictation_client/src/pages/SignupPage/signupConfirm.tsx
index 956374d..6ffacd0 100644
--- a/dictation_client/src/pages/SignupPage/signupConfirm.tsx
+++ b/dictation_client/src/pages/SignupPage/signupConfirm.tsx
@@ -4,8 +4,9 @@ import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { getTranslationID } from "translation";
 import { changePageState } from "features/signup/signupSlice";
+import styles from "styles/app.module.scss";
 import { COUNTRY_LIST } from "./constants";
-import styles from "./signup.module.scss";
+
 import {
   selectCompany,
   selectCountry,
@@ -53,7 +54,7 @@ const SignupConfirm: React.FC = (): JSX.Element => {
         </div>
 
         <section className="form">
-          <dl className={`${styles.formList} ${styles.formListHasbg}`}>
+          <dl className={`${styles.formList} ${styles.hasbg}`}>
             <dt className={styles.formTitle}>
               {t(getTranslationID("signupConfirmPage.text.accountInfoTitle"))}
             </dt>
@@ -96,7 +97,7 @@ const SignupConfirm: React.FC = (): JSX.Element => {
                 value={t(
                   getTranslationID("signupConfirmPage.label.signupButton")
                 )}
-                className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.formSubmitIsActive}`}
+                className={`${styles.formSubmit} ${styles.marginBtm1} ${styles.isActive}`}
                 onClick={onSubmit}
               />
               <br />
diff --git a/dictation_client/src/pages/SignupPage/signupInput.tsx b/dictation_client/src/pages/SignupPage/signupInput.tsx
index bd3bfca..3a0f751 100644
--- a/dictation_client/src/pages/SignupPage/signupInput.tsx
+++ b/dictation_client/src/pages/SignupPage/signupInput.tsx
@@ -19,8 +19,8 @@ import { useTranslation } from "react-i18next";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { getTranslationID } from "translation";
+import styles from "styles/app.module.scss";
 import { COUNTRY_LIST } from "./constants";
-import styles from "./signup.module.scss";
 
 const SignupInput: React.FC = (): JSX.Element => {
   const dispatch: AppDispatch = useDispatch();
@@ -83,7 +83,7 @@ const SignupInput: React.FC = (): JSX.Element => {
           </div>
           <section>
             <form>
-              <dl className={`${styles.formList} ${styles.formListHasbg}`}>
+              <dl className={`${styles.formList} ${styles.hasbg}`}>
                 <dt className={` ${styles.formTitle} ${styles.marginBtm0}`}>
                   {t(getTranslationID("signupPage.text.accountInfoTitle"))}
                 </dt>
@@ -96,7 +96,7 @@ const SignupInput: React.FC = (): JSX.Element => {
                     className={`${styles.formInput} ${
                       isPushCreateButton &&
                       hasErrorEmptyCompany &&
-                      styles.formInputIsError
+                      styles.isError
                     }`}
                     onChange={(e) => {
                       dispatch(changeCompany({ company: e.target.value }));
@@ -117,7 +117,7 @@ const SignupInput: React.FC = (): JSX.Element => {
                     className={`${styles.formInput} ${
                       isPushCreateButton &&
                       hasErrorEmptyCountry &&
-                      styles.formInputIsError
+                      styles.isError
                     }`}
                     onChange={(event) => {
                       dispatch(changeCountry({ country: event.target.value }));
@@ -165,7 +165,7 @@ const SignupInput: React.FC = (): JSX.Element => {
                     className={`${styles.formInput} ${
                       isPushCreateButton &&
                       hasErrorEmptyAdminName &&
-                      styles.formInputIsError
+                      styles.isError
                     }`}
                     onChange={(e) => {
                       dispatch(changeAdminName({ adminName: e.target.value }));
@@ -191,7 +191,7 @@ const SignupInput: React.FC = (): JSX.Element => {
                     ${
                       isPushCreateButton &&
                       (hasErrorEmptyEmail || hasErrorIncorrectEmail) &&
-                      styles.formInputIsError
+                      styles.isError
                     }`}
                     onChange={(e) => {
                       dispatch(changeEmail({ email: e.target.value }));
@@ -220,11 +220,11 @@ const SignupInput: React.FC = (): JSX.Element => {
                   <input
                     type={isPasswordHide ? "password" : "text"}
                     size={64}
-                    className={`${styles.formInput} ${styles.formInputPassword}
+                    className={`${styles.formInput} ${styles.password}
                     ${
                       isPushCreateButton &&
                       (hasErrorIncorrectPassword || hasErrorEmptyPassword) &&
-                      styles.formInputIsError
+                      styles.isError
                     }
                     `}
                     onChange={(e) => {
@@ -302,7 +302,7 @@ const SignupInput: React.FC = (): JSX.Element => {
                       getTranslationID("signupPage.label.createAccountButton")
                     )}
                     className={`${styles.formSubmit} 
-                    ${isAgreePolicy && styles.formSubmitIsActive}
+                    ${isAgreePolicy && styles.isActive}
                     ${styles.marginBtm0}`}
                     onClick={() => {
                       setIsPushCreateButton(true);
diff --git a/dictation_client/src/pages/TopPage/TopPage.module.scss b/dictation_client/src/pages/TopPage/TopPage.module.scss
deleted file mode 100644
index b28bda9..0000000
--- a/dictation_client/src/pages/TopPage/TopPage.module.scss
+++ /dev/null
@@ -1,221 +0,0 @@
-.wrap {
-  display: grid;
-  grid-template-rows: auto 1fr auto;
-  grid-template-columns: 1fr;
-  grid-template-areas: "header" "main" "footer";
-  min-height: 100vh;
-}
-
-.main {
-  grid-area: main;
-}
-
-.mainSmall {
-  width: 600px;
-  margin: 0 auto;
-  padding: 3.2rem 0;
-}
-
-.footer {
-  grid-area: footer;
-  padding: 0.6rem 0;
-  text-align: center;
-  font-size: 11px;
-  line-height: 1.45;
-  letter-spacing: 0.4px;
-  font-weight: normal;
-  color: #999999;
-  background: #282828;
-}
-
-.buttonNormal {
-  display: inline-block;
-  width: 15rem;
-  padding: 0.8rem 2rem;
-  color: #ffffff;
-  background: #004086;
-  border: 1px #004086 solid;
-  text-decoration: none;
-  border-radius: 0.3rem;
-  position: relative;
-  font-size: 14px;
-  line-height: 1.4;
-  letter-spacing: 0;
-  font-weight: normal;
-  -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;
-}
-
-.buttonNormal:hover {
-  background: rgba(0, 64, 134, 0.7);
-}
-
-.buttonNormal.small {
-  width: auto;
-  padding: 0.75rem 2rem;
-}
-
-.buttonNormal.red {
-  background: #e60000;
-  border: 1px #e60000 solid;
-}
-
-.buttonNormal.red:hover {
-  background: rgba(230, 0, 0, 0.7);
-}
-
-.buttonBase {
-  display: inline-block;
-  width: 15rem;
-  padding: 0.8rem 2rem;
-  color: #004086;
-  background: #ffffff;
-  border: 1px #004086 solid;
-  text-decoration: none;
-  border-radius: 0.3rem;
-  position: relative;
-  font-size: 14px;
-  line-height: 1.4;
-  letter-spacing: 0;
-  font-weight: normal;
-  -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;
-}
-
-.buttonBase:hover {
-  background: rgba(0, 64, 134, 0.04);
-}
-
-.buttonBase.small {
-  width: auto;
-  padding: 0.75rem 2rem;
-}
-
-.form select option[disabled] {
-  background: #f5f5f5;
-}
-
-.form select option[value=""] {
-  color: #999999;
-}
-
-.formInput {
-  width: 350px;
-  padding: 0.6rem 0.8rem;
-  border: 1px #999999 solid;
-  background: #ffffff;
-  box-sizing: border-box;
-  font-size: 14px;
-  line-height: 1.4;
-  letter-spacing: 0;
-  font-weight: normal;
-}
-
-.formInput:focus {
-  outline: 0;
-}
-
-.formInput.isError {
-  background: rgba(229, 0, 0, 0.08);
-}
-
-.wrap.home {
-  background: url("../../assets/images/top-bg04.png") no-repeat bottom center;
-  background-size: cover;
-}
-
-@media only screen and (min-width: 1280px) {
-  .wrap.home {
-    display: grid;
-    grid-template-rows: 1fr auto;
-    grid-template-columns: 45% 1fr;
-    grid-template-areas: "header main" "footer footer";
-    min-height: 100vh;
-  }
-}
-
-.pgHome > div {
-  width: 400px;
-  margin: 15vh auto 0;
-  padding: 2rem;
-  background: #ffffff;
-  box-shadow: 0 0 5px #aaa;
-  border-radius: 0.3rem;
-}
-
-@media only screen and (min-width: 1280px) {
-  .pgHome > div {
-    margin: 25vh auto 0 50px;
-  }
-}
-
-.pgHomeLinks {
-  width: calc(400px - 4rem);
-  margin: 0 auto;
-  text-align: center;
-}
-
-.pgHomeLinks dt {
-  padding: 0 0 0.5rem 1rem;
-  font-size: 16px;
-  line-height: 1.6;
-  letter-spacing: 0;
-  font-weight: normal;
-  text-align: left;
-}
-
-.pgHomeLinks dt:first-of-type {
-  display: inline-block;
-  // 言語選択時のデザイン崩れ対応のため調整
-  min-width: 45%;
-  width: auto;
-  padding: 0 0 0 0;
-  margin-right: 0.3rem;
-  white-space: nowrap;
-}
-
-.pgHomeLinks dd a .buttonIcon {
-  width: 16px;
-  height: 16px;
-  position: absolute;
-  top: 50%;
-  right: 2rem;
-  transform: translateY(-50%);
-  opacity: 0;
-  -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;
-}
-
-.pgHomeLinks dd a:hover .buttonIcon {
-  top: 50%;
-  right: 1.7rem;
-  opacity: 1;
-}
-
-.pgHomeLinks dd:first-of-type {
-  display: inline-block;
-  width: 45%;
-  text-align: left;
-}
-
-.pgHomeLinks dd .formInput {
-  width: auto;
-}
-
-.marginBtm1 {
-  margin-bottom: 1rem;
-}
-
-.marginBtm2 {
-  margin-bottom: 2rem;
-}
-
-.marginBtm3 {
-  margin-bottom: 3rem;
-}
diff --git a/dictation_client/src/pages/TopPage/TopPage.module.scss.d.ts b/dictation_client/src/pages/TopPage/TopPage.module.scss.d.ts
deleted file mode 100644
index de896a3..0000000
--- a/dictation_client/src/pages/TopPage/TopPage.module.scss.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-declare const classNames: {
-  readonly wrap: "wrap";
-  readonly main: "main";
-  readonly mainSmall: "mainSmall";
-  readonly footer: "footer";
-  readonly buttonNormal: "buttonNormal";
-  readonly small: "small";
-  readonly red: "red";
-  readonly buttonBase: "buttonBase";
-  readonly form: "form";
-  readonly formInput: "formInput";
-  readonly isError: "isError";
-  readonly home: "home";
-  readonly pgHome: "pgHome";
-  readonly pgHomeLinks: "pgHomeLinks";
-  readonly buttonIcon: "buttonIcon";
-  readonly marginBtm1: "marginBtm1";
-  readonly marginBtm2: "marginBtm2";
-  readonly marginBtm3: "marginBtm3";
-};
-export = classNames;
diff --git a/dictation_client/src/pages/TopPage/index.tsx b/dictation_client/src/pages/TopPage/index.tsx
index 2a119a7..20ab130 100644
--- a/dictation_client/src/pages/TopPage/index.tsx
+++ b/dictation_client/src/pages/TopPage/index.tsx
@@ -9,10 +9,11 @@ import { AppDispatch } from "app/store";
 import { useDispatch } from "react-redux";
 import { closeSnackbar, openSnackbar } from "features/ui";
 import { useLocation, useNavigate } from "react-router-dom";
+import styles from "styles/app.module.scss";
 import { LANGUAGE_LIST } from "../../features/top/constants";
 import arrow_forward from "../../assets/images/arrow_forward.svg";
 import arrow_forward_bule from "../../assets/images/arrow_forward_blue.svg";
-import styles from "./TopPage.module.scss";
+import oDMScloud from "../../assets/images/ODMScloud.png";
 
 const TopPage: React.FC = (): JSX.Element => {
   const { instance } = useMsal();
@@ -43,6 +44,12 @@ const TopPage: React.FC = (): JSX.Element => {
 
       <main className={`${styles.main} ${styles.home}`}>
         <section className={`${styles.pgHome}`}>
+          <p className={styles.ODMSlogo}>
+            <img
+              src={`${oDMScloud}?0609`}
+              alt={t(getTranslationID("topPage.label.logoAlt"))}
+            />
+          </p>
           <div>
             <dl className={`${styles.pgHomeLinks}`}>
               <dt>
diff --git a/dictation_client/src/styles/GlobalStyle.css b/dictation_client/src/styles/GlobalStyle.css
deleted file mode 100644
index 4262f2a..0000000
--- a/dictation_client/src/styles/GlobalStyle.css
+++ /dev/null
@@ -1,194 +0,0 @@
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section {
-  display: block;
-}
-
-/* HTML5 hidden-attribute fix for newer browsers */
-*[hidden] {
-  display: none;
-}
-
-body {
-  line-height: 1;
-}
-
-ol,
-ul {
-  list-style: none;
-}
-
-blockquote,
-q {
-  quotes: none;
-}
-
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: "";
-  content: none;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-button {
-  appearance: none;
-  padding: 0;
-  border: none;
-  outline: none;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-html {
-  color: #333333;
-  font-size: 16px;
-  line-height: 1.7;
-  letter-spacing: 0;
-  font-weight: normal;
-}
-
-body {
-  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
-  position: relative;
-}
-
-h1 {
-  font-size: 2.4rem;
-  line-height: 3.14rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-}
-
-h2 {
-  font-size: 2rem;
-  line-height: 2.57rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-}
-
-h3 {
-  font-size: 1.6rem;
-  line-height: 2rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-}
-
-h4 {
-  font-size: 1.2rem;
-  line-height: 1.57rem;
-  letter-spacing: 0.07rem;
-  font-weight: normal;
-}
-
-h5 {
-  font-size: 1.1rem;
-  line-height: 1.57rem;
-  letter-spacing: 0.06rem;
-  font-weight: normal;
-}
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss
index aa0dcf7..a604774 100644
--- a/dictation_client/src/styles/app.module.scss
+++ b/dictation_client/src/styles/app.module.scss
@@ -1,3 +1,198 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section {
+  display: block;
+}
+
+/* HTML5 hidden-attribute fix for newer browsers */
+*[hidden] {
+  display: none;
+}
+
+body {
+  line-height: 1;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+button {
+  appearance: none;
+  padding: 0;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+html {
+  color: #333333;
+  font-size: 16px;
+  line-height: 1.7;
+  letter-spacing: 0;
+  font-weight: normal;
+}
+
+body {
+  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+  position: relative;
+}
+
+h1 {
+  font-size: 2.4rem;
+  line-height: 3.14rem;
+  letter-spacing: 0.07rem;
+  font-weight: normal;
+}
+
+h2 {
+  font-size: 2rem;
+  line-height: 2.57rem;
+  letter-spacing: 0.07rem;
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 1.6rem;
+  line-height: 2rem;
+  letter-spacing: 0.07rem;
+  font-weight: normal;
+}
+
+h4 {
+  font-size: 1.2rem;
+  line-height: 1.57rem;
+  letter-spacing: 0.07rem;
+  font-weight: normal;
+}
+
+h5 {
+  font-size: 1.1rem;
+  line-height: 1.57rem;
+  letter-spacing: 0.06rem;
+  font-weight: normal;
+}
+
 .wrap {
   display: grid;
   grid-template-rows: auto 1fr auto;
@@ -13,7 +208,7 @@
   flex-wrap: wrap;
   justify-content: space-between;
   box-shadow: 0 0 3px #282828;
-  background: linear-gradient(#ffffff, #ffffff 70%, #F0F0F0 100%);
+  background: linear-gradient(#ffffff, #ffffff 70%, #f0f0f0 100%);
   z-index: 4;
 }
 
@@ -54,12 +249,12 @@
   line-height: 2rem;
   letter-spacing: 0.07rem;
   font-weight: normal;
-  border-left: 1px #E6E6E6 solid;
+  border-left: 1px #e6e6e6 solid;
 }
 
 .headerMenu ul li a {
   display: block;
-  padding: .2rem 2.5rem .2rem;
+  padding: 0.2rem 2.5rem 0.2rem;
   color: #333333;
   text-decoration: none;
   -moz-transition: all 0.3s ease-out;
@@ -69,7 +264,7 @@
 }
 
 .headerMenu ul li a:hover {
-  background: #F5F5F5;
+  background: #f5f5f5;
   text-decoration: underline;
 }
 
@@ -77,13 +272,14 @@
   font-weight: 600;
   pointer-events: none;
   position: relative;
+  background: #e6e6e6;
 }
 
 .headerMenu ul li a.isActive::after {
-  content: '';
-  border-right: .7rem transparent solid;
+  content: "";
+  border-right: 0.7rem transparent solid;
   border-bottom: 0.7rem #282828 solid;
-  border-left: .7rem transparent solid;
+  border-left: 0.7rem transparent solid;
   position: absolute;
   bottom: -4px;
   left: 50%;
@@ -93,7 +289,7 @@
 .accountInfo {
   position: absolute;
   right: 2rem;
-  bottom: .3rem;
+  bottom: 0.3rem;
   font-size: 0.9rem;
   line-height: 1.6rem;
   letter-spacing: 0.04rem;
@@ -134,9 +330,9 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .footer {
   grid-area: footer;
-  padding: .6rem 0;
+  padding: 0.6rem 0;
   text-align: center;
-  font-size: 11px;
+  font-size: 13px;
   line-height: 1.45;
   letter-spacing: 0.4px;
   font-weight: normal;
@@ -161,7 +357,7 @@ h3 .brCrumb::before {
 h2 .brCrumb .tlIcon,
 h3 .brCrumb .tlIcon {
   width: 1.6rem;
-  margin: 0 .2rem 0 .5rem;
+  margin: 0 0.2rem 0 0.5rem;
   vertical-align: text-top;
 }
 
@@ -179,7 +375,7 @@ h3 .brCrumb .tlIcon {
 }
 
 .brCrumbAcc li::before {
-  content: '';
+  content: "";
   border-top: 8px #333333 solid;
   border-right: 6px transparent solid;
   border-left: 6px transparent solid;
@@ -200,14 +396,14 @@ h3 .brCrumb .tlIcon {
 .buttonNormal {
   display: inline-block;
   width: 15rem;
-  padding: .8rem 2rem;
+  padding: 0.8rem 2rem;
   color: #ffffff;
   background: #004086;
   border: 1px #004086 solid;
   text-decoration: none;
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   position: relative;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: normal;
@@ -223,7 +419,7 @@ h3 .brCrumb .tlIcon {
 
 .buttonNormal.small {
   width: auto;
-  padding: .75rem 2rem;
+  padding: 0.75rem 2rem;
 }
 
 .buttonNormal.red {
@@ -238,14 +434,14 @@ h3 .brCrumb .tlIcon {
 .buttonBase {
   display: inline-block;
   width: 15rem;
-  padding: .8rem 2rem;
+  padding: 0.8rem 2rem;
   color: #004086;
   background: #ffffff;
   border: 1px #004086 solid;
   text-decoration: none;
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   position: relative;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: normal;
@@ -261,15 +457,15 @@ h3 .brCrumb .tlIcon {
 
 .buttonBase.small {
   width: auto;
-  padding: .75rem 2rem;
+  padding: 0.75rem 2rem;
 }
 
 .buttonText {
   display: inline-block;
-  padding: .8rem 0;
+  padding: 0.8rem 0;
   color: #004086;
   text-decoration: none;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: normal;
@@ -280,12 +476,12 @@ h3 .brCrumb .tlIcon {
 }
 
 .buttonText:hover {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .buttonText.small {
   width: auto;
-  padding: .75rem 0;
+  padding: 0.75rem 0;
 }
 
 .formList {
@@ -296,7 +492,7 @@ h3 .brCrumb .tlIcon {
 
 .formList dt,
 .formList dd {
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.7;
   letter-spacing: 0;
   font-weight: normal;
@@ -304,15 +500,15 @@ h3 .brCrumb .tlIcon {
 
 .formList dt {
   width: 22%;
-  padding: .5rem 4% 0;
+  padding: 0.5rem 4% 0;
   text-align: right;
 }
 
 .formList dt.formTitle {
   width: 100%;
-  padding: .5rem 4%;
+  padding: 0.5rem 4%;
   text-align: left;
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   line-height: 1.7;
   letter-spacing: 0.07rem;
   font-weight: normal;
@@ -337,11 +533,11 @@ h3 .brCrumb .tlIcon {
 
 .formList.hasbg {
   border-top: 2px #282828 solid;
-  background: #FAFAFA;
+  background: #fafafa;
 }
 
 .form select option[disabled] {
-  background: #F5F5F5;
+  background: #f5f5f5;
 }
 
 .form select option[value=""] {
@@ -350,11 +546,11 @@ h3 .brCrumb .tlIcon {
 
 .formInput {
   width: 350px;
-  padding: .6rem .8rem;
+  padding: 0.6rem 0.8rem;
   border: 1px #999999 solid;
   background: #ffffff;
   box-sizing: border-box;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: normal;
@@ -365,19 +561,19 @@ h3 .brCrumb .tlIcon {
 }
 
 .formInput[readonly] {
-  border: 1px #E6E6E6 solid;
-  background: #E6E6E6;
+  border: 1px #e6e6e6 solid;
+  background: #e6e6e6;
 }
 
 .formInput.isError {
   background: rgba(229, 0, 0, 0.08);
 }
 
-.formInput.password[type="password"]+span {
+.formInput.password[type="password"] + span {
   background: url(../assets/images/visibility_off.svg) no-repeat top right;
 }
 
-.formInput.password[type="text"]+span {
+.formInput.password[type="text"] + span {
   background: url(../assets/images/visibility.svg) no-repeat top right;
 }
 
@@ -398,32 +594,33 @@ h3 .brCrumb .tlIcon {
 .formCheck {
   width: 1.2rem;
   height: 1.2rem;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   accent-color: #282828;
   vertical-align: bottom;
+  cursor: pointer;
 }
 
 .formRadio {
   width: 1.2rem;
   height: 1.2rem;
-  margin-top: -.2rem;
-  margin-right: .3rem;
+  margin-top: -0.2rem;
+  margin-right: 0.3rem;
   accent-color: #282828;
   vertical-align: middle;
 }
 
 .form label {
   display: inline-block;
-  padding: .6rem 0;
+  padding: 0.6rem 0;
   margin-right: 1rem;
   cursor: pointer;
 }
 
 .formComment {
   display: inline-block;
-  padding-top: .5rem;
+  padding-top: 0.5rem;
   color: #999999;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: normal;
@@ -431,9 +628,9 @@ h3 .brCrumb .tlIcon {
 
 .formError {
   display: block;
-  padding-top: .3rem;
+  padding-top: 0.3rem;
   color: #e60000;
-  font-size: 13px;
+  font-size: 15px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: normal;
@@ -441,22 +638,22 @@ h3 .brCrumb .tlIcon {
 
 .formConfirm {
   width: 350px;
-  padding: .6rem .6rem;
-  background: #F0F0F0;
+  padding: 0.6rem 0.6rem;
+  background: #f0f0f0;
   box-sizing: border-box;
 }
 
 .formSubmit {
   min-width: 15rem;
-  padding: .8rem 2rem;
+  padding: 0.8rem 2rem;
   border: 1px #999999 solid;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
   font-weight: normal;
-  opacity: .7;
+  opacity: 0.7;
   pointer-events: none;
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   position: relative;
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
@@ -478,15 +675,15 @@ h3 .brCrumb .tlIcon {
 }
 
 .formButton {
-  padding: .8rem .8rem;
+  padding: 0.8rem 0.8rem;
   border: 1px #999999 solid;
   background: #ffffff;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
   font-weight: normal;
   cursor: pointer;
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   position: relative;
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
@@ -495,15 +692,15 @@ h3 .brCrumb .tlIcon {
 }
 
 .formButton:hover {
-  background: #F0F0F0;
+  background: #f0f0f0;
 }
 
 .formBack {
   width: 15rem;
-  padding: .8rem 2rem;
+  padding: 0.8rem 2rem;
   border: 1px #999999 solid;
   background: #ffffff;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
   font-weight: normal;
@@ -515,15 +712,15 @@ h3 .brCrumb .tlIcon {
 }
 
 .formBack:hover {
-  background: #F0F0F0;
+  background: #f0f0f0;
 }
 
 .formButtonTx {
-  padding: .2rem 2rem;
+  padding: 0.2rem 2rem;
   border: none;
   background: none;
   color: #0084b2;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
   font-weight: normal;
@@ -551,8 +748,8 @@ h3 .brCrumb .tlIcon {
 
 .listVertical dt,
 .listVertical dd {
-  padding: .8rem 4%;
-  font-size: 14px;
+  padding: 0.8rem 4%;
+  font-size: 16px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
   font-weight: normal;
@@ -560,7 +757,7 @@ h3 .brCrumb .tlIcon {
 
 .listVertical dt:nth-of-type(odd),
 .listVertical dd:nth-of-type(odd) {
-  background: #F5F5F5;
+  background: #f5f5f5;
 }
 
 .listVertical dt {
@@ -577,20 +774,31 @@ h3 .brCrumb .tlIcon {
 .loadingBoxSpinner {
   width: 50px;
   height: 50px;
-  margin: 40px auto;
-  border: 3px solid #E6E6E6;
+  margin: 0 auto;
+  border: 3px solid #999999;
   border-top: 3px solid transparent;
   border-radius: 50%;
-  animation: spin .8s linear 0s infinite;
+  animation: load 0.8s linear 0s infinite;
 }
 
-@keyframes spin {
-  from {
+.icLoading {
+  width: 50px;
+  vertical-align: middle;
+  position: absolute;
+  animation: load 0.8s linear 0s infinite;
+}
+
+@keyframes load {
+  0% {
     transform: rotate(0);
   }
 
-  to {
-    transform: rotate(359deg);
+  60% {
+    transform: rotate(280deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
   }
 }
 
@@ -622,16 +830,16 @@ h3 .brCrumb .tlIcon {
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   overflow: auto;
 }
 
 .modalTitle {
   display: flex;
   justify-content: space-between;
-  padding: .6rem 4% .6rem;
+  padding: 0.6rem 4% 0.6rem;
   background: #ffffff;
-  font-size: 1.4rem;
+  font-size: 1.6rem;
   line-height: 2rem;
   letter-spacing: 0;
   font-weight: 600;
@@ -644,7 +852,7 @@ h3 .brCrumb .tlIcon {
 .modalTitle img.off {
   cursor: none;
   pointer-events: none;
-  opacity: .4;
+  opacity: 0.4;
 }
 
 .modalTitleIcon {
@@ -660,7 +868,7 @@ h3 .brCrumb .tlIcon {
 }
 
 .modal .formList dd {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .modal .formList dd.last {
@@ -673,15 +881,20 @@ h3 .brCrumb .tlIcon {
 }
 
 .modal .formInput {
-  padding: .5rem .8rem;
+  padding: 0.5rem 0.8rem;
 }
 
 .modal .form label {
-  padding: .5rem 0 .2rem;
+  padding: 0.5rem 0 0.2rem;
+}
+
+.modal .form .icLoading {
+  bottom: 1.5rem;
+  left: calc(50% - 25px);
 }
 
 .pageHeader {
-  padding: .3rem 2.5rem .2rem;
+  padding: 0.3rem 2.5rem 0.2rem;
   background: #282828;
   color: #ffffff;
   margin-bottom: 2rem;
@@ -717,7 +930,7 @@ h3 .brCrumb .tlIcon {
 .pagenationNav a {
   display: inline-block;
   margin: 0 1px;
-  padding: .3rem .7rem;
+  padding: 0.3rem 0.7rem;
   font-size: 13px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
@@ -725,8 +938,8 @@ h3 .brCrumb .tlIcon {
   text-decoration: none;
   color: #333333;
   border: 1px #a5a5a5 solid;
-  border-radius: .2rem;
-  opacity: .4;
+  border-radius: 0.2rem;
+  opacity: 0.4;
   pointer-events: none;
 }
 
@@ -736,7 +949,7 @@ h3 .brCrumb .tlIcon {
 }
 
 .pagenationNav a.isActive:hover {
-  background: #F5F5F5;
+  background: #f5f5f5;
 }
 
 .pagenationTotal {
@@ -752,14 +965,14 @@ _:-ms-lang(x)::-ms-backdrop,
   width: 800px;
   display: flex;
   justify-content: flex-start;
-  padding: .8rem 1.5rem;
+  padding: 0.8rem 1.5rem;
   color: #ffffff;
   background: #00b4aa;
   position: fixed;
   top: -100%;
   left: 50%;
   transform: translateX(-50%);
-  border-radius: .3rem;
+  border-radius: 0.3rem;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   box-sizing: border-box;
   z-index: 10;
@@ -772,7 +985,7 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .snackbar.isShow {
   opacity: 1;
-  top: .2rem;
+  top: 0.2rem;
   left: 50%;
   z-index: 11;
   -moz-transition: all 0.3s ease-out;
@@ -787,7 +1000,7 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .snackbarMessage {
   width: calc(800px - 3rem - 3.3rem);
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.7;
   letter-spacing: 0;
   font-weight: normal;
@@ -800,7 +1013,7 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .snackbarIconClose {
-  width: .8rem;
+  width: 0.8rem;
 }
 
 .snackbarIconClose:hover {
@@ -813,7 +1026,7 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .table tr:nth-child(2n + 3) {
-  background: #F5F5F5;
+  background: #f5f5f5;
 }
 
 .table tr:last-child {
@@ -821,8 +1034,8 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .table td {
-  padding: .8rem .7rem;
-  font-size: 13px;
+  padding: 0.8rem 0.7rem;
+  font-size: 15px;
   line-height: 1.4;
   letter-spacing: 0;
   font-weight: normal;
@@ -837,10 +1050,10 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .tableHeader th {
-  padding: .4rem .7rem;
+  padding: 0.4rem 0.7rem;
   vertical-align: middle;
   color: #ffffff;
-  font-size: 11px;
+  font-size: 13px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
   font-weight: normal;
@@ -850,20 +1063,20 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .tableHeader th .hasSort {
   display: block;
-  width: calc(100% - .5rem);
-  padding-right: .5rem;
+  width: calc(100% - 0.5rem);
+  padding-right: 0.5rem;
 }
 
 .tableHeader th .hasSort::before {
-  content: '';
+  content: "";
   border-top: 0.4rem #ffffff solid;
-  border-right: .35rem transparent solid;
-  border-left: .35rem transparent solid;
+  border-right: 0.35rem transparent solid;
+  border-left: 0.35rem transparent solid;
   position: absolute;
   top: 50%;
-  right: .5rem;
+  right: 0.5rem;
   transform: translateY(-50%);
-  opacity: .4;
+  opacity: 0.4;
   -moz-transition: all 0.3s ease-out;
   -ms-transition: all 0.3s ease-out;
   -webkit-transition: all 0.3s ease-out;
@@ -878,18 +1091,44 @@ _:-ms-lang(x)::-ms-backdrop,
   opacity: 1;
 }
 
+.tableHeader th .hasSort.isActiveAz::before {
+  opacity: 1;
+}
+
+.tableHeader th .hasSort.isActiveAz:hover::before {
+  border-top: none;
+  border-right: 0.35rem transparent solid;
+  border-bottom: 0.4rem #ffffff solid;
+  border-left: 0.35rem transparent solid;
+}
+
+.tableHeader th .hasSort.isActiveZa::before {
+  border-top: none;
+  border-right: 0.35rem transparent solid;
+  border-bottom: 0.4rem #ffffff solid;
+  border-left: 0.35rem transparent solid;
+  opacity: 1;
+}
+
+.tableHeader th .hasSort.isActiveZa:hover::before {
+  border-top: 0.4rem #ffffff solid;
+  border-right: 0.35rem transparent solid;
+  border-bottom: none;
+  border-left: 0.35rem transparent solid;
+}
+
 .tableHeader th:not(:last-child) {
   border-right: 1px #999999 solid;
 }
 
 .tableHeader th:not(:last-child)::after {
-  content: '';
-  width: .6rem;
+  content: "";
+  width: 0.6rem;
   height: 100%;
   cursor: col-resize;
   position: absolute;
   top: 0;
-  right: -.3rem;
+  right: -0.3rem;
   z-index: 3;
 }
 
@@ -902,24 +1141,38 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .wrap.home {
-  background: url("../assets/images/top-bg.png") no-repeat bottom center;
+  background: url("../assets/images/top-bg.png") no-repeat center 20vh;
   background-size: cover;
 }
 
+@media only screen and (min-width: 1280px) {
+  .wrap.home {
+    background: url("../assets/images/top-bg.png") no-repeat center 18vh;
+    background-size: cover;
+  }
+}
+
 .header.home {
   background: none;
   box-shadow: none;
 }
 
+.header.home .headerLogo {
+  margin: 2rem 2.5rem 2rem;
+}
+
 .header.home .headerSub {
   display: none;
 }
 
 @media only screen and (min-width: 1280px) {
   .pgHome {
+    width: 1064px;
+    margin: 0 auto;
     display: flex;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: space-between;
+    align-items: center;
   }
 }
 
@@ -928,27 +1181,36 @@ _:-ms-lang(x)::-ms-backdrop,
   padding: 2rem 0 0;
 }
 
+.pgHome .ODMSlogo img {
+  width: 200px;
+}
+
 @media only screen and (min-width: 1280px) {
   .pgHome .ODMSlogo {
     width: 400px;
-    margin: 15vh 0 0 0;
+    margin: 3vh 0 0 0;
     padding: 0 0 0;
-    text-align: left;
+    text-align: center;
+  }
+
+  .pgHome .ODMSlogo img {
+    width: auto;
+    vertical-align: middle;
   }
 }
 
-.pgHome>div {
+.pgHome > div {
   width: 400px;
   margin: 3rem auto 0;
   padding: 2rem;
   background: #ffffff;
   box-shadow: 0 0 5px #aaa;
-  border-radius: .3rem;
+  border-radius: 0.3rem;
 }
 
 @media only screen and (min-width: 1280px) {
-  .pgHome>div {
-    margin: 15vh 0 0 0;
+  .pgHome > div {
+    margin: 3vh 0 0 0;
   }
 }
 
@@ -959,7 +1221,7 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .pgHomeLinks dt {
-  padding: 0 0 .5rem 1rem;
+  padding: 0 0 0.5rem 1rem;
   font-size: 16px;
   line-height: 1.6;
   letter-spacing: 0;
@@ -970,7 +1232,7 @@ _:-ms-lang(x)::-ms-backdrop,
 .pgHomeLinks dt:first-of-type {
   display: inline-block;
   width: 45%;
-  padding: 0 0 .5rem 0;
+  padding: 0 0 0.5rem 0;
 }
 
 .pgHomeLinks dd a .buttonIcon {
@@ -1003,21 +1265,33 @@ _:-ms-lang(x)::-ms-backdrop,
   width: auto;
 }
 
-.user>div,
-.license>div,
-.dictation>div {
+.user > div,
+.license > div,
+.dictation > div,
+.partners > div {
   padding: 0 2rem;
+  position: relative;
+}
+
+.user > div .icLoading,
+.license > div .icLoading,
+.dictation > div .icLoading,
+.partners > div .icLoading {
+  top: 5.5rem;
+  left: calc(50% - 25px);
 }
 
 .user .table tr:not(.tableHeader),
 .license .table tr:not(.tableHeader),
-.dictation .table tr:not(.tableHeader) {
+.dictation .table tr:not(.tableHeader),
+.partners .table tr:not(.tableHeader) {
   position: relative;
 }
 
 .user .table td,
 .license .table td,
-.dictation .table td {
+.dictation .table td,
+.partners .table td {
   max-width: 300px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1027,47 +1301,53 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .user .table.user tr:not(.tableHeader),
 .license .table.user tr:not(.tableHeader),
-.dictation .table.user tr:not(.tableHeader) {
+.dictation .table.user tr:not(.tableHeader),
+.partners .table.user tr:not(.tableHeader) {
   cursor: pointer;
 }
 
 .user .table.user tr:not(.tableHeader):hover,
 .license .table.user tr:not(.tableHeader):hover,
-.dictation .table.user tr:not(.tableHeader):hover {
+.dictation .table.user tr:not(.tableHeader):hover,
+.partners .table.user tr:not(.tableHeader):hover {
   color: #0084b2;
 }
 
 .user .table.user tr:not(.tableHeader).isSelected,
 .license .table.user tr:not(.tableHeader).isSelected,
-.dictation .table.user tr:not(.tableHeader).isSelected {
+.dictation .table.user tr:not(.tableHeader).isSelected,
+.partners .table.user tr:not(.tableHeader).isSelected {
   color: #ffffff;
 }
 
 .user .table.user tr:not(.tableHeader).isSelected:hover,
 .license .table.user tr:not(.tableHeader).isSelected:hover,
-.dictation .table.user tr:not(.tableHeader).isSelected:hover {
+.dictation .table.user tr:not(.tableHeader).isSelected:hover,
+.partners .table.user tr:not(.tableHeader).isSelected:hover {
   color: #ffffff;
 }
 
 .user .table.user tr:not(.tableHeader).isSelected td,
 .license .table.user tr:not(.tableHeader).isSelected td,
-.dictation .table.user tr:not(.tableHeader).isSelected td {
+.dictation .table.user tr:not(.tableHeader).isSelected td,
+.partners .table.user tr:not(.tableHeader).isSelected td {
   background: #0084b2;
 }
 
 .user .table.user tr:not(.tableHeader).isSelected .menuInTable,
 .license .table.user tr:not(.tableHeader).isSelected .menuInTable,
-.dictation .table.user tr:not(.tableHeader).isSelected .menuInTable {
+.dictation .table.user tr:not(.tableHeader).isSelected .menuInTable,
+.partners .table.user tr:not(.tableHeader).isSelected .menuInTable {
   display: block;
 }
 
 .menuAction {
-  margin-bottom: .6rem;
+  margin-bottom: 0.6rem;
 }
 
 .menuAction li {
   display: inline-block;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
 }
 
 .menuAction.inTable {
@@ -1075,7 +1355,7 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .menuAction.inTable .menuLink {
-  padding: .3rem .5rem .3rem .5rem;
+  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
   opacity: 0;
 }
 
@@ -1085,14 +1365,14 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .menuAction.inTable .colorLink {
   display: block;
-  padding: .3rem .5rem .3rem .5rem;
+  padding: 0.3rem 0.5rem 0.3rem 0.5rem;
   font-size: 13px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
   font-weight: normal;
   text-decoration: none;
   border: 1px #999999 solid;
-  border-radius: .2rem;
+  border-radius: 0.2rem;
   opacity: 0;
   pointer-events: none;
   background: #ffffff;
@@ -1119,17 +1399,9 @@ _:-ms-lang(x)::-ms-backdrop,
   margin-top: -1rem;
 }
 
-.menuMore {
-  text-align: center;
-}
-
-.menuMore .menuIcon {
-  height: 1.2rem;
-}
-
 .menuLink {
   display: block;
-  padding: .3rem .5rem .3rem .3rem;
+  padding: 0.3rem 0.5rem 0.3rem 0.3rem;
   font-size: 13px;
   line-height: 1.4;
   letter-spacing: 0.04rem;
@@ -1137,8 +1409,8 @@ _:-ms-lang(x)::-ms-backdrop,
   text-decoration: none;
   color: #333333;
   border: 1px #a5a5a5 solid;
-  border-radius: .2rem;
-  opacity: .3;
+  border-radius: 0.2rem;
+  opacity: 0.3;
   pointer-events: none;
   background: #ffffff;
   -moz-transition: all 0.3s ease-out;
@@ -1153,20 +1425,80 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .menuLink.isActive:hover {
-  background: #F5F5F5;
+  background: #f5f5f5;
 }
 
 .menuIcon {
   width: 1.4rem;
-  margin-right: .4rem;
+  margin-right: 0.4rem;
   vertical-align: bottom;
 }
 
+.menuInTable {
+  width: auto;
+  position: absolute;
+  left: 0.7rem;
+  bottom: 0.5rem;
+  opacity: 0;
+  -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;
+}
+
+.menuInTable li {
+  display: inline-block;
+  margin-right: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.menuInTable li:not(:last-child) {
+  border-right: 1px #999999 solid;
+}
+
+.menuInTable li a {
+  display: block;
+  font-size: 12px;
+  line-height: 1.4;
+  letter-spacing: 0.02rem;
+  font-weight: normal;
+  text-decoration: none;
+  color: #0084b2;
+}
+
+.menuInTable li a:hover {
+  opacity: 0.7;
+}
+
+.menuInTable li a.isDisable {
+  color: #999999;
+  pointer-events: none;
+}
+
+tr.isSelected .menuInTable li a {
+  color: #ffffff;
+}
+
 .icCheckCircle {
   width: 20px;
   vertical-align: bottom;
 }
 
+.icInTable {
+  width: 24px;
+  vertical-align: bottom;
+}
+
+.license .listVertical dd img[src*="circle.svg"] {
+  filter: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(5814%)
+    hue-rotate(143deg) brightness(96%) contrast(101%);
+}
+
+.license .listVertical dd img[src*="block.svg"] {
+  filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(2633%)
+    hue-rotate(340deg) brightness(102%) contrast(101%);
+}
+
 .license .table.history {
   width: 1000px;
 }
@@ -1189,9 +1521,10 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .license .table.partner tr td[title="View child accounts"] {
+  padding-left: 1.5rem;
   position: relative;
   cursor: pointer;
-  background-size: .2rem;
+  background-size: none;
 }
 
 .license .table.partner tr td[title="View child accounts"]:hover {
@@ -1203,6 +1536,17 @@ _:-ms-lang(x)::-ms-backdrop,
   text-decoration: none;
 }
 
+.license .table.partner tr td[title="View child accounts"]::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0.4rem;
+  border-top: 6px transparent solid;
+  border-bottom: 6px transparent solid;
+  border-left: 8px #0084b2 solid;
+  transform: translateY(-50%);
+}
+
 .license .table.partner tr td[title="Return"] {
   position: relative;
   cursor: pointer;
@@ -1212,8 +1556,24 @@ _:-ms-lang(x)::-ms-backdrop,
   color: #0084b2;
 }
 
+.license .table.partner tr.role3 td[title="View child accounts"]::before {
+  border-top: 6px transparent solid;
+  border-bottom: 6px transparent solid;
+  border-left: 8px #00b4aa solid;
+}
+
+.license .table.partner tr.role4 td[title="View child accounts"]::before {
+  border-top: 6px transparent solid;
+  border-bottom: 6px transparent solid;
+  border-left: 8px #faa306 solid;
+}
+
+.license .table.partner tr.role5 td:first-child::before {
+  display: none;
+}
+
 .license .table.partner tr.isOpen::after {
-  content: '';
+  content: "";
   width: 100%;
   border-bottom: 3px #0084b2 solid;
   position: absolute;
@@ -1222,7 +1582,7 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .license .table.partner tr.isOpen td {
-  padding: .3rem .7rem;
+  padding: 0.3rem 0.7rem;
 }
 
 .license .table.partner tr.isOpen td:nth-child(n + 2) {
@@ -1234,40 +1594,40 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .license .table.partner tr.isOpen td:first-child::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 50%;
-  left: .4rem;
+  left: 0.4rem;
   border-top: 8px #0084b2 solid;
   border-right: 6px transparent solid;
   border-left: 6px transparent solid;
   transform: translateY(-50%);
 }
 
-.license .table.partner tr.isOpen~tr td:first-child {
+.license .table.partner tr.isOpen ~ tr td:first-child {
   padding-left: 2.5rem;
 }
 
-.license .table.partner tr.isOpen~tr td:first-child::before {
+.license .table.partner tr.isOpen ~ tr td:first-child::before {
   top: 50%;
   left: 1.4rem;
 }
 
-.license .table.partner tr.isOpen+.isOpen::after {
+.license .table.partner tr.isOpen + .isOpen::after {
   width: calc(100% - 1.4rem);
   left: 1.4rem;
 }
 
-.license .table.partner tr.isOpen+.isOpen~tr td:first-child {
+.license .table.partner tr.isOpen + .isOpen ~ tr td:first-child {
   padding-left: 3.5rem;
 }
 
-.license .table.partner tr.isOpen+.isOpen~tr td:first-child::before {
+.license .table.partner tr.isOpen + .isOpen ~ tr td:first-child::before {
   top: 50%;
   left: 2.4rem;
 }
 
-.license .table.partner tr.isOpen+.isOpen+.isOpen::after {
+.license .table.partner tr.isOpen + .isOpen + .isOpen::after {
   width: calc(100% - 2.4rem);
   left: 2.4rem;
 }
@@ -1275,7 +1635,7 @@ _:-ms-lang(x)::-ms-backdrop,
 .license .table.partner tr.isOpen.role2,
 .license .table.partner tr.isOpen.role3,
 .license .table.partner tr.isOpen.role4 {
-  background: #FAFAFA;
+  background: #fafafa;
 }
 
 .license .table.partner tr.isOpen.role3::after {
@@ -1303,54 +1663,21 @@ _:-ms-lang(x)::-ms-backdrop,
   text-align: right;
 }
 
-.license .table.partner.iconver tr td[title="View child accounts"] {
-  padding-left: 1.5rem;
-  position: relative;
-  cursor: pointer;
-  background-size: none;
+.license .table.partner td img[src*="circle.svg"] {
+  filter: brightness(0) saturate(100%) invert(58%) sepia(41%) saturate(5814%)
+    hue-rotate(143deg) brightness(96%) contrast(101%);
 }
 
-.license .table.partner.iconver tr td[title="View child accounts"]:hover {
-  color: #0084b2;
-}
-
-.license .table.partner.iconver tr td[title="View child accounts"] a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.license .table.partner.iconver tr td[title="View child accounts"]::before {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: .4rem;
-  border-top: 6px transparent solid;
-  border-bottom: 6px transparent solid;
-  border-left: 8px #0084b2 solid;
-  transform: translateY(-50%);
-}
-
-.license .table.partner.iconver tr.role3 td[title="View child accounts"]::before {
-  border-top: 6px transparent solid;
-  border-bottom: 6px transparent solid;
-  border-left: 8px #00b4aa solid;
-}
-
-.license .table.partner.iconver tr.role4 td[title="View child accounts"]::before {
-  border-top: 6px transparent solid;
-  border-bottom: 6px transparent solid;
-  border-left: 8px #faa306 solid;
-}
-
-.license .table.partner.iconver tr.role5 td:first-child::before {
-  display: none;
+.license .table.partner td img[src*="block.svg"] {
+  filter: brightness(0) saturate(100%) invert(45%) sepia(77%) saturate(2633%)
+    hue-rotate(340deg) brightness(102%) contrast(101%);
 }
 
 .dictation .displayOptions {
   display: none;
   margin-bottom: 0.6rem;
-  padding: .3rem 1rem;
-  background: #F0F0F0;
+  padding: 0.3rem 1rem;
+  background: #f0f0f0;
   position: relative;
 }
 
@@ -1359,7 +1686,7 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .dictation .displayOptions li label {
-  padding: .3rem 0;
+  padding: 0.3rem 0;
   font-size: 13px;
   line-height: 1.4;
   letter-spacing: 0.02rem;
@@ -1367,9 +1694,9 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .dictation .displayOptions li label .formCheck {
-  width: .9rem;
-  height: .9rem;
-  margin-right: .3rem;
+  width: 0.9rem;
+  height: 0.9rem;
+  margin-right: 0.3rem;
 }
 
 .dictation .displayOptions.isShow {
@@ -1378,11 +1705,11 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .dictation .displayOptions::before {
   content: "";
-  border-right: .6rem transparent solid;
-  border-bottom: 0.6rem #F0F0F0 solid;
-  border-left: .6rem transparent solid;
+  border-right: 0.6rem transparent solid;
+  border-bottom: 0.6rem #f0f0f0 solid;
+  border-left: 0.6rem transparent solid;
   position: absolute;
-  top: -.5rem;
+  top: -0.5rem;
   right: 3rem;
 }
 
@@ -1391,13 +1718,13 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .dictation .tableFilter {
-  padding-top: .8rem;
-  margin-bottom: .8rem;
+  padding-top: 0.8rem;
+  margin-bottom: 0.8rem;
 }
 
 .dictation .tableFilter li {
   display: inline-block;
-  margin-right: .3rem;
+  margin-right: 0.3rem;
   font-size: 14px;
   line-height: 1.4;
   letter-spacing: 0.02rem;
@@ -1409,19 +1736,19 @@ _:-ms-lang(x)::-ms-backdrop,
 }
 
 .dictation .tableFilter li label .formCheck {
-  width: .9rem;
-  height: .9rem;
-  margin-right: .3rem;
+  width: 0.9rem;
+  height: 0.9rem;
+  margin-right: 0.3rem;
 }
 
 .dictation .tableFilter2 {
-  padding-top: .8rem;
-  margin-bottom: .8rem;
+  padding-top: 0.8rem;
+  margin-bottom: 0.8rem;
 }
 
 .dictation .tableFilter2 li {
   display: inline-block;
-  margin-right: .5rem;
+  margin-right: 0.5rem;
   font-size: 14px;
   line-height: 1.1;
   letter-spacing: 0.02rem;
@@ -1432,11 +1759,11 @@ _:-ms-lang(x)::-ms-backdrop,
   display: block;
   color: #0084b2;
   text-decoration: none;
-  padding-right: .5rem;
+  padding-right: 0.5rem;
 }
 
 .dictation .tableFilter2 li a:hover {
-  opacity: .7;
+  opacity: 0.7;
 }
 
 .dictation .tableFilter2 li a.isDisable {
@@ -1446,7 +1773,7 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .dictation .tableFilter2 li a span {
   display: inline-block;
-  padding: 0 .2rem;
+  padding: 0 0.2rem;
   color: #333333;
 }
 
@@ -1490,7 +1817,7 @@ _:-ms-lang(x)::-ms-backdrop,
   left: 0;
   width: 100%;
   height: 100%;
-  border-right: 0.1rem #E6E6E6 solid;
+  border-right: 0.1rem #e6e6e6 solid;
   z-index: -1;
 }
 
@@ -1511,7 +1838,8 @@ _:-ms-lang(x)::-ms-backdrop,
 .dictation .table.dictation tr.isSelected img[alt="Finished"],
 .dictation .table.dictation tr.isSelected img[alt="InProgress"],
 .dictation .table.dictation tr.isSelected img[alt="encrypted"] {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%) hue-rotate(110deg) brightness(110%) contrast(101%);
+  filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(2%)
+    hue-rotate(110deg) brightness(110%) contrast(101%);
 }
 
 .dictation .table.dictation td {
@@ -1538,8 +1866,8 @@ _:-ms-lang(x)::-ms-backdrop,
 
 .dictation .table.dictation td img {
   height: 1.3rem;
-  margin-right: .2rem;
-  margin-left: -.4rem;
+  margin-right: 0.2rem;
+  margin-left: -0.4rem;
   vertical-align: middle;
 }
 
@@ -1692,51 +2020,6 @@ _:-ms-lang(x)::-ms-backdrop,
   display: none;
 }
 
-.menuInTable {
-  width: auto;
-  position: absolute;
-  left: .7rem;
-  bottom: .5rem;
-  opacity: 0;
-  -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;
-}
-
-.menuInTable li {
-  display: inline-block;
-  margin-right: .5rem;
-  padding-right: .5rem;
-}
-
-.menuInTable li:not(:last-child) {
-  border-right: 1px #999999 solid;
-}
-
-.menuInTable li a {
-  display: block;
-  font-size: 12px;
-  line-height: 1.4;
-  letter-spacing: 0.02rem;
-  font-weight: normal;
-  text-decoration: none;
-  color: #0084b2;
-}
-
-.menuInTable li a:hover {
-  opacity: .7;
-}
-
-.menuInTable li a.isDisable {
-  color: #999999;
-  pointer-events: none;
-}
-
-tr.isSelected .menuInTable li a {
-  color: #ffffff;
-}
-
 .formList dd.formChange {
   display: flex;
   flex-wrap: wrap;
@@ -1756,7 +2039,8 @@ tr.isSelected .menuInTable li a {
 .formChange ul.holdMember {
   height: 250px;
   overflow-y: scroll;
-  padding: .5rem;
+  padding: 0.5rem;
+  background: #ffffff;
 }
 
 .formChange ul.chooseMember li.changeTitle,
@@ -1769,45 +2053,47 @@ tr.isSelected .menuInTable li a {
   display: none;
 }
 
-.formChange ul.chooseMember li input+label,
-.formChange ul.holdMember li input+label {
+.formChange ul.chooseMember li input + label,
+.formChange ul.holdMember li input + label {
   display: block;
-  padding: .2rem 0 .2rem 1.5rem;
+  padding: 0.2rem 0 0.2rem 1.5rem;
   margin-right: 0;
   background: url(../assets/images/circle.svg) no-repeat left center;
   background-size: 1.3rem;
 }
 
-.formChange ul.chooseMember li input+label:hover,
-.formChange ul.holdMember li input+label:hover {
-  background: #E6E6E6 url(../assets/images/arrow_circle_left.svg) no-repeat left center;
+.formChange ul.chooseMember li input + label:hover,
+.formChange ul.holdMember li input + label:hover {
+  background: #e6e6e6 url(../assets/images/arrow_circle_left.svg) no-repeat left
+    center;
   background-size: 1.3rem;
 }
 
-.formChange ul.chooseMember li input:checked+label,
-.formChange ul.holdMember li input:checked+label {
-  padding: .2rem 1rem .2rem 0;
+.formChange ul.chooseMember li input:checked + label,
+.formChange ul.holdMember li input:checked + label {
+  padding: 0.2rem 1rem 0.2rem 0;
   background: url(../assets/images/check_circle_fill.svg) no-repeat right center;
   background-size: 1.3rem;
 }
 
-.formChange ul.chooseMember li input:checked+label:hover,
-.formChange ul.holdMember li input:checked+label:hover {
-  background: #E6E6E6 url(../assets/images/arrow_circle_right.svg) no-repeat right center;
+.formChange ul.chooseMember li input:checked + label:hover,
+.formChange ul.holdMember li input:checked + label:hover {
+  background: #e6e6e6 url(../assets/images/arrow_circle_right.svg) no-repeat
+    right center;
   background-size: 1.3rem;
 }
 
-.formChange>p {
+.formChange > p {
   width: 6%;
   height: 20px;
-  background: #E6E6E6;
+  background: #e6e6e6;
   position: relative;
 }
 
-.formChange>p::before {
-  content: '';
+.formChange > p::before {
+  content: "";
   border-top: 20px transparent solid;
-  border-right: 20px #E6E6E6 solid;
+  border-right: 20px #e6e6e6 solid;
   border-bottom: 20px transparent solid;
   position: absolute;
   top: 50%;
@@ -1815,17 +2101,98 @@ tr.isSelected .menuInTable li a {
   transform: translateY(-50%);
 }
 
-.formChange>p::after {
-  content: '';
+.formChange > p::after {
+  content: "";
   border-top: 20px transparent solid;
   border-bottom: 20px transparent solid;
-  border-left: 20px #E6E6E6 solid;
+  border-left: 20px #e6e6e6 solid;
   position: absolute;
   top: 50%;
   right: -15px;
   transform: translateY(-50%);
 }
 
+.partners .table.partner {
+  position: relative;
+  min-width: 100%;
+}
+
+.partners .table.partner tr {
+  position: relative;
+}
+
+.partners .table.partner tr.tableHeader th {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  background: #282828;
+  z-index: 1;
+}
+
+.partners .table.partner tr.tableHeader th.clm0 {
+  width: 0px;
+  padding: 0 0;
+}
+
+.partners .table.partner tr.tableHeader th:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-right: 0.1rem #e6e6e6 solid;
+  z-index: -1;
+}
+
+.partners .table.partner tr:hover .menuInTable {
+  opacity: 1;
+}
+
+.partners .table.partner tr.isSelected {
+  background: #0084b2;
+  color: #ffffff;
+}
+
+.partners .table.partner tr.isSelected:hover {
+  color: #ffffff;
+}
+
+.partners .table.partner td {
+  padding-bottom: 2rem;
+  vertical-align: top;
+}
+
+.partners .table.partner td.clm0 {
+  width: 0px;
+  padding: 0 0;
+  overflow: visible;
+  position: sticky;
+  left: 0;
+  z-index: 2;
+}
+
+.partners .table.partner td.txWsline {
+  white-space: pre;
+}
+
+.partners .table.partner.role4 {
+  margin-top: 3rem;
+}
+
+.partners .table.partner.role4 td {
+  padding-bottom: 0.7rem;
+}
+
+.partners .table.partner.role4 .menuInTable {
+  display: none;
+}
+
+.partners .table.partner:not(.role4) tr th:last-of-type,
+.partners .table.partner:not(.role4) tr td:last-of-type {
+  display: none;
+}
+
 .alignCenter {
   text-align: center;
 }
@@ -1863,7 +2230,7 @@ tr.isSelected .menuInTable li a {
 }
 
 .marginBtm0 {
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 .marginBtm1 {
@@ -1883,7 +2250,7 @@ tr.isSelected .menuInTable li a {
 }
 
 .marginRgt1 {
-  margin-right: .9rem;
+  margin-right: 0.9rem;
 }
 
 .marginRgt2 {
@@ -1895,7 +2262,7 @@ tr.isSelected .menuInTable li a {
 }
 
 .paddSide0 {
-  padding: 0 .5rem;
+  padding: 0 0.5rem;
 }
 
 .paddSide1 {
@@ -1911,7 +2278,7 @@ tr.isSelected .menuInTable li a {
 }
 
 .txNormal {
-  font-size: 14px;
+  font-size: 16px;
   line-height: 1.7;
   letter-spacing: 0;
   font-weight: normal;
@@ -1929,4 +2296,4 @@ tr.isSelected .menuInTable li a {
   white-space: pre-wrap;
 }
 
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
+/*# sourceMappingURL=style.css.map */
diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts
index 7ff37db..a2e3b07 100644
--- a/dictation_client/src/styles/app.module.scss.d.ts
+++ b/dictation_client/src/styles/app.module.scss.d.ts
@@ -41,6 +41,7 @@ declare const classNames: {
   readonly formDone: "formDone";
   readonly listVertical: "listVertical";
   readonly loadingBoxSpinner: "loadingBoxSpinner";
+  readonly icLoading: "icLoading";
   readonly modal: "modal";
   readonly isShow: "isShow";
   readonly modalBox: "modalBox";
@@ -63,6 +64,8 @@ declare const classNames: {
   readonly table: "table";
   readonly tableHeader: "tableHeader";
   readonly hasSort: "hasSort";
+  readonly isActiveAz: "isActiveAz";
+  readonly isActiveZa: "isActiveZa";
   readonly noLine: "noLine";
   readonly home: "home";
   readonly pgHome: "pgHome";
@@ -72,6 +75,7 @@ declare const classNames: {
   readonly user: "user";
   readonly license: "license";
   readonly dictation: "dictation";
+  readonly partners: "partners";
   readonly isSelected: "isSelected";
   readonly menuInTable: "menuInTable";
   readonly menuAction: "menuAction";
@@ -79,22 +83,22 @@ declare const classNames: {
   readonly menuLink: "menuLink";
   readonly colorLink: "colorLink";
   readonly alignRight: "alignRight";
-  readonly menuMore: "menuMore";
   readonly menuIcon: "menuIcon";
+  readonly isDisable: "isDisable";
   readonly icCheckCircle: "icCheckCircle";
+  readonly icInTable: "icInTable";
+  readonly svg: "svg";
   readonly history: "history";
   readonly cardHistory: "cardHistory";
   readonly partner: "partner";
-  readonly isOpen: "isOpen";
-  readonly role2: "role2";
   readonly role3: "role3";
   readonly role4: "role4";
-  readonly iconver: "iconver";
   readonly role5: "role5";
+  readonly isOpen: "isOpen";
+  readonly role2: "role2";
   readonly displayOptions: "displayOptions";
   readonly tableFilter: "tableFilter";
   readonly tableFilter2: "tableFilter2";
-  readonly isDisable: "isDisable";
   readonly tableWrap: "tableWrap";
   readonly clm0: "clm0";
   readonly txWsline: "txWsline";
diff --git a/dictation_client/src/translation/de.json b/dictation_client/src/translation/de.json
index 7a0d5b7..7a3e71d 100644
--- a/dictation_client/src/translation/de.json
+++ b/dictation_client/src/translation/de.json
@@ -27,7 +27,8 @@
       "alreadyHaveAccount": "(de)Already have an account?",
       "signInButton": "(de)Sign in",
       "newUser": "(de)New user?",
-      "signUpButton": "(de)Create a new account"
+      "signUpButton": "(de)Create a new account",
+      "logoAlt": "(de)OM Dictation Management System in the Cloud"
     }
   },
   "signupPage": {
diff --git a/dictation_client/src/translation/en.json b/dictation_client/src/translation/en.json
index c0a18fd..b356107 100644
--- a/dictation_client/src/translation/en.json
+++ b/dictation_client/src/translation/en.json
@@ -27,7 +27,8 @@
       "alreadyHaveAccount": "Already have an account?",
       "signInButton": "Sign in",
       "newUser": "New user?",
-      "signUpButton": "Create a new account"
+      "signUpButton": "Create a new account",
+      "logoAlt": "OM Dictation Management System in the Cloud"
     }
   },
   "signupPage": {
diff --git a/dictation_client/src/translation/es.json b/dictation_client/src/translation/es.json
index 58308fa..5507f7a 100644
--- a/dictation_client/src/translation/es.json
+++ b/dictation_client/src/translation/es.json
@@ -27,7 +27,8 @@
       "alreadyHaveAccount": "(es)Already have an account?",
       "signInButton": "(es)Sign in",
       "newUser": "(es)New user?",
-      "signUpButton": "(es)Create a new account"
+      "signUpButton": "(es)Create a new account",
+      "logoAlt": "(es)OM Dictation Management System in the Cloud"
     }
   },
   "signupPage": {
diff --git a/dictation_client/src/translation/fr.json b/dictation_client/src/translation/fr.json
index ed7d524..4e2714b 100644
--- a/dictation_client/src/translation/fr.json
+++ b/dictation_client/src/translation/fr.json
@@ -27,7 +27,8 @@
       "alreadyHaveAccount": "(fr)Already have an account?",
       "signInButton": "(fr)Sign in",
       "newUser": "(fr)New user?",
-      "signUpButton": "(fr)Create a new account"
+      "signUpButton": "(fr)Create a new account",
+      "logoAlt": "(fr)OM Dictation Management System in the Cloud"
     }
   },
   "signupPage": {