diff --git a/public/yml/DialogPorsche.yml b/public/yml/DialogPorsche.yml
index 6110b4a..96b6782 100644
--- a/public/yml/DialogPorsche.yml
+++ b/public/yml/DialogPorsche.yml
@@ -1,7 +1,7 @@
 - id: 1
   type: story
   text: "During break, you go out into the hallway for some air, then someone approaches you with a smile."
-  background: ""
+  background: "bg-hallway.png"
   goTo: 2
 
 - id: 2
diff --git a/src/css/global.css b/src/css/global.css
index 07e828d..3124973 100644
--- a/src/css/global.css
+++ b/src/css/global.css
@@ -26,6 +26,9 @@ body {
 .title.medium{
   font-size: 24pt;
 }
+.title.small{
+  font-size: 16pt;
+}
 
 .body {
   font-family: "Source Sans 3";
@@ -33,3 +36,9 @@ body {
   font-weight: 400;
   text-align: center;
 }
+
+@media (max-width: 768px) {
+  .title {
+      font-size: 16pt;
+  }
+}
diff --git a/src/css/textBox.css b/src/css/textBox.css
new file mode 100644
index 0000000..8850286
--- /dev/null
+++ b/src/css/textBox.css
@@ -0,0 +1,21 @@
+.textBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60vw;
+    background-color: white;
+    color: #8391b8;
+    border-style: solid;
+    border-color: #8391b8;
+    border-width: 5px;
+    border-radius: 30px;
+}
+
+@media (max-width: 768px) {
+    .textBox.title {
+        margin-top: 50vh;
+    }
+    .textBox.title.small {
+        margin-top: 50vh;
+    }
+}
\ No newline at end of file
diff --git a/src/main.jsx b/src/main.jsx
index f6cf322..05544f2 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -9,7 +9,7 @@ import NamePage from './pages/namePage.jsx';
 import Animation from './pages/components/animation.jsx';
 import IntroductionPage from './pages/introductionPage.jsx';
 import PlayVideo from './pages/components/playVideo.jsx'
-import StoryPage from './pages/storyPage.jsx';
+import VitualNovelHandler from './pages/vistualNovelHandler.jsx';
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>
@@ -21,7 +21,7 @@ createRoot(document.getElementById('root')).render(
         <Route path="/sprite" element={<Animation />} />
         <Route path='/video' element={<PlayVideo />} />
         <Route path="/introduction" element={<IntroductionPage />} />
-        <Route path='/story' element={<StoryPage />} />
+        <Route path='/vs/:step' element={<VitualNovelHandler />} />
 
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
diff --git a/src/pages/components/fetchYamlData.jsx b/src/pages/components/fetchYamlData.jsx
index a54792f..26df3af 100644
--- a/src/pages/components/fetchYamlData.jsx
+++ b/src/pages/components/fetchYamlData.jsx
@@ -7,9 +7,7 @@ export const fetchYamlData = async ({ src = '/yml/DialogPorsche.yml' }) => {
       throw new Error('Network response was not ok');
     }
     const yamlData = await response.text();
-    console.log('Fetched YAML data:', yamlData); // Debugging statement
     const parsedData = yaml.load(yamlData);
-    console.log('Parsed YAML data:', parsedData); // Debugging statement
     return parsedData;
   } catch (error) {
     throw new Error(`Error loading YAML data: ${error.message}`);
diff --git a/src/pages/conversationPage.jsx b/src/pages/conversationPage.jsx
new file mode 100644
index 0000000..00298f6
--- /dev/null
+++ b/src/pages/conversationPage.jsx
@@ -0,0 +1,34 @@
+// src/ConversationPage.js
+import { useEffect, useState } from 'react';
+import '../css/global.css';
+import '../css/textBox.css';
+
+function ConversationPage({data , onClicked}) {
+  const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+
+  return (
+    <div
+      onClick={onClicked}
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100vh',
+        width: '100vw',  
+        flexDirection: 'column',
+        backgroundImage: `url(${backgroundSRC})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className='nameBox title'>
+        {data.name}
+      </div>
+      <div className='textBox title' style={{marginTop: '50vh', overflow: 'scroll',}}>
+        {data.text}
+      </div>
+    </div>
+  );
+}
+
+export default ConversationPage;
diff --git a/src/pages/storyPage.jsx b/src/pages/storyPage.jsx
index fa655ff..266c60b 100644
--- a/src/pages/storyPage.jsx
+++ b/src/pages/storyPage.jsx
@@ -1,72 +1,28 @@
 // src/StoryPage.js
 import { useEffect, useState } from 'react';
 import '../css/global.css';
-import { fetchYamlData } from './components/fetchYamlData';
+import '../css/textBox.css';
 
-function StoryPage() {
-  const [data, setData] = useState(null);
-  const [error, setError] = useState(null);
-  const [currentStep, setCurrentStep] = useState(0);
-
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        const parsedData = await fetchYamlData({ src: '/yml/DialogPorsche.yml' });
-        console.log("Parsed in component:", parsedData);
-        if (!Array.isArray(parsedData)) {
-          throw new Error('YAML data is not an array');
-        }
-        setData(parsedData);
-      } catch (error) {
-        setError(error.message);
-      }
-    };
-    loadData();
-  }, []);
-  
-
-  if (error) {
-    return <div>Error loading YAML data: {error}</div>;
-  }
-
-  if (!data) {
-    return <div>Loading...</div>;
-  }
-
-  const handleClicked = () => {
-    console.log(data);
-    // You can add logic here to handle the click event, such as navigating to the next step
-    if (currentStep < data.length - 1) {
-      setCurrentStep(currentStep + 1);
-    }
-  };
-
-  const currentStepData = data[currentStep];
+function StoryPage({data , onClicked}) {
+  const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
 
   return (
     <div
-      onClick={handleClicked}
+      onClick={onClicked}
       style={{
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
         height: '100vh',
+        width: '100vw',  
         flexDirection: 'column',
+        backgroundImage: `url(${backgroundSRC})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
       }}
     >
-      <label className='title'>Fifty Shades <br /> of Bully</label>
-      <div>
-        <p>ID: {currentStepData.id}</p>
-        <p>Type: {currentStepData.type}</p>
-        {currentStepData.name && <p>Name: {currentStepData.name}</p>}
-        <p>Text: {currentStepData.text}</p>
-        {currentStepData.option && (
-          <ul>
-            {currentStepData.option.map((option, index) => (
-              <li key={index}>{option.text}</li>
-            ))}
-          </ul>
-        )}
+      <div className='textBox title' style={{marginTop: '50vh', overflow: 'scroll',}}>
+        {data.text}
       </div>
     </div>
   );
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
new file mode 100644
index 0000000..1ab06cc
--- /dev/null
+++ b/src/pages/vistualNovelHandler.jsx
@@ -0,0 +1,76 @@
+// src/pages/vistualNovelHandler.jsx
+import { useEffect, useState } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import '../css/global.css';
+import { fetchYamlData } from './components/fetchYamlData';
+import StoryPage from './storyPage';
+import LoadingScene from './components/loadingScene.jsx';
+
+function VitualNovelHandler() {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+  const [currentStep, setCurrentStep] = useState(0);
+  const navigate = useNavigate();
+  const { step } = useParams();
+
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        const parsedData = await fetchYamlData({ src: '/yml/DialogPorsche.yml' });
+        if (!Array.isArray(parsedData)) {
+          throw new Error('YAML data is not an array');
+        }
+        setData(parsedData);
+      } catch (error) {
+        setError(error.message);
+      }
+    };
+    loadData();
+  }, []);
+
+  useEffect(() => {
+    // Update the current step from the URL parameter
+    if (step && !isNaN(step)) {
+      setCurrentStep(parseInt(step, 10));
+    }
+  }, [step]);
+
+  if (error) {
+    return <div>Error loading YAML data: {error}</div>;
+  }
+
+  if (!data) {
+    return <div>Loading...</div>;
+  }
+
+  const handleNextStep = () => {
+    console.log(data);
+    if (currentStep < data.length - 1) {
+      setCurrentStep(currentStep + 1);
+      navigate(`/vs/${currentStep + 1}`);
+    }
+  };
+
+  const currentStepData = data[currentStep];
+
+  const renderComponent = (type) => {
+    switch (type) {
+      case "story":
+        return <StoryPage data={currentStepData} onClicked={handleNextStep}/>;
+      case "conversation":
+        return <div onClick={handleNextStep}>conversation</div>;
+      case "option":
+        return <div onClick={handleNextStep}>option</div>;
+      default:
+        return <LoadingScene />;
+    }
+  };
+
+  return (
+    <div>
+      {renderComponent(currentStepData.type)}
+    </div>
+  );
+}
+
+export default VitualNovelHandler;