diff --git a/dictation_client/.eslintignore b/dictation_client/.eslintignore
index 1fbf4c4..5b42489 100644
--- a/dictation_client/.eslintignore
+++ b/dictation_client/.eslintignore
@@ -5,3 +5,5 @@ jest.config.js
 vite.config.ts
 .env.local
  
+# デザイナのcssから生成するため除外
+src/styles/app.module.scss.d.ts
\ No newline at end of file
diff --git a/dictation_client/src/pages/DictationPage/index.tsx b/dictation_client/src/pages/DictationPage/index.tsx
index cb449b2..da6e520 100644
--- a/dictation_client/src/pages/DictationPage/index.tsx
+++ b/dictation_client/src/pages/DictationPage/index.tsx
@@ -28,6 +28,7 @@ import {
   changeAssignee,
   listTypistsAsync,
   listTypistGroupsAsync,
+  DirectionType,
   selectIsLoading,
 } from "features/dictation";
 import { getTranslationID } from "translation";
@@ -358,6 +359,20 @@ const DictationPage: React.FC = (): JSX.Element => {
     ]
   );
 
+  const sortIconClass = (
+    currentParam: SortableColumnType,
+    currentDirection: DirectionType,
+    column: SortableColumnType
+  ) => {
+    if (currentParam !== column) {
+      return "";
+    }
+    if (currentDirection === DIRECTION.DESC) {
+      return styles.isActiveZa;
+    }
+    return styles.isActiveAz;
+  };
+
   // 初回読み込み処理
   useEffect(() => {
     (async () => {
@@ -542,7 +557,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm1}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.JobNumber
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.JobNumber)
                             }
@@ -560,7 +579,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm2}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.Status
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.Status)
                             }
@@ -579,7 +602,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm4}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.Encryption
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.Encryption)
                             }
@@ -597,7 +624,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm5}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.AuthorId
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.AuthorId)
                             }
@@ -615,7 +646,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm6}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.WorkType
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.WorkType)
                             }
@@ -633,7 +668,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm7}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.FileName
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.FileName)
                             }
@@ -651,7 +690,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm8}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.FileLength
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.FileLength)
                             }
@@ -669,7 +712,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm9}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.FileSize
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.FileSize)
                             }
@@ -687,7 +734,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm10}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.RecordingStartedDate
+                            )}`}
                             onClick={() =>
                               updateSortColumn(
                                 SORTABLE_COLUMN.RecordingStartedDate
@@ -709,7 +760,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm11}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.RecordingFinishedDate
+                            )}`}
                             onClick={() =>
                               updateSortColumn(
                                 SORTABLE_COLUMN.RecordingFinishedDate
@@ -731,7 +786,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm12}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.UploadDate
+                            )}`}
                             onClick={() =>
                               updateSortColumn(SORTABLE_COLUMN.UploadDate)
                             }
@@ -749,7 +808,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm13}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.TranscriptionStartedDate
+                            )}`}
                             onClick={() =>
                               updateSortColumn(
                                 SORTABLE_COLUMN.TranscriptionStartedDate
@@ -771,7 +834,11 @@ const DictationPage: React.FC = (): JSX.Element => {
                         <th className={styles.clm14}>
                           {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
                           <a
-                            className={styles.hasSort}
+                            className={`${styles.hasSort} ${sortIconClass(
+                              sortableParamName,
+                              sortDirection,
+                              SORTABLE_COLUMN.TranscriptionFinishedDate
+                            )}`}
                             onClick={() =>
                               updateSortColumn(
                                 SORTABLE_COLUMN.TranscriptionFinishedDate
diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss
index a604774..6545500 100644
--- a/dictation_client/src/styles/app.module.scss
+++ b/dictation_client/src/styles/app.module.scss
@@ -113,6 +113,10 @@ body {
   line-height: 1;
 }
 
+a {
+  cursor: pointer;
+}
+
 ol,
 ul {
   list-style: none;
diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts
index a2e3b07..3d79c3e 100644
--- a/dictation_client/src/styles/app.module.scss.d.ts
+++ b/dictation_client/src/styles/app.module.scss.d.ts
@@ -87,7 +87,7 @@ declare const classNames: {
   readonly isDisable: "isDisable";
   readonly icCheckCircle: "icCheckCircle";
   readonly icInTable: "icInTable";
-  readonly svg: "svg";
+  readonly 'svg"': 'svg"';
   readonly history: "history";
   readonly cardHistory: "cardHistory";
   readonly partner: "partner";