diff --git a/src/App.tsx b/src/App.tsx
index 9853c18..9ea357c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
-import { Plus, Loader2, Bot, FolderCode } from "lucide-react";
+import { Plus, Loader2, Bot, FolderCode, BarChart3, Network, FileText, Settings as SettingsIcon } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { api, type Project, type Session, type ClaudeMdFile } from "@/lib/api";
 import { OutputCacheProvider } from "@/lib/outputCache";
@@ -159,7 +159,7 @@ function App() {
     switch (view) {
       case "welcome":
         return (
-          <div className="flex items-center justify-center p-4" style={{ height: "100%" }}>
+          <div className="flex items-center justify-center p-8 min-h-full">
             <div className="w-full max-w-4xl">
               {/* Welcome Header */}
               <motion.div
@@ -168,49 +168,148 @@ function App() {
                 transition={{ duration: 0.5 }}
                 className="mb-12 text-center"
               >
-                <h1 className="text-4xl font-bold tracking-tight">
-                  <span className="rotating-symbol"></span>
-                  {t('welcome.title')}
-                </h1>
+                <div className="flex items-center justify-center mb-4">
+                  <span className="rotating-symbol text-orange-500 mr-3"></span>
+                  <h1 className="text-4xl font-bold tracking-tight">
+                    {t('welcome.title')}
+                  </h1>
+                </div>
+                <p className="text-lg text-muted-foreground">{t('welcome.subtitle')}</p>
               </motion.div>
 
-              {/* Navigation Cards */}
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-2xl mx-auto">
-                {/* CC Agents Card */}
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: 0.1 }}
-                >
-                  <Card 
-                    className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
-                    onClick={() => handleViewChange("agents")}
+              {/* Module Cards */}
+              <div className="space-y-6 mb-8">
+                {/* Top Row - Agent Management and Project Management */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                  {/* Agent Management */}
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5, delay: 0.1 }}
                   >
-                    <div className="h-full flex flex-col items-center justify-center p-8">
-                      <Bot className="h-16 w-16 mb-4 text-primary" />
-                      <h2 className="text-xl font-semibold">{t('welcome.ccAgents')}</h2>
-                    </div>
-                  </Card>
-                </motion.div>
+                    <Card 
+                      className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
+                      onClick={() => handleViewChange("agents")}
+                    >
+                      <div className="h-full flex flex-col items-center justify-center p-8">
+                        <Bot className="h-16 w-16 mb-4 text-orange-500" />
+                        <h3 className="text-xl font-semibold mb-3">{t('welcome.modules.agentManagement')}</h3>
+                        <p className="text-sm text-muted-foreground text-center">{t('welcome.modules.agentManagementDesc')}</p>
+                      </div>
+                    </Card>
+                  </motion.div>
 
-                {/* CC Projects Card */}
-                <motion.div
-                  initial={{ opacity: 0, scale: 0.9 }}
-                  animate={{ opacity: 1, scale: 1 }}
-                  transition={{ duration: 0.5, delay: 0.2 }}
-                >
-                  <Card 
-                    className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 shimmer-hover"
-                    onClick={() => handleViewChange("projects")}
+                  {/* Project Management */}
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5, delay: 0.2 }}
                   >
-                    <div className="h-full flex flex-col items-center justify-center p-8">
-                      <FolderCode className="h-16 w-16 mb-4 text-primary" />
-                      <h2 className="text-xl font-semibold">{t('welcome.ccProjects')}</h2>
-                    </div>
-                  </Card>
-                </motion.div>
+                    <Card 
+                      className="h-64 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
+                      onClick={() => handleViewChange("projects")}
+                    >
+                      <div className="h-full flex flex-col items-center justify-center p-8">
+                        <FolderCode className="h-16 w-16 mb-4 text-orange-500" />
+                        <h3 className="text-xl font-semibold mb-3">{t('welcome.modules.projectManagement')}</h3>
+                        <p className="text-sm text-muted-foreground text-center">{t('welcome.modules.projectManagementDesc')}</p>
+                      </div>
+                    </Card>
+                  </motion.div>
+                </div>
 
+                {/* Bottom Row - Usage Statistics, MCP Management, CLAUDE.md, and Settings */}
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                  {/* Usage Statistics */}
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5, delay: 0.3 }}
+                  >
+                    <Card 
+                      className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
+                      onClick={() => handleViewChange("usage-dashboard")}
+                    >
+                      <div className="h-full flex flex-col items-center justify-center p-4">
+                        <BarChart3 className="h-10 w-10 mb-2 text-orange-500" />
+                        <h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.usageStats')}</h3>
+                        <p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.usageStatsDesc')}</p>
+                      </div>
+                    </Card>
+                  </motion.div>
+
+                  {/* MCP Management */}
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5, delay: 0.4 }}
+                  >
+                    <Card 
+                      className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
+                      onClick={() => handleViewChange("mcp")}
+                    >
+                      <div className="h-full flex flex-col items-center justify-center p-4">
+                        <Network className="h-10 w-10 mb-2 text-orange-500" />
+                        <h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.mcpManagement')}</h3>
+                        <p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.mcpManagementDesc')}</p>
+                      </div>
+                    </Card>
+                  </motion.div>
+
+                  {/* CLAUDE.md */}
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5, delay: 0.5 }}
+                  >
+                    <Card 
+                      className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
+                      onClick={() => handleViewChange("editor")}
+                    >
+                      <div className="h-full flex flex-col items-center justify-center p-4">
+                        <FileText className="h-10 w-10 mb-2 text-orange-500" />
+                        <h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.claudeMd')}</h3>
+                        <p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.claudeMdDesc')}</p>
+                      </div>
+                    </Card>
+                  </motion.div>
+
+                  {/* Settings */}
+                  <motion.div
+                    initial={{ opacity: 0, scale: 0.9 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ duration: 0.5, delay: 0.6 }}
+                  >
+                    <Card 
+                      className="h-40 cursor-pointer transition-all duration-200 hover:scale-105 hover:shadow-lg border border-border/50 bg-card/50 backdrop-blur-sm"
+                      onClick={() => handleViewChange("settings")}
+                    >
+                      <div className="h-full flex flex-col items-center justify-center p-4">
+                        <SettingsIcon className="h-10 w-10 mb-2 text-orange-500" />
+                        <h3 className="text-sm font-semibold mb-1 text-center">{t('welcome.modules.settings')}</h3>
+                        <p className="text-xs text-muted-foreground text-center line-clamp-2">{t('welcome.modules.settingsDesc')}</p>
+                      </div>
+                    </Card>
+                  </motion.div>
+                </div>
               </div>
+
+              {/* Quick Start Button */}
+              <motion.div
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5, delay: 0.7 }}
+                className="flex justify-center"
+              >
+                <Button
+                  onClick={handleNewSession}
+                  size="lg"
+                  className="bg-orange-500 hover:bg-orange-600 text-white px-8 py-3 text-lg font-medium min-w-[300px]"
+                >
+                  <Plus className="mr-2 h-5 w-5" />
+                  {t('welcome.quickStart')}
+                </Button>
+              </motion.div>
             </div>
           </div>
         );
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 3f29e22..093b271 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -36,10 +36,26 @@
   },
   "welcome": {
     "title": "Welcome to Claudia",
+    "subtitle": "Powerful Claude Code Session Management Tool",
     "ccAgents": "CC Agents",
     "ccProjects": "CC Projects",
     "browseProjects": "Browse your Claude Code sessions",
-    "newSession": "New Claude Code session"
+    "newSession": "New Claude Code session",
+    "modules": {
+      "agentManagement": "Agent Management",
+      "agentManagementDesc": "Create and manage intelligent agents",
+      "projectManagement": "Project Management",
+      "projectManagementDesc": "Browse and manage project sessions",
+      "usageStats": "Usage Statistics",
+      "usageStatsDesc": "View usage and statistics",
+      "mcpManagement": "MCP Management",
+      "mcpManagementDesc": "Manage MCP servers",
+      "claudeMd": "CLAUDE.md",
+      "claudeMdDesc": "Edit Claude configuration files",
+      "settings": "Settings",
+      "settingsDesc": "Application settings and configuration"
+    },
+    "quickStart": "Quick Start New Conversation"
   },
   "agents": {
     "title": "CC Agents",
@@ -332,7 +348,7 @@
     "autoDesc": "Let Claude decide",
     "think": "Think",
     "thinkDesc": "Basic reasoning",
-    "thinkHard": "Think Hard", 
+    "thinkHard": "Think Hard",
     "thinkHardDesc": "Deeper analysis",
     "thinkHarder": "Think Harder",
     "thinkHarderDesc": "Extensive reasoning",
@@ -359,4 +375,4 @@
   "success": {
     "claudeBinaryPathSaved": "Claude binary path saved successfully"
   }
-}
\ No newline at end of file
+}
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index e802992..7d313dc 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -36,10 +36,26 @@
   },
   "welcome": {
     "title": "欢迎使用 Claudia",
+    "subtitle": "强大的 Claude Code 会话管理工具",
     "ccAgents": "CC 智能体",
     "ccProjects": "CC 项目",
     "browseProjects": "浏览您的 Claude Code 会话",
-    "newSession": "新建 Claude Code 会话"
+    "newSession": "新建 Claude Code 会话",
+    "modules": {
+      "agentManagement": "Agent 管理",
+      "agentManagementDesc": "创建和管理智能 Agent",
+      "projectManagement": "项目管理",
+      "projectManagementDesc": "浏览和管理项目会话",
+      "usageStats": "使用统计",
+      "usageStatsDesc": "查看使用情况和统计",
+      "mcpManagement": "MCP 管理",
+      "mcpManagementDesc": "管理 MCP 服务器",
+      "claudeMd": "CLAUDE.md",
+      "claudeMdDesc": "编辑 Claude 配置文件",
+      "settings": "设置",
+      "settingsDesc": "应用设置和配置"
+    },
+    "quickStart": "快速开始新会话"
   },
   "agents": {
     "title": "CC 智能体",
@@ -359,4 +375,4 @@
   "success": {
     "claudeBinaryPathSaved": "Claude 二进制文件路径保存成功"
   }
-}
\ No newline at end of file
+}