diff --git a/src/pages/transitionPage.jsx b/src/pages/transitionPage.jsx
new file mode 100644
index 0000000..630b6bf
--- /dev/null
+++ b/src/pages/transitionPage.jsx
@@ -0,0 +1,25 @@
+// TransitionPage.jsx
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+function TransitionPage({data , onChanged}){
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    // Set a timer for 5 seconds (5000 milliseconds)
+    const timer = setTimeout(() => {
+      // Navigate to the target page after the timer expires
+      onChanged(data.goTo-1)// Change '/targetPage' to your desired route
+    }, 3000);
+
+    // Cleanup the timer on component unmount
+    return () => clearTimeout(timer);
+  }, [navigate]);
+
+  return (
+    <div>
+    </div>
+  );
+};
+
+export default TransitionPage;
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
index 67e23e5..8f69ba4 100644
--- a/src/pages/vistualNovelHandler.jsx
+++ b/src/pages/vistualNovelHandler.jsx
@@ -7,7 +7,7 @@ import StoryPage from './storyPage';
 import ConversationPage from './conversationPage.jsx';
 import OptionPage from './optionPage.jsx';
 import LoadingScene from './components/loadingScene.jsx';
-
+import TransitionPage from './transitionPage.jsx';
 
 function VitualNovelHandler() {
   const [data, setData] = useState(null);
@@ -69,6 +69,8 @@ function VitualNovelHandler() {
         return <ConversationPage data={currentStepData} onClicked={handleNextStep}/>;
       case "option":
         return <OptionPage data={currentStepData} onClicked={handleNextStep}/>;
+      case "transition":
+        return <TransitionPage data={currentStepData} onChanged={handleNextStep}/>
       default:
         return <LoadingScene />;
     }