diff --git a/public/yml/DialogPie.yml b/public/yml/DialogPieEnglish.yml
similarity index 100%
rename from public/yml/DialogPie.yml
rename to public/yml/DialogPieEnglish.yml
diff --git a/public/yml/DialogPieThai.yml b/public/yml/DialogPieThai.yml
new file mode 100644
index 0000000..a46178c
--- /dev/null
+++ b/public/yml/DialogPieThai.yml
@@ -0,0 +1,453 @@
+- id: 1
+  type: story
+  text: "In science class, the teacher announced that there will be a group project and presentation."
+  background: "bg-hallway.png"
+  goTo: 2
+
+- id: 2
+  type: story
+  text: "The groups are chosen and you end up working with Pie."
+  background: "bg-hallway.png"
+  goTo: 3
+
+- id: 3
+  type: story
+  text: "From what you've seen so far in this class, Pie seems like a reliable work partner."
+  background: "bg-hallway.png"
+  goTo: 4
+
+- id: 4
+  type: conversation
+  name: Pie
+  text: ”The project seems simple enough, why don’t we start brainstorming for ideas together? I'm Pie by the way.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 5
+
+- id: 5
+  type: option
+  name: Pie
+  option:
+  - text: Ok!
+    goTo: 6
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 6
+  type: story
+  text: "The two of you start brainstorming for the project right away."
+  background: "bg-hallway.png"
+  goTo: 7
+
+- id: 7
+  type: story
+  text: "Pie starts sharing their ideas to you, so you also share yours to Pie."
+  background: "bg-hallway.png"
+  goTo: 8
+
+- id: 8
+  type: conversation
+  name: Pie
+  text: ”The idea is nice…but I don’t know if it is creative enough. We don’t want to lose points on creativity.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 9
+
+- id: 9
+  type: option
+  name: Pie
+  option:
+  - text: "Oh...I can think of another one then."
+    goTo: 10
+  - text: "Oh...why don’t you like it though?"
+    goTo: 11
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 10
+  type: conversation
+  name: Pie
+  text: ”Yeah maybe it’ll be better...”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 11
+  type: conversation
+  name: Pie
+  text: ”We gotta impress the teacher haha.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 12
+
+- id: 12
+  type: conversation
+  name: Pie
+  text: ”I’m not saying it’s bad! But you know, it’s a little basic. I kinda expected you to come up with something more original.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 13
+
+- id: 13
+  type: story
+  text: "A few days passed, you and Pie start reviewing and making the presentation."
+  background: "bg-hallway.png"
+  goTo: 14
+
+- id: 15
+  type: story
+  text: "You try your best to make the presentation look good, but Pie keeps having things to say about what you are doing."
+  background: "bg-hallway.png"
+  goTo: 16
+
+- id: 16
+  type: conversation
+  name: Pie
+  text: ”Oh you’re doing it like that? I mean it’s okay...”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 17
+
+- id: 17
+  type: conversation
+  name: Pie
+  text: ”But I would do more so we don’t embarrass ourselves in front of the class.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 18
+
+- id: 19
+  type: option
+  name: Pie
+  option:
+  - text: "Huh? But I’m not trying to embarrass us."
+    goTo: 20
+  - text: "Ok..."
+    goTo: 21
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 20
+  type: conversation
+  name: Pie
+  text: ”I was just trying to help! Don’t get upset so easily. I’m trying to do what’s best for the project!”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 21
+  type: conversation
+  name: Pie
+  text: ”You can do it your way if you want. But don’t blame me if it doesn’t turn out good...just saying.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 22
+  type: story
+  text: "You don’t think you did a bad job, but you adjust your work anyways as you don’t want trouble with Pie."
+  background: "bg-hallway.png"
+  goTo: 23
+
+- id: 23
+  type: transition
+  goTo: 24
+
+- id: 24
+  type: story
+  text: "Finally, the presentation day is here, but you feel anxious about how it will go because of Pie's comments on your work."
+  background: "bg-hallway.png"
+  goTo: 25
+
+- id: 25
+  type: story
+  text: "Before presenting, Pie came to you."
+  background: "bg-hallway.png"
+  goTo: 26
+
+- id: 26
+  type: conversation
+  name: Pie
+  text: ”Don’t worry, I’ll handle the important parts. I’ll let you talk about the basic parts, since it’s easier.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 27
+
+- id: 27
+  type: option
+  name: Pie
+  option:
+  - text: "But I should present the parts I worked on?"
+    goTo: 28
+  - text: "Fine, only because I don't want it to be a big deal and interfere with our work."
+    goTo: 47
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+
+- id: 28
+  type: conversation
+  name: Pie
+  text: ”Ok fine, as long as the presentation goes well.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 29
+
+- id: 29
+  type: story
+  text: "During the presentation, Pie presents their slides, and now it’s almost your slides."
+  background: "bg-hallway.png"
+  goTo: 30
+
+- id: 30
+  type: story
+  text: "You get ready to present, but realizes that Pie just kept presenting your slides as well, not stopping to let you speak."
+  background: "bg-hallway.png"
+  goTo: 31
+
+- id: 31
+  type: story
+  text: "In the end, you were left with little slides to present."
+  background: "bg-hallway.png"
+  goTo: 32
+
+- id: 32
+  type: story
+  text: "You confront Pie about their fake agreement after."
+  background: "bg-hallway.png"
+  goTo: 33
+
+- id: 33
+  type: conversation
+  name: Pie
+  text: ”Why didn’t you let me present my parts like you agreed before?”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 34
+
+- id: 34
+  type: conversation
+  name: Pie
+  text: ”Oh I just thought it would still be better if I presented the harder parts for you so it goes smoother”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 35
+
+- id: 35
+  type: story
+  text: "You are frustrated at their unfair treatment, but decided to just go talk to the teacher about the matter."
+  background: "bg-hallway.png"
+  goTo: 36
+
+- id: 36
+  type: conversation
+  name: Pie
+  text: ”You calmly explain to the teacher the situation.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 37
+
+- id: 37
+  type: conversation
+  name: Pie
+  text: ”So the teacher expressed that the presentation should have been split equally. Or at least people should present what they had worked on.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 38
+
+- id: 38
+  type: story
+  text: "After the class ends, Pie turns to you."
+  background: "bg-hallway.png"
+  goTo: 39
+
+- id: 40
+  type: conversation
+  name: Pie
+  text: ”Getting the teacher involved in such a small thing. Guess you think I’m the type to take all the credit? I was trying to make our presentation better.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 41
+
+- id: 41
+  type: conversation
+  name: Pie
+  text: ”I know, but if you wanted to present certain parts or do something different, you should’ve told me directly so I know.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 42
+
+- id: 42
+  type: story
+  text: "You were tricked by Pie, but you successfully brought the unfair treatment to the teacher’s attention."
+  background: "bg-hallway.png"
+  goTo: 43
+
+- id: 43
+  type: story
+  text: "Although the teacher explained that the finalized scores couldn’t be changed, you felt relief knowing you stood up for yourself."
+  background: "bg-hallway.png"
+  goTo: 44
+
+- id: 44
+  type: story
+  text: "From this experience, you know to stand up for what is rightfully yours and not let those harsh words bring you down."
+  background: "bg-hallway.png"
+  goTo: 45
+
+- id: 45
+  type: story
+  text: "You decided to distance yourself from Pie, understanding that being a team, or even in friendship, there should be respect."
+  background: "bg-hallway.png"
+  goTo: 46
+
+- id: 46
+  type: story
+  text: "Ready to leave behind any negativity, you find and embrace new and healthier connections."
+  background: "bg-hallway.png"
+  goTo: end
+
+- id: 47
+  type: story
+  text: "You quickly agreed to Pie's words because it's almost time to present, and also to avoid trouble be presenting."
+  background: "bg-hallway.png"
+  goTo: 48
+
+- id: 48
+  type: story
+  text: "But deep down you still think that you should’ve had the right to present the parts you worked so hard on."
+  background: "bg-hallway.png"
+  goTo: 49
+
+- id: 49
+  type: transition
+  goTo: 50
+
+- id: 50
+  type: story
+  text: "After you are done presenting, the teacher proceeds to ask your group questions about the slides."
+  background: "bg-hallway.png"
+  goTo: 51
+
+- id: 51
+  type: conversation
+  name: Pie
+  text: ”Can you explain a bit more about this slide?”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 52
+
+- id: 52
+  type: story
+  text: "The teacher's question was about a slide that you had worked on and was supposed to present."
+  background: "bg-hallway.png"
+  goTo: 53
+
+- id: 53
+  type: story
+  text: "But because Pie had presented it, Pie was pressured and expected to answer the question."
+  background: "bg-hallway.png"
+  goTo: 54
+
+- id: 54
+  type: story
+  text: "Pie starts stuttering on their words, leading you to answer the question yourself."
+  background: "bg-hallway.png"
+  goTo: 55
+
+- id: 55
+  type: conversation
+  name: Pie
+  text: ”Oh? Very good! But why did you answer instead of Pie? Does Pie not know?”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 56
+
+- id: 56
+  type: conversation
+  name: Pie
+  text: ”I was actually the one who worked on this slide.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 57
+
+- id: 57
+  type: conversation
+  name: Pie
+  text: ”The teacher looked confused, so you calmly explain what happened before you and Pie presented.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 58
+
+- id: 58
+  type: conversation
+  name: Pie
+  text: ”The teacher then asked you to present your slides and told Pie that everyone should have the right to present what they worked on.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 59
+
+- id: 59
+  type: conversation
+  name: Pie
+  text: ”Alright I got the situation now, luckily I haven't given you your individual scores yet, now I can give you the scores you deserve.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 60
+
+- id: 60
+  type: story
+  text: "After this, you know Pie is upset at the whole thing."
+  background: "bg-hallway.png"
+  goTo: 61
+
+- id: 61
+  type: story
+  text: "After the class ends, Pie turns to you."
+  background: "bg-hallway.png"
+  goTo: 62
+
+- id: 62
+  type: conversation
+  name: Pie
+  text: ”I could’ve answered the question! You made it seem like I was trying to take your credit in front of the teacher, you know I was trying to make the presentation better.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 63
+
+- id: 63
+  type: conversation
+  name: Pie
+  text: ”I know, but I didn’t appreciate how you treated me as your teammate. Thinking back, it was really unfair of you.”
+  sprite: "_Pie_normal.zip"
+  background: "bg-hallway.png"
+  goTo: 64
+
+- id: 64
+  type: story
+  text: "Afterwards, you become aware of Pie’s behavior and decided to stay distant from Pie, choosing to not take their words to heart."
+  background: "bg-hallway.png"
+  goTo: 65
+
+- id: 65
+  type: story
+  text: "With the teacher's help, the situation was resolved fairly, and both you and Pie received the grades you earned for the presentation."
+  background: "bg-hallway.png"
+  goTo: 66
+
+- id: 66
+  type: story
+  text: "This experience taught you to not be taken advantage of, even in group work."
+  background: "bg-hallway.png"
+  goTo: 67
+
+- id: 67
+  type: story
+  text: "This time you emerged strong and stood firm for yourself and what you rightfully deserved."
+  background: "bg-hallway.png"
+  goTo: 68
+
+- id: 68
+  type: story
+  text: "Now you aspire to make healthier and more respectful collaborations in the future."
+  background: "bg-hallway.png"
+  goTo: end
diff --git a/public/yml/DialogPorscheThai.yml b/public/yml/DialogPorscheThai.yml
new file mode 100644
index 0000000..69b73eb
--- /dev/null
+++ b/public/yml/DialogPorscheThai.yml
@@ -0,0 +1,321 @@
+- id: 1
+  type: story
+  text: "During break, you go out into the hallway for some air, then someone approaches you with a smile."
+  background: "bg-hallway.png"
+  goTo: 2
+
+- id: 2
+  type: conversation
+  name: Porsche
+  text: ”Hi! I haven’t seen you around before so you must be new. I’m Porsche. Why don’t you sit with me and my friends? We'll tell you about the school!”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 3
+
+- id: 3
+  type: option
+  name: Porsche
+  option:
+  - text: Sure!
+    goTo: 4
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 4
+  type: story
+  text: "After a while, you start hearing whispers around you about a rumor of a thief."
+  background: "bg-hallway.png"
+  goTo: 5
+
+- id: 5
+  type: story
+  text: "And you have a small feeling that they might be referring to you as the culprit."
+  background: "bg-hallway.png"
+  goTo: 6
+
+- id: 6
+  type: story
+  text: "Porsche then approaches you."
+  background: "bg-hallway.png"
+  goTo: 7
+
+- id: 7
+  type: conversation
+  name: Porsche
+  text: “Seems like people have been losing their stuff a lot lately. I can’t think of who would do it though, since we all know each other.”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 8
+
+- id: 8
+  type: option
+  name: Porsche
+  option:
+  - text: "What does that mean? You think it’s me?"
+    goTo: 9
+  - text: "I don’t know either, I’m not familiar with anyone."
+    goTo: 10
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 9
+  type: conversation
+  name: Porsche
+  text: “No! I don’t think so! But people might think it’s you because you’re new. It’s unfair but it’s just how it is sometimes.”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 10
+  type: conversation
+  name: Porsche
+  text: “Yeah I know. It’s ok. People will calm down. You don’t have to worry!”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 11
+
+- id: 11
+  type: transition
+  goTo: 12
+
+- id: 12
+  type: story
+  text: "After a few days, the rumor grows and the whispers continue."
+  background: "bg-hallway.png"
+  goTo: 13
+
+- id: 13
+  type: story
+  text: "Some classmates have even started avoiding you."
+  background: "bg-hallway.png"
+  goTo: 14
+
+- id: 14
+  type: story
+  text: "This time people keep mentioning that they lose their stuff around you."
+  background: "bg-hallway.png"
+  goTo: 15
+
+- id: 15
+  type: story
+  text: "Getting anxious, you look to Porsche for advice."
+  background: "bg-hallway.png"
+  goTo: 16
+
+- id: 16
+  type: conversation
+  name: Porsche
+  text: “Hey, why are people saying that the thief might be me? How could it even be me? Did someone tell everyone it was me?”
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 17
+
+- id: 17
+  type: conversation
+  name: Porsche
+  text: "What? I don’t know, people started talking, but I did say it can’t be you. But it is strange that it happens around you."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 18
+
+- id: 18
+  type: option
+  name: Porsche
+  option:
+  - text: "But... I’ve only been around you and your group."
+    goTo: 19
+  - text: "But... I haven’t done anything."
+    goTo: 20
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 19
+  type: conversation
+  name: Porsche
+  text: "Ha? Are you trying to say that I might be the one who spread the rumor? How could you! Even though I was the one who befriended and defended you."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 20
+  type: conversation
+  name: Porsche
+  text: "Calm down! If you are innocent, which I think you are, people will figure it out and calm down as well!"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 21
+
+- id: 21
+  type: conversation
+  name: Porsche
+  text: "I have to go, see you later!"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 22
+
+- id: 22
+  type: conversation
+  name: Porsche
+  text: "I’ll try asking a classmate about this."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 23
+
+- id: 23
+  type: conversation
+  name: Porsche
+  text: "Hey sorry to bother but can you tell me what Porsche has been telling everyone these days?"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 24
+
+- id: 24
+  type: conversation
+  name: Porsche
+  text: "Uhhh I’m not sure but they keep saying stuff like how things keep disappearing right after you transferred here. But they did say it probably isn’t you though."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 25
+
+- id: 25
+  type: transition
+  goTo: 26
+
+- id: 26
+  type: story
+  text: "A few days later, the rumor has grown to the point if anyone says they lost something, people automatically look to you."
+  background: "bg-hallway.png"
+  goTo: 27
+
+- id: 27
+  type: story
+  text: "The situation finally breaks when someone openly accuses you of stealing their pencil case."
+  background: "bg-hallway.png"
+  goTo: 28
+
+- id: 28
+  type: conversation
+  name: Porsche
+  text: "Ok, things keep disappearing and everyone has been saying it’s you, and this time it’s my pencil case! Maybe you should just admit it already?"
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 29
+
+- id: 29
+  type: story
+  text: "Shocked at the confrontation, you refuse the accusations and calmly explain your side of the story."
+  background: "bg-hallway.png"
+  goTo: 30
+
+- id: 30
+  type: conversation
+  name: Porsche
+  text: "I understand everyone’s concern right now, but I really did not take anything from anyone."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 31
+
+- id: 31
+  type: conversation
+  name: Porsche
+  text: "I don’t know why and how the rumor started, but I think it’s because I’m new here."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 32
+
+- id: 32
+  type: conversation
+  name: Porsche
+  text: "It’s hurtful to think that some of you would believe that I would steal..."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 33
+
+- id: 33
+  type: story
+  text: "After listening to your words, somce classmates came out to defend you."
+  background: "bg-hallway.png"
+  goTo: 34
+
+- id: 34
+  type: story
+  text: "Your statements drew the rest of the class to question the validity of the rumors carefully and rethink how the thief rumor came to be."
+  background: "bg-hallway.png"
+  goTo: 35
+
+- id: 35
+  type: story
+  text: "While some choose to apologize for believing the rumors blindly, others turn away and act as if they haven't done anything wrong."
+  background: "bg-hallway.png"
+  goTo: 36
+
+- id: 36
+  type: conversation
+  name: Porsche
+  text: "After conferring with your classmates, you decided to speak with Porsche alone about the origin of the rumor."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 37
+
+- id: 37
+  type: conversation
+  name: Porsche
+  text: "The evidence pointed to them as the one who started it, yet they continue to deny it."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 38
+
+- id: 38
+  type: conversation
+  name: Porsche
+  text: "As much as you want Porsche to just admit it, you take a deep breath and choose to..."
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+  goTo: 39
+
+- id: 39
+  type: option
+  name: Porsche
+  option:
+  - text: "Break off the friendship with Porsche."
+    goTo: 40
+  - text: "Distance yourself from Porsche."
+    goTo: 43
+  sprite: "F_Porsche_normal.webm"
+  background: "bg-hallway.png"
+
+- id: 40
+  type: story
+  text: "After ending your friendship with Porsche, you move on with your life, staying away from the negativity."
+  background: "bg-hallway.png"
+  goTo: 41
+
+- id: 41
+  type: story
+  text: "You start talking to other classmates and meet people who share similar interests with you."
+  background: "bg-hallway.png"
+  goTo: 42
+
+- id: 42
+  type: story
+  text: "Realizing that life is full of new opportunities, you shouldn't be limited to only being around certain people in your life."
+  background: "bg-hallway.png"
+  goTo: end
+
+- id: 43
+  type: story
+  text: "You didn’t completely end the friendship with Porsche, as you still want to maintain a civil relationship with them as your first friend and schoolmate."
+  background: "bg-hallway.png"
+  goTo: 44
+
+- id: 44
+  type: story
+  text: "Maybe, after some time and reflection, they can change for the better and decide to come clean. "
+  background: "bg-hallway.png"
+  goTo: 45
+
+- id: 45
+  type: story
+  text: "But for now, you are determined to set clear boundaries to protect yourself, so situations like this don't happen again."
+  background: "bg-hallway.png"
+  goTo: end
diff --git a/src/pages/introductionPage.jsx b/src/pages/introductionPage.jsx
index 9b093f1..607a8ab 100644
--- a/src/pages/introductionPage.jsx
+++ b/src/pages/introductionPage.jsx
@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../css/global.css';
-import BlackButton from './components/customButton';
 import PlayVideo from './components/playVideo.jsx';
 import LoadingScene from './components/loadingScene.jsx';
 import IntroductionData from './components/introductionData.jsx';
@@ -11,7 +10,6 @@ import Character from './class/character.jsx';
 function IntroductionPage() {
     const navigate = useNavigate();
     const [loading, setLoading] = useState(true);
-    const [positionState, setPositionState] = useState("middle");
     const [isClickedIntroduction, setIsClickedIntroduction] = useState(false);
     const [numChar, setNumChar] = useState(1);
     const character = new Character();
@@ -31,12 +29,16 @@ function IntroductionPage() {
     const handleVideoReady = () => {
         setLoading(false);
     };
+    
+    const [lang] = useState(() => {
+        return sessionStorage.getItem("lang") || 'English';
+    });
 
     const handleClickedButton = () => {
         console.log(character.name(numChar))
-        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`);
+        if(character.name(numChar)=='Porsche') navigate(`/vs/Porsche/${lang}/0`);
+        if(character.name(numChar)=='Pie') navigate(`/vs/Pie/${lang}/0`);
+        if(character.name(numChar)=='Patt') navigate(`/vs/Pat/${lang}/0`);
     }
 
     return (