diff --git a/src/main.jsx b/src/main.jsx
index 7c771db..64a918f 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -22,7 +22,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/sprite" element={<Animation />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
-        <Route path='/vs/:step' element={<VitualNovelHandler />} />
+        <Route path='/vs/:char/:step' element={<VitualNovelHandler />} />
         <Route path='/end' element={<EndPage />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx
index 75cf4a9..9047a0e 100644
--- a/src/pages/introductionPage.jsx
+++ b/src/pages/introductionPage.jsx
@@ -35,7 +35,9 @@ function IntroductionPage() {
 
     const handleClickedButton = () => {
         console.log(character.name(numChar))
-        if(character.name(numChar)=='Porsche') navigate(`/vs/0`);
+        if(character.name(numChar)=='Porsche') navigate(`/vs/Porsche/0`);
+        if(character.name(numChar)=='Pie') navigate(`/vs/Pie/0`);
+        if(character.name(numChar)=='Patt') navigate(`/vs/Pat/0`);
     }
 
     return (
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
index cfe9558..fddd21a 100644
--- a/src/pages/vistualNovelHandler.jsx
+++ b/src/pages/vistualNovelHandler.jsx
@@ -14,12 +14,13 @@ function VitualNovelHandler() {
   const [error, setError] = useState(null);
   const [currentStep, setCurrentStep] = useState(0);
   const navigate = useNavigate();
-  const { step } = useParams();
+  const { char, step } = useParams();
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        const parsedData = await fetchYamlData({ src: '/yml/DialogPorsche.yml' });
+        const yamlPath = `/yml/Dialog${char}.yml`;
+        const parsedData = await fetchYamlData({ src: yamlPath });
         if (!Array.isArray(parsedData)) {
           throw new Error('YAML data is not an array');
         }
@@ -51,10 +52,14 @@ function VitualNovelHandler() {
     console.log(nextstep)
     if (typeof nextstep !== 'number' || Number.isNaN(nextstep)) {
         navigate(`/end`);//44 is last page
+        console.log("currentStep:", currentStep);
+        console.log("data at currentStep:", data[currentStep]);
     }
     else{
       setCurrentStep(nextstep);
-      navigate(`/vs/${nextstep}`);
+      navigate(`/vs/${char}/${nextstep}`);
+//       console.log("currentStep:", currentStep);
+//       console.log("data at currentStep:", data[currentStep]);
     }
   };