diff --git a/src/views/home.js b/src/views/home.js
index 6f15b38..a539e4b 100644
--- a/src/views/home.js
+++ b/src/views/home.js
@@ -1,6 +1,6 @@
 import { S } from '../state.js';
 import { esc } from '../utils.js';
-import { api, apiCached, apiIsCached, coverUrl, fetchRomajiIndex, dispArtistById } from '../api.js';
+import { api, apiCached, apiIsCached, coverUrl, fetchRomajiIndex, dispArtistById, dispAlbumName } from '../api.js';
 import { makeCard, makeAlbumCard, makeSongItem } from '../ui/components.js';
 import { playQueue } from '../player/player.js';
 // Circular — safe (called inside event handlers)
@@ -42,6 +42,7 @@ async function loadHeroCard() {
     const [freqRes, recRes] = await Promise.allSettled([
       api('getAlbumList2', '&type=frequent&size=5'),
       api('getAlbumList2', '&type=recent&size=5'),
+      S.cfg.showRomaji ? fetchRomajiIndex().catch(() => {}) : Promise.resolve(),
     ]);
     const freqList = freqRes.status === 'fulfilled' ? (freqRes.value.albumList2?.album || []) : [];
     const recList  = recRes.status  === 'fulfilled' ? (recRes.value.albumList2?.album  || []) : [];
@@ -59,8 +60,8 @@ async function loadHeroCard() {
         ${thumbUrl ? `<img class="home-hero-cover" src="${thumbUrl}" alt="${esc(album.name)}">` : ''}
         <div class="home-hero-info">
           <div class="home-hero-label">${heroLabel}</div>
-          <div class="home-hero-title">${esc(album.name)}</div>
-          <div class="home-hero-artist">${esc(album.artist || '')}</div>
+          <div class="home-hero-title">${esc(dispAlbumName(album.name))}</div>
+          <div class="home-hero-artist">${esc(dispArtistById(album.artistId, album.artist || ''))}</div>
         </div>
         <button class="home-hero-play" title="Abspielen">
           <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>