diff --git a/src/lib/Others/AlertComp.svelte b/src/lib/Others/AlertComp.svelte
index 64abbdc5..1a8580d8 100644
--- a/src/lib/Others/AlertComp.svelte
+++ b/src/lib/Others/AlertComp.svelte
@@ -1,16 +1,16 @@
 <script lang="ts">
-    import { alertGenerationInfoStore, alertConfirm } from "../../ts/alert";
+    import { alertGenerationInfoStore } from "../../ts/alert";
     
     import { DBState } from 'src/ts/stores.svelte';
     import { getCharImage } from '../../ts/characters';
     import { ParseMarkdown } from '../../ts/parser.svelte';
     import BarIcon from '../SideBars/BarIcon.svelte';
-    import { ChevronRightIcon, User, RefreshCw, StarIcon } from 'lucide-svelte';
+    import { ChevronRightIcon, User } from 'lucide-svelte';
     import { hubURL, isCharacterHasAssets } from 'src/ts/characterCards';
     import TextInput from '../UI/GUI/TextInput.svelte';
     import { openURL } from 'src/ts/globalApi.svelte';
     import Button from '../UI/GUI/Button.svelte';
-    import { XIcon, Trash2Icon } from "lucide-svelte";
+    import { XIcon } from "lucide-svelte";
     import SelectInput from "../UI/GUI/SelectInput.svelte";
     import OptionInput from "../UI/GUI/OptionInput.svelte";
     import { language } from 'src/lang';
@@ -24,7 +24,7 @@
     import { getChatBranches } from "src/ts/gui/branches";
   import { getCurrentCharacter } from "src/ts/storage/database.svelte";
   import { message } from "@tauri-apps/plugin-dialog";
-  import { summarize as hypaV3Summarize } from "src/ts/process/memory/hypav3";
+  import HypaV3Modal from './HypaV3Modal.svelte';
     let btn
     let input = $state('')
     let cardExportType = $state('realm')
@@ -68,12 +68,6 @@
     let {
         onclick
     }:Props = $props()
-
-    let hypaV3IsResummarizing = $state(false)
-    let hypaV3ExpandedChatMemo = $state<{summaryChatMemos: string[], summaryChatMemo: string}>({
-        summaryChatMemos: [],
-        summaryChatMemo: ""
-    })
 </script>
 
 <svelte:window onmessage={async (e) => {
@@ -324,160 +318,7 @@
                     {/each}
                 {/if}
             {:else if $alertStore.type === "hypaV3"}
-                <div class="fixed inset-0 z-50 bg-black bg-opacity-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" : "max-h-full"}">
-                            <div class="flex justify-between items-center w-full mb-4">
-                                <h1 class="text-xl font-bold">HypaV3 Data</h1>
-                                <div class="flex items-center gap-2">
-                                    <!-- Reset Button -->
-                                    <button class="p-2 hover:text-red-500 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("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: []
-                                                }
-                                            }
-                                        }
-                                    }}>
-                                        <Trash2Icon size={24}/>
-                                    </button>
-                                    <!-- Close Button -->
-                                    <button class="p-2 hover:text-red-500 transition-colors" onclick={() => {
-                                        alertStore.set({
-                                            type: "none",
-                                            msg: ""
-                                        })
-                                    }}>
-                                        <XIcon size={24}/>
-                                    </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">
-                                            <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">
-                                                    <!-- Important Button -->
-                                                    <button 
-                                                        class="p-1 hover:text-yellow-500 transition-colors {summary.isImportant ? "text-yellow-500" : "text-textcolor2"}"
-                                                        onclick={() => {
-                                                            summary.isImportant = !summary.isImportant
-                                                        }}
-                                                    >
-                                                        <StarIcon size={16}/>
-                                                    </button>
-                                                    <!-- Resummarize 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 hypaV3Summarize(stringifiedChats)
-                                                                
-                                                                if (summarizeResult.success) {
-                                                                    summary.text = summarizeResult.data
-                                                                }
-                                                            } finally {
-                                                                hypaV3IsResummarizing = false
-                                                            }
-                                                        }}
-                                                        disabled={hypaV3IsResummarizing}
-                                                    >
-                                                        <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 -->
-                                                <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 ? "ring-1 ring-blue-500" : ""
-                                                            }"
-                                                            onclick={() => {
-                                                                hypaV3ExpandedChatMemo = hypaV3ExpandedChatMemo.summaryChatMemos === summary.chatMemos && hypaV3ExpandedChatMemo.summaryChatMemo === chatMemo 
-                                                                    ? { summaryChatMemos: [], summaryChatMemo: "" }
-                                                                    : { summaryChatMemos: summary.chatMemos, summaryChatMemo: 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)
-                                                                
-                                                                if (targetMessage) {
-                                                                    const displayRole = targetMessage.role === "char" ? char.name : targetMessage.role
-                                                                    return `${displayRole}:\n${targetMessage.data}`
-                                                                }
-
-                                                                return "Message not found"
-                                                            })()}
-                                                        </div>
-                                                    </div>
-                                                {/if}
-                                            </div>
-                                        </div>
-                                    </div>
-                                {/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}
-                            </div>
-                        </div>
-                    </div>
-                </div>
+                <HypaV3Modal />
             {:else if $alertStore.type === 'addchar'}
                 <div class="w-2xl flex flex-col max-w-full">
 
diff --git a/src/lib/Others/HypaV3Modal.svelte b/src/lib/Others/HypaV3Modal.svelte
new file mode 100644
index 00000000..e6c6b34e
--- /dev/null
+++ b/src/lib/Others/HypaV3Modal.svelte
@@ -0,0 +1,236 @@
+<script lang="ts">
+  import { Trash2Icon, XIcon, StarIcon, RefreshCw } from "lucide-svelte";
+  import TextAreaInput from "../UI/GUI/TextAreaInput.svelte";
+  import { alertConfirm } from "../../ts/alert";
+  import { DBState, alertStore, selectedCharID } from "src/ts/stores.svelte";
+  import { summarize } from "src/ts/process/memory/hypav3";
+
+  let hypaV3IsResummarizing = $state(false);
+  let hypaV3ExpandedChatMemo = $state<{
+    summaryChatMemos: string[];
+    summaryChatMemo: string;
+  }>({
+    summaryChatMemos: [],
+    summaryChatMemo: "",
+  });
+</script>
+
+<div class="fixed inset-0 z-50 bg-black bg-opacity-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'
+        : 'max-h-full'}"
+    >
+      <div class="flex justify-between items-center w-full mb-4">
+        <h1 class="text-xl font-bold">HypaV3 Data</h1>
+        <div class="flex items-center gap-2">
+          <!-- Reset Button -->
+          <button
+            class="p-2 hover:text-red-500 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(
+                  "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: [],
+                  };
+                }
+              }
+            }}
+          >
+            <Trash2Icon size={24} />
+          </button>
+          <!-- Close Button -->
+          <button
+            class="p-2 hover:text-red-500 transition-colors"
+            onclick={() => {
+              alertStore.set({
+                type: "none",
+                msg: "",
+              });
+            }}
+          >
+            <XIcon size={24} />
+          </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">
+              <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">
+                  <!-- Important Button -->
+                  <button
+                    class="p-1 hover:text-yellow-500 transition-colors {summary.isImportant
+                      ? 'text-yellow-500'
+                      : 'text-textcolor2'}"
+                    onclick={() => {
+                      summary.isImportant = !summary.isImportant;
+                    }}
+                  >
+                    <StarIcon size={16} />
+                  </button>
+                  <!-- Resummarize 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}
+                  >
+                    <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 -->
+                <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
+                        ? 'ring-1 ring-blue-500'
+                        : ''}"
+                      onclick={() => {
+                        hypaV3ExpandedChatMemo =
+                          hypaV3ExpandedChatMemo.summaryChatMemos ===
+                            summary.chatMemos &&
+                          hypaV3ExpandedChatMemo.summaryChatMemo === chatMemo
+                            ? { summaryChatMemos: [], summaryChatMemo: "" }
+                            : {
+                                summaryChatMemos: summary.chatMemos,
+                                summaryChatMemo: 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
+                              );
+
+                        if (targetMessage) {
+                          const displayRole =
+                            targetMessage.role === "char"
+                              ? char.name
+                              : targetMessage.role;
+                          return `${displayRole}:\n${targetMessage.data}`;
+                        }
+
+                        return "Message not found";
+                      })()}
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/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}
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/ts/process/memory/hypav3.ts b/src/ts/process/memory/hypav3.ts
index b876ab39..4786c1bf 100644
--- a/src/ts/process/memory/hypav3.ts
+++ b/src/ts/process/memory/hypav3.ts
@@ -1,20 +1,20 @@
-import {
-  getDatabase,
-  type Chat,
-  type character,
-  type groupChat,
-} from "src/ts/storage/database.svelte";
 import {
   type VectorArray,
   type memoryVector,
   HypaProcesser,
 } from "./hypamemory";
-import type { OpenAIChat } from "../index.svelte";
+import {
+  type Chat,
+  type character,
+  type groupChat,
+  getDatabase,
+} from "src/ts/storage/database.svelte";
+import { type OpenAIChat } from "../index.svelte";
 import { requestChatData } from "../request";
 import { runSummarizer } from "../transformers";
 import { globalFetch } from "src/ts/globalApi.svelte";
 import { parseChatML } from "src/ts/parser.svelte";
-import type { ChatTokenizer } from "src/ts/tokenizer";
+import { type ChatTokenizer } from "src/ts/tokenizer";
 
 interface Summary {
   text: string;