diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index ed3630d..d4b2eaf 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,58 +7,47 @@ import EpisodeDetail from './components/EpisodeDetail'
 
 function App() {
   const location = useLocation()
-  const isEpisodeDetail = location.pathname.startsWith('/episode/')
-  const isFeedDetail = location.pathname.startsWith('/feeds/') && location.pathname.split('/').length === 3
-
-  if (isEpisodeDetail) {
-    return (
-      <Routes>
-        <Route path="/episode/:episodeId" element={<EpisodeDetail />} />
-      </Routes>
-    )
-  }
-
-  if (isFeedDetail) {
-    return (
-      <Routes>
-        <Route path="/feeds/:feedId" element={<FeedDetail />} />
-      </Routes>
-    )
-  }
+  const isMainPage = ['/', '/feeds', '/feed-requests'].includes(location.pathname)
 
   return (
     <div className="container">
-      <div className="header">
-        <div className="title">Voice RSS Summary</div>
-        <div className="subtitle">RSS フィードから自動生成された音声ポッドキャスト</div>
-      </div>
+      {isMainPage && (
+        <>
+          <div className="header">
+            <div className="title">Voice RSS Summary</div>
+            <div className="subtitle">RSS フィードから自動生成された音声ポッドキャスト</div>
+          </div>
 
-      <div className="tabs">
-        <Link
-          to="/"
-          className={`tab ${location.pathname === '/' ? 'active' : ''}`}
-        >
-          エピソード一覧
-        </Link>
-        <Link
-          to="/feeds"
-          className={`tab ${location.pathname === '/feeds' ? 'active' : ''}`}
-        >
-          フィード一覧
-        </Link>
-        <Link
-          to="/feed-requests"
-          className={`tab ${location.pathname === '/feed-requests' ? 'active' : ''}`}
-        >
-          フィードリクエスト
-        </Link>
-      </div>
+          <div className="tabs">
+            <Link
+              to="/"
+              className={`tab ${location.pathname === '/' ? 'active' : ''}`}
+            >
+              エピソード一覧
+            </Link>
+            <Link
+              to="/feeds"
+              className={`tab ${location.pathname === '/feeds' ? 'active' : ''}`}
+            >
+              フィード一覧
+            </Link>
+            <Link
+              to="/feed-requests"
+              className={`tab ${location.pathname === '/feed-requests' ? 'active' : ''}`}
+            >
+              フィードリクエスト
+            </Link>
+          </div>
+        </>
+      )}
 
       <div className="content">
         <Routes>
           <Route path="/" element={<EpisodeList />} />
           <Route path="/feeds" element={<FeedList />} />
           <Route path="/feed-requests" element={<FeedManager />} />
+          <Route path="/episode/:episodeId" element={<EpisodeDetail />} />
+          <Route path="/feeds/:feedId" element={<FeedDetail />} />
         </Routes>
       </div>
     </div>
diff --git a/frontend/src/components/EpisodeList.tsx b/frontend/src/components/EpisodeList.tsx
index 0afe550..224e829 100644
--- a/frontend/src/components/EpisodeList.tsx
+++ b/frontend/src/components/EpisodeList.tsx
@@ -34,7 +34,7 @@ function EpisodeList() {
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [currentAudio, setCurrentAudio] = useState<string | null>(null)
-  const [useDatabase, setUseDatabase] = useState(true)
+  const [useDatabase, setUseDatabase] = useState(false)
 
   useEffect(() => {
     fetchEpisodes()
@@ -43,6 +43,7 @@ function EpisodeList() {
   const fetchEpisodes = async () => {
     try {
       setLoading(true)
+      setError(null)
       
       if (useDatabase) {
         // Try to fetch from database first
@@ -51,9 +52,18 @@ function EpisodeList() {
           throw new Error('データベースからの取得に失敗しました')
         }
         const data = await response.json()
-        setEpisodes(data.episodes || [])
+        const dbEpisodes = data.episodes || []
+        
+        if (dbEpisodes.length === 0) {
+          // Database is empty, fallback to XML
+          console.log('Database is empty, falling back to XML parsing...')
+          setUseDatabase(false)
+          return
+        }
+        
+        setEpisodes(dbEpisodes)
       } else {
-        // Fallback to XML parsing (existing functionality)
+        // Use XML parsing as primary source
         const response = await fetch('/api/episodes-from-xml')
         if (!response.ok) {
           const errorData = await response.json()
@@ -168,9 +178,14 @@ function EpisodeList() {
     <div>
       <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <h2>エピソード一覧 ({episodes.length}件)</h2>
-        <button className="btn btn-secondary" onClick={fetchEpisodes}>
-          更新
-        </button>
+        <div style={{ display: 'flex', gap: '10px', alignItems: 'center' }}>
+          <span style={{ fontSize: '12px', color: '#666' }}>
+            データソース: {useDatabase ? 'データベース' : 'XML'}
+          </span>
+          <button className="btn btn-secondary" onClick={fetchEpisodes}>
+            更新
+          </button>
+        </div>
       </div>
 
       <table className="table">