diff --git a/package.json b/package.json
index cdb123f..9520656 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,5 @@
     "sass": "^1.72.0",
     "typescript": "^5.4.2"
   },
-  "resolutions": {
-    "formidable": "^3.2.5"
-  },
   "packageManager": "pnpm@8.15.4"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e5d5e73..858aea6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,9 +4,6 @@
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-overrides:
-  formidable: ^3.2.5
-
 importers:
 
   .:
@@ -180,6 +177,9 @@
       reactstrap:
         specifier: ^9.2.2
         version: 9.2.2(react-dom@18.2.0)(react@18.2.0)
+      redis:
+        specifier: ^4.6.13
+        version: 4.6.13
       sweetalert2:
         specifier: ^11.10.6
         version: 11.10.6
@@ -778,6 +778,55 @@
     resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==}
     dev: false
 
+  /@redis/bloom@1.2.0(@redis/client@1.5.14):
+    resolution: {integrity: sha512-HG2DFjYKbpNmVXsa0keLHp/3leGJz1mjh09f2RLGGLQZzSHpkmZWuwJbAvo3QcRY8p80m5+ZdXZdYOSBLlp7Cg==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.14
+    dev: false
+
+  /@redis/client@1.5.14:
+    resolution: {integrity: sha512-YGn0GqsRBFUQxklhY7v562VMOP0DcmlrHHs3IV1mFE3cbxe31IITUkqhBcIhVSI/2JqtWAJXg5mjV4aU+zD0HA==}
+    engines: {node: '>=14'}
+    dependencies:
+      cluster-key-slot: 1.1.2
+      generic-pool: 3.9.0
+      yallist: 4.0.0
+    dev: false
+
+  /@redis/graph@1.1.1(@redis/client@1.5.14):
+    resolution: {integrity: sha512-FEMTcTHZozZciLRl6GiiIB4zGm5z5F3F6a6FZCyrfxdKOhFlGkiAqlexWMBzCi4DcRoyiOsuLfW+cjlGWyExOw==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.14
+    dev: false
+
+  /@redis/json@1.0.6(@redis/client@1.5.14):
+    resolution: {integrity: sha512-rcZO3bfQbm2zPRpqo82XbW8zg4G/w4W3tI7X8Mqleq9goQjAGLL7q/1n1ZX4dXEAmORVZ4s1+uKLaUOg7LrUhw==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.14
+    dev: false
+
+  /@redis/search@1.1.6(@redis/client@1.5.14):
+    resolution: {integrity: sha512-mZXCxbTYKBQ3M2lZnEddwEAks0Kc7nauire8q20oA0oA/LoA+E/b5Y5KZn232ztPb1FkIGqo12vh3Lf+Vw5iTw==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.14
+    dev: false
+
+  /@redis/time-series@1.0.5(@redis/client@1.5.14):
+    resolution: {integrity: sha512-IFjIgTusQym2B5IZJG3XKr5llka7ey84fw/NOYqESP5WUfQs9zz1ww/9+qoz4ka/S6KcGBodzlCeZ5UImKbscg==}
+    peerDependencies:
+      '@redis/client': ^1.0.0
+    dependencies:
+      '@redis/client': 1.5.14
+    dev: false
+
   /@rollup/plugin-typescript@11.1.6(rollup@4.13.0)(tslib@2.6.2)(typescript@5.4.2):
     resolution: {integrity: sha512-R92yOmIACgYdJ7dJ97p4K69I8gg6IEHt8M7dUBxN3W6nrO8uUxX5ixl0yU/N3aZTi8WhPuICvOHXQvF6FaykAA==}
     engines: {node: '>=14.0.0'}
@@ -1417,8 +1466,8 @@
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
     dev: true
 
-  /binary-extensions@2.2.0:
-    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
+  /binary-extensions@2.3.0:
+    resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==}
     engines: {node: '>=8'}
 
   /bootstrap@5.3.3(@popperjs/core@2.11.8):
@@ -1504,8 +1553,8 @@
       '@kurkle/color': 0.3.2
     dev: false
 
-  /chokidar@3.5.3:
-    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
+  /chokidar@3.6.0:
+    resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
     dependencies:
       anymatch: 3.1.3
@@ -1540,6 +1589,11 @@
     engines: {node: '>=6'}
     dev: false
 
+  /cluster-key-slot@1.1.2:
+    resolution: {integrity: sha512-RMr0FhtfXemyinomL4hrWcYJxmX6deFdCxpJzhDttxgO1+bcCnkk+9drydLVDmAMG7NE6aN/fl4F7ucU/90gAA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
@@ -2443,6 +2497,11 @@
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: true
 
+  /generic-pool@3.9.0:
+    resolution: {integrity: sha512-hymDOu5B53XvN4QT9dBmZxPX4CWhBPPLguTZ9MMFeFa/Kg0xWVfylOVNlJji/E7yTZWFd/q9GO5TxDLq156D7g==}
+    engines: {node: '>= 4'}
+    dev: false
+
   /get-intrinsic@1.2.1:
     resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==}
     dependencies:
@@ -2682,8 +2741,8 @@
     engines: {node: '>= 4'}
     dev: true
 
-  /immutable@4.3.1:
-    resolution: {integrity: sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==}
+  /immutable@4.3.5:
+    resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
 
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
@@ -2771,7 +2830,7 @@
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
     dependencies:
-      binary-extensions: 2.2.0
+      binary-extensions: 2.3.0
 
   /is-boolean-object@1.1.2:
     resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==}
@@ -3761,6 +3820,17 @@
     dependencies:
       picomatch: 2.3.1
 
+  /redis@4.6.13:
+    resolution: {integrity: sha512-MHgkS4B+sPjCXpf+HfdetBwbRz6vCtsceTmw1pHNYJAsYxrfpOP6dz+piJWGos8wqG7qb3vj/Rrc5qOlmInUuA==}
+    dependencies:
+      '@redis/bloom': 1.2.0(@redis/client@1.5.14)
+      '@redis/client': 1.5.14
+      '@redis/graph': 1.1.1(@redis/client@1.5.14)
+      '@redis/json': 1.0.6(@redis/client@1.5.14)
+      '@redis/search': 1.1.6(@redis/client@1.5.14)
+      '@redis/time-series': 1.0.5(@redis/client@1.5.14)
+    dev: false
+
   /reflect.getprototypeof@1.0.5:
     resolution: {integrity: sha512-62wgfC8dJWrmxv44CA36pLDnP6KKl3Vhxb7PL+8+qrrFMMoJij4vgiMP8zV4O8+CBMXY1mHxI5fITGHXFHVmQQ==}
     engines: {node: '>= 0.4'}
@@ -3936,8 +4006,8 @@
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
-      chokidar: 3.5.3
-      immutable: 4.3.1
+      chokidar: 3.6.0
+      immutable: 4.3.5
       source-map-js: 1.0.2
 
   /saxes@6.0.0:
diff --git "a/qwilight-fe/src/app/\133language\135/etc/query/useGetEtc.ts" "b/qwilight-fe/src/app/\133language\135/etc/query/useGetEtc.ts"
index c3ad143..fbb2ce2 100644
--- "a/qwilight-fe/src/app/\133language\135/etc/query/useGetEtc.ts"
+++ "b/qwilight-fe/src/app/\133language\135/etc/query/useGetEtc.ts"
@@ -2,15 +2,15 @@
 import { wwwAPI } from "@/utilities/wwwAPI";
 import { useQuery } from "@tanstack/react-query";
 import { useIsPath } from "taehui-ts/fe-utilities";
-import { getLanguage } from "taehui-ts/language";
+import { useLanguage } from "taehui-ts/language";
 
 export default function useGetEtc() {
   const isPath = useIsPath();
+  const language = useLanguage();
 
-  const language = getLanguage();
   return useQuery({
     enabled: isPath("/etc"),
-    queryKey: ["etc"],
+    queryKey: ["etc", language],
     queryFn: async () => {
       const { data } = await wwwAPI.get<GetEtcAPI>("/etc", {
         params: { language },
diff --git "a/qwilight-fe/src/app/\133language\135/note/query/useGetComment.ts" "b/qwilight-fe/src/app/\133language\135/note/query/useGetComment.ts"
index 8cba68d..f7a86b2 100644
--- "a/qwilight-fe/src/app/\133language\135/note/query/useGetComment.ts"
+++ "b/qwilight-fe/src/app/\133language\135/note/query/useGetComment.ts"
@@ -2,15 +2,15 @@
 import { GetCommentAPI } from "@/type/wwwAPI";
 import { wwwAPI } from "@/utilities/wwwAPI";
 import { useQuery } from "@tanstack/react-query";
-import { getLanguage } from "taehui-ts/language";
+import { useLanguage } from "taehui-ts/language";
 
 export default function useGetComment(
   noteID: string,
   isCommentOpened: boolean,
 ) {
   const { siteAvatarID } = useSiteStore();
+  const language = useLanguage();
 
-  const language = getLanguage();
   return useQuery({
     enabled: isCommentOpened,
     queryKey: ["comment", noteID, siteAvatarID, language],
diff --git "a/qwilight-fe/src/app/\133language\135/site/components/LogInWindow.tsx" "b/qwilight-fe/src/app/\133language\135/site/components/LogInWindow.tsx"
index 1873944..68d9df6 100644
--- "a/qwilight-fe/src/app/\133language\135/site/components/LogInWindow.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/site/components/LogInWindow.tsx"
@@ -1,4 +1,4 @@
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 import { useSiteStore } from "@/state/Stores";
 import CryptoJS from "crypto-js";
 import { observer } from "mobx-react-lite";
@@ -28,7 +28,7 @@
       );
     }
     window.localStorage.setItem("autoLogIn", autoLogIn.toString());
-    SiteComponent.send({
+    wsAPI.send({
       eventID: EventPB.Event.EventID.LOG_IN,
       text: JSON.stringify({ avatarID, avatarCipher }),
     });
diff --git "a/qwilight-fe/src/app/\133language\135/site/components/NewSiteWindow.tsx" "b/qwilight-fe/src/app/\133language\135/site/components/NewSiteWindow.tsx"
index 44d04ff..a23a31d 100644
--- "a/qwilight-fe/src/app/\133language\135/site/components/NewSiteWindow.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/site/components/NewSiteWindow.tsx"
@@ -1,4 +1,4 @@
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 
 import { useSiteStore } from "@/state/Stores";
 import { observer } from "mobx-react-lite";
@@ -16,7 +16,7 @@
   const t = useTranslations();
 
   const onNewSite = () => {
-    SiteComponent.send({
+    wsAPI.send({
       eventID: EventPB.Event.EventID.NEW_SITE,
       text: JSON.stringify({
         siteName: siteName,
diff --git "a/qwilight-fe/src/app/\133language\135/site/components/SiteCipherWindow.tsx" "b/qwilight-fe/src/app/\133language\135/site/components/SiteCipherWindow.tsx"
index 594a521..2ada79d 100644
--- "a/qwilight-fe/src/app/\133language\135/site/components/SiteCipherWindow.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/site/components/SiteCipherWindow.tsx"
@@ -1,4 +1,4 @@
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 
 import { useSiteStore } from "@/state/Stores";
 import { observer } from "mobx-react-lite";
@@ -19,7 +19,7 @@
     const t = useTranslations();
 
     const onEnterSite = () => {
-      SiteComponent.send({
+      wsAPI.send({
         eventID: EventPB.Event.EventID.ENTER_SITE,
         text: JSON.stringify({ siteID, siteCipher }),
       });
diff --git "a/qwilight-fe/src/app/\133language\135/site/components/SiteComponent.ts" "b/qwilight-fe/src/app/\133language\135/site/components/SiteComponent.ts"
deleted file mode 100644
index 70875d4..0000000
--- "a/qwilight-fe/src/app/\133language\135/site/components/SiteComponent.ts"
+++ /dev/null
@@ -1,97 +0,0 @@
-import {
-  CloseEventHandler,
-  Event,
-  EventHandler,
-} from "@/app/[language]/site/type";
-import { getMillis } from "taehui-ts/date";
-import { getLanguage } from "taehui-ts/language";
-
-const EventPB = require("@/Event_pb");
-
-const siteComponent = new (class {
-  ws?: WebSocket;
-  avatarID: string;
-  eventDefaultHandler: EventHandler;
-  eventCloseHandler: CloseEventHandler;
-  onLoaded: () => void;
-  onData: ({ data }: { data: MessageEvent }) => void;
-  onClosed: () => void;
-
-  constructor() {
-    this.ws = undefined;
-    this.avatarID = "";
-    this.eventDefaultHandler = () => {};
-    this.eventCloseHandler = () => {};
-
-    this.onLoaded = () => {
-      this.send({
-        eventID: EventPB.Event.EventID.ESTABLISH,
-        text: JSON.stringify({
-          language: getLanguage(),
-        }),
-      });
-    };
-
-    this.onData = ({ data }) => {
-      try {
-        const { array } = EventPB.Event.deserializeBinary(data);
-        this.eventDefaultHandler({
-          eventID: array[2],
-          text: array[3],
-          data: array[4],
-        });
-      } catch (e) {}
-    };
-
-    this.onClosed = () => {
-      this.eventCloseHandler();
-      this.connect();
-    };
-  }
-
-  connect() {
-    this.ws = new WebSocket(
-      `${process.env.NEXT_PUBLIC_WS_API ?? "wss://taehui.ddns.net"}/qwilight/ws`,
-    );
-    this.ws.binaryType = "arraybuffer";
-    this.ws.addEventListener("open", this.onLoaded);
-    this.ws.addEventListener("message", this.onData);
-    this.ws.addEventListener("close", this.onClosed);
-  }
-
-  disconnect() {
-    this.eventCloseHandler();
-    this.ws?.removeEventListener("open", this.onLoaded);
-    this.ws?.removeEventListener("message", this.onData);
-    this.ws?.removeEventListener("close", this.onClosed);
-    this.ws?.close();
-  }
-
-  send({ eventID, text, data }: Event) {
-    try {
-      const event = new EventPB.Event();
-      event.setMillis(getMillis());
-      event.setAvatarid(this.avatarID);
-      event.setEventid(eventID);
-      event.setText(text);
-      data?.forEach((dataItem) => {
-        event.addData(dataItem);
-      });
-      this.ws?.send(event.serializeBinary());
-    } catch (e) {}
-  }
-
-  setEventDefaultHandler(eventDefaultHandler: EventHandler) {
-    this.eventDefaultHandler = eventDefaultHandler;
-  }
-
-  setEventCloseHandler(eventCloseHandler: CloseEventHandler) {
-    this.eventCloseHandler = eventCloseHandler;
-  }
-
-  setAvatarID(avatarID: string) {
-    this.avatarID = avatarID;
-  }
-})();
-
-export default siteComponent;
diff --git "a/qwilight-fe/src/app/\133language\135/site/components/SiteInput.tsx" "b/qwilight-fe/src/app/\133language\135/site/components/SiteInput.tsx"
index f80bbd7..3e5da5f 100644
--- "a/qwilight-fe/src/app/\133language\135/site/components/SiteInput.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/site/components/SiteInput.tsx"
@@ -1,4 +1,4 @@
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 
 import { useSiteStore } from "@/state/Stores";
 import { observer } from "mobx-react-lite";
@@ -25,7 +25,7 @@
     fr.readAsArrayBuffer(file);
     fr.addEventListener("loadend", () => {
       const { result } = fr;
-      SiteComponent.send({
+      wsAPI.send({
         eventID: EventPB.Event.EventID.POST_FILE,
         text: file.name,
         data: [new Uint8Array(result as ArrayBufferLike)],
@@ -63,7 +63,7 @@
           onKeyDown={({ key }) => {
             if (key === "Enter") {
               if (input.length > 0) {
-                SiteComponent.send({
+                wsAPI.send({
                   eventID: EventPB.Event.EventID.SITE_YELL,
                   text: JSON.stringify({
                     siteID: targetSiteID,
@@ -92,7 +92,7 @@
             onClick={() => {
               window.localStorage.removeItem("avatarCipher");
               window.localStorage.removeItem("autoLogIn");
-              SiteComponent.send({
+              wsAPI.send({
                 eventID: EventPB.Event.EventID.NOT_LOG_IN,
               });
             }}
diff --git "a/qwilight-fe/src/app/\133language\135/site/components/SiteWindow.tsx" "b/qwilight-fe/src/app/\133language\135/site/components/SiteWindow.tsx"
index 97c9f08..a496361 100644
--- "a/qwilight-fe/src/app/\133language\135/site/components/SiteWindow.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/site/components/SiteWindow.tsx"
@@ -1,6 +1,6 @@
 import NewSiteWindow from "@/app/[language]/site/components/NewSiteWindow";
 import SiteCipherWindow from "@/app/[language]/site/components/SiteCipherWindow";
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 
 import useGetSites from "@/app/[language]/site/query/useGetSites";
 import sc from "@/assets/sc.png";
@@ -61,7 +61,7 @@
                         setSiteName(siteName);
                         setSiteCipherWindowOpened(true);
                       } else {
-                        SiteComponent.send({
+                        wsAPI.send({
                           eventID: EventPB.Event.EventID.ENTER_SITE,
                           text: JSON.stringify({ siteID, siteCipher: "" }),
                         });
diff --git "a/qwilight-fe/src/app/\133language\135/site/components/SiteYellItem.tsx" "b/qwilight-fe/src/app/\133language\135/site/components/SiteYellItem.tsx"
index 85622a7..40890d3 100644
--- "a/qwilight-fe/src/app/\133language\135/site/components/SiteYellItem.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/site/components/SiteYellItem.tsx"
@@ -1,5 +1,5 @@
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
 import scss from "@/app/[language]/site/components/SiteYellItem.module.scss";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 import {
   AbilitySiteYell,
   CommentSiteYell,
@@ -216,7 +216,7 @@
               <span
                 className="route"
                 onClick={() => {
-                  SiteComponent.send({
+                  wsAPI.send({
                     eventID: EventPB.Event.EventID.ENTER_SITE,
                     text: JSON.stringify({
                       siteID,
diff --git "a/qwilight-fe/src/app/\133language\135/site/lib/useWSAPI.tsx" "b/qwilight-fe/src/app/\133language\135/site/lib/useWSAPI.tsx"
new file mode 100644
index 0000000..d0381b0
--- /dev/null
+++ "b/qwilight-fe/src/app/\133language\135/site/lib/useWSAPI.tsx"
@@ -0,0 +1,50 @@
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
+import { useSiteStore } from "@/state/Stores";
+import { useTranslations } from "next-intl";
+import { useEffect } from "react";
+import { useLanguage } from "taehui-ts/language";
+
+export default function useWSAPI() {
+  const {
+    targetSiteID,
+    getSiteView,
+    setVisible,
+    setEventHandler,
+    setEventCloseHandler,
+  } = useSiteStore();
+  const t = useTranslations();
+
+  useEffect(() => {
+    const onVisibilityModified = () => {
+      if (setVisible()) {
+        const siteView = getSiteView(targetSiteID);
+        if (siteView) {
+          siteView.wasNotify = false;
+        }
+      }
+    };
+
+    document.addEventListener("visibilitychange", onVisibilityModified);
+
+    return () => {
+      document.removeEventListener("visibilitychange", onVisibilityModified);
+    };
+  }, [getSiteView, setVisible, targetSiteID]);
+
+  useEffect(() => {
+    setVisible();
+    setEventHandler(t);
+    setEventCloseHandler();
+  }, [setEventCloseHandler, setEventHandler, setVisible, t]);
+
+  const language = useLanguage();
+
+  useEffect(() => {
+    wsAPI.setLanguage(language);
+    wsAPI.connect();
+
+    return () => {
+      wsAPI.disconnect();
+    };
+  }, [language]);
+}
diff --git "a/qwilight-fe/src/app/\133language\135/site/lib/wsAPI.ts" "b/qwilight-fe/src/app/\133language\135/site/lib/wsAPI.ts"
new file mode 100644
index 0000000..ea41a25
--- /dev/null
+++ "b/qwilight-fe/src/app/\133language\135/site/lib/wsAPI.ts"
@@ -0,0 +1,102 @@
+import {
+  CloseEventHandler,
+  Event,
+  EventHandler,
+} from "@/app/[language]/site/type";
+import { getMillis } from "taehui-ts/date";
+import { useLanguage } from "taehui-ts/language";
+
+const EventPB = require("@/Event_pb");
+
+const wsAPI = new (class {
+  ws?: WebSocket;
+  avatarID: string;
+  eventDefaultHandler: EventHandler;
+  eventCloseHandler: CloseEventHandler;
+  onLoaded: () => void;
+  onData: ({ data }: { data: MessageEvent }) => void;
+  onClosed: () => void;
+  language?: ReturnType<typeof useLanguage>;
+
+  constructor() {
+    this.ws = undefined;
+    this.avatarID = "";
+    this.eventDefaultHandler = () => {};
+    this.eventCloseHandler = () => {};
+
+    this.onLoaded = () => {
+      this.send({
+        eventID: EventPB.Event.EventID.ESTABLISH,
+        text: JSON.stringify({
+          language: this.language,
+        }),
+      });
+    };
+
+    this.onData = ({ data }) => {
+      try {
+        const { array } = EventPB.Event.deserializeBinary(data);
+        this.eventDefaultHandler({
+          eventID: array[2],
+          text: array[3],
+          data: array[4],
+        });
+      } catch (e) {}
+    };
+
+    this.onClosed = () => {
+      this.eventCloseHandler();
+      this.connect();
+    };
+  }
+
+  setLanguage(language: ReturnType<typeof useLanguage>) {
+    this.language = language;
+  }
+
+  connect() {
+    this.ws = new WebSocket(
+      `${process.env.NEXT_PUBLIC_WS_API ?? "wss://taehui.ddns.net"}/qwilight/ws`,
+    );
+    this.ws.binaryType = "arraybuffer";
+    this.ws.addEventListener("open", this.onLoaded);
+    this.ws.addEventListener("message", this.onData);
+    this.ws.addEventListener("close", this.onClosed);
+  }
+
+  disconnect() {
+    this.eventCloseHandler();
+    this.ws?.removeEventListener("open", this.onLoaded);
+    this.ws?.removeEventListener("message", this.onData);
+    this.ws?.removeEventListener("close", this.onClosed);
+    this.ws?.close();
+  }
+
+  send({ eventID, text, data }: Event) {
+    try {
+      const event = new EventPB.Event();
+      event.setMillis(getMillis());
+      event.setAvatarid(this.avatarID);
+      event.setEventid(eventID);
+      event.setText(text);
+      data?.forEach((dataItem) => {
+        event.addData(dataItem);
+      });
+      this.ws?.send(event.serializeBinary());
+    } catch (e) {}
+  }
+
+  setEventDefaultHandler(eventDefaultHandler: EventHandler) {
+    this.eventDefaultHandler = eventDefaultHandler;
+  }
+
+  setEventCloseHandler(eventCloseHandler: CloseEventHandler) {
+    this.eventCloseHandler = eventCloseHandler;
+  }
+
+  setAvatarID(avatarID: string) {
+    this.avatarID = avatarID;
+  }
+})();
+
+export default wsAPI;
diff --git "a/qwilight-fe/src/app/\133language\135/site/page.tsx" "b/qwilight-fe/src/app/\133language\135/site/page.tsx"
index 6b92aef..6a6f3e6 100644
--- "a/qwilight-fe/src/app/\133language\135/site/page.tsx"
+++ "b/qwilight-fe/src/app/\133language\135/site/page.tsx"
@@ -2,11 +2,11 @@
 
 import AvatarItems from "@/app/[language]/site/components/AvatarItems";
 import ConfigureWindow from "@/app/[language]/site/components/ConfigureWindow";
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
 import SiteInput from "@/app/[language]/site/components/SiteInput";
 import SiteWindow from "@/app/[language]/site/components/SiteWindow";
 import SiteYellItem from "@/app/[language]/site/components/SiteYellItem";
 import SiteYellItems from "@/app/[language]/site/components/SiteYellItems";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 import scss from "@/app/[language]/site/page.module.scss";
 import { OnSiteYellInput } from "@/app/[language]/site/type";
 
@@ -125,7 +125,7 @@
       if (current) {
         const siteYellID = siteYells[0]?.siteYellID;
         if (siteYellID && siteYellID > 0 && !current.scrollTop) {
-          SiteComponent.send({
+          wsAPI.send({
             eventID: EventPB.Event.EventID.GET_SITE_YELLS,
             text: JSON.stringify({
               siteID: targetSiteID,
@@ -218,7 +218,7 @@
             <Col className="m-1" xs="auto">
               <Button
                 onClick={() => {
-                  SiteComponent.send({
+                  wsAPI.send({
                     eventID: EventPB.Event("EventID.QUIT_SITE"),
                     text: targetSiteID,
                   });
@@ -283,7 +283,7 @@
           <Item
             disabled={!isSiteHand}
             onClick={({ props: { avatarID } }) => {
-              SiteComponent.send({
+              wsAPI.send({
                 eventID: EventPB.Event("EventID.SET_SITE_OWNER"),
                 text: JSON.stringify({
                   siteID: targetSiteID,
@@ -299,7 +299,7 @@
           </Item>
           <Item
             onClick={({ props: { avatarID } }) => {
-              SiteComponent.send({
+              wsAPI.send({
                 eventID: EventPB.Event("EventID.NEW_SILENT_SITE"),
                 text: avatarID,
               });
@@ -310,7 +310,7 @@
           <Item
             disabled={!isSiteHand}
             onClick={({ props: { avatarID } }) => {
-              SiteComponent.send({
+              wsAPI.send({
                 eventID: EventPB.Event("EventID.EXILE_AVATAR"),
                 text: JSON.stringify({
                   siteID: targetSiteID,
@@ -339,7 +339,7 @@
               input: "text",
             });
             if (isConfirmed) {
-              SiteComponent.send({
+              wsAPI.send({
                 eventID: EventPB.Event("EventID.SET_SITE_NAME"),
                 text: JSON.stringify({
                   siteID: targetSiteID,
diff --git "a/qwilight-fe/src/app/\133language\135/site/query/useSiteComponent.tsx" "b/qwilight-fe/src/app/\133language\135/site/query/useSiteComponent.tsx"
deleted file mode 100644
index 7b82d21..0000000
--- "a/qwilight-fe/src/app/\133language\135/site/query/useSiteComponent.tsx"
+++ /dev/null
@@ -1,46 +0,0 @@
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
-import { useSiteStore } from "@/state/Stores";
-import { useTranslations } from "next-intl";
-import { useEffect } from "react";
-
-export default function useSiteComponent() {
-  const {
-    targetSiteID,
-    getSiteView,
-    setVisible,
-    setEventHandler,
-    setEventCloseHandler,
-  } = useSiteStore();
-  const t = useTranslations();
-
-  useEffect(() => {
-    const onVisibilityModified = () => {
-      if (setVisible()) {
-        const siteView = getSiteView(targetSiteID);
-        if (siteView) {
-          siteView.wasNotify = false;
-        }
-      }
-    };
-
-    document.addEventListener("visibilitychange", onVisibilityModified);
-
-    return () => {
-      document.removeEventListener("visibilitychange", onVisibilityModified);
-    };
-  }, [getSiteView, setVisible, targetSiteID]);
-
-  useEffect(() => {
-    setVisible();
-    setEventHandler(t);
-    setEventCloseHandler();
-  }, [setEventCloseHandler, setEventHandler, setVisible, t]);
-
-  useEffect(() => {
-    SiteComponent.connect();
-
-    return () => {
-      SiteComponent.disconnect();
-    };
-  }, []);
-}
diff --git "a/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts" "b/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts"
index 57a675d..9d218bb 100644
--- "a/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts"
+++ "b/qwilight-fe/src/app/\133language\135/site/state/setSiteStore.ts"
@@ -1,4 +1,4 @@
-import SiteComponent from "@/app/[language]/site/components/SiteComponent";
+import wsAPI from "@/app/[language]/site/lib/wsAPI";
 import {
   AbilitySiteYell,
   Avatar,
@@ -162,7 +162,7 @@
 
     setEventHandler(t: ReturnType<typeof useTranslations<string>>) {
       const autoEnter = () => {
-        SiteComponent.send({
+        wsAPI.send({
           eventID: EventPB.Event.EventID.ENTER_SITE,
           text: JSON.stringify({
             siteID: "00000000-0000-0000-0000-000000000003",
@@ -170,7 +170,7 @@
           }),
         });
         if (this.autoEnterNotify) {
-          SiteComponent.send({
+          wsAPI.send({
             eventID: EventPB.Event.EventID.ENTER_SITE,
             text: JSON.stringify({
               siteID: "00000000-0000-0000-0000-000000000000",
@@ -179,7 +179,7 @@
           });
         }
         if (this.autoEnterDefault) {
-          SiteComponent.send({
+          wsAPI.send({
             eventID: EventPB.Event.EventID.ENTER_SITE,
             text: JSON.stringify({
               siteID: "00000000-0000-0000-0000-000000000001",
@@ -188,7 +188,7 @@
           });
         }
         if (this.autoEnterPlatform) {
-          SiteComponent.send({
+          wsAPI.send({
             eventID: EventPB.Event.EventID.ENTER_SITE,
             text: JSON.stringify({
               siteID: "00000000-0000-0000-0000-000000000002",
@@ -200,7 +200,7 @@
 
       const autoLogIn = () => {
         if (window.localStorage.getItem("autoLogIn") === "true") {
-          SiteComponent.send({
+          wsAPI.send({
             eventID: EventPB.Event.EventID.LOG_IN,
             text: JSON.stringify({
               avatarID: window.localStorage.getItem("avatarID") ?? "",
@@ -231,7 +231,7 @@
         }
       };
 
-      SiteComponent.setEventDefaultHandler(({ eventID, text }) => {
+      wsAPI.setEventDefaultHandler(({ eventID, text }) => {
         switch (eventID) {
           case EventPB.Event.EventID.ESTABLISH:
             if (text) {
@@ -241,7 +241,7 @@
               autoEnter();
               const totem = window.sessionStorage.getItem("totem");
               if (totem) {
-                SiteComponent.send({
+                wsAPI.send({
                   eventID: EventPB.Event.EventID.LOG_IN,
                   text: totem,
                 });
@@ -524,7 +524,7 @@
     },
 
     setEventCloseHandler() {
-      SiteComponent.setEventCloseHandler(() => {
+      wsAPI.setEventCloseHandler(() => {
         this.setSiteAvatar("", "");
         this.setLoggedIn(false);
         this.onSiteIDModified("");
@@ -544,7 +544,7 @@
     setSiteAvatar(siteAvatarID: string, siteAvatarName: string) {
       this.siteAvatarID = siteAvatarID;
       this.siteAvatarName = siteAvatarName;
-      SiteComponent.setAvatarID(this.siteAvatarID);
+      wsAPI.setAvatarID(this.siteAvatarID);
     },
 
     putSiteYell(siteID: string, siteYell: SiteYell, isGetSiteYell: boolean) {
diff --git a/qwilight-fe/src/app/globals.scss b/qwilight-fe/src/app/globals.scss
index 2c03ca1..c1c729d 100644
--- a/qwilight-fe/src/app/globals.scss
+++ b/qwilight-fe/src/app/globals.scss
@@ -1,26 +1,72 @@
-* {
-  margin: 0;
-  font-family: "Century Gothic",
-  -apple-system,
-  BlinkMacSystemFont,
-  "Segoe UI",
-  "Roboto",
-  "Oxygen",
-  "Ubuntu",
-  "Cantarell",
-  "Fira Sans",
-  "Droid Sans",
-  "Helvetica Neue",
-  sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
 @mixin default() {
   font-size: 0.75rem;
 }
 
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+  "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+  "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+  --foreground-rgb: 0, 0, 0;
+
+  --primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+
+  &.route {
+    cursor: pointer;
+  }
+}
+
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: url("@/assets/dark-honeycomb.png");
+}
+
 a {
+  color: inherit;
+  text-decoration: none;
+
   &.nav-link {
     @include default();
     color: white;
@@ -32,8 +78,10 @@
   }
 }
 
-body {
-  background: url("../assets/dark-honeycomb.png");
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
 }
 
 button {
@@ -51,10 +99,10 @@
 }
 
 input[type="button"],
+input[type="password"],
 input[type="submit"],
 input[type="search"],
-input[type="text"],
-input[type="password"] {
+input[type="text"] {
   @include default();
 }
 
@@ -69,16 +117,16 @@
   }
 }
 
-.target {
-  border: thin solid;
-  border-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
-  border-image-slice: 1;
-}
-
 div {
   &.offcanvas-body {
     background-color: black;
   }
+
+  &.target {
+    border: thin solid;
+    border-image: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
+    border-image-slice: 1;
+  }
 }
 
 span {
@@ -234,7 +282,3 @@
     white-space: pre-line;
   }
 }
-
-.route {
-  cursor: pointer;
-}
diff --git a/qwilight-fe/src/components/QwilightView.tsx b/qwilight-fe/src/components/QwilightView.tsx
index 9b959a3..dbe4df5 100644
--- a/qwilight-fe/src/components/QwilightView.tsx
+++ b/qwilight-fe/src/components/QwilightView.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import LogInWindow from "@/app/[language]/site/components/LogInWindow";
-import useSiteComponent from "@/app/[language]/site/query/useSiteComponent";
+import usewsAPI from "@/app/[language]/site/lib/useWSAPI";
 import platform from "@/assets/discord-logo-white.png";
 import withQueryClient from "@/hoc/withQueryClient";
 import { useSiteStore } from "@/state/Stores";
@@ -19,7 +19,7 @@
   const siteYellsView = useRef<HTMLDivElement>(null);
   const { setComponents } = useSiteStore();
 
-  useSiteComponent();
+  usewsAPI();
 
   const isPath = useIsPath();
 
diff --git a/qwilight-fe/src/query/useGetTitle.ts b/qwilight-fe/src/query/useGetTitle.ts
index c56a770..4b1df49 100644
--- a/qwilight-fe/src/query/useGetTitle.ts
+++ b/qwilight-fe/src/query/useGetTitle.ts
@@ -1,10 +1,11 @@
 import { GetTitleAPI } from "@/type/wwwAPI";
 import { wwwAPI } from "@/utilities/wwwAPI";
 import { useQuery } from "@tanstack/react-query";
-import { getLanguage } from "taehui-ts/language";
+import { useLanguage } from "taehui-ts/language";
 
 export default function useGetTitle(avatarID: string) {
-  const language = getLanguage();
+  const language = useLanguage();
+
   return useQuery({
     queryKey: ["title", avatarID, language],
     queryFn: async () => {
diff --git a/taehui-fe/package.json b/taehui-fe/package.json
index 4bf6181..7051c5e 100644
--- a/taehui-fe/package.json
+++ b/taehui-fe/package.json
@@ -32,6 +32,7 @@
     "react-textarea-autosize": "^8.5.3",
     "react-toastify": "^10.0.4",
     "reactstrap": "^9.2.2",
+    "redis": "^4.6.13",
     "sweetalert2": "^11.10.6",
     "taehui-ts": "workspace:^",
     "uuid": "^9.0.1",
diff --git "a/taehui-fe/src/app/\133language\135/commentary/page.tsx" "b/taehui-fe/src/app/\133language\135/commentary/page.tsx"
index aa95b16..2d22dd2 100644
--- "a/taehui-fe/src/app/\133language\135/commentary/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/commentary/page.tsx"
@@ -10,7 +10,7 @@
 import { toast } from "react-toastify";
 import { Button, Col, Input, ListGroup, Row } from "reactstrap";
 
-const Page = () => {
+export default function Page() {
   const t = useTranslations();
 
   const [avatarName, setAvatarName] = useState("");
@@ -94,6 +94,4 @@
       )}
     </>
   );
-};
-
-export default Page;
+}
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx"
index 48595c7..4d330c0 100644
--- "a/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/components/LatestCommentsView.tsx"
@@ -3,7 +3,7 @@
 import { useTranslations } from "next-intl";
 import { ListGroup, ListGroupItemHeading } from "reactstrap";
 
-const LatestCommentsView = () => {
+export default function LatestCommentsView() {
   const t = useTranslations();
 
   const { data: latestComment, isFetched: isLatestCommentLoaded } =
@@ -41,6 +41,4 @@
       </ListGroup>
     </>
   );
-};
-
-export default LatestCommentsView;
+}
diff --git "a/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx" "b/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx"
index aeea6b9..c0f63dc 100644
--- "a/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/components/LatestEssaysView.tsx"
@@ -3,7 +3,7 @@
 import { useTranslations } from "next-intl";
 import { ListGroup, ListGroupItemHeading } from "reactstrap";
 
-const LatestEssaysView = () => {
+export default function LatestEssaysView() {
   const t = useTranslations();
 
   const { data: latestEssay, isFetched: isLatestEssayLoaded } =
@@ -39,6 +39,4 @@
       </ListGroup>
     </>
   );
-};
-
-export default LatestEssaysView;
+}
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx"
index 91e954f..4c32612 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/AutoEssayTitleView.tsx"
@@ -8,7 +8,7 @@
 import Swal from "sweetalert2";
 import { getDatetime } from "taehui-ts/date";
 
-const AutoEssayTitleView = observer<{ autoEssay: GetAutoEssayAPI[0] }>(
+export default observer<{ autoEssay: GetAutoEssayAPI[0] }>(
   ({ autoEssay: { autoEssayID, title, text, date } }) => {
     const { mutateAsync: wipeAutoEssay } = useWipeAutoEssay();
 
@@ -50,5 +50,3 @@
     );
   },
 );
-
-export default AutoEssayTitleView;
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/CommentTitleView.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/CommentTitleView.tsx"
index 2be4afa..7db8c86 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/CommentTitleView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/CommentTitleView.tsx"
@@ -4,7 +4,7 @@
 import { getDatetime } from "taehui-ts/date";
 import { useTo } from "taehui-ts/fe-utilities";
 
-const CommentTitleView = ({
+export default function CommentTitleView({
   forumID,
   essayID,
   comment: { avatarID, avatarName, date, text },
@@ -12,7 +12,7 @@
   forumID?: string;
   essayID?: number;
   comment: GetLatestCommentAPI[number];
-}) => {
+}) {
   const to = useTo();
 
   const isLoading = !!(forumID && essayID);
@@ -39,6 +39,4 @@
       </Row>
     </ListGroupItem>
   );
-};
-
-export default CommentTitleView;
+}
diff --git "a/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx" "b/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx"
index 03f32da..4297ad2 100644
--- "a/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx"
+++ "b/taehui-fe/src/app/\133language\135/forum/components/TextView.tsx"
@@ -8,7 +8,7 @@
 import { Badge, Col, Row } from "reactstrap";
 import { getDatetime } from "taehui-ts/date";
 
-const TextView = ({
+export default function TextView({
   forumTitle,
   title,
   text,
@@ -24,7 +24,7 @@
   avatarName: string;
   date?: string;
   hitCount?: number;
-}) => {
+}) {
   const hitTexts = useMemo(() => getHitTexts(text), [text]);
   const [textHTMLContents, setTextHTMLContents] = useState("");
 
@@ -91,6 +91,4 @@
       </Row>
     </>
   );
-};
-
-export default TextView;
+}
diff --git "a/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts" "b/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts"
index 9fcbcd9..ec65822 100644
--- "a/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts"
+++ "b/taehui-fe/src/app/\133language\135/forum/query/useGetEssay.ts"
@@ -1,9 +1,11 @@
-import { useQuery } from "@tanstack/react-query";
-import { wwwAPI } from "@/utilities/wwwAPI";
 import { EssayAPIEssay, GetEssayAPI } from "@/type/wwwAPI";
-import { getLanguage } from "taehui-ts/language";
+import { wwwAPI } from "@/utilities/wwwAPI";
+import { useQuery } from "@tanstack/react-query";
+import { useLanguage } from "taehui-ts/language";
 
 export default function useGetEssay(essayID?: string) {
+  const language = useLanguage();
+
   return useQuery<{
     forumTitle: string;
     title: string;
@@ -16,10 +18,10 @@
     essayLater?: EssayAPIEssay;
   }>({
     enabled: !!essayID,
-    queryKey: ["essay", essayID],
+    queryKey: ["essay", essayID, language],
     queryFn: async () => {
       const { data } = await wwwAPI.get<GetEssayAPI>(`/essay/${essayID}`, {
-        params: { language: getLanguage() },
+        params: { language },
       });
       return data;
     },
diff --git "a/taehui-fe/src/app/\133language\135/forum/query/useGetForum.ts" "b/taehui-fe/src/app/\133language\135/forum/query/useGetForum.ts"
index 7475dff..3d94336 100644
--- "a/taehui-fe/src/app/\133language\135/forum/query/useGetForum.ts"
+++ "b/taehui-fe/src/app/\133language\135/forum/query/useGetForum.ts"
@@ -1,14 +1,14 @@
-import { useQuery } from "@tanstack/react-query";
-import { wwwAPI } from "@/utilities/wwwAPI";
 import { GetForumAPI } from "@/type/wwwAPI";
-import { getLanguage } from "taehui-ts/language";
+import { wwwAPI } from "@/utilities/wwwAPI";
+import { useQuery } from "@tanstack/react-query";
+import { useLanguage } from "taehui-ts/language";
 
 export default function useGetForum(
   forumID: string,
   page: number,
   viewUnit: number,
 ) {
-  const language = getLanguage();
+  const language = useLanguage();
 
   return useQuery({
     queryKey: ["forum", forumID, page, viewUnit, language],
diff --git "a/taehui-fe/src/app/\133language\135/forums/query/useGetForums.ts" "b/taehui-fe/src/app/\133language\135/forums/query/useGetForums.ts"
index 2ba026b..a10e026 100644
--- "a/taehui-fe/src/app/\133language\135/forums/query/useGetForums.ts"
+++ "b/taehui-fe/src/app/\133language\135/forums/query/useGetForums.ts"
@@ -1,16 +1,18 @@
-import { wwwAPI } from "@/utilities/wwwAPI";
 import { GetForumsAPI } from "@/type/wwwAPI";
+import { wwwAPI } from "@/utilities/wwwAPI";
 import { useQuery } from "@tanstack/react-query";
-import { getLanguage } from "taehui-ts/language";
+import { useLanguage } from "taehui-ts/language";
 
 export default function useGetForums(forumGroup?: string) {
+  const language = useLanguage();
+
   return useQuery({
-    queryKey: ["forums", forumGroup],
+    queryKey: ["forums", forumGroup, language],
     queryFn: async () => {
       const { data } = await wwwAPI.get<GetForumsAPI>(
         forumGroup ? `/forums/${forumGroup}` : "/forums",
         {
-          params: { language: getLanguage() },
+          params: { language },
         },
       );
       return data;
diff --git "a/taehui-fe/src/app/\133language\135/page.tsx" "b/taehui-fe/src/app/\133language\135/page.tsx"
index 7425dfc..1a00587 100644
--- "a/taehui-fe/src/app/\133language\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/page.tsx"
@@ -7,7 +7,7 @@
 import WantInput from "@/app/[language]/want/components/WantInput";
 import { useTranslations } from "next-intl";
 
-const Page = () => {
+export default function Page() {
   const t = useTranslations();
 
   return (
@@ -32,6 +32,4 @@
       <LatestAvatarsView />
     </>
   );
-};
-
-export default Page;
+}
diff --git "a/taehui-fe/src/app/\133language\135/query/useGetLatestEssay.ts" "b/taehui-fe/src/app/\133language\135/query/useGetLatestEssay.ts"
index 8afa48a..254138b 100644
--- "a/taehui-fe/src/app/\133language\135/query/useGetLatestEssay.ts"
+++ "b/taehui-fe/src/app/\133language\135/query/useGetLatestEssay.ts"
@@ -1,13 +1,13 @@
-import { useQuery } from "@tanstack/react-query";
-import { getLanguage } from "taehui-ts/language";
-
+import type { GetLatestEssayAPI } from "@/type/wwwAPI";
 import { wwwAPI } from "@/utilities/wwwAPI";
-import { GetLatestEssayAPI } from "@/type/wwwAPI";
+import { useQuery } from "@tanstack/react-query";
+import { useLanguage } from "taehui-ts/language";
 
 export default function useGetLatestEssay() {
-  const language = getLanguage();
+  const language = useLanguage();
+
   return useQuery({
-    queryKey: ["latestEssay"],
+    queryKey: ["latestEssay", language],
     queryFn: async () => {
       const { data } = await wwwAPI.get<GetLatestEssayAPI>("/essay/latest", {
         params: { language },
diff --git "a/taehui-fe/src/app/\133language\135/query/useSession.ts" "b/taehui-fe/src/app/\133language\135/query/useSession.ts"
index 17de5d2..3af2643 100644
--- "a/taehui-fe/src/app/\133language\135/query/useSession.ts"
+++ "b/taehui-fe/src/app/\133language\135/query/useSession.ts"
@@ -3,7 +3,7 @@
 import { useTaehuiStore } from "@/state/Stores";
 import { useEffect, useState } from "react";
 
-const useSession = () => {
+export default function useSession() {
   const { loadTotem, totem } = useTaehuiStore();
   const [isLoading, setLoading] = useState(true);
 
@@ -25,6 +25,4 @@
   }, [autoLogIn, isLoading, totem]);
 
   return isLoading;
-};
-
-export default useSession;
+}
diff --git "a/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx" "b/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx"
index 40ccd02..230d944 100644
--- "a/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx"
+++ "b/taehui-fe/src/app/\133language\135/want/\133wantVariety\135/\133\133...want\135\135/page.tsx"
@@ -14,7 +14,7 @@
 import { Col, ListGroup, ListGroupItemHeading, Row } from "reactstrap";
 import { useWant } from "taehui-ts/fe-utilities";
 
-const Page = () => {
+export default function Page() {
   const t = useTranslations();
 
   const { setTextInput } = useWantStore();
@@ -83,6 +83,4 @@
       )}
     </>
   );
-};
-
-export default Page;
+}
diff --git a/taehui-fe/src/app/globals.scss b/taehui-fe/src/app/globals.scss
index 44e25fc..9d2578f 100644
--- a/taehui-fe/src/app/globals.scss
+++ b/taehui-fe/src/app/globals.scss
@@ -1,48 +1,86 @@
+:root {
+  --max-width: 1100px;
+  --border-radius: 12px;
+  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
+  "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
+  "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
+
+  --foreground-rgb: 0, 0, 0;
+  --background: url("../assets/hexellence.png");
+
+  --primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
+  --secondary-glow: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+
+  --tile-start-rgb: 239, 245, 249;
+  --tile-end-rgb: 228, 232, 233;
+  --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
+
+  --callout-rgb: 238, 240, 241;
+  --callout-border-rgb: 172, 175, 176;
+  --card-rgb: 180, 185, 188;
+  --card-border-rgb: 131, 134, 135;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --foreground-rgb: 255, 255, 255;
+    --background: url("../assets/dark-honeycomb.png");
+
+    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
+    --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, 0.3));
+
+    --tile-start-rgb: 2, 13, 46;
+    --tile-end-rgb: 2, 5, 19;
+    --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
+
+    --callout-rgb: 20, 20, 20;
+    --callout-border-rgb: 108, 108, 108;
+    --card-rgb: 100, 100, 100;
+    --card-border-rgb: 200, 200, 200;
+  }
+}
+
 * {
+  box-sizing: border-box;
+  padding: 0;
   margin: 0;
-  font-family: "Century Gothic",
-  -apple-system,
-  BlinkMacSystemFont,
-  "Segoe UI",
-  "Roboto",
-  "Oxygen",
-  "Ubuntu",
-  "Cantarell",
-  "Fira Sans",
-  "Droid Sans",
-  "Helvetica Neue",
-  sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 
   &.route {
     cursor: pointer;
   }
 }
 
+html,
+body {
+  max-width: 100vw;
+  overflow-x: hidden;
+}
+
+body {
+  color: rgb(var(--foreground-rgb));
+  background: var(--background);
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    color-scheme: dark;
+  }
+}
+
 @mixin default() {
   font-size: 0.75rem;
 }
 
-body {
-  background: url("../assets/hexellence.png");
-}
-
 button {
   &.btn {
     @include default();
   }
-}
 
-input[type="search"],
-input[type="submit"],
-input[type="text"],
-input[type="email"],
-input[type="password"] {
-  @include default();
-}
-
-button {
   &.page-link {
     @include default();
   }
@@ -65,6 +103,14 @@
   }
 }
 
+input[type="search"],
+input[type="submit"],
+input[type="text"],
+input[type="email"],
+input[type="password"] {
+  @include default();
+}
+
 span {
   @include default();
 
diff --git "a/taehui-fe/src/app/www/avatar/drawing/\133avatarID\135/route.ts" "b/taehui-fe/src/app/www/avatar/drawing/\133avatarID\135/route.ts"
index 95ddad7..b85521d 100644
--- "a/taehui-fe/src/app/www/avatar/drawing/\133avatarID\135/route.ts"
+++ "b/taehui-fe/src/app/www/avatar/drawing/\133avatarID\135/route.ts"
@@ -1,12 +1,12 @@
+import { doInvalidateDrawing, getAvatarDrawing } from "@/app/www/logic/avatar";
 import logIP from "@/app/www/media/logIP";
 import validateMillis from "@/app/www/media/validateMillis";
 import validateTotem from "@/app/www/media/validateTotem";
-import { doInvalidateDrawing, getAvatarDrawing } from "@/app/www/logic/avatar";
 import {
   AVATAR_ENTRY_PATH,
   DEFAULT_AVATAR_ASSET,
 } from "@/app/www/utilities/Path";
-import { writeFile } from "node:fs/promises";
+import { writeFile } from "fs/promises";
 import { join } from "path";
 
 export const GET = logIP(async (req, { params: { avatarID } }) => {
diff --git a/taehui-fe/src/app/www/file/route.ts b/taehui-fe/src/app/www/file/route.ts
index 5943fcb..53ca5f2 100644
--- a/taehui-fe/src/app/www/file/route.ts
+++ b/taehui-fe/src/app/www/file/route.ts
@@ -2,7 +2,7 @@
 import validateMillis from "@/app/www/media/validateMillis";
 import validateTotem from "@/app/www/media/validateTotem";
 import { ESSAY_ENTRY_PATH } from "@/app/www/utilities/Path";
-import { writeFile } from "node:fs/promises";
+import { writeFile } from "fs/promises";
 import { join, parse } from "path";
 import { v4 } from "uuid";
 
@@ -22,6 +22,7 @@
       await writeFile(
         join(ESSAY_ENTRY_PATH, fileName),
         Buffer.from(await file.arrayBuffer()),
+        { flag: "wx" },
       );
       return Response.json({ fileName }, { status: 201 });
     }),
diff --git a/taehui-fe/src/app/www/logic/avatar.ts b/taehui-fe/src/app/www/logic/avatar.ts
index 7a4f830..8461340 100644
--- a/taehui-fe/src/app/www/logic/avatar.ts
+++ b/taehui-fe/src/app/www/logic/avatar.ts
@@ -3,15 +3,15 @@
 import { equalCipher } from "@/app/www/utilities/Utility";
 import { pbkdf2, randomBytes } from "crypto";
 import dayjs from "dayjs";
-import { PoolConnection } from "mariadb";
-import { readFile } from "node:fs/promises";
+import { readFile } from "fs/promises";
+import { Connection } from "mariadb";
 import { join } from "path";
 import { getDatetime } from "taehui-ts/date";
 import { promisify } from "util";
 
 const pw = promisify(pbkdf2);
 
-const putTotem = async (db: PoolConnection, avatarID: string) => {
+const putTotem = async (db: Connection, avatarID: string) => {
   const data = await DB.getTotem(db, avatarID);
 
   const datetime = getDatetime();
diff --git a/taehui-fe/src/app/www/logic/essay.ts b/taehui-fe/src/app/www/logic/essay.ts
index fca33e6..d762f6e 100644
--- a/taehui-fe/src/app/www/logic/essay.ts
+++ b/taehui-fe/src/app/www/logic/essay.ts
@@ -5,12 +5,9 @@
   getTitle,
   isBannedIP,
 } from "@/app/www/utilities/Utility";
-import { unlink } from "fs";
+import { unlink } from "fs/promises";
 import { join } from "path";
 import { getDate, getDatetime } from "taehui-ts/date";
-import { promisify } from "util";
-
-const wipeFile = promisify(unlink);
 
 export const getEssay = async (
   essayID: number,
@@ -105,7 +102,7 @@
   await DB.wipeFileNames(fileNames);
   for await (const fileName of fileNames) {
     try {
-      await wipeFile(join(ESSAY_ENTRY_PATH, fileName));
+      await unlink(join(ESSAY_ENTRY_PATH, fileName));
     } catch {}
   }
 };
diff --git a/taehui-fe/src/app/www/logic/file.ts b/taehui-fe/src/app/www/logic/file.ts
index 7b5bc69..94e977e 100644
--- a/taehui-fe/src/app/www/logic/file.ts
+++ b/taehui-fe/src/app/www/logic/file.ts
@@ -1,7 +1,7 @@
 import DB from "@/app/www/system/DB";
 import { ESSAY_ENTRY_PATH } from "@/app/www/utilities/Path";
 import { isBannedIP } from "@/app/www/utilities/Utility";
-import { readFile } from "node:fs/promises";
+import { readFile } from "fs/promises";
 import { join } from "path";
 import { getDate } from "taehui-ts/date";
 
diff --git a/taehui-fe/src/app/www/system/DB.ts b/taehui-fe/src/app/www/system/DB.ts
index 823d812..156c716 100644
--- a/taehui-fe/src/app/www/system/DB.ts
+++ b/taehui-fe/src/app/www/system/DB.ts
@@ -1,20 +1,28 @@
 import Logger from "@/app/www/system/Logger";
 import { ESSAY_ENTRY_PATH } from "@/app/www/utilities/Path";
 import { equalCipher, isTaehui } from "@/app/www/utilities/Utility";
-import { createPool, Pool, PoolConnection, SqlError } from "mariadb";
-import { readdir, unlink } from "node:fs/promises";
+import { readdir, unlink } from "fs/promises";
+import {
+  Connection,
+  createConnection,
+  createPool,
+  Pool,
+  SqlError,
+} from "mariadb";
 import { join } from "path";
 import { v4 } from "uuid";
 
-class DB {
-  pool: Pool;
+const db = new (class {
+  pool?: Pool;
 
   constructor() {
-    this.pool = createPool(process.env.DB as string);
+    if (process.env.NODE_ENV === "production") {
+      this.pool = createPool(process.env.DB as string);
+    }
     Logger.info("Loaded DB");
 
     (async () => {
-      await this.getPool(async (db) => {
+      await this.getDB(async (db) => {
         await db.query(`CREATE TABLE IF NOT EXISTS tn_avatar (
           Avatar_ID VARCHAR(20),
           Avatar_Cipher TEXT,
@@ -133,7 +141,7 @@
   }
 
   async isValidFile(fileName: string) {
-    return this.getPool(
+    return this.getDB(
       async (db) =>
         !!(
           await db.query(
@@ -146,8 +154,8 @@
     );
   }
 
-  async ta<T>(onHandle: (db: PoolConnection) => Promise<T>) {
-    return this.getPool<T>(async (db) => {
+  async ta<T>(onHandle: (db: Connection) => Promise<T>) {
+    return this.getDB<T>(async (db) => {
       try {
         await db.beginTransaction();
         const handled = onHandle(db);
@@ -160,17 +168,26 @@
     });
   }
 
-  async getPool<T>(onHandle: (db: PoolConnection) => Promise<T>) {
+  async getDB<T>(onGetDB: (db: Connection) => Promise<T>) {
     let db;
-    try {
-      db = await this.pool.getConnection();
-      return onHandle(db);
-    } finally {
-      await db?.release();
+    if (this.pool) {
+      try {
+        db = await this.pool.getConnection();
+        return onGetDB(db);
+      } finally {
+        await db?.release();
+      }
+    } else {
+      try {
+        db = await createConnection(process.env.DB as string);
+        return await onGetDB(db);
+      } finally {
+        await db?.end();
+      }
     }
   }
 
-  async getAvatarAsAvatarID(db: PoolConnection, avatarID: string) {
+  async getAvatarAsAvatarID(db: Connection, avatarID: string) {
     const data = (
       await db.query<
         {
@@ -201,7 +218,7 @@
     }
   }
 
-  async setLastDate(db: PoolConnection, avatarID: string, lastDate: string) {
+  async setLastDate(db: Connection, avatarID: string, lastDate: string) {
     await db.query(
       `UPDATE tn_avatar
         SET Last_Date = ?
@@ -210,7 +227,7 @@
     );
   }
 
-  async getTotem(db: PoolConnection, avatarID: string) {
+  async getTotem(db: Connection, avatarID: string) {
     const data = (
       await db.query<{ Totem: string; Date: string }[]>(
         `SELECT Totem, Date
@@ -229,7 +246,7 @@
   }
 
   async setTotemDateAsAvatarID(
-    db: PoolConnection,
+    db: Connection,
     avatarID: string,
     datetime: string,
   ) {
@@ -241,7 +258,7 @@
     );
   }
 
-  async putTotem(db: PoolConnection, avatarID: string, datetime: string) {
+  async putTotem(db: Connection, avatarID: string, datetime: string) {
     const totem = v4();
     await db.query(
       `REPLACE INTO tn_totem
@@ -252,7 +269,7 @@
   }
 
   async doModifyAvatar(
-    db: PoolConnection,
+    db: Connection,
     avatarID: string,
     avatarCipher: string,
     avatarCipherModified: string,
@@ -289,7 +306,7 @@
   }
 
   async doModifyAvatarIntro(avatarID: string, avatarIntro: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return (
         (
           await db.query(
@@ -311,7 +328,7 @@
     fax: string,
     datetime: string,
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return (
         (
           await db.query(
@@ -334,7 +351,7 @@
     });
   }
 
-  async getAvatarAsTotem(db: PoolConnection, totem: string) {
+  async getAvatarAsTotem(db: Connection, totem: string) {
     const data = (
       await db.query<{ Avatar_ID: string; Date: string }[]>(
         `SELECT Avatar_ID, Date
@@ -351,7 +368,7 @@
     }
   }
 
-  async setTotemDate(db: PoolConnection, totem: string, datetime: string) {
+  async setTotemDate(db: Connection, totem: string, datetime: string) {
     await db.query(
       `UPDATE tn_totem
         SET Date = ?
@@ -360,7 +377,7 @@
     );
   }
 
-  async wipeTotem(db: PoolConnection, avatarID: string) {
+  async wipeTotem(db: Connection, avatarID: string) {
     await db.query(
       `DELETE
         FROM tn_totem
@@ -369,7 +386,7 @@
     );
   }
 
-  async getForum(db: PoolConnection, forumID: string) {
+  async getForum(db: Connection, forumID: string) {
     const data = (
       await db.query<
         {
@@ -394,7 +411,7 @@
   }
 
   async getForums(forumGroup?: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return (
         forumGroup
           ? await db.query<
@@ -434,7 +451,7 @@
   }
 
   async getBeforeEssay(forumID: string, datetime: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const dataBefore = (
         await db.query(
           `SELECT Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title
@@ -461,7 +478,7 @@
   }
 
   async getLaterEssay(forumID: string, datetime: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const dataLater = (
         await db.query(
           `SELECT Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title
@@ -488,8 +505,18 @@
   }
 
   async getLatestEssays() {
-    return this.getPool(async (db) => {
-      const data = await db.query(
+    return this.getDB(async (db) => {
+      const data = await db.query<
+        {
+          Forum_ID: string;
+          Essay_ID: number;
+          Avatar_ID: string;
+          Avatar_Name: string;
+          Date: string;
+          Title: string;
+          Text: string;
+        }[]
+      >(
         `SELECT Forum_ID, Essay_ID, tn_essay.Avatar_ID, Avatar_Name, tn_essay.Date, Title, tn_essay.Text
           FROM tn_essay, tn_avatar
           WHERE tn_avatar.Avatar_ID = tn_essay.Avatar_ID
@@ -497,42 +524,34 @@
           LIMIT 5`,
       );
       return Promise.all(
-        data.map(
-          async (data: {
-            Forum_ID: string;
-            Essay_ID: number;
-            Avatar_ID: string;
-            Avatar_Name: string;
-            Date: string;
-            Title: string;
-            Text: string;
-          }) => {
-            const forumID = data["Forum_ID"];
-            const forumTitles = await this.getForumTitles(forumID);
-            if (forumTitles) {
-              const essayID = Number(data["Essay_ID"]);
-              return {
-                forumID,
-                forumTitle: forumTitles.title,
-                forumTitle1042: forumTitles.title1042,
-                essayID,
-                avatarID: data["Avatar_ID"],
-                avatarName: data["Avatar_Name"],
-                date: data["Date"],
-                title: data["Title"],
-                text: data["Text"],
-                commentCount: Number(await this.getCommentCount(essayID)),
-                hitCount: Number(await this.getHitCount(essayID)),
-              };
-            }
-          },
-        ),
+        data.map(async (data) => {
+          const forumID = data["Forum_ID"];
+          const forumTitles = await this.getForumTitles(forumID);
+          if (!forumTitles) {
+            throw new Error(forumID);
+          }
+
+          const essayID = Number(data["Essay_ID"]);
+          return {
+            forumID,
+            forumTitle: forumTitles.title,
+            forumTitle1042: forumTitles.title1042,
+            essayID,
+            avatarID: data["Avatar_ID"],
+            avatarName: data["Avatar_Name"],
+            date: data["Date"],
+            title: data["Title"],
+            text: data["Text"],
+            commentCount: Number(await this.getCommentCount(essayID)),
+            hitCount: Number(await this.getHitCount(essayID)),
+          };
+        }),
       );
     });
   }
 
   async getCommentCount(essayID: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = (
         await db.query(
           `SELECT COUNT(Comment_ID) AS Comment_Count
@@ -548,7 +567,7 @@
   }
 
   async getHitCount(essayID: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = (
         await db.query(
           `SELECT COUNT(Avatar_IP) AS Hit_Count
@@ -581,7 +600,7 @@
     essayID: number,
     fileNames: [string, string][],
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       for await (const [fileName, postedFileName] of fileNames) {
         await db.query(
           `INSERT INTO tn_file
@@ -592,7 +611,7 @@
     });
   }
 
-  async getFileNames(db: PoolConnection, essayID: number) {
+  async getFileNames(db: Connection, essayID: number) {
     return (
       await db.query<{ File_Name: string }[]>(
         `SELECT File_Name
@@ -604,7 +623,7 @@
   }
 
   async postEssay(
-    db: PoolConnection,
+    db: Connection,
     forumID: string,
     avatarID: string,
     datetime: string,
@@ -620,7 +639,7 @@
   }
 
   async doModifyEssay(
-    db: PoolConnection,
+    db: Connection,
     essayID: number,
     avatarID: string,
     title: string,
@@ -644,7 +663,7 @@
   }
 
   async wipeEssay(essayID: number, avatarID: string, level: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { affectedRows } = isTaehui(level)
         ? await db.query(
             `DELETE 
@@ -663,7 +682,7 @@
   }
 
   async getForumTitles(forumID: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = (
         await db.query<{ Title: string; Title_1042: string }[]>(
           `SELECT Title, Title_1042
@@ -683,7 +702,7 @@
   }
 
   async getEssay(essayID: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = (
         await db.query<
           {
@@ -728,7 +747,7 @@
   }
 
   async getEssayCount(forumID: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return (
         await db.query<{ Essay_Count: number }[]>(
           `SELECT COUNT(Essay_ID) AS Essay_Count
@@ -741,7 +760,7 @@
   }
 
   async getEssays(forumID: string, page: number, viewUnit: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = await db.query<
         {
           Essay_ID: number;
@@ -776,7 +795,7 @@
   }
 
   async wantEssay(wantInput: string, page: number, viewUnit: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return Promise.all(
         (
           await db.query<
@@ -814,7 +833,7 @@
   }
 
   async wantComment(wantInput: string, page: number, viewUnit: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return Promise.all(
         (
           await db.query<
@@ -849,7 +868,7 @@
   }
 
   async postEssayHit(essayID: number, avatarIP: string, date: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       try {
         await db.query(
           `INSERT INTO tn_essay_hit
@@ -865,7 +884,7 @@
   }
 
   async getEssayHit(essayID: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return Number(
         (
           await db.query(
@@ -874,7 +893,7 @@
               WHERE Essay_ID = ?`,
             [essayID],
           )
-        )[0]?.Count ?? 0,
+        )[0]?.["Count"] ?? 0,
       );
     });
   }
@@ -886,7 +905,7 @@
     datetime: string,
     text: string,
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { insertId } = await db.query(
         `INSERT INTO tn_comment(Target_Comment_ID, Essay_ID, Avatar_ID, Date, Text)
           VALUES(?, ?, ?, ?, ?)`,
@@ -902,7 +921,7 @@
     text: string,
     level: number,
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { affectedRows } = isTaehui(level)
         ? await db.query(
             `UPDATE tn_comment
@@ -921,7 +940,7 @@
   }
 
   async wipeComment(commentID: number, avatarID: string, level: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { affectedRows } = isTaehui(level)
         ? await db.query(
             `DELETE 
@@ -940,7 +959,7 @@
   }
 
   async getComments(essayID: number) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = await db.query<
         {
           Comment_ID: number;
@@ -969,7 +988,7 @@
   }
 
   async getLatestComments() {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = await db.query<
         {
           Comment_ID: number;
@@ -1000,7 +1019,7 @@
   }
 
   async getCommentary() {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = await db.query<
         {
           Commentary_ID: number;
@@ -1029,7 +1048,7 @@
     datetime: string,
     text: string,
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { insertId } = await db.query(
         `INSERT INTO tn_commentary(Avatar_Name, Avatar_Cipher, Avatar_IP, Date, Text)
           VALUES(?, ?, ?, ?, ?)`,
@@ -1044,7 +1063,7 @@
     avatarCipher: string,
     text: string,
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { affectedRows } = await db.query(
         `UPDATE tn_commentary
           SET Text = ?
@@ -1056,7 +1075,7 @@
   }
 
   async wipeCommentary(commentaryID: number, avatarCipher: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { affectedRows } = await db.query(
         `DELETE 
           FROM tn_commentary
@@ -1068,7 +1087,7 @@
   }
 
   async getHit(date: string, dateBefore: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const data = await db.query(
         `SELECT DATE_FORMAT(Date, "%Y-%m-%d") AS Date, COUNT(Avatar_IP) AS Count
           FROM tn_hit
@@ -1083,14 +1102,15 @@
           ] ?? 0,
         ),
         Number(
-          data.find(({ Date }: { Date: string }) => Date === date)?.Count ?? 0,
+          data.find(({ Date }: { Date: string }) => Date === date)?.["Count"] ??
+            0,
         ),
       ];
     });
   }
 
   async postHit(avatarIP: string, date: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       try {
         await db.query(
           `INSERT INTO tn_hit
@@ -1108,7 +1128,7 @@
   }
 
   async postFileHit(fileName: string, avatarIP: string, date: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       try {
         await db.query(
           `INSERT INTO tn_file_hit
@@ -1124,7 +1144,7 @@
   }
 
   async getPostedFileName(fileName: string) {
-    return this.getPool(
+    return this.getDB(
       async (db) =>
         (
           await db.query<{ Posted_File_Name: string }[]>(
@@ -1138,7 +1158,7 @@
   }
 
   async getFileHit(fileName: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return Number(
         (
           await db.query(
@@ -1153,7 +1173,7 @@
   }
 
   async getLatestAvatars() {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return Promise.all(
         ["Date", "Last_Date"].map(async (date) => {
           return (
@@ -1192,7 +1212,7 @@
     text: string,
     datetime: string,
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { insertId } = await db.query(
         `INSERT INTO tn_auto_essay(Forum_ID, Avatar_ID, Title, Text, Date)
           VALUES(?, ?, ?, ?, ?)`,
@@ -1203,7 +1223,7 @@
   }
 
   async getAutoEssays(forumID: string, avatarID: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       return (
         await db.query<
           {
@@ -1234,7 +1254,7 @@
     text: string,
     datetime: string,
   ) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { affectedRows } = await db.query(
         `UPDATE tn_auto_essay
           SET Title = ?, Text = ?, Date = ?
@@ -1246,7 +1266,7 @@
   }
 
   async wipeAutoEssay(autoEssayID: number, avatarID: string) {
-    return this.getPool(async (db) => {
+    return this.getDB(async (db) => {
       const { affectedRows } = await db.query(
         `DELETE
           FROM tn_auto_essay
@@ -1256,11 +1276,6 @@
       return affectedRows > 0;
     });
   }
-}
+})();
 
-declare module globalThis {
-  let db: DB;
-}
-
-if (!globalThis.db) globalThis.db = new DB();
-export default globalThis.db;
+export default db;
diff --git a/taehui-fe/src/app/www/system/Totem.ts b/taehui-fe/src/app/www/system/Totem.ts
new file mode 100644
index 0000000..180714f
--- /dev/null
+++ b/taehui-fe/src/app/www/system/Totem.ts
@@ -0,0 +1,12 @@
+import { Pool } from "mariadb";
+import { createClient } from "redis";
+
+const totem = new (class {
+  pool?: Pool;
+
+  constructor() {
+    createClient({
+      url: process.env.TOTEM,
+    });
+  }
+})();
diff --git a/taehui-fe/src/assets/dark-honeycomb.png b/taehui-fe/src/assets/dark-honeycomb.png
new file mode 100644
index 0000000..6ac0c5f
--- /dev/null
+++ b/taehui-fe/src/assets/dark-honeycomb.png
Binary files differ
diff --git a/taehui-ts/src/language.ts b/taehui-ts/src/language.ts
index 2bc117b..e28b631 100644
--- a/taehui-ts/src/language.ts
+++ b/taehui-ts/src/language.ts
@@ -1,17 +1,7 @@
-import { parse } from "qs";
+import { useLocale } from "next-intl";
 
-export const getLanguage = () => {
-  if (typeof window === "object") {
-    let { language } = parse(window.location.search, {
-      ignoreQueryPrefix: true,
-    });
-    language = (language && String(language)) ?? window.navigator.language;
-    if (language.startsWith("ko")) {
-      return "ko-KR";
-    } else {
-      return "en-US";
-    }
-  } else {
-    return "en-US";
-  }
+export const useLanguage = () => {
+  const locale = useLocale();
+
+  return locale.startsWith("ko") ? "ko-KR" : "en-US";
 };