diff --git a/demo/bun.lockb b/demo/bun.lockb
new file mode 100755
index 00000000..e0b23f2b
Binary files /dev/null and b/demo/bun.lockb differ
diff --git a/demo/package.json b/demo/package.json
index 668d2d3f..1a8d6f4f 100644
--- a/demo/package.json
+++ b/demo/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "astra.ai-playground",
+  "name": "TEN Agent",
   "version": "0.4.0",
   "private": true,
   "scripts": {
diff --git a/demo/src/app/api/agents/start/graph.tsx b/demo/src/app/api/agents/start/graph.tsx
index be988dcb..ce7e9899 100644
--- a/demo/src/app/api/agents/start/graph.tsx
+++ b/demo/src/app/api/agents/start/graph.tsx
@@ -63,23 +63,23 @@ export const voiceNameMap: LanguageMap = {
 // This is the place where you can customize the properties for different graphs to override default property.json
 export const getGraphProperties = (graphName: string, language: string, voiceType: string) => {
     let localizationOptions = {
-        "greeting": "ASTRA agent connected. How can i help you today?",
+        "greeting": "Hey, I\'m TEN Agent with OpenAI Realtime API Beta， anything I can help you with?",
         "checking_vision_text_items": "[\"Let me take a look...\",\"Let me check your camera...\",\"Please wait for a second...\"]",
     }
 
     if (language === "zh-CN") {
         localizationOptions = {
-            "greeting": "Astra已连接，需要我为您提供什么帮助?",
+            "greeting": "TEN Agent 已连接，需要我为您提供什么帮助?",
             "checking_vision_text_items": "[\"让我看看你的摄像头...\",\"让我看一下...\",\"我看一下，请稍候...\"]",
         }
     } else if (language === "ja-JP") {
         localizationOptions = {
-            "greeting": "ASTRAエージェントに接続されました。今日は何をお手伝いしましょうか?",
+            "greeting": "TEN Agent に接続されました。今日は何をお手伝いしましょうか?",
             "checking_vision_text_items": "[\"ちょっと見てみます...\",\"カメラをチェックします...\",\"少々お待ちください...\"]",
         }
     } else if (language === "ko-KR") {
         localizationOptions = {
-            "greeting": "ASTRA 에이전트에 연결되었습니다. 오늘은 무엇을 도와드릴까요?",
+            "greeting": "TEN Agent 에이전트에 연결되었습니다. 오늘은 무엇을 도와드릴까요?",
             "checking_vision_text_items": "[\"조금만 기다려 주세요...\",\"카메라를 확인해 보겠습니다...\",\"잠시만 기다려 주세요...\"]",
         }
     }
diff --git a/demo/src/app/favicon.ico b/demo/src/app/favicon.ico
index 21b38b96..92b8b6ba 100644
Binary files a/demo/src/app/favicon.ico and b/demo/src/app/favicon.ico differ
diff --git a/demo/src/app/layout.tsx b/demo/src/app/layout.tsx
index b6153573..f4587661 100644
--- a/demo/src/app/layout.tsx
+++ b/demo/src/app/layout.tsx
@@ -6,8 +6,8 @@ import './global.css'
 
 
 export const metadata: Metadata = {
-  title: "Astra.ai",
-  description: "A multimodal agent powered by TEN",
+  title: "TEN Agent",
+  description: "The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)",
   appleWebApp: {
     capable: true,
     statusBarStyle: "black",
diff --git a/demo/src/common/constant.ts b/demo/src/common/constant.ts
index b54cdc86..a483df00 100644
--- a/demo/src/common/constant.ts
+++ b/demo/src/common/constant.ts
@@ -1,12 +1,12 @@
 import { IOptions, ColorItem, LanguageOptionItem, VoiceOptionItem, GraphOptionItem } from "@/types"
-export const GITHUB_URL = "https://github.com/TEN-framework/ASTRA.ai"
+export const GITHUB_URL = "https://github.com/TEN-framework/TEN-Agent"
 export const OPTIONS_KEY = "__options__"
 export const DEFAULT_OPTIONS: IOptions = {
   channel: "",
   userName: "",
   userId: 0
 }
-export const DESCRIPTION = "This is an AI voice assistant powered by ASTRA.ai framework, Agora, Azure and ChatGPT."
+export const DESCRIPTION = "The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)"
 export const LANGUAGE_OPTIONS: LanguageOptionItem[] = [
   {
     label: "English",
@@ -34,10 +34,10 @@ export const GRAPH_OPTIONS: GraphOptionItem[] = [
     label: "Voice Agent with Vision - OpenAI LLM + Azure TTS",
     value: "camera.va.openai.azure"
   },
-  {
-    label: "Voice Agent with Knowledge - RAG + Qwen LLM + Cosy TTS",
-    value: "va.qwen.rag"
-  },
+  // {
+  //   label: "Voice Agent with Knowledge - RAG + Qwen LLM + Cosy TTS",
+  //   value: "va.qwen.rag"
+  // },
   {
     label: "Voice Agent with OpenAI Realtime API (Beta)",
     value: "va.openai.v2v"
diff --git a/demo/src/components/loginCard/index.module.scss b/demo/src/components/loginCard/index.module.scss
index 966ebc20..20f49963 100644
--- a/demo/src/components/loginCard/index.module.scss
+++ b/demo/src/components/loginCard/index.module.scss
@@ -39,19 +39,19 @@
   .content {
 
     .title {
-      margin-bottom: 32px;
+      color: white;
+      font-weight: bold;
+      font-size: 25px;
       display: flex;
       flex-direction: column;
       align-items: center;
-      justify-content: center;
-      gap: 12px;
-
+      margin-bottom: 10px;
       .text {
-        margin-top: 8px;
         color: var(--Grey-300, #EAECF0);
         text-align: center;
-        font-size: 18px;
+        font-size: 17px;
         font-weight: 500;
+        margin-bottom: 30px;
       }
     }
 
diff --git a/demo/src/components/loginCard/index.tsx b/demo/src/components/loginCard/index.tsx
index 56a78986..95df81b6 100644
--- a/demo/src/components/loginCard/index.tsx
+++ b/demo/src/components/loginCard/index.tsx
@@ -55,8 +55,8 @@ const LoginCard = () => {
     </section>
     <section className={styles.content}>
       <div className={styles.title}>
-        <LogoIcon transform="scale(1.5 1.5)"></LogoIcon>
-        <span className={styles.text}>Astra - a multimodal interactive agent</span>
+        <span className={styles.title}>TEN Agent</span>
+        <span className={styles.text}>The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)</span>
       </div>
       <div className={styles.section}>
         <input placeholder="User Name" value={userName} onChange={onUserNameChange} ></input>
diff --git a/demo/src/platform/pc/description/index.tsx b/demo/src/platform/pc/description/index.tsx
index a9a055cd..45633da7 100644
--- a/demo/src/platform/pc/description/index.tsx
+++ b/demo/src/platform/pc/description/index.tsx
@@ -87,7 +87,7 @@ const Description = () => {
 
   return <div className={styles.description}>
     <span className={styles.title}>Description</span>
-    <span className={styles.text}>Astra is a multimodal agent powered by TEN</span>
+    <span className={styles.text}>The World's First Multimodal AI Agent with the OpenAI Realtime API (Beta)</span>
     <span className={`${styles.btnConnect} ${agentConnected ? styles.disconnect : ''}`} onClick={onClickConnect}>
       <span className={`${styles.btnText} ${agentConnected ? styles.disconnect : ''}`}>
         {!agentConnected ? "Connect" : "Disconnect"}
diff --git a/demo/src/platform/pc/header/index.module.scss b/demo/src/platform/pc/header/index.module.scss
index 31138cc7..9e968a55 100644
--- a/demo/src/platform/pc/header/index.module.scss
+++ b/demo/src/platform/pc/header/index.module.scss
@@ -10,6 +10,11 @@
   box-shadow: 0px 12px 16px -4px rgba(8, 15, 52, 0.06), 0px 4px 6px -2px rgba(8, 15, 52, 0.03);
   box-sizing: border-box;
   z-index: 999;
+  
+    .title {
+      color: white;
+      font-weight: bold;
+    }
 
   .logoWrapper {
     display: flex;
diff --git a/demo/src/platform/pc/header/index.tsx b/demo/src/platform/pc/header/index.tsx
index a55b3f04..2490da85 100644
--- a/demo/src/platform/pc/header/index.tsx
+++ b/demo/src/platform/pc/header/index.tsx
@@ -24,7 +24,8 @@ const Header = () => {
 
   return <div className={styles.header}>
     <span className={styles.logoWrapper}>
-      <LogoIcon></LogoIcon>
+      {/* <LogoIcon></LogoIcon> */}
+      <span className={styles.title} >TEN Agent</span>
     </span>
     <InfoPopover>
       <span className={styles.content}>