diff --git a/crawlerx_app/package.json b/crawlerx_app/package.json
index f960bce..d6bdfdc 100644
--- a/crawlerx_app/package.json
+++ b/crawlerx_app/package.json
@@ -20,6 +20,7 @@
     "sass-loader": "^8.0.2",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.1",
+    "vue-json-pretty": "1.6.7",
     "vue-material": "^1.0.0-beta-13",
     "vue-router": "^3.1.6",
     "vue-swal": "^1.0.0"
diff --git a/crawlerx_app/src/components/Contents/JobData.vue b/crawlerx_app/src/components/Contents/JobData.vue
index 30a9b05..ecfae9e 100755
--- a/crawlerx_app/src/components/Contents/JobData.vue
+++ b/crawlerx_app/src/components/Contents/JobData.vue
@@ -1,101 +1,292 @@
 <template>
-    <b-container fluid>
-        <b-row>
-            <b-col cols="12" class="mt-5">
-                <h5><b>Job Id:</b> {{this.$route.params.jobId}}</h5>
-                <b-button variant="outline-info" style="float: right; margin-top:-40px;"
-                          @click="getCurrentJobData">
-                    <b-icon icon="arrow-repeat" font-scale="1"></b-icon>
-                    Refresh
-                </b-button>
-            </b-col>
-        </b-row>
-        <b-row>
-            <b-col cols="12" class="mt-3">
-                <b-table striped hover :bordered="bordered" :borderless="borderless" :head-variant="headVariant" :items="jobData"></b-table>
-            </b-col>
-        </b-row>
-        <b-row>
-            <b-col cols="12" class="mt-3">
-                <h5><b>Crawled Data:</b></h5>
-                <pre style="min-height: 300px; max-height: 60vh; overflow-y: scroll;"><code>{{ crawledData }}</code></pre>
-            </b-col>
-        </b-row>
-    </b-container>
+  <b-container fluid>
+    <b-row>
+      <b-col cols="12" class="mt-5">
+        <h5>
+          <b>Job Id:</b>
+          {{this.$route.params.jobId}}
+        </h5>
+        <b-button
+          variant="outline-info"
+          style="float: right; margin-top:-40px;"
+          @click="getCurrentJobData"
+        >
+          <b-icon icon="arrow-repeat" font-scale="1"></b-icon>Refresh
+        </b-button>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col cols="12" class="mt-3">
+        <b-table
+          striped
+          hover
+          :bordered="bordered"
+          :borderless="borderless"
+          :head-variant="headVariant"
+          :items="jobData"
+        ></b-table>
+      </b-col>
+    </b-row>
+    <b-row>
+      <b-col cols="12" class="mt-3">
+        <h5>
+          <b>Crawled Data:</b>
+        </h5>
+
+        <div style=" position:absolute; top:0; right:10vh;">
+          <b-button
+            class="copybutton"
+            variant="success"
+            type="button"
+            @click="doCopy"
+          >Copy Selected Data only</b-button>
+          <b-button
+            class="copybutton"
+            variant="danger"
+            type="button"
+            v-clipboard:copy="crawledData"
+            v-clipboard:success="clipboardSuccessHandler"
+            v-clipboard:error="clipboardErrorHandler"
+          >Copy All</b-button>
+        </div>
+
+        <div class="window" style="min-height: 300px; max-height: 80vh; overflow-y: scroll;">
+          <div v-if="loading" style=" text-align: center;  padding: 80px 0;">Loading...</div>
+          <div v-else>
+            <vue-json-pretty
+              :path="path"
+              :data="crawledDataJson"
+              :show-double-quotes="showDoubleQuotes"
+              :highlight-mouseover-node="highlightMouseoverNode"
+              :highlight-selected-node="highlightSelectedNode"
+              :show-length="showLength"
+              :show-line="showLine"
+              :select-on-click-node="selectOnClickNode"
+              :collapsed-on-click-brackets="collapsedOnClickBrackets"
+              :selectable-type="selectableType"
+              :show-select-controller="showSelectController"
+              :path-selectable="((path, data) => typeof data !== 'number')"
+              @click="handleClick(...arguments, 'complexTree')"
+            />
+          </div>
+        </div>
+
+        <!-- <pre style="min-height: 300px; max-height: 60vh; overflow-y: scroll;"><code>{{ crawledData }}</code></pre> -->
+      </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
-    export default {
-        name: 'JobData',
-        data() {
-            return {
-                borderless: false,
-                headVariant: 'dark',
-                bordered: true,
-                jobData: [],
-                taskId: null,
-                jobStatus: null,
-                crawledData: null
+import VueJsonPretty from "vue-json-pretty";
+import "vue-json-pretty/lib/styles.css";
+import Vue from "vue";
+export default {
+  name: "JobData",
+  components: {
+    VueJsonPretty,
+  },
+  data() {
+    return {
+      borderless: false,
+      headVariant: "dark",
+      bordered: true,
+      jobData: [],
+      taskId: null,
+      jobStatus: null,
+      crawledData: null,
+      crawledDataJson: null,
+      path: "this.crawledDataJson[0][0]",
+      selectableType: "multiple",
+      showSelectController: true,
+      showLength: true,
+      showLine: true,
+      showDoubleQuotes: true,
+      highlightMouseoverNode: true,
+      highlightSelectedNode: true,
+      selectOnClickNode: true,
+      collapsedOnClickBrackets: true,
+      useCustomLinkFormatter: false,
+      itemData: {},
+      itemPath: "",
+      copyData: "",
+      loading: true,
+    };
+  },
+  mounted() {
+    this.getCurrentJobData();
+  },
+
+  methods: {
+    getCurrentJobData: function () {
+      this.$http
+        .post(
+          "http://localhost:8000/api/job",
+          JSON.stringify({
+            user_id: this.$USER_ID,
+            unique_id: this.$route.params.jobId,
+          }),
+          { headers: { "Content-Type": "application/x-www-form-urlencoded" } }
+        )
+        .then((response) => {
+          var project = [];
+          var objectTaskId = null;
+          var objectTaskStatus = null;
+          response.data.data.forEach(function (obj) {
+            objectTaskId = obj.task_id;
+            if (
+              objectTaskId === undefined ||
+              objectTaskId == null ||
+              objectTaskId === ""
+            ) {
+              objectTaskId = "STILL_PROCESSING";
             }
-        }, mounted() {
-            this.getCurrentJobData();
-        }, methods: {
-            getCurrentJobData: function () {
-                this.$http.post('http://localhost:8000/api/job',
-                    JSON.stringify({'user_id': this.$USER_ID, 'unique_id': this.$route.params.jobId}),
-                    {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
-                    .then(response => {
-                        var project = [];
-                        var objectTaskId = null;
-                        var objectTaskStatus = null;
-                        response.data.data.forEach(function(obj) {
-                            objectTaskId = obj.task_id;
-                            if (objectTaskId === undefined || objectTaskId == null || objectTaskId === '') {
-                                objectTaskId = "STILL_PROCESSING";
-                            }
-                            project.push({project_name: obj.project_name, job_name:obj.job_name, task_id: objectTaskId, URL: obj.url,
-                                crawler_type: obj.crawler_name, status: obj.status});
-                            objectTaskStatus = obj.status;
-                        });
-                        this.taskId = objectTaskId;
-                        this.jobStatus = objectTaskStatus;
+            project.push({
+              project_name: obj.project_name,
+              job_name: obj.job_name,
+              task_id: objectTaskId,
+              URL: obj.url,
+              crawler_type: obj.crawler_name,
+              status: obj.status,
+            });
+            objectTaskStatus = obj.status;
+          });
+          this.taskId = objectTaskId;
+          this.jobStatus = objectTaskStatus;
 
-                        if (this.taskId !== null && this.jobStatus === 'COMPLETED') {
-                            this.$http.post('http://localhost:8000/api/job/crawldata',
-                                JSON.stringify({'user_id': this.$USER_ID, 'unique_id': this.$route.params.jobId, 'task_id': this.taskId}),
-                                {headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
-                                .then(response => {
-                                    this.crawledData = JSON.stringify({ 'data' : response.data.data[0].data }, undefined, 4);
-                                })
-                                .catch(e => {
-                                    alert(e.getError().toString())
-                                });
-                        }
+          if (this.taskId !== null && this.jobStatus === "COMPLETED") {
+            this.$http
+              .post(
+                "http://localhost:8000/api/job/crawldata",
+                JSON.stringify({
+                  user_id: this.$USER_ID,
+                  unique_id: this.$route.params.jobId,
+                  task_id: this.taskId,
+                }),
+                {
+                  headers: {
+                    "Content-Type": "application/x-www-form-urlencoded",
+                  },
+                }
+              )
+              .then((response) => {
+                this.crawledData = JSON.stringify(
+                  { data: response.data.data[0].data },
+                  undefined,
+                  4
+                );
+                this.loading = false;
+                this.crawledDataJson = response.data.data[0].data;
+              })
+              .catch((e) => {
+                alert(e.getError().toString());
+              });
+          }
 
-                        this.jobData = project;
-                    })
-                    .catch(e => {
-                        alert(e.getError().toString())
-                    });
-            }
-        }
-    }
+          this.jobData = project;
+        })
+        .catch((e) => {
+          alert(e.getError().toString());
+        });
+    },
+    containsKey(obj, key) {
+      return Object.keys(obj).includes(key);
+    },
+
+    handleClick(path, data, treeName = "") {
+      this.itemPath = path;
+      if (this.containsKey(this.itemData, path)) {
+        Vue.delete(this.itemData, this.itemPath);
+      } else {
+        Vue.set(this.itemData, path, data);
+      }
+    },
+
+    clipboardSuccessHandler() {
+      this.$bvToast.toast("Copied To Clipboard ✓", {
+        title: "Successful",
+        toaster: "b-toaster-top-right",
+        solid: true,
+        variant: "success",
+        appendToast: false,
+        autoHideDelay: 5000,
+      });
+    },
+
+    clipboardErrorHandler() {
+      this.$bvToast.toast("Unable To Copy ✘", {
+        title: "Error",
+        toaster: "b-toaster-top-right",
+        solid: true,
+        variant: "danger",
+        appendToast: false,
+        autoHideDelay: 5000,
+      });
+    },
+    doCopy: function () {
+      for (var key in this.itemData) {
+        this.copyData = this.copyData + this.itemData[key];
+      }
+      this.$copyText(this.copyData)
+        .then(() => {
+          this.clipboardSuccessHandler();
+          this.copyData = "";
+        })
+        .catch(() => {
+          this.clipboardErrorHandler();
+          this.copyData = "";
+        });
+    },
+  },
+};
 </script>
 
 <style>
-    pre {
-        width: 100%;
-        padding: 0;
-        margin: 0;
-        overflow: auto;
-        overflow-y: hidden;
-        font-size: 12px;
-        line-height: 20px;
-        background: #efefef;
-        border: 1px solid #777;
-    }
-    pre code {
-        padding: 10px;
-        color: #333;
-    }
+pre {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: auto;
+  overflow-y: hidden;
+  font-size: 12px;
+  line-height: 20px;
+  background: #efefef;
+  border: 1px solid #777;
+}
+pre code {
+  padding: 10px;
+  color: #333;
+}
+
+.window {
+  background: #272822;
+  color: rgb(247, 247, 247);
+  margin: auto;
+  margin-top: 5vh;
+  margin-bottom: 5vh;
+  border: 1px solid #acacac;
+  border-radius: 6px;
+  box-shadow: 0px 0px 20px #acacac;
+}
+
+.vjs-tree .vjs-value__string {
+  color: rgb(213, 248, 58);
+}
+
+.vjs-tree.has-selectable-control.is-selectable.is-mouseover {
+  background: #0e922a;
+  cursor: pointer;
+}
+.copybutton {
+  margin-left: 1rem;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/crawlerx_app/src/main.js b/crawlerx_app/src/main.js
index 925971f..c71972c 100644
--- a/crawlerx_app/src/main.js
+++ b/crawlerx_app/src/main.js
@@ -1,20 +1,20 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-import firebase from 'firebase'
+import Vue from 'vue';
+import App from './App.vue';
+import router from './router';
+import firebase from 'firebase';
 
 Vue.config.productionTip = false;
 
-import VueMaterial from 'vue-material'
-import 'vue-material/dist/vue-material.min.css'
-import 'vue-material/dist/theme/default.css'
-import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
-import SidebarMenu from './components/SideBar/SidebarMenu'
-import 'bootstrap/dist/css/bootstrap.css'
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-import axios from "axios";
-import VueSwal from 'vue-swal'
-import VueClipboard from 'vue-clipboard2'
+import VueMaterial from 'vue-material';
+import 'vue-material/dist/vue-material.min.css';
+import 'vue-material/dist/theme/default.css';
+import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
+import SidebarMenu from './components/SideBar/SidebarMenu';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap-vue/dist/bootstrap-vue.css';
+import axios from 'axios';
+import VueSwal from 'vue-swal';
+import VueClipboard from 'vue-clipboard2';
 
 Vue.use(VueMaterial);
 Vue.component('sidebar-menu', SidebarMenu);
@@ -23,21 +23,23 @@ Vue.use(BootstrapVue);
 // Optionally install the BootstrapVue icon components plugin
 Vue.use(IconsPlugin);
 Vue.use(VueSwal);
-Vue.use(VueClipboard)
+Vue.use(VueClipboard);
+VueClipboard.config.autoSetContainer = true; // add this line
+Vue.use(VueClipboard);
 
 Vue.prototype.$http = axios;
 
 let app = '';
 
 const firebaseConfig = {
-  apiKey: "AIzaSyD88ucXoxhnfm3iNUA-FJ-zg-0GrJKT-Zo",
-  authDomain: "crawlerx-b2ad1.firebaseapp.com",
-  databaseURL: "https://crawlerx-b2ad1.firebaseio.com",
-  projectId: "crawlerx-b2ad1",
-  storageBucket: "crawlerx-b2ad1.appspot.com",
-  messagingSenderId: "811171439353",
-  appId: "1:811171439353:web:64e84b4fc347a5c37eb828",
-  measurementId: "G-CM2MX0CRRC"
+  apiKey: 'AIzaSyD88ucXoxhnfm3iNUA-FJ-zg-0GrJKT-Zo',
+  authDomain: 'crawlerx-b2ad1.firebaseapp.com',
+  databaseURL: 'https://crawlerx-b2ad1.firebaseio.com',
+  projectId: 'crawlerx-b2ad1',
+  storageBucket: 'crawlerx-b2ad1.appspot.com',
+  messagingSenderId: '811171439353',
+  appId: '1:811171439353:web:64e84b4fc347a5c37eb828',
+  measurementId: 'G-CM2MX0CRRC',
 };
 
 firebase.initializeApp(firebaseConfig);
@@ -48,17 +50,23 @@ firebase.auth().onAuthStateChanged(() => {
     Vue.prototype.$USER_ID = firebase.auth().currentUser.uid;
 
     // set token_id from the firebase
-    firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
-      Vue.prototype.$TOKEN_ID = idToken;
-    }).catch(function(error) {
-      alert("Cannot fetch userId of the current logged user " + error.message);
-    });
+    firebase
+      .auth()
+      .currentUser.getIdToken(/* forceRefresh */ true)
+      .then(function(idToken) {
+        Vue.prototype.$TOKEN_ID = idToken;
+      })
+      .catch(function(error) {
+        alert(
+          'Cannot fetch userId of the current logged user ' + error.message
+        );
+      });
   }
 
   if (!app) {
     app = new Vue({
       router,
-      render: h => h(App)
+      render: (h) => h(App),
     }).$mount('#app');
   }
 });