diff --git a/.eslintrc.js b/.eslintrc.js
index b3a0b5d8..4b98314f 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -22,6 +22,6 @@ module.exports = {
     // disable space before func paren
     'space-before-function-paren': 0,
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 2
   }
 }
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index cd79c65d..df1880a2 100644
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -29,13 +29,13 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
-        enforce: "pre",
-        include: [resolve('src'), resolve('test')],
-        options: {
-          formatter: require('eslint-friendly-formatter')
-        }
+        // test: /\.(js|vue)$/,
+        // loader: 'eslint-loader',
+        // enforce: "pre",
+        // include: [resolve('src'), resolve('test')],
+        // options: {
+        //   formatter: require('eslint-friendly-formatter')
+        // }
       },
       {
         test: /\.vue$/,
diff --git a/package-lock.json b/package-lock.json
index 69fb3fc6..4c8cdf4a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4776,8 +4776,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -4798,14 +4797,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -4820,20 +4817,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4950,8 +4944,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4963,7 +4956,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4978,7 +4970,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4986,14 +4977,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -5012,7 +5001,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5093,8 +5081,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5106,7 +5093,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5192,8 +5178,7 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5229,7 +5214,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5249,7 +5233,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5293,14 +5276,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
diff --git a/src/components/SidebarMenu.vue b/src/components/SidebarMenu.vue
index 127d0ea7..33c1d21d 100644
--- a/src/components/SidebarMenu.vue
+++ b/src/components/SidebarMenu.vue
@@ -1,38 +1,36 @@
 <template>
   <ul class="sidebar-menu">
     <li class="header">TOOLS</li>
-    <router-link tag="li" class="pageLink" to="/">
-      <a>
-        <i class="fa fa-desktop"></i>
+    <li class="active pageLink" v-on:click="toggleMenu">
+      <router-link to="/"><i class="fa fa-desktop"></i>
         <span class="page">Dashboard</span>
-      </a>
-    </router-link>
-    <router-link tag="li" class="pageLink" to="/tables">
-      <a>
-        <i class="fa fa-table"></i>
-        <span class="page">Tables</span>
-      </a>
-    </router-link>
+      </router-link>
+    </li>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/files"><i class="fa fa-table"></i>
+        <span class="page">Files</span>
+      </router-link>
+    </li>
 
     <li class="header">ME</li>
-    <router-link tag="li" class="pageLink" to="/tasks">
-      <a>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/tasks">
         <i class="fa fa-tasks"></i>
         <span class="page">Tasks</span>
-      </a>
-    </router-link>
-    <router-link tag="li" class="pageLink" to="/setting">
-      <a>
+      </router-link>
+    </li>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/setting">
         <i class="fa fa-cog"></i>
         <span class="page">Settings</span>
-      </a>
-    </router-link>
+      </router-link>
+    </li>
     <li class="treeview">
       <a href="#">
         <i class="fa fa-folder-o"></i>
-        <span class="treeview-title">Files</span>
-        <span class="pull-right-container pull-right">
-          <i class="fa fa-angle-left fa-fw"></i>
+        <span>Files</span>
+        <span class="pull-right-container">
+          <i class="fa fa-angle-left fa-fw pull-right"></i>
         </span>
       </a>
       <ul class="treeview-menu">
@@ -55,70 +53,74 @@
     </li>
 
     <li class="header">LOGS</li>
-    <router-link tag="li" class="pageLink" to="/access">
-      <a>
-        <i class="fa fa-book"></i>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/access"><i class="fa fa-book"></i>
         <span class="page">Access</span>
-      </a>
-    </router-link>
-    <router-link tag="li" class="pageLink" to="/server">
-      <a>
-        <i class="fa fa-hdd-o"></i>
+      </router-link>
+    </li>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/server"><i class="fa fa-hdd-o"></i>
         <span class="page">Server</span>
-      </a>
-    </router-link>
-    <router-link tag="li" class="pageLink" to="/repos">
-      <a>
-        <i class="fa fa-heart"></i>
+      </router-link>
+    </li>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/repos"><i class="fa fa-heart"></i>
         <span class="page">Repos</span>
         <small class="label pull-right bg-green">AJAX</small>
-      </a>
-    </router-link>
+      </router-link>
+    </li>
 
     <li class="header">PAGES</li>
-    <router-link tag="li" class="pageLink" to="/login">
-      <a>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/login">
         <i class="fa fa-circle-o text-yellow"></i>
         <span class="page"> Login</span>
-      </a>
-    </router-link>
-    <router-link tag="li" class="pageLink" to="/404">
-      <a>
-        <i class="fa fa-circle-o text-red"></i>
+      </router-link>
+    </li>
+    <li class="pageLink" v-on:click="toggleMenu">
+      <router-link to="/404"><i class="fa fa-circle-o text-red"></i>
         <span class="page"> 404</span>
-      </a>
-    </router-link>
+      </router-link>
+    </li>
   </ul>
 </template>
 <script>
 export default {
-  name: 'SidebarMenu'
+  name: 'SidebarName',
+  methods: {
+    toggleMenu (event) {
+      // remove active from li
+      var active = document.querySelector('li.pageLink.active')
+
+      if (active) {
+        active.classList.remove('active')
+      }
+      // window.$('li.pageLink.active').removeClass('active')
+      // Add it to the item that was clicked
+      event.toElement.parentElement.className = 'pageLink active'
+    }
+  }
 }
 </script>
 <style>
-/* override default */
-.sidebar-menu > li > a {
-  padding: 12px 15px 12px 15px;
-}
-
-.sidebar-menu li.active > a > .fa-angle-left,
-.sidebar-menu li.active > a > .pull-right-container > .fa-angle-left {
-  animation-name: rotate;
-  animation-duration: 0.2s;
-  animation-fill-mode: forwards;
-}
-
-.treeview-title {
-  z-index: 1;
-}
+  /* override default */
+  .sidebar-menu>li>a {
+    padding: 12px 15px 12px 15px;
+  }
 
-@keyframes rotate {
-  0% {
-    transform: rotate(0deg);
+  .sidebar-menu li.active>a>.fa-angle-left, .sidebar-menu li.active>a>.pull-right-container>.fa-angle-left {
+    animation-name: rotate;
+    animation-duration: .2s;
+    animation-fill-mode: forwards;
   }
 
-  100% {
-    transform: rotate(-90deg);
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(-90deg);
+    }
   }
-}
 </style>
diff --git a/src/components/views/Files.vue b/src/components/views/Files.vue
new file mode 100644
index 00000000..6fc54622
--- /dev/null
+++ b/src/components/views/Files.vue
@@ -0,0 +1,74 @@
+<template>
+  <section class="content">
+    <div class="row center-block">
+      <form role="form">
+        <div class="box-body">
+          <div class="form-group">
+            <label for="exampleInputFile">File input</label>
+            <input type="file" id="exampleInputFile" accept="*.jpg, *.png" @change="uploadFile($event)" >
+            <img width="100" v-bind:src="imagePreview" :show="showImage">
+          </div>
+        </div>
+        <!-- /.box-body -->
+      </form>
+    </div>
+  </section>
+</template>
+
+<script>
+import $ from 'jquery'
+
+export default {
+  name: 'files',
+  data(){
+    return {
+      showImage: true,
+      imagePreview: "https://v1.vuejs.org/images/logo.png"  // we will store base64 format of image in this string
+    }
+  },
+  methods: {
+    uploadFile (event) {
+      var file = event.target.files[0]
+      if (file.size > 3072000) {
+        alert("File is too big!");
+        return;
+      }
+      // console.log(file.name)
+      var reader = new FileReader()
+      var _this = this
+      reader.addEventListener('loadend', function(){
+
+        let result = reader.result
+
+        _this.imagePreview = result
+        var request = new XMLHttpRequest()
+        request.open('POST', 'https://pq1natvbk8.execute-api.ap-southeast-1.amazonaws.com/dev/v1/s3drive/storage')
+        let data = {
+          'fileName': file.name,
+          'fileData': result
+        }
+
+        request.send(JSON.stringify(data))
+        request.onreadystatechange = function() { // Call a function when the state changes.
+            if (this.readyState === 4 && this.status != 200) {
+              alert('Error: ' + this.status);
+            }
+            if (this.readyState === 4 && this.status === 200) {
+                _this.imagePreview = 'http://' + JSON.parse(this.response)['cloudfront']
+                alert('Upload sucessfully!: ');
+            }
+        }
+      }.bind(this), false)
+
+      if (file) {
+        reader.readAsDataURL(file)
+      }
+    }
+
+  },
+  mounted () {
+    this.$nextTick(() => {
+    })
+  }
+}
+</script>
diff --git a/src/routes.js b/src/routes.js
index 8192e253..3924ef3e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -4,7 +4,7 @@ import NotFoundView from './components/404.vue'
 
 // Import Views - Dash
 import DashboardView from './components/views/Dashboard.vue'
-import TablesView from './components/views/Tables.vue'
+import FilesView from './components/views/Files.vue'
 import TasksView from './components/views/Tasks.vue'
 import SettingView from './components/views/Setting.vue'
 import AccessView from './components/views/Access.vue'
@@ -28,10 +28,10 @@ const routes = [
         name: 'Dashboard',
         meta: {description: 'Overview of environment'}
       }, {
-        path: 'tables',
-        component: TablesView,
-        name: 'Tables',
-        meta: {description: 'Simple and advance table in CoPilot'}
+        path: 'files',
+        component: FilesView,
+        name: 'files',
+        meta: {description: 'upload file and list file'}
       }, {
         path: 'tasks',
         component: TasksView,
@@ -51,7 +51,7 @@ const routes = [
         path: 'server',
         component: ServerView,
         name: 'Servers',
-        meta: {description: 'List of our servers', requiresAuth: true}
+        meta: {description: 'List of our servers'}
       }, {
         path: 'repos',
         component: ReposView,