diff --git a/apps/client/components/main/Game.vue b/apps/client/components/main/Game.vue
index 7ba2a05f3..e5fce8566 100644
--- a/apps/client/components/main/Game.vue
+++ b/apps/client/components/main/Game.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script setup lang="ts">
-import Question from "./Question.vue";
+import Question from './Question.vue';
 import Answer from "./Answer.vue";
 import Summary from "./Summary.vue";
 import Tips from "./Tips.vue";
diff --git a/apps/client/components/main/Question.vue b/apps/client/components/main/Question.vue
index 84f15b9fa..537dbac04 100644
--- a/apps/client/components/main/Question.vue
+++ b/apps/client/components/main/Question.vue
@@ -5,17 +5,28 @@
         <div
           class="h-[4.8rem] border-solid rounded-[2px] border-b-2 text-[3.2em] transition-all"
           :class="[
-            i === activeInputIndex && focusing
-              ? 'text-fuchsia-500 border-b-fuchsia-500'
-              : 'text-[#20202099] border-b-gray-300 dark:text-gray-300 dark:border-b-gray-400',
+            userInputWords[i]['incorrect']
+              ? 'text-red-500 border-b-red-500'
+              : userInputWords[i]?.['isActive'] && focusing
+                ? 'text-fuchsia-500 border-b-fuchsia-500'
+                : 'text-[#20202099] border-b-gray-300 dark:text-gray-300 dark:border-b-gray-400',
           ]"
           :style="{ width: `${w.length}ch` }"
         >
-          {{ userInputWords[i] }}
+          {{ userInputWords[i]["userInput"] }}
         </div>
       </template>
-      <input ref="inputEl" class="absolute h-full w-full opacity-0" type="text" v-model="inputValue" @keyup="handleKeyup"
-        @keydown="handleKeydown" @focus="handleInputFocus" @blur="handleBlur" autoFocus />
+      <input
+        ref="inputEl"
+        class="absolute h-full w-full opacity-0"
+        type="text"
+        v-model="inputValue"
+        @keyup="handleKeyup"
+        @keydown="handleKeydown"
+        @focus="handleInputFocus"
+        @blur="handleBlur"
+        autoFocus
+      />
     </div>
     <div class="mt-12 text-xl dark:text-gray-50">
       {{
@@ -28,77 +39,71 @@
 <script setup lang="ts">
 import { useCourseStore } from "~/store/course";
 import { useGameMode } from "~/composables/main/game";
-import { ref, computed, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
+import { useInput } from "~/composables/main/question";
 
 const courseStore = useCourseStore();
-const { userInputWords, activeInputIndex, inputValue } = useInput();
-const { handleKeyup, handleKeydown } = registerShortcutKeyForInputEl();
-const { inputEl, focusing, handleInputFocus, handleBlur } = useFocus();
+const inputEl = ref<HTMLInputElement>();
+const { setInputCursorPosition, getInputCursorPosition } = useCursor();
+const { focusing, handleInputFocus, handleBlur } = useFocus();
+const { showAnswer } = useGameMode();
 
-function useInput() {
-  const inputValue = ref("");
+const {
+  inputValue,
+  userInputWords,
+  preventInput,
+  submitAnswer,
+  setInputValue,
+  fixIncorrectWord,
+  fixFirstIncorrectWord,
+} = useInput({
+  source: () => courseStore.currentStatement?.english!,
+  setInputCursorPosition,
+  getInputCursorPosition,
+});
 
-  const userInputWords = computed(() => {
-    return inputValue.value.trimStart().split(" ");
-  });
-
-  const activeInputIndex = computed(() => {
-    return Math.min(userInputWords.value.length - 1, courseStore.words.length - 1);
-  });
+watch(
+  () => inputValue.value,
+  (val) => {
+    setInputValue(val);
+  }
+);
 
-  return {
-    inputValue,
-    userInputWords,
-    activeInputIndex,
-  };
+function handleKeyup(e: KeyboardEvent) {
+  if (e.code === "Enter") {
+    e.stopPropagation();
+    submitAnswer(() => {
+      showAnswer();
+    });
+  } else if (e.code === "Backspace") {
+    fixFirstIncorrectWord();
+  } else if (e.code === "Space") {
+    fixIncorrectWord();
+  }
 }
 
-function registerShortcutKeyForInputEl() {
-  const { showAnswer } = useGameMode();
-
-  function handleKeyup(e: KeyboardEvent) {
-    if (e.code === "Enter") {
-      e.stopPropagation();
+function handleKeydown(e: KeyboardEvent) {
+  preventInput(e);
+}
 
-      if (courseStore.checkCorrect(inputValue.value.trim())) {
-        showAnswer();
-      }
-      inputValue.value = "";
-    }
+function useCursor() {
+  function setInputCursorPosition(position: number) {
+    inputEl.value?.setSelectionRange(position, position);
   }
 
-  function handleKeydown(e: KeyboardEvent) {
-    const inputLastStr = inputValue.value[inputValue.value.length - 1];
-    if (e.code === "Space" && inputLastStr === " ") {
-      // prevent input multiple spaces
-      e.preventDefault();
-    }
-    if (
-      e.code === "Backspace" &&
-      userInputWords.value.length - courseStore.words.length === 1 &&
-      inputLastStr === " "
-    ) {
-      // remove the last space and the last letter
-      e.preventDefault();
-      inputValue.value = inputValue.value.slice(0, -2);
-    }
-    // 新增逻辑：阻止在最后一个单词后添加空格
-    const words = inputValue.value.trim().split(" ");
-    const isLastWord = words.length === courseStore.wordCount;
-    if (e.code === "Space" && isLastWord) {
-      e.preventDefault();
-    }
+  function getInputCursorPosition() {
+    return inputEl.value?.selectionStart || 0;
   }
 
   return {
-    handleKeyup,
-    handleKeydown,
+    setInputCursorPosition,
+    getInputCursorPosition,
   };
 }
 
 function useFocus() {
   const focusing = ref(true);
-  const inputEl = ref<HTMLInputElement>();
+
   onMounted(() => {
     inputEl.value?.focus();
   });
@@ -112,7 +117,6 @@ function useFocus() {
   }
 
   return {
-    inputEl,
     focusing,
     handleInputFocus,
     handleBlur,
diff --git a/apps/client/components/main/Tips.vue b/apps/client/components/main/Tips.vue
index 5df921ee8..dc8458589 100644
--- a/apps/client/components/main/Tips.vue
+++ b/apps/client/components/main/Tips.vue
@@ -6,12 +6,19 @@
       </button>
       <span class="ml-2">play sound</span>
     </div>
-    <div class="w-[210px]">
+    <div class="w-[210px] mb-4">
       <button class="tip-btn" @click="toggleGameMode">
         ⌃ {{ shortcutKeys.answer }}
       </button>
       <span class="ml-2">{{ toggleTipText }}</span>
     </div>
+
+    <div class="w-[210px]">
+      <button class="tip-btn" @click="toggleGameMode">
+        Space
+      </button>
+      <span class="ml-2">fix incorrect word</span>
+    </div>
   </div>
 </template>
 
diff --git a/apps/client/composables/main/question.ts b/apps/client/composables/main/question.ts
new file mode 100644
index 000000000..42d3ec95c
--- /dev/null
+++ b/apps/client/composables/main/question.ts
@@ -0,0 +1,254 @@
+import { nextTick, reactive, ref, watchEffect, type Ref } from "vue";
+
+interface Word {
+  text: string;
+  isActive: boolean;
+  userInput: string;
+  incorrect: boolean;
+  end: number;
+  start: number;
+  position: number;
+}
+
+interface InputOptions {
+  source: () => string;
+  setInputCursorPosition: (position: number) => void;
+  getInputCursorPosition: () => number;
+}
+
+enum Mode {
+  Input = "input",
+  Fix = "fix",
+  Fix_Input = "fix-input",
+}
+
+const separator = " ";
+
+export function useInput({
+  source,
+  setInputCursorPosition,
+  getInputCursorPosition,
+}: InputOptions) {
+  let mode: Mode = Mode.Input;
+  let currentEditWord: Word;
+
+  const inputValue = ref("");
+  const userInputWords = reactive<Word[]>([]);
+
+  setupUserInputWords();
+  updateActiveWord(getInputCursorPosition());
+
+  function setInputValue(val: string) {
+    inputValue.value = val;
+    resetAllWordUserInput();
+    inputSyncUserInputWords();
+    updateActiveWord(getInputCursorPosition());
+  }
+
+  function createWord(word: string) {
+    return reactive({
+      text: word,
+      isActive: false,
+      userInput: "",
+      incorrect: false,
+      start: 0,
+      end: 0,
+      position: 0,
+    });
+  }
+
+  function setupUserInputWords() {
+    watchEffect(() => {
+      const english = source();
+      english
+        .split(separator)
+        .map(createWord)
+        .forEach((word, i) => {
+          userInputWords[i] = word;
+        });
+    });
+  }
+
+  function userInputWordsSyncInput() {
+    inputValue.value = userInputWords
+      .map(({ userInput }) => {
+        return userInput;
+      })
+      .join(separator);
+  }
+
+  function inputSyncUserInputWords() {
+    let position = 0;
+
+    inputValue.value.split(separator).forEach((input, index) => {
+      userInputWords[index].userInput = input;
+
+      userInputWords[index].start = position;
+      userInputWords[index].end = position + input.length;
+
+      position += input.length + 1; // Add 1 for the space after each word
+    });
+  }
+
+  function resetAllWordUserInput() {
+    userInputWords.forEach((word) => {
+      word.userInput = "";
+    });
+  }
+
+  function resetAllWordActive() {
+    userInputWords.forEach((word) => {
+      word.isActive = false;
+    });
+  }
+
+  function updateActiveWord(position: number) {
+    resetAllWordActive();
+
+    for (let i = 0; i < userInputWords.length; i++) {
+      const word = userInputWords[i];
+      if (position >= word.start && position <= word.end) {
+        word.isActive = true;
+        break;
+      }
+    }
+  }
+
+  function checkWordCorrect() {
+    return userInputWords.every((w) => !w.incorrect);
+  }
+
+  function markIncorrectWord() {
+    userInputWords.forEach((word) => {
+      if (
+        word.userInput.toLocaleLowerCase() !== word.text.toLocaleLowerCase()
+      ) {
+        word.incorrect = true;
+      }
+    });
+  }
+
+  function focusOnLastWord() {
+    const position = inputValue.value.length;
+    updateActiveWord(position);
+    setInputCursorPosition(position);
+  }
+
+  function lastWordIsActive() {
+    let len = userInputWords.length;
+    return userInputWords[len - 1].isActive;
+  }
+
+  function findNextIncorrectWordNew() {
+    return userInputWords.find((word) => {
+      return word.incorrect;
+    })!;
+  }
+
+  async function clearNextIncorrectWord() {
+    const word = findNextIncorrectWordNew();
+    word.userInput = "";
+    word.incorrect = false;
+
+    currentEditWord = word;
+
+    userInputWordsSyncInput();
+
+    await nextTick();
+
+    setInputCursorPosition(word.start);
+    updateActiveWord(word.start);
+  }
+
+  function submitAnswer(correctCallback: () => void) {
+    if (mode === Mode.Fix) return;
+    resetAllWordActive();
+    markIncorrectWord();
+
+    if (checkWordCorrect()) {
+      mode = Mode.Input;
+      correctCallback();
+      inputValue.value = "";
+    } else {
+      mode = Mode.Fix;
+    }
+  }
+
+  async function fixFirstIncorrectWord() {
+    if (mode === Mode.Fix) {
+      mode = Mode.Fix_Input;
+
+      await clearNextIncorrectWord();
+    }
+  }
+
+  async function fixNextIncorrectWord() {
+    if (mode === Mode.Fix_Input) {
+      if (checkWordCorrect()) {
+        mode = Mode.Input;
+        focusOnLastWord();
+        return;
+      }
+
+      await clearNextIncorrectWord();
+    }
+  }
+
+  async function fixIncorrectWord() {
+    if (mode === Mode.Fix) {
+      await fixFirstIncorrectWord();
+    } else if (mode === Mode.Fix_Input) {
+      await fixNextIncorrectWord();
+    }
+  }
+
+  function preventAnyInputWhenFix(e: KeyboardEvent) {
+    if (mode === Mode.Fix) {
+      e.preventDefault();
+    }
+  }
+
+  function preventMove(e: KeyboardEvent) {
+    if (e.code === "ArrowLeft" || e.code === "ArrowRight") {
+      e.preventDefault();
+    }
+  }
+
+  function preventSpaceWhenFixInput(e: KeyboardEvent) {
+    if (e.code === "Space" && mode === Mode.Fix_Input) {
+      e.preventDefault();
+    }
+  }
+
+  function preventInputSpaceOnLastWord(e: KeyboardEvent) {
+    if (e.code === "Space" && lastWordIsActive()) {
+      e.preventDefault();
+    }
+  }
+
+  function preventBackspaceWhenFixInput(e: KeyboardEvent) {
+    if (e.code === "Backspace" && mode === Mode.Fix_Input) {
+      if (currentEditWord.userInput.length <= 0) {
+        e.preventDefault();
+      }
+    }
+  }
+
+  function preventInput(e: KeyboardEvent) {
+    preventAnyInputWhenFix(e);
+    preventMove(e);
+    preventSpaceWhenFixInput(e);
+    preventInputSpaceOnLastWord(e);
+    preventBackspaceWhenFixInput(e);
+  }
+
+  return {
+    inputValue,
+    userInputWords,
+    fixFirstIncorrectWord,
+    fixIncorrectWord,
+    preventInput,
+    submitAnswer,
+    setInputValue,
+  };
+}
diff --git a/apps/client/composables/main/tests/question.spec.ts b/apps/client/composables/main/tests/question.spec.ts
new file mode 100644
index 000000000..83cb9d3f7
--- /dev/null
+++ b/apps/client/composables/main/tests/question.spec.ts
@@ -0,0 +1,306 @@
+import { vi, it, expect, describe } from "vitest";
+import { useInput } from "../question";
+
+describe("question", () => {
+  it("should parse user input correctly", () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { userInputWords, setInputValue } = useInput({
+      source: () => "i eat",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    setInputValue("i eat");
+
+    expect(userInputWords).toMatchInlineSnapshot(`
+      [
+        {
+          "end": 1,
+          "incorrect": false,
+          "isActive": true,
+          "position": 0,
+          "start": 0,
+          "text": "i",
+          "userInput": "i",
+        },
+        {
+          "end": 5,
+          "incorrect": false,
+          "isActive": false,
+          "position": 0,
+          "start": 2,
+          "text": "eat",
+          "userInput": "eat",
+        },
+      ]
+    `);
+  });
+
+  it("should be correct when checked the answer", async () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { setInputValue, submitAnswer } = useInput({
+      source: () => "i eat",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    setInputValue("i eat");
+
+    const correctCallback = vi.fn();
+    submitAnswer(correctCallback);
+
+    expect(correctCallback).toBeCalled();
+  });
+
+  it("should be incorrect when checked the answer", async () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { userInputWords, setInputValue, submitAnswer } = useInput({
+      source: () => "i eat",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    setInputValue("i like");
+
+    const correctCallback = vi.fn();
+    submitAnswer(correctCallback);
+
+    expect(correctCallback).not.toBeCalled();
+    expect(userInputWords[1].incorrect).toBe(true);
+  });
+
+  it("should be the first word should be active", () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { userInputWords } = useInput({
+      source: () => "i eat",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    expect(userInputWords[0].isActive).toBe(true);
+  });
+
+  it("should be the first word should be active", () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { userInputWords } = useInput({
+      source: () => "i eat",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    expect(userInputWords[0].isActive).toBe(true);
+  });
+
+  it("should be changed the activated word based on the user's input", () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = vi.fn();
+
+    const { userInputWords, setInputValue } = useInput({
+      source: () => "i eat",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    getInputCursorPosition.mockReturnValue(1);
+    setInputValue("i");
+    expect(userInputWords[0].isActive).toBe(true);
+
+    getInputCursorPosition.mockReturnValue(2);
+    setInputValue("i ");
+    expect(userInputWords[1].isActive).toBe(true);
+
+    getInputCursorPosition.mockReturnValue(3);
+    setInputValue("i e");
+    expect(userInputWords[1].isActive).toBe(true);
+
+    getInputCursorPosition.mockReturnValue(3);
+    setInputValue("iea");
+    expect(userInputWords[0].isActive).toBe(true);
+  });
+
+  it("should be cleared the first incorrect word", async () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const {
+      setInputValue,
+      userInputWords,
+      submitAnswer,
+      fixFirstIncorrectWord,
+    } = useInput({
+      source: () => "i eat",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    setInputValue("he eat");
+    submitAnswer(() => {});
+    await fixFirstIncorrectWord();
+
+    expect(userInputWords[0].userInput).toBe("");
+    expect(userInputWords[0].isActive).toBe(true);
+  });
+
+  it("should be possible to clear out the wrong words in turn", async () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { setInputValue, userInputWords, submitAnswer, fixIncorrectWord } =
+      useInput({
+        source: () => "i eat apple",
+        setInputCursorPosition,
+        getInputCursorPosition,
+      });
+
+    setInputValue("he eats a");
+    submitAnswer(() => {});
+
+    await fixIncorrectWord();
+
+    expect(userInputWords[0].userInput).toBe("");
+    expect(userInputWords[0].isActive).toBe(true);
+
+    await fixIncorrectWord();
+
+    expect(userInputWords[1].userInput).toBe("");
+    expect(userInputWords[1].isActive).toBe(true);
+
+    await fixIncorrectWord();
+
+    expect(userInputWords[2].userInput).toBe("");
+    expect(userInputWords[2].isActive).toBe(true);
+  });
+
+  it("should prevent any input when fix mode", () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { setInputValue, submitAnswer, preventInput } = useInput({
+      source: () => "i eat apple",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    setInputValue("i ea ap");
+
+    submitAnswer(() => {});
+
+    const preventDefault = vi.fn();
+    preventInput({
+      code: "i",
+      preventDefault,
+    } as any as KeyboardEvent);
+
+    expect(preventDefault).toBeCalled();
+  });
+
+  it("should prevent move", () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { setInputValue, submitAnswer, preventInput } = useInput({
+      source: () => "i eat apple",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    setInputValue("i ea ap");
+
+    // move to left
+    const preventDefaultLeft = vi.fn();
+    preventInput({
+      code: "ArrowLeft",
+      preventDefault: preventDefaultLeft,
+    } as any as KeyboardEvent);
+    expect(preventDefaultLeft).toBeCalled();
+
+    // move to right
+    const preventDefaultRight = vi.fn();
+    preventInput({
+      code: "ArrowLeft",
+      preventDefault: preventDefaultRight,
+    } as any as KeyboardEvent);
+    expect(preventDefaultRight).toBeCalled();
+  });
+
+  it("should prevent space when fix input", async () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { setInputValue, submitAnswer, preventInput, fixIncorrectWord } =
+      useInput({
+        source: () => "i eat apple",
+        setInputCursorPosition,
+        getInputCursorPosition,
+      });
+
+    setInputValue("i ea ap");
+    submitAnswer(() => {});
+    await fixIncorrectWord();
+
+    const preventDefault = vi.fn();
+    preventInput({
+      code: "Space",
+      preventDefault,
+    } as any as KeyboardEvent);
+
+    expect(preventDefault).toBeCalled();
+  });
+
+  it("should prevent backspace when fix input", async () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = () => 0;
+
+    const { setInputValue, submitAnswer, preventInput, fixIncorrectWord } =
+      useInput({
+        source: () => "i eat apple",
+        setInputCursorPosition,
+        getInputCursorPosition,
+      });
+
+    setInputValue("i ea apple");
+    submitAnswer(() => {});
+    await fixIncorrectWord();
+
+    const preventDefault = vi.fn();
+    preventInput({
+      code: "Backspace",
+      preventDefault,
+    } as any as KeyboardEvent);
+
+    expect(preventDefault).toBeCalled();
+  });
+
+  it("should prevent space when focus on last word", async () => {
+    const setInputCursorPosition = () => {};
+    const getInputCursorPosition = vi.fn();
+
+    const { setInputValue, preventInput } = useInput({
+      source: () => "i eat apple",
+      setInputCursorPosition,
+      getInputCursorPosition,
+    });
+
+    const inputValue = "i eat apple";
+    getInputCursorPosition.mockReturnValue(inputValue.length);
+    setInputValue(inputValue);
+
+    const preventDefault = vi.fn();
+    preventInput({
+      code: "Space",
+      preventDefault,
+    } as any as KeyboardEvent);
+
+    expect(preventDefault).toBeCalled();
+  });
+});
diff --git a/apps/client/cypress/support/commands.ts b/apps/client/cypress/support/commands.ts
index 77a4bbfc6..5ce4db780 100644
--- a/apps/client/cypress/support/commands.ts
+++ b/apps/client/cypress/support/commands.ts
@@ -36,7 +36,7 @@ Cypress.Commands.add(
 
     cy.visit("/auth/login");
 
-    cy.get('input[type="text"]').as("phoneInput").type("13812345678");
+    cy.get('input[type="tel"]').as("phoneInput").type("13812345678");
     cy.get('input[type="password"]')
       .as("passwordInput")
       .type("yourPassword{enter}");
diff --git a/scripts/course/courses/04.json b/scripts/course/courses/04.json
index a54802b31..be4cf6cbb 100644
--- a/scripts/course/courses/04.json
+++ b/scripts/course/courses/04.json
@@ -721,11 +721,11 @@
 	},
 	{
 		"chinese": "它不必",
-		"english": "it doesn't have to",
+		"english": "it doesn't have",
 		"soundmark": "/ɪt/ /ˈdʌznt/ /hæv/"
 	},
 	{
-		"chinese": "它不必现在在床上睡觉",
+		"chinese": "它不必在床上睡觉",
 		"english": "it doesn't have to sleep on the bed",
 		"soundmark": "/ɪt/ /ˈdʌznt/ /hæv/ /tə/ /slip/ /ɑn/ /ðə/ /bɛd/"
 	}