diff --git a/Frontend/Home.html b/Frontend/Home.html
index 0f148e2..561e8ed 100644
--- a/Frontend/Home.html
+++ b/Frontend/Home.html
@@ -7,7 +7,6 @@
 <body>
   <div id="navbar">
     <nav>
-        <img src="images/menu.png" class="menu-img">
         <img src="images/Logo.png" class="logo">
         <ul>
             <!-- <li><a href="">Start</a></li> -->
diff --git a/Frontend/php/upload.php b/Frontend/php/upload.php
new file mode 100644
index 0000000..480d32f
--- /dev/null
+++ b/Frontend/php/upload.php
@@ -0,0 +1,6 @@
+<?php
+  $file_name =  $_FILES['file']['name']; //getting file name
+  $tmp_name = $_FILES['file']['tmp_name']; //getting temp_name of file
+  $file_up_name = time().$file_name; //making file name dynamic by adding time before file name
+  move_uploaded_file($tmp_name, "uploads/".$file_up_name); //moving file to the specified folder with dynamic name
+?>
diff --git a/Frontend/upload-video.js b/Frontend/upload-video.js
new file mode 100644
index 0000000..e4a559c
--- /dev/null
+++ b/Frontend/upload-video.js
@@ -0,0 +1,84 @@
+const form = document.querySelector("form"),
+fileInput = document.querySelector(".file-input"),
+progressArea = document.querySelector(".progress-area"),
+uploadedArea = document.querySelector(".uploaded-area");
+
+
+// form click event
+form.addEventListener("click", () =>{
+  fileInput.click();
+});
+
+fileInput.onchange = ({target})=>{
+  let file = target.files[0]; //getting file [0] this means if user has selected multiple files then get first one only
+  if(file){
+    console.log(file);
+    let fileName = file.name; //getting file name
+    if(fileName.length >= 12){ //if file name length is greater than 12 then split it and add ...
+      let splitName = fileName.split('.');
+      fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
+    }
+    uploadFile(fileName);
+    
+    var reader = new FileReader();
+
+    reader.onload = function(e){
+      var src = e.target.result;
+      var video = document.getElementById("video");
+      var source = document.getElementById("source")
+
+      source.setAttribute("src", src);
+      video.load();
+    }
+
+    reader.readAsDataURL(file)
+  }
+  
+}
+
+// file upload function
+function uploadFile(name){
+  let xhr = new XMLHttpRequest(); //creating new xhr object (AJAX)
+  xhr.open("POST", "php/upload.php"); //sending post request to the specified URL
+  xhr.upload.addEventListener("progress", ({loaded, total}) =>{ //file uploading progress event
+    let fileLoaded = Math.floor((loaded / total) * 100);  //getting percentage of loaded file size
+    let fileTotal = Math.floor(total / 1000); //gettting total file size in KB from bytes
+    let fileSize;
+    // if file size is less than 1024 then add only KB else convert this KB into MB
+    (fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB";
+    let progressHTML = `<li class="row">
+                          <i class="fas fa-file-alt"></i>
+                          <div class="content">
+                            <div class="details">
+                              <span class="name">${name} • Uploading</span>
+                              <span class="percent">${fileLoaded}%</span>
+                            </div>
+                            <div class="progress-bar">
+                              <div class="progress" style="width: ${fileLoaded}%"></div>
+                            </div>
+                          </div>
+                        </li>`;
+    uploadedArea.innerHTML = ""; 
+    uploadedArea.classList.add("onprogress");
+    progressArea.innerHTML = progressHTML;
+    if(loaded == total){
+      progressArea.innerHTML = "";
+      let uploadedHTML = `<li class="row">
+                            <div class="content upload">
+                              <i class="fas fa-file-alt"></i>
+                              <div class="details">
+                                <span class="name">${name} • Uploaded</span>
+                                <span class="size">${fileSize}</span>
+                              </div>
+                            </div>
+                            <i class="fas fa-check"></i>
+                          </li>`;
+      uploadedArea.classList.remove("onprogress");
+      uploadedArea.innerHTML = uploadedHTML; 
+      document.getElementById("wrapper").style.visibility = "hidden";
+
+    }
+  });
+  let data = new FormData(form); //FormData is an object to easily send form data
+  xhr.send(data); //sending form data
+}
diff --git a/Frontend/video-editing.css b/Frontend/video-editing.css
index 5c8964c..3eba17b 100644
--- a/Frontend/video-editing.css
+++ b/Frontend/video-editing.css
@@ -1,3 +1,130 @@
+/* Import Google font - Poppins */
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background-color:#1d2026;
+}
+
+::selection{
+  color: #fff;
+  background: #1d2026;
+}
+#wrapper{
+  width: 50%;
+  background: #454c5a;
+  border-radius: 5px;
+  padding: 30px;
+  box-shadow: 7px 7px 12px rgba(0,0,0,0.05);
+  z-index: 9;
+ 
+}
+#wrapper header{
+  color: #adc3fa;
+  font-size: 27px;
+  font-weight: 600;
+  text-align: center;
+}
+#wrapper form{
+  height: 50%;
+  display: flex;
+  cursor: pointer;
+  margin: 30px 0;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  border-radius: 5px;
+  border: 2px dashed #adc3fa;
+}
+form :where(i, p){
+  color: #adc3fa;
+}
+form i{
+  font-size: 50px;
+}
+form p{
+  margin-top: 15px;
+  font-size: 16px;
+}
+
+section .row{
+  margin-bottom: 10px;
+  background: #E9F0FF;
+  list-style: none;
+  padding: 15px 20px;
+  border-radius: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+section .row i{
+  color: #7283a6;
+  font-size: 30px;
+}
+section .details span{
+  font-size: 14px;
+}
+.progress-area .row .content{
+  width: 100%;
+  margin-left: 15px;
+}
+.progress-area .details{
+  display: flex;
+  align-items: center;
+  margin-bottom: 7px;
+  justify-content: space-between;
+}
+.progress-area .content .progress-bar{
+  height: 6px;
+  width: 100%;
+  margin-bottom: 4px;
+  background: #fff;
+  border-radius: 30px;
+}
+.content .progress-bar .progress{
+  height: 100%;
+  width: 0%;
+  background: #7283a6;
+  border-radius: inherit;
+}
+.uploaded-area{
+  max-height: 232px;
+  overflow-y: scroll;
+}
+.uploaded-area.onprogress{
+  max-height: 150px;
+}
+.uploaded-area::-webkit-scrollbar{
+  width: 0px;
+}
+.uploaded-area .row .content{
+  display: flex;
+  align-items: center;
+}
+.uploaded-area .row .details{
+  display: flex;
+  margin-left: 15px;
+  flex-direction: column;
+}
+.uploaded-area .row .details .size{
+  color: #404040;
+  font-size: 11px;
+}
+.uploaded-area i.fa-check{
+  font-size: 16px;
+}
+
+
+
+
 #navbar {
   position: absolute;
   top: 0;
@@ -47,6 +174,7 @@ nav ul li a{
 
 
 #editor-container {
+  display: flex;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -65,6 +193,8 @@ nav ul li a{
   float: left;
   font-family: Arial, sans-serif;
   padding: 50px;
+  border: 2px white;
+  
 }
 
 .transcript-header {
@@ -91,7 +221,7 @@ nav ul li a{
 .transcript-controls button {
   padding: 10px 20px;
   font-size: 16px;
-  background-color: #4CAF50;
+  background-color: #00986f;
   color: #fff;
   border: none;
   border-radius: 5px;
@@ -99,7 +229,7 @@ nav ul li a{
 }
 
 .video-container {
-  width: 50%;
+  width: 70%;
   height: 100%;
   float: right;
   padding: 50px;
@@ -126,6 +256,6 @@ nav ul li a{
   width: 100%;
   height: 20%;
   margin-top: 20px;
-  background-color: grey;
+  background-color: #454c5a;
   border-radius: 5px;
 }
\ No newline at end of file
diff --git a/Frontend/video-editing.html b/Frontend/video-editing.html
index 80dec71..c732535 100644
--- a/Frontend/video-editing.html
+++ b/Frontend/video-editing.html
@@ -1,17 +1,28 @@
 <html>
   <head>
     <link rel="stylesheet" href="video-editing.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
   </head>
   <body>
     
-    
+    <div id="wrapper">
+      <header>Upload A Video File</header>
+      <form action="#">
+        <input class="file-input" type="file" name="file" hidden>
+        <i class="fas fa-cloud-upload-alt"></i>
+        <p>Browse File to Upload</p>
+      </form>
+      <section class="progress-area"></section>
+      <section class="uploaded-area"></section>
+    </div>
 
     <!-- Transcript Container -->
     <div id="editor-container">
+      
+      
 
       <div id="navbar">
         <nav>
-            <img src="images/menu.png" class="menu-img">
             <img src="images/Logo.png" class="logo">
             <ul>
                 <!-- <li><a href="">Start</a></li> -->
@@ -24,7 +35,7 @@
 
       <div class="transcript-container">
         <div class="transcript-header">
-          <p>Transcript Editor</p>
+          <p></p>
         </div>
 
         <!-- <textarea class="transcript-textarea"></textarea> Will not use text area for now 
@@ -43,18 +54,20 @@
 
       <!-- Video -->
       <div class="video-container">
-        <div class="video-header">
-          Video Editor
-        </div>
-        <video id="video" src="assets/video.mp4" controls></video>
+        <div class="video-feild">
+          
+        
+        <video id="video" controls>
+          <source id="source" type="video/mp4">
+        </video>
         <!-- <canvas class="video-canvas"></canvas>  We do not need a canvas for now -->
-      
+      </div>
 
         <!-- Timeline -->
         <div class="timeline">
           <div class="timeline-container">
             <div class="timeline-header">
-              Video Editor Timeline
+              Timeline
             </div>
             <div class="timeline"></div>
             <div class="timeline-controls">
@@ -68,6 +81,7 @@
       </div>
       </div>
 
+      <script src="upload-video.js"></script>
       <script src="video-editing.js"></script>
 
       </body>
