diff --git a/src/lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte b/src/lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte
new file mode 100644
index 000000000..1fc106631
--- /dev/null
+++ b/src/lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { TableBodyCell } from 'svelte-5-ui-lib';
+
+  import type { TaskResult } from '$lib/types/task';
+
+  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
+  import UpdatingDropdown from '$lib/components/SubmissionStatus/UpdatingDropdown.svelte';
+
+  interface Props {
+    taskResult: TaskResult;
+    isLoggedIn: boolean;
+    onupdate?: (updatedTask: TaskResult) => void; // Ensure to update task result in parent component.
+  }
+
+  let { taskResult, isLoggedIn, onupdate = () => {} }: Props = $props();
+
+  let updatingDropdown: UpdatingDropdown;
+</script>
+
+<TableBodyCell
+  class="items-center justify-center w-20 px-0 pt-4 sm:pt-4 pb-0 sm:pb-1"
+  onclick={() => updatingDropdown.toggle()}
+>
+  <div class="flex items-center justify-center min-w-[80px] max-w-[80px]">
+    <SubmissionStatusImage {taskResult} {isLoggedIn} />
+  </div>
+</TableBodyCell>
+
+<UpdatingDropdown bind:this={updatingDropdown} {taskResult} {isLoggedIn} {onupdate} />
diff --git a/src/lib/components/SubmissionStatus/UpdatingDropdown.svelte b/src/lib/components/SubmissionStatus/UpdatingDropdown.svelte
index 6b286cd96..95c341c22 100644
--- a/src/lib/components/SubmissionStatus/UpdatingDropdown.svelte
+++ b/src/lib/components/SubmissionStatus/UpdatingDropdown.svelte
@@ -9,9 +9,10 @@
     taskResult: TaskResult;
     isLoggedIn: boolean;
     onupdate?: (updatedTask: TaskResult) => void;
+    dropdownClass?: string;
   }
 
-  let { taskResult, isLoggedIn, onupdate = () => {} }: Props = $props();
+  let { taskResult, isLoggedIn, onupdate, dropdownClass = '' }: Props = $props();
 
   let updatingDropdown: UpdatingDropdown;
 </script>
@@ -44,9 +45,10 @@
     taskResult: TaskResult;
     isLoggedIn: boolean;
     onupdate: (updatedTask: TaskResult) => void; // Ensure to update task result in parent component.
+    dropdownClass?: string;
   }
 
-  let { taskResult, isLoggedIn, onupdate }: Props = $props();
+  let { taskResult, isLoggedIn, onupdate, dropdownClass = '' }: Props = $props();
 
   const { page } = getStores();
   let activeUrl = $state($page.url.pathname);
@@ -67,11 +69,7 @@
   let selectedSubmissionStatus = $state<SubmissionStatus>();
   let showForm = $state(false);
 
-  function handleClick(submissionStatus: {
-    innerId: string;
-    innerName: string;
-    labelName: string;
-  }): void {
+  function handleClick(submissionStatus: SubmissionStatus): void {
     selectedSubmissionStatus = submissionStatus;
     showForm = true;
 
@@ -92,6 +90,7 @@
     innerId: string;
     innerName: string;
     labelName: string;
+    imagePath: string;
   };
 
   type EnhanceForSubmit = {
@@ -158,8 +157,10 @@
       ...taskResult,
       status_name: submissionStatus.innerName,
       status_id: submissionStatus.innerId,
+      submission_status_image_path: submissionStatus.imagePath,
       submission_status_label_name: submissionStatus.labelName,
-      is_ac: submissionStatus.innerName === 'ac',
+      is_ac:
+        submissionStatus.innerName === 'ac' || submissionStatus.innerName === 'ac_with_editorial',
       updated_at: new Date(),
     };
   }
@@ -170,17 +171,19 @@
       innerId: status.id,
       innerName: status.status_name,
       labelName: status.label_name,
+      imagePath: status.image_path,
     };
     return option;
   });
 </script>
 
 <div class="relative">
+  <!-- HACK: classの設定は、テーブルの上部・下部をクリックしたときに、いずれもドロップダウンを操作できるようにするための苦肉の策 -->
   <Dropdown
     {activeUrl}
     {dropdownStatus}
     {closeDropdown}
-    class="absolute w-32 z-20 left-auto right-0 mt-8"
+    class="absolute w-32 z-50 top-12 -translate-y-full {dropdownClass}"
   >
     <DropdownUl>
       {#if isLoggedIn}
diff --git a/src/lib/components/SubmissionStatus/UpdatingModal.svelte b/src/lib/components/SubmissionStatus/UpdatingModal.svelte
deleted file mode 100644
index 38204b2fe..000000000
--- a/src/lib/components/SubmissionStatus/UpdatingModal.svelte
+++ /dev/null
@@ -1,102 +0,0 @@
-<script lang="ts">
-  import { enhance } from '$app/forms';
-
-  import { Button, Modal, Select, uiHelpers } from 'svelte-5-ui-lib';
-
-  import type { TaskResult } from '$lib/types/task';
-
-  import { submission_statuses } from '$lib/services/submission_status';
-  import { errorMessageStore } from '$lib/stores/error_message';
-
-  import { getContestNameLabel } from '$lib/utils/contest';
-  import InputFieldWrapper from '$lib/components/InputFieldWrapper.svelte';
-
-  interface Props {
-    isLoggedIn: boolean;
-  }
-
-  let { isLoggedIn }: Props = $props();
-
-  const modal = uiHelpers();
-  let modalStatus = $state(false);
-  const closeModal = () => {
-    modal.close();
-  };
-
-  $effect(() => {
-    modalStatus = modal.isOpen;
-  });
-
-  let selectedTaskResult = $state<TaskResult | null>(null);
-  let selectedSubmissionStatus: string = $state('');
-
-  export function openModal(taskResult: TaskResult): void {
-    modal.open();
-    selectedTaskResult = taskResult;
-    selectedSubmissionStatus = taskResult.status_name;
-  }
-
-  // FIXME: When customizing submission status, implement DB fetching for status options.
-  const submissionStatusOptions = submission_statuses.map((status) => {
-    const option = {
-      value: status.status_name,
-      name: status.label_name,
-    };
-    return option;
-  });
-
-  const FAILED_TO_UPDATE_SUBMISSION_STATUS =
-    '回答状況の更新に失敗しました。もう一度試してください。';
-
-  async function handleSubmit(event: Event) {
-    event.preventDefault();
-
-    try {
-      const response = await fetch('?/update', {
-        method: 'POST',
-        body: new FormData(event.target as HTMLFormElement),
-      });
-
-      if (!response.ok) {
-        errorMessageStore.setAndClearAfterTimeout(FAILED_TO_UPDATE_SUBMISSION_STATUS, 10000);
-        return;
-      }
-
-      errorMessageStore.setAndClearAfterTimeout(null);
-      closeModal();
-    } catch (error) {
-      console.error('Failed to update submission status: ', error);
-      errorMessageStore.setAndClearAfterTimeout(FAILED_TO_UPDATE_SUBMISSION_STATUS, 10000);
-    }
-  }
-</script>
-
-{#if isLoggedIn && selectedTaskResult}
-  <Modal
-    title="{getContestNameLabel(selectedTaskResult.contest_id)} - {selectedTaskResult.title}"
-    size="sm"
-    {modalStatus}
-    {closeModal}
-    outsideClose
-  >
-    <form method="POST" action="?/update" onsubmit={handleSubmit} use:enhance>
-      <!-- 問題名-->
-      <InputFieldWrapper
-        inputFieldType="hidden"
-        inputFieldName="taskId"
-        bind:inputValue={selectedTaskResult.task_id}
-      />
-
-      <!-- 指定した問題の回答状況の候補 -->
-      <Select
-        placeholder=""
-        name="submissionStatus"
-        items={submissionStatusOptions}
-        class="mb-4"
-        bind:value={selectedSubmissionStatus}
-      />
-
-      <Button type="submit" class="w-full">回答を更新</Button>
-    </form>
-  </Modal>
-{/if}
diff --git a/src/lib/components/TaskList.svelte b/src/lib/components/TaskList.svelte
index 60ded2770..36ab02663 100644
--- a/src/lib/components/TaskList.svelte
+++ b/src/lib/components/TaskList.svelte
@@ -13,10 +13,9 @@
   import { type TaskResult, type TaskResults, TaskGrade } from '$lib/types/task';
 
   import ThermometerProgressBar from '$lib/components/ThermometerProgressBar.svelte';
-  import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
-  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
-  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
   import AcceptedCounter from '$lib/components/SubmissionStatus/AcceptedCounter.svelte';
+  import SubmissionStatusTableBodyCell from '$lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte';
+  import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
 
   import { getBackgroundColorFrom } from '$lib/services/submission_status';
 
@@ -33,15 +32,18 @@
 
   let { grade, gradeColor, taskResults, isAdmin, isLoggedIn }: Props = $props();
 
-  // TODO: 他のコンポーネントでも利用できるようにする。
-  let updatingModal: UpdatingModal | null = null;
+  function updateTaskResult(updatedTask: TaskResult): void {
+    const newTaskResults = [...taskResults];
+
+    const index = newTaskResults.findIndex(
+      (task: TaskResult) => task.task_id === updatedTask.task_id,
+    );
 
-  function openModal(taskResult: TaskResult): void {
-    if (updatingModal) {
-      updatingModal.openModal(taskResult);
-    } else {
-      console.error('Failed to initialize UpdatingModal component.');
+    if (index !== -1) {
+      newTaskResults[index] = updatedTask;
     }
+
+    taskResults = newTaskResults;
   }
 </script>
 
@@ -66,7 +68,6 @@
       </span>
     {/snippet}
 
-    <!-- FIXME: clickを1回実行するとactionsが2回実行されてしまう。原因と修正方法が分かっていない。 -->
     <!-- TODO: 問題が多くなってきたら、ページネーションを導入する -->
     <!-- TODO: 回答状況に応じて、フィルタリングできるようにする -->
     <div class="overflow-auto rounded-md border">
@@ -90,14 +91,14 @@
               id={taskResult.contest_id + '-' + taskResult.task_id}
               class={getBackgroundColorFrom(taskResult.status_name)}
             >
-              <TableBodyCell
-                class="justify-center w-20 px-1 sm:px-3 pt-1 sm:pt-3 pb-0.5 sm:pb-1"
-                onclick={() => openModal(taskResult)}
-              >
-                <div class="flex items-center justify-center w-full h-full">
-                  <SubmissionStatusImage {taskResult} {isLoggedIn} />
-                </div>
-              </TableBodyCell>
+              <div class="px-1 sm:px-3">
+                <SubmissionStatusTableBodyCell
+                  {taskResult}
+                  {isLoggedIn}
+                  onupdate={(updatedTask: TaskResult) => updateTaskResult(updatedTask)}
+                />
+              </div>
+
               <TableBodyCell class="w-1/2 text-left truncate pl-0 sm:pl-6">
                 <ExternalLinkWrapper
                   url={getTaskUrl(taskResult.contest_id, taskResult.task_id)}
@@ -135,5 +136,3 @@
     </div>
   </AccordionItem>
 </Accordion>
-
-<UpdatingModal bind:this={updatingModal} {isLoggedIn} />
diff --git a/src/lib/components/TaskTables/TaskTableBodyCell.svelte b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
index 5ae8e1e4b..a0cdd0c96 100644
--- a/src/lib/components/TaskTables/TaskTableBodyCell.svelte
+++ b/src/lib/components/TaskTables/TaskTableBodyCell.svelte
@@ -65,6 +65,12 @@
       <EllipsisVertical class="w-4 h-4 mx-auto" />
     </button>
 
-    <UpdatingDropdown bind:this={updatingDropdown} {taskResult} {isLoggedIn} {onupdate} />
+    <UpdatingDropdown
+      bind:this={updatingDropdown}
+      {taskResult}
+      {isLoggedIn}
+      {onupdate}
+      dropdownClass="left-auto right-0 mt-8"
+    />
   </div>
 {/snippet}
diff --git a/src/routes/workbooks/[slug]/+page.svelte b/src/routes/workbooks/[slug]/+page.svelte
index 1d6567617..1df4bb9f3 100644
--- a/src/routes/workbooks/[slug]/+page.svelte
+++ b/src/routes/workbooks/[slug]/+page.svelte
@@ -13,9 +13,8 @@
   import PublicationStatusLabel from '$lib/components/WorkBooks/PublicationStatusLabel.svelte';
   import CompletedTasks from '$lib/components/Trophies/CompletedTasks.svelte';
   import HeadingOne from '$lib/components/HeadingOne.svelte';
-  import UpdatingModal from '$lib/components/SubmissionStatus/UpdatingModal.svelte';
-  import SubmissionStatusImage from '$lib/components/SubmissionStatus/SubmissionStatusImage.svelte';
   import GradeLabel from '$lib/components/GradeLabel.svelte';
+  import SubmissionStatusTableBodyCell from '$lib/components/SubmissionStatus/SubmissionStatusInTableBodyCell.svelte';
   import ExternalLinkWrapper from '$lib/components/ExternalLinkWrapper.svelte';
   import CommentAndHint from '$lib/components/WorkBook/CommentAndHint.svelte';
 
@@ -44,6 +43,17 @@
     return taskResults?.get(taskId) as TaskResult;
   };
 
+  const updateTaskResult = (updatedTask: TaskResult): void => {
+    const taskId = updatedTask.task_id;
+
+    if (taskResults.has(taskId)) {
+      // Force to update the task result.
+      const newTaskResults = new Map(taskResults);
+      newTaskResults.set(taskId, updatedTask);
+      taskResults = newTaskResults;
+    }
+  };
+
   const getTaskGrade = (taskId: string): TaskGrade => {
     return getTaskResult(taskId)?.grade as TaskGrade;
   };
@@ -75,19 +85,6 @@
     return getContestIdFrom(taskId) + '-' + taskId;
   };
 
-  // HACK:: `updatingModal` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates.
-  // eslint-disable-next-line svelte/valid-compile
-  let updatingModal: UpdatingModal | null = null;
-
-  // HACK: clickを1回実行するとactionsが2回実行されてしまう。原因と修正方法が分かっていない。
-  function handleClick(taskId: string) {
-    if (updatingModal) {
-      updatingModal.openModal(getTaskResult(taskId));
-    } else {
-      console.error('Failed to initialize UpdatingModal component.');
-    }
-  }
-
   $effect(() => {
     if (taskResults && workBook && Array.isArray(workBook.workBookTasks)) {
       workBookTasks = workBook.workBookTasks;
@@ -173,18 +170,14 @@
                 </div>
               </TableBodyCell>
 
-              <!-- 回答状況の更新 -->
-              <TableBodyCell
-                class="justify-center w-20 px-0 pt-1 sm:pt-3 pb-0.5 sm:pb-1"
-                onclick={() => handleClick(workBookTask.taskId)}
-              >
-                <div class="flex items-center justify-center min-w-[80px] max-w-[80px]">
-                  <SubmissionStatusImage
-                    taskResult={getTaskResult(workBookTask.taskId)}
-                    {isLoggedIn}
-                  />
-                </div>
-              </TableBodyCell>
+              <!-- 回答状況 -->
+              <div class="">
+                <SubmissionStatusTableBodyCell
+                  taskResult={getTaskResult(workBookTask.taskId)}
+                  {isLoggedIn}
+                  onupdate={(updatedTask: TaskResult) => updateTaskResult(updatedTask)}
+                />
+              </div>
 
               <!-- 問題のリンク -->
               <TableBodyCell class="w-1/2 px-3 sm:px-6">
@@ -219,8 +212,6 @@
         </TableBody>
       </Table>
     </div>
-
-    <UpdatingModal bind:this={updatingModal} {isLoggedIn} />
   {:else}
     {'問題を1問以上登録してください。'}
   {/if}