diff --git a/Frontend/templates/Frontend/video-editing.html b/Frontend/templates/Frontend/video-editing.html
index 965b141..3e743f6 100644
--- a/Frontend/templates/Frontend/video-editing.html
+++ b/Frontend/templates/Frontend/video-editing.html
@@ -45,6 +45,9 @@
       </div>
 
       <div class="transcript-container">
+          <div class="transcript-controls">
+              <button id="save-transcript-button", onclick="editMode()">Edit</button>
+          </div>
         <div class="transcript-header">
           <p></p>
         </div>
@@ -54,10 +57,7 @@
         <!-- Transcript -->
       <div id = "transcript">
           
-        </div>
-        <div class="transcript-controls">
-          <button id="save-transcript-button">Save</button>
-        </div>
+        </div> 
       </div>
 
       <!-- Video -->
@@ -88,7 +88,8 @@
       </div>
       </div>
       <script src="{% static 'js/upload-video.js' %}"></script>
-      <script src="{% static 'js/video-editing.js' %}"></script>
+      <script src="{% static 'js/transcript-generation.js' %}"></script>
+      <script src="{% static 'js/transcript-editing.js' %}"></script>
       
       
 
diff --git a/static/css/video-editing.css b/static/css/video-editing.css
index be7b903..287c4c5 100644
--- a/static/css/video-editing.css
+++ b/static/css/video-editing.css
@@ -225,14 +225,40 @@ nav ul li a{
   padding: 50px;
   border: 2px white;
   overflow: scroll;
-  
 }
-
 .transcript-container::-webkit-scrollbar{
   display: none;
 }
+.transcript-container-editing {
+  width: 30%;
+  height: 70%;
+  float: left;
+  font-family: Arial, sans-serif;
+  padding: 50px;
+  border: 2px white;
+  overflow: scroll;
+  background: #404040;
+}
+.transcript-container-editing::-webkit-scrollbar{
+  display: none;
+}
+
+#transcript-editing {}
+
+#transcript-editing p{
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
 
-.transcript-header {
+#transcript-editing span::selection{
+    background-color:#00d199;
+}
+
+
+#transcript-editing span{}
+
+#transcript-header {
   font-size: 24px;
   font-weight: bold;
   margin-bottom: 20px;
@@ -248,7 +274,7 @@ nav ul li a{
   transition: 0.32s;
 }
 
-#transcript span:hover{
+#transcript span:hover {
   color: #00d199;
   font-size: 28px;
 }
@@ -308,4 +334,4 @@ nav ul li a{
   margin-top: 20px;
   background-color: #454c5a;
   border-radius: 5px;
-}
\ No newline at end of file
+}
diff --git a/static/js/video-editing.js b/static/js/video-editing.js
deleted file mode 100644
index 694f754..0000000
--- a/static/js/video-editing.js
+++ /dev/null
@@ -1,96 +0,0 @@
-console.log("start of video-editing.js");
-
-
-let transcriptArea = document.getElementById("transcript");
-let transcriptHTML = ` `;
-
-function load(){
-fetch('/static/assets/output.json')
-  .then(response => response.json())
-  .then(data => {
-    console.log("Data from output.json");
-    // console.log(data);
-    // Use the data object here
-    processData(data);
-  });
-}
-
-function processData(data) {
-
-    line = '';
-    paragraph = `<p>`;
-    console.log(data["timestamps"]);
-    data = data["timestamps"];
-
-    for (i = 0; i < data.length; i++) {
-        // iterates through each line of transcript
-        for (j=0; j<data[i]["words"].length; j++) { 
-            //iterates through each word of each line of transcript
-
-            words = data[i]["words"][j];
-            // `words` represents the data for each word such as text, start and end time 
-            word = words["text"];
-            
-            if (line.length + word.length > 38) {
-                // checks if the line is longer than 38 characters and if so it creates a new paragraph (goes to next line)
-                console.log(i + " " + line + ", " + word);
-                paragraph += `</p>`;
-                transcriptHTML += paragraph;
-                //ends the paragraph
-                
-                //new paragraph
-                paragraph = '<p>';
-                line = word;
-                paragraph += `<span data-time=${words['start']}> ${word}</span>`;
-
-            } else {
-                line += ` ${word}`;
-                paragraph += `<span data-time=${words['start']}> ${word}</span>`;
-            }
-
-            if (j == data[i]["words"].length-1 && i == data.length-1){
-                // checks if the last word has been reached
-                paragraph += `</p>`;
-                transcriptHTML += paragraph;
-            }
-
-            
-        }
-    }
-
-    // transcriptHTML += `<p data-time="${words['end']}">${line.trim()}</p>`;
-    console.log("*********************** The Transcript HTML ****************************");
-
-    transcriptArea.innerHTML = transcriptHTML;
-
-    console.log(transcriptArea);
-
-    // Add event listeners to the lines
-    var words = transcriptArea.getElementsByTagName("span");
-    for (var i = 0; i < words.length; i++) {
-        var word = words[i];
-        var time = word.getAttribute("data-time");
-
-        word.addEventListener("click", (function(time) {
-            return function() {
-                var video = document.getElementById("video");
-
-                // Set the video's current time to the time attribute
-                video.currentTime = time;
-                video.play();
-            }
-        })(time));
-    }
-}
-
-document.getElementById("play-button").addEventListener("click", function() {
-// Code to play the video goes here
-});
-
-document.getElementById("pause-button").addEventListener("click", function() {
-// Code to pause the video goes here
-});
-
-document.getElementById("stop-button").addEventListener("click", function() {
-// Code to stop the video goes here
-});