diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/Gita-Storyline/Arjuna/arjuna1.png b/Gita-Storyline/Arjuna/arjuna1.png
new file mode 100644
index 00000000..e001ddae
Binary files /dev/null and b/Gita-Storyline/Arjuna/arjuna1.png differ
diff --git a/Gita-Storyline/Arjuna/arjuna2.png b/Gita-Storyline/Arjuna/arjuna2.png
new file mode 100644
index 00000000..e915e6fc
Binary files /dev/null and b/Gita-Storyline/Arjuna/arjuna2.png differ
diff --git a/Gita-Storyline/Krishna/krishna1.png b/Gita-Storyline/Krishna/krishna1.png
new file mode 100644
index 00000000..71e6454b
Binary files /dev/null and b/Gita-Storyline/Krishna/krishna1.png differ
diff --git a/Gita-Storyline/Krishna/krishna2.png b/Gita-Storyline/Krishna/krishna2.png
new file mode 100644
index 00000000..1540bf07
Binary files /dev/null and b/Gita-Storyline/Krishna/krishna2.png differ
diff --git a/Gita-Storyline/conversation.png b/Gita-Storyline/conversation.png
new file mode 100644
index 00000000..0eca9581
Binary files /dev/null and b/Gita-Storyline/conversation.png differ
diff --git a/Gita-Storyline/left-1.png b/Gita-Storyline/left-1.png
new file mode 100644
index 00000000..b907a5f9
Binary files /dev/null and b/Gita-Storyline/left-1.png differ
diff --git a/Gita-Storyline/left.png b/Gita-Storyline/left.png
new file mode 100644
index 00000000..57837d06
Binary files /dev/null and b/Gita-Storyline/left.png differ
diff --git a/Gita-Storyline/right.png b/Gita-Storyline/right.png
new file mode 100644
index 00000000..267b0901
Binary files /dev/null and b/Gita-Storyline/right.png differ
diff --git a/Gita-Storyline/storyline.css b/Gita-Storyline/storyline.css
index 1d7b34ee..d9314658 100644
--- a/Gita-Storyline/storyline.css
+++ b/Gita-Storyline/storyline.css
@@ -1,6 +1,6 @@
-*{
+* {
     box-sizing: border-box;
-}
+  }
 body{
 margin: 0;
 padding: 0;
@@ -43,4 +43,76 @@ overflow-y: hidden;
         animation: animate 60s linear infinite;
         position: relative;
     }
-}
\ No newline at end of file
+}
+
+
+#left-arrow, #right-arrow {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    height: 30px;
+    width: 30px;
+}
+
+
+#left-arrow,
+#right-arrow {
+  position: absolute;
+  top: calc(50% + 16%);
+  transform: translateY(-50%);
+  height: 30px;
+  width: 30px;
+  cursor: pointer;
+}
+
+#left-arrow {
+  left: calc(20px + 10%);
+}
+
+#right-arrow {
+  right: calc(20px + 10%);
+}
+
+
+
+.image-container {
+    display: flex;
+    justify-content: center;
+    gap: 50px;
+    align-items: center;
+    height: 100vh;
+}
+
+
+#arjuna-image {
+
+    z-index: 2;
+    position: absolute;
+    top: calc(50% + 24%);
+    left: calc(50% - 20%);
+    transform: translateY(-50%);
+}
+
+
+#krishna-image {
+    z-index: 2;
+    position: absolute;
+    top: calc(50% + 19%);
+    left: calc(50% + 4%);
+    transform: translateY(-50%);
+}
+/* ... (existing CSS rules above) ... */
+
+/* Styles for the conversation boxes */
+.conversation-box {
+    position: absolute;
+    width: 200px;
+    height: 80px;
+    background-color: white;
+    border: 2px solid black;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 14px;
+    text-align: left;
+    z-index: 3;
+  }
diff --git a/Gita-Storyline/storyline.html b/Gita-Storyline/storyline.html
index 411ec39d..76a964c0 100644
--- a/Gita-Storyline/storyline.html
+++ b/Gita-Storyline/storyline.html
@@ -193,7 +193,22 @@
         </ul>
       </nav>
     </header>
+    
     <div class="milky-way"></div>
+  <div id="left-arrow">
+    <img src="left.png" alt="left-arrow">
+  </div>
+  <div id="right-arrow">
+    <img src="right.png" alt="right-arrow">
+  </div>
+
+<!-- <div class="conversation-box" id="arjuna-conversation"></div> -->
+<img id="arjuna-image" src="./Arjuna/arjuna1.png" alt="Arjuna" />
+<!-- <div class="conversation-box" id="krishna-conversation"></div> -->
+<img id="krishna-image" src="./Krishna/krishna1.png" alt="Krishna" />
+
+
+    
     <script>
       const hamburger = document.querySelector(".hamburger");
       const navLink = document.querySelector(".nav__link");
diff --git a/Gita-Storyline/storyline.js b/Gita-Storyline/storyline.js
index 8b137891..e13f5439 100644
--- a/Gita-Storyline/storyline.js
+++ b/Gita-Storyline/storyline.js
@@ -1 +1,40 @@
+const arjunaConversation = document.getElementById("arjuna-conversation");
+const krishnaConversation = document.getElementById("krishna-conversation");
 
+const arjunaQuestions = [
+  "Arjuna: Who is Krishna?",
+  "Arjuna: What is the purpose of life?",
+  "Arjuna: How can one attain enlightenment?",
+];
+
+const krishnaAnswers = [
+  "Krishna: I am the Supreme Personality of Godhead.",
+  "Krishna: The purpose of life is to attain self-realization and understand the eternal soul.",
+  "Krishna: By practicing meditation and devotional service, one can attain enlightenment.",
+];
+
+let arjunaIndex = 0;
+let krishnaIndex = 0;
+
+function updateConversationBoxes() {
+  arjunaConversation.innerText = arjunaQuestions[arjunaIndex];
+  krishnaConversation.innerText = krishnaAnswers[krishnaIndex];
+}
+
+function handleKeyPress(event) {
+  if (event.key === "ArrowRight") {
+    arjunaIndex = (arjunaIndex + 1) % arjunaQuestions.length;
+    krishnaIndex = (krishnaIndex + 1) % krishnaAnswers.length;
+    updateConversationBoxes();
+  } else if (event.key === "ArrowLeft") {
+    arjunaIndex = (arjunaIndex - 1 + arjunaQuestions.length) % arjunaQuestions.length;
+    krishnaIndex = (krishnaIndex - 1 + krishnaAnswers.length) % krishnaAnswers.length;
+    updateConversationBoxes();
+  }
+}
+
+// Attach event listener for keypress
+document.addEventListener("keydown", handleKeyPress);
+
+// Initial update of conversation boxes
+updateConversationBoxes();