diff --git a/src/backend/main.js b/src/backend/main.js
index 01ba584..3e4db9b 100644
--- a/src/backend/main.js
+++ b/src/backend/main.js
@@ -1,20 +1,20 @@
 'use strict';
 
-/**
- * Imports
- */
+/* *** Imports *** */
+// from npm library
 const express = require('express');
 const multer = require('multer');
 const path = require('path');
 const fs = require('fs');
 const bp = require('body-parser');
 
+// from other js files in this project
 const proc = require('./process');
 const parsedoc = require('./parsedoc');
 const scraper = require('./scraper');
 
-const GFileDir = './src/frontend/public/uploads/';
-
+/* *** Global variables *** */
+const GFileDir = './src/frontend/public/uploads/'; // path ke tempat upload
 let GFilesList = []; // List files objects
 
 // konfigurasi server express baru
@@ -26,12 +26,13 @@ const serverConfig = {
 // Inisialisasi instance express baru
 const app = express();
 
+// setup middleware untuk express
 app.use(express.static(path.join(__dirname, '../frontend/')));
 app.use(bp.urlencoded({ extended: false }));
 app.use(bp.json());
 
 /**
- * Routing untuk memberikan query search
+ * Routing ke API searching
  */
 app.get('/search', (req, res) => {
   const query = req.query.q.toLowerCase();
@@ -44,10 +45,9 @@ app.get('/search', (req, res) => {
 });
 
 /**
- * Routing untuk menguji searching
+ * Routing ke API pengujian searching
  */
 app.get('/test', (req, res) => {
-  //GFilesList = [];
   const query = req.query.q;
 
   const hasil = proc.testProcess(query);
@@ -56,6 +56,9 @@ app.get('/test', (req, res) => {
   return res.json(hasil);
 });
 
+/**
+ * Routing ke API web scaper
+ */
 app.post('/scraper', async (req, res) => {
   // hayolo tiba2 angkatan 19 dipanggil
   const result = await scraper.extractHTML(
@@ -72,9 +75,13 @@ app.post('/scraper', async (req, res) => {
  * Routing ke start-page
  */
 app.get('/', (req, res) => {
-  res.sendFile(path.join(__dirname, '../frontend/public/index.html'));
+  //res.sendFile(path.join(__dirname, '../frontend/public/index.html'));
+  res.send('Hi');
 });
 
+/**
+ * filter file untuk multer
+ */
 const filterfile = function (req, file, cb) {
   // Accept txt or html only
   if (!file.originalname.match(/(txt|html)$/i)) {
@@ -103,7 +110,7 @@ const storage = multer.diskStorage({
 });
 
 /**
- * Routing untuk nerima upload
+ * Routing ke API upload file
  */
 let upload = multer({ storage: storage, fileFilter: filterfile }).array(
   'files',
diff --git a/src/backend/process.js b/src/backend/process.js
index 30baf14..c12c952 100644
--- a/src/backend/process.js
+++ b/src/backend/process.js
@@ -1,11 +1,11 @@
 /* *** Bentuk object untuk document *** */
 /* doc = {
- *  filename : Val, // dari awal
- *  konten : Val, // dari awal
- *  kontenOriginal: Val, // dari awal
- *  vektor : Val, // ditambah di tengah
- *  similarity : Val, // ditambah di tengah
- *  firstSentence : Val, // ditambah di tengah
+ *  filename : Val, // dari awal, nama file
+ *  konten : Val, // dari awal, isi dokumen yang udah di-stem dan diapus stopwords-nya
+ *  kontenOriginal: Val, // dari awal, isi dokumen asli
+ *  vektor : Val, // ditambah di tengah, vektor dari dokumen
+ *  similarity : Val, // ditambah di tengah, hasil cosine similarity
+ *  firstSentence : Val, // ditambah di tengah, kalimat pertama tiap dokumen
  * },
  *
  * untuk menyimpan kata-kata pada query, akan digunakan suatu list of
@@ -13,12 +13,16 @@
  * queryWords = [Q1, Q2, Q3, ...]
  */
 
+/* *** Imports *** */
+// npm library
 const sastrawi = require('sastrawijs');
 const stopwords = require('./stopwords');
 const parsedoc = require('./parsedoc');
 
+// other js files in this project
 const stopwordsID = stopwords.stopwordsID;
 
+/* *** global variables *** */
 let termDictionary = [];
 
 /**
@@ -62,6 +66,7 @@ const removeStopwords = (string) => {
     }
   }
 
+  // Masukin kata yg buka stopwrod ke hasil
   for (let i = 0; i < kata.length; i++) {
     let katabersih = kata[i].split('.').join('');
     if (!stopwordsID.includes(katabersih) || count == 0) {
@@ -80,7 +85,7 @@ const removeStopwords = (string) => {
 const cleanString = (str) => {
   str = stemString(str);
   str = removeStopwords(str);
-  str.trim();
+  str.trim(); // Biar ga ada spasi di blkg atau di depan
 
   return str;
 };
@@ -92,15 +97,17 @@ const cleanString = (str) => {
  * @Returns {String} str yang sudah dibersihkan
  */
 const removeEscapeChr = (str) => {
-  const escapeChrRE = /(\n|\r|\t)/g;
-  const whitespaceRE = /\s\s+/g;
+  const escapeChrRE = /(\n|\r|\t)/g; // RE untuk karakter \n, \t, \r
+  const whitespaceRE = /\s\s+/g; // RE untuk spasi yg muncul lebih dari satu kali
   str = str.replace(escapeChrRE, ' ');
   str = str.replace(whitespaceRE, ' ');
   return str;
 };
 
 /**
- * TODO: comment
+ * Fungsi untuk menambahkan kata-kata pada str ke dalam database (dalam hal
+ * ini, adalah variabel global termDictionary)
+ * @param {String} str - string yang kata-katanya ingin ditambahkan ke databse
  */
 const addToTermDict = (str) => {
   str = str.split(' ');
@@ -142,6 +149,8 @@ const createDocQueryObj = (docContent, wordList) => {
   const retObj = {};
 
   for (const key of wordList) {
+    // kalau 'key' ada di dokumen, maka banyaknya akan disalin ke dalam object,
+    // jika tidak maka akan disalin nilai 0
     retObj[key] = key in docObj ? docObj[key] : 0;
   }
 
@@ -165,21 +174,25 @@ const sortSimilaritiesDsc = (arrObj) => {
  * @Returns String kalimat pertama dari str
  */
 const makeFirstSentence = (str) => {
-  const pemisah = '.';
+  const period = '.';
   const charCount = 100;
 
   let existsPeriod = false;
   let i = 0;
   for (; i < str.length && !existsPeriod; ++i) {
     const chr = str[i];
-    if (chr === pemisah) {
+    if (chr === period) {
       existsPeriod = true;
     }
   }
 
+  // Banyak karakter tidak sampai charCount dan tidak ada period
   if (str.length <= charCount && !existsPeriod) return str;
+  // banyak karakter melebihi charCount atau ada priod
   else if (!existsPeriod || i > charCount)
+    // potong lalu tambahkan elipsis
     return `${str.slice(0, charCount)}...`;
+  // ada period dan banyak karakter kurang dari charCount
   else return str.slice(0, i);
 };
 
@@ -210,13 +223,16 @@ const cosineSim = (Q, D) => {
   let mQ = 0; // ||Q||
   let mD = 0; // ||D||
 
+  // mencari hasil penjumlahan kuadrat tiap elemen di Q dan D
   for (i = 0; i < Q.length; i++) {
     mQ += Q[i] * Q[i];
     mD += D[i] * D[i];
   }
 
+  // menghitung panjang vetkor Q dan D
   mQ = Math.sqrt(mQ);
   mD = Math.sqrt(mD);
+
   //console.log({ dotproduct: dotproduct, mQ: mQ, mD: mD });
   return dotproduct / (mQ * mD); // rumus cosine sim
 };
@@ -234,7 +250,11 @@ const toVector = (obj) => {
 };
 
 /**
- * TODO: comment
+ * Fungsi untuk memeriksa apakah di suatu list dokumen sudah memiliki dokumen
+ * dengan **nama** yang sama
+ * @param {Array} list - list dokumen yang ingin diperiksa
+ * @param {Object} obj - object file yang ingin diperiksa
+ * @Returns suatu nilai Boolean, true jika obj ada di list, false jika tidak
  */
 exports.containsFile = (list, obj) => {
   for (let i = 0; i < list.length; ++i) {
@@ -251,6 +271,7 @@ exports.containsFile = (list, obj) => {
 /**
  * Fungsi proses yang digunakan untuk menguji algoritma pencarian
  * @params {string} query - query search
+ * TODO: Comemnts
  */
 exports.testProcess = (query) => {
   /* *** SETUP UNTUK TESTING *** */
@@ -281,10 +302,10 @@ exports.testProcess = (query) => {
 
   console.log(docs);
   const queryObj = {
-    query: query,
-    cleanQuery: cleanQuery,
-    queryWords: queryWords,
-    vetor: queryVec,
+    query: query, // query original (yg dikirim user)
+    cleanQuery: cleanQuery, // query yg udh dibersihin (udh di-stem, diapusin stopwords)
+    queryWords: queryWords, // list of kata-kata query yang udh dibersihin
+    vector: queryVec, // jumlah kemunculan tiap kata pada query yg koresponden dengan kamus kata
   };
   return { docs: docs, query: queryObj };
 };
@@ -293,6 +314,7 @@ exports.testProcess = (query) => {
  * Fungsi proses yang digunakan untuk menguji algoritma pencarian
  * @params {string} query - query search
  * @params {object[]} docs - berisi object dokumen
+ * TODO: Comemnts
  */
 exports.mainProcess = (query, docs) => {
   termDictionary = [];
@@ -319,10 +341,10 @@ exports.mainProcess = (query, docs) => {
 
   console.log(docs);
   const queryObj = {
-    query: query,
-    cleanQuery: cleanQuery,
-    queryWords: queryWords,
-    vector: queryVec,
+    query: query, // query original (yg dikirim user)
+    cleanQuery: cleanQuery, // query yg udh dibersihin (udh di-stem, diapusin stopwords)
+    queryWords: queryWords, // list of kata-kata query yang udh dibersihin
+    vector: queryVec, // jumlah kemunculan tiap kata pada query yg koresponden dengan kamus kata
   };
 
   return { docs: docs, query: queryObj };
diff --git a/src/frontend/src/App.vue b/src/frontend/src/App.vue
index 4e12b79..cbef89a 100644
--- a/src/frontend/src/App.vue
+++ b/src/frontend/src/App.vue
@@ -1,14 +1,16 @@
 <template>
-  <div class="section">
-    <div class="container">
-      <h1 style = " font-size: 100%;">Search It</h1>
-      <button @click="showSearch" class="button is-info">Search</button>
-      <button @click="showScraper" class="button is-info">Webscrape</button>
-      <button @click="showAbout" class="button is-info">Perihal</button>
-      <uploadedFile v-if="search"/>
-      <search v-if="search" />
-      <webScrape v-if="scraper"/>
-      <aboutUs v-if="about"/>
+  <div class="background">
+    <div class="section">
+      <div class="container">
+        <h1 style = " font-size: 500%; font-family: 'Open Sans', sans-serif; padding-bottom:15px">Search-It</h1>
+        <button @click="showSearch" class="button is-info is-success">Search</button>
+        <button @click="showScraper" class="button is-info is-success">Webscrape</button>
+        <button @click="showAbout" class="button is-info is-success">Perihal</button>
+        <uploadedFile v-if="search"/>
+        <search v-if="search" />
+        <webScrape v-if="scraper"/>
+        <aboutUs v-if="about"/>
+      </div>
     </div>
   </div>
 </template>
@@ -63,6 +65,14 @@ export default {
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
-
+}
+.background{
+  background-color:rgb(248, 194, 145);
+}
+.button{
+  margin:10px 10px 20px 10px;
+}
+.button.is-success:hover{
+  background-color: black;
 }
 </style>
diff --git a/src/frontend/src/components/aboutUs.vue b/src/frontend/src/components/aboutUs.vue
index d578e35..7952b84 100644
--- a/src/frontend/src/components/aboutUs.vue
+++ b/src/frontend/src/components/aboutUs.vue
@@ -51,8 +51,8 @@ export default {
         text-align: initial;
     }
     .middle{
-        margin: 100px;
-        padding: 50px;
+        margin: 0px 100px 100px 100px;
+        padding: 0px 50px 50px 50px;
         justify-content: center;
     }
     p{
diff --git a/src/frontend/src/components/search.vue b/src/frontend/src/components/search.vue
index ad8b754..b1a0425 100644
--- a/src/frontend/src/components/search.vue
+++ b/src/frontend/src/components/search.vue
@@ -1,12 +1,15 @@
 <template>
   <div class="search-bar">
     <form action="/" method="get" v-on:submit.prevent="submitQuery">
-      <input type="text" placeholder="Type query here..." id="q" name="q" v-model="searchStr"/>
-      <!-- Kalo bisa pake nerd font aja biar jadi ikon search itu -->
-        <button type="submit">
-          <i class ="fas fa-search"></i>
-        </button>
-
+      <div class ="field" style="width:inherit; height:inherit">
+        <input class="input" type="text" style="width:60%" placeholder="Type query here..." id="q" name="q" v-model="searchStr"/>       
+          <button type="submit" style="width:inherit; height:inherit">
+            <span class="icon is-medium">
+              <i class ="fas fa-search"></i>
+            </span>
+          </button>
+        <!-- Kalo bisa pake nerd font aja biar jadi ikon search itu -->
+      </div>
     </form>
   </div>
 
@@ -21,13 +24,19 @@
     </div>
   </div>
 
-  <table>
-  </table>
+  <tableQuery :isSearched="this.isSearched" :docs="this.docs" :query="this.queryResult"/>
+
 </template>
 
 <script>
+import tableQuery from './tableQuery.vue';
+
+
 export default {
   name: 'search',
+  components: {
+    tableQuery,
+  },
   data() {
     return {
       searchStr: '',
@@ -83,4 +92,7 @@ export default {
   text-align: left;
   padding: 20px 0px;
 }
+.input{
+  opacity: 70%;
+}
 </style>
diff --git a/src/frontend/src/components/tableColumn.vue b/src/frontend/src/components/tableColumn.vue
deleted file mode 100644
index e69de29..0000000
diff --git a/src/frontend/src/components/tableQuery.vue b/src/frontend/src/components/tableQuery.vue
new file mode 100644
index 0000000..4d19915
--- /dev/null
+++ b/src/frontend/src/components/tableQuery.vue
@@ -0,0 +1,115 @@
+<template>
+  <div v-if="true">
+    <table class="tableQuery">
+      <tr v-for="row of tabelal" v-bind:key="row">
+          <td v-for="col of row" v-bind:key="col">
+              {{ col }}
+          </td>
+      </tr>
+    </table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'tableQuery',
+  props: {
+    isSearched: {        
+      type: Boolean,
+      required: true,
+    },
+    docs: {        
+      type: Array,
+      required: true,
+    },
+    query: {
+      type: Object,
+      required: true,
+    }
+  },
+  data() {
+    return {
+      // docs: [],
+      queryVec: [],
+      // query: qW,
+      tabelal: [],
+      // isSearched: false,
+    };
+  },
+
+  computed: {
+  },
+
+  methods: {
+    jadiMatriks() {
+        /*
+          const queryObj = {
+            query: query, // query original (yg dikirim user)
+            cleanQuery: cleanQuery, // query yg udh dibersihin (udh di-stem, diapusin stopwords)
+            queryWords: queryWords, // list of kata-kata query yang udh dibersihin
+            vector: queryVec, // jumlah kemunculan tiap kata pada query yg koresponden dengan kamus kata
+          };
+        */
+      //Header -- baris pertama [Term, Query, Doc1, Doc2, ...]
+      // const mergeObject = ((doc,query) => {
+      //   let matriks = [[]];
+      //   for (let i=0;i<doc.length;i++) {
+      //     for (let j=0;j<query.length;j++) {
+      //       matriks[i].push(doc[i].konten[j])
+      //     }
+      //   }
+      //   return matriks;
+      // });
+      //Header -- baris pertama [Term, Query, Doc1, Doc2, ...]
+      // let dokumen = mergeObject(this.docs,this.queryObj.queryWords);
+      this.tabelal = [];
+      let namafile = [];
+      namafile.push("Term");
+      namafile.push("Query");
+      for (let i=0;i<this.docs.length;i++) {
+        namafile.push(this.docs[i].fileName);
+      }
+      this.tabelal.push(namafile);
+      console.log('hi');
+
+      //Isi -- baris kedua dst [[isi vektor Term],[isi vektor Query],[isi vektor Doc1],...]
+      let isi = [];
+      // i adalah indexing kata dalam query
+      for (let i=0;i<this.query.queryWords.length;i++) {
+        isi = [];
+        // j buat indexing vektor di index kbrp yg dipush ke list
+        for (let j=0;j<this.docs.length+2;j++) {
+          if (j===0) {  //Kolom pertama diisi data dari term
+            isi.push(this.query.queryWords[i]);
+          } else if (j===1) { //kolom kedua diisi data dari query
+            isi.push(this.query.vector[i]);
+          } else { //kolom ketiga dan seterusnya diisi data dari dokumen
+            // k buat indexing file
+            //for (let k = 0; k < this.docs.length; k++) {
+              // console.log(this.docs[k].fileName, j);
+            isi.push(this.docs[j-2].vector[i]);
+              // console.log(`${k} = k`);
+            
+          }
+        }
+        this.tabelal.push(isi);
+      }
+    },
+  },
+
+  watch: {
+    isSearched() {
+      console.log('membuat tabel...')
+      this.jadiMatriks();
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.searc-result {
+  text-align: right;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/uploadedFile.vue b/src/frontend/src/components/uploadedFile.vue
index 96890d1..7827788 100644
--- a/src/frontend/src/components/uploadedFile.vue
+++ b/src/frontend/src/components/uploadedFile.vue
@@ -20,16 +20,13 @@
               Choose a File
             </span>
           </span>
-
+        </label>
+        <label class ="file-label" style="justify-content: inherit;" >
+          <button class="button is-info" style="margin: 0px 0px 0px 5px; ">Send</button>
         </label>
       </div>
     </div>
-      <div v-if="message"
-    :class="`message ${error ? 'is-danger' : 'is-success'}`"
-  >
-    <div class="message-body">{{message}}</div>
-  </div>
-    <div class="field">
+    <div class="field" style="margin:50px 250px 25px 250px">
       <div v-for="(file,index) in files" :key="index" class="level"
         :class="`level ${file.invalidMessage && 'has-text-danger'}`" >
         <div class="level-left">
@@ -45,9 +42,12 @@
         </div>
       </div>
     </div>
-    <div class ="field">
-        <button class="button is-info">Send</button>
+    <div v-if="message" style="margin:0px 250px 25px 250px"
+    :class="`message ${error ? 'is-danger' : 'is-success'}`"
+    >
+      <div class="message-body">{{message}}</div>
     </div>
+
   </form>
 </template>
 
@@ -123,8 +123,4 @@ export default {
     .file-icon{
         margin-right: 0%;
     }
-    .button{
-        padding-right: 5em;
-        padding-left: 5em;
-    }
 </style>
diff --git a/src/frontend/src/components/webScrape.vue b/src/frontend/src/components/webScrape.vue
index 0aecf82..9e9f6a1 100644
--- a/src/frontend/src/components/webScrape.vue
+++ b/src/frontend/src/components/webScrape.vue
@@ -14,25 +14,31 @@
       </tr>
       <tr>
         <td>
-          <select id="filter-method" v-model="filterMethod">
-            <option
-            v-bind:value="index"
-            v-for="(option, index) in possibleFilterMethod"
-            v-bind:key="index">
-              {{ option }}
-            </option>
-          </select>
+          <div class="select" style="width:inherit">
+            <select id="filter-method" v-model="filterMethod">
+              
+              <option
+              v-bind:value="index"
+              v-for="(option, index) in possibleFilterMethod"
+              v-bind:key="index">
+                {{ option }}
+              </option>
+              <option>Select Dropdown</option>
+            </select>
+          </div>
         </td>
         <td>
-          <input type="text" placeholder="URL" id="url" v-model="url"/>
+          <input type="text" class="input" style="width:100%" placeholder="URL" id="url" v-model="url"/>
         </td>
         <td>
-          <input type="text" placeholder="Filter" id="filter" v-model="filter" />
-        </td>
-        <td>
-          <button type="scrape">
-            <i class ="fas fa-search"></i>
-          </button>
+          <div class ="field">
+            <input type="text" class="input" style="width:85%" placeholder="Filter" id="filter" v-model="filter" />
+            <button type="scrape">
+              <span class="icon is-medium">
+                <i class ="fas fa-search"></i>
+              </span>
+            </button>
+          </div>
         </td>
       </tr>
     </table>
@@ -92,7 +98,7 @@ export default {
 }
 </script>
 
-<style scope>
+<style scoped>
 td {
   padding: 0px 50px;
 }
@@ -100,4 +106,10 @@ td {
 td input {
   width: 100%;
 }
+.input{
+  opacity: 70%;
+}
+.select{
+  opacity: 70%;
+}
 </style>