diff --git a/package-lock.json b/package-lock.json
index a5b3cbd9..3a29f0c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -115,6 +115,14 @@
         "to-fast-properties": "2.0.0"
       }
     },
+    "@dmaksimovic/vue-countdown": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@dmaksimovic/vue-countdown/-/vue-countdown-1.0.0.tgz",
+      "integrity": "sha1-Gd/QxyKTh0nKh1e19ZhpsRqDmi0=",
+      "requires": {
+        "easytimer": "1.1.1"
+      }
+    },
     "@fortawesome/fontawesome": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome/-/fontawesome-1.1.8.tgz",
@@ -529,6 +537,11 @@
         "long": "3.2.0"
       }
     },
+    "@xkeshi/vue-countdown": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@xkeshi/vue-countdown/-/vue-countdown-0.6.0.tgz",
+      "integrity": "sha512-cxOL/kb9/X6SKiaUAroDdiys6QWa9bjANIo2emEDObLN6gFflxrCRPp6iQHJK9gYJfq6R2l9Je5DeV+TH4Oyaw=="
+    },
     "abbrev": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
@@ -4679,6 +4692,11 @@
         }
       }
     },
+    "easytimer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easytimer/-/easytimer-1.1.1.tgz",
+      "integrity": "sha1-Gt3eclZG3iWSQw0DBIp0jWM1TpQ="
+    },
     "ecc-jsbn": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
diff --git a/package.json b/package.json
index 29295d28..d2b8d77d 100644
--- a/package.json
+++ b/package.json
@@ -11,11 +11,13 @@
     "lint": "vue-cli-service lint resources/assets/js"
   },
   "dependencies": {
+    "@dmaksimovic/vue-countdown": "^1.0.0",
     "@fortawesome/fontawesome": "^1.1.4",
     "@fortawesome/fontawesome-free-brands": "^5.0.8",
     "@fortawesome/fontawesome-free-regular": "^5.0.8",
     "@fortawesome/fontawesome-free-solid": "^5.0.8",
     "@fortawesome/vue-fontawesome": "^0.0.22",
+    "@xkeshi/vue-countdown": "^0.6.0",
     "axios": "^0.18.0",
     "bootstrap": "^4.0.0",
     "element-ui": "^2.3.9",
diff --git a/resources/assets/js/pages/upload.vue b/resources/assets/js/pages/upload.vue
index 20492836..9b391033 100644
--- a/resources/assets/js/pages/upload.vue
+++ b/resources/assets/js/pages/upload.vue
@@ -1,7 +1,84 @@
 <template>
-<el-main></el-main>    
-  
-  
-  
+    <el-main>
+        <!-- action="https://jsonplaceholder.typicode.com/posts/" -->
+        <div align="center">
+            <h3>Your order has been book</h3>
+            <h3>Please upload the bank slip</h3>
+        </div>
 
+    <div align="center">
+        Time Left :
+        <vue-countdown label="Time Left :" v-on:time-expire="handleTimeExpire" :seconds="3600" v-bind:auto-start="false" ref="countdown"></vue-countdown>
+
+        <!-- <button v-on:click="startTimer">Start timer</button> -->
+    </div><br>
+
+
+<!-- upload image -->
+        <el-upload
+            list-type="picture-card"
+            :on-preview="handlePictureCardPreview"
+            :on-remove="handleRemove" align="center">
+            <i class="el-icon-plus"></i>
+        </el-upload>
+    <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt="">
+    </el-dialog><br>
+<!-- upload image end -->
+
+    <!-- <el-form label-width="300px">
+        <el-form-item label="Amount (RM) :"> -->
+    <div align="center">
+        Amount (RM) : <el-input placeholder="Enter Amount" style="width: 20%"></el-input><br><br>
+    </div>
+        <!-- </el-form-item>
+    </el-form> -->
+
+    <div align="center">
+        <el-button type="submit">Submit</el-button>
+        <el-button type="text">Upload Later</el-button>
+    </div>
+
+    </el-main>
 </template>
+
+<script>
+import VueCountdown from '@dmaksimovic/vue-countdown';
+
+  export default {
+      name: 'my-component',
+    data() {
+      return {
+        start: false,
+        dialogImageUrl: '',
+        dialogVisible: false
+      };
+    },
+    mounted() {
+        this.$refs.countdown.start();
+    },
+    components: {
+        'vue-countdown': VueCountdown
+    },
+    methods: {
+      handleRemove(file, fileList) {
+        console.log(file, fileList);
+      },
+      handlePictureCardPreview(file) {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      },
+      handleTimeExpire () {
+            alert('Time is up!');
+        },
+        startTimer () {
+            this.start = true;
+        }
+    }
+  }
+</script>  
+        
+        
+        
+        
+    
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 4597f12c..b7e4448c 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -6,6 +6,7 @@ const PasswordReset = () => import('~/pages/auth/password/reset').then(m => m.de
 const NotFound = () => import('~/pages/errors/404').then(m => m.default || m)
 
 const Home = () => import('~/pages/home').then(m => m.default || m)
+const Upload = () => import('~/pages/upload').then(m => m.default || m)
 const Settings = () => import('~/pages/settings/index').then(m => m.default || m)
 const SettingsProfile = () => import('~/pages/settings/profile').then(m => m.default || m)
 const SettingsPassword = () => import('~/pages/settings/password').then(m => m.default || m)
@@ -21,6 +22,7 @@ export default [
   { path: '/password/reset/:token', name: 'password.reset', component: PasswordReset },
 
   { path: '/home', name: 'home', component: Home },
+  { path: '/upload', name: 'upload', component: Upload },
   { path: '/settings',
     component: Settings,
     children: [
diff --git a/resources/assets/sass/_variables.scss b/resources/assets/sass/_variables.scss
index 2e77aa38..84d6530d 100644
--- a/resources/assets/sass/_variables.scss
+++ b/resources/assets/sass/_variables.scss
@@ -14,3 +14,9 @@ $border-radius-sm: .15rem;
 
 // Nav Pills
 $nav-pills-border-radius: 0;
+
+
+$primary-color: #FD7014;
+$secondary-color: #393E46;
+$background-color: #222831;
+$text-color: #EEEEEE;
diff --git a/resources/assets/sass/app.scss b/resources/assets/sass/app.scss
index f1b638b5..2230b0f0 100644
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@@ -6,3 +6,4 @@
 @import 'elements/navbar';
 @import 'elements/buttons';
 @import 'elements/transitions';
+
diff --git a/yarn.lock b/yarn.lock
index 4249ec27..1e04d0cc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -71,6 +71,12 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
+"@dmaksimovic/vue-countdown@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@dmaksimovic/vue-countdown/-/vue-countdown-1.0.0.tgz#19dfd0c722938749ca8757b5f59869b11a839a2d"
+  dependencies:
+    easytimer "^1.1.1"
+
 "@fortawesome/fontawesome-common-types@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.3.tgz#8475e0f2d1ad1f858c4ec2e76ed9a2456a09ad83"
@@ -201,6 +207,10 @@
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1"
 
+"@xkeshi/vue-countdown@^0.6.0":
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/@xkeshi/vue-countdown/-/vue-countdown-0.6.0.tgz#ffdb43b0d7ce5ba0173fed576ed30bcfd84fec67"
+
 JSONStream@^1.3.2:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/JSONStream/-/JSONStream-1.3.2.tgz#c102371b6ec3a7cf3b847ca00c20bb0fce4c6dea"
@@ -3054,6 +3064,10 @@ each-async@^1.0.0, each-async@^1.1.1:
     onetime "^1.0.0"
     set-immediate-shim "^1.0.0"
 
+easytimer@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/easytimer/-/easytimer-1.1.1.tgz#1addde725646de2592430d03048a748d63354e94"
+
 ecc-jsbn@~0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz#0fc73a9ed5f0d53c38193398523ef7e543777505"