diff --git a/assets/avatars/1001.png b/assets/avatars/1001.png
new file mode 100644
index 0000000..9c28a93
Binary files /dev/null and b/assets/avatars/1001.png differ
diff --git a/assets/avatars/1002.png b/assets/avatars/1002.png
new file mode 100644
index 0000000..e1440ee
Binary files /dev/null and b/assets/avatars/1002.png differ
diff --git a/assets/avatars/1003.png b/assets/avatars/1003.png
new file mode 100644
index 0000000..82378db
Binary files /dev/null and b/assets/avatars/1003.png differ
diff --git a/assets/avatars/1004.png b/assets/avatars/1004.png
new file mode 100644
index 0000000..1ddcd71
Binary files /dev/null and b/assets/avatars/1004.png differ
diff --git a/assets/avatars/1005.png b/assets/avatars/1005.png
new file mode 100644
index 0000000..93681ea
Binary files /dev/null and b/assets/avatars/1005.png differ
diff --git a/assets/avatars/1006.png b/assets/avatars/1006.png
new file mode 100644
index 0000000..2e18ea8
Binary files /dev/null and b/assets/avatars/1006.png differ
diff --git a/assets/avatars/1008.png b/assets/avatars/1008.png
new file mode 100644
index 0000000..3d3aaa1
Binary files /dev/null and b/assets/avatars/1008.png differ
diff --git a/assets/avatars/1009.png b/assets/avatars/1009.png
new file mode 100644
index 0000000..3f5767f
Binary files /dev/null and b/assets/avatars/1009.png differ
diff --git a/assets/avatars/1013.png b/assets/avatars/1013.png
new file mode 100644
index 0000000..3574b3f
Binary files /dev/null and b/assets/avatars/1013.png differ
diff --git a/assets/avatars/1101.png b/assets/avatars/1101.png
new file mode 100644
index 0000000..0144510
Binary files /dev/null and b/assets/avatars/1101.png differ
diff --git a/assets/avatars/1102.png b/assets/avatars/1102.png
new file mode 100644
index 0000000..8360997
Binary files /dev/null and b/assets/avatars/1102.png differ
diff --git a/assets/avatars/1103.png b/assets/avatars/1103.png
new file mode 100644
index 0000000..822764f
Binary files /dev/null and b/assets/avatars/1103.png differ
diff --git a/assets/avatars/1104.png b/assets/avatars/1104.png
new file mode 100644
index 0000000..6bd0784
Binary files /dev/null and b/assets/avatars/1104.png differ
diff --git a/assets/avatars/1105.png b/assets/avatars/1105.png
new file mode 100644
index 0000000..5b2ae6c
Binary files /dev/null and b/assets/avatars/1105.png differ
diff --git a/assets/avatars/1106.png b/assets/avatars/1106.png
new file mode 100644
index 0000000..473e7fb
Binary files /dev/null and b/assets/avatars/1106.png differ
diff --git a/assets/avatars/1107.png b/assets/avatars/1107.png
new file mode 100644
index 0000000..7c38557
Binary files /dev/null and b/assets/avatars/1107.png differ
diff --git a/assets/avatars/1108.png b/assets/avatars/1108.png
new file mode 100644
index 0000000..667a346
Binary files /dev/null and b/assets/avatars/1108.png differ
diff --git a/assets/avatars/1109.png b/assets/avatars/1109.png
new file mode 100644
index 0000000..1238fa3
Binary files /dev/null and b/assets/avatars/1109.png differ
diff --git a/assets/avatars/1110.png b/assets/avatars/1110.png
new file mode 100644
index 0000000..7e8abd3
Binary files /dev/null and b/assets/avatars/1110.png differ
diff --git a/assets/avatars/1111.png b/assets/avatars/1111.png
new file mode 100644
index 0000000..ea657cc
Binary files /dev/null and b/assets/avatars/1111.png differ
diff --git a/assets/avatars/1112.png b/assets/avatars/1112.png
new file mode 100644
index 0000000..b6542d5
Binary files /dev/null and b/assets/avatars/1112.png differ
diff --git a/assets/avatars/1201.png b/assets/avatars/1201.png
new file mode 100644
index 0000000..ee92a7b
Binary files /dev/null and b/assets/avatars/1201.png differ
diff --git a/assets/avatars/1202.png b/assets/avatars/1202.png
new file mode 100644
index 0000000..76aa828
Binary files /dev/null and b/assets/avatars/1202.png differ
diff --git a/assets/avatars/1203.png b/assets/avatars/1203.png
new file mode 100644
index 0000000..03415ef
Binary files /dev/null and b/assets/avatars/1203.png differ
diff --git a/assets/avatars/1204.png b/assets/avatars/1204.png
new file mode 100644
index 0000000..03481c3
Binary files /dev/null and b/assets/avatars/1204.png differ
diff --git a/assets/avatars/1205.png b/assets/avatars/1205.png
new file mode 100644
index 0000000..b3f3745
Binary files /dev/null and b/assets/avatars/1205.png differ
diff --git a/assets/avatars/1206.png b/assets/avatars/1206.png
new file mode 100644
index 0000000..b7a72c1
Binary files /dev/null and b/assets/avatars/1206.png differ
diff --git a/assets/avatars/1207.png b/assets/avatars/1207.png
new file mode 100644
index 0000000..a0693e1
Binary files /dev/null and b/assets/avatars/1207.png differ
diff --git a/assets/avatars/1208.png b/assets/avatars/1208.png
new file mode 100644
index 0000000..0331c8d
Binary files /dev/null and b/assets/avatars/1208.png differ
diff --git a/assets/avatars/1209.png b/assets/avatars/1209.png
new file mode 100644
index 0000000..ac57ee7
Binary files /dev/null and b/assets/avatars/1209.png differ
diff --git a/assets/avatars/1210.png b/assets/avatars/1210.png
new file mode 100644
index 0000000..529974a
Binary files /dev/null and b/assets/avatars/1210.png differ
diff --git a/assets/avatars/1211.png b/assets/avatars/1211.png
new file mode 100644
index 0000000..157cfde
Binary files /dev/null and b/assets/avatars/1211.png differ
diff --git a/assets/avatars/1212.png b/assets/avatars/1212.png
new file mode 100644
index 0000000..ff777e6
Binary files /dev/null and b/assets/avatars/1212.png differ
diff --git a/assets/avatars/1213.png b/assets/avatars/1213.png
new file mode 100644
index 0000000..492d46d
Binary files /dev/null and b/assets/avatars/1213.png differ
diff --git a/assets/avatars/1214.png b/assets/avatars/1214.png
new file mode 100644
index 0000000..86de191
Binary files /dev/null and b/assets/avatars/1214.png differ
diff --git a/assets/avatars/1215.png b/assets/avatars/1215.png
new file mode 100644
index 0000000..8dbe876
Binary files /dev/null and b/assets/avatars/1215.png differ
diff --git a/assets/avatars/1217.png b/assets/avatars/1217.png
new file mode 100644
index 0000000..2fd41cc
Binary files /dev/null and b/assets/avatars/1217.png differ
diff --git a/assets/avatars/1218.png b/assets/avatars/1218.png
new file mode 100644
index 0000000..d4e18aa
Binary files /dev/null and b/assets/avatars/1218.png differ
diff --git a/assets/avatars/1220.png b/assets/avatars/1220.png
new file mode 100644
index 0000000..c5087dc
Binary files /dev/null and b/assets/avatars/1220.png differ
diff --git a/assets/avatars/1221.png b/assets/avatars/1221.png
new file mode 100644
index 0000000..6393f29
Binary files /dev/null and b/assets/avatars/1221.png differ
diff --git a/assets/avatars/1222.png b/assets/avatars/1222.png
new file mode 100644
index 0000000..da5eb24
Binary files /dev/null and b/assets/avatars/1222.png differ
diff --git a/assets/avatars/1223.png b/assets/avatars/1223.png
new file mode 100644
index 0000000..99f99b9
Binary files /dev/null and b/assets/avatars/1223.png differ
diff --git a/assets/avatars/1224.png b/assets/avatars/1224.png
new file mode 100644
index 0000000..faef33a
Binary files /dev/null and b/assets/avatars/1224.png differ
diff --git a/assets/avatars/1225.png b/assets/avatars/1225.png
new file mode 100644
index 0000000..0e6fd93
Binary files /dev/null and b/assets/avatars/1225.png differ
diff --git a/assets/avatars/1301.png b/assets/avatars/1301.png
new file mode 100644
index 0000000..d9ee96b
Binary files /dev/null and b/assets/avatars/1301.png differ
diff --git a/assets/avatars/1302.png b/assets/avatars/1302.png
new file mode 100644
index 0000000..fc33b53
Binary files /dev/null and b/assets/avatars/1302.png differ
diff --git a/assets/avatars/1303.png b/assets/avatars/1303.png
new file mode 100644
index 0000000..406d5ca
Binary files /dev/null and b/assets/avatars/1303.png differ
diff --git a/assets/avatars/1304.png b/assets/avatars/1304.png
new file mode 100644
index 0000000..706bd77
Binary files /dev/null and b/assets/avatars/1304.png differ
diff --git a/assets/avatars/1305.png b/assets/avatars/1305.png
new file mode 100644
index 0000000..b932406
Binary files /dev/null and b/assets/avatars/1305.png differ
diff --git a/assets/avatars/1306.png b/assets/avatars/1306.png
new file mode 100644
index 0000000..3b0e936
Binary files /dev/null and b/assets/avatars/1306.png differ
diff --git a/assets/avatars/1307.png b/assets/avatars/1307.png
new file mode 100644
index 0000000..0c5ee5d
Binary files /dev/null and b/assets/avatars/1307.png differ
diff --git a/assets/avatars/1308.png b/assets/avatars/1308.png
new file mode 100644
index 0000000..2434c6e
Binary files /dev/null and b/assets/avatars/1308.png differ
diff --git a/assets/avatars/1309.png b/assets/avatars/1309.png
new file mode 100644
index 0000000..dcb6080
Binary files /dev/null and b/assets/avatars/1309.png differ
diff --git a/assets/avatars/1310.png b/assets/avatars/1310.png
new file mode 100644
index 0000000..84ed64a
Binary files /dev/null and b/assets/avatars/1310.png differ
diff --git a/assets/avatars/1312.png b/assets/avatars/1312.png
new file mode 100644
index 0000000..03ff525
Binary files /dev/null and b/assets/avatars/1312.png differ
diff --git a/assets/avatars/1313.png b/assets/avatars/1313.png
new file mode 100644
index 0000000..7c2ac35
Binary files /dev/null and b/assets/avatars/1313.png differ
diff --git a/assets/avatars/1314.png b/assets/avatars/1314.png
new file mode 100644
index 0000000..eb2a98d
Binary files /dev/null and b/assets/avatars/1314.png differ
diff --git a/assets/avatars/1315.png b/assets/avatars/1315.png
new file mode 100644
index 0000000..0b301f4
Binary files /dev/null and b/assets/avatars/1315.png differ
diff --git a/assets/avatars/1317.png b/assets/avatars/1317.png
new file mode 100644
index 0000000..8d30330
Binary files /dev/null and b/assets/avatars/1317.png differ
diff --git a/assets/avatars/1401.png b/assets/avatars/1401.png
new file mode 100644
index 0000000..59eef0d
Binary files /dev/null and b/assets/avatars/1401.png differ
diff --git a/assets/avatars/1402.png b/assets/avatars/1402.png
new file mode 100644
index 0000000..8ed1065
Binary files /dev/null and b/assets/avatars/1402.png differ
diff --git a/assets/avatars/1403.png b/assets/avatars/1403.png
new file mode 100644
index 0000000..1aa0152
Binary files /dev/null and b/assets/avatars/1403.png differ
diff --git a/assets/avatars/1404.png b/assets/avatars/1404.png
new file mode 100644
index 0000000..2b36ae7
Binary files /dev/null and b/assets/avatars/1404.png differ
diff --git a/assets/avatars/1405.png b/assets/avatars/1405.png
new file mode 100644
index 0000000..64614dc
Binary files /dev/null and b/assets/avatars/1405.png differ
diff --git a/assets/avatars/1407.png b/assets/avatars/1407.png
new file mode 100644
index 0000000..7e653a4
Binary files /dev/null and b/assets/avatars/1407.png differ
diff --git a/assets/avatars/1408.png b/assets/avatars/1408.png
new file mode 100644
index 0000000..f1942fb
Binary files /dev/null and b/assets/avatars/1408.png differ
diff --git a/assets/avatars/1409.png b/assets/avatars/1409.png
new file mode 100644
index 0000000..d5693a0
Binary files /dev/null and b/assets/avatars/1409.png differ
diff --git a/assets/avatars/1410.png b/assets/avatars/1410.png
new file mode 100644
index 0000000..bca41b6
Binary files /dev/null and b/assets/avatars/1410.png differ
diff --git a/assets/avatars/8001.png b/assets/avatars/8001.png
new file mode 100644
index 0000000..825f628
Binary files /dev/null and b/assets/avatars/8001.png differ
diff --git a/assets/avatars/8002.png b/assets/avatars/8002.png
new file mode 100644
index 0000000..dbc310a
Binary files /dev/null and b/assets/avatars/8002.png differ
diff --git a/assets/avatars/8003.png b/assets/avatars/8003.png
new file mode 100644
index 0000000..8cb4843
Binary files /dev/null and b/assets/avatars/8003.png differ
diff --git a/assets/avatars/8004.png b/assets/avatars/8004.png
new file mode 100644
index 0000000..b3d21fb
Binary files /dev/null and b/assets/avatars/8004.png differ
diff --git a/assets/avatars/8005.png b/assets/avatars/8005.png
new file mode 100644
index 0000000..6511a04
Binary files /dev/null and b/assets/avatars/8005.png differ
diff --git a/assets/avatars/8006.png b/assets/avatars/8006.png
new file mode 100644
index 0000000..f521b47
Binary files /dev/null and b/assets/avatars/8006.png differ
diff --git a/assets/avatars/8007.png b/assets/avatars/8007.png
new file mode 100644
index 0000000..4c936f8
Binary files /dev/null and b/assets/avatars/8007.png differ
diff --git a/assets/avatars/8008.png b/assets/avatars/8008.png
new file mode 100644
index 0000000..bb777cf
Binary files /dev/null and b/assets/avatars/8008.png differ
diff --git a/css/styles.css b/css/styles.css
index 87c6142..eae968e 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -368,16 +368,39 @@ body {
 
 .avatar-header-info {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.85rem;
   align-items: center;
 }
 
-.avatar-icon-placeholder {
-  width: 48px;
-  height: 48px;
+.avatar-image-container {
+  position: relative;
+  width: 52px;
+  height: 52px;
   border-radius: var(--radius-md);
+  overflow: hidden;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.avatar-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.25s ease;
+}
+
+.card:hover .avatar-img {
+  transform: scale(1.08);
+}
+
+.avatar-icon-placeholder {
+  width: 100%;
+  height: 100%;
+  background: var(--bg-secondary);
   display: flex;
   align-items: center;
   justify-content: center;
diff --git a/js/app.js b/js/app.js
index 6e5f776..dac494a 100644
--- a/js/app.js
+++ b/js/app.js
@@ -245,9 +245,20 @@ function renderLineup(lineups) {
     } else {
       const info = getAvatarInfo(avatarId);
       card.innerHTML = `
-        <div style="font-size: 0.75rem; color: var(--accent-cyan);">${t('slot')} ${slot + 1}</div>
-        <div style="font-weight: 700; margin-top: 0.25rem;">${info.name}</div>
-        <div style="font-size: 0.75rem; color: var(--text-muted);">${info.element} • ${info.path}</div>
+        <div style="display: flex; gap: 0.75rem; align-items: center;">
+          <div class="avatar-image-container" style="width: 44px; height: 44px;">
+            <img class="avatar-img"
+                 src="./assets/avatars/${avatarId}.png"
+                 onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${avatarId}.png';}else{this.style.display='none';this.nextElementSibling.style.display='flex';}"
+                 alt="${info.name}">
+            <div class="avatar-icon-placeholder" style="display: none;">${info.name.charAt(0)}</div>
+          </div>
+          <div>
+            <div style="font-size: 0.75rem; color: var(--accent-cyan);">${t('slot')} ${slot + 1}</div>
+            <div style="font-weight: 700; margin-top: 0.15rem; font-size: 0.95rem;">${info.name}</div>
+            <div style="font-size: 0.75rem; color: var(--text-muted);">${info.element} • ${info.path}</div>
+          </div>
+        </div>
       `;
     }
     el.lineupContainer.appendChild(card);
@@ -298,7 +309,13 @@ function renderAvatarsGrid() {
       <span class="avatar-badge-rarity rarity-${meta.rarity}">★ ${meta.rarity}</span>
       <div>
         <div class="avatar-header-info">
-          <div class="avatar-icon-placeholder">${meta.name.charAt(0)}</div>
+          <div class="avatar-image-container">
+            <img class="avatar-img"
+                 src="./assets/avatars/${item.avatar_id}.png"
+                 onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${item.avatar_id}.png';}else{this.style.display='none';this.nextElementSibling.style.display='flex';}"
+                 alt="${meta.name}">
+            <div class="avatar-icon-placeholder" style="display: none;">${meta.name.charAt(0)}</div>
+          </div>
           <div>
             <div class="avatar-name">${meta.name}</div>
             <div class="avatar-subinfo">
@@ -378,10 +395,19 @@ function renderExRanks(exList) {
     const localizedMeta = getAvatarInfo(item.avatar_id);
 
     card.innerHTML = `
-      <div>
-        <div style="font-weight: 700; font-size: 1rem;">${localizedMeta.name}</div>
-        <div style="font-size: 0.8rem; color: var(--text-muted);">
-          Avatar ID: ${item.avatar_id} • Ex-Rank Skill ID: ${item.ex_rank_id}
+      <div style="display: flex; gap: 0.85rem; align-items: center;">
+        <div class="avatar-image-container" style="width: 44px; height: 44px;">
+          <img class="avatar-img"
+               src="./assets/avatars/${item.avatar_id}.png"
+               onerror="if(this.src.indexOf('jsdelivr')===-1){this.src='https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${item.avatar_id}.png';}else{this.style.display='none';this.nextElementSibling.style.display='flex';}"
+               alt="${localizedMeta.name}">
+          <div class="avatar-icon-placeholder" style="display: none;">${localizedMeta.name.charAt(0)}</div>
+        </div>
+        <div>
+          <div style="font-weight: 700; font-size: 1rem;">${localizedMeta.name}</div>
+          <div style="font-size: 0.8rem; color: var(--text-muted);">
+            Avatar ID: ${item.avatar_id} • Ex-Rank Skill ID: ${item.ex_rank_id}
+          </div>
         </div>
       </div>
       <label class="switch">
diff --git a/scripts/fetch_avatars.js b/scripts/fetch_avatars.js
new file mode 100644
index 0000000..50fbacd
--- /dev/null
+++ b/scripts/fetch_avatars.js
@@ -0,0 +1,78 @@
+const fs = require('fs');
+const https = require('https');
+const path = require('path');
+
+const ids = [
+  8001, 8002, 8003, 8004, 8005, 8006, 8007, 8008,
+  1001, 1224, 1002, 1003, 1004, 1008, 1009, 1013,
+  1101, 1102, 1103, 1104, 1105, 1106, 1107, 1108, 1109, 1110, 1111, 1112,
+  1201, 1202, 1203, 1204, 1205, 1206, 1207, 1208, 1209, 1210, 1211, 1212, 1213, 1214, 1215, 1217, 1218, 1220, 1221, 1222, 1223, 1225,
+  1005, 1006, 1301, 1302, 1303, 1304, 1305, 1306, 1307, 1308, 1309, 1310, 1312, 1313, 1314, 1315, 1317,
+  1401, 1402, 1403, 1404, 1405, 1407, 1408, 1409, 1410
+];
+
+const targetDir = path.join(__dirname, '..', 'assets', 'avatars');
+if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true });
+
+function fetchUrl(url, dest) {
+  return new Promise((resolve) => {
+    const req = https.get(url, (res) => {
+      if (res.statusCode === 200) {
+        const file = fs.createWriteStream(dest);
+        res.pipe(file);
+        file.on('finish', () => {
+          file.close();
+          resolve(true);
+        });
+      } else {
+        res.resume();
+        resolve(false);
+      }
+    });
+    req.on('error', () => resolve(false));
+    req.setTimeout(6000, () => {
+      req.destroy();
+      resolve(false);
+    });
+  });
+}
+
+async function processId(id) {
+  const dest = path.join(targetDir, `${id}.png`);
+  if (fs.existsSync(dest) && fs.statSync(dest).size > 1000) {
+    return { id, status: 'exists' };
+  }
+
+  // 1. Try StarRailRes CDN
+  const cdnUrl = `https://cdn.jsdelivr.net/gh/Mar-7th/StarRailRes@master/icon/avatar/${id}.png`;
+  let ok = await fetchUrl(cdnUrl, dest);
+  if (ok) return { id, status: 'ok (cdn)' };
+
+  // 2. Try raw github
+  const rawUrl = `https://raw.githubusercontent.com/Mar-7th/StarRailRes/master/icon/avatar/${id}.png`;
+  ok = await fetchUrl(rawUrl, dest);
+  if (ok) return { id, status: 'ok (raw)' };
+
+  // Fallbacks for trailblazer female variants if not directly mapped
+  if ([8004, 8006, 8008].includes(id) && fs.existsSync(path.join(targetDir, '8002.png'))) {
+    fs.copyFileSync(path.join(targetDir, '8002.png'), dest);
+    return { id, status: 'fallback 8002' };
+  }
+  if ([8003, 8005, 8007].includes(id) && fs.existsSync(path.join(targetDir, '8001.png'))) {
+    fs.copyFileSync(path.join(targetDir, '8001.png'), dest);
+    return { id, status: 'fallback 8001' };
+  }
+
+  return { id, status: 'not found' };
+}
+
+(async () => {
+  console.log(`Starting parallel download for ${ids.length} avatars...`);
+  const chunkSize = 8;
+  for (let i = 0; i < ids.length; i += chunkSize) {
+    const chunk = ids.slice(i, i + chunkSize);
+    const results = await Promise.all(chunk.map(processId));
+    results.forEach(r => console.log(`Avatar ${r.id}: ${r.status}`));
+  }
+  console.log('Finished downloading avatars.');
+})();