diff --git a/public/yml/DialogPorsche.yml b/public/yml/DialogPorscheEnglish.yml
similarity index 100%
rename from public/yml/DialogPorsche.yml
rename to public/yml/DialogPorscheEnglish.yml
diff --git a/src/main.jsx b/src/main.jsx
index 9a8dd44..0a8c1fc 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -20,7 +20,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/name" element={<NamePage />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
-        <Route path='/vs/:char/:step' element={<VitualNovelHandler />} />
+        <Route path='/vs/:char/:lang/:step' element={<VitualNovelHandler />} />
         <Route path='/end' element={<EndPage />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
index 9236a25..8fa9a6e 100644
--- a/src/pages/vistualNovelHandler.jsx
+++ b/src/pages/vistualNovelHandler.jsx
@@ -14,12 +14,12 @@ function VitualNovelHandler() {
   const [error, setError] = useState(null);
   const [currentStep, setCurrentStep] = useState(0);
   const navigate = useNavigate();
-  const { char, step } = useParams();
+  const { char, lang, step } = useParams();
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        const yamlPath = `/yml/Dialog${char}.yml`;
+        const yamlPath = `/yml/Dialog${char}${lang}.yml`;
         const parsedData = await fetchYamlData({ src: yamlPath });
         if (!Array.isArray(parsedData)) {
           throw new Error('YAML data is not an array');
@@ -57,7 +57,7 @@ function VitualNovelHandler() {
     }
     else{
       setCurrentStep(nextstep);
-      navigate(`/vs/${char}/${nextstep}`);
+      navigate(`/vs/${char}/${lang}/${nextstep}`);
 //       console.log("currentStep:", currentStep);
 //       console.log("data at currentStep:", data[currentStep]);
     }