diff --git a/README.md b/README.md
index 7e96b31..52f1037 100644
--- a/README.md
+++ b/README.md
@@ -14,6 +14,9 @@ writes in python. What makes things more worse is that, to use PHP, a web
 server is needly inevitably. This complexes service deployment and makes it not
 very 'light'.
 
+# Screenshot
+
+![screenshot1](screen_shot/1.gif)
 
 # Prerequisite
 
@@ -27,7 +30,7 @@ avoid any troubles.
 To install youtube-dl-webui, you have to firstly install [youtube-dl][1] and
 [Flask][3], then simply execute the following command:
 
-   python setup.py install
+    python setup.py install
 
 # How to use
 
@@ -43,13 +46,18 @@ Currently, not to much options available, use `-h` to find out all of them.
 
 After everything is ready, simply execute:
 
-   youtube-dl-webui -c CONFIGURATION_FILE
+    youtube-dl-webui -c CONFIGURATION_FILE
 
 A server will be started locally. The default port is **5000**.
 
+# Docker image
+
+There also exists a docker image to easy the deployment. Check [HERE] for more.
+
 ---
 
 [1]: https://github.com/rg3/youtube-dl
 [2]: https://github.com/avignat/Youtube-dl-WebUI
 [3]: https://github.com/pallets/flask
+[4]: https://hub.docker.com/r/d0u9/youtube-dl-webui/
 
diff --git a/screen_shot/1.gif b/screen_shot/1.gif
new file mode 100644
index 0000000..706345d
Binary files /dev/null and b/screen_shot/1.gif differ
diff --git a/youtube_dl_webui/static/css/global.css b/youtube_dl_webui/static/css/global.css
index 74c0a54..556ad55 100644
--- a/youtube_dl_webui/static/css/global.css
+++ b/youtube_dl_webui/static/css/global.css
@@ -22,6 +22,10 @@ html, body {
     flex-flow: column;
 }
 
+a {
+    text-decoration:none;
+}
+
 [v-cloak] {
     display: none!important;
 }
diff --git a/youtube_dl_webui/static/css/modalComponent.css b/youtube_dl_webui/static/css/modalComponent.css
index fcc787f..12b698a 100644
--- a/youtube_dl_webui/static/css/modalComponent.css
+++ b/youtube_dl_webui/static/css/modalComponent.css
@@ -16,7 +16,7 @@
 }
 
 .modal-container {
-    width: 400px;
+    width: 500px;
     margin: 0px auto;
     padding: 20px;
     background-color: #fff;
@@ -27,8 +27,10 @@
 }
 
 .modal-header div {
+    font-weight: bold;
+    font-size: 20px;
     margin-top: 0;
-    color: #42b983;
+    color: #020202;
 }
 
 .modal-body div {
@@ -38,13 +40,48 @@
     align-items: center;
 }
 
+.modal-body label {
+    min-width: 60px;
+    max-width: 100px;
+}
+
 .modal-body input {
     font-size: 15px;
     display: block;
     width: 100%;
+    height: 12px;
     padding: 5px;
 }
 
+.modal-body hr {
+    border: 0; 
+    height: 1px; 
+    margin-left:auto;
+    margin-right:auto;
+    width: 40%;
+}
+
+.modal-body .left-hr {
+    float: left;
+    background-image: -webkit-linear-gradient(left, #f0f0f0, #000000, #000000);
+    background-image: -moz-linear-gradient(left, #f0f0f0, #000000, #000000);
+    background-image: -ms-linear-gradient(left, #f0f0f0, #000000, #000000);
+    background-image: -o-linear-gradient(left, #f0f0f0, #000000, #000000); 
+}
+
+.modal-body .right-hr {
+    float: right;
+    background-image: -webkit-linear-gradient(left, #000000, #000000, #f0f0f0);
+    background-image: -moz-linear-gradient(left, #000000, #000000, #f0f0f0);
+    background-image: -ms-linear-gradient(left, #000000, #000000, #f0f0f0);
+    background-image: -o-linear-gradient(left, #000000, #000000, #f0f0f0); 
+}
+
+.modal-body .caption {
+    width: 80px;
+    font-weight: bold;
+}
+
 .modal-footer {
     display: flex;
     justify-content: center;
diff --git a/youtube_dl_webui/static/js/global.js b/youtube_dl_webui/static/js/global.js
index a90af33..b717155 100644
--- a/youtube_dl_webui/static/js/global.js
+++ b/youtube_dl_webui/static/js/global.js
@@ -7,11 +7,15 @@ var videoDownload = (function (Vue, extendAM){
         videoList: [],
         videoListCopy: [],
         showModal: false,
+        modalType: 'addTask',
         // tablist: ['status', 'details', 'file24s', 'peers', 'options'],
         tablist: ['Status', 'Details', 'Log'],
         showTab: 'Status',
         stateCounter: { all: 0, downloading: 0, finished: 0, paused: 0, invalid: 0},
-        modalData: { url: '' },
+        modalData: {
+            add: { url: '' },
+            remove: {removeFile: false }
+        },
         currentSelected: null,
         taskDetails: {},
         taskInfoUrl: null,
@@ -45,16 +49,35 @@ var videoDownload = (function (Vue, extendAM){
             },
             methods: {
                 showAddTaskModal: function(){
-                    this.modalData.url = '';
+                    this.modalData.add.url = '';
                     this.showModal = true;
+                    this.modalType = 'addTask';
+                    console.log(this.modalData);
                     this.$nextTick(function(){
                         this.$refs.url.focus();
                     });
                 },
+                execFunction: function(){
+                    switch(this.modalType) {
+                        case 'addTask':
+                            this.addTask();
+                            break;
+                        case 'removeTask':
+                            this.removeTask();
+                            break;
+                    }
+                },
+                showRemoveTaskModal: function(){
+                    this.modalData.remove.removeFile = false;
+                    this.showModal = true;
+                    this.modalType = 'removeTask';
+                },
                 addTask: function(){
+                    console.log(this.modalData.add);
                     var _self = this;
                     var url = _self.headPath + 'task';
-                    Vue.http.post(url, _self.modalData, {emulateJSON: true}).then(function(res){ _self.showModal = false;
+                    Vue.http.post(url, _self.modalData.add, {emulateJSON: false}).then(function(res){
+                        _self.showModal = false;
                         that.getTaskList();
                     }, function(err){
                         _self.showAlertToast(err, 'error');
@@ -63,14 +86,22 @@ var videoDownload = (function (Vue, extendAM){
                 removeTask: function(){
                     var _self = this;
                     var url = _self.headPath + 'task/tid/' + (_self.videoList[_self.currentSelected] && _self.videoList[_self.currentSelected].tid);
+                    if(_self.modalData.remove.removeFile){
+                        url += '?del_file=true';
+                    }
                     Vue.http.delete(url).then(function(res){
                         _self.showAlertToast('Task Delete', 'info');
                         _self.videoList.splice(_self.currentSelected, _self.currentSelected+1);
+                        _self.showModal = false;
                         that.getTaskList();
                     }, function(err){
                         _self.showAlertToast(err, 'error');
                     });
                 },
+                removeData: function(){
+                    this.modalData.remove.removeFile = true;
+                    this.removeTask();
+                },
                 pauseTask: function(){
                     var _self = this;
                     var url = _self.headPath + 'task/tid/' +  (_self.videoList[_self.currentSelected] && _self.videoList[_self.currentSelected].tid) + '?act=pause';
@@ -91,6 +122,10 @@ var videoDownload = (function (Vue, extendAM){
                         _self.showAlertToast(err, 'error');
                     });
                 },
+                about: function() {
+                    this.showModal = true;
+                    this.modalType = 'about';
+                },
                 selected: function(index){
                     var _self = this;
                     this.currentSelected = index;
@@ -101,9 +136,11 @@ var videoDownload = (function (Vue, extendAM){
                     var _self = this;
                     if(!_self.taskInfoUrl) return false;
                     Vue.http.get(_self.taskInfoUrl).then(function(res){
-                        console.log(res.data);
-                        _self.taskDetails = JSON.parse(res.data).detail;
-                        console.log(_self.taskDetails);
+                        var responseJSON = JSON.parse(res.data);
+                        if(responseJSON.status === 'error'){
+                            return false;
+                        }
+                        _self.taskDetails = responseJSON.detail;
                     }, function(err){
                         _self.showAlertToast('Network connection lost', 'error');
                     });
@@ -199,7 +236,6 @@ var videoDownload = (function (Vue, extendAM){
 
     videoDownload.getTaskList = function() {
         var that = videoDownload;
-        console.log(that.tasksData.headPath);
         var url = that.tasksData.headPath + 'task/list';
         url = url + '?state=' + that.tasksData.status;
         Vue.http.get(url).then(function(res){
@@ -212,7 +248,6 @@ var videoDownload = (function (Vue, extendAM){
                                               that.tasksData.stateCounter.invalid;
             that.updateVm();
         }, function(err){
-            console.log(err)
             that.vm.showAlertToast('Network connection lost', 'error');
         });
     };
diff --git a/youtube_dl_webui/templates/index.html b/youtube_dl_webui/templates/index.html
index 02cb63b..ce463aa 100644
--- a/youtube_dl_webui/templates/index.html
+++ b/youtube_dl_webui/templates/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
     <head>
-        <title>This is a test template</title>
+        <title>youtube-dl-webUI</title>
         <meta charset="utf-8">
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='font-awesome/css/font-awesome.min.css') }}">
         <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/global.css') }}">
@@ -29,10 +29,10 @@
                             <div class="modal-footer">
                                 <slot name="footer">
                                 <button class="modal-default-button" @click="$emit('confirm')">
-                                    OK
+                                    ok
                                 </button>
                                 <button class="modal-default-button" @click="$emit('close')">
-                                    CANCEL
+                                    cancel
                                 </button>
                                 </slot>
                             </div>
@@ -45,9 +45,10 @@
             <header>
                 <div class="operBtns">
                     <button @click="showAddTaskModal"><i class="fa fa-plus" aria-hidden="true"></i> Add</button>
-                    <button @click="removeTask"><i class="fa fa-minus" aria-hidden="true"></i> Remove</button>
+                    <button @click="showRemoveTaskModal"><i class="fa fa-minus" aria-hidden="true"></i> Remove</button>
                     <button @click="pauseTask"><i class="fa fa-pause" aria-hidden="true"></i> Pause</button>
                     <button @click="resumeTask"><i class="fa fa-play" aria-hidden="true"></i> Resume</button>
+                    <button @click="about" style="float:right"><i class="fa fa-question-circle" aria-hidden="true"></i> About</button>
                 </div>
             </header>
             <div class="main-body">
@@ -108,11 +109,51 @@
                         </tbody>
                     </table>
                 </div>
-                <modal v-if="showModal" @close="showModal = false" @confirm="addTask" v-cloak>
-                <div slot="header">URL to download</div>
-                <div slot="body" v-cloak><input type="text" ref="url" v-model="modalData.url" v-cloak @keyup.enter="addTask" @keyup.esc="showModal = false"/></div>
-                </modal>
-                <vue-toast ref='toast'></vue-toast>
+            <modal v-if="showModal" @close="showModal = false" @confirm="execFunction" v-cloak>
+                <template v-if="modalType === 'about'">
+                    <div slot="header">About</div>
+                    <div slot="body" v-cloak style="display:block">
+                        <div style="justify-content: left;">
+                            <span class="caption">Version:</span>web_dev
+                        </div>
+                        <div style="justify-content: left;">
+                            <span class="caption">Github:</span><a href="https://github.com/d0u9/youtube-dl-webui">https://github.com/d0u9/youtube-dl-webui</a>
+                        </div>
+                        <div style="justify-content: left;">
+                            <span class="caption">License:</span><a href="https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html">GPL-2.0</a>
+                        </div>
+                    </div>
+                    <div slot="footer">
+                        <button class="modal-default-button" @click="showModal = false">OK</button>
+                    </div>
+                </template>
+                <template v-if="modalType === 'removeTask'">
+                    <div slot="header">Remove Task</div>
+                    <div slot="body" v-cloak style="display:block">
+                        <p>Are you sure you want to delete the task?</p>
+                    </div>
+                    <div slot="footer">
+                        <button class="modal-default-button" @click="showModal = false">cancel</button>
+                        <button class="modal-default-button" @click="removeData" style="width:auto;">remove with data</button>
+                        <button class="modal-default-button" @click="removeTask">remove task</button>
+                    </div>
+                </template>
+                <template v-if="modalType === 'addTask'">
+                    <div slot="header">Add Task</div>
+                    <div slot="body" v-cloak style="display:block">
+                        <div>
+                            <label>URL:</label><input type="text" ref="url" v-model="modalData.add.url" v-cloak @keyup.enter="addTask" @keyup.esc="showModal = false"/>
+                        </div>
+                        <div style="text-align:center;">
+                            <hr class="left-hr" /><span style="font-weight: bold;">youtube-dl options</span><hr class="right-hr" />
+                        </div>
+                        <div>
+                            <label>Format:</label><input type="text" ref="format" v-model="modalData.format" v-cloak @keyup.esc="showModal = false"/>
+                        </div>
+                    </div>
+                </template>
+            </modal>
+            <vue-toast ref='toast'></vue-toast>
             </div>
             <footer>
                 <div class="info-tabs">