diff --git a/components/AppWindow.vue b/components/AppWindow.vue
index 981d85c..8561d57 100644
--- a/components/AppWindow.vue
+++ b/components/AppWindow.vue
@@ -7,7 +7,7 @@ import { useDraggable } from '../composables/useDraggable';
 import type { SnapType } from '../composables/useDraggable';
 import { useResizable } from '../composables/useResizable';
 import { useBreakpoint } from '../composables/useBreakpoint';
-import LiveStreamHub from './LiveStreamHub.vue';
+import NewsHub from './NewsHub.vue';
 
 const props = defineProps<{ 
   instance: AppInstance;
@@ -125,7 +125,7 @@ function onMouseDown() {
 const appComponent = computed(() => {
   switch (props.instance.appId) {
     case 'livestream-hub':
-      return LiveStreamHub;
+      return NewsHub;
     default:
       return null;
   }
diff --git a/components/LiveStreamHub.vue b/components/LiveStreamHub.vue
deleted file mode 100644
index 6257c74..0000000
--- a/components/LiveStreamHub.vue
+++ /dev/null
@@ -1,401 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n();
-
-// Mock data for live streams
-const featuredStreams = computed(() => [
-  {
-    id: 1,
-    image: "https://picsum.photos/800/400?random=1",
-    externalUrl: "https://twitch.tv/gamingking"
-  },
-  {
-    id: 2,
-    image: "https://picsum.photos/800/400?random=2",
-    externalUrl: "https://youtube.com/watch?v=music123"
-  },
-  {
-    id: 3,
-    image: "https://picsum.photos/800/400?random=3",
-    externalUrl: "https://twitch.tv/cookingchef"
-  },
-  {
-    id: 4,
-    image: "https://picsum.photos/800/400?random=4",
-    externalUrl: "https://youtube.com/watch?v=coding123"
-  }
-]);
-
-const popularStreamers = computed(() => [
-  { id: 1, name: t('livestream.streamers.gamingKing'), avatar: "🎮", viewers: 15420, isLive: true },
-  { id: 2, name: t('livestream.streamers.musicMaster'), avatar: "🎵", viewers: 8930, isLive: true },
-  { id: 3, name: t('livestream.streamers.cookingChef'), avatar: "🍳", viewers: 5670, isLive: true },
-  { id: 4, name: t('livestream.streamers.codeTeacher'), avatar: "💻", viewers: 12300, isLive: true },
-  { id: 5, name: t('livestream.streamers.artist'), avatar: "🎨", viewers: 4200, isLive: true },
-  { id: 6, name: t('livestream.streamers.trainer'), avatar: "💪", viewers: 6800, isLive: false },
-  { id: 7, name: t('livestream.streamers.traveler'), avatar: "✈️", viewers: 3200, isLive: true },
-  { id: 8, name: t('livestream.streamers.petLover'), avatar: "🐱", viewers: 5100, isLive: false }
-]);
-
-// Carousel state
-const currentSlide = ref(0);
-const carouselInterval = ref<number | null>(null);
-
-
-// Auto-play carousel
-const startCarousel = () => {
-  carouselInterval.value = window.setInterval(() => {
-    currentSlide.value = (currentSlide.value + 1) % featuredStreams.value.length;
-  }, 4000);
-};
-
-const stopCarousel = () => {
-  if (carouselInterval.value) {
-    clearInterval(carouselInterval.value);
-    carouselInterval.value = null;
-  }
-};
-
-
-// Handle stream click
-const handleStreamClick = (stream: any) => {
-  if (stream.externalUrl) {
-    window.open(stream.externalUrl, '_blank', 'noopener,noreferrer');
-  }
-};
-
-// Handle streamer click
-const handleStreamerClick = (streamer: any) => {
-  console.log(`查看主播: ${streamer.name}`);
-  // TODO: Open streamer profile
-};
-
-
-onMounted(() => {
-  startCarousel();
-});
-
-onUnmounted(() => {
-  stopCarousel();
-});
-</script>
-
-<template>
-  <div class="livestream-hub">
-    <!-- Header -->
-    <div class="hub-header">
-      <h2 class="hub-title">📺 {{ t('livestream.title') }}</h2>
-      <div class="hub-subtitle">{{ t('livestream.subtitle') }}</div>
-    </div>
-
-    <!-- Home View -->
-    <div class="home-view">
-
-    <!-- Featured Streams Carousel -->
-    <div class="carousel-section">
-      <h3 class="section-title">🔥 {{ t('livestream.featuredStreams') }}</h3>
-      <div class="carousel-container" @mouseenter="stopCarousel" @mouseleave="startCarousel">
-        <div class="carousel-track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
-          <div 
-            v-for="stream in featuredStreams" 
-            :key="stream.id"
-            class="carousel-slide"
-            @click="handleStreamClick(stream)"
-          >
-            <div 
-              class="stream-image-card"
-              :style="{ backgroundImage: `url(${stream.image})` }"
-            >
-            </div>
-          </div>
-        </div>
-        
-        <!-- Carousel Controls -->
-        <button 
-          class="carousel-btn prev" 
-          @click="currentSlide = currentSlide > 0 ? currentSlide - 1 : featuredStreams.length - 1"
-        >
-          ‹
-        </button>
-        <button 
-          class="carousel-btn next" 
-          @click="currentSlide = (currentSlide + 1) % featuredStreams.length"
-        >
-          ›
-        </button>
-        
-        <!-- Carousel Indicators -->
-        <div class="carousel-indicators">
-          <button 
-            v-for="(stream, index) in featuredStreams" 
-            :key="index"
-            class="indicator"
-            :class="{ active: index === currentSlide }"
-            @click="currentSlide = index"
-          ></button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Popular Streamers -->
-    <div class="streamers-section">
-      <h3 class="section-title">⭐ {{ t('livestream.popularStreamers') }}</h3>
-      <div class="streamers-grid">
-        <div 
-          v-for="streamer in popularStreamers" 
-          :key="streamer.id"
-          class="streamer-card"
-          @click="handleStreamerClick(streamer)"
-        >
-          <div class="streamer-avatar">{{ streamer.avatar }}</div>
-          <div class="streamer-info">
-            <div class="streamer-name">{{ streamer.name }}</div>
-            <div class="streamer-viewers">{{ streamer.viewers }} {{ t('livestream.viewers') }}</div>
-          </div>
-          <div class="streamer-status" :class="{ 'is-live': streamer.isLive }">
-            {{ streamer.isLive ? `🔴 ${t('livestream.live')}` : `⚪ ${t('livestream.offline')}` }}
-          </div>
-        </div>
-      </div>
-    </div>
-    </div> <!-- End home-view -->
-  </div>
-</template>
-
-<style scoped>
-.livestream-hub {
-  width: 100%;
-  height: 100%;
-  background: var(--window-background);
-  display: flex;
-  flex-direction: column;
-  padding: 20px;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-.hub-header {
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.hub-title {
-  font-size: 24px;
-  font-weight: bold;
-  color: var(--content-text-color);
-  margin: 0 0 8px 0;
-}
-
-.hub-subtitle {
-  font-size: 14px;
-  color: var(--content-text-color);
-  opacity: 0.7;
-}
-
-.carousel-section {
-  margin-bottom: 32px;
-}
-
-.section-title {
-  font-size: 18px;
-  font-weight: bold;
-  color: var(--content-text-color);
-  margin: 0 0 16px 0;
-}
-
-.carousel-container {
-  position: relative;
-  width: 100%;
-  height: 300px;
-  overflow: hidden;
-  border-radius: 12px;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-}
-
-.carousel-track {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  transition: transform 0.5s ease-in-out;
-}
-
-.carousel-slide {
-  min-width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-.stream-image-card {
-  width: 100%;
-  height: 100%;
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  position: relative;
-  cursor: pointer;
-  transition: transform 0.3s ease;
-}
-
-.stream-image-card:hover {
-  transform: scale(1.02);
-}
-
-@keyframes pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.7; }
-}
-
-.carousel-btn {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  background: rgba(0, 0, 0, 0.5);
-  border: none;
-  color: white;
-  font-size: 24px;
-  width: 50px;
-  height: 50px;
-  border-radius: 50%;
-  cursor: pointer;
-  transition: all 0.3s ease;
-  z-index: 10;
-  backdrop-filter: blur(10px);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.carousel-btn:hover {
-  background: rgba(0, 0, 0, 0.7);
-  transform: translateY(-50%) scale(1.1);
-}
-
-.carousel-btn.prev {
-  left: 16px;
-}
-
-.carousel-btn.next {
-  right: 16px;
-}
-
-.carousel-indicators {
-  position: absolute;
-  bottom: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  gap: 8px;
-  z-index: 10;
-}
-
-.indicator {
-  width: 12px;
-  height: 12px;
-  border-radius: 50%;
-  border: 2px solid rgba(255, 255, 255, 0.6);
-  background: rgba(255, 255, 255, 0.3);
-  cursor: pointer;
-  transition: all 0.3s ease;
-  flex-shrink: 0;
-  aspect-ratio: 1;
-  min-width: 12px;
-  min-height: 12px;
-}
-
-.indicator.active {
-  background: white;
-  border-color: white;
-  transform: scale(1.2);
-}
-
-.streamers-section {
-  flex: 1;
-}
-
-.streamers-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.streamer-card {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 16px;
-  background: var(--window-background);
-  border: 1px solid var(--window-border-color);
-  border-radius: 12px;
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
-
-.streamer-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  border-color: var(--window-border-color-focused);
-}
-
-.streamer-avatar {
-  font-size: 32px;
-  width: 50px;
-  height: 50px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--title-bar-background);
-  border-radius: 50%;
-  flex-shrink: 0;
-}
-
-.streamer-info {
-  flex: 1;
-}
-
-.streamer-name {
-  font-weight: bold;
-  color: var(--content-text-color);
-  margin-bottom: 4px;
-}
-
-.streamer-viewers {
-  font-size: 12px;
-  color: var(--content-text-color);
-  opacity: 0.7;
-}
-
-.streamer-status {
-  font-size: 16px;
-  flex-shrink: 0;
-}
-
-.streamer-status.is-live {
-  animation: pulse 2s infinite;
-}
-
-/* Light theme adjustments */
-.theme-light .carousel-btn {
-  background: rgba(255, 255, 255, 0.8);
-  color: #333;
-}
-
-.theme-light .carousel-btn:hover {
-  background: rgba(255, 255, 255, 0.9);
-}
-
-.theme-light .indicator {
-  border-color: rgba(0, 0, 0, 0.6);
-  background: rgba(0, 0, 0, 0.3);
-}
-
-.theme-light .indicator.active {
-  background: #333;
-  border-color: #333;
-}
-
-</style>
diff --git a/components/NewsHub.vue b/components/NewsHub.vue
new file mode 100644
index 0000000..6f54b11
--- /dev/null
+++ b/components/NewsHub.vue
@@ -0,0 +1,875 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import StreamerFlipCard from './StreamerFlipCard.vue';
+
+const { t } = useI18n();
+
+// Mock data for live streams
+const featuredStreams = computed(() => [
+  {
+    id: 1,
+    image: "https://imgproxy.goplayone.com/1/auto/768/0/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvYmFubmVyLzNlYTNkMzI0ZjJhMmZhNDQ5MDAyZWQyNDE0ZDNhZDhlLnBuZw==",
+    externalUrl: "https://twitch.tv/gamingking"
+  },
+  {
+    id: 2,
+    image: "https://imgproxy.goplayone.com/1/auto/768/0/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvYmFubmVyLzE5OGI4OGZhZmQ3ZDM2NjEyZmE0YTBmZDQ0NzViMmVjLnBuZw==",
+    externalUrl: "https://youtube.com/watch?v=music123"
+  },
+  {
+    id: 3,
+    image: "https://imgproxy.goplayone.com/1/auto/768/0/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvYmFubmVyLzVjMmM1NzRhNTY0ZDNhMmU4ODM5OTlhZTQ3NDk1NTQ5LnBuZw==",
+    externalUrl: "https://twitch.tv/cookingchef"
+  },
+  {
+    id: 4,
+    image: "https://imgproxy.goplayone.com/1/auto/768/0/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvYmFubmVyL2JjNGI4NmJlNzM5OWJlNGJmNTY2MTk0YjZmOWZkZDYwLnBuZw==",
+    externalUrl: "https://youtube.com/watch?v=coding123"
+  }
+]);
+
+const popularStreamers = computed(() => [
+  { 
+    id: 1, 
+    name: "音樂小天使", 
+    photo: "https://playone-assets.goplayone.com/playone/user/play/avatar/ea249b64-a3d5-4ff1-bdc5-2eb0d0f956ea",
+    description: "音樂達人♫",
+    rank: "黃金",
+    fans: 1560,
+    orders: 112,
+    badges: ["rank-gold", "pro-music", "feature-verified"],
+    gender: "female" as const,
+    birthday: "1998-03-15",
+    greeting: "你好~我是音樂小天使~音樂達人♫",
+    status: "專業音樂陪陪!",
+    availability: "隨時可約 聲音甜美",
+    personality: "溫柔體貼 歌聲動人",
+    promise: "用音樂治癒你的心靈~快來聽我唱歌吧💕"
+  },
+  { 
+    id: 2, 
+    name: "電競女武神", 
+    photo: "https://imgproxy.goplayone.com/1/auto/244/244/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvdXNlci9wbGF5L2F2YXRhci83NDk5ODA2OS04YTU4LTQ5YWQtOTc1YS1jNTczZmY0YjNjNTY=",
+    description: "FPS女王",
+    rank: "大師",
+    fans: 2800,
+    orders: 198,
+    badges: ["rank-master", "pro-gaming", "feature-live"],
+    gender: "female" as const,
+    birthday: "1995-07-22",
+    greeting: "Yo~我是電競女武神~FPS女王🔫",
+    status: "前職業選手 現役陪陪!",
+    availability: "晚上8-12點 週末全天",
+    personality: "冷靜狙擊 一槍一個",
+    promise: "帶你體驗職業級操作!從菜鳥到高手 包教包會🎯"
+  },
+  { 
+    id: 3, 
+    name: "二次元萌妹", 
+    photo: "https://playone-assets.goplayone.com/playone/user/play/avatar/a4b858a7-a1f3-4543-8d18-ae94e8db573b",
+    description: "動漫專家",
+    rank: "黃金",
+    fans: 1200,
+    orders: 89,
+    badges: ["rank-gold", "special-anime", "feature-new"],
+    gender: "female" as const,
+    birthday: "2000-11-08",
+    greeting: "こんにちは~我是二次元萌妹~動漫專家🌸",
+    status: "動漫系大學生 兼職陪陪!",
+    availability: "平日晚上 週末下午",
+    personality: "超愛動漫 聲音超萌",
+    promise: "一起討論最新番劇!陪你刷副本 收集老婆💖"
+  },
+  { 
+    id: 4, 
+    name: "策略大師", 
+    photo: "https://imgproxy.goplayone.com/1/auto/244/244/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvdXNlci9wbGF5L2F2YXRhci8zZjMzMTZlYS04YzRkLTQ0Y2UtOTc5Mi0zMTk2ZmUxZmJhOGU=",
+    description: "戰術專家",
+    rank: "鑽石",
+    fans: 4200,
+    orders: 312,
+    badges: ["rank-diamond", "achievement-expert", "feature-vip"],
+    gender: "male" as const,
+    birthday: "1992-05-18",
+    greeting: "你好~我是策略大師~戰術專家🧠",
+    status: "前職業教練 現專職陪陪!",
+    availability: "週一到週五 下午2-8點",
+    personality: "理性分析 耐心指導",
+    promise: "從戰術思維到操作細節 全面提升你的遊戲智商!📊"
+  },
+  { 
+    id: 5, 
+    name: "派對女王", 
+    photo: "https://imgproxy.goplayone.com/1/auto/244/244/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvdXNlci9wbGF5L2F2YXRhci80YmUzOWUxZi04YzJhLTRiMmItYjk0NS1lYjAyMWEzNjc5ZGM=",
+    description: "社交達人",
+    rank: "鑽石",
+    fans: 2100,
+    orders: 167,
+    badges: ["rank-diamond", "special-party", "feature-popular"],
+    gender: "female" as const,
+    birthday: "1996-09-12",
+    greeting: "Hey~我是派對女王~社交達人🎉",
+    status: "全職陪陪 專攻社交遊戲!",
+    availability: "24小時待命 隨時開趴",
+    personality: "超會帶氣氛 人緣超好",
+    promise: "讓你的遊戲時光充滿歡笑!組隊開黑 一起嗨翻天🎊"
+  },
+  { 
+    id: 6, 
+    name: "生存專家", 
+    photo: "https://imgproxy.goplayone.com/1/auto/420/420/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvdXNlci9wbGF5L2F2YXRhci9hYTFhNzdjMy05YTI2LTRmNTctOTlkMC02NTA2M2IwMDgyYTY=",
+    description: "荒野求生",
+    rank: "大師",
+    fans: 1800,
+    orders: 134,
+    badges: ["rank-master", "special-survival", "achievement-mentor"],
+    gender: "male" as const,
+    birthday: "1994-12-03",
+    greeting: "Hello~我是生存專家~荒野求生🏕️",
+    status: "建築系學生 兼職陪陪!",
+    availability: "晚上7點後 週末全天",
+    personality: "創意無限 耐心建造",
+    promise: "帶你建造夢想家園!從零開始 打造專屬世界🏗️"
+  }
+]);
+
+// Mock data for recommended services
+const recommendedServices = computed(() => [
+  {
+    id: 1,
+    name: "1v1 聊天",
+    nameEn: "1v1 Chat",
+    image: "https://imgproxy.goplayone.com/1/auto/244/94/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvc2tpbGwvYzQ4YzUxYjE1YmUyZTFjMDcyOTk1ZGJhZGE0MmExY2EucG5n",
+    description: "一對一聊天服務",
+    category: "chat"
+  },
+  {
+    id: 2,
+    name: "唱歌",
+    nameEn: "Singing",
+    image: "http://imgproxy.goplayone.com/1/auto/244/94/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvc2tpbGwvYzY1ZTJhMjAzYzRlY2U2NzhkNjkxNGE3YTBhMmQ0ODMucG5n",
+    description: "音樂歌唱服務",
+    category: "music"
+  },
+  {
+    id: 3,
+    name: "STEAM",
+    nameEn: "STEAM",
+    image: "https://imgproxy.goplayone.com/1/auto/244/94/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvc2tpbGwvM2RmOGQ2NzdiYzZmMGIzMzIzZmQ1MGNhYWFhZDUyMjUucG5n",
+    description: "Steam 遊戲平台",
+    category: "gaming"
+  },
+  {
+    id: 4,
+    name: "英雄聯盟",
+    nameEn: "League of Legends",
+    image: "https://imgproxy.goplayone.com/1/auto/244/94/sm/0/aHR0cHM6Ly9wbGF5b25lLWFzc2V0cy5nb3BsYXlvbmUuY29tL3BsYXlvbmUvc2tpbGwvMTljZmUxYWYwMGYyN2M4YWY1ZTYzOGFkNjM0ZDNkMDYucG5n",
+    description: "英雄聯盟遊戲",
+    category: "gaming"
+  },
+  {
+    id: 5,
+    name: "王者榮耀",
+    nameEn: "Honor of Kings",
+    image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDIwMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9ImtpbmdHcmFkaWVudCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGRkQ3MDAiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjRkZBNTAwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIxMjAiIGZpbGw9InVybCgja2luZ0dyYWRpZW50KSIvPgo8dGV4dCB4PSIxMDAiIHk9IjYwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMTgiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+546L5a2Q5rW35rKzPC90ZXh0Pgo8c3ZnIHg9IjgwIiB5PSIzMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRkZGRkZGIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xMCAxMCBMMzAgMzAgTTMwIDEwIEwxMCAzMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cjwvc3ZnPgo=",
+    description: "王者榮耀手遊",
+    category: "gaming"
+  },
+  {
+    id: 6,
+    name: "原神",
+    nameEn: "Genshin Impact",
+    image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDIwMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9ImdlbnNoaW5HcmFkaWVudCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM2NkMzRkYiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDA2NkZGIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIxMjAiIGZpbGw9InVybCgjZ2Vuc2hpbkdyYWRpZW50KSIvPgo8dGV4dCB4PSIxMDAiIHk9IjYwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+5Y6f5YibPC90ZXh0Pgo8c3ZnIHg9IjgwIiB5PSIzMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRkZGRkZGIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xMCAxMCBMMzAgMzAgTTMwIDEwIEwxMCAzMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cjwvc3ZnPgo=",
+    description: "原神開放世界遊戲",
+    category: "gaming"
+  },
+  {
+    id: 7,
+    name: "直播",
+    nameEn: "Live Streaming",
+    image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDIwMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9ImxpdmVHcmFkaWVudCIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNGRjAwMDAiLz4KPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjQ0MwMDAwIi8+CjwvbGluZWFyR3JhZGllbnQ+CjwvZGVmcz4KPHJlY3Qgd2lkdGg9IjIwMCIgaGVpZ2h0PSIxMjAiIGZpbGw9InVybCgjbGl2ZUdyYWRpZW50KSIvPgo8dGV4dCB4PSIxMDAiIHk9IjYwIiBmb250LWZhbWlseT0iQXJpYWwiIGZvbnQtc2l6ZT0iMjQiIGZvbnQtd2VpZ2h0PSJib2xkIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+55m75b2VPC90ZXh0Pgo8c3ZnIHg9IjgwIiB5PSIzMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBmaWxsPSIjRkZGRkZGIj4KPGNpcmNsZSBjeD0iMjAiIGN5PSIyMCIgcj0iMTgiIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+CjxwYXRoIGQ9Ik0xMCAxMCBMMzAgMzAgTTMwIDEwIEwxMCAzMCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiLz4KPC9zdmc+Cjwvc3ZnPgo=",
+    description: "直播服務",
+    category: "streaming"
+  },
+  {
+    id: 8,
+    name: "陪玩",
+    nameEn: "Gaming Companion",
+    image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjEyMCIgdmlld0JveD0iMCAwIDIwMCAxMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9ImNvbXBhbm9uR3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMTAwJSIgeTI9IjEwMCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjRkY2NkNDIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI0ZGMDA5OSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+CjxyZWN0IHdpZHRoPSIyMDAiIGhlaWdodD0iMTIwIiBmaWxsPSJ1cmwoI2NvbXBhbm9uR3JhZGllbnQpIi8+Cjx0ZXh0IHg9IjEwMCIgeT0iNjAiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIj7mh6Dmh6A8L3RleHQ+CjxzdmcgeD0iODAiIHk9IjMwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIGZpbGw9IiNGRkZGRkYiPgo8Y2lyY2xlIGN4PSIyMCIgY3k9IjIwIiByPSIxOCIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiLz4KPHBhdGggZD0iTTEwIDEwIEwzMCAzMCBNMzAgMTAgTDEwIDMwIiBzdHJva2U9IiMwMDAwMDAiIHN0cm9rZS13aWR0aD0iMiIvPgo8L3N2Zz4KPC9zdmc+Cg==",
+    description: "遊戲陪玩服務",
+    category: "companion"
+  }
+]);
+
+// Services drag state
+const isDragging = ref(false);
+const startX = ref(0);
+const scrollLeft = ref(0);
+const servicesContainer = ref<HTMLElement | null>(null);
+
+// Carousel state
+const currentSlide = ref(0);
+const carouselInterval = ref<number | null>(null);
+
+
+// Auto-play carousel
+const startCarousel = () => {
+  carouselInterval.value = window.setInterval(() => {
+    currentSlide.value = (currentSlide.value + 1) % featuredStreams.value.length;
+  }, 4000);
+};
+
+const stopCarousel = () => {
+  if (carouselInterval.value) {
+    clearInterval(carouselInterval.value);
+    carouselInterval.value = null;
+  }
+};
+
+
+// Handle stream click
+const handleStreamClick = (stream: any) => {
+  if (stream.externalUrl) {
+    window.open(stream.externalUrl, '_blank', 'noopener,noreferrer');
+  }
+};
+
+// Handle streamer click
+const handleStreamerClick = (streamer: any) => {
+  console.log(`查看主播: ${streamer.name}`);
+  // TODO: Open streamer profile
+};
+
+// Handle more button click
+const handleMoreClick = (streamer: any) => {
+  console.log(`查看更多: ${streamer.name}`);
+  // TODO: Open detailed streamer page
+};
+
+// Handle profile button click
+const handleProfileClick = (streamer: any) => {
+  console.log(`前往主播主頁: ${streamer.name}`);
+  // TODO: Navigate to streamer profile page
+};
+
+// Handle service click
+const handleServiceClick = (service: any) => {
+  console.log(`點擊服務: ${service.name}`);
+  // TODO: Navigate to service page or open service modal
+};
+
+// Handle service drag functionality
+const handleMouseDown = (e: MouseEvent) => {
+  if (!servicesContainer.value) return;
+  
+  isDragging.value = true;
+  startX.value = e.pageX - servicesContainer.value.offsetLeft;
+  scrollLeft.value = servicesContainer.value.scrollLeft;
+  
+  // Prevent text selection while dragging
+  e.preventDefault();
+};
+
+const handleMouseMove = (e: MouseEvent) => {
+  if (!isDragging.value || !servicesContainer.value) return;
+  
+  e.preventDefault();
+  const x = e.pageX - servicesContainer.value.offsetLeft;
+  const walk = (x - startX.value) * 2; // Multiply for faster scrolling
+  servicesContainer.value.scrollLeft = scrollLeft.value - walk;
+};
+
+const handleMouseUp = () => {
+  isDragging.value = false;
+};
+
+const handleMouseLeave = () => {
+  isDragging.value = false;
+};
+
+// Handle more services button click
+const handleMoreServicesClick = () => {
+  console.log('點擊更多服務');
+  // TODO: Navigate to services page
+};
+
+
+onMounted(() => {
+  startCarousel();
+});
+
+onUnmounted(() => {
+  stopCarousel();
+});
+</script>
+
+<template>
+  <div class="news-hub">
+    <!-- Header -->
+    <div class="hub-header">
+      <h2 class="hub-title">📰 {{ t('livestream.title') }}</h2>
+      <div class="hub-subtitle">{{ t('livestream.subtitle') }}</div>
+    </div>
+
+    <!-- Home View -->
+    <div class="home-view">
+
+    <!-- Featured Streams Carousel -->
+    <div class="carousel-section">
+      <h3 class="section-title">🔥 {{ t('livestream.featuredStreams') }}</h3>
+      <div class="carousel-container" @mouseenter="stopCarousel" @mouseleave="startCarousel">
+        <div class="carousel-track" :style="{ transform: `translateX(-${currentSlide * 100}%)` }">
+          <div 
+            v-for="stream in featuredStreams" 
+            :key="stream.id"
+            class="carousel-slide"
+            @click="handleStreamClick(stream)"
+          >
+            <div class="stream-image-card">
+              <img :src="stream.image" :alt="`Stream ${stream.id}`" />
+            </div>
+          </div>
+        </div>
+        
+        <!-- Carousel Controls -->
+        <button 
+          class="carousel-btn prev" 
+          @click="currentSlide = currentSlide > 0 ? currentSlide - 1 : featuredStreams.length - 1"
+        >
+          ‹
+        </button>
+        <button 
+          class="carousel-btn next" 
+          @click="currentSlide = (currentSlide + 1) % featuredStreams.length"
+        >
+          ›
+        </button>
+        
+        <!-- Carousel Indicators -->
+        <div class="carousel-indicators">
+          <button 
+            v-for="(stream, index) in featuredStreams" 
+            :key="index"
+            class="indicator"
+            :class="{ active: index === currentSlide }"
+            @click="currentSlide = index"
+          ></button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Recommended Services -->
+    <div class="services-section">
+      <div class="services-header">
+        <h3 class="section-title">🎯 {{ t('livestream.recommendedServices') }}</h3>
+        <button class="more-services-btn" @click="handleMoreServicesClick">
+          更多
+        </button>
+      </div>
+      
+      <div 
+        ref="servicesContainer"
+        class="services-scroll-container"
+        @mousedown="handleMouseDown"
+        @mousemove="handleMouseMove"
+        @mouseup="handleMouseUp"
+        @mouseleave="handleMouseLeave"
+        :class="{ 'dragging': isDragging }"
+      >
+        <div class="services-grid">
+          <div 
+            v-for="service in recommendedServices" 
+            :key="service.id"
+            class="service-card"
+            @click="handleServiceClick(service)"
+          >
+            <div class="service-image">
+              <img :src="service.image" :alt="service.name" />
+            </div>
+            <div class="service-label">{{ service.name }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Popular Streamers -->
+    <div class="streamers-section">
+      <h3 class="section-title">⭐ {{ t('livestream.popularStreamers') }}</h3>
+      <div class="streamers-grid">
+        <StreamerFlipCard 
+          v-for="streamer in popularStreamers" 
+          :key="streamer.id"
+          :streamer="streamer"
+          @click="handleStreamerClick"
+          @more="handleMoreClick"
+          @profile="handleProfileClick"
+        />
+      </div>
+    </div>
+    </div> <!-- End home-view -->
+  </div>
+</template>
+
+<style scoped>
+.news-hub {
+  width: 100%;
+  height: 100%;
+  background: var(--window-background);
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+}
+
+.hub-header {
+  text-align: center;
+  margin-bottom: 24px;
+}
+
+.hub-title {
+  font-size: 24px;
+  font-weight: bold;
+  color: var(--content-text-color);
+  margin: 0 0 8px 0;
+}
+
+.hub-subtitle {
+  font-size: 14px;
+  color: var(--content-text-color);
+  opacity: 0.7;
+}
+
+.carousel-section {
+  margin-bottom: 32px;
+}
+
+.section-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--content-text-color);
+  margin: 0 0 16px 0;
+}
+
+.carousel-container {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16/9;
+  overflow: hidden;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.carousel-track {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  transition: transform 0.5s ease-in-out;
+}
+
+.carousel-slide {
+  min-width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.stream-image-card {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  overflow: hidden;
+}
+
+.stream-image-card img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  transition: transform 0.3s ease;
+}
+
+.stream-image-card:hover img {
+  transform: scale(1.05);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+.carousel-btn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(0, 0, 0, 0.5);
+  border: none;
+  color: white;
+  font-size: 24px;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  z-index: 10;
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.carousel-btn:hover {
+  background: rgba(0, 0, 0, 0.7);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.carousel-btn.prev {
+  left: 16px;
+}
+
+.carousel-btn.next {
+  right: 16px;
+}
+
+.carousel-indicators {
+  position: absolute;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+  z-index: 10;
+}
+
+.indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  background: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  flex-shrink: 0;
+  aspect-ratio: 1;
+  min-width: 12px;
+  min-height: 12px;
+}
+
+.indicator.active {
+  background: white;
+  border-color: white;
+  transform: scale(1.2);
+}
+
+.services-section {
+  margin-bottom: 32px;
+}
+
+.services-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.more-services-btn {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.more-services-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
+}
+
+.services-scroll-container {
+  overflow-x: auto;
+  overflow-y: hidden;
+  cursor: grab;
+  border-radius: 12px;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+}
+
+.services-scroll-container::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
+}
+
+.services-scroll-container.dragging {
+  cursor: grabbing;
+  user-select: none;
+}
+
+.services-grid {
+  display: flex;
+  gap: 24px;
+  padding: 0 12px;
+  min-width: max-content;
+}
+
+.service-card {
+  background: white;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  width: 200px;
+  flex-shrink: 0;
+}
+
+.service-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+}
+
+.service-image {
+  width: 100%;
+  height: 120px;
+  overflow: hidden;
+  position: relative;
+}
+
+.service-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.service-label {
+  padding: 12px 16px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 600;
+  color: #333333;
+  background: white;
+}
+
+
+.streamers-section {
+  flex: 1;
+}
+
+.streamers-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 24px;
+  align-items: start;
+}
+
+
+/* 響應式網格佈局 */
+/* 響應式設計 */
+@media (max-width: 1200px) {
+  .services-grid {
+    gap: 20px;
+    padding: 0 16px;
+  }
+  
+  .service-card {
+    width: 250px;
+  }
+  
+  .streamers-grid {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 20px;
+  }
+  
+  .carousel-container {
+    aspect-ratio: 16/9;
+  }
+  
+  .carousel-btn {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+  }
+  
+  .carousel-btn.prev {
+    left: 12px;
+  }
+  
+  .carousel-btn.next {
+    right: 12px;
+  }
+}
+
+@media (max-width: 768px) {
+  .news-hub {
+    padding: 16px;
+  }
+  
+  .hub-title {
+    font-size: 24px;
+  }
+  
+  .hub-subtitle {
+    font-size: 14px;
+  }
+  
+  .services-grid {
+    gap: 16px;
+    padding: 0 12px;
+  }
+  
+  .service-card {
+    width: 180px;
+  }
+  
+  .service-image {
+    height: 100px;
+  }
+  
+  .service-label {
+    padding: 10px 12px;
+    font-size: 13px;
+  }
+  
+  .more-services-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+  
+  .streamers-grid {
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 16px;
+  }
+  
+  .carousel-container {
+    aspect-ratio: 16/9;
+    border-radius: 8px;
+  }
+  
+  .carousel-btn {
+    width: 36px;
+    height: 36px;
+    font-size: 18px;
+  }
+  
+  .carousel-btn.prev {
+    left: 8px;
+  }
+  
+  .carousel-btn.next {
+    right: 8px;
+  }
+  
+  .carousel-indicators {
+    bottom: 12px;
+    gap: 6px;
+  }
+  
+  .indicator {
+    width: 10px;
+    height: 10px;
+  }
+}
+
+@media (max-width: 480px) {
+  .news-hub {
+    padding: 12px;
+  }
+  
+  .hub-title {
+    font-size: 20px;
+    margin-bottom: 8px;
+  }
+  
+  .hub-subtitle {
+    font-size: 13px;
+    margin-bottom: 20px;
+  }
+  
+  .services-grid {
+    gap: 12px;
+    padding: 0 8px;
+  }
+  
+  .service-card {
+    width: 150px;
+  }
+  
+  .service-image {
+    height: 80px;
+  }
+  
+  .service-label {
+    padding: 8px 10px;
+    font-size: 12px;
+  }
+  
+  .more-services-btn {
+    padding: 4px 8px;
+    font-size: 11px;
+  }
+  
+  .streamers-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .carousel-container {
+    aspect-ratio: 16/9;
+    border-radius: 6px;
+  }
+  
+  .carousel-btn {
+    width: 32px;
+    height: 32px;
+    font-size: 16px;
+  }
+  
+  .carousel-btn.prev {
+    left: 6px;
+  }
+  
+  .carousel-btn.next {
+    right: 6px;
+  }
+  
+  .carousel-indicators {
+    bottom: 8px;
+    gap: 4px;
+  }
+  
+  .indicator {
+    width: 8px;
+    height: 8px;
+  }
+}
+
+/* Light theme adjustments */
+.theme-light .carousel-btn {
+  background: rgba(255, 255, 255, 0.8);
+  color: #333;
+}
+
+.theme-light .carousel-btn:hover {
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.theme-light .indicator {
+  border-color: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.theme-light .indicator.active {
+  background: #333;
+  border-color: #333;
+}
+
+</style>
diff --git a/components/StreamerBadge.vue b/components/StreamerBadge.vue
new file mode 100644
index 0000000..5cdb528
--- /dev/null
+++ b/components/StreamerBadge.vue
@@ -0,0 +1,342 @@
+<template>
+  <div :class="['streamer-badge', badgeClass, sizeClass]" :title="badgeConfig.tooltip">
+    <span v-if="badgeConfig.icon" class="badge-icon">{{ badgeConfig.icon }}</span>
+    <span v-if="badgeConfig.text" class="badge-text">{{ badgeConfig.text }}</span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+interface Props {
+  code: string;
+  size?: 'small' | 'medium' | 'large';
+}
+
+const props = defineProps<Props>();
+
+const badgeConfigs: { [key: string]: { text: string; icon?: string; class: string; tooltip: string; } } = {
+  // 等級徽章
+  'rank-diamond': { text: '鑽石', icon: '💎', class: 'badge-rank-diamond', tooltip: '鑽石級玩家' },
+  'rank-gold': { text: '黃金', icon: '🏆', class: 'badge-rank-gold', tooltip: '黃金級玩家' },
+  'rank-silver': { text: '白銀', icon: '🥈', class: 'badge-rank-silver', tooltip: '白銀級玩家' },
+  'rank-bronze': { text: '青銅', icon: '🥉', class: 'badge-rank-bronze', tooltip: '青銅級玩家' },
+  'rank-master': { text: '大師', icon: '🎖️', class: 'badge-rank-master', tooltip: '大師級玩家' },
+  
+  // 專業徽章
+  'pro-gaming': { text: '電競', icon: '🎮', class: 'badge-pro-gaming', tooltip: '專業電競陪玩' },
+  'pro-music': { text: '音樂', icon: '🎵', class: 'badge-pro-music', tooltip: '音樂專家' },
+  'pro-anime': { text: '二次元', icon: '🌸', class: 'badge-pro-anime', tooltip: '二次元專家' },
+  'pro-party': { text: '派對', icon: '🎉', class: 'badge-pro-party', tooltip: '派對達人' },
+  'pro-strategy': { text: '策略', icon: '♟️', class: 'badge-pro-strategy', tooltip: '策略大師' },
+  'pro-survival': { text: '生存', icon: '🏹', class: 'badge-pro-survival', tooltip: '生存專家' },
+  
+  // 特色徽章
+  'feature-live': { text: '直播中', icon: '🔴', class: 'badge-feature-live', tooltip: '正在直播' },
+  'feature-verified': { text: '認證', icon: '✅', class: 'badge-feature-verified', tooltip: '認證主播' },
+  'feature-new': { text: '新人', icon: '⭐', class: 'badge-feature-new', tooltip: '新進主播' },
+  'feature-popular': { text: '熱門', icon: '🔥', class: 'badge-feature-popular', tooltip: '熱門主播' },
+  'feature-vip': { text: 'VIP', icon: '👑', class: 'badge-feature-vip', tooltip: 'VIP主播' },
+  
+  // 特殊徽章
+  'special-anime': { text: '動漫', icon: '🎌', class: 'badge-special-anime', tooltip: '動漫專家' },
+  'special-party': { text: '派對', icon: '🎊', class: 'badge-special-party', tooltip: '派對女王' },
+  'special-survival': { text: '生存', icon: '🛡️', class: 'badge-special-survival', tooltip: '生存專家' },
+  
+  // 成就徽章
+  'achievement-expert': { text: '專家', icon: '🎯', class: 'badge-achievement-expert', tooltip: '領域專家' },
+  'achievement-mentor': { text: '導師', icon: '👨‍🏫', class: 'badge-achievement-mentor', tooltip: '新手導師' }
+};
+
+const badgeConfig = computed(() => badgeConfigs[props.code] || { text: props.code, class: 'badge-default', tooltip: props.code });
+const badgeClass = computed(() => badgeConfig.value.class);
+const sizeClass = computed(() => `badge-size-${props.size || 'medium'}`);
+</script>
+
+<style scoped>
+.streamer-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 80px;
+}
+
+.streamer-badge:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.badge-icon {
+  font-size: 10px;
+  line-height: 1;
+}
+
+.badge-text {
+  font-size: 9px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+/* 尺寸變體 */
+.badge-size-small {
+  padding: 2px 6px;
+  font-size: 8px;
+  border-radius: 8px;
+  max-width: 60px;
+}
+
+.badge-size-small .badge-icon {
+  font-size: 8px;
+}
+
+.badge-size-small .badge-text {
+  font-size: 7px;
+}
+
+.badge-size-medium {
+  padding: 4px 8px;
+  font-size: 10px;
+  border-radius: 12px;
+  max-width: 80px;
+}
+
+.badge-size-large {
+  padding: 6px 12px;
+  font-size: 12px;
+  border-radius: 16px;
+  max-width: 100px;
+}
+
+.badge-size-large .badge-icon {
+  font-size: 12px;
+}
+
+.badge-size-large .badge-text {
+  font-size: 11px;
+}
+
+/* 等級徽章 */
+.badge-rank-diamond {
+  background: linear-gradient(135deg, #b9f2ff 0%, #00d4ff 100%);
+  color: #0066cc;
+  border-color: rgba(0, 102, 204, 0.3);
+}
+
+.badge-rank-gold {
+  background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
+  color: #b8860b;
+  border-color: rgba(184, 134, 11, 0.3);
+}
+
+.badge-rank-silver {
+  background: linear-gradient(135deg, #c0c0c0 0%, #a8a8a8 100%);
+  color: #696969;
+  border-color: rgba(105, 105, 105, 0.3);
+}
+
+.badge-rank-bronze {
+  background: linear-gradient(135deg, #cd7f32 0%, #b87333 100%);
+  color: #8b4513;
+  border-color: rgba(139, 69, 19, 0.3);
+}
+
+.badge-rank-master {
+  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
+  color: #8b4513;
+  border-color: rgba(139, 69, 19, 0.3);
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+/* 專業徽章 */
+.badge-pro-gaming {
+  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.badge-pro-music {
+  background: linear-gradient(135deg, #a8e6cf 0%, #7fcdcd 100%);
+  color: #2c5530;
+  border-color: rgba(44, 85, 48, 0.3);
+}
+
+.badge-pro-anime {
+  background: linear-gradient(135deg, #ffb3ba 0%, #ffdfba 100%);
+  color: #d63384;
+  border-color: rgba(214, 51, 132, 0.3);
+}
+
+.badge-pro-party {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+  color: #e91e63;
+  border-color: rgba(233, 30, 99, 0.3);
+}
+
+.badge-pro-strategy {
+  background: linear-gradient(135deg, #a8c8ec 0%, #5d9cec 100%);
+  color: #2c3e50;
+  border-color: rgba(44, 62, 80, 0.3);
+}
+
+.badge-pro-survival {
+  background: linear-gradient(135deg, #d4a574 0%, #8b7355 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* 特殊徽章 */
+.badge-special-anime {
+  background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
+  color: #e91e63;
+  border-color: rgba(233, 30, 99, 0.3);
+}
+
+.badge-special-party {
+  background: linear-gradient(135deg, #ff6b9d 0%, #c44569 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+  animation: pulse 2s infinite;
+}
+
+.badge-special-survival {
+  background: linear-gradient(135deg, #8b7355 0%, #6b5b73 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* 特色徽章 */
+.badge-feature-live {
+  background: linear-gradient(135deg, #ff4757 0%, #c44569 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+  animation: pulse 2s infinite;
+}
+
+.badge-feature-verified {
+  background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.badge-feature-new {
+  background: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+.badge-feature-popular {
+  background: linear-gradient(135deg, #ff3838 0%, #ff6b35 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+  animation: glow 2s ease-in-out infinite alternate;
+}
+
+.badge-feature-vip {
+  background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%);
+  color: #8b4513;
+  border-color: rgba(139, 69, 19, 0.3);
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+/* 成就徽章 */
+.badge-achievement-expert {
+  background: linear-gradient(135deg, #2ed573 0%, #1e90ff 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+  animation: glow 2s ease-in-out infinite alternate;
+}
+
+.badge-achievement-mentor {
+  background: linear-gradient(135deg, #ffa502 0%, #ff6348 100%);
+  color: white;
+  border-color: rgba(255, 255, 255, 0.3);
+}
+
+/* 預設徽章 */
+.badge-default {
+  background: linear-gradient(135deg, #ddd 0%, #bbb 100%);
+  color: #666;
+  border-color: rgba(102, 102, 102, 0.3);
+}
+
+/* 動畫效果 */
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.7; }
+}
+
+@keyframes glow {
+  from { box-shadow: 0 2px 8px rgba(255, 56, 56, 0.3); }
+  to { box-shadow: 0 4px 16px rgba(255, 56, 56, 0.6); }
+}
+
+@keyframes shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.badge-feature-vip {
+  background-size: 200% 100%;
+  animation: shimmer 3s ease-in-out infinite;
+}
+
+/* 響應式設計 */
+@media (max-width: 768px) {
+  .streamer-badge {
+    padding: 3px 6px;
+    font-size: 9px;
+    border-radius: 10px;
+    max-width: 70px;
+  }
+  
+  .badge-size-small {
+    padding: 2px 4px;
+    font-size: 7px;
+    border-radius: 6px;
+    max-width: 50px;
+  }
+  
+  .badge-size-large {
+    padding: 4px 8px;
+    font-size: 10px;
+    border-radius: 12px;
+    max-width: 80px;
+  }
+}
+
+@media (max-width: 480px) {
+  .streamer-badge {
+    padding: 2px 5px;
+    font-size: 8px;
+    border-radius: 8px;
+    max-width: 60px;
+  }
+  
+  .badge-size-small {
+    padding: 1px 3px;
+    font-size: 6px;
+    border-radius: 4px;
+    max-width: 40px;
+  }
+  
+  .badge-size-large {
+    padding: 3px 6px;
+    font-size: 9px;
+    border-radius: 10px;
+    max-width: 70px;
+  }
+}
+</style>
diff --git a/components/StreamerFlipCard.vue b/components/StreamerFlipCard.vue
new file mode 100644
index 0000000..7360284
--- /dev/null
+++ b/components/StreamerFlipCard.vue
@@ -0,0 +1,694 @@
+<template>
+  <div 
+    class="flip-card" 
+    :class="{ 'is-flipped': isFlipped }"
+    @mouseenter="handleCardHover"
+    @mouseleave="handleCardLeave"
+  >
+    <div class="flip-card-inner">
+      <!-- 卡片背面 (左邊的樣式) -->
+      <div class="flip-card-back">
+        <div class="back-content">
+        <h3 class="back-title">{{ streamer.name }}</h3>
+        <p class="greeting">{{ streamer.greeting }}</p>
+        <p class="status">{{ streamer.status }}</p>
+        <p class="availability">{{ streamer.availability }}</p>
+        <p class="personality">{{ streamer.personality }}</p>
+        <p class="promise">{{ streamer.promise }}</p>
+        
+        <!-- 主播主頁按鈕 -->
+        <button 
+          class="profile-button"
+          @click="handleProfileClick"
+        >
+          去這個主播主頁
+        </button>
+        </div>
+      </div>
+      
+      <!-- 卡片正面 - 簡潔設計 -->
+      <div class="flip-card-front">
+        <div class="photo-container">
+          <img 
+            :src="streamer.photo" 
+            :alt="streamer.name"
+            class="streamer-photo"
+          />
+          
+          <!-- 簡潔的覆蓋層 -->
+          <div class="photo-overlay">
+            <!-- 右上角徽章組 -->
+            <div class="badges-container">
+              <StreamerBadge
+                v-for="(badgeCode, index) in streamer.badges.slice(0, 3)"
+                :key="`${streamer.id}-badge-${index}`"
+                :code="badgeCode"
+                size="small"
+                class="streamer-badge"
+              />
+            </div>
+            
+            <!-- 底部資訊條 -->
+            <div class="info-bar">
+              <div class="streamer-info">
+                <h3 class="streamer-name">{{ streamer.name }}</h3>
+                <p class="streamer-description">{{ streamer.description }}</p>
+              </div>
+              
+              <!-- 性別和生日資訊 -->
+              <div class="personal-info">
+                <div class="gender-badge" :class="streamer.gender">
+                  <span class="gender-icon">{{ streamer.gender === 'female' ? '♀' : '♂' }}</span>
+                  <span class="gender-text">{{ streamer.gender === 'female' ? '女' : '男' }}</span>
+                </div>
+                <div class="birthday-info">
+                  <span class="birthday-icon">🎂</span>
+                  <span class="birthday-text">{{ formatBirthday(streamer.birthday) }}</span>
+                </div>
+              </div>
+              
+              <div class="stats-row">
+                <div class="stat-item">
+                  <span class="stat-number">{{ streamer.fans }}</span>
+                  <span class="stat-label">粉絲</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-number">{{ streamer.orders }}</span>
+                  <span class="stat-label">接單</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import StreamerBadge from './StreamerBadge.vue';
+
+interface Streamer {
+  id: number;
+  name: string;
+  photo: string;
+  description: string;
+  rank: string;
+  fans: number;
+  orders: number;
+  badges: string[];
+  greeting: string;
+  status: string;
+  availability: string;
+  personality: string;
+  promise: string;
+  gender: 'male' | 'female';
+  birthday: string;
+}
+
+interface Props {
+  streamer: Streamer;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  click: [streamer: Streamer];
+  more: [streamer: Streamer];
+  profile: [streamer: Streamer];
+}>();
+
+const isFlipped = ref(false);
+
+const handleCardHover = () => {
+  isFlipped.value = true;
+  console.log('Card hovered, showing back');
+};
+
+const handleCardLeave = () => {
+  isFlipped.value = false;
+  console.log('Card left, showing front');
+};
+
+const handleMoreClick = (event: Event) => {
+  event.stopPropagation();
+  emit('more', props.streamer);
+};
+
+const handleStreamerClick = (event: Event) => {
+  event.stopPropagation();
+  emit('click', props.streamer);
+};
+
+const handleProfileClick = (event: Event) => {
+  event.stopPropagation();
+  emit('profile', props.streamer);
+};
+
+// 格式化生日顯示
+const formatBirthday = (birthday: string): string => {
+  const date = new Date(birthday);
+  return `${date.getMonth() + 1}/${date.getDate()}`;
+};
+</script>
+
+<style scoped>
+/* 翻轉卡片容器 */
+.flip-card {
+  width: 100%;
+  height: 320px;
+  min-height: 320px;
+  max-height: 320px;
+  perspective: 1000px;
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+  transition: z-index 0.3s ease;
+}
+
+.flip-card:hover {
+  z-index: 10;
+}
+
+.flip-card.is-flipped {
+  z-index: 5;
+}
+
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+  min-height: 320px;
+  max-height: 320px;
+  box-sizing: border-box;
+}
+
+.flip-card-back,
+.flip-card-front {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  z-index: 1;
+  /* 確保正面和背面尺寸完全一致 */
+  min-height: 320px;
+  max-height: 320px;
+  box-sizing: border-box;
+}
+
+/* 卡片背面樣式 (左邊) */
+.flip-card-back {
+  background: linear-gradient(135deg, rgba(255, 107, 157, 0.8) 0%, rgba(255, 167, 38, 0.8) 100%);
+  color: white;
+  display: none;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 20px;
+  position: relative;
+  overflow: hidden;
+  /* 移除框框效果 */
+  border: none;
+  box-shadow: none;
+  border-radius: 12px;
+}
+
+.flip-card-back::before {
+  content: '';
+  position: absolute;
+  top: -50%;
+  right: -50%;
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.back-content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  padding: 50px 25px;
+  box-sizing: border-box;
+  gap: 10px;
+}
+
+.back-title {
+  font-size: 20px;
+  font-weight: bold;
+  margin: 0 0 16px 0;
+  color: white;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.back-content p {
+  margin: 0;
+  font-size: 13px;
+  line-height: 1.4;
+  color: white;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.greeting {
+  font-weight: 600;
+  color: #fff3e0;
+  font-size: 15px;
+}
+
+.status {
+  color: #ffe0b2;
+  font-size: 14px;
+}
+
+.availability {
+  color: #ffccbc;
+  font-size: 13px;
+}
+
+.personality {
+  color: #f8bbd9;
+  font-size: 13px;
+}
+
+.promise {
+  color: #e1bee7;
+  font-size: 12px;
+  margin: 0;
+  opacity: 0.9;
+}
+
+/* 主播主頁按鈕 */
+.profile-button {
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  color: white;
+  padding: 10px 20px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  margin-top: 20px;
+  border-radius: 25px;
+  backdrop-filter: blur(8px);
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  min-width: 140px;
+}
+
+.profile-button:hover {
+  background: rgba(255, 255, 255, 0.3);
+  border-color: rgba(255, 255, 255, 0.6);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.profile-button:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+}
+
+
+/* 卡片正面樣式 - 簡潔設計 */
+.flip-card-front {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.photo-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.streamer-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+.photo-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  padding: 16px;
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.1) 0%,
+    transparent 30%,
+    transparent 70%,
+    rgba(0, 0, 0, 0.7) 100%
+  );
+}
+
+/* 徽章容器 */
+.badges-container {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-width: 120px;
+  align-items: flex-end;
+}
+
+.streamer-badge {
+  flex-shrink: 0;
+}
+
+/* 底部資訊條 */
+.info-bar {
+  background: transparent;
+  backdrop-filter: none;
+  border-radius: 12px;
+  padding: 12px;
+  margin-top: auto;
+}
+
+.streamer-info {
+  margin-bottom: 8px;
+}
+
+.streamer-name {
+  font-size: 18px;
+  font-weight: 700;
+  color: white;
+  margin: 0 0 4px 0;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+}
+
+.streamer-description {
+  font-size: 12px;
+  color: white;
+  margin: 0;
+  line-height: 1.3;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+}
+
+/* 個人資訊區域 */
+.personal-info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+  gap: 8px;
+}
+
+/* 性別徽章 */
+.gender-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  backdrop-filter: blur(4px);
+}
+
+.gender-badge.female {
+  background: rgba(255, 182, 193, 0.8);
+  color: #d63384;
+  border: 1px solid rgba(214, 51, 132, 0.3);
+}
+
+.gender-badge.male {
+  background: rgba(173, 216, 230, 0.8);
+  color: #0d6efd;
+  border: 1px solid rgba(13, 110, 253, 0.3);
+}
+
+.gender-icon {
+  font-size: 12px;
+  font-weight: bold;
+}
+
+.gender-text {
+  font-size: 10px;
+}
+
+/* 生日資訊 */
+.birthday-info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 8px;
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  font-size: 10px;
+  font-weight: 500;
+  backdrop-filter: blur(4px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.birthday-icon {
+  font-size: 10px;
+}
+
+.birthday-text {
+  font-size: 10px;
+  opacity: 0.9;
+}
+
+/* 統計行 */
+.stats-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.stat-number {
+  font-size: 16px;
+  font-weight: 700;
+  color: white;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
+  line-height: 1;
+}
+
+.stat-label {
+  font-size: 10px;
+  color: white;
+  margin-top: 2px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+}
+
+/* 翻轉狀態樣式 - 懸停時顯示背面（粉橙漸變） */
+.flip-card.is-flipped .flip-card-back {
+  display: flex;
+}
+
+.flip-card.is-flipped .flip-card-front {
+  display: none;
+}
+
+/* 響應式設計 */
+@media (max-width: 768px) {
+  .flip-card {
+    height: 300px;
+    min-height: 300px;
+    max-height: 300px;
+  }
+  
+  .flip-card-inner {
+    min-height: 300px;
+    max-height: 300px;
+  }
+  
+  .flip-card-back,
+  .flip-card-front {
+    min-height: 300px;
+    max-height: 300px;
+  }
+  
+  .back-content {
+    padding: 45px 22px;
+    gap: 12px;
+  }
+  
+  .back-title {
+    font-size: 20px;
+    margin-bottom: 14px;
+  }
+  
+  .back-content p {
+    font-size: 13px;
+    line-height: 1.4;
+  }
+  
+  .profile-button {
+    padding: 8px 16px;
+    font-size: 13px;
+    margin-top: 16px;
+    min-width: 120px;
+  }
+  
+  /* 正面卡片響應式 */
+  .streamer-name {
+    font-size: 16px;
+  }
+  
+  .streamer-description {
+    font-size: 12px;
+  }
+  
+  .personal-info {
+    margin-bottom: 8px;
+    gap: 6px;
+  }
+  
+  .gender-badge {
+    padding: 3px 6px;
+    font-size: 10px;
+  }
+  
+  .birthday-info {
+    padding: 3px 6px;
+    font-size: 9px;
+  }
+  
+  .stat-number {
+    font-size: 14px;
+  }
+  
+  .stat-label {
+    font-size: 10px;
+  }
+  
+  /* 徽章響應式 */
+  .badges-container {
+    top: 12px;
+    right: 12px;
+    max-width: 100px;
+    gap: 4px;
+  }
+}
+
+@media (max-width: 480px) {
+  .flip-card {
+    height: 280px;
+    min-height: 280px;
+    max-height: 280px;
+  }
+  
+  .flip-card-inner {
+    min-height: 280px;
+    max-height: 280px;
+  }
+  
+  .flip-card-back,
+  .flip-card-front {
+    min-height: 280px;
+    max-height: 280px;
+  }
+  
+  .back-content {
+    padding: 35px 18px;
+    gap: 10px;
+  }
+  
+  .back-title {
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
+  
+  .back-content p {
+    font-size: 12px;
+    line-height: 1.3;
+  }
+  
+  .profile-button {
+    padding: 6px 12px;
+    font-size: 12px;
+    margin-top: 14px;
+    min-width: 100px;
+  }
+  
+  /* 正面卡片響應式 */
+  .streamer-name {
+    font-size: 15px;
+  }
+  
+  .streamer-description {
+    font-size: 11px;
+  }
+  
+  .personal-info {
+    margin-bottom: 6px;
+    gap: 4px;
+  }
+  
+  .gender-badge {
+    padding: 2px 5px;
+    font-size: 9px;
+  }
+  
+  .birthday-info {
+    padding: 2px 5px;
+    font-size: 8px;
+  }
+  
+  .stat-number {
+    font-size: 13px;
+  }
+  
+  .stat-label {
+    font-size: 9px;
+  }
+  
+  /* 徽章響應式 */
+  .badges-container {
+    top: 10px;
+    right: 10px;
+    max-width: 90px;
+    gap: 3px;
+  }
+}
+
+/* 深色主題適配 */
+.theme-dark .flip-card-front {
+  background: var(--window-background);
+  color: var(--content-text-color);
+}
+
+.theme-dark .streamer-name {
+  color: var(--content-text-color);
+}
+
+.theme-dark .streamer-description {
+  color: var(--content-text-color);
+  opacity: 0.8;
+}
+</style>
diff --git a/i18n/lang/en.json b/i18n/lang/en.json
index e48b5e8..4060b35 100644
--- a/i18n/lang/en.json
+++ b/i18n/lang/en.json
@@ -18,14 +18,15 @@
     "back": "Back"
   },
   "apps": {
-    "livestream-hub": "LiveStream Hub",
+    "livestream-hub": "Latest News",
     "calculator": "Calculator"
   },
   "livestream": {
-    "title": "LiveStream Hub",
-    "subtitle": "Discover amazing live content",
-    "featuredStreams": "Featured Streams",
-    "popularStreamers": "Popular Streamers",
+    "title": "Latest News",
+    "subtitle": "Stay updated with the latest information",
+    "featuredStreams": "Featured News",
+    "popularStreamers": "Popular Updates",
+    "recommendedServices": "Recommended Services",
     "viewers": "viewers",
     "live": "Live",
     "offline": "Offline",
diff --git a/i18n/lang/zh-TW.json b/i18n/lang/zh-TW.json
index 82721a1..4503c98 100644
--- a/i18n/lang/zh-TW.json
+++ b/i18n/lang/zh-TW.json
@@ -18,14 +18,15 @@
     "back": "返回"
   },
   "apps": {
-    "livestream-hub": "直播中心",
+    "livestream-hub": "最新消息",
     "calculator": "計算機"
   },
   "livestream": {
-    "title": "直播中心",
-    "subtitle": "發現最精彩的直播內容",
-    "featuredStreams": "精選直播",
-    "popularStreamers": "熱門主播",
+    "title": "最新消息",
+    "subtitle": "掌握最新資訊動態",
+    "featuredStreams": "精選消息",
+    "popularStreamers": "熱門資訊",
+    "recommendedServices": "推薦服務",
     "viewers": "觀看",
     "live": "直播中",
     "offline": "離線",
diff --git a/package-lock.json b/package-lock.json
index cbcef4c..b4f99f6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@nuxt/scripts": "^0.11.13",
         "@nuxt/test-utils": "^3.19.2",
         "@nuxt/ui": "^3.3.4",
+        "@nuxtjs/i18n": "^10.1.0",
         "@pinia/nuxt": "^0.11.2",
         "@unhead/vue": "^2.0.17",
         "better-sqlite3": "^12.3.0",
@@ -23,9 +24,7 @@
         "vue": "^3.5.21",
         "vue-router": "^4.5.1"
       },
-      "devDependencies": {
-        "@nuxtjs/i18n": "^10.1.0"
-      }
+      "devDependencies": {}
     },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
@@ -1426,7 +1425,6 @@
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/@intlify/bundle-utils/-/bundle-utils-11.0.1.tgz",
       "integrity": "sha512-5l10G5wE2cQRsZMS9y0oSFMOLW5IG/SgbkIUltqnwF1EMRrRbUAHFiPabXdGTHeexCsMTcxj/1w9i0rzjJU9IQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/message-compiler": "^11.1.10",
@@ -1455,14 +1453,12 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
       "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@intlify/core": {
       "version": "11.1.12",
       "resolved": "https://registry.npmjs.org/@intlify/core/-/core-11.1.12.tgz",
       "integrity": "sha512-Uccp4VtalUSk/b4F9nBBs7VGgIh9VnXTSHHQ+Kc0AetsHJLxdi04LfhfSi4dujtsTAWnHMHWZw07UbMm6Umq1g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/core-base": "11.1.12",
@@ -1479,7 +1475,6 @@
       "version": "11.1.12",
       "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.1.12.tgz",
       "integrity": "sha512-whh0trqRsSqVLNEUCwU59pyJZYpU8AmSWl8M3Jz2Mv5ESPP6kFh4juas2NpZ1iCvy7GlNRffUD1xr84gceimjg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/message-compiler": "11.1.12",
@@ -1496,7 +1491,6 @@
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/@intlify/h3/-/h3-0.7.1.tgz",
       "integrity": "sha512-D/9+L7IzPrOa7e6R/ztepXayAq+snfzBYIwAk3RbaQsLEXwVNjC5c+WKXjni1boc/plGRegw4/m33SaFwvdEpg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/core": "^11.0.0",
@@ -1513,7 +1507,6 @@
       "version": "11.1.12",
       "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.1.12.tgz",
       "integrity": "sha512-Fv9iQSJoJaXl4ZGkOCN1LDM3trzze0AS2zRz2EHLiwenwL6t0Ki9KySYlyr27yVOj5aVz0e55JePO+kELIvfdQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/shared": "11.1.12",
@@ -1530,7 +1523,6 @@
       "version": "11.1.12",
       "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.1.12.tgz",
       "integrity": "sha512-Om86EjuQtA69hdNj3GQec9ZC0L0vPSAnXzB3gP/gyJ7+mA7t06d9aOAiqMZ+xEOsumGP4eEBlfl8zF2LOTzf2A==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 16"
@@ -1543,7 +1535,6 @@
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/@intlify/unplugin-vue-i18n/-/unplugin-vue-i18n-11.0.1.tgz",
       "integrity": "sha512-nH5NJdNjy/lO6Ne8LDtZzv4SbpVsMhPE+LbvBDmMeIeJDiino8sOJN2QB3MXzTliYTnqe3aB9Fw5+LJ/XVaXCg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.4.0",
@@ -1581,7 +1572,6 @@
       "version": "0.13.0",
       "resolved": "https://registry.npmjs.org/@intlify/utils/-/utils-0.13.0.tgz",
       "integrity": "sha512-8i3uRdAxCGzuHwfmHcVjeLQBtysQB2aXl/ojoagDut5/gY5lvWCQ2+cnl2TiqE/fXj/D8EhWG/SLKA7qz4a3QA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 18"
@@ -1594,7 +1584,6 @@
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@intlify/vue-i18n-extensions/-/vue-i18n-extensions-8.0.0.tgz",
       "integrity": "sha512-w0+70CvTmuqbskWfzeYhn0IXxllr6mU+IeM2MU0M+j9OW64jkrvqY+pYFWrUnIIC9bEdij3NICruicwd5EgUuQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.24.6",
@@ -1630,7 +1619,6 @@
       "version": "10.0.8",
       "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-10.0.8.tgz",
       "integrity": "sha512-FoHslNWSoHjdUBLy35bpm9PV/0LVI/DSv9L6Km6J2ad8r/mm0VaGg06C40FqlE8u2ADcGUM60lyoU7Myo4WNZQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/message-compiler": "10.0.8",
@@ -1647,7 +1635,6 @@
       "version": "10.0.8",
       "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-10.0.8.tgz",
       "integrity": "sha512-DV+sYXIkHVd5yVb2mL7br/NEUwzUoLBsMkV3H0InefWgmYa34NLZUvMCGi5oWX+Hqr2Y2qUxnVrnOWF4aBlgWg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/shared": "10.0.8",
@@ -1664,7 +1651,6 @@
       "version": "10.0.8",
       "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-10.0.8.tgz",
       "integrity": "sha512-BcmHpb5bQyeVNrptC3UhzpBZB/YHHDoEREOUERrmF2BRxsyOEuRrq+Z96C/D4+2KJb8kuHiouzAei7BXlG0YYw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">= 16"
@@ -1677,14 +1663,12 @@
       "version": "6.6.4",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@intlify/vue-i18n-extensions/node_modules/vue-i18n": {
       "version": "10.0.8",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-10.0.8.tgz",
       "integrity": "sha512-mIjy4utxMz9lMMo6G9vYePv7gUFt4ztOMhY9/4czDJxZ26xPeJ49MAGa9wBAE3XuXbYCrtVPmPxNjej7JJJkZQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/core-base": "10.0.8",
@@ -1858,7 +1842,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@miyaneee/rollup-plugin-json5/-/rollup-plugin-json5-1.2.0.tgz",
       "integrity": "sha512-JjTIaXZp9WzhUHpElrqPnl1AzBi/rvRs065F71+aTmlqvTMVkdbjZ8vfFl4nRlgJy+TPBw69ZK4pwFdmOAt4aA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^5.1.0",
@@ -2873,7 +2856,6 @@
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/i18n/-/i18n-10.1.0.tgz",
       "integrity": "sha512-2h/6Y4ke+mYq3RrV71erTBn1HzKKKPGEJrzYW6GA8SAc91zb7jqyfRkElG95Cei+2+6XJrt73Djys5qTc0tCUw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/core": "^11.1.11",
@@ -2917,7 +2899,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.1.2.tgz",
       "integrity": "sha512-P5q41xeEOa6ZQC0PvIP7TSBmOAMxXK4qihDcCbYIJq8RcVsEPbGZVlidmxE6EOw1ucSyodq9nbV31FAKwoL4NQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "c12": "^3.2.0",
@@ -2954,7 +2935,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2971,7 +2951,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -2988,7 +2967,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3005,7 +2983,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3022,7 +2999,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3039,7 +3015,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3056,7 +3031,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3073,7 +3047,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3090,7 +3063,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3107,7 +3079,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3124,7 +3095,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3141,7 +3111,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3158,7 +3127,6 @@
       "cpu": [
         "wasm32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -3175,7 +3143,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3192,7 +3159,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3206,7 +3172,6 @@
       "version": "0.81.0",
       "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.81.0.tgz",
       "integrity": "sha512-CnOqkybZK8z6Gx7Wb1qF7AEnSzbol1WwcIzxYOr8e91LytGOjo0wCpgoYWZo8sdbpqX+X+TJayIzo4Pv0R/KjA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/Boshen"
@@ -3219,7 +3184,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3236,7 +3200,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3253,7 +3216,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3270,7 +3232,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3287,7 +3248,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3304,7 +3264,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3321,7 +3280,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3338,7 +3296,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3355,7 +3312,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3372,7 +3328,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3389,7 +3344,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3406,7 +3360,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3423,7 +3376,6 @@
       "cpu": [
         "wasm32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -3440,7 +3392,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3457,7 +3408,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -3471,7 +3421,6 @@
       "version": "3.0.0-beta.15",
       "resolved": "https://registry.npmjs.org/@vue-macros/common/-/common-3.0.0-beta.15.tgz",
       "integrity": "sha512-DMgq/rIh1H20WYNWU7krIbEfJRYDDhy7ix64GlT4AVUJZZWCZ5pxiYVJR3A3GmWQPkn7Pg7i3oIiGqu4JGC65w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue/compiler-sfc": "^3.5.17",
@@ -3499,14 +3448,12 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-2.0.0.tgz",
       "integrity": "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@nuxtjs/i18n/node_modules/oxc-parser": {
       "version": "0.81.0",
       "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.81.0.tgz",
       "integrity": "sha512-iceu9s70mZyjKs6V2QX7TURkJj1crnKi9csGByWvOWwrR5rwq0U0f49yIlRAzMP4t7K2gRC1MnyMZggMhiwAVg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@oxc-project/types": "^0.81.0"
@@ -3539,7 +3486,6 @@
       "version": "0.81.0",
       "resolved": "https://registry.npmjs.org/oxc-transform/-/oxc-transform-0.81.0.tgz",
       "integrity": "sha512-Sfb7sBZJoA7GPNlgeVvwqSS+fKFG5Lu2N4CJIlKPdkBgMDwVqUPOTVrEXHYaoYilA2x0VXVwLWqjcW3CwrfzSA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -3569,7 +3515,6 @@
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/oxc-walker/-/oxc-walker-0.4.0.tgz",
       "integrity": "sha512-x5TJAZQD3kRnRBGZ+8uryMZUwkTYddwzBftkqyJIcmpBOXmoK/fwriRKATjZroR2d+aS7+2w1B0oz189bBTwfw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "estree-walker": "^3.0.3",
@@ -3583,7 +3528,6 @@
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/unplugin-vue-router/-/unplugin-vue-router-0.14.0.tgz",
       "integrity": "sha512-ipjunvS5e2aFHBAUFuLbHl2aHKbXXXBhTxGT9wZx66fNVPdEQzVVitF8nODr1plANhTTa3UZ+DQu9uyLngMzoQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@vue-macros/common": "3.0.0-beta.15",
@@ -5021,7 +4965,6 @@
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-yaml/-/plugin-yaml-4.1.2.tgz",
       "integrity": "sha512-RpupciIeZMUqhgFE97ba0s98mOFS7CWzN3EJNhJkqSv9XLlWYtwVdtE6cDw6ASOF/sZVFS7kRJXftaqM2Vakdw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@rollup/pluginutils": "^5.0.1",
@@ -9103,7 +9046,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-2.1.0.tgz",
       "integrity": "sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "esprima": "^4.0.1",
@@ -9125,7 +9067,6 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-      "dev": true,
       "license": "BSD-3-Clause",
       "optional": true,
       "engines": {
@@ -9614,7 +9555,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
       "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "bin": {
         "esparse": "bin/esparse.js",
@@ -11429,7 +11369,6 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/jsonc-eslint-parser/-/jsonc-eslint-parser-2.4.1.tgz",
       "integrity": "sha512-uuPNLJkKN8NXAlZlQ6kmUF9qO+T6Kyd7oV4+/7yy8Jz6+MZNyhPq8EdLpdfnPVzUC8qSf1b4j1azKaGnFsjmsw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "acorn": "^8.5.0",
@@ -11448,7 +11387,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -11461,7 +11399,6 @@
       "version": "9.6.1",
       "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
       "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "acorn": "^8.9.0",
@@ -13515,7 +13452,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/nuxt-define/-/nuxt-define-1.0.0.tgz",
       "integrity": "sha512-CYZ2WjU+KCyCDVzjYUM4eEpMF0rkPmkpiFrybTqqQCRpUbPt2h3snswWIpFPXTi+osRCY6Og0W/XLAQgDL4FfQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "url": "https://github.com/sponsors/bobbiegoede"
@@ -16634,7 +16570,6 @@
       "version": "2.0.0-alpha.3",
       "resolved": "https://registry.npmjs.org/tosource/-/tosource-2.0.0-alpha.3.tgz",
       "integrity": "sha512-KAB2lrSS48y91MzFPFuDg4hLbvDiyTjOVgaK7Erw+5AmZXNq4sFRVn8r6yxSLuNs15PaokrDRpS61ERY9uZOug==",
-      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -18056,7 +17991,6 @@
       "version": "11.1.12",
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.1.12.tgz",
       "integrity": "sha512-BnstPj3KLHLrsqbVU2UOrPmr0+Mv11bsUZG0PyCOzsawCivk8W00GMXHeVUWIDOgNaScCuZah47CZFE+Wnl8mw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@intlify/core-base": "11.1.12",
@@ -18077,7 +18011,6 @@
       "version": "6.6.4",
       "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
       "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/vue-router": {
@@ -18368,7 +18301,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/yaml-eslint-parser/-/yaml-eslint-parser-1.3.0.tgz",
       "integrity": "sha512-E/+VitOorXSLiAqtTd7Yqax0/pAS3xaYMP+AUUJGOK1OZG3rhcj9fcJOM5HJ2VrP1FrStVCWr1muTfQCdj4tAA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "eslint-visitor-keys": "^3.0.0",
@@ -18385,7 +18317,6 @@
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
       "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
-      "dev": true,
       "license": "Apache-2.0",
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
diff --git a/stores/apps.ts b/stores/apps.ts
index 51887cd..faa463e 100644
--- a/stores/apps.ts
+++ b/stores/apps.ts
@@ -36,8 +36,8 @@ export const useAppsStore = defineStore('apps', () => {
     {
       id: 'livestream-hub',
       name: 'livestream-hub', // Use translation key instead of hardcoded name
-      icon: '📺',
-      component: 'LiveStreamHub',
+      icon: '📰',
+      component: 'NewsHub',
       description: 'Discover and watch live streams from popular streamers',
       category: 'Entertainment'
     },