diff --git a/src/css/nameBox.css b/src/css/nameBox.css
index 622135a..0703393 100644
--- a/src/css/nameBox.css
+++ b/src/css/nameBox.css
@@ -4,7 +4,7 @@
     align-items: center;
     width: 20vw;
     min-width: 100px;
-    background-color: #8391b8;
+    background-color: #a2b7e4;
     color: white;
     border-style: solid;
     border-color: #8391b8;
@@ -13,4 +13,8 @@
     position: absolute;
     transform: translateY(-40px);
     z-index: 2;
+    border-radius: 25px;
+
+    /*#a2b7e4*/
+    /*#8391b8*/
 }
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/conversationPage.jsx b/src/pages/conversationPage.jsx
index e6dc980..63ab8ea 100644
--- a/src/pages/conversationPage.jsx
+++ b/src/pages/conversationPage.jsx
@@ -8,6 +8,12 @@ import Animation from './components/animation.jsx';
 
 function ConversationPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text.replace("{name}", name);
+  const DialogName = data.name.replace("{name}", name);
 
   return (
     <div
@@ -29,11 +35,11 @@ function ConversationPage({data , onClicked}) {
       </div>
       <div style={{width:'60vw'}}>
         <div className='nameBox title'>
-          {data.name}
+          {DialogName}
         </div>
       </div>
       <div className='textBox title' style={{overflow: 'scroll',}}>
-        {data.text}
+        {DialogText}
       </div>
     </div>
   );
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/namePage.jsx b/src/pages/namePage.jsx
index 735db28..9f53238 100644
--- a/src/pages/namePage.jsx
+++ b/src/pages/namePage.jsx
@@ -1,10 +1,16 @@
 import '../css/global.css'
 import '../css/customInput.css'
 import BlackButton from './components/customButton'
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 function NamePage() {
-    const [name, setName] = useState('');
+    const [name, setName] = useState(() => {
+        return sessionStorage.getItem("name") || '';
+    });
+
+    useEffect(() => {
+        sessionStorage.setItem("name", name);
+    }, [name]);
 
     return (
         <div style={{
@@ -35,4 +41,4 @@ function NamePage() {
     )
 }
 
-export default NamePage
\ No newline at end of file
+export default NamePage
diff --git a/src/pages/storyPage.jsx b/src/pages/storyPage.jsx
index 08e2c72..67e1655 100644
--- a/src/pages/storyPage.jsx
+++ b/src/pages/storyPage.jsx
@@ -5,6 +5,11 @@ import '../css/textBox.css';
 
 function StoryPage({data , onClicked}) {
   const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+  const [name] = useState(() => {
+    return sessionStorage.getItem("name") || '';
+  });
+
+  const DialogText = data.text.replace("{name}", name);
 
   return (
     <div
@@ -22,7 +27,7 @@ function StoryPage({data , onClicked}) {
       }}
     >
       <div className='textBox title' style={{marginTop: '50vh', overflow: 'scroll',}}>
-        {data.text}
+        {DialogText}
       </div>
     </div>
   );
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
index cfe9558..9236a25 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]);
     }
   };