diff --git a/src/css/option.css b/src/css/option.css
new file mode 100644
index 0000000..7c4105f
--- /dev/null
+++ b/src/css/option.css
@@ -0,0 +1,28 @@
+.optionBox {
+    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;
+    padding: 50px;
+}
+.optionSection {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+}
+
+.spriteBox {
+    height: 50vh;
+    width: 30vw;
+}
+@media (max-width: 768px) {
+    .spriteBox {
+        width: 75vw;
+    }
+}
\ No newline at end of file
diff --git a/src/pages/optionPage.jsx b/src/pages/optionPage.jsx
new file mode 100644
index 0000000..a6679c2
--- /dev/null
+++ b/src/pages/optionPage.jsx
@@ -0,0 +1,44 @@
+// src/OptionPage.js
+import { useEffect, useState } from 'react';
+import '../css/global.css';
+import '../css/textBox.css';
+import '../css/nameBox.css';
+import '../css/option.css'
+import Animation from './components/animation.jsx';
+
+function OptionPage({data , onClicked}) {
+  const backgroundSRC = `${import.meta.env.VITE_ASSETS_URL}/${data.background}`
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '100svh',
+        width: '100svw',  
+        flexDirection: 'column',
+        backgroundImage: `url(${backgroundSRC})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      }}
+    >
+      <div className='spriteBox'>
+        <Animation src={`F${data.sprite}`}/>
+      </div>
+      {/* <div style={{width:'60vw'}}>
+        <div className='nameBox title'>
+          {data.name}
+        </div>
+      </div> */}
+      <div className='optionSection'>
+        {
+            data.option.map((item,i) => 
+                <div key={i} className='optionBox title'>{item.text}</div>)
+        }
+      </div>
+    </div>
+  );
+}
+
+export default OptionPage;
diff --git a/src/pages/vistualNovelHandler.jsx b/src/pages/vistualNovelHandler.jsx
index 3d80925..6022362 100644
--- a/src/pages/vistualNovelHandler.jsx
+++ b/src/pages/vistualNovelHandler.jsx
@@ -5,8 +5,10 @@ import '../css/global.css';
 import { fetchYamlData } from './components/fetchYamlData';
 import StoryPage from './storyPage';
 import ConversationPage from './conversationPage.jsx';
+import OptionPage from './optionPage.jsx';
 import LoadingScene from './components/loadingScene.jsx';
 
+
 function VitualNovelHandler() {
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
@@ -61,7 +63,7 @@ function VitualNovelHandler() {
       case "conversation":
         return <ConversationPage data={currentStepData} onClicked={handleNextStep}/>;
       case "option":
-        return <div onClick={handleNextStep}>option</div>;
+        return <OptionPage data={currentStepData} onClicked={handleNextStep}/>;
       default:
         return <LoadingScene />;
     }