diff --git a/frontend/package.json b/frontend/package.json
index e871cd1..07bf65d 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,7 +22,6 @@
     "masonic": "^4.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-i18next": "^15.5.1",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "react-router": "^7.5.3",
diff --git a/frontend/public/cp.webp b/frontend/public/cp.webp
new file mode 100644
index 0000000..cdc16dc
Binary files /dev/null and b/frontend/public/cp.webp differ
diff --git a/frontend/src/components/charactor_edit.tsx b/frontend/src/components/charactor_edit.tsx
new file mode 100644
index 0000000..8217917
--- /dev/null
+++ b/frontend/src/components/charactor_edit.tsx
@@ -0,0 +1,97 @@
+import { useState } from "react";
+import { CharactorParams } from "../network/models";
+import { network } from "../network/network";
+import showToast from "./toast";
+import { useTranslation } from "../utils/i18n";
+
+export default function CharactorEditor({charactor, setCharactor, onDelete}: {
+    charactor: CharactorParams;
+    setCharactor: (charactor: CharactorParams) => void;
+    onDelete: () => void;
+}) {
+    const { t } = useTranslation();
+    const [isUploading, setUploading] = useState(false);
+
+    const uploadImage = async () => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+      input.onchange = async () => {
+        if (!input.files || input.files.length === 0) {
+          return;
+        }
+        setUploading(true);
+        const file = input.files[0];
+        const result = await network.uploadImage(file);
+        setUploading(false);
+        if (result.success) {
+          setCharactor({
+            ...charactor,
+            image: result.data!,
+          });
+        } else {
+          showToast({
+            type: "error",
+            message: `Failed to upload image`,
+          })
+        }
+      };
+      input.click();
+    }
+
+    return <div className="h-52 shadow rounded-2xl overflow-clip flex">
+      <div className="w-36 h-full cursor-pointer relative" onClick={uploadImage}>
+        {
+          isUploading ?
+          <div className="absolute inset-0 bg-black/50 flex items-center justify-center z-10">
+            <span className="loading loading-spinner loading-lg text-white"></span>
+          </div>
+          : null
+        }
+        <img 
+          className="w-full h-full object-cover bg-base-200/80 hover:bg-base-200 transition-colors" 
+          src={charactor.image === 0 ? "/cp.webp" : network.getImageUrl(charactor.image)} alt={charactor.name} 
+        />
+      </div>
+      
+      <div className="flex-1 p-4 flex flex-col gap-2">
+        <div className="flex gap-2 items-center">
+          <input
+            type="text"
+            className="input input-sm input-bordered flex-1"
+            placeholder={t("Name")}
+            value={charactor.name}
+            onChange={(e) => setCharactor({ ...charactor, name: e.target.value })}
+          />
+          <button 
+            className="btn btn-sm btn-error btn-square"
+            onClick={onDelete}
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        
+        <input
+          type="text"
+          className="input input-sm input-bordered"
+          placeholder="CV"
+          value={charactor.cv}
+          onChange={(e) => setCharactor({ ...charactor, cv: e.target.value })}
+        />
+        
+        <div className="flex-1">
+          <textarea
+            className="textarea textarea-bordered w-full h-full resize-none text-xs"
+            placeholder={t("Aliases (one per line)")}
+            value={charactor.alias.join('\n')}
+            onChange={(e) => setCharactor({ 
+              ...charactor, 
+              alias: e.target.value.split('\n').filter(line => line.trim() !== '') 
+            })}
+          />
+        </div>
+      </div>
+    </div>;
+}
\ No newline at end of file
diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts
index 8b7971d..542d687 100644
--- a/frontend/src/i18n.ts
+++ b/frontend/src/i18n.ts
@@ -256,6 +256,8 @@ export const i18nData = {
       "Private": "私有",
       "View {count} more replies": "查看另外 {count} 条回复",
       "Survival time": "存活时间",
+      "Characters": "角色",
+      "Aliases (one per line)": "别名（每行一个）",
     },
   },
   "zh-TW": {
diff --git a/frontend/src/network/models.ts b/frontend/src/network/models.ts
index bf73d18..2a33747 100644
--- a/frontend/src/network/models.ts
+++ b/frontend/src/network/models.ts
@@ -49,6 +49,14 @@ export interface CreateResourceParams {
   images: number[];
   gallery: number[];
   gallery_nsfw: number[];
+  charactors: CharactorParams[];
+}
+
+export interface CharactorParams {
+  name: string;
+  alias: string[];
+  cv: string;
+  image: number;
 }
 
 export interface Image {
@@ -88,6 +96,7 @@ export interface ResourceDetails {
   related: Resource[];
   gallery: number[];
   galleryNsfw: number[];
+  charactors: CharactorParams[];
 }
 
 export interface Storage {
diff --git a/frontend/src/pages/edit_resource_page.tsx b/frontend/src/pages/edit_resource_page.tsx
index 8ea754a..14b94a6 100644
--- a/frontend/src/pages/edit_resource_page.tsx
+++ b/frontend/src/pages/edit_resource_page.tsx
@@ -6,7 +6,7 @@ import {
   MdDelete,
   MdOutlineInfo,
 } from "react-icons/md";
-import { Tag } from "../network/models.ts";
+import { CharactorParams, Tag } from "../network/models.ts";
 import { network } from "../network/network.ts";
 import { useNavigate, useParams } from "react-router";
 import showToast from "../components/toast.ts";
@@ -20,6 +20,7 @@ import {
   SelectAndUploadImageButton,
   UploadClipboardImageButton,
 } from "../components/image_selector.tsx";
+import CharactorEditor from "../components/charactor_edit.tsx";
 
 export default function EditResourcePage() {
   const [title, setTitle] = useState<string>("");
@@ -30,6 +31,7 @@ export default function EditResourcePage() {
   const [links, setLinks] = useState<{ label: string; url: string }[]>([]);
   const [galleryImages, setGalleryImages] = useState<number[]>([]);
   const [galleryNsfw, setGalleryNsfw] = useState<number[]>([]);
+  const [charactors, setCharactors] = useState<CharactorParams[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [isSubmitting, setSubmitting] = useState(false);
   const [isLoading, setLoading] = useState(true);
@@ -59,6 +61,7 @@ export default function EditResourcePage() {
         setLinks(data.links ?? []);
         setGalleryImages(data.gallery ?? []);
         setGalleryNsfw(data.galleryNsfw ?? []);
+        setCharactors(data.charactors ?? []);
         setLoading(false);
       } else {
         showToast({ message: t("Failed to load resource"), type: "error" });
@@ -104,6 +107,7 @@ export default function EditResourcePage() {
       links: links,
       gallery: galleryImages,
       gallery_nsfw: galleryNsfw,
+      charactors: charactors,
     });
     if (res.success) {
       setSubmitting(false);
@@ -420,6 +424,39 @@ export default function EditResourcePage() {
           />
         </div>
         <div className={"h-4"}></div>
+        <div>
+          <p className={"my-1"}>{t("Characters")}</p>
+          <div className="grid grid-cols-1 md:grid-cols-2 my-2 gap-4">
+            {
+              charactors.map((charactor, index) => {
+                return <CharactorEditor 
+                  charactor={charactor} 
+                  setCharactor={(newCharactor) => {
+                    const newCharactors = [...charactors];
+                    newCharactors[index] = newCharactor;
+                    setCharactors(newCharactors);
+                  }} 
+                  onDelete={() => {
+                    const newCharactors = [...charactors];
+                    newCharactors.splice(index, 1);
+                    setCharactors(newCharactors);
+                  }} />;
+              })
+            }
+          </div>
+          <div className="flex">
+            <button
+              className={"btn my-2"}
+              type={"button"}
+              onClick={() => {
+                setCharactors([...charactors, { name: "", alias: [], cv: "", image: 0 }]);
+              }}
+            >
+              <MdAdd />
+              {t("Add Character")}
+            </button>
+          </div>
+        </div>
         {error && (
           <div role="alert" className="alert alert-error my-2 shadow">
             <svg
diff --git a/frontend/src/pages/publish_page.tsx b/frontend/src/pages/publish_page.tsx
index 9ac027f..34e1124 100644
--- a/frontend/src/pages/publish_page.tsx
+++ b/frontend/src/pages/publish_page.tsx
@@ -6,7 +6,7 @@ import {
   MdDelete,
   MdOutlineInfo,
 } from "react-icons/md";
-import { Tag } from "../network/models.ts";
+import { CharactorParams, Tag } from "../network/models.ts";
 import { network } from "../network/network.ts";
 import { useNavigate } from "react-router";
 import { useTranslation } from "../utils/i18n";
@@ -19,6 +19,7 @@ import {
   SelectAndUploadImageButton,
   UploadClipboardImageButton,
 } from "../components/image_selector.tsx";
+import CharactorEditor from "../components/charactor_edit.tsx";
 
 export default function PublishPage() {
   const [title, setTitle] = useState<string>("");
@@ -31,7 +32,7 @@ export default function PublishPage() {
   const [galleryNsfw, setGalleryNsfw] = useState<number[]>([]);
   const [error, setError] = useState<string | null>(null);
   const [isSubmitting, setSubmitting] = useState(false);
-
+  const [charactors, setCharactors] = useState<CharactorParams[]>([]);
   const isFirstLoad = useRef(true);
 
   useEffect(() => {
@@ -110,6 +111,7 @@ export default function PublishPage() {
       links: links,
       gallery: galleryImages,
       gallery_nsfw: galleryNsfw,
+      charactors: charactors,
     });
     if (res.success) {
       localStorage.removeItem("publish_data");
@@ -429,6 +431,39 @@ export default function PublishPage() {
           />
         </div>
         <div className={"h-4"}></div>
+        <div>
+          <p className={"my-1"}>{t("Characters")}</p>
+          <div className="grid grid-cols-1 md:grid-cols-2 my-2 gap-4">
+            {
+              charactors.map((charactor, index) => {
+                return <CharactorEditor 
+                  charactor={charactor} 
+                  setCharactor={(newCharactor) => {
+                    const newCharactors = [...charactors];
+                    newCharactors[index] = newCharactor;
+                    setCharactors(newCharactors);
+                  }} 
+                  onDelete={() => {
+                    const newCharactors = [...charactors];
+                    newCharactors.splice(index, 1);
+                    setCharactors(newCharactors);
+                  }} />;
+              })
+            }
+          </div>
+          <div className="flex">
+            <button
+              className={"btn my-2"}
+              type={"button"}
+              onClick={() => {
+                setCharactors([...charactors, { name: "", alias: [], cv: "", image: 0 }]);
+              }}
+            >
+              <MdAdd />
+              {t("Add Character")}
+            </button>
+          </div>
+        </div>
         {error && (
           <div role="alert" className="alert alert-error my-2 shadow">
             <svg
diff --git a/frontend/src/pages/resource_details_page.tsx b/frontend/src/pages/resource_details_page.tsx
index ca23c6e..afd903c 100644
--- a/frontend/src/pages/resource_details_page.tsx
+++ b/frontend/src/pages/resource_details_page.tsx
@@ -18,6 +18,7 @@ import {
   Tag,
   Resource,
   Collection,
+  CharactorParams,
 } from "../network/models.ts";
 import { network } from "../network/network.ts";
 import showToast from "../components/toast.ts";
@@ -469,6 +470,7 @@ const context = createContext<() => void>(() => {});
 
 function Article({ resource }: { resource: ResourceDetails }) {
   return (
+    <>
     <article>
       <Markdown
         remarkPlugins={[remarkGfm]}
@@ -597,6 +599,9 @@ function Article({ resource }: { resource: ResourceDetails }) {
         {resource.article.replaceAll("\n", "  \n")}
       </Markdown>
     </article>
+    <div className="border-b border-base-300 h-8"></div>
+    <Characters charactors={resource.charactors} />
+    </>
   );
 }
 
@@ -2058,4 +2063,59 @@ function GalleryImage({src, nfsw}: {src: string, nfsw: boolean}) {
       )}
     </div>
   );
+}
+
+function Characters({ charactors }: { charactors: CharactorParams[] }) {
+  const { t } = useTranslation();
+
+  if (!charactors || charactors.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div className="mt-8">
+      <h3 className="text-xl font-bold mb-4">{t("Characters")}</h3>
+      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+        {charactors.map((charactor, index) => (
+          <CharacterCard key={index} charactor={charactor} />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function CharacterCard({ charactor }: { charactor: CharactorParams }) {
+  const navigate = useNavigate();
+
+  const handleCVClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (charactor.cv) {
+      navigate(`/search?keyword=${encodeURIComponent(charactor.cv)}`);
+    }
+  };
+
+  return (
+    <div className="group relative aspect-[3/4] overflow-hidden rounded-lg bg-base-200 shadow-sm">
+      <img
+        src={network.getImageUrl(charactor.image)}
+        alt={charactor.name}
+        className="w-full h-full object-cover"
+      />
+      
+      <div className="absolute bottom-1 left-1 right-1 px-2 py-2 border border-base-100/40 rounded-lg bg-base-100/60">
+        <h4 className="font-semibold text-sm leading-tight line-clamp border border-transparent px-1">
+          {charactor.name}
+        </h4>
+        
+        {charactor.cv && (
+          <button
+            onClick={handleCVClick}
+            className="hover:bg-base-200/80 px-1 border border-transparent hover:border-base-300/50 rounded-sm text-xs transition-colors cursor-pointer"
+          >
+            CV: {charactor.cv}
+          </button>
+        )}
+      </div>
+    </div>
+  );
 }
\ No newline at end of file