diff --git a/package.json b/package.json
index ccd9ac34..d5b17c29 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,8 @@
     "vue-json-viewer": "^3.0.4",
     "vue-router": "^4.3.0",
     "vuetify": "^3.5.8",
-    "wcag-color": "^1.1.1"
+    "wcag-color": "^1.1.1",
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.5.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1001c62f..e0b40c53 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -65,6 +65,9 @@ dependencies:
   wcag-color:
     specifier: ^1.1.1
     version: 1.1.1
+  xml-js:
+    specifier: ^1.6.11
+    version: 1.6.11
 
 devDependencies:
   '@tauri-apps/cli':
@@ -4165,6 +4168,10 @@ packages:
       is-regex: 1.1.4
     dev: true
 
+  /sax@1.3.0:
+    resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
+    dev: false
+
   /select@1.1.2:
     resolution: {integrity: sha512-OwpTSOfy6xSs1+pwcNrv0RBMOzI39Lp3qQKUTPVVPRjCdNa5JH/oPRiqsesIskK8TVgmRiHwO4KXlV2Li9dANA==}
     dev: false
@@ -5128,6 +5135,13 @@ packages:
       signal-exit: 4.1.0
     dev: true
 
+  /xml-js@1.6.11:
+    resolution: {integrity: sha512-7rVi2KMfwfWFl+GpPg6m80IVMWXLRjO+PxTq7V2CDhoGak0wzYzFgUY2m4XJ47OGdXd8eLE8EmwfAmdjw7lC1g==}
+    hasBin: true
+    dependencies:
+      sax: 1.3.0
+    dev: false
+
   /xml-name-validator@4.0.0:
     resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
     engines: {node: '>=12'}
diff --git a/src/components/overlay/to-arcBrith.vue b/src/components/overlay/to-arcBrith.vue
new file mode 100644
index 00000000..4f95e623
--- /dev/null
+++ b/src/components/overlay/to-arcBrith.vue
@@ -0,0 +1,252 @@
+<template>
+  <TOverlay v-model="visible" hide :to-click="onCancel" blur-val="5px">
+    <div class="toab-container" v-if="props.data">
+      <div class="toab-img">
+        <img :src="props.data.take_picture[Number(props.choice)]" alt="顶部图像" />
+        <div class="toab-dialog" v-show="showText">
+          <div v-for="(item, index) in textParse" :key="index" class="toab-dialog-item">
+            <div class="toab-dialog-item-icon" v-if="item.icon" :title="item.name">
+              <img :src="item.icon" alt="对白头像" />
+            </div>
+            <div v-else-if="item.name !== '未知'" class="toab-dialog-item-name">
+              {{ item.name }}
+            </div>
+            <div :class="item.icon ? 'toab-dialog-item-text' : 'toab-dialog-item-text-mini'">
+              {{ item.text }}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="toab-top-tools">
+        <v-icon @click="onCopy" title="复制到剪贴板">mdi-content-copy</v-icon>
+        <v-icon @click="onDownload" title="下载到本地">mdi-download</v-icon>
+        <v-icon @click="loadText" :title="showText ? '隐藏对白' : '显示对白'">
+          {{ showText ? "mdi-eye-off" : "mdi-eye" }}
+        </v-icon>
+      </div>
+    </div>
+  </TOverlay>
+</template>
+<script setup lang="ts">
+import { http } from "@tauri-apps/api";
+import { ResponseType } from "@tauri-apps/api/http";
+import { computed, onMounted, ref, watch } from "vue";
+import { xml2json } from "xml-js";
+
+import { copyToClipboard, getImageBuffer, saveCanvasImg } from "../../utils/TGShare";
+import { bytesToSize } from "../../utils/toolFunc";
+import showSnackbar from "../func/snackbar";
+import TOverlay from "../main/t-overlay.vue";
+
+interface ToArcBirthProps {
+  modelValue: boolean;
+  data?: TGApp.Archive.Birth.DrawItem;
+  choice: boolean;
+}
+
+interface ToArcBirthEmits {
+  (event: "update:modelValue", value: boolean): void;
+}
+
+const props = defineProps<ToArcBirthProps>();
+const emits = defineEmits<ToArcBirthEmits>();
+const buffer = ref<Uint8Array | null>(null);
+const showText = ref(false);
+const textParse = ref<Array<XmlTextParse>>([]);
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emits("update:modelValue", value);
+  },
+});
+
+onMounted(loadData);
+watch(() => props.data, loadData);
+watch(() => props.choice, loadData);
+
+interface XmlKeyMap {
+  id: string;
+  rel: string;
+  group?: string;
+  icon: string;
+}
+
+interface XmlTextList {
+  chara: string;
+  img: string;
+  text: string;
+}
+
+interface XmlTextParse {
+  name: string;
+  icon?: string;
+  text: string;
+}
+
+function loadData() {
+  buffer.value = null;
+  textParse.value = [];
+  showText.value = false;
+}
+
+async function onCopy(): Promise<void> {
+  if (!props.data) return;
+  const image = props.data.take_picture[Number(props.choice)];
+  if (buffer.value === null) buffer.value = await getImageBuffer(image);
+  const size = bytesToSize(buffer.value.byteLength);
+  await copyToClipboard(buffer.value);
+  showSnackbar({ text: `图片已复制到剪贴板，大小：${size}` });
+}
+
+async function onDownload() {
+  if (!props.data) return;
+  const image = props.data.take_picture[Number(props.choice)];
+  if (buffer.value === null) buffer.value = await getImageBuffer(image);
+  const size = bytesToSize(buffer.value.byteLength);
+  await saveCanvasImg(buffer.value, Date.now().toString());
+  showSnackbar({ text: `图片已下载到本地，大小：${size}` });
+}
+
+async function loadText(): Promise<void> {
+  if (!props.data) return;
+  if (textParse.value.length > 0) {
+    showText.value = !showText.value;
+    return;
+  }
+  const resSource: any = await parseXml(props.data.gal_resource);
+  const keyMap: XmlKeyMap[] = resSource["elements"][0]["elements"][0]["elements"]
+    .map((item: any) => {
+      if (item["name"] === "chara")
+        return <XmlKeyMap>{
+          id: item["attributes"]["id"],
+          rel: item["attributes"]["rel"],
+          group: item["attributes"]["group"],
+          icon: item["attributes"]["src"],
+        };
+    })
+    .filter((item: any) => item !== undefined);
+  const resXml = await parseXml(props.data.gal_xml);
+  const textList: XmlTextList[] = resXml["elements"][0]["elements"][0]["elements"][0]["elements"]
+    .map((item: any) => {
+      if (item["name"] === "simple_dialog") {
+        let img = item["attributes"]["img"];
+        if (!props.choice && img) img = img.replace("aether", "lumine");
+        return <XmlTextList>{
+          chara: item["attributes"]["chara"],
+          img: img,
+          text: item["elements"][0]["text"],
+        };
+      }
+    })
+    .filter((item: any) => item !== undefined);
+  textParse.value = textList.map((item: XmlTextList) => {
+    const key = keyMap.find((keyItem: XmlKeyMap) => keyItem.id === item.img);
+    if (!key) {
+      return {
+        name: "未知",
+        text: item.text,
+      };
+    }
+    return {
+      name: key.group ?? key.id,
+      text: item.text,
+      icon: key.icon,
+    };
+  });
+  showText.value = true;
+}
+
+async function parseXml(link: string) {
+  const res = await http.fetch<string>(link, {
+    method: "GET",
+    responseType: ResponseType.Text,
+  });
+  return JSON.parse(xml2json(res.data));
+}
+
+function onCancel() {
+  visible.value = false;
+}
+</script>
+<style lang="css" scoped>
+.toab-container {
+  position: relative;
+  display: flex;
+  width: 50vw;
+  align-items: center;
+  justify-content: center;
+}
+
+.toab-img {
+  position: relative;
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.toab-img img {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+}
+
+.toab-top-tools {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 5px;
+  background-color: var(--common-shadow-t-2);
+}
+
+.toab-dialog {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  max-height: 40vh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  -webkit-backdrop-filter: blur(5px);
+  backdrop-filter: blur(5px);
+  background: var(--common-shadow-t-2);
+  color: var(--box-text-1);
+  overflow-y: auto;
+}
+
+.toab-dialog-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.toab-dialog-item-icon {
+  width: 50px;
+  min-width: 50px;
+}
+
+.toab-dialog-item-name {
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+.toab-dialog-item-text {
+  font-size: 1.2rem;
+  word-break: break-all;
+}
+
+.toab-dialog-item-text-mini {
+  margin-left: 3rem;
+  font-size: 1rem;
+  opacity: 0.8;
+  word-break: break-all;
+}
+</style>
diff --git a/src/pages/Archive/Birthday.vue b/src/pages/Archive/Birthday.vue
index 33e120d4..6a85b4af 100644
--- a/src/pages/Archive/Birthday.vue
+++ b/src/pages/Archive/Birthday.vue
@@ -1,29 +1,37 @@
 <template>
   <div class="ab-container">
     <div class="ab-draw-top">
-      <v-switch v-model="isLumine" :label="isLumine ? '荧' : '空'" />
+      <v-switch v-model="isAether" :label="isAether ? '空' : '荧'" />
     </div>
     <div class="ab-draw-grid">
-      <div v-for="item in selectedItem" :key="item.op_id" class="ab-draw-item">
-        <v-img
-          :src="item.take_picture[isLumine ? 0 : 1]"
-          :lazy-src="item.unread_picture[isLumine ? 0 : 1]"
-        />
-        <span>{{ item.year }} {{ item.birthday }} {{ item.role_name }}</span>
+      <div v-for="item in selectedItem" :key="item.op_id" class="ab-draw">
+        <div class="ab-draw-cover" @click="showImg(item)">
+          <img
+            :src="item.take_picture[Number(isAether)]"
+            :data-src="item.unread_picture[Number(isAether)]"
+            :alt="item.word_text"
+          />
+        </div>
+        <div class="ab-di-info">{{ item.year }} {{ item.birthday }} {{ item.role_name }}</div>
+        <div class="ab-di-text" :title="item.word_text">{{ item.word_text }}</div>
       </div>
     </div>
     <v-pagination v-model="page" :length="length" />
   </div>
+  <ToArcBrith v-model="showOverlay" :data="current" :choice="isAether" />
 </template>
 <script lang="ts" setup>
 import { onMounted, ref, watch, watchEffect } from "vue";
 
+import ToArcBrith from "../../components/overlay/to-arcBrith.vue";
 import { ArcBirDraw } from "../../data";
 
 const page = ref(1);
 const length = ref(0);
 const selectedItem = ref<TGApp.Archive.Birth.DrawItem[]>(ArcBirDraw);
-const isLumine = ref<boolean>(true);
+const current = ref<TGApp.Archive.Birth.DrawItem>();
+const isAether = ref<boolean>(false);
+const showOverlay = ref(false);
 
 watch(page, (val) => {
   const start = (val - 1) * 12;
@@ -38,6 +46,11 @@ watchEffect(() => {
 onMounted(() => {
   length.value = Math.ceil(ArcBirDraw.length / 12);
 });
+
+function showImg(item: TGApp.Archive.Birth.DrawItem) {
+  current.value = item;
+  showOverlay.value = true;
+}
 </script>
 <style lang="css" scoped>
 .ab-container {
@@ -59,11 +72,54 @@ onMounted(() => {
   display: grid;
   width: 100%;
   height: 100%;
-  column-gap: 10px;
+  gap: 10px;
   grid-template-columns: repeat(4, 1fr);
 }
 
-.ab-draw-item {
-  text-align: center;
+.ab-draw {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+.ab-draw-cover {
+  overflow: hidden;
+  width: 100%;
+  max-width: 100%;
+  border-radius: 5px;
+  aspect-ratio: 125 / 54;
+}
+
+.ab-draw-cover img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  transition: all 0.3s ease-in-out;
+}
+
+.ab-draw-cover img:hover {
+  overflow: hidden;
+  cursor: pointer;
+  transform: scale(1.1);
+  transition: all 0.3s ease-in-out;
+}
+
+.ab-di-info {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+}
+
+.ab-di-text {
+  width: fit-content;
+  max-width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  font-size: 14px;
+  line-height: 1.5;
+  opacity: 0.8;
 }
 </style>