diff --git a/src/assets/arrow.png b/src/assets/arrow.png
new file mode 100644
index 0000000..dbf1c26
Binary files /dev/null and b/src/assets/arrow.png differ
diff --git a/src/css/selectCharacter.css b/src/css/selectCharacter.css
new file mode 100644
index 0000000..87fe24a
--- /dev/null
+++ b/src/css/selectCharacter.css
@@ -0,0 +1,35 @@
+/* Ensure you include global units, responsive layout and class targeting */
+.selection-container {
+    position: fixed;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    z-index: 1;
+    margin-top: 25vh;
+}
+
+.button {
+    width: 10vw;
+    height: 20vh;
+}
+
+.button img {
+    width: 100%;
+    height: 100%;
+}
+
+.textBox {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 60vw;
+    height: 20vh;
+    background-color: white;
+    color: #8391b8;
+    border-style: solid;
+    border-color: #8391b8;
+    border-width: 5px;
+    border-radius: 30px;
+}
diff --git a/src/pages/class/DialogPorsche.jsx b/src/pages/class/DialogPorsche.jsx
new file mode 100644
index 0000000..4454eb6
--- /dev/null
+++ b/src/pages/class/DialogPorsche.jsx
@@ -0,0 +1,30 @@
+const dialogData = [
+    {
+      type: "conversation",
+      name: "Porsche",
+      text: "Hi",
+      sprite: "M_Porsche_cross_arm.zip",
+      background: "hallway.png",
+      goTo: 1
+    },
+    {
+      type: "option",
+      name: "Porsche",
+      option: [
+        { text: "option1", goTo: 2 },
+        { text: "option2", goTo: 3 }
+      ],
+      sprite: "M_Porsche_cross_arm.zip",
+      background: "hallway.png"
+    },
+    {
+      type: "story",
+      text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem.",
+      background: "hallway.png",
+      goTo: 4
+    }
+  ];
+  
+
+export default dialogData;
+
diff --git a/src/pages/class/character.jsx b/src/pages/class/character.jsx
new file mode 100644
index 0000000..a8d4a47
--- /dev/null
+++ b/src/pages/class/character.jsx
@@ -0,0 +1,11 @@
+class Character {
+    name(num) {
+        return ["Invalid", "Porsche", "Pie", "Patt"][num] || "Invalid";
+    }
+
+    position(num) {
+        return ["Invalid", "right", "left", "middle"][num] || "Invalid";
+    }
+}
+
+export default Character;
diff --git a/src/pages/components/introductionData.jsx b/src/pages/components/introductionData.jsx
new file mode 100644
index 0000000..cdf6e9c
--- /dev/null
+++ b/src/pages/components/introductionData.jsx
@@ -0,0 +1,28 @@
+function IntroductionData({ onClickedIntroduction }) {
+    return (
+        <div 
+            onClick={onClickedIntroduction}
+            style={{
+                position: "fixed",
+                top: 0,
+                left: 0,
+                width: "100vw",
+                height: "100vh",
+                background: "rgba(var(--black), 0.5)",
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+                zIndex: 1
+            }}
+        >
+            <label style={{ color: "rgb(var(--white))", fontWeight: "bold" }}>
+                You are a new student who just <br />
+                transferred to this school not long ago. <br />
+                You don't know anyone yet, <br />
+                but eventually you meet...
+            </label>
+        </div>
+    );
+}
+
+export default IntroductionData;
diff --git a/src/pages/components/selectionCharacter.jsx b/src/pages/components/selectionCharacter.jsx
new file mode 100644
index 0000000..ae36e34
--- /dev/null
+++ b/src/pages/components/selectionCharacter.jsx
@@ -0,0 +1,21 @@
+import '../../css/selectCharacter.css';
+import arrowPic from '../../assets/arrow.png'
+
+function SelectionCharacter({ onClickedLeft, onClickedRight, nameChar, onClickedButton }) {
+
+    return (
+        <div className="selection-container">
+            <div className="button left" onClick={onClickedLeft}>
+                <img src={arrowPic} alt="Left Character" />
+            </div>
+            <button onClick={onClickedButton} className="textBox">
+                {nameChar}
+            </button>
+            <div className="button right" onClick={onClickedRight}>
+                <img src={arrowPic} alt="Right Character" style={{ transform: 'rotate(180deg)' }}/>
+            </div>
+        </div>
+    );
+}
+
+export default SelectionCharacter;
diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx
index e5345b8..6193cec 100644
--- a/src/pages/introductionPage.jsx
+++ b/src/pages/introductionPage.jsx
@@ -1,166 +1,64 @@
-import { useState } from 'react'
-import '../css/global.css'
-import BlackButton from './components/customButton'
+import { useState } from 'react';
+import '../css/global.css';
+import BlackButton from './components/customButton';
 import Animation from './components/animation.jsx';
 import PlayVideo from './components/playVideo.jsx';
 import LoadingScene from './components/loadingScene.jsx';
-
-function IntroductionData({onClickedIntroduction}){
-
-    return(
-        <div 
-            onClick={onClickedIntroduction}
-            style={{
-                position: "fixed",
-                top: 0,
-                left: 0,
-                width: "100vw",
-                height: "100vh",
-                background: "rgba(var(--black), 0.5)",
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                zIndex: 1 // Ensure this is above other elements
-            }}
-        >
-            <label style={{color:"rgb(var(--white))", fontWeight:"bold"}}>
-                You are a new student who just <br />
-                transfered to this school not long ago. <br />
-                You don't know anyone yet, <br />
-                but eventually you  meet...
-            </label>
-        </div>
-  )
-}
-
-function SelectionCharacter(){
-    const [numChar, setNumChar] = useState(1);
-
-    const handleLeftClicked = () => {
-        var temp = numChar - 1
-        if (temp<1){
-            setNumChar(3)
-        }
-        else{
-            setNumChar(temp)
-        }
-    };
-    const handleRightClicked = () => {
-        var temp = numChar + 1
-        if (temp>3){
-            setNumChar(1)
-        }
-        else{
-            setNumChar(temp)
-        }
-    };
-
-    class Character {
-        name(num) {
-            if (num === 1) {
-                return "Porsche";
-            } else if (num === 2) {
-                return "Pie";
-            } else if (num === 3) {
-                return "Patt";
-            } else {
-                return "Invalid";
-            }
-        }
-        position(num) {
-            if (num === 1) {
-                return "left";
-            } else if (num === 2) {
-                return "middle";
-            } else if (num === 3) {
-                return "right";
-            } else {
-                return "Invalid";
-            }
-        }
-    }
-    
-    const character = new Character();;
-
-    return (
-        <div style={{
-            position: "fixed",
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            width: "100vw",
-            height: "100vh",
-            zIndex: 1,
-        }}>
-            <div className="button left" 
-                onClick={handleLeftClicked}
-                style={{
-                    // background: 'white',
-                    width:'10vw',
-                    height:'20vh'
-                }}
-            >
-                <img src="https://placehold.co/400x600" style={{width:'100%',height:'100%'}}/>
-            </div>
-            <div className="textBox" 
-                style={{
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    width:'10vw',
-                    height:'20vh'
-                }}>
-                {character.name(numChar)}
-            </div>
-            <div className="button right" 
-                onClick={handleRightClicked}
-                style={{
-                    // background: 'white',
-                    width:'10vw',
-                    height:'20vh'
-                }}
-            >
-                <img src="https://placehold.co/400x600" style={{width:'100%',height:'100%'}}/>
-            </div>
-        </div>
-    )
-}
+import IntroductionData from './components/introductionData.jsx';
+import SelectionCharacter from './components/selectionCharacter.jsx';
+import Character from './class/character.jsx';
 
 function IntroductionPage() {
+
     const [loading, setLoading] = useState(true);
     const [positionState, setPositionState] = useState("middle");
     const [isClickedIntroduction, setIsClickedIntroduction] = useState(false);
+    const [numChar, setNumChar] = useState(1);
+    const character = new Character();
 
+    const handleLeftClicked = () => {
+        setNumChar(prev => (prev - 1 < 1 ? 3 : prev - 1));
+    };
+
+    const handleRightClicked = () => {
+        setNumChar(prev => (prev + 1 > 3 ? 1 : prev + 1));
+    };
 
     const handleClickIntroduction = () => {
-        setIsClickedIntroduction(true); 
-        console.log(isClickedIntroduction)
+        setIsClickedIntroduction(true);
     };
 
     const handleVideoReady = () => {
-        setLoading(false); 
+        setLoading(false);
     };
 
+    const handleClickedButton = () => {
+        console.log(character.name(numChar))
+    }
+
     return (
-        <div style={{
-            width: "100vw",
-            height: "100vh",
-        }}>
+        <div style={{ width: "100vw", height: "100vh" }}>
             {loading ? (
                 <LoadingScene />
             ) : (
                 !isClickedIntroduction ? (
                     <IntroductionData onClickedIntroduction={handleClickIntroduction} />
                 ) : (
-                    <SelectionCharacter />
+                    <SelectionCharacter
+                        onClickedLeft={handleLeftClicked}
+                        onClickedRight={handleRightClicked}
+                        nameChar={character.name(numChar)}
+                        onClickedButton={handleClickedButton}
+                    />
                 )
             )}
-            
-            <PlayVideo src='hallway_FFF.mp4' side='middle' onVideoReady={handleVideoReady} />
+            <PlayVideo
+                src='hallway_FFF.mp4'
+                side={character.position(numChar)}
+                onVideoReady={handleVideoReady}
+            />
         </div>
     );
 }
 
-
-
-export default IntroductionPage
+export default IntroductionPage;