diff --git a/package-lock.json b/package-lock.json
index da401a5..1cbca5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1765,16 +1765,6 @@
           "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
           "dev": true
         },
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
         "cacache": {
           "version": "13.0.1",
           "resolved": "https://registry.npmjs.org/cacache/-/cacache-13.0.1.tgz",
@@ -1801,53 +1791,6 @@
             "unique-filename": "^1.1.1"
           }
         },
-        "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1864,16 +1807,6 @@
             "minipass": "^3.1.1"
           }
         },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        },
         "terser-webpack-plugin": {
           "version": "2.3.8",
           "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@@ -1890,18 +1823,6 @@
             "terser": "^4.6.12",
             "webpack-sources": "^1.4.3"
           }
-        },
-        "vue-loader-v16": {
-          "version": "npm:vue-loader@16.1.2",
-          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.1.2.tgz",
-          "integrity": "sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^4.1.0",
-            "hash-sum": "^2.0.0",
-            "loader-utils": "^2.0.0"
-          }
         }
       }
     },
@@ -11398,6 +11319,87 @@
         }
       }
     },
+    "vue-loader-v16": {
+      "version": "npm:vue-loader@16.8.3",
+      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.8.3.tgz",
+      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "chalk": "^4.1.0",
+        "hash-sum": "^2.0.0",
+        "loader-utils": "^2.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true,
+          "optional": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz",
+          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "vue-router": {
       "version": "3.4.9",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz",
diff --git a/src/components/Video.vue b/src/components/Video.vue
deleted file mode 100644
index a8ced9a..0000000
--- a/src/components/Video.vue
+++ /dev/null
@@ -1,187 +0,0 @@
-<template>
-    <div class="wholePage">
-        
-        <div class="row">
-    <div class="col-sm-5 center-middle">
-        <div class="card" style="background-color: #404e5b;">
-          <h5 class="card-header" style="background-color: #1e2934">Video Information</h5>
-            <div class="card-body">
-                <h2 class="card-title video-title">{{vInfo.title}}</h2>
-                <p class="card-text">{{vInfo.description}}</p>
-                <h3 v-if="vInfo.transcoding">Transcoding Progress: {{vInfo.eta}}</h3>
-                <div class="progress" v-if="vInfo.transcoding">
-                    <div class="progress-bar" role="progressbar" style="width: 25%" v-bind:style="'width: '+ vInfo.progress + '%'" v-bind:aria-valuenow="vInfo.progress" aria-valuemin="0" aria-valuemax="100"></div>
-                </div>
-                <br>
-                <form v-on:submit.prevent="like">
-                <button href="#" class="btn btn-primary" style="width: 100%">Like - {{vInfo.likes}}</button>
-                </form>
-            </div>
-        </div>
-        <br>
-        <div class="card" style="background-color: #404e5b;">
-          <h5 class="card-header" style="background-color: #1e2934">Recent Videos</h5>
-            <div class="card-body">
-                <center><span v-for="post in posts" :key="post._id" style="margin-right: 15px;"><a v-bind:href="'/video?id='+ post._id"><img v-bind:src="uri + '/thumbnails/'+post._id" width="150px" style="margin-top: 15px;"></a></span></center>
-            </div>
-        </div>
-    </div>
-    <div class="col-sm-7 center-middle">
-      <br>
-        <div class="video">
-          
-            <center>
-              <div class="card" style="background-color: #404e5b; width: 75%;">
-                <h5 class="card-header" style="background-color: #1e2934">Video</h5>
-              <img v-if="vInfo.transcoding" v-bind:src="uri+'/thumbnails/'+ vInfo._id" class="unloaded-thumbnail">
-              
-       <video
-          v-if="!vInfo.transcoding"
-          id="my-video"
-          class="video-js vjs-theme-forest"
-          controls
-          fluid="true"
-          v-bind:poster="uri +'/thumbnails/' + id"
-          data-setup="{}"
-          preload="metadata">
-          <source v-bind:src="uri +'/video2/' + id" type="video/mp4" />
-          <p class="video-js vjs-theme-forest">
-            To view this video please enable JavaScript, and consider upgrading to a
-            web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
-          </p>
-        </video>
-              </div>
-  </center>
-        </div>
-    </div>
-  </div>
-<br>
-<div class="card" style="background-color: #404e5b;">
-    <h5 class="card-header" style="background-color: #1e2934">Comments</h5>
-    <div class="card-body">
-        <div class="media pt-3" v-for="com in vInfo.comments" :key="com">
-          <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
-            {{com}}
-          </p>
-        </div>
-        <br>
-        <div class="form-group">
-        <label for="exampleFormControlTextarea1"><h5>Create New</h5></label>
-        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" style="color: white; background-color: #505f6d; border: none;" v-model="comment"></textarea>
-        <br>
-        <button  class="upload-button btn btn-primary" @click="submitComment">Post</button>
-      </div>
-      </div>
-    </div>
-    </div>
-</template>
-
-<style scoped>
-@import 'https://unpkg.com/video.js@7/dist/video-js.min.css';
-@import 'https://unpkg.com/@videojs/themes@1/dist/forest/index.css';
-
-.user_name{
-    font-size:14px;
-    font-weight: bold;
-}
-.comments-list .media{
-    border-bottom: 1px dotted #ccc;
-}
-.wholePage{
-    margin-left: 25px;
-    margin-right: 25px;
-    margin-top: 50px;
-    
-}
-.center-middle{
-    margin-top: auto;
-    margin-bottom: auto;
-}
-.video-title{
-    font-weight: bold;
-}
-video {
-  width: 100%;
-  max-width: 100% !important;
-  height: auto;
-}
-.unloaded-thumbnail{
-  max-height: 50vh;
-  width: auto;
-}
-</style>
-
-<script>
-  // Similarly, you can also introduce the plugin resource pack you want to use within the component
-  // import 'some-videojs-plugin'
-  export default {
-    data() {
-      return {
-          posts: [],
-          vInfo: {},
-          id: "",
-          comment: "",
-          uri: "",
-        playerOptions: {
-          // videojs options
-         
-          language: 'en',
-          playbackRates: [0.7, 1.0, 1.5, 2],
-          width: '100%',
-          height: '100%',
-          sources: [{
-            type: "video/mp4",
-            src: this.$apiIp + "/video2/" + this.$route.query.id,
-          }],
-          poster: this.$apiIp + "/thumbnails/" + this.$route.query.id,
-        }
-      }
-    },
-    created() {
-        this.uri = this.$apiIp;
-        this.vInfo.transcoding = true;
-        this.getVideoInfo();
-        this.getAllPosts();
-        this.id = this.$route.query.id;
-    },
-    
-    methods: {
-      getVideoInfo(){
-          this.axios.get(this.$apiIp + "/posts/vinfo/" + this.$route.query.id).then((res) =>{
-              this.vInfo = res.data;
-              if(this.vInfo.transcoding){
-                this.sleep(3000);
-                console.log(this.$router.name);
-                if(this.$route.name == 'video'){
-                  this.getVideoInfo();
-                }
-              }
-          })
-      },
-      sleep(ms) {
-        return new Promise((resolve) => {
-        setTimeout(resolve, ms);
-      });
-    },
-    getAllPosts(){
-          this.axios.get(this.$apiIp + "/posts/").then((res) =>{
-              this.posts = res.data.reverse().slice(0, 4);
-          })
-      },
-      like(){
-          this.axios.get(this.$apiIp + "/posts/like/" + this.$route.query.id).then((res) =>{
-              this.vInfo = res.data;
-          })
-      },
-      submitComment(){
-        let msg = {};
-        msg.comment = this.comment;
-        this.axios.post(this.$apiIp + "/posts/postComment/" + this.$route.query.id, msg).then((res) =>{
-              this.vInfo = res.data;
-          })
-      }
-    }
-    
-    
-  }
-</script>
\ No newline at end of file
diff --git a/src/components/VideoList.vue b/src/components/VideoList.vue
new file mode 100644
index 0000000..1d593bb
--- /dev/null
+++ b/src/components/VideoList.vue
@@ -0,0 +1,64 @@
+<script setup>
+export default {
+  components: {},
+  data() {
+    return {
+      posts: [],
+      uri: "",
+    };
+  },
+  created() {
+    this.uri = this.$apiIp;
+    // If there is a query, call the query function
+    if (!this.$route.query.q)
+      this.getAllPosts();
+    else
+      this.getQueryPosts();
+  },
+  methods: {
+    // Get the data for all videos
+    getAllPosts() {
+      this.axios.get(this.$apiIp + "/posts/").then((res) => {
+        this.posts = res.data;
+        this.posts.map(post => {
+          if(post.description.length > 100){
+            post.description = post.description.substring(0, 100);
+          }
+          return post;
+        })
+      });
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div class="card vid-card" v-for="post in posts" :key="post._id" style="">
+      <h5 class="card-header" style="background-color: #1e2934">
+        {{ post.title }}
+      </h5>
+      <img
+          class="card-img-top"
+          v-bind:src="uri + '/thumbnails/' + post._id"
+          alt="Video Thumbnail"/>
+      <div class="card-body" style="background-color: #404e5b">
+        <p class="card-text">{{ post.description }}</p>
+        <b-link v-bind:to="'/video?id=' + post._id" class="btn btn-lg btn-primary">Watch</b-link>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vid-card{
+  width: 18rem;
+  height: 27rem;
+  color: white;
+  margin-left: 25px;
+  margin-bottom: 25px;
+  margin-top: 25px;
+  border: none;
+  display: inline-flex;
+}
+</style>
diff --git a/src/components/video/Comments.vue b/src/components/video/Comments.vue
new file mode 100644
index 0000000..be66378
--- /dev/null
+++ b/src/components/video/Comments.vue
@@ -0,0 +1,47 @@
+<script>
+export default {
+  props: {
+    vInfo: {
+      type: Object,
+      required: true
+    },
+  },
+  methods: {
+    submitComment(){
+      let msg = {};
+      msg.comment = this.comment;
+      this.axios.post(this.$apiIp + "/posts/postComment/" + this.$route.query.id, msg).then((res) =>{
+        this.vInfo = res.data;
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="card" style="background-color: #404e5b;">
+    <h5 class="card-header" style="background-color: #1e2934">Comments</h5>
+    <div class="card-body">
+      <div class="media pt-3" v-for="com in vInfo.comments" :key="com">
+        <p class="media-body pb-3 mb-0 small lh-125 border-bottom border-gray">
+          {{com}}
+        </p>
+      </div>
+      <br>
+      <div class="form-group">
+        <label for="exampleFormControlTextarea1">
+          <h5>Create New</h5>
+        </label>
+        <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" style="color: white; background-color: #505f6d; border: none;" v-model="comment"></textarea>
+        <br>
+        <button  class="upload-button btn btn-primary" @click="submitComment">Post</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.media{
+  border-bottom: 1px dotted #ccc;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/video/RecentVideoList.vue b/src/components/video/RecentVideoList.vue
new file mode 100644
index 0000000..54c26e8
--- /dev/null
+++ b/src/components/video/RecentVideoList.vue
@@ -0,0 +1,23 @@
+<script>
+export default {
+  props: {
+    posts: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="card" style="background-color: #404e5b;">
+    <h5 class="card-header" style="background-color: #1e2934">Recent Videos</h5>
+    <div class="card-body">
+      <center><span v-for="post in posts" :key="post._id" style="margin-right: 15px;"><a v-bind:href="'/video?id='+ post._id"><img v-bind:src="uri + '/thumbnails/'+post._id" width="150px" style="margin-top: 15px;"></a></span></center>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/video/VideoInfo.vue b/src/components/video/VideoInfo.vue
new file mode 100644
index 0000000..bfe2957
--- /dev/null
+++ b/src/components/video/VideoInfo.vue
@@ -0,0 +1,43 @@
+<script>
+export default {
+  props: {
+    vInfo: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    like(){
+      this.axios.get(this.$apiIp + "/posts/like/" + this.$route.query.id).then((res) =>{
+        this.vInfo = res.data;
+      })
+    },
+  }
+}
+</script>
+
+<template>
+  <div class="card" style="background-color: #404e5b;">
+    <h5 class="card-header" style="background-color: #1e2934">Video Information</h5>
+    <div class="card-body">
+      <h2 class="card-title video-title">{{vInfo.title}}</h2>
+      <p class="card-text">{{vInfo.description}}</p>
+      <h3 v-if="vInfo.transcoding">Transcoding Progress: {{vInfo.eta}}</h3>
+      <div class="progress" v-if="vInfo.transcoding">
+        <div class="progress-bar" role="progressbar" style="width: 25%" v-bind:style="'width: '+ vInfo.progress + '%'" v-bind:aria-valuenow="vInfo.progress" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+      <br>
+      <form v-on:submit.prevent="like">
+        <button href="#" class="btn btn-primary" style="width: 100%">Like - {{vInfo.likes}}</button>
+      </form>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.video-title{
+  font-weight: bold;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/src/components/video/VideoP.vue b/src/components/video/VideoP.vue
new file mode 100644
index 0000000..49f288c
--- /dev/null
+++ b/src/components/video/VideoP.vue
@@ -0,0 +1,53 @@
+<script>
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    vInfo: {
+      type: Object,
+      required: true
+    },
+    uri: {
+      type: String,
+      required: true
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="video">
+    <center>
+      <div class="card" style="background-color: #404e5b; width: 75%;">
+        <h5 class="card-header" style="background-color: #1e2934">Video</h5>
+        <img v-if="vInfo.transcoding" v-bind:src="uri+'/thumbnails/'+ vInfo._id" class="unloaded-thumbnail">
+
+        <video
+            v-if="!vInfo.transcoding"
+            id="my-video"
+            class="video-js vjs-theme-forest"
+            controls
+            fluid="true"
+            v-bind:poster="uri +'/thumbnails/' + id"
+            data-setup="{}"
+            preload="metadata">
+          <source v-bind:src="uri +'/video2/' + id" type="video/mp4" />
+          <p class="video-js vjs-theme-forest">
+            To view this video please enable JavaScript, and consider upgrading to a
+            web browser that <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
+          </p>
+        </video>
+      </div>
+    </center>
+  </div>
+</template>
+
+<style scoped>
+.unloaded-thumbnail{
+  max-height: 50vh;
+  width: auto;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 69782fb..911d82e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -14,9 +14,9 @@ Vue.use(BootstrapVue);
 
 Vue.config.productionTip = false;
 
-import Video from './components/Video.vue';
-import Upload from './components/Upload.vue';
-import Home from './components/Home.vue';
+import Video from './pages/Video.vue';
+import Upload from './pages/Upload.vue';
+import Home from './pages/Home.vue';
 import VueVideoPlayer from 'vue-video-player'
 Vue.use(VueVideoPlayer);
 
diff --git a/src/components/Home.vue b/src/pages/Home.vue
similarity index 64%
rename from src/components/Home.vue
rename to src/pages/Home.vue
index 6167e7d..2f4bf18 100644
--- a/src/components/Home.vue
+++ b/src/pages/Home.vue
@@ -1,25 +1,15 @@
 <template>
   <div style="margin-top: 25px; text-align: center">
     <div v-if="!posts.length" style="text-align: center">No videos found!</div>
-
-    <div class="card vid-card" v-for="post in posts" :key="post._id" style="">
-      <h5 class="card-header" style="background-color: #1e2934">
-        {{ post.title }}
-      </h5>
-      <img
-        class="card-img-top"
-        v-bind:src="uri + '/thumbnails/' + post._id"
-        alt="Video Thumbnail"/>
-      <div class="card-body" style="background-color: #404e5b">
-        <p class="card-text">{{ post.description }}</p>
-        <b-link v-bind:to="'/video?id=' + post._id" class="btn btn-lg btn-primary">Watch</b-link>
-      </div>
-    </div>
+    <video-list />
   </div>
 </template>
 
 <script>
+import VideoList from "@/components/VideoList.vue";
+
 export default {
+  components: {VideoList},
   data() {
     return {
       posts: [],
@@ -66,14 +56,5 @@ export default {
 </script>
 
 <style scoped>
-.vid-card{
-  width: 18rem;
-  height: 27rem;
-  color: white;
-  margin-left: 25px;
-  margin-bottom: 25px;
-  margin-top: 25px;
-  border: none;
-  display: inline-flex;
-}
+
 </style>
\ No newline at end of file
diff --git a/src/components/Upload.vue b/src/pages/Upload.vue
similarity index 100%
rename from src/components/Upload.vue
rename to src/pages/Upload.vue
diff --git a/src/pages/Video.vue b/src/pages/Video.vue
new file mode 100644
index 0000000..e735148
--- /dev/null
+++ b/src/pages/Video.vue
@@ -0,0 +1,109 @@
+<template>
+    <div class="wholePage">
+      <div class="row">
+        <div class="col-sm-5 center-middle">
+          <video-info v-info="vInfo" />
+          <br>
+          <recent-video-list posts="posts" />
+        </div>
+        <div class="col-sm-7 center-middle">
+          <br>
+          <video-p id="id" v-info="vInfo" uri="uri" />
+        </div>
+      </div>
+      <br>
+      <comments v-info="vInfo" />
+    </div>
+</template>
+
+<style scoped>
+@import 'https://unpkg.com/video.js@7/dist/video-js.min.css';
+@import 'https://unpkg.com/@videojs/themes@1/dist/forest/index.css';
+
+.comments-list .media{
+    border-bottom: 1px dotted #ccc;
+}
+.wholePage{
+    margin-left: 25px;
+    margin-right: 25px;
+    margin-top: 50px;
+    
+}
+.center-middle{
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+video {
+  width: 100%;
+  max-width: 100% !important;
+  height: auto;
+}
+
+.user_name{
+  font-size:14px;
+  font-weight: bold;
+}
+</style>
+
+<script>
+  import VideoInfo from "@/components/video/VideoInfo.vue";
+  import Comments from "@/components/video/Comments.vue"
+  import RecentVideoList from "@/components/video/RecentVideoList.vue";
+  import VideoP from "@/components/video/VideoP.vue"
+
+  export default {
+    components: {RecentVideoList, VideoInfo, Comments, VideoP},
+    data() {
+      return {
+          posts: [],
+          vInfo: {},
+          id: "",
+          comment: "",
+          uri: "",
+        playerOptions: {
+          language: 'en',
+          playbackRates: [0.7, 1.0, 1.5, 2],
+          width: '100%',
+          height: '100%',
+          sources: [{
+            type: "video/mp4",
+            src: this.$apiIp + "/video2/" + this.$route.query.id,
+          }],
+          poster: this.$apiIp + "/thumbnails/" + this.$route.query.id,
+        }
+      }
+    },
+    created() {
+        this.uri = this.$apiIp;
+        this.vInfo.transcoding = true;
+        this.getVideoInfo();
+        this.getAllPosts();
+        this.id = this.$route.query.id;
+    },
+    methods: {
+      getVideoInfo(){
+          this.axios.get(this.$apiIp + "/posts/vinfo/" + this.$route.query.id).then((res) =>{
+              this.vInfo = res.data;
+              if(this.vInfo.transcoding){
+                this.sleep(3000);
+                console.log(this.$router.name);
+                if(this.$route.name == 'video'){
+                  this.getVideoInfo();
+                }
+              }
+          })
+      },
+      sleep(ms) {
+        return new Promise((resolve) => {
+          setTimeout(resolve, ms);
+        });
+      },
+      getAllPosts(){
+        this.axios.get(this.$apiIp + "/posts/").then((res) =>{
+          this.posts = res.data.reverse().slice(0, 4);
+        })
+      },
+    }
+  }
+</script>
\ No newline at end of file