diff --git a/apps/client/components/Navbar/index.vue b/apps/client/components/Navbar/index.vue
index e9667a578..30743e9ec 100644
--- a/apps/client/components/Navbar/index.vue
+++ b/apps/client/components/Navbar/index.vue
@@ -9,14 +9,29 @@ const toggleDarkMode = () => {
   document.documentElement.classList.toggle('dark')
 }
 
+const setDarkMode = (state = false) => {
+  if (state) {
+    document.documentElement.setAttribute("data-theme", "dark");
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.setAttribute("data-theme", "light");       
+    document.documentElement.classList.remove('dark')
+  }
+}
+
+onMounted(() => {
+  const state = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  setDarkMode(state)
+})
+
 </script>
 
 <template>
   <nav class="h-20 flex items-center justify-between">
     <NuxtLink to="/">
-      <div class="logo flex">
-        <img width="48" height="48" class="rounded-md overflow-hidden mr-2" src="/logo.png" alt="earth-worm-logo">
-        <h1 class="w-14 text-md font-black leading-normal text-wrap text-fuchsia-400">Earth Worm</h1>
+      <div class="logo flex items-center">
+        <img width="48" height="48" class="rounded-md overflow-hidden mr-6" src="/logo.png" alt="earth-worm-logo">
+        <h1 class="text-2xl leading-none font-black leading-normal text-wrap text-fuchsia-400">Earthworm</h1>
       </div>
     </NuxtLink>
     <div>
diff --git a/apps/client/components/main/CourseProgress.vue b/apps/client/components/main/CourseProgress.vue
index f73d59159..d45a592e3 100644
--- a/apps/client/components/main/CourseProgress.vue
+++ b/apps/client/components/main/CourseProgress.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>进度：{{ currentSchedule }}/{{ max }}</div>
+  <progress class="progress w-56 m-2" value="8" max="100"></progress>
 </template>
 
 <script setup lang="ts">
@@ -8,7 +8,7 @@ import { useCoursesStore } from "~/store/courses";
 const coursesStore = useCoursesStore();
 
 const currentSchedule = computed(() => {
-  return coursesStore.statementIndex + 1;
+  return coursesStore.statementIndex.value + 1;
 });
 
 const max = computed(() => {
diff --git a/apps/client/components/main/Game.vue b/apps/client/components/main/Game.vue
index ef5315962..2542c1f09 100644
--- a/apps/client/components/main/Game.vue
+++ b/apps/client/components/main/Game.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="h-full flex justify-center items-center relative">
-    <div>
+  <div class="h-full w-full flex flex-col justify-center items-center">
+    <div class="flex-1 mb-8">
       <template v-if="mode === 'question'">
         <Question @bingo="handleBingo"></Question>
       </template>
@@ -8,7 +8,7 @@
         <Answer @next-question="handleNextQuestion"></Answer>
       </template>
     </div>
-    <div class="absolute bottom-10 mb-10 w-full flex flex-col items-center">
+    <div class="">
       <CourseProgress></CourseProgress>
       <Tips onShowAnswer="{handleShowAnswer}"></Tips>
     </div>
diff --git a/apps/client/components/main/Question.vue b/apps/client/components/main/Question.vue
index 0f47c47cf..3ba7a6349 100644
--- a/apps/client/components/main/Question.vue
+++ b/apps/client/components/main/Question.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="text-5xl text-center mb-20 mt-10">
     <div class="text-fuchsia-500 dark:text-gray-50">
-      {{ coursesStore.currentStatement?.chinese }}
+      {{ coursesStore.currentStatement?.chinese || '生存还是毁灭，这是一个问题' }}
     </div>
     <div class="code-box">
       <template v-for="i in lineNum" :key="i">
diff --git a/apps/client/components/main/TipItem.vue b/apps/client/components/main/TipItem.vue
deleted file mode 100644
index 1231799f4..000000000
--- a/apps/client/components/main/TipItem.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <div class="flex gap-x-2 text-sm mt-3">
-    <button
-      class="rounded-sm px-2 bg-gray-600 text-white dark:text-gray-900"
-      @click="handler"
-    >
-      {{ text }}
-    </button>
-    <div class="text-gray-600">- {{ description }}</div>
-  </div>
-</template>
-
-<script setup lang="ts">
-interface Props {
-  text: string;
-  description: string;
-}
-
-defineProps<Props>();
-
-const emit = defineEmits(["click"]);
-
-function handler() {
-  emit("click");
-}
-</script>
-
-<style scoped></style>
diff --git a/apps/client/components/main/Tips.vue b/apps/client/components/main/Tips.vue
index 397ce6f55..cec7928fe 100644
--- a/apps/client/components/main/Tips.vue
+++ b/apps/client/components/main/Tips.vue
@@ -1,22 +1,15 @@
 <template>
-  <div>
-    <TipItem
-      text="tab"
-      description="show answer"
-      keyboardKey="Tab"
-      handler="{handleToAnswer}"
-    ></TipItem>
-    <TipItem
-      text="control"
-      description="play soundmark"
-      keyboardKey="Control"
-      handler="{playSound}"
-    ></TipItem>
+  <div class="flex flex-col">
+    <div class="flex mb-2">
+      <button className="btn btn-xs">⇥ Tab</button>
+      <p class="ml-2">show answer</p>
+    </div>
+    <div class="flex">
+      <button className="btn btn-xs">⌃ Control</button>
+      <p class="ml-2">play soundmark</p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import TipItem from "./TipItem.vue";
 </script>
-
-<style scoped></style>
diff --git a/apps/client/pages/Main/[id].vue b/apps/client/pages/Main/[id].vue
index 513195bae..22cfdcc3e 100644
--- a/apps/client/pages/Main/[id].vue
+++ b/apps/client/pages/Main/[id].vue
@@ -1,10 +1,5 @@
 <template>
-  <div class="flex flex-col h-full">
-    <!-- <Header></Header> -->
-    <main>
-      <Game></Game>
-    </main>
-  </div>
+  <Game></Game>
 </template>
 
 <script setup lang="ts">
diff --git a/apps/client/pages/index.vue b/apps/client/pages/index.vue
index 53ae77113..d1b99dcf2 100644
--- a/apps/client/pages/index.vue
+++ b/apps/client/pages/index.vue
@@ -6,13 +6,9 @@
   <div class="container w-full">
     <section class="flex md:flex-row md:justify-between justify-center flex-col py-8">
       <div class="w-1/2">
-        <div class="flex mb-12">
-          <img width="160" height="160" class="rounded-xl overflow-hidden mr-2" src="/logo.png" alt="earth-worm-logo">
-          <h1 class="w-48 text-6xl font-black leading-snug text-wrap text-fuchsia-400">Earth Worm</h1>
-        </div>
         <div class="mb-12 leading-loose text-3xl opacity-80 items-center">
           <div class="">Why aren’t you good at English?</div>
-          <div class="align-middle">It’s because you haven’t used Earthworm yet! 🤪 <i class="animate-wink inline w-1 h-8 dark:bg-white bg-slate-900 mx-2 text-2xl p-[2px]"></i></div>
+          <div class="align-middle">It’s because you haven’t used <span class="text-fuchsia-400 font-bold">Earthworm</span> yet! 🤪 <i class="animate-wink inline w-1 h-8 dark:bg-white bg-slate-900 mx-2 text-2xl p-[2px]"></i></div>
         </div>
         <a target="_blank" href="https://github.com/cuixueshe/earthworm">
           <button class="indicator btn btn-outline w-48 hover:text-fuchsia-400 hover:border-fuchsia-400 hover:bg-fuchsia-100 text-fuchsia-300 border-fuchsia-300 mr-4">
@@ -51,6 +47,8 @@
 </template>
 
 <style>
+
+
 .bg-dot {
   aspect-ratio: 1;
   position: relative;
@@ -62,6 +60,10 @@
   overflow: hidden;
 }
 
+.dark .bg-dot {
+  opacity: 1;
+}
+
 .bg-dot::after {
   content: '';
   position: absolute;