diff --git a/frontend/src/components/EpisodeDetail.tsx b/frontend/src/components/EpisodeDetail.tsx
index 1499355..98e2a49 100644
--- a/frontend/src/components/EpisodeDetail.tsx
+++ b/frontend/src/components/EpisodeDetail.tsx
@@ -253,7 +253,7 @@ function EpisodeDetail() {
         </div>
         <div
           className="subtitle"
-          style={{ color: "#666", marginBottom: "20px" }}
+          style={{ color: "var(--text-secondary)", marginBottom: "20px" }}
         >
           作成日: {formatDate(episode.createdAt)}
         </div>
@@ -300,7 +300,7 @@ function EpisodeDetail() {
           <h3 style={{ marginBottom: "15px" }}>エピソード情報</h3>
           <div
             style={{
-              backgroundColor: "#f8f9fa",
+              backgroundColor: "var(--bg-tertiary)",
               padding: "20px",
               borderRadius: "8px",
               fontSize: "14px",
@@ -311,7 +311,7 @@ function EpisodeDetail() {
                 <strong>ソースフィード:</strong>
                 <Link
                   to={`/feeds/${episode.feedId}`}
-                  style={{ marginLeft: "5px", color: "#007bff" }}
+                  style={{ marginLeft: "5px", color: "var(--accent-primary)" }}
                 >
                   {episode.feedTitle}
                 </Link>
@@ -376,9 +376,9 @@ function EpisodeDetail() {
             <h3 style={{ marginBottom: "15px" }}>エピソード詳細</h3>
             <div
               style={{
-                backgroundColor: "#fff",
+                backgroundColor: "var(--bg-secondary)",
                 padding: "20px",
-                border: "1px solid #e9ecef",
+                border: "1px solid var(--border-color)",
                 borderRadius: "8px",
                 lineHeight: "1.6",
               }}
diff --git a/frontend/src/components/FeedDetail.tsx b/frontend/src/components/FeedDetail.tsx
index bfda817..8eea124 100644
--- a/frontend/src/components/FeedDetail.tsx
+++ b/frontend/src/components/FeedDetail.tsx
@@ -169,17 +169,17 @@ function FeedDetail() {
 
       <div className="feed-header" style={{ marginBottom: "30px" }}>
         <h1 style={{ marginBottom: "10px" }}>{feed.title || feed.url}</h1>
-        <div style={{ color: "#666", marginBottom: "10px" }}>
+        <div style={{ color: "var(--text-secondary)", marginBottom: "10px" }}>
           <a href={feed.url} target="_blank" rel="noopener noreferrer">
             {feed.url}
           </a>
         </div>
         {feed.description && (
-          <div style={{ marginBottom: "15px", color: "#333" }}>
+          <div style={{ marginBottom: "15px", color: "var(--text-primary)" }}>
             {feed.description}
           </div>
         )}
-        <div style={{ fontSize: "14px", color: "#666" }}>
+        <div style={{ fontSize: "14px", color: "var(--text-secondary)" }}>
           作成日: {formatDate(feed.createdAt)}
           {feed.lastUpdated && ` | 最終更新: ${formatDate(feed.lastUpdated)}`}
         </div>
@@ -222,7 +222,7 @@ function FeedDetail() {
                     <strong>
                       <Link
                         to={`/episode/${episode.id}`}
-                        style={{ textDecoration: "none", color: "#007bff" }}
+                        style={{ textDecoration: "none", color: "var(--accent-primary)" }}
                       >
                         {episode.title}
                       </Link>
@@ -231,7 +231,7 @@ function FeedDetail() {
                   <div
                     style={{
                       fontSize: "12px",
-                      color: "#666",
+                      color: "var(--text-secondary)",
                       marginBottom: "4px",
                     }}
                   >
@@ -242,7 +242,7 @@ function FeedDetail() {
                       href={episode.articleLink}
                       target="_blank"
                       rel="noopener noreferrer"
-                      style={{ fontSize: "12px", color: "#666" }}
+                      style={{ fontSize: "12px", color: "var(--text-secondary)" }}
                     >
                       元記事を見る
                     </a>
@@ -264,7 +264,7 @@ function FeedDetail() {
                     <div
                       style={{
                         fontSize: "12px",
-                        color: "#666",
+                        color: "var(--text-secondary)",
                         marginTop: "4px",
                       }}
                     >
diff --git a/frontend/src/components/FeedList.tsx b/frontend/src/components/FeedList.tsx
index 666e77e..0a1c0c4 100644
--- a/frontend/src/components/FeedList.tsx
+++ b/frontend/src/components/FeedList.tsx
@@ -167,7 +167,7 @@ function FeedList() {
               style={{
                 padding: "5px 10px",
                 fontSize: "14px",
-                border: "1px solid #ccc",
+                border: "1px solid var(--border-light)",
                 borderRadius: "4px",
               }}
             >
@@ -188,7 +188,7 @@ function FeedList() {
             style={{
               padding: "5px 10px",
               fontSize: "14px",
-              border: "1px solid #ccc",
+              border: "1px solid var(--border-light)",
               borderRadius: "4px",
             }}
           >
@@ -324,11 +324,12 @@ function FeedList() {
         }
 
         .feed-card {
-          border: 1px solid #e9ecef;
+          border: 1px solid var(--border-color);
           border-radius: 8px;
           padding: 20px;
-          background: white;
-          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+          background: var(--bg-secondary);
+          box-shadow: 0 2px 4px var(--shadow);
+          transition: all 0.3s ease;
         }
 
         .feed-card-header {
@@ -342,7 +343,7 @@ function FeedList() {
 
         .feed-link {
           text-decoration: none;
-          color: #007bff;
+          color: var(--accent-primary);
         }
 
         .feed-link:hover {
@@ -351,29 +352,29 @@ function FeedList() {
 
         .feed-url {
           font-size: 12px;
-          color: #666;
+          color: var(--text-secondary);
           word-break: break-all;
         }
 
         .feed-url a {
-          color: #666;
+          color: var(--text-secondary);
           text-decoration: none;
         }
 
         .feed-url a:hover {
-          color: #007bff;
+          color: var(--accent-primary);
         }
 
         .feed-description {
           margin-bottom: 15px;
-          color: #333;
+          color: var(--text-primary);
           line-height: 1.5;
         }
 
         .feed-meta {
           margin-bottom: 15px;
           font-size: 12px;
-          color: #666;
+          color: var(--text-secondary);
         }
 
         .feed-meta div {
@@ -390,7 +391,7 @@ function FeedList() {
 
         .category-badge {
           display: inline-block;
-          background: #007bff;
+          background: var(--accent-primary);
           color: white;
           padding: 3px 8px;
           border-radius: 12px;
@@ -401,13 +402,13 @@ function FeedList() {
         .pagination-container {
           margin-top: 30px;
           padding: 20px 0;
-          border-top: 1px solid #e9ecef;
+          border-top: 1px solid var(--border-color);
         }
 
         .pagination-info {
           text-align: center;
           margin-bottom: 15px;
-          color: #666;
+          color: var(--text-secondary);
           font-size: 14px;
         }
 
diff --git a/frontend/src/components/FeedManager.tsx b/frontend/src/components/FeedManager.tsx
index f1bead6..94b965d 100644
--- a/frontend/src/components/FeedManager.tsx
+++ b/frontend/src/components/FeedManager.tsx
@@ -51,7 +51,7 @@ function FeedManager() {
 
       <div style={{ marginBottom: "30px" }}>
         <h2>新しいフィードをリクエスト</h2>
-        <p style={{ color: "#666", marginBottom: "20px" }}>
+        <p style={{ color: "var(--text-secondary)", marginBottom: "20px" }}>
           追加したいRSSフィードのURLを送信してください。管理者が承認後、フィードが追加されます。
         </p>
 
@@ -92,13 +92,13 @@ function FeedManager() {
 
       <div
         style={{
-          backgroundColor: "#f8f9fa",
+          backgroundColor: "var(--bg-tertiary)",
           padding: "20px",
           borderRadius: "8px",
         }}
       >
         <h3 style={{ marginBottom: "15px" }}>フィードリクエストについて</h3>
-        <ul style={{ paddingLeft: "20px", color: "#666" }}>
+        <ul style={{ paddingLeft: "20px", color: "var(--text-secondary)" }}>
           <li>送信されたフィードリクエストは管理者が確認します</li>
           <li>
             適切なRSSフィードと判断された場合、承認されて自動的に追加されます