diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index 1a8580d8..85a248be 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -22,9 +22,9 @@
     import { ColorSchemeTypeStore } from "src/ts/gui/colorscheme";
     import Help from "./Help.svelte";
     import { getChatBranches } from "src/ts/gui/branches";
-  import { getCurrentCharacter } from "src/ts/storage/database.svelte";
-  import { message } from "@tauri-apps/plugin-dialog";
-  import HypaV3Modal from './HypaV3Modal.svelte';
+    import { getCurrentCharacter } from "src/ts/storage/database.svelte";
+    import { message } from "@tauri-apps/plugin-dialog";
+    import HypaV3Modal from './HypaV3Modal.svelte';
     let btn
     let input = $state('')
     let cardExportType = $state('realm')
diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
index e6c6b34e..3ac09afd 100644
--- a/src/lib/Others/HypaV3Modal.svelte
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -1,61 +1,384 @@
 <script lang="ts">
-  import { Trash2Icon, XIcon, StarIcon, RefreshCw } from "lucide-svelte";
+  import {
+    Trash2Icon,
+    XIcon,
+    LanguagesIcon,
+    StarIcon,
+    RefreshCw,
+    CheckIcon,
+  } from "lucide-svelte";
   import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
-  import { alertConfirm } from "../../ts/alert";
+  import { alertConfirm, showHypaV3Alert } from "../../ts/alert";
   import { DBState, alertStore, selectedCharID } from "src/ts/stores.svelte";
   import { summarize } from "src/ts/process/memory/hypav3";
+  import { type OpenAIChat } from "src/ts/process/index.svelte";
+  import { type Message } from "src/ts/storage/database.svelte";
+  import { translateHTML } from "src/ts/translator/translator";
 
-  let hypaV3IsResummarizing = $state(false);
-  let hypaV3ExpandedChatMemo = $state<{
-    summaryChatMemos: string[];
-    summaryChatMemo: string;
-  }>({
-    summaryChatMemos: [],
-    summaryChatMemo: "",
+  interface SummaryUI {
+    isTranslating: boolean;
+    translation: string | null;
+    isRerolling: boolean;
+    rerolledText: string | null;
+    isRerolledTranslating: boolean;
+    rerolledTranslation: string | null;
+  }
+
+  interface ExpandedMessageUI {
+    summaryIndex: number;
+    selectedChatMemo: string;
+    isTranslating: boolean;
+    translation?: string | null;
+  }
+
+  const hypaV3DataState = $derived(
+    DBState.db.characters[$selectedCharID].chats[
+      DBState.db.characters[$selectedCharID].chatPage
+    ].hypaV3Data
+  );
+
+  let summaryUIStates = $state<SummaryUI[]>([]);
+  let expandedMessageUIState = $state<ExpandedMessageUI | null>(null);
+
+  $effect.pre(() => {
+    summaryUIStates = hypaV3DataState.summaries.map(() => ({
+      isTranslating: false,
+      translation: null,
+      isRerolling: false,
+      rerolledText: null,
+      isRerolledTranslating: false,
+      rerolledTranslation: null,
+    }));
+
+    expandedMessageUIState = null;
   });
+
+  async function alertConfirmTwice(
+    firstMessage: string,
+    secondMessage: string
+  ): Promise<boolean> {
+    return (
+      (await alertConfirm(firstMessage)) && (await alertConfirm(secondMessage))
+    );
+  }
+
+  function getMessageFromChatMemo(chatMemo: string | null): Message | null {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+    const firstMessage =
+      chat.fmIndex === -1
+        ? char.firstMessage
+        : char.alternateGreetings?.[chat.fmIndex ?? 0];
+
+    const targetMessage = (
+      chatMemo == null
+        ? { role: "char", data: firstMessage }
+        : chat.message.find((m) => m.chatId === chatMemo)
+    ) as Message;
+
+    return targetMessage;
+  }
+
+  async function toggleTranslate(
+    summaryIndex: number,
+    regenerate?: boolean
+  ): Promise<void> {
+    const summaryUIState = summaryUIStates[summaryIndex];
+
+    if (summaryUIState.isTranslating) return;
+
+    if (summaryUIState.translation) {
+      summaryUIState.translation = null;
+      return;
+    }
+
+    summaryUIState.isTranslating = true;
+    summaryUIState.translation = "Loading...";
+
+    const result = await translate(
+      hypaV3DataState.summaries[summaryIndex].text,
+      regenerate
+    );
+
+    summaryUIState.translation = result;
+    summaryUIState.isTranslating = false;
+  }
+
+  function isRerollable(summaryIndex: number): boolean {
+    const summary = hypaV3DataState.summaries[summaryIndex];
+
+    for (const chatMemo of summary.chatMemos) {
+      if (typeof chatMemo === "string") {
+        const char = DBState.db.characters[$selectedCharID];
+        const chat =
+          char.chats[DBState.db.characters[$selectedCharID].chatPage];
+
+        if (!chat.message.find((m) => m.chatId === chatMemo)) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  async function toggleReroll(summaryIndex: number): Promise<void> {
+    const summaryUIState = summaryUIStates[summaryIndex];
+
+    if (summaryUIState.isRerolling) return;
+    if (!isRerollable(summaryIndex)) return;
+
+    summaryUIState.isRerolling = true;
+    summaryUIState.rerolledText = "Loading...";
+
+    try {
+      const summary = hypaV3DataState.summaries[summaryIndex];
+      const toSummarize: OpenAIChat[] = summary.chatMemos.map((chatMemo) => {
+        const message = getMessageFromChatMemo(chatMemo);
+
+        return {
+          role: (message.role === "char"
+            ? "assistant"
+            : message.role) as OpenAIChat["role"],
+          content: message.data,
+        };
+      });
+
+      const summarizeResult = await summarize(toSummarize);
+
+      if (summarizeResult.success) {
+        summaryUIState.rerolledText = summarizeResult.data;
+      }
+    } catch (error) {
+      summaryUIState.rerolledText = "Reroll failed";
+    } finally {
+      summaryUIState.isRerolling = false;
+    }
+  }
+
+  async function toggleTranslateRerolled(
+    summaryIndex: number,
+    regenerate?: boolean
+  ): Promise<void> {
+    const summaryUIState = summaryUIStates[summaryIndex];
+
+    if (summaryUIState.isRerolledTranslating) return;
+
+    if (summaryUIState.rerolledTranslation) {
+      summaryUIState.rerolledTranslation = null;
+      return;
+    }
+
+    if (!summaryUIState.rerolledText) return;
+
+    summaryUIState.isRerolledTranslating = true;
+    summaryUIState.rerolledTranslation = "Loading...";
+
+    const result = await translate(summaryUIState.rerolledText, regenerate);
+
+    summaryUIState.rerolledTranslation = result;
+    summaryUIState.isRerolledTranslating = false;
+  }
+
+  async function toggleTranslateExpandedMessage(
+    regenerate?: boolean
+  ): Promise<void> {
+    if (!expandedMessageUIState || expandedMessageUIState.isTranslating) return;
+
+    if (expandedMessageUIState.translation) {
+      expandedMessageUIState.translation = null;
+      return;
+    }
+
+    const message = getMessageFromChatMemo(
+      expandedMessageUIState.selectedChatMemo
+    );
+
+    if (!message) return;
+
+    expandedMessageUIState.isTranslating = true;
+    expandedMessageUIState.translation = "Loading...";
+
+    const result = await translate(message.data, regenerate);
+
+    expandedMessageUIState.translation = result;
+    expandedMessageUIState.isTranslating = false;
+  }
+
+  function isMessageExpanded(
+    summaryIndex: number,
+    chatMemo: string | null
+  ): boolean {
+    if (!expandedMessageUIState) return false;
+
+    const summary = hypaV3DataState.summaries[summaryIndex];
+
+    return (
+      expandedMessageUIState.summaryIndex === summaryIndex &&
+      expandedMessageUIState.selectedChatMemo === chatMemo
+    );
+  }
+
+  function toggleExpandMessage(
+    summaryIndex: number,
+    chatMemo: string | null
+  ): void {
+    expandedMessageUIState = isMessageExpanded(summaryIndex, chatMemo)
+      ? null
+      : {
+          summaryIndex,
+          selectedChatMemo: chatMemo,
+          isTranslating: false,
+          translation: null,
+        };
+  }
+
+  function getNextMessageToSummarize(): Message | null {
+    const char = DBState.db.characters[$selectedCharID];
+    const chat = char.chats[DBState.db.characters[$selectedCharID].chatPage];
+    const firstMessage =
+      chat.fmIndex === -1
+        ? char.firstMessage
+        : char.alternateGreetings?.[chat.fmIndex ?? 0];
+
+    if (hypaV3DataState.summaries.length > 0) {
+      const lastSummary = hypaV3DataState.summaries.at(-1);
+      const lastMessageIndex = chat.message.findIndex(
+        (msg) => msg.chatId === lastSummary.chatMemos.at(-1)
+      );
+
+      if (lastMessageIndex !== -1) {
+        const nextMessage = chat.message[lastMessageIndex + 1];
+
+        if (nextMessage) {
+          return nextMessage;
+        }
+      }
+    }
+
+    if (firstMessage?.trim() === "") {
+      if (chat.message.length > 0) {
+        return chat.message[0];
+      }
+
+      return null;
+    }
+
+    return { role: "char", chatId: "first message", data: firstMessage };
+  }
+
+  async function translate(
+    text: string,
+    regenerate?: boolean
+  ): Promise<string> {
+    try {
+      return await translateHTML(text, false, "", -1, regenerate);
+    } catch (error) {
+      return `Translation failed: ${error}`;
+    }
+  }
+
+  type DualActionParams = {
+    onMainAction?: () => void;
+    onAlternativeAction?: () => void;
+  };
+
+  function handleDualAction(node: HTMLElement, params: DualActionParams = {}) {
+    const state = {
+      lastTap: 0,
+      tapTimeout: null as any,
+    };
+
+    const DOUBLE_TAP_DELAY = 300;
+
+    function handleInteraction(event: Event) {
+      if ("ontouchend" in window) {
+        // Mobile environment
+        const currentTime = new Date().getTime();
+        const tapLength = currentTime - state.lastTap;
+
+        if (tapLength < DOUBLE_TAP_DELAY && tapLength > 0) {
+          // Double tap detected
+          event.preventDefault();
+          clearTimeout(state.tapTimeout); // Cancel the first tap timeout
+          params.onAlternativeAction?.();
+          state.lastTap = 0; // Reset state
+        } else {
+          // First tap
+          state.lastTap = currentTime;
+
+          // Delayed single tap execution
+          state.tapTimeout = setTimeout(() => {
+            if (state.lastTap === currentTime) {
+              // If no double tap occurred
+              params.onMainAction?.();
+            }
+          }, DOUBLE_TAP_DELAY);
+        }
+      } else {
+        // Desktop environment
+        if ((event as MouseEvent).shiftKey) {
+          params.onAlternativeAction?.();
+        } else {
+          params.onMainAction?.();
+        }
+      }
+    }
+
+    node.addEventListener("click", handleInteraction);
+    node.addEventListener("touchend", handleInteraction);
+
+    return {
+      destroy() {
+        node.removeEventListener("click", handleInteraction);
+        node.removeEventListener("touchend", handleInteraction);
+        clearTimeout(state.tapTimeout); // Cleanup timeout
+      },
+      update(newParams: DualActionParams) {
+        params = newParams;
+      },
+    };
+  }
 </script>
 
-<div class="fixed inset-0 z-50 bg-black bg-opacity-50 p-4">
+<div class="fixed inset-0 z-50 bg-black/50 p-4">
   <div class="h-full w-full flex justify-center">
     <div
-      class="bg-darkbg p-4 break-any rounded-md flex flex-col w-full max-w-3xl {DBState
-        .db.characters[$selectedCharID].chats[
-        DBState.db.characters[$selectedCharID].chatPage
-      ].hypaV3Data.summaries.length === 0
-        ? 'h-48'
+      class="bg-zinc-900 p-6 rounded-lg flex flex-col w-full max-w-3xl {hypaV3DataState
+        .summaries.length === 0
+        ? 'max-h-[26rem]'
         : 'max-h-full'}"
     >
+      <!-- Header -->
       <div class="flex justify-between items-center w-full mb-4">
-        <h1 class="text-xl font-bold">HypaV3 Data</h1>
+        <h1 class="text-2xl font-semibold text-zinc-100">HypaV3 Data</h1>
         <div class="flex items-center gap-2">
           <!-- Reset Button -->
           <button
-            class="p-2 hover:text-red-500 transition-colors"
+            class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
             onclick={async () => {
-              let confirmed = await alertConfirm(
-                "This action cannot be undone. Do you want to reset HypaV3 data?"
-              );
-
-              if (confirmed) {
-                confirmed = await alertConfirm(
+              if (
+                await alertConfirmTwice(
+                  "This action cannot be undone. Do you want to reset HypaV3 data?",
                   "This action is irreversible. Do you really, really want to reset HypaV3 data?"
-                );
-
-                if (confirmed) {
-                  DBState.db.characters[$selectedCharID].chats[
-                    DBState.db.characters[$selectedCharID].chatPage
-                  ].hypaV3Data = {
-                    summaries: [],
-                  };
-                }
+                )
+              ) {
+                DBState.db.characters[$selectedCharID].chats[
+                  DBState.db.characters[$selectedCharID].chatPage
+                ].hypaV3Data = {
+                  summaries: [],
+                  lastSelectedSummaries: [],
+                };
+              } else {
+                showHypaV3Alert();
               }
             }}
           >
             <Trash2Icon size={24} />
           </button>
+
           <!-- Close Button -->
           <button
-            class="p-2 hover:text-red-500 transition-colors"
+            class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
             onclick={() => {
               alertStore.set({
                 type: "none",
@@ -67,168 +390,233 @@
           </button>
         </div>
       </div>
-      <div class="flex flex-col gap-4 w-full overflow-y-auto">
-        {#each DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data.summaries as summary, i}
-          <div
-            class="flex flex-col p-4 rounded-md border-darkborderc border bg-bgcolor"
-          >
-            <!-- Summary Area -->
-            <div class="mb-4">
+
+      <!-- Summaries List -->
+      <div class="flex flex-col gap-3 w-full overflow-y-auto">
+        {#if hypaV3DataState.summaries.length === 0}
+          <span class="text-textcolor2 text-center p-4">No summaries yet</span>
+        {/if}
+
+        {#each hypaV3DataState.summaries as summary, i}
+          {#if summaryUIStates[i]}
+            <div
+              class="flex flex-col p-4 rounded-lg border border-zinc-700 bg-zinc-800/50"
+            >
+              <!-- Summary Header -->
               <div class="flex justify-between items-center mb-2">
                 <span class="text-sm text-textcolor2">Summary #{i + 1}</span>
                 <div class="flex items-center gap-4">
+                  <!-- Translate Button -->
+                  <button
+                    class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                    use:handleDualAction={{
+                      onMainAction: () => toggleTranslate(i, false),
+                      onAlternativeAction: () => toggleTranslate(i, true),
+                    }}
+                  >
+                    <LanguagesIcon size={16} />
+                  </button>
+
                   <!-- Important Button -->
                   <button
-                    class="p-1 hover:text-yellow-500 transition-colors {summary.isImportant
+                    class="p-2 hover:text-zinc-200 hover:text-amber-300 transition-colors {summary.isImportant
                       ? 'text-yellow-500'
-                      : 'text-textcolor2'}"
+                      : 'text-zinc-400'}"
                     onclick={() => {
                       summary.isImportant = !summary.isImportant;
                     }}
                   >
                     <StarIcon size={16} />
                   </button>
-                  <!-- Resummarize Button -->
+
+                  <!-- Reroll Button -->
                   <button
-                    class="p-1 hover:text-blue-500 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-                    onclick={async () => {
-                      hypaV3IsResummarizing = true;
-
-                      try {
-                        const char = DBState.db.characters[$selectedCharID];
-                        const chat =
-                          char.chats[
-                            DBState.db.characters[$selectedCharID].chatPage
-                          ];
-                        const firstMessage =
-                          chat.fmIndex === -1
-                            ? char.firstMessage
-                            : char.alternateGreetings?.[chat.fmIndex ?? 0];
-                        const toSummarize = summary.chatMemos.map(
-                          (chatMemo) => {
-                            if (chatMemo == null) {
-                              return {
-                                role: "assistant",
-                                data: firstMessage,
-                              };
-                            }
-
-                            const msg = chat.message.find(
-                              (m) => m.chatId === chatMemo
-                            );
-                            return msg
-                              ? {
-                                  role:
-                                    msg.role === "char"
-                                      ? "assistant"
-                                      : msg.role,
-                                  data: msg.data,
-                                }
-                              : null;
-                          }
-                        );
-                        const stringifiedChats = toSummarize
-                          .map((m) => `${m.role}: ${m.data}`)
-                          .join("\n");
-                        const summarizeResult =
-                          await summarize(stringifiedChats);
-
-                        if (summarizeResult.success) {
-                          summary.text = summarizeResult.data;
-                        }
-                      } finally {
-                        hypaV3IsResummarizing = false;
-                      }
-                    }}
-                    disabled={hypaV3IsResummarizing}
+                    class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                    onclick={async () => await toggleReroll(i)}
+                    disabled={!isRerollable(i)}
                   >
                     <RefreshCw size={16} />
                   </button>
                 </div>
               </div>
-              <!-- Editable Summary -->
-              <TextAreaInput bind:value={summary.text} className="bg-darkbg" />
-            </div>
 
-            <!-- Connected Messages -->
-            <div class="mt-2">
-              <span class="text-sm text-textcolor2 mb-2 block">
-                Connected Messages ({summary.chatMemos.length})
-              </span>
-              <div class="flex flex-col gap-2">
-                <!-- Message ID -->
+              <!-- Original Summary -->
+              <TextAreaInput
+                bind:value={summary.text}
+                className="w-full bg-zinc-900 text-zinc-200 rounded-md p-3 min-h-[100px] resize-y"
+              />
+
+              <!-- Translation (if exists) -->
+              {#if summaryUIStates[i].translation}
+                <div class="mt-4">
+                  <span class="text-sm text-textcolor2 mb-2 block"
+                    >Translation</span
+                  >
+                  <div
+                    class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                  >
+                    {summaryUIStates[i].translation}
+                  </div>
+                </div>
+              {/if}
+
+              <!-- Rerolled Summary (if exists) -->
+              {#if summaryUIStates[i].rerolledText}
+                <div class="mt-4">
+                  <div class="flex justify-between items-center mb-2">
+                    <span class="text-sm text-textcolor2">Rerolled Summary</span
+                    >
+                    <div class="flex items-center gap-2">
+                      <!-- Translate Rerolled Button -->
+                      <button
+                        class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                        use:handleDualAction={{
+                          onMainAction: () => toggleTranslateRerolled(i, false),
+                          onAlternativeAction: () =>
+                            toggleTranslateRerolled(i, true),
+                        }}
+                      >
+                        <LanguagesIcon size={16} />
+                      </button>
+
+                      <!-- Cancel Button -->
+                      <button
+                        class="p-2 text-zinc-400 hover:text-zinc-200 hover:text-rose-300 transition-colors"
+                        onclick={() => {
+                          summaryUIStates[i].rerolledText = null;
+                          summaryUIStates[i].rerolledTranslation = null;
+                        }}
+                      >
+                        <XIcon size={16} />
+                      </button>
+
+                      <!-- Apply Button -->
+                      <button
+                        class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                        onclick={() => {
+                          summary.text = summaryUIStates[i].rerolledText!;
+                          summaryUIStates[i].translation = null;
+                          summaryUIStates[i].rerolledText = null;
+                          summaryUIStates[i].rerolledTranslation = null;
+                        }}
+                      >
+                        <CheckIcon size={16} />
+                      </button>
+                    </div>
+                  </div>
+                  <TextAreaInput
+                    bind:value={summaryUIStates[i].rerolledText}
+                    className="w-full bg-zinc-900 text-zinc-200 rounded-md p-3 min-h-[100px] resize-y"
+                  />
+
+                  <!-- Rerolled Translation (if exists) -->
+                  {#if summaryUIStates[i].rerolledTranslation}
+                    <div class="mt-4">
+                      <span class="text-sm text-textcolor2 mb-2 block"
+                        >Rerolled Translation</span
+                      >
+                      <div
+                        class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                      >
+                        {summaryUIStates[i].rerolledTranslation}
+                      </div>
+                    </div>
+                  {/if}
+                </div>
+              {/if}
+
+              <!-- Connected Messages -->
+              <div class="mt-4">
+                <div class="flex justify-between items-center mb-2">
+                  <span class="text-sm text-textcolor2">
+                    Connected Messages ({summary.chatMemos.length})
+                  </span>
+                  <!-- Translate Message Button -->
+                  <button
+                    class="p-2 text-zinc-400 hover:text-zinc-200 transition-colors"
+                    use:handleDualAction={{
+                      onMainAction: () => toggleTranslateExpandedMessage(false),
+                      onAlternativeAction: () =>
+                        toggleTranslateExpandedMessage(true),
+                    }}
+                  >
+                    <LanguagesIcon size={16} />
+                  </button>
+                </div>
+
+                <!-- Message IDs -->
                 <div class="flex flex-wrap gap-1">
                   {#each summary.chatMemos as chatMemo}
                     <button
-                      class="text-xs px-2 py-1 bg-darkbg rounded-full text-textcolor2 hover:bg-opacity-80 cursor-pointer {hypaV3ExpandedChatMemo.summaryChatMemos ===
-                        summary.chatMemos &&
-                      hypaV3ExpandedChatMemo.summaryChatMemo === chatMemo
+                      class="text-xs px-3 py-1.5 bg-zinc-900 text-zinc-300 rounded-full hover:bg-zinc-800 transition-colors {isMessageExpanded(
+                        i,
+                        chatMemo
+                      )
                         ? 'ring-1 ring-blue-500'
                         : ''}"
-                      onclick={() => {
-                        hypaV3ExpandedChatMemo =
-                          hypaV3ExpandedChatMemo.summaryChatMemos ===
-                            summary.chatMemos &&
-                          hypaV3ExpandedChatMemo.summaryChatMemo === chatMemo
-                            ? { summaryChatMemos: [], summaryChatMemo: "" }
-                            : {
-                                summaryChatMemos: summary.chatMemos,
-                                summaryChatMemo: chatMemo,
-                              };
-                      }}
+                      onclick={() => toggleExpandMessage(i, chatMemo)}
                     >
                       {chatMemo == null ? "First Message" : chatMemo}
                     </button>
                   {/each}
                 </div>
 
-                <!-- Message Content Area -->
-                {#if hypaV3ExpandedChatMemo.summaryChatMemos === summary.chatMemos && hypaV3ExpandedChatMemo.summaryChatMemo !== ""}
-                  <div
-                    class="text-sm bg-darkbg/50 rounded border border-darkborderc"
-                  >
-                    <div
-                      class="p-2 max-h-48 overflow-y-auto"
-                      style="white-space: pre-wrap;"
-                    >
-                      {(() => {
-                        const char = DBState.db.characters[$selectedCharID];
-                        const chat =
-                          char.chats[
-                            DBState.db.characters[$selectedCharID].chatPage
-                          ];
-                        const firstMessage =
-                          chat.fmIndex === -1
-                            ? char.firstMessage
-                            : char.alternateGreetings?.[chat.fmIndex ?? 0];
-                        const targetMessage =
-                          hypaV3ExpandedChatMemo.summaryChatMemo == null
-                            ? { role: "char", data: firstMessage }
-                            : chat.message.find(
-                                (m) =>
-                                  m.chatId ===
-                                  hypaV3ExpandedChatMemo.summaryChatMemo
-                              );
+                <!-- Selected Message Content -->
+                {#if expandedMessageUIState?.summaryIndex === i}
+                  {@const message = getMessageFromChatMemo(
+                    expandedMessageUIState.selectedChatMemo
+                  )}
+                  <div class="mt-4">
+                    {#if message}
+                      <!-- Role -->
+                      <div class="text-sm text-textcolor2 mb-2 block">
+                        {message.role}'s Message
+                      </div>
+                      <!-- Content -->
+                      <div
+                        class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                      >
+                        {message.data}
+                      </div>
+                    {:else}
+                      <div class="text-sm text-red-500">Message not found</div>
+                    {/if}
 
-                        if (targetMessage) {
-                          const displayRole =
-                            targetMessage.role === "char"
-                              ? char.name
-                              : targetMessage.role;
-                          return `${displayRole}:\n${targetMessage.data}`;
-                        }
-
-                        return "Message not found";
-                      })()}
-                    </div>
+                    <!-- Message Translation -->
+                    {#if expandedMessageUIState.translation}
+                      <div class="mt-4">
+                        <span class="text-sm text-textcolor2 mb-2 block"
+                          >Translation</span
+                        >
+                        <div
+                          class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+                        >
+                          {expandedMessageUIState.translation}
+                        </div>
+                      </div>
+                    {/if}
                   </div>
                 {/if}
               </div>
             </div>
-          </div>
+          {/if}
         {/each}
-        {#if DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data.summaries.length === 0}
-          <span class="text-textcolor2 text-center p-4">No summaries yet</span>
+
+        {#if true}
+          <!-- Next message to summarize -->
+          {@const nextMessage = getNextMessageToSummarize()}
+          {#if nextMessage}
+            <div class="mt-4">
+              <span class="text-sm text-textcolor2 mb-2 block">
+                HypaV3 will summarize [{nextMessage.chatId}]
+              </span>
+              <div
+                class="p-2 max-h-48 overflow-y-auto bg-zinc-800 rounded-md whitespace-pre-wrap"
+              >
+                {nextMessage.data}
+              </div>
+            </div>
+          {/if}
         {/if}
       </div>
     </div>
diff --git a/src/lib/Setting/Pages/OtherBotSettings.svelte b/src/lib/Setting/Pages/OtherBotSettings.svelte
index 086e234a..8259f29b 100644
--- a/src/lib/Setting/Pages/OtherBotSettings.svelte
+++ b/src/lib/Setting/Pages/OtherBotSettings.svelte
@@ -15,8 +15,9 @@
     import { getCharImage } from "src/ts/characters";
     import Arcodion from "src/lib/UI/Arcodion.svelte";
     import CheckInput from "src/lib/UI/GUI/CheckInput.svelte";
-  import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
-  import { hypaMemoryV3 } from "src/ts/process/memory/hypav3";
+    import TextAreaInput from "src/lib/UI/GUI/TextAreaInput.svelte";
+    import { untrack } from "svelte";
+
     $effect.pre(() => {
         DBState.db.NAIImgConfig ??= {
             width: 512,
@@ -40,6 +41,32 @@
     });
 
     let submenu = $state(DBState.db.useLegacyGUI ? -1 : 0)
+
+    // HypaV3
+    $effect(() => {
+        const newValue = Math.min(DBState.db.hypaV3Settings.recentMemoryRatio, 1);
+
+        untrack(() => {
+            DBState.db.hypaV3Settings.recentMemoryRatio = newValue;
+            
+            if (newValue + DBState.db.hypaV3Settings.similarMemoryRatio > 1) {
+                DBState.db.hypaV3Settings.similarMemoryRatio = 1 - newValue;
+            }
+        })
+    })
+
+    $effect(() => {
+        const newValue = Math.min(DBState.db.hypaV3Settings.similarMemoryRatio, 1);
+
+        untrack(() => {
+            DBState.db.hypaV3Settings.similarMemoryRatio = newValue;
+
+            if (newValue + DBState.db.hypaV3Settings.recentMemoryRatio > 1) {
+                DBState.db.hypaV3Settings.recentMemoryRatio = 1 - newValue;
+            }
+        })
+    });
+    // End HypaV3
 </script>
 <h2 class="mb-2 text-2xl font-bold mt-2">{language.otherBots}</h2>
 
@@ -467,31 +494,31 @@
                 <OptionInput value="instruct35">OpenAI 3.5 Turbo Instruct</OptionInput>
                 <OptionInput value="subModel">{language.submodel}</OptionInput>
             </SelectInput>
-            {#if DBState.db.supaModelType === 'instruct35'}
+            {#if DBState.db.supaModelType === "instruct35"}
                 <span class="text-textcolor">OpenAI API Key</span>
-                <TextInput size="sm" marginBottom bind:value={DBState.db.supaMemoryKey}/>
+                <TextInput marginBottom size="sm" bind:value={DBState.db.supaMemoryKey} />
             {/if}
             <span class="text-textcolor">{language.summarizationPrompt} <Help key="summarizationPrompt"/></span>
             <div class="mb-2">
-            <TextAreaInput size="sm" bind:value={DBState.db.supaMemoryPrompt} placeholder="Leave it blank to use default"/>
+                <TextAreaInput size="sm" placeholder="Leave it blank to use default" bind:value={DBState.db.supaMemoryPrompt} />
             </div> 
             <span class="text-textcolor">Memory Tokens Ratio</span>
-            <SliderInput marginBottom min={0} max={1} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.memoryTokensRatio}/>
+            <SliderInput marginBottom min={0} max={1} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.memoryTokensRatio} />
             <span class="text-textcolor">Extra Summarization Ratio</span>
-            <SliderInput marginBottom min={0} max={1 - DBState.db.hypaV3Settings.memoryTokensRatio} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.extraSummarizationRatio}/>
+            <SliderInput marginBottom min={0} max={1 - DBState.db.hypaV3Settings.memoryTokensRatio} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.extraSummarizationRatio} />
             <span class="text-textcolor">Max Chats Per Summary</span>
-            <NumberInput size="sm" marginBottom bind:value={DBState.db.hypaV3Settings.maxChatsPerSummary} min={1} />
+            <NumberInput marginBottom size="sm" min={1} bind:value={DBState.db.hypaV3Settings.maxChatsPerSummary} />
             <span class="text-textcolor">Recent Memory Ratio</span>
-            <SliderInput marginBottom min={0} max={1} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.recentMemoryRatio}/>
+            <SliderInput marginBottom min={0} max={1} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.recentMemoryRatio} />
             <span class="text-textcolor">Similar Memory Ratio</span>
-            <SliderInput marginBottom min={0} max={1 - DBState.db.hypaV3Settings.recentMemoryRatio} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.similarMemoryRatio}/>
+            <SliderInput marginBottom min={0} max={1} step={0.01} fixed={2} bind:value={DBState.db.hypaV3Settings.similarMemoryRatio} />
             <span class="text-textcolor">Random Memory Ratio</span>
-            <NumberInput size="sm" marginBottom value={parseFloat((1 - DBState.db.hypaV3Settings.recentMemoryRatio - DBState.db.hypaV3Settings.similarMemoryRatio).toFixed(2))} disabled/>
+            <NumberInput marginBottom disabled size="sm" value={parseFloat((1 - DBState.db.hypaV3Settings.recentMemoryRatio - DBState.db.hypaV3Settings.similarMemoryRatio).toFixed(2))} />
             <div class="flex mb-2">
-                <Check bind:check={DBState.db.hypaV3Settings.enableSimilarityCorrection} name="Enable Similarity Correction"/>
+                <Check name="Enable Similarity Correction" bind:check={DBState.db.hypaV3Settings.enableSimilarityCorrection} />
             </div>
             <div class="flex mb-2">
-                <Check bind:check={DBState.db.hypaV3Settings.preserveOrphanedMemory} name="Preserve Orphaned Memory"/>
+                <Check name="Preserve Orphaned Memory" bind:check={DBState.db.hypaV3Settings.preserveOrphanedMemory} />
             </div>        
         {:else if (DBState.db.supaModelType !== 'none' && DBState.db.hypav2 === false && DBState.db.hypaV3 === false)}
             <span class="mb-2 text-textcolor2 text-sm text-wrap break-words max-w-full">{language.supaDesc}</span>
diff --git a/src/lib/SideBars/CharConfig.svelte b/src/lib/SideBars/CharConfig.svelte
index fccb78db..93a4c98a 100644
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -1113,6 +1113,7 @@
                 onclick={() => {
                     DBState.db.characters[$selectedCharID].chats[DBState.db.characters[$selectedCharID].chatPage].hypaV3Data ??= {
                         summaries: [],
+                        lastSelectedSummaries: [],
                     }
                     showHypaV3Alert()
                 }}
diff --git a/src/ts/process/memory/hypav3.ts b/src/ts/process/memory/hypav3.ts
index 4786c1bf..91bef8d6 100644
--- a/src/ts/process/memory/hypav3.ts
+++ b/src/ts/process/memory/hypav3.ts
@@ -24,6 +24,7 @@ interface Summary {
 
 interface HypaV3Data {
   summaries: Summary[];
+  lastSelectedSummaries?: number[];
 }
 
 export interface SerializableHypaV3Data {
@@ -32,6 +33,7 @@ export interface SerializableHypaV3Data {
     chatMemos: string[];
     isImportant: boolean;
   }[];
+  lastSelectedSummaries?: number[];
 }
 
 interface SummaryChunk {
@@ -39,6 +41,10 @@ interface SummaryChunk {
   summary: Summary;
 }
 
+const minChatsForSimilarity = 3;
+const maxSummarizationFailures = 3;
+const summarySeparator = "\n\n";
+
 // Helper function to check if one Set is a subset of another
 function isSubset(subset: Set<string>, superset: Set<string>): boolean {
   for (const elem of subset) {
@@ -51,6 +57,7 @@ function isSubset(subset: Set<string>, superset: Set<string>): boolean {
 
 function toSerializableHypaV3Data(data: HypaV3Data): SerializableHypaV3Data {
   return {
+    ...data,
     summaries: data.summaries.map((summary) => ({
       ...summary,
       chatMemos: [...summary.chatMemos],
@@ -60,6 +67,7 @@ function toSerializableHypaV3Data(data: HypaV3Data): SerializableHypaV3Data {
 
 function toHypaV3Data(serialData: SerializableHypaV3Data): HypaV3Data {
   return {
+    ...serialData,
     summaries: serialData.summaries.map((summary) => ({
       ...summary,
       // Convert null back to undefined (JSON serialization converts undefined to null)
@@ -87,14 +95,17 @@ function cleanOrphanedSummary(chats: OpenAIChat[], data: HypaV3Data): void {
   const removedCount = originalLength - data.summaries.length;
 
   if (removedCount > 0) {
-    console.log(`[HypaV3] Cleaned ${removedCount} orphaned summaries`);
+    console.log(`[HypaV3] Cleaned ${removedCount} orphaned summaries.`);
   }
 }
 
 export async function summarize(
-  stringifiedChats: string
+  oaiChats: OpenAIChat[]
 ): Promise<{ success: boolean; data: string }> {
   const db = getDatabase();
+  const stringifiedChats = oaiChats
+    .map((chat) => `${chat.role}: ${chat.content}`)
+    .join("\n");
 
   if (db.supaModelType === "distilbart") {
     try {
@@ -103,7 +114,7 @@ export async function summarize(
     } catch (error) {
       return {
         success: false,
-        data: "[HypaV3] " + error,
+        data: error,
       };
     }
   }
@@ -116,7 +127,7 @@ export async function summarize(
   switch (db.supaModelType) {
     case "instruct35": {
       console.log(
-        "[HypaV3] Using openAI gpt-3.5-turbo-instruct for summarization"
+        "[HypaV3] Using openAI gpt-3.5-turbo-instruct for summarization."
       );
 
       const requestPrompt = `${stringifiedChats}\n\n${summarizePrompt}\n\nOutput:`;
@@ -165,7 +176,7 @@ export async function summarize(
     }
 
     case "subModel": {
-      console.log(`[HypaV3] Using ax model ${db.subModel} for summarization`);
+      console.log(`[HypaV3] Using ax model ${db.subModel} for summarization.`);
 
       const requestMessages: OpenAIChat[] = parseChatML(
         summarizePrompt.replaceAll("{{slot}}", stringifiedChats)
@@ -190,14 +201,17 @@ export async function summarize(
         "memory"
       );
 
-      if (
-        response.type === "fail" ||
-        response.type === "streaming" ||
-        response.type === "multiline"
-      ) {
+      if (response.type === "streaming" || response.type === "multiline") {
         return {
           success: false,
-          data: "Unexpected response type",
+          data: "unexpected response type",
+        };
+      }
+
+      if (response.type === "fail") {
+        return {
+          success: false,
+          data: response.result,
         };
       }
 
@@ -207,12 +221,43 @@ export async function summarize(
     default: {
       return {
         success: false,
-        data: `Unsupported model ${db.supaModelType} for summarization`,
+        data: `unsupported model ${db.supaModelType} for summarization`,
       };
     }
   }
 }
 
+async function retryableSummarize(
+  oaiChats: OpenAIChat[]
+): Promise<{ success: boolean; data: string }> {
+  let summarizationFailures = 0;
+
+  while (summarizationFailures < maxSummarizationFailures) {
+    console.log(
+      "[HypaV3] Attempting summarization:",
+      "\nAttempt:",
+      summarizationFailures + 1,
+      "\nTarget:",
+      oaiChats
+    );
+
+    const summarizeResult = await summarize(oaiChats);
+
+    if (!summarizeResult.success) {
+      console.log("[HypaV3] Summarization failed:", summarizeResult.data);
+      summarizationFailures++;
+
+      if (summarizationFailures >= maxSummarizationFailures) {
+        return summarizeResult;
+      }
+
+      continue;
+    }
+
+    return summarizeResult;
+  }
+}
+
 export async function hypaMemoryV3(
   chats: OpenAIChat[],
   currentTokens: number,
@@ -226,9 +271,6 @@ export async function hypaMemoryV3(
   error?: string;
   memory?: SerializableHypaV3Data;
 }> {
-  const minChatsForSimilarity = 3;
-  const maxSummarizationFailures = 3;
-  const summarySeparator = "\n\n";
   const db = getDatabase();
 
   // Validate settings
@@ -250,6 +292,7 @@ export async function hypaMemoryV3(
   // Load existing hypa data if available
   let data: HypaV3Data = {
     summaries: [],
+    lastSelectedSummaries: [],
   };
 
   if (room.hypaV3Data) {
@@ -360,8 +403,8 @@ export async function hypaMemoryV3(
         i,
         "\nRole:",
         chat.role,
-        "\nContent:\n",
-        chat.content,
+        "\nContent:",
+        "\n" + chat.content,
         "\nTokens:",
         chatTokens
       );
@@ -387,53 +430,29 @@ export async function hypaMemoryV3(
       currentTokens - toSummarizeTokens < targetTokens
     ) {
       console.log(
-        `[HypaV3] Stopping summarization: would reduce below target tokens (${currentTokens} - ${toSummarizeTokens} < ${targetTokens})`
+        `[HypaV3] Stopping summarization: currentTokens(${currentTokens}) - toSummarizeTokens(${toSummarizeTokens}) < targetTokens(${targetTokens})`
       );
       break;
     }
 
     // Attempt summarization
-    let summarizationFailures = 0;
-    const stringifiedChats = toSummarize
-      .map((chat) => `${chat.role}: ${chat.content}`)
-      .join("\n");
+    const summarizeResult = await retryableSummarize(toSummarize);
 
-    while (summarizationFailures < maxSummarizationFailures) {
-      console.log(
-        "[HypaV3] Attempting summarization:",
-        "\nAttempt:",
-        summarizationFailures + 1,
-        "\nTarget:",
-        toSummarize
-      );
-
-      const summarizeResult = await summarize(stringifiedChats);
-
-      if (!summarizeResult.success) {
-        console.log("[HypaV3] Summarization failed:", summarizeResult.data);
-        summarizationFailures++;
-
-        if (summarizationFailures >= maxSummarizationFailures) {
-          return {
-            currentTokens,
-            chats,
-            error: "[HypaV3] Summarization failed after maximum retries",
-            memory: toSerializableHypaV3Data(data),
-          };
-        }
-
-        continue;
-      }
-
-      data.summaries.push({
-        text: summarizeResult.data,
-        chatMemos: new Set(toSummarize.map((chat) => chat.memo)),
-        isImportant: false,
-      });
-
-      break;
+    if (!summarizeResult.success) {
+      return {
+        currentTokens,
+        chats,
+        error: `[HypaV3] Summarization failed after maximum retries: ${summarizeResult.data}`,
+        memory: toSerializableHypaV3Data(data),
+      };
     }
 
+    data.summaries.push({
+      text: summarizeResult.data,
+      chatMemos: new Set(toSummarize.map((chat) => chat.memo)),
+      isImportant: false,
+    });
+
     currentTokens -= toSummarizeTokens;
     startIdx = endIdx;
   }
@@ -529,9 +548,9 @@ export async function hypaMemoryV3(
       selectedRecentSummaries.length,
       "\nSummaries:",
       selectedRecentSummaries,
-      "\nReserved Recent Memory Tokens:",
+      "\nReserved Tokens:",
       reservedRecentMemoryTokens,
-      "\nConsumed Recent Memory Tokens:",
+      "\nConsumed Tokens:",
       consumedRecentMemoryTokens
     );
   }
@@ -608,56 +627,33 @@ export async function hypaMemoryV3(
 
     // (2) Summarized recent chat search
     if (db.hypaV3Settings.enableSimilarityCorrection) {
-      let summarizationFailures = 0;
+      // Attempt summarization
       const recentChats = chats.slice(-minChatsForSimilarity);
-      const stringifiedRecentChats = recentChats
-        .map((chat) => `${chat.role}: ${chat.content}`)
-        .join("\n");
+      const summarizeResult = await retryableSummarize(recentChats);
 
-      while (summarizationFailures < maxSummarizationFailures) {
-        console.log(
-          "[HypaV3] Attempting summarization:",
-          "\nAttempt:",
-          summarizationFailures + 1,
-          "\nTarget:",
-          recentChats
-        );
-
-        const summarizeResult = await summarize(stringifiedRecentChats);
-
-        if (!summarizeResult.success) {
-          console.log("[HypaV3] Summarization failed:", summarizeResult.data);
-          summarizationFailures++;
-
-          if (summarizationFailures >= maxSummarizationFailures) {
-            return {
-              currentTokens,
-              chats,
-              error: "[HypaV3] Summarization failed after maximum retries",
-              memory: toSerializableHypaV3Data(data),
-            };
-          }
-
-          continue;
-        }
-
-        const searched = await processor.similaritySearchScoredEx(
-          summarizeResult.data
-        );
-
-        for (const [chunk, similarity] of searched) {
-          const summary = chunk.summary;
-
-          scoredSummaries.set(
-            summary,
-            (scoredSummaries.get(summary) || 0) + similarity
-          );
-        }
-
-        console.log("[HypaV3] Similarity corrected");
-
-        break;
+      if (!summarizeResult.success) {
+        return {
+          currentTokens,
+          chats,
+          error: `[HypaV3] Summarization failed after maximum retries: ${summarizeResult.data}`,
+          memory: toSerializableHypaV3Data(data),
+        };
       }
+
+      const searched = await processor.similaritySearchScoredEx(
+        summarizeResult.data
+      );
+
+      for (const [chunk, similarity] of searched) {
+        const summary = chunk.summary;
+
+        scoredSummaries.set(
+          summary,
+          (scoredSummaries.get(summary) || 0) + similarity
+        );
+      }
+
+      console.log("[HypaV3] Similarity corrected.");
     }
 
     // Sort in descending order
@@ -677,6 +673,8 @@ export async function hypaMemoryV3(
         "[HypaV3] Trying to add similar summary:",
         "\nSummary Tokens:",
         summaryTokens,
+        "\nConsumed Similar Memory Tokens:",
+        consumedSimilarMemoryTokens,
         "\nReserved Tokens:",
         reservedSimilarMemoryTokens,
         "\nWould exceed:",
@@ -689,7 +687,7 @@ export async function hypaMemoryV3(
         reservedSimilarMemoryTokens
       ) {
         console.log(
-          `[HypaV3] Stopping similar memory selection: would exceed reserved tokens (${consumedSimilarMemoryTokens} + ${summaryTokens} > ${reservedSimilarMemoryTokens})`
+          `[HypaV3] Stopping similar memory selection: consumedSimilarMemoryTokens(${consumedSimilarMemoryTokens}) + summaryTokens(${summaryTokens}) > reservedSimilarMemoryTokens(${reservedSimilarMemoryTokens})`
         );
         break;
       }
@@ -706,9 +704,9 @@ export async function hypaMemoryV3(
       selectedSimilarSummaries.length,
       "\nSummaries:",
       selectedSimilarSummaries,
-      "\nReserved Similar Memory Tokens:",
+      "\nReserved Tokens:",
       reservedSimilarMemoryTokens,
-      "\nConsumed Similar Memory Tokens:",
+      "\nConsumed Tokens:",
       consumedSimilarMemoryTokens
     );
   }
@@ -770,9 +768,9 @@ export async function hypaMemoryV3(
       selectedRandomSummaries.length,
       "\nSummaries:",
       selectedRandomSummaries,
-      "\nReserved Random Memory Tokens:",
+      "\nReserved Tokens:",
       reservedRandomMemoryTokens,
-      "\nConsumed Random Memory Tokens:",
+      "\nConsumed Tokens:",
       consumedRandomMemoryTokens
     );
   }
@@ -814,10 +812,15 @@ export async function hypaMemoryV3(
 
   if (currentTokens > maxContextTokens) {
     throw new Error(
-      `[HypaV3] Unexpected input token count:\nCurrent Tokens:${currentTokens}\nMax Context Tokens:${maxContextTokens}`
+      `[HypaV3] Unexpected error: input token count (${currentTokens}) exceeds max context size (${maxContextTokens})`
     );
   }
 
+  // Save last selected summaries
+  data.lastSelectedSummaries = selectedSummaries.map((selectedSummary) =>
+    data.summaries.findIndex((summary) => summary === selectedSummary)
+  );
+
   const newChats: OpenAIChat[] = [
     {
       role: "system",
@@ -854,7 +857,7 @@ class HypaProcesserEx extends HypaProcesser {
   summaryChunkVectors: SummaryChunkVector[] = [];
 
   // Calculate dot product similarity between two vectors
-  similarity(a: VectorArray, b: VectorArray) {
+  similarity(a: VectorArray, b: VectorArray): number {
     let dot = 0;
 
     for (let i = 0; i < a.length; i++) {
@@ -864,7 +867,7 @@ class HypaProcesserEx extends HypaProcesser {
     return dot;
   }
 
-  async addSummaryChunks(chunks: SummaryChunk[]) {
+  async addSummaryChunks(chunks: SummaryChunk[]): Promise<void> {
     // Maintain the superclass's caching structure by adding texts
     const texts = chunks.map((chunk) => chunk.text);