[Kimchi-devel] [PATCH] [new-ui] Edit Guests modal window

sguimaraes943 at gmail.com sguimaraes943 at gmail.com
Tue Nov 24 20:32:37 UTC 2015


From: samhenri <samuel.guimaraes at eldorado.org.br>

Addind new-ui to Edit Guests and Attach Storage Device modal windows.
This commit also fixes some wok.message instances that were showing behind other modal windows.

Signed-off-by: samhenri <samuel.guimaraes at eldorado.org.br>
---
 .../kimchi/ui/css/theme-default/guest-edit.css     | 420 ----------------
 .../ui/css/theme-default/guest-storage-add.css     |  81 ---
 src/wok/plugins/kimchi/ui/js/src/kimchi.api.js     |   6 +-
 .../kimchi/ui/js/src/kimchi.guest_edit_main.js     | 550 +++++++++++----------
 .../ui/js/src/kimchi.guest_storage_add.main.js     |  39 +-
 .../plugins/kimchi/ui/pages/guest-edit.html.tmpl   | 257 +++++-----
 .../kimchi/ui/pages/guest-storage-add.html.tmpl    |  99 ++--
 ui/css/src/modules/_edit-guests.scss               | 362 ++++++++++++++
 ui/css/src/modules/_modal-flat.scss                |  19 +-
 ui/css/src/modules/_templates.scss                 |  16 +-
 ui/css/src/wok.scss                                |   2 +
 ui/pages/wok-ui.html.tmpl                          |   1 +
 12 files changed, 873 insertions(+), 979 deletions(-)
 delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css
 delete mode 100644 src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css
 create mode 100644 ui/css/src/modules/_edit-guests.scss

diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css b/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css
deleted file mode 100644
index 98901da..0000000
--- a/src/wok/plugins/kimchi/ui/css/theme-default/guest-edit.css
+++ /dev/null
@@ -1,420 +0,0 @@
-/*
- * Project Kimchi
- *
- * Copyright IBM, Corp. 2013-2015
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,pick 3b4871a Squash with SCSS patch
-
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#guest-edit-window #action-button-container {
-    padding-right: 0;
-}
-
-#guest-edit-window #guest-edit-button-cancel {
-    margin-left: 10px;
-}
-
-#guest-edit-tabs {
-    background: transparent;
-    border: none;
-    height: 100%;
-    padding: 0;
-}
-
-#form-guest-edit-general {
-    padding: 1em;
-}
-
-#form-guest-edit-general .edit-general-inline {
-    display: inline-block;
-}
-
-#form-guest-edit-storage input[readonly] {
-    background: none;
-    border-color: transparent;
-    text-overflow: ellipsis;
-}
-
-.guest-edit-fieldset {
-    padding-right: 0;
-}
-
-.guest-edit-wrapper-label {
-    height: 30px;
-    line-height: 30px;
-    margin-top: 10px;
-    vertical-align: top;
-    min-width: 100px;
-    font-weight: lighter;
-    font-family: 'Helvetica Neue', Helvetica, Arial;
-}
-
-#form-guest-edit-storage .guest-edit-wrapper-label {
-    width: 60px;
-}
-
-.guest-edit-wrapper-controls {
-    width: 470px;
-    margin-top: 5px;ß
-}
-
-#form-guest-edit-storage .guest-edit-wrapper-controls {
-    width: 486px;
-}
-
-.guest-edit-wrapper-controls input[type="text"] {
-    font-size: 16px;
-    height: 30px;
-    width: 450px;
-    border: 1px solid #CCCCCC;
-}
-
-.guest-edit-wrapper-controls input[type="text"][disabled] {
-    color: #bbb;
-    background-color: #fafafa;
-    cursor: not-allowed;
-    border: 1px solid #CCCCCC;
-}
-
-.guest-edit-cdrom-row-container {
-    max-height: 180px;
-    overflow: auto;
-}
-
-.guest-edit-cdrom-row-container input[type="text"] {
-    width: 400px;
-}
-
-#form-guest-edit-storage .header,
-.guest-edit-snapshot .header,
-.guest-edit-interface .header,
-#form-guest-edit-permission .ldap .header {
-    margin-bottom: 8px;
-    padding-bottom: 2px;
-    font-weight: bold;
-    border-bottom: 1px solid #999999;
-    overflow: hidden;
-}
-
-#form-guest-edit-storage .body .item,
-.guest-edit-snapshot .body .item,
-.guest-edit-snapshot .task .item,
-.guest-edit-interface .body .item {
-    margin: 5px 0;
-}
-
-#form-guest-edit-storage .cell,
-.guest-edit-interface .cell {
-    display: inline-block;
-    width: 200px;
-}
-
-.guest-edit-snapshot .cell {
-    display: inline-block;
-}
-
-.guest-edit-snapshot .sel {
-    width: 25px;
-    vertical-align: top;
-}
-
-.guest-edit-snapshot .icon {
-    background: url('../images/theme-default/kimchi-loading15x15.gif') no-repeat;
-    display: block;
-    width: 16px;
-    height: 16px;
-    vertical-align: middle;
-    margin-left: 2px;
-}
-
-.guest-edit-snapshot .name {
-    width: 400px;
-}
-
-.guest-edit-snapshot .created {
-    width: 270px;
-}
-
-#form-guest-edit-storage .cell.dev {
-    width: 60px;
-}
-
-#form-guest-edit-storage .cell.path {
-    width: 440px;
-}
-
-#form-guest-edit-storage .cell.dev input,
-#form-guest-edit-storage .cell.path input {
-    box-sizing: border-box;
-    width: 100%;
-}
-
-.guest-edit-interface .body select {
-    width: 180px;
-    padding: 0px;
-}
-
-#form-guest-edit-storage .action-area,
-.guest-edit-snapshot .action-area,
-.guest-edit-interface .action-area {
-    float: right;
-}
-
-#form-guest-edit-storage .action-area {
-    line-height: 24px;
-}
-
-#form-guest-edit-storage button,
-.guest-edit-snapshot button,
-.guest-edit-interface button {
-    width: 20px;
-    height: 20px;
-}
-
-#form-guest-edit-storage .body button:not(:last-child),
-.guest-edit-interface .body button:not(:last-child) {
-    margin-right: 2px;
-}
-
-.guest-edit-snapshot .hide,
-.guest-edit-interface .hide {
-    display: none!important;
-}
-
-.guest-edit-permission .pam {
-    height: 220px;
-    padding: 5px 10px!important;
-}
-
-.guest-edit-permission .hide {
-    display: none;
-}
-
-.guest-edit-permission .pam .column {
-    display: inline-block;
-    vertical-align: top;
-}
-
-.guest-edit-permission .pam .title {
-    margin-bottom: 3px;
-}
-
-.guest-edit-permission .pam input[type="text"] {
-    margin-bottom: 3px;
-    font-size: 12px;
-    width: 97%;
-}
-
-.guest-edit-permission .pam .body {
-    border: 1px solid #999999;
-    font-size: 12px;
-    padding: 1px;
-    height: 192px;
-    overflow: auto;
-}
-
-.guest-edit-permission .pam .body .head {
-    margin-bottom: 3px;
-    font-weight: bold;
-    background: linear-gradient(to bottom, #E5E5E5 0%, #C4C4C4 100%) repeat scroll 0 0 transparent;
-}
-
-.guest-edit-permission .pam .body .item {
-    padding: 2px 3px;
-    margin-bottom: 1px;
-    cursor: pointer;
-}
-
-.guest-edit-permission .pam .body .item:hover {
-    background-color: #AAAAAA;
-}
-
-.guest-edit-permission .pam .body .item-picked {
-    background-color: #BBBBBB;
-}
-
-.guest-edit-permission .pam .body .item .icon {
-    display: inline-block;
-    height: 15px;
-    width: 15px;
-    vertical-align: bottom;
-}
-
-.guest-edit-permission .pam .body .item .user-icon {
-    background: url('../images/theme-default/user.png') no-repeat scroll;
-    background-size: 15px 15px;
-}
-
-.guest-edit-permission .pam .body .item .group-icon {
-    background: url('../images/theme-default/group.png') no-repeat scroll;
-    background-size: 15px 15px;
-}
-
-.guest-edit-permission .pam .body .column-user {
-    width: 48%;
-}
-.guest-edit-permission .pam .body .column-group {
-    width: 50%;
-}
-
-.guest-edit-permission .pam .control {
-    width: 5%;
-}
-
-.guest-edit-permission .pam .control button {
-    width: 26px;
-    margin-left: 7px;
-}
-
-.guest-edit-permission .pam .control button:first-child {
-    margin-top: 110px;
-    margin-bottom: 2px;
-}
-
-.guest-edit-permission .pam .control .ui-button-text-only .ui-button-text {
-    padding: 2px 8px;
-}
-
-.guest-edit-permission .pam .avail {
-    width: 46%;
-}
-
-.guest-edit-permission .pam .selected {
-    width: 46%;
-    float: right;
-}
-
-#form-guest-edit-permission .ldap .body .item {
-    margin: 8px 0;
-}
-
-#form-guest-edit-permission .ldap .cell {
-    width: 250px;
-}
-
-#form-guest-edit-permission .ldap .action-area {
-    float: right;
-    line-height: 24px;
-}
-
-#form-guest-edit-permission .ldap button {
-    width: 20px;
-    height: 20px;
-}
-
-#form-guest-edit-permission input[type="text"] {
-    width: 300px;
-}
-
-#form-guest-edit-permission .ldap .header button {
-    margin-bottom: 1px;
-}
-
-#form-guest-edit-permission .ldap .checked {
-    border-color: red;
-    border-style: solid;
-    border-width: 1px;
-}
-
-#form-guest-edit-permission .ldap .checked.hide {
-    display: none;
-}
-
-.guest-edit-pci {
-    height: 79%;
-    overflow: auto;
-    font-size: 12px;
-}
-
-.guest-edit-pci .guest-scroll-indent {
-    width: 783px;
-}
-
-.guest-edit-pci .filter {
-    height: 35px;
-    margin-right: 5px;
-    overflow: hidden;
-}
-
-.guest-edit-pci .group {
-    float: right;
-}
-
-.guest-edit-pci .filter .control {
-    border: 1px solid #AAAAAA;
-    font-size: 12px;
-    background-color: white;
-}
-
-.guest-edit-pci .filter select {
-    border-right: 0px!important;
-    border-radius: 7px 0px 0px 7px;
-    padding: 2px 2px 2px 7px;
-    width: 100px;
-    height: 24px;
-}
-
-.guest-edit-pci .filter select option {
-    padding-left: 7px;
-}
-
-.guest-edit-pci .filter input {
-    border-radius: 0px 7px 7px 0px;
-    padding: 3px 3px 3px 10px;
-    width: 200px;
-    height: 16px;
-    font-style: italic;
-}
-
-.guest-edit-pci .header {
-    margin-bottom: 8px;
-    padding-bottom: 2px;
-    font-weight: bold;
-    border-bottom: 1px solid #999999;
-}
-
-.guest-edit-pci .item {
-    margin-bottom: 4px;
-    overflow: hidden;
-}
-
-.guest-edit-pci .cell {
-    display: inline-block;
-    vertical-align: middle;
-    margin-right: 10px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.guest-edit-pci .item button {
-    width: 20px;
-    height: 20px;
-    float: right;
-}
-
-.guest-edit-pci .name {
-    width: 18%;
-    max-width: 18%;
-}
-
-.guest-edit-pci .product {
-    width: 45%;
-    max-width: 45%;
-}
-
-.guest-edit-pci .vendor {
-    width: 25%;
-    max-width: 25%;
-}
diff --git a/src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css b/src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css
deleted file mode 100644
index 9cc41e8..0000000
--- a/src/wok/plugins/kimchi/ui/css/theme-default/guest-storage-add.css
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Project Kimchi
- *
- * Copyright IBM, Corp. 2014
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-#guest-storage-add-window {
-    font-size: 13px;
-    height: 600px;
-    width: 700px;
-}
-
-.guest-storage-add-fieldset {
-    padding: 1em;
-}
-
-#guest-storage-add-window .btn {
-    width: 587px;
-}
-
-#form-guest-storage-add .form-section .field {
-    overflow: visible;
-}
-
-#guest-storage-add-window input[type="text"] {
-    font-size: 16px;
-    height: 38px;
-    background: #fff;
-    -webkit-border-radius: 5px;
-    border-radius: 5px;
-    box-shadow: 2px 2px 2px #eee inset;
-    border-top: 1px solid #bbb;
-    border-left: 1px solid #bbb;
-    padding-left: 10px;
-    width: 600px;
-}
-
-#guest-storage-add-window input[type="text"][disabled] {
-    color: #bbb;
-    background-color: #fafafa;
-    cursor: not-allowed;
-}
-
-.guest-storage-add-wrapper-label, .guest-storage-add-wrapper-controls {
-    display: inline-block;
-}
-
-.guest-storage-add-wrapper-label {
-    height: 38px;
-    line-height: 38px;
-    margin-top: 5px;
-    vertical-align: top;
-    width: 80px;
-}
-
-.guest-storage-add-wrapper-controls {
-    width: 470px;
-}
-
-#vm-storage-button-add[disabled] {
-    background: #c0c0c0;
-    color: #ddd;
-    padding-left: 26px;
-}
-
-#vm-storage-button-add.loading[disabled] {
-    background: url("../../images/theme-default/loading.gif") 7px center no-repeat #c0c0c0;
-    color: #ddd;
-    padding-left: 26px;
-}
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
index ff0c172..cb6aaab 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.api.js
@@ -950,7 +950,7 @@ var kimchi = {
             resend : true,
             success : suc,
             error : err ? err : function(data) {
-                wok.message.error(data.responseJSON.reason);
+                wok.message.error(data.responseJSON.reason,'#alert-modal-container');
             }
         });
     },
@@ -964,7 +964,7 @@ var kimchi = {
             data : JSON.stringify(device),
             success : suc,
             error : err ? err : function(data) {
-                wok.message.error(data.responseJSON.reason);
+                wok.message.error(data.responseJSON.reason,'#alert-modal-container');
             }
         });
     },
@@ -977,7 +977,7 @@ var kimchi = {
             dataType : 'json',
             success : suc,
             error : err ? err : function(data) {
-                wok.message.error(data.responseJSON.reason);
+                wok.message.error(data.responseJSON.reason,'#alert-modal-container');
             }
         });
     },
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js
index 9005d9b..7d3a5e3 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_edit_main.js
@@ -16,26 +16,59 @@
  * limitations under the License.
  */
 kimchi.guest_edit_main = function() {
-    var buttonContainer = $('#action-button-container');
-    $('#guest-edit-tabs').tabs({
-        beforeActivate: function(event, ui) {
-            var display_list = null;
-            if(kimchi.thisVMState === "running") {
-                display_list = ['form-guest-edit-permission'];
-            } else {
-                display_list = ['form-guest-edit-general', 'form-guest-edit-permission'];
-            }
-            $(buttonContainer).addClass('hidden');
-            var deactivated = ui['newPanel'];
-            if(display_list.indexOf($(deactivated).attr('id')) >= 0) {
-                $(buttonContainer).removeClass('hidden');
-            }
+    var authType;
+    var formTargetId;
+    //var buttonContainer = $('#action-button-container');
+    var guestEditForm = $('#form-guest-edit-general');
+    var saveButton = $('#guest-edit-button-save');
+
+    $('#guest-edit-window a[data-toggle="tab"]').on('show.bs.tab', function(tab) {
+        tab.target // newly activated tab
+        tab.relatedTarget // previous active tab
+        var display_list = null;
+        if (kimchi.thisVMState === "running") {
+            display_list = ['form-guest-edit-permission'];
+        } else {
+            display_list = ['form-guest-edit-general', 'form-guest-edit-permission'];
+        }
+        $(saveButton).prop('disabled', true);
+        formTargetId = $(tab.target).data('id');
+        var deactivated = $('form#' + formTargetId);
+        if (display_list.indexOf($(deactivated).attr('id')) >= 0) {
+            $(saveButton).prop('disabled', false);
         }
     });
 
-    var guestEditForm = $('#form-guest-edit-general');
-    var saveButton = $('#guest-edit-button-save');
-    var authType;
+    var submitForm = function(event) {
+
+        // tap map, "general": 0, "storage": 1, "interface": 2, "permission": 3, "password": 4
+        var submit_map = {
+            0: generalSubmit,
+            3: permissionSubmit
+        };        
+        var currentTab = $('#guest-edit-window li.active a[data-toggle="tab"]').data('id');
+        var toSubmit = parseInt($('#'+currentTab).index());
+        var submitFun = submit_map[toSubmit];
+        submitFun && submitFun(event);
+        event.preventDefault();
+    };
+
+    $(guestEditForm).on('submit', submitForm);
+    $(saveButton).on('click', submitForm);
+
+
+    $('#guest-edit-window a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
+        var target = $(this).attr('href');
+        $(target).css('left', '-' + $(window).width() + 'px');
+        var left = $(target).offset().left;
+        $(target).css({
+            left: left
+        }).animate({
+            "left": "0px"
+        }, "10");
+    });
+
+    $('#guest-edit-window a[data-toggle="tab"]:first').tab('show');
 
     var refreshCDROMs = function() {
         kimchi.listVMStorages({
@@ -50,17 +83,17 @@ kimchi.guest_edit_main = function() {
                 container.append(templated);
             });
 
-            $('.replace', container).button();
+            //$('.replace', container).button();
 
-            $('.detach', container).button();
+            //$('.detach', container).button();
 
             if (kimchi.thisVMState === 'running') {
                 $('.detach[data-type="cdrom"]', container).remove();
             }
 
-            $('.save', container).button();
+            //$('.save', container).button();
 
-            $('.cancel', container).button();
+            //$('.cancel', container).button();
 
         });
     };
@@ -68,10 +101,8 @@ kimchi.guest_edit_main = function() {
     var initStorageListeners = function() {
         var container = $('#form-guest-edit-storage .body');
         var toggleCDROM = function(rowNode, toEdit) {
-            $('button.replace,button.detach', rowNode)
-                [(toEdit ? 'add' : 'remove') + 'Class']('hidden');
-            $('button.save,button.cancel', rowNode)
-                [(toEdit ? 'remove' : 'add') + 'Class']('hidden');
+            $('button.replace,button.detach', rowNode)[(toEdit ? 'add' : 'remove') + 'Class']('hidden');
+            $('button.save,button.cancel', rowNode)[(toEdit ? 'remove' : 'add') + 'Class']('hidden');
             var pathBox = $('.path input', rowNode)
                 .prop('readonly', !toEdit);
             toEdit && pathBox.select();
@@ -93,10 +124,10 @@ kimchi.guest_edit_main = function() {
         $(container).on('click', 'button.detach', function(e) {
             e.preventDefault();
             var settings = {
-                title : i18n['KCHAPI6004M'],
-                content : i18n['KCHVMCD6001M'],
-                confirm : i18n['KCHAPI6002M'],
-                cancel : i18n['KCHAPI6003M']
+                title: i18n['KCHAPI6004M'],
+                content: i18n['KCHVMCD6001M'],
+                confirm: i18n['KCHAPI6002M'],
+                cancel: i18n['KCHAPI6003M']
             };
             if ($(this).data('type') == "disk")
                 settings['content'] = i18n['KCHVMCD6009M'];
@@ -128,7 +159,7 @@ kimchi.guest_edit_main = function() {
             }, function(result) {
                 var errText = result['reason'] ||
                     result['responseJSON']['reason'];
-                wok.message.error(errText);
+                wok.message.error(errText, '#alert-modal-container');
             });
         });
 
@@ -140,7 +171,7 @@ kimchi.guest_edit_main = function() {
     };
 
     var setupInterface = function() {
-        $(".add", "#form-guest-edit-interface").button().click(function(evt){
+        $(".add", "#form-guest-edit-interface").on('click', function(evt) {
             evt.preventDefault();
             addItem({
                 id: -1,
@@ -152,88 +183,89 @@ kimchi.guest_edit_main = function() {
                 editMode: ""
             });
         });
-        var toggleEdit = function(item, on, itemId){
+        var toggleEdit = function(item, on, itemId) {
             $("#label-mac-" + itemId, item).toggleClass("hide", on);
             $("#edit-mac-" + itemId, item).toggleClass("hide", !on);
             $("#label-network-" + itemId, item).toggleClass("hide", false);
             $("select", item).toggleClass("hide", true);
+            $(".bootstrap-select", item).toggleClass("hide", true);
             $(".action-area", item).toggleClass("hide");
         };
         var addItem = function(data) {
             if (data.id == -1) {
                 data.id = $('#form-guest-edit-interface > .body').children().size()
             }
-            if (data.ips == "" || data.ips == null){
+            if (data.ips == "" || data.ips == null) {
                 data.ips = i18n["KCHNET6001M"];
-            }else{
+            } else {
                 data.ips = data.ips;
             }
-            var itemNode = $.parseHTML(wok.substitute($('#interface-tmpl').html(),data));
+            var itemNode = $.parseHTML(wok.substitute($('#interface-tmpl').html(), data));
             $(".body", "#form-guest-edit-interface").append(itemNode);
             $("select", itemNode).append(networkOptions);
-            if(data.network!==""){
+            $("select", itemNode).selectpicker();
+            if (data.network !== "") {
                 $("select", itemNode).val(data.network);
             }
-            $(".edit", itemNode).button({ disabled: kimchi.thisVMState === "running" }).click(function(evt){
+            $('.edit', itemNode).attr('disabled', kimchi.thisVMState === "running");
+            $(".edit", itemNode).on('click', function(evt) {
                 evt.preventDefault();
                 toggleEdit($(this).closest('div'), true, data.id);
             });
-            $(".delete", itemNode).button({
-                icons: { primary: "ui-icon-trash" },
-                text: false
-            }).click(function(evt){
+            $(".delete", itemNode).on('click', function(evt) {
                 evt.preventDefault();
                 var item = $(this).parent().parent();
-                kimchi.deleteGuestInterface(kimchi.selectedGuest, item.prop("id"), function(){
+                kimchi.deleteGuestInterface(kimchi.selectedGuest, item.prop("id"), function() {
                     item.remove();
                 });
             });
-            $(".save", itemNode).button().click(function(evt){
+            $(".save", itemNode).on('click', function(evt) {
                 evt.preventDefault();
                 var item = $(this).parent().parent();
                 var interface = {
                     network: $("select", item).val(),
-                    type: "network",
-                    mac: $(":text", item).val(),
-                    ips: $(".ipText", item).val()
+                        type: "network",
+                        mac: $(":text", item).val(),
+                        ips: $(".ipText", item).val()
                 };
-                var postUpdate = function(mac){
+                var postUpdate = function(mac) {
                     $("#label-network-" + data.id, item).text(interface.network);
                     $("#label-mac-" + data.id, item).text(mac);
                     $("#edit-mac-" + data.id, item).val(mac);
                     toggleEdit(item, false, data.id);
                 };
-                if(item.prop("id")==""){
-                    kimchi.createGuestInterface(kimchi.selectedGuest, interface, function(data){
+                if (item.prop("id") == "") {
+                    kimchi.createGuestInterface(kimchi.selectedGuest, interface, function(data) {
                         item.prop("id", data.mac);
                         postUpdate(data.mac);
                     });
-                }else{
+                } else {
                     if (item.prop('id') == interface.mac) {
                         toggleEdit(item, false, data.id);
                     } else {
                         kimchi.updateGuestInterface(kimchi.selectedGuest, item.prop('id'),
-                                interface, function(data){
-                            item.prop("id", data.mac);
-                            postUpdate(data.mac);
-                        });
+                            interface,
+                            function(data) {
+                                item.prop("id", data.mac);
+                                postUpdate(data.mac);
+                            });
                     }
                 }
             });
-            $(".cancel", itemNode).button().click(function(evt){
+            $(".cancel", itemNode).on('click', function(evt) {
                 evt.preventDefault();
                 var item = $(this).parent().parent();
-                $("label", item).text()==="" ? item.remove() : toggleEdit(item, false, data.id);
+                $("label", item).text() === "" ? item.remove() : toggleEdit(item, false, data.id);
             });
         };
         var networkOptions = "";
-        kimchi.listNetworks(function(data){
-            for(var i=0;i<data.length;i++){
-                var isSlected = i==0 ? " selected" : "";
-                networkOptions += "<option"+isSlected+">"+data[i].name+"</option>";
+        kimchi.listNetworks(function(data) {
+            for (var i = 0; i < data.length; i++) {
+                var isSlected = i == 0 ? " selected" : "";
+                networkOptions += "<option" + isSlected + ">" + data[i].name + "</option>";
             }
-            kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data){
-                for(var i=0;i<data.length;i++){
+            kimchi.getGuestInterfaces(kimchi.selectedGuest, function(data) {
+                for (var i = 0; i < data.length; i++) {
                     data[i].viewMode = "";
                     data[i].editMode = "hide";
                     data[i].id = i;
@@ -244,8 +276,8 @@ kimchi.guest_edit_main = function() {
     };
 
     var setupPermission = function() {
-       //set up for LDAP
-       $(".add", "#form-guest-edit-permission").button().click(function(evt){
+        //set up for LDAP
+        $(".add", "#form-guest-edit-permission").on('click', function(evt) {
             evt.preventDefault();
             addItem({
                 user: "",
@@ -256,16 +288,16 @@ kimchi.guest_edit_main = function() {
             });
         });
         var addItem = function(data) {
-            var itemNode = $.parseHTML(wok.substitute($('#ldap-user-tmpl').html(),data));
+            var itemNode = $.parseHTML(wok.substitute($('#ldap-user-tmpl').html(), data));
             $(".body", "#form-guest-edit-permission .ldap").append(itemNode);
-            $(".delete", itemNode).button().click(function(evt){
+            $(".delete", itemNode).on('click', function(evt) {
                 evt.preventDefault();
                 var item = $(this).parent().parent();
                 item.remove();
             });
             $("input").focusout(function() {
                 var item = $(this).parent().parent();
-                var user= $(this).val();
+                var user = $(this).val();
                 item.prop("id", user);
                 $("label", item).text(user);
             });
@@ -277,95 +309,98 @@ kimchi.guest_edit_main = function() {
                 $(".checked", itemNode).addClass("hide");
             }
         };
-        var toggleEdit = function(item, on){
-            $("label", item).toggleClass("hide", on);
+        var toggleEdit = function(item, on) {
+            $(".cell span", item).toggleClass("hide", on);
             $("input", item).toggleClass("hide", !on);
             $(".action-area", item).toggleClass("hide");
         };
         //set up for PAM
-        var userNodes = {}, groupNodes = {};
+        var userNodes = {},
+            groupNodes = {};
         authType = kimchi.capabilities['auth']
         if (authType == 'pam') {
             $("#form-guest-edit-permission .ldap").hide();
-            kimchi.retrieveVM(kimchi.selectedGuest, function(vm){
-                kimchi.getUsers(function(users){
-                    kimchi.getGroups(function(groups){
-                        var subArray = function(a1, a2){ //a1-a2
-                            for(var i=0; i<a2.length; i++){
-                                for(var j=0; j<a1.length; j++){
-                                    if(a2[i] == a1[j]){
+            kimchi.retrieveVM(kimchi.selectedGuest, function(vm) {
+                kimchi.getUsers(function(users) {
+                    kimchi.getGroups(function(groups) {
+                        var subArray = function(a1, a2) { //a1-a2
+                            for (var i = 0; i < a2.length; i++) {
+                                for (var j = 0; j < a1.length; j++) {
+                                    if (a2[i] == a1[j]) {
                                         a1.splice(j, 1);
                                         break;
                                     }
                                 }
                             }
                         };
-                        subArray(users, vm.users); subArray(groups, vm.groups);
+                        subArray(users, vm.users);
+                        subArray(groups, vm.groups);
                         init(users, groups, vm.users, vm.groups);
                     });
                 });
             });
         } else if (authType == 'ldap') {
             $("#form-guest-edit-permission .pam").hide();
-            kimchi.retrieveVM(kimchi.selectedGuest, function(vm){
-                for (var i=0; i<vm.users.length; i++) {
+            kimchi.retrieveVM(kimchi.selectedGuest, function(vm) {
+                for (var i = 0; i < vm.users.length; i++) {
                     addItem({
                         user: vm.users[i],
                         viewMode: "",
                         freeze: true,
                         editMode: "hide",
-                        checked: true});
+                        checked: true
+                    });
                 }
-           });
+            });
         }
-        var sortNodes = function(container, isUser){
+        var sortNodes = function(container, isUser) {
             nodes = container.children();
             var keys = [];
-            nodes.each(function(){
+            nodes.each(function() {
                 keys.push($("label", this).text());
             });
             keys.sort();
             container.empty();
-            for(var i=0; i<keys.length; i++){
+            for (var i = 0; i < keys.length; i++) {
                 var itemNode = isUser ? userNodes[keys[i]] : groupNodes[keys[i]];
-                $(itemNode).click(function(){
+                $(itemNode).click(function() {
                     $(this).toggleClass("item-picked");
                 });
                 container.append(itemNode);
             }
         };
-        var init = function(availUsers, availGroups, selUsers, selGroups){
-            var initNode = function(key, isUserNode){
+        var init = function(availUsers, availGroups, selUsers, selGroups) {
+            var initNode = function(key, isUserNode) {
                 var nodeGroups = isUserNode ? userNodes : groupNodes;
                 nodeGroups[key] = $.parseHTML(wok.substitute($('#permission-item-pam').html(), {
                     val: key,
-                    class: isUserNode? "user-icon" : "group-icon"
+                    class: isUserNode ? "fa-user" : "fa-users"
                 }));
             };
-            for(var i=0; i<availUsers.length; i++){
+            for (var i = 0; i < availUsers.length; i++) {
                 initNode(availUsers[i], true);
                 $("#permission-avail-users").append(userNodes[availUsers[i]]);
             }
             sortNodes($("#permission-avail-users"), true);
-            for(var i=0; i<selUsers.length; i++){
+            for (var i = 0; i < selUsers.length; i++) {
                 initNode(selUsers[i], true);
                 $("#permission-sel-users").append(userNodes[selUsers[i]]);
             }
             sortNodes($("#permission-sel-users"), true);
-            for(var i=0; i<availGroups.length; i++){
+            for (var i = 0; i < availGroups.length; i++) {
                 initNode(availGroups[i], false);
                 $("#permission-avail-groups").append(groupNodes[availGroups[i]]);
             }
             sortNodes($("#permission-avail-groups"), false);
-            for(var i=0; i<selGroups.length; i++){
+            for (var i = 0; i < selGroups.length; i++) {
                 initNode(selGroups[i], false);
                 $("#permission-sel-groups").append(groupNodes[selGroups[i]]);
             }
             sortNodes($("#permission-sel-groups"), false);
         };
-        var filterNodes = function(key, container){
-            container.children().each(function(){
-                $(this).css("display", $("label", this).text().indexOf(key)==-1 ? "none" : "");
+        var filterNodes = function(key, container) {
+            container.children().each(function() {
+                $(this).css("display", $("label", this).text().indexOf(key) == -1 ? "none" : "");
             });
         }
         $("#permission-avail-searchBox").on("keyup", function() {
@@ -378,7 +413,7 @@ kimchi.guest_edit_main = function() {
             filterNodes(key, $("#permission-sel-users"));
             filterNodes(key, $("#permission-sel-groups"));
         });
-        $('#permissionGo').button().click(function(evt) {
+        $('#permissionGo').on('click', function(evt) {
             evt.preventDefault();
             $("#permission-avail-users").children(".item-picked").appendTo("#permission-sel-users").removeClass("item-picked");
             sortNodes($("#permission-sel-users"), true);
@@ -388,7 +423,7 @@ kimchi.guest_edit_main = function() {
             filterNodes("", $("#permission-sel-users"));
             filterNodes("", $("#permission-sel-groups"));
         });
-        $('#permissionBack').button().click(function(evt) {
+        $('#permissionBack').on('click', function(evt) {
             evt.preventDefault();
             $("#permission-sel-users").children(".item-picked").appendTo("#permission-avail-users").removeClass("item-picked");
             sortNodes($("#permission-avail-users"), true);
@@ -399,211 +434,212 @@ kimchi.guest_edit_main = function() {
             filterNodes("", $("#permission-avail-groups"));
         });
     }
-    var filterPCINodes = function(group, text, targetName, targetIcon){
+
+    var filterPCINodes = function(group, text, targetName) {
         text = text.toLowerCase();
         targetName = targetName.toLowerCase();
-        $(".body", "#form-guest-edit-pci").children().each(function(){
-            var currentName = $(".name", this).text().toLowerCase();
-            var textFilter = currentName.indexOf(text)!=-1;
-            textFilter = textFilter || $(".product", this).text().toLowerCase().indexOf(text)!=-1;
-            textFilter = textFilter || $(".vendor", this).text().toLowerCase().indexOf(text)!=-1;
-            var display = "none";
-            var itemGroup = $("button", this).button("option", "icons").primary;
-            if (currentName == targetName){
-                itemGroup = targetIcon;                 
-            }
-            if(textFilter){
-                if(group == "all"){
-                    display = "";
-                }else if(group=="toAdd" && itemGroup=="ui-icon-plus"){
-                    display = ""
-                }else if(group == "added" && itemGroup=="ui-icon-minus"){
-                    display = ""
+        $('.body', '#form-guest-edit-pci').children().each(function() {
+            var currentName = $('.name', this).text().toLowerCase();
+            var textFilter = currentName.indexOf(text) !== -1;
+            textFilter = textFilter || $('.product', this).text().toLowerCase().indexOf(text) !== -1;
+            textFilter = textFilter || $('.vendor', this).text().toLowerCase().indexOf(text) !== -1;
+            var display = 'none';
+            var itemGroup = $('button i', this);
+            // if (currentName === targetName) {
+            //     itemGroup.addClass('fa ' + targetIcon);
+            // }
+            if (textFilter) {
+                if (group === 'all') {
+                    display = '';
+                } else if (group === 'toAdd' && itemGroup.hasClass('fa-power-off')) {
+                    display = '';
+                } else if (group === 'added' && itemGroup.hasClass('fa-ban')) {
+                    display = '';
                 }
             }
-            $(this).css("display", display);
+            $(this).css('display', display);
         });
-    }
-    var setupPCIDevice = function(){
-        kimchi.getAvailableHostPCIDevices(function(hostPCIs){
-            kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs){
-                setupNode(hostPCIs, "ui-icon-plus");
-                setupNode(vmPCIs, "ui-icon-minus");
+    };
+    var setupPCIDevice = function() {
+        kimchi.getAvailableHostPCIDevices(function(hostPCIs) {
+            kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs) {
+                setupNode(hostPCIs, 'fa-power-off');
+                setupNode(vmPCIs, 'fa-ban');
             });
         });
-        $("select", "#form-guest-edit-pci").change(function(){
-            filterPCINodes($(this).val(), $("input", "#form-guest-edit-pci").val(), "", "");
+        $('select', '#form-guest-edit-pci').change(function() {
+            filterPCINodes($(this).val(), $('input', '#form-guest-edit-pci').val(), '');
         });
-        $("input", "#form-guest-edit-pci").on("keyup", function() {
-            filterPCINodes($("select", "#form-guest-edit-pci").val(), $(this).val(), "", "");
+        $('select', '#form-guest-edit-pci').selectpicker();
+        $('input', '#form-guest-edit-pci').on('keyup', function() {
+            filterPCINodes($('select', '#form-guest-edit-pci').val(), $(this).val(), '');
         });
     };
-    var setupNode = function(arrPCIDevices, iconClass){
+    var setupNode = function(arrPCIDevices, iconClass) {
         var pciEnabled = kimchi.capabilities.kernel_vfio;
-        var pciDeviceName, pciDeviceProduct, pciDeviceProductDesc, pciDeviceVendor, pciDeviceVendorDesc;        
-        for(var i=0; i<arrPCIDevices.length; i++){
+        var pciDeviceName, pciDeviceProduct, pciDeviceProductDesc, pciDeviceVendor, pciDeviceVendorDesc, pciDeviceStatus;
+        for (var i = 0; i < arrPCIDevices.length; i++) {
             pciDeviceName = arrPCIDevices[i].name;
             pciDeviceProduct = arrPCIDevices[i].product;
             pciDeviceVendor = arrPCIDevices[i].vendor;
-            if(pciDeviceProduct!=null){
+            pciDeviceStatus = (iconClass === 'fa-ban') ? 'enabled' : 'disabled';
+            if (pciDeviceProduct !== null) {
                 pciDeviceProductDesc = pciDeviceProduct.description;
             }
-            if(pciDeviceVendor!=null){
+            if (pciDeviceVendor !== null) {
                 pciDeviceVendorDesc = pciDeviceVendor.description;
             }
-            var itemNode = $.parseHTML(wok.substitute($('#pci-tmpl').html(),{
-                  name: pciDeviceName,
-                  product: pciDeviceProductDesc,
-                  vendor: pciDeviceVendorDesc
+            var itemNode = $.parseHTML(wok.substitute($('#pci-tmpl').html(), {
+                status: pciDeviceStatus,
+                name: pciDeviceName,
+                product: pciDeviceProductDesc,
+                vendor: pciDeviceVendorDesc
             }));
-            $(".body", "#form-guest-edit-pci").append(itemNode);
-            pciEnabled || $("button", itemNode).remove();
-            $("button", itemNode).button({
-                icons: { primary: iconClass },
-                text: false
-            }).click(function(){
+            $('.body', '#form-guest-edit-pci').append(itemNode);
+            pciEnabled || $('button', itemNode).remove();
+            $('button i', itemNode).addClass(iconClass);
+            $('button', itemNode).on('click', function(event) {
+                event.preventDefault();
                 var obj = $(this);
-                var id = obj.parent().prop("id");
-                if(obj.button("option", "icons").primary == "ui-icon-minus"){
-                    kimchi.removeVMPCIDevice(kimchi.selectedGuest, id, function(){
-                        kimchi.getAvailableHostPCIDevices(function(arrPCIDevices1){
-                            kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1){
-                                for(var k=0; k<arrPCIDevices1.length; k++) {
-                                    $("button", "#" + arrPCIDevices1[k].name).button("option", "icons", {primary: "ui-icon-plus"});
+                var objIcon = obj.find('i');
+                var id = obj.parent().parent().attr('id');
+                if (objIcon.hasClass('fa-ban')) {
+                    kimchi.removeVMPCIDevice(kimchi.selectedGuest, id, function() {
+                        kimchi.getAvailableHostPCIDevices(function(arrPCIDevices1) {
+                            kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1) {
+                                for (var k = 0; k < arrPCIDevices1.length; k++) {
+                                    $('button i', '#' + arrPCIDevices1[k].name).removeClass('fa-ban').addClass('fa-power-off');
                                 }
-                                for(var k=0; k<vmPCIs1.length; k++) {
-                                    $("button", "#" + vmPCIs1[k].name).button("option", "icons", {primary: "ui-icon-minus"});
+                                for (var k = 0; k < vmPCIs1.length; k++) {
+                                    $('button i', '#' + arrPCIDevices1[k].name).removeClass('fa-power-off').addClass('fa-ban');
                                 }
                             });
                         });
                         //id is for the object that is being added back to the available PCI devices
-                        filterPCINodes($("select", "#form-guest-edit-pci").val(), $("input", "#form-guest-edit-pci").val(), id, "ui-icon-plus");
+                        filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input', '#form-guest-edit-pci').val(), id);
                     });
                 } else {
-                    kimchi.addVMPCIDevice(kimchi.selectedGuest, { name: id }, function(){
-                        kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1){
-                            for(var k=0; k<vmPCIs1.length; k++) {
-                                $("button", "#" + vmPCIs1[k].name).button("option", "icons", {primary: "ui-icon-minus"});
+                    kimchi.addVMPCIDevice(kimchi.selectedGuest, {
+                        name: id
+                    }, function() {
+                        kimchi.getVMPCIDevices(kimchi.selectedGuest, function(vmPCIs1) {
+                            for (var k = 0; k < vmPCIs1.length; k++) {
+                                $('button i', '#' + arrPCIDevices1[k].name).removeClass('fa-power-off').addClass('fa-ban');
                             }
                         });
                         //id is for the object that is being removed from the available PCI devices
-                        filterPCINodes($("select", "#form-guest-edit-pci").val(), $("input", "#form-guest-edit-pci").val(), id, "ui-icon-minus");
+                        filterPCINodes($('select', '#form-guest-edit-pci').val(), $('input', '#form-guest-edit-pci').val(), id);
                     });
                 }
             });
             kimchi.getPCIDeviceCompanions(pciDeviceName, function(infoData) {
-                var pciTitle = i18n["KCHVMED6007M"] + "\n";
+                var pciTitle = i18n['KCHVMED6007M'] + '\n';
                 var haveCompanions = false;
-                for(var p=0; p<infoData.length; p++) {
-                    if(infoData[p].device_type === "net") {
+                for (var p = 0; p < infoData.length; p++) {
+                    if (infoData[p].device_type === 'net') {
                         haveCompanions = true;
-                        pciTitle += "   " + infoData[p].name + "\n";
-                        pciTitle += "      " + i18n["KCHVMED6001M"] + " " + infoData[p].interface;
-                        pciTitle += ", " + i18n["KCHVMED6002M"] + " " + infoData[p].address;
-                        pciTitle += ", " + i18n["KCHVMED6003M"] + " " + infoData[p].link_type + "\n";
-                    } else if(infoData[p].device_type === "storage") {
+                        pciTitle += '   ' + infoData[p].name + '\n';
+                        pciTitle += '      ' + i18n['KCHVMED6001M'] + ' ' + infoData[p].interface;
+                        pciTitle += ', ' + i18n['KCHVMED6002M'] + ' ' + infoData[p].address;
+                        pciTitle += ', ' + i18n['KCHVMED6003M'] + ' ' + infoData[p].link_type + '\n';
+                    } else if (infoData[p].device_type === 'storage') {
                         haveCompanions = true;
-                        pciTitle += "   " + infoData[p].name + "\n";
-                        pciTitle += "      " + i18n["KCHVMED6004M"] + " " + infoData[p].block;
-                        pciTitle += ", " + i18n["KCHVMED6005M"] + " " + infoData[p].drive_type;
-                        pciTitle += ", " + i18n["KCHVMED6006M"] + " " + infoData[p].model + "\n";
+                        pciTitle += '   ' + infoData[p].name + '\n';
+                        pciTitle += '      ' + i18n['KCHVMED6004M'] + ' ' + infoData[p].block;
+                        pciTitle += ', ' + i18n['KCHVMED6005M'] + ' ' + infoData[p].drive_type;
+                        pciTitle += ', ' + i18n['KCHVMED6006M'] + ' ' + infoData[p].model + '\n';
                     }
                 }
-                for(var q=0; q<infoData.length; q++) {
-                    haveCompanions && $(".name", "#" + infoData[q].parent).attr("title", pciTitle);
-                    haveCompanions && $(".product", "#" + infoData[q].parent).attr("title", pciTitle);
-                    haveCompanions && $(".vendor", "#" + infoData[q].parent).attr("title", pciTitle);
+                for (var q = 0; q < infoData.length; q++) {
+                    haveCompanions && $('.name', '#' + infoData[q].parent).attr('title', pciTitle);
+                    haveCompanions && $('.product', '#' + infoData[q].parent).attr('title', pciTitle);
+                    haveCompanions && $('.vendor', '#' + infoData[q].parent).attr('title', pciTitle);
                 }
             });
         }
     };
 
+
     var setupSnapshot = function() {
         var currentSnapshot;
-        var setCurrentSnapshot = function(aSnapshot){
-            if(!aSnapshot)
-                kimchi.getCurrentSnapshot(kimchi.selectedGuest, function(snapshot){
-                    if(snapshot&&snapshot.name) aSnapshot = snapshot.name;
+        var setCurrentSnapshot = function(aSnapshot) {
+            if (!aSnapshot)
+                kimchi.getCurrentSnapshot(kimchi.selectedGuest, function(snapshot) {
+                    if (snapshot && snapshot.name) aSnapshot = snapshot.name;
                 }, null, true);
-            if(aSnapshot){
-                if(currentSnapshot) $(".ui-icon-check", "#"+currentSnapshot).addClass("hide");
-                $(".ui-icon-check", "#"+aSnapshot).removeClass("hide");
+            if (aSnapshot) {
+                if (currentSnapshot) $(".fa.fa-check", "#" + currentSnapshot).addClass("hide");
+                $(".fa.fa-check", "#" + aSnapshot).removeClass("hide");
                 currentSnapshot = aSnapshot;
             }
         };
         var addItem = function(data, container) {
-            var itemNode = $.parseHTML(wok.substitute($('#snapshot-tmpl').html(),data));
-            $("."+container, "#form-guest-edit-snapshot").append(itemNode);
-            $(".delete", itemNode).button({
-                icons: { primary: "ui-icon-trash" },
-                text: false
-            }).click(function(evt){
+            var itemNode = $.parseHTML(wok.substitute($('#snapshot-tmpl').html(), data));
+            $("." + container, "#form-guest-edit-snapshot").append(itemNode);
+            $(".delete", itemNode).on('click', function(evt) {
                 evt.preventDefault();
                 var item = $(this).parent().parent();
-                $("button", "#form-guest-edit-snapshot").button("disable");
-                kimchi.deleteSnapshot(kimchi.selectedGuest, item.prop("id"), function(){
+                $("button", "#form-guest-edit-snapshot").prop("disabled", true);
+                kimchi.deleteSnapshot(kimchi.selectedGuest, item.prop("id"), function() {
                     item.remove();
                     setCurrentSnapshot();
-                    $("button", "#form-guest-edit-snapshot").button("enable");
-                }, function(data){
-                    wok.message.error(data.responseJSON.reason);
-                    $("button", "#form-guest-edit-snapshot").button("enable");
+                    $("button", "#form-guest-edit-snapshot").prop("disabled", false);
+                }, function(data) {
+                    wok.message.error(data.responseJSON.reason, '#alert-modal-container');
+                    $("button", "#form-guest-edit-snapshot").prop("disabled", false);
                 });
             });
-            $(".revert", itemNode).button({
-                icons: { primary: "ui-icon-arrowthick-1-ne" },
-                text: false
-            }).click(function(evt){
+            $(".revert", itemNode).on('click', function(evt) {
                 evt.preventDefault();
                 var item = $(this).parent().parent();
-                $(".ui-icon-check", item).addClass("hide");
-                $(".icon", item).removeClass("hide");
-                $("button", "#form-guest-edit-snapshot").button("disable");
-                kimchi.revertSnapshot(kimchi.selectedGuest, item.prop("id"), function(){
-                    $(".icon", item).addClass("hide");
-                    $("button", "#form-guest-edit-snapshot").button("enable");
+                $(".fa.fa-check", item).addClass("hide");
+                $(".wok-loading", item).removeClass("hide");
+                $("button", "#form-guest-edit-snapshot").prop("disabled", true);
+                kimchi.revertSnapshot(kimchi.selectedGuest, item.prop("id"), function() {
+                    $(".wok-loading", item).addClass("hide");
+                    $("button", "#form-guest-edit-snapshot").prop("disabled", false);
                     setCurrentSnapshot(item.prop("id"));
                     kimchi.listVmsAuto();
                     wok.window.close();
-                }, function(data){
-                    wok.message.error(data.responseJSON.reason);
-                    $(".icon", item).addClass("hide");
-                    $("button", "#form-guest-edit-snapshot").button("enable");
+                }, function(data) {
+                    wok.message.error(data.responseJSON.reason, '#alert-modal-container');
+                    $(".wok-loading-icon", item).addClass("hide");
+                    $("button", "#form-guest-edit-snapshot").prop("disabled", false);
                 });
             });
         };
-        var addOngoingItem = function(task){
+        var addOngoingItem = function(task) {
             var uri = task.target_uri;
             addItem({
-                name: uri.substring(uri.lastIndexOf('/')+1, uri.length),
+                name: uri.substring(uri.lastIndexOf('/') + 1, uri.length),
                 created: "",
                 listMode: "hide",
                 createMode: ""
             }, 'task');
-            if(kimchi.trackingTasks.indexOf(task.id)==-1)
-                kimchi.trackTask(task.id, function(task){
+            if (kimchi.trackingTasks.indexOf(task.id) == -1)
+                kimchi.trackTask(task.id, function(task) {
                     listGeneratingSnapshots();
-                    $("button", "#form-guest-edit-snapshot").button("enable");
-                }, function(err){
-                    wok.message.error(err.message);
+                    $("button", "#form-guest-edit-snapshot").prop("disabled", false);
+                }, function(err) {
+                    wok.message.error(err.message, '#alert-modal-container');
                     listGeneratingSnapshots();
-                    $("button", "#form-guest-edit-snapshot").button("enable");
+                    $("button", "#form-guest-edit-snapshot").prop("disabled", false);
                 });
         };
-        var listGeneratingSnapshots = function(){
-            kimchi.getTasksByFilter('status=running&target_uri='+encodeURIComponent('^/plugins/kimchi/snapshots/*'), function(tasks) {
+        var listGeneratingSnapshots = function() {
+            kimchi.getTasksByFilter('status=running&target_uri=' + encodeURIComponent('^/plugins/kimchi/snapshots/*'), function(tasks) {
                 $(".task", "#form-guest-edit-snapshot").empty();
-                for(var i=0;i<tasks.length;i++){
+                for (var i = 0; i < tasks.length; i++) {
                     addOngoingItem(tasks[i]);
                 }
-                if(tasks.length==0) listSnapshots();
+                if (tasks.length == 0) listSnapshots();
             });
         };
-        var listSnapshots = function(){
-            kimchi.listSnapshots(kimchi.selectedGuest, function(data){
+        var listSnapshots = function() {
+            kimchi.listSnapshots(kimchi.selectedGuest, function(data) {
                 $(".body", "#form-guest-edit-snapshot").empty();
-                for(var i=0;i<data.length;i++){
-                    data[i].created = new Date(data[i].created*1000).toLocaleString();
+                for (var i = 0; i < data.length; i++) {
+                    data[i].created = new Date(data[i].created * 1000).toLocaleString();
                     data[i].createMode = "hide";
                     data[i].listMode = "";
                     addItem(data[i], 'body');
@@ -612,17 +648,14 @@ kimchi.guest_edit_main = function() {
             });
         };
         listGeneratingSnapshots();
-        $(".add", "#form-guest-edit-snapshot").button({
-            icons: { primary: "ui-icon-plusthick" },
-            text: false
-        }).click(function(evt){
+        $(".add", "#form-guest-edit-snapshot").on('click', function(evt) {
             evt.preventDefault();
-            kimchi.createSnapshot(kimchi.selectedGuest, function(task){
-                $("button", "#form-guest-edit-snapshot").button("disable");
+            kimchi.createSnapshot(kimchi.selectedGuest, function(task) {
+                $("button", "#form-guest-edit-snapshot").prop("disabled", true);
                 addOngoingItem(task);
             });
         });
-        if(kimchi.thisVMState=="running") $("button", "#form-guest-edit-snapshot").remove();
+        if (kimchi.thisVMState == "running") $("button", "#form-guest-edit-snapshot").remove();
     };
 
     var initContent = function(guest) {
@@ -630,19 +663,12 @@ kimchi.guest_edit_main = function() {
         $('#form-guest-edit-general').fillWithObject(guest);
         kimchi.thisVMState = guest['state'];
         refreshCDROMs();
-        $('#guest-edit-attach-cdrom-button').button({
-                icons: {
-                    primary: "ui-icon-plusthick"
-                },
-                text: false
-            }).click(function(event) {
-                event.preventDefault();
-                wok.window.open('plugins/kimchi/guest-storage-add.html','extendCreateStorage');
-            });
+        $('#guest-edit-attach-cdrom-button').on('click', function(event) {
+            event.preventDefault();
+            wok.window.open('plugins/kimchi/guest-storage-add.html', 'extendCreateStorage');
+        });
         if ((kimchi.thisVMState === "running") || (kimchi.thisVMState === "paused")) {
             $("#form-guest-edit-general input").prop("disabled", true);
-        } else {
-            $("#action-button-container").removeClass("hidden");
         }
 
         var onAttached = function(params) {
@@ -676,55 +702,60 @@ kimchi.guest_edit_main = function() {
 
     var generalSubmit = function(event) {
         $(saveButton).prop('disabled', true);
-        var data=$('#form-guest-edit-general').serializeObject();
-        if(data['memory']!=undefined) {
+        var data = $('#form-guest-edit-general').serializeObject();
+        if (data['memory'] != undefined) {
             data['memory'] = Number(data['memory']);
         }
-        if(data['cpus']!=undefined) {
-            data['cpus']   = Number(data['cpus']);
+        if (data['cpus'] != undefined) {
+            data['cpus'] = Number(data['cpus']);
         }
 
         kimchi.updateVM(kimchi.selectedGuest, data, function() {
             kimchi.listVmsAuto();
             wok.window.close();
         }, function(err) {
-            wok.message.error(err.responseJSON.reason);
+            wok.message.error(err.responseJSON.reason, '#alert-modal-container');
             $(saveButton).prop('disabled', false);
         });
     }
 
     var permissionSubmit = function(event) {
-        var content = { users: [], groups: [] };
+        var content = {
+            users: [],
+            groups: []
+        };
         authType = kimchi.capabilities['auth']
         if (authType == 'pam') {
-            $("#permission-sel-users").children().each(function(){
+            $("#permission-sel-users").children().each(function() {
                 content.users.push($("label", this).text());
             });
-            $("#permission-sel-groups").children().each(function(){
+            $("#permission-sel-groups").children().each(function() {
                 content.groups.push($("label", this).text());
             });
-            kimchi.updateVM(kimchi.selectedGuest, content, function(){
+            kimchi.updateVM(kimchi.selectedGuest, content, function() {
                 wok.window.close();
             });
         } else if (authType == 'ldap') {
             $(saveButton).prop('disabled', true);
             var errors = 0;
 
-            $(".body", "#form-guest-edit-permission .ldap").children().each(function () {
+            $(".body", "#form-guest-edit-permission .ldap").children().each(function() {
                 var elem = $(this);
                 content.users.push(elem.attr("id"));
 
                 if (!$('input', elem).hasClass('hide')) {
-                    var user = {'user_id': $(this).attr("id")};
-                    kimchi.getUserById(user, null, function (data) {
+                    var user = {
+                        'user_id': $(this).attr("id")
+                    };
+                    kimchi.getUserById(user, null, function(data) {
                         errors += 1;
                         $("input", elem).addClass("checked");
                     });
                 }
             });
             if (errors == 0) {
-                kimchi.updateVM(kimchi.selectedGuest, content, function(){
-                   wok.window.close();
+                kimchi.updateVM(kimchi.selectedGuest, content, function() {
+                    wok.window.close();
                 });
             } else {
                 $(saveButton).prop('disabled', false);
@@ -732,15 +763,4 @@ kimchi.guest_edit_main = function() {
         }
     }
 
-    // tap map, "general": 0, "storage": 1, "interface": 2, "permission": 3, "password": 4
-    var submit_map = {0: generalSubmit, 3:permissionSubmit};
-    var submitForm = function(event) {
-        var current = $('#guest-edit-tabs').tabs( "option", "active" );
-        var submitFun = submit_map[current];
-        submitFun && submitFun(event);
-        event.preventDefault();
-    };
-
-    $(guestEditForm).on('submit', submitForm);
-    $(saveButton).on('click', submitForm);
 };
diff --git a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js
index d6606ee..881ff7c 100644
--- a/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js
+++ b/src/wok/plugins/kimchi/ui/js/src/kimchi.guest_storage_add.main.js
@@ -31,10 +31,13 @@ kimchi.guest_storage_add_main = function() {
 
     var storageAddForm = $('#form-guest-storage-add');
     var submitButton = $('#guest-storage-button-add');
-    var typeTextbox = $('input[name="type"]', storageAddForm);
+    var typeTextbox = $('select#guest-storage-type', storageAddForm);
     var pathTextbox = $('input[name="path"]', storageAddForm);
-    var poolTextbox = $('input[name="pool"]', storageAddForm);
-    var volTextbox = $('input[name="vol"]', storageAddForm);
+    var poolTextbox = $('select#guest-disk-pool', storageAddForm);
+    var volTextbox = $('select#guest-disk-vol', storageAddForm);
+    var selectStorageTypeHTML = '';
+    var selectStoragePoolHTML = '';
+    var selectStorageVolHTML  = '';
 
     typeTextbox.change(function() {
         var pathObject = {'cdrom': ".path-section", 'disk': '.volume-section'}
@@ -56,6 +59,7 @@ kimchi.guest_storage_add_main = function() {
             $(poolTextbox).val("");
             $(volTextbox).val("");
         }
+        $('.selectpicker').selectpicker('refresh');
     });
 
     kimchi.listStoragePools(function(result) {
@@ -67,17 +71,22 @@ kimchi.guest_storage_add_main = function() {
                         label: storagePool.name,
                         value: storagePool.name
                         });
+                    selectStoragePoolHTML += '<option value="'+ storagePool.name + '">' + storagePool.name + '</option>';
                     }
+
                 });
-                wok.select('guest-add-storage-pool-list', options);
+            poolTextbox.append(selectStoragePoolHTML);
+            poolTextbox.val(options[0].value);
+            poolTextbox.selectpicker();
         }
     });
 
     poolTextbox.change(function() {
         var options = [];
+        selectStorageVolHTML = '';
+        volTextbox.empty();
         kimchi.listStorageVolumes($(this).val(), function(result) {
             var validVolType = { cdrom: /iso/, disk: /^(raw|qcow|qcow2|bochs|qed|vmdk)$/};
-            $('#guest-disk').selectMenu();
             if (result.length) {
                 $.each(result, function(index, value) {
                     // Only unused volume can be attached
@@ -89,11 +98,20 @@ kimchi.guest_storage_add_main = function() {
                     }
                 });
                 if (options.length) {
+                    for (var i = 0; i < options.length; i++) {
+                        selectStorageVolHTML += '<option value="'+ options[i].value + '">' + options[i].label + '</option>';
+                    }
+                    volTextbox.append(selectStorageVolHTML);
                     $(volTextbox).val(options[0].value);
                     $(volTextbox).change();
+                    $(volTextbox).prop('disabled',false);
+                }else {
+                    $(volTextbox).prop('disabled',true);
+                    $(submitButton).prop('disabled', true);
                 }
-            }
-            $('#guest-disk').selectMenu("setData", options);
+                volTextbox.selectpicker();
+                $('.selectpicker').selectpicker('refresh');
+            } 
         }, null, false);
     });
 
@@ -117,7 +135,12 @@ kimchi.guest_storage_add_main = function() {
         poolTextbox.change();
     }
     var selectType = $(typeTextbox).val();
-    wok.select('guest-storage-type-list', types);
+    for (var i = 0; i < types.length; i++) {
+        selectStorageTypeHTML += '<option value="'+ types[i].value + '">' + types[i].label + '</option>';
+    }
+    typeTextbox.append(selectStorageTypeHTML);
+    typeTextbox.find('option:first').attr('selected','selected');
+    typeTextbox.selectpicker();
 
     var validateCDROM = function(settings) {
         if (/^((https|http|ftp|ftps|tftp|\/).*)+$/.test(settings['path']))
diff --git a/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl
index 868dd4d..4568f34 100644
--- a/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/guest-edit.html.tmpl
@@ -22,31 +22,21 @@
 #silent _t = t.gettext
 <div id="guest-edit-window" class="window modal-content">
     <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title">$_("Edit Guest")</h4>
     </div>
     <div class="modal-body">
-        <div id="guest-edit-tabs">
-            <ul>
-                <li>
-                    <a href="#form-guest-edit-general">$_("General")</a>
-                </li>
-                <li>
-                    <a href="#form-guest-edit-storage">$_("Storage")</a>
-                </li>
-                <li>
-                    <a href="#form-guest-edit-interface">$_("Interface")</a>
-                </li>
-                <li>
-                    <a href="#form-guest-edit-permission">$_("Permission")</a>
-                </li>
-                <li>
-                    <a href="#form-guest-edit-pci">$_("Host PCI Device")</a>
-                </li>
-                <li>
-                    <a href="#form-guest-edit-snapshot">$_("Snapshot")</a>
-                </li>
-            </ul>
-            <form id="form-guest-edit-general">
+    <span id="alert-modal-container"></span>
+<ul class="nav nav-tabs" role="tablist">
+    <li role="presentation" class="active"><a href="#form-guest-edit-general" aria-controls="form-guest-edit-general" role="tab" data-id="form-guest-edit-general" data-toggle="tab">General</a></li>
+    <li role="presentation"><a href="#form-guest-edit-storage" aria-controls="form-guest-edit-storage" role="tab" data-id="form-guest-edit-storage" data-toggle="tab">Storage</a></li>
+    <li role="presentation"><a href="#form-guest-edit-interface" aria-controls="form-guest-edit-interface" role="tab" data-id="form-guest-edit-interface" data-toggle="tab">Interface</a></li>
+    <li role="presentation"><a href="#form-guest-edit-permission" aria-controls="form-guest-edit-permission" role="tab" data-id="form-guest-edit-permission" data-toggle="tab">Permission</a></li>
+    <li role="presentation"><a href="#form-guest-edit-pci" aria-controls="form-guest-edit-pci" role="form-guest-edit-pci" data-id="form-guest-edit-pci" data-toggle="tab">Pci</a></li>
+    <li role="presentation"><a href="#form-guest-edit-snapshot" aria-controls="form-guest-edit-snapshot" role="tab" data-id="form-guest-edit-snapshot" data-toggle="tab">Snapshot</a></li>
+  </ul>
+        <div class="tab-content" id="guest-edit-tabs">
+            <form role="tabpanel" class="tab-pane active" id="form-guest-edit-general">
                 <div class="form-group">
                     <label for="guest-edit-id-textbox">$_("Name")</label>
                     <input id="guest-edit-id-textbox" class="form-control" name="name" type="text" />
@@ -64,88 +54,104 @@
                     <input id="guest-edit-icon-textbox" class="form-control" name="icon" type="text" disabled="disabled"  />
                 </div>
             </form>
-            <form id="form-guest-edit-storage">
+            <form role="tabpanel" class="tab-pane" id="form-guest-edit-storage">
+                <div class="btn-group action-area">
+                    <button type="button" id="guest-edit-attach-cdrom-button" class="attach btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add")</button>
+                </div>
                 <div class="header">
-                    <span class="cell">$_("Device")</span>
-                    <span class="cell">$_("Path")</span>
-                    <button type="button" id="guest-edit-attach-cdrom-button" class="action-area attach"></button>
+                    <span class="cell column-device">$_("Device")</span>
+                    <span class="cell column-path">$_("Path")</span>
+                    <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span>
                 </div>
                 <div class="body"></div>
             </form>
-            <form id="form-guest-edit-interface" class="guest-edit-interface">
+            <form role="tabpanel" class="guest-edit-interface tab-pane" id="form-guest-edit-interface">
                 <button class="add btn btn-primary"><i class="fa fa-plus-circle"></i> Add</button>
                 <div class="header">
-                    <span class="cell">$_("Network")</span>
-                    <span class="cell">$_("Type")</span>
-                    <span class="cell">$_("MAC Address")</span>
-                    <span class="cell">$_("IP Address")</span>
+                    <span class="cell column-network">$_("Network")</span>
+                    <span class="cell column-type">$_("Type")</span>
+                    <span class="cell column-mac">$_("MAC Address")</span>
+                    <span class="cell column-ip">$_("IP Address")</span>
+                    <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span>
                 </div>
                 <div class="body"></div>
             </form>
-            <form id="form-guest-edit-permission" class="guest-edit-permission">
-                <div class="pam">
-                    <div class="column avail">
-                        <div class="title">$_("Available system users and groups")</div>
-                        <input type="text" id="permission-avail-searchBox">
-                        <div class="body">
+            <form role="tabpanel" class="guest-edit-permission tab-pane" id="form-guest-edit-permission">
+                <div class="pam col-md-12">
+                    <div class="column avail col-md-5">
+                        <h4 class="title">$_("Available system users and groups")</h4>
+                        <div class="input-group">
+                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+                            <input type="text" id="permission-avail-searchBox" class="form-control">
+                        </div>
+                        <div class="body col-md-12">
                             <div class="head">
-                                <div class="column column-user"><div class="item">$_("Users")</div></div>
-                                <div class="column column-group"><div class="item">$_("Groups")</div></div>
+                                <div class="column column-user col-md-6"><div class="item">$_("Users")</div></div>
+                                <div class="column column-group col-md-6"><div class="item">$_("Groups")</div></div>
                             </div>
-                            <div id="permission-avail-users" class="column column-user"></div>
-                            <div id="permission-avail-groups"  class="column column-group"></div>
+                            <div id="permission-avail-users" class="column column-user col-md-6"></div>
+                            <div id="permission-avail-groups"  class="column column-group col-md-6"></div>
                         </div>
                     </div>
-                    <div class="column control">
-                        <button id="permissionGo"> &lt; </button>
-                        <button id="permissionBack"> &gt; </button>
+                    <div class="column control col-md-2 v-center">
+                        <button id="permissionBack" class="center-block btn btn-primary btn-lg"><i class="fa fa-chevron-left"></i></button>
+                        <button id="permissionGo" class="center-block btn btn-primary btn-lg"><i class="fa fa-chevron-right"></i></button>
                     </div>
-                    <div class="column selected">
-                        <div class="title">$_("Selected system users and groups")</div>
-                        <input type="text" id="permission-sel-searchBox">
-                        <div class="body">
+                    <div class="column selected col-md-5">
+                        <h4 class="title">$_("Selected system users and groups")</h4>
+                        <div class="input-group">
+                            <div class="input-group-addon"><i class="fa fa-search"></i></div>
+                            <input type="text" id="permission-sel-searchBox" class="form-control">
+                        </div>
+                        <div class="body col-md-12">
                             <div class="head">
-                                <div class="column column-user"><div class="item">$_("Users")</div></div>
-                                <div class="column column-group"><div class="item">$_("Groups")</div></div>
+                                <div class="column column-user col-md-6"><div class="item">$_("Users")</div></div>
+                                <div class="column column-group col-md-6"><div class="item">$_("Groups")</div></div>
                             </div>
-                            <div id="permission-sel-users" class="column column-user"></div>
-                            <div id="permission-sel-groups"  class="column column-group"></div>
+                            <div id="permission-sel-users" class="column column-user col-md-6"></div>
+                            <div id="permission-sel-groups"  class="column column-group col-md-6"></div>
                         </div>
                     </div>
                 </div>
                 <div class="ldap">
                     <div class="header">
                         <span class="cell">$_("User")</span>
-                        <button type="button" id="guest-edit-add-user-button" class="action-area add"></button>
+                        <button type="button" id="guest-edit-add-user-button" class="action-area add btn btn-primary">$_("Add")</button>
                     </div>
                     <div class="body"></div>
                 </div>
             </form>
-            <form id="form-guest-edit-pci" class="guest-edit-pci">
+            <form role="tabpanel" class="guest-edit-pci tab-pane" id="form-guest-edit-pci">
                 <div class="guest-scroll-indent">
                     <div class="filter">
-                        <span class="group">
+                        <div class="form-group pull-right">
                             <select class="control selectpicker">
                                 <option value="all">$_("All")</option>
                                 <option value="toAdd">$_("To Add")</option>
                                 <option value="added">$_("Added")</option>
-                            </select><input type="text" class="control" placeholder="$_("filter")">
-                        </span>
+                            </select>
+                            <input type="text" class="form-control" placeholder="$_("Filter")" />
+                        </div>
                     </div>
                     <div class="header">
-                        <span class="cell name">$_("Name")</span>
-                        <span class="cell product">$_("Product")</span>
-                        <span class="cell vendor">$_("Vendor")</span>
+                        <span class="cell status column-pci-status"><span class="sr-only">$_("Status")</span></span>
+                        <span class="cell name column-pci-name">$_("Name")</span>
+                        <span class="cell product column-product">$_("Product")</span>
+                        <span class="cell vendor column-vendor">$_("Vendor")</span>
+                        <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span>
                     </div>
                     <div class="body"></div>
                 </div>
             </form>
-            <form id="form-guest-edit-snapshot" class="guest-edit-snapshot">
+            <form role="tabpanel" id="form-guest-edit-snapshot" class="guest-edit-snapshot tab-pane">
+                <div class="btn-group">
+                    <button class="add btn btn-primary"><i class="fa fa-plus-circle"></i> $_("Add")</button>
+                </div>
                 <div class="header">
-                    <span class="cell sel"></span>
-                    <span class="cell name">$_("Name")</span>
-                    <span class="cell created">$_("Created")</span>
-                    <button class="add action-area"></button>
+                    <span class="cell column-sel"><span class="sr-only">$_("Status")</span></span>
+                    <span class="cell column-snapshot-name">$_("Name")</span>
+                    <span class="cell column-snapshot-created">$_("Created")</span>
+                    <span class="cell column-actions"><span class="sr-only">$_("Actions")</span></span>
                 </div>
                 <div class="task"></div>
                 <div class="body"></div>
@@ -153,123 +159,124 @@
         </div>
     </div>
     <div class="modal-footer">
-        <div id="action-button-container" class="hidden">
-            <button id="guest-edit-button-save" class="btn btn-default">$_("Save")</button>
-        </div>
-        <button id="guest-edit-button-cancel" class="btn btn-default">$_("Cancel")</button>
+        <button id="guest-edit-button-save" class="btn btn-default">$_("Save")</button>
+        <button id="guest-edit-button-cancel" class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
     </div>
 </div>
 <script id="cdrom-row-tmpl" type="text/html">
     <div class="item view" id="cdrom-{dev}">
-        <span class="cell dev">
+        <span class="cell dev column-device">
             <input type="text" readonly="readonly"
-                id="cdrom-dev-{dev}" name="cdrom-dev-{dev}" value="{dev}" />
+                id="cdrom-dev-{dev}" name="cdrom-dev-{dev}" value="{dev}" class="form-control" />
         </span>
-        <span class="cell path">
+        <span class="cell path column-path">
             <input id="cdrom-path-{dev}" name="cdrom" type="text"
                 data-vm="{vm}" data-dev="{dev}"
-                value="{path}" readonly="readonly" />
+                value="{path}" readonly="readonly" class="form-control" />
         </span>
-        <span class="action-area">
-            <button type="button" class="guest-edit-cdrom-button replace"
+        <span class="cell action-area column-actions">
+            <button type="button" class="guest-edit-cdrom-button replace btn btn-link"
                 data-vm="{vm}" data-dev="{dev}"
-                title='$_("Replace")'>
-            </button>
-            <button type="button" class="guest-edit-cdrom-button detach"
+                title='$_("Replace")'><i class="fa fa-pencil"></i> $_("Replace")</button>
+
+            <button type="button" class="guest-edit-cdrom-button detach btn btn-link"
                 data-vm="{vm}" data-dev="{dev}" data-type="{type}"
-                title='$_("Detach")'>
-            </button>
-            <button type="button" class="guest-edit-cdrom-button save hidden"
+                title='$_("Detach")'><i class="fa fa-minus-circle"></i> $_("Detach")</button>
+
+            <button type="button" class="guest-edit-cdrom-button save hidden btn btn-primary"
                 data-vm="{vm}" data-dev="{dev}"
-                title='$_("Save")'>
-            </button>
-            <button type="button" class="guest-edit-cdrom-button cancel hidden"
+                title='$_("Save")'>$_("Save")</button>
+
+            <button type="button" class="guest-edit-cdrom-button cancel hidden btn btn-primary"
                 data-vm="{vm}" data-dev="{dev}"
-                title='$_("Cancel")'>
-            </button>
+                title='$_("Cancel")'>$_("Cancel")</button>
         </span>
     </div>
 </script>
 <script id="interface-tmpl" type="text/html">
     <div class="item" id="{mac}">
-        <span class="cell">
-            <label id="label-network-{id}" class="{viewMode}">{network}</label>
+        <span class="cell column-network">
+            <span id="label-network-{id}" class="{viewMode}">{network}</span>
             <select class="{editMode}"></select>
         </span>
-        <span class="cell">
-            <span>{type}</span>
+        <span class="cell column-type">
+            {type}
         </span>
-        <span class="cell">
-            <label id="label-mac-{id}" class="{viewMode}">{mac}</label>
-            <input class="{editMode}" type="text" 
-               id="edit-mac-{id}" name="{mac}" value="{mac}" />
+        <span class="cell column-mac">
+            <span id="label-mac-{id}" class="{viewMode}">{mac}</span>
+            <input class="form-control {editMode}" type="text" 
+               id="edit-mac-{id}" class="form-control" name="{mac}" value="{mac}" />
         </span>
-        <span class="cell">
+        <span class="cell column-ip">
             <span class=ipText>{ips}</span>
         </span>
-        <span class="action-area {editMode}">
-            <button class="save"></button><button class="cancel"></button>
+        <span class="cell {editMode} column-actions action-area">
+                <button class="btn btn-primary save">$_("Save")</button>
+                <button class="btn btn-primary cancel">$_("Remove")</button>
         </span>
-        <span class="action-area {viewMode}">
-            <button class="edit"></button><button class="delete"></button>
+        <span class="cell {viewMode} column-actions action-area">
+            <button class="btn btn-link edit"><i class="fa fa-pencil"></i> $_("Edit")</button>
+            <button class="btn btn-link delete"><i class="fa fa-minus-circle"></i> $_("Remove")</button>
         </span>
     <div>
 </script>
 <script id="ldap-user-tmpl" type="text/html">
     <div class="item" id="{user}">
         <span class="cell">
-            <label class="{viewMode}">{user}</label>
-            <input type="text"  placeholder=$_("LDAP User ID,e.g.foo at foo.com") class="{editMode}"/>
+            <span class="{viewMode}">{user}</span>
+            <input type="text" placeholder=$_("LDAP User ID,e.g.foo at foo.com") class="form-control {editMode}" />
         </span>
         <span class="action-area">
-            <button class="delete"></button>
+            <button class="btn btn-default delete"><i class="fa fa-minus-circle"></i> $_("Remove")</button>
         </span>
     <div>
 </script>
 <script id="disk-row-tmpl" type="text/html">
     <div class="item" id="cdrom-{dev}">
-        <span class="cell dev">
+        <span class="cell dev column-device">
             <input type="text" readonly="readonly"
-                id="disk-dev-{dev}" name="disk-dev-{dev}" value="{dev}" />
+                id="disk-dev-{dev}" name="disk-dev-{dev}" class="form-control" value="{dev}" />
         </span>
-        <span class="cell path">
-            <input id="disk-path-{dev}" name="path-{dev}" type="text"
+        <span class="cell path column-path">
+            <input id="disk-path-{dev}" class="" name="path-{dev}" type="text"
                 data-vm="{vm}" data-dev="{dev}"
-                value="{path}" readonly="readonly" />
+                value="{path}" readonly="readonly" class="form-control" />
         </span>
-        <span class="action-area">
-            <button type="button" class="guest-edit-cdrom-button detach"
+        <span class="action-area column-actions">
+            <button type="button" class="guest-edit-cdrom-button detach btn btn-link"
                 data-vm="{vm}" data-dev="{dev}" data-type="{type}"
-                title="$_("Detach")">
-            </button>
+                title="$_("Detach")"><i class="fa fa-minus-circle"></i> $_("Detach")</button>
         </span>
     </div>
 </script>
 <script id="permission-item-pam" type="text/html">
 <div class="item">
-    <span class="icon {class}"></span>
+    <i class="fa {class}"></i>
     <label>{val}</label>
 </div>
 </script>
 <script id="pci-tmpl" type="text/html">
-<div class="item" id="{name}">
-    <span class="cell name" title="{name}">{name}</span>
-    <span class="cell product" title="{product}">{product}</span>
-    <span class="cell vendor" title="{vendor}">{vendor}</span>
-    <button></button>
+<div class="item {status}" id="{name}">
+    <span class="cell status column-pci-status">
+        <i class="fa fa-power-off"></i>
+    </span>
+    <span class="cell name column-pci-name"><input type="text" readonly="readonly" value="{name}" title="{name}" class="form-control" /></span>
+    <span class="cell product column-product"><input type="text" readonly="readonly" value="{product}" title="{product}" class="form-control" /></span>
+    <span class="cell vendor column-vendor"><input type="text" readonly="readonly" value="{vendor}" title="{vendor}" class="form-control" /></span>
+    <span class="cell column-actions action-area"><button class="btn btn-link"><i class="fa"></i></button></span>
 </div>
 </script>
 <script id="snapshot-tmpl" type="text/html">
     <div class="item" id="{name}">
-        <span class="cell sel">
-            <span class="icon {createMode}"></span>
-            <span class="ui-icon ui-icon-check hide"></span>
+        <span class="cell column-sel">
+            <span class="wok-loading-icon {createMode}"></span>
+            <i class="fa fa-check hide"></i>
         </span>
-        <span class="cell name">{name}</span>
-        <span class="cell created">{created}</span>
-        <span class="action-area">
-            <button class="revert {listMode}" title="$_("revert")"></button>
-            <button class="delete {listMode}"></button>
+        <span class="cell column-snapshot-name name"><input type="text" readonly="readonly" value="{name}" class="form-control" /></span>
+        <span class="cell column-snapshot-created created"><input type="text" readonly="readonly" value="{created}" class="form-control" /></span>
+        <span class="cell column-actions action-area">
+            <button class="revert {listMode} btn btn-link" title="$_("Revert")"><i class="fa fa-undo"></i> $_("Revert")</button>
+            <button class="delete {listMode} btn btn-link"><i class="fa fa-minus-circle"></i> $_("Remove")</button>
         </span>
     <div>
 </script>
diff --git a/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl b/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl
index c8ab96c..43cfd48 100644
--- a/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl
+++ b/src/wok/plugins/kimchi/ui/pages/guest-storage-add.html.tmpl
@@ -22,77 +22,44 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 <div id="guest-storage-add-window" class="window">
-    <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-        <h4 class="modal-title">$_("Add a Storage Device to VM")</hh>
-    </div>
-    <div class="modal-body">
-        <form id="form-guest-storage-add">
-            <section class="form-section">
-                <h2>1. $_("Device Type")</h2>
-                <div class="field">
-                    <p class="text-help">
-                        $_("The device type. Currently,  \"cdrom\" and \"disk\" are supported.")
-                    </p>
-                    <div class="btn dropdown popable">
-                        <input id="guest-storage-type" name="type" value="cdrom" type="hidden" />
-                        <span class="text" id="guest-storage-type-label"></span>
-                        <span class="arrow"></span>
-                        <div class="popover">
-                            <ul class="select-list" id="guest-storage-type-list" data-target="guest-storage-type" data-label="guest-storage-type-label"></ul>
-                        </div>
-                    </div>
+    <div class="modal-content">
+        <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+            <h4 class="modal-title">$_("Add a Storage Device to VM")</h4>
+        </div>
+        <div class="modal-body">
+            <form id="form-guest-storage-add">
+                <div class="form-group">
+                    <label>$_("Device Type")</label>
+                    <select id="guest-storage-type" class="selectpicker col-md-12 col-lg-12">
+                    </select>
+                    <p class="help-block"><i class="fa fa-info-circle"></i> $_("The device type. Currently, \"cdrom\" and \"disk\" are supported.")</p>
                 </div>
-            </section>
-            <div class="volume-section hidden">
-                <section class="form-section">
-                    <h2>2. $_("Storage Pool")</h2>
-                    <div class="field storage-field">
-                        <p class="text-help">
-                            $_("Storage pool which volume located in")
-                        </p>
-                        <div class="btn dropdown popable">
-                            <input value="default" id="guest-disk-pool" name="pool" type="hidden"/>
-                            <span class="text" id="guest-disk-pool-label">default</span><span class="arrow"></span>
-                            <div class="popover" style="width: 100%">
-                                <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-pool" data-label="guest-disk-pool-label"></ul>
-                            </div>
-                        </div>
-                    </div>
-                </section>
-                <section class="form-section">
-                    <h2>3. $_("Storage Volume")</h2>
-                    <div class="field storage-field">
-                        <p class="text-help">
-                            $_("Storage volume to be attached")
-                        </p>
-                        <div class="btn dropdown popable" id="guest-disk">
-                            <input id="guest-disk-vol" name="vol" type="hidden">
-                            <span class="text" id="guest-disk-vol-label"></span><span class="arrow"></span>
-                            <div class="popover" style="width: 100%">
-                                <ul class="select-list" id="guest-add-storage-pool-list" data-target="guest-disk-vol" data-label="guest-disk-vol-label"></ul>
-                            </div>
-                        </div>
+                <div class="volume-section hidden">
+                    <div class="form-group">
+                        <label>$_("Storage Pool")</label>
+                        <select id="guest-disk-pool" class="selectpicker col-md-12 col-lg-12">
+                        </select>
+                        <p class="help-block"><i class="fa fa-info-circle"></i> $_("Storage pool which volume located in")</p>
                     </div>
-                </section>
-            </div>
-            <div class="path-section">
-                <section class="form-section">
-                    <h2>2. $_("File Path")</h2>
-                    <div class="field">
-                        <p class="text-help">
-                            $_("The ISO file path in the server for CDROM.")
-                        </p>
-                        <input type="text" class="text" name="path" />
+                    <div class="form-group">
+                        <label>$_("Storage Volume")</label>
+                        <select id="guest-disk-vol" class="selectpicker col-md-12 col-lg-12">
+                        </select>
+                        <p class="help-block"><i class="fa fa-info-circle"></i> $_("Storage volume to be attached")</p>
                     </div>
-                </section>
-            </div>
-            </fieldset>
-        </form>
-    </div>
-    <div class="modal-footer">
+                </div>
+                <div class="path-section form-group">
+                    <label for="path">$_("File Path")</label>
+                    <input type="text" class="form-control" name="path" id="path" />
+                    <p class="help-block"><i class="fa fa-info-circle"></i> $_("The ISO file path in the server for CDROM.")</p>
+                </div>
+            </form>
+        </div>
+        <div class="modal-footer">
             <button id="guest-storage-button-add" class="btn btn-default" disabled="disabled">$_("Attach")</button>
             <button class="btn btn-default" data-dismiss="modal">$_("Cancel")</button>
+        </div>
     </div>
 </div>
 <script type="text/javascript">
diff --git a/ui/css/src/modules/_edit-guests.scss b/ui/css/src/modules/_edit-guests.scss
new file mode 100644
index 0000000..085141a
--- /dev/null
+++ b/ui/css/src/modules/_edit-guests.scss
@@ -0,0 +1,362 @@
+#guest-edit-window {
+    .tab-content {
+        overflow: hidden;
+        height: 559px;
+    }
+    .tab-content .tab-pane {
+        position: relative;
+    }
+    #form-guest-edit-interface {
+        .column-actions {
+            width: 23%;
+        }
+    }
+    #form-guest-edit-storage {
+        .column-actions {
+            width: 26%;
+        }
+    }
+    #form-guest-edit-snapshot {
+        .column-actions {
+            width: 22%;
+        }
+    }
+    #form-guest-edit-pci {
+        .column-actions {
+            width: 4.47%;
+        }
+    }
+    form {
+        margin: 15px 0 0;
+        .header,
+        .body {
+            .column-actions {
+                text-align: right;
+            }
+            .column-device {
+                width: 12.7%;
+            }
+            .column-path {
+                width: 60.25%;
+            }
+            .cell.column-network {
+                width: 18%;
+                > span {
+                    width: 100%;
+                    display: inline-block;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+                    width: 180px;
+                }
+            }
+            .cell.column-type {
+                width: 11.35%;
+            }
+            .cell.column-mac {
+                width: 14.5%;
+            }
+            .cell.column-ip {
+                width: 31%;
+            }
+            .cell.column-sel {
+                width: 1.77%;
+            }
+            .cell.column-snapshot-name {
+                width: 58%;
+            }
+            .cell.column-snapshot-created {
+                width: 16.5%;
+            }
+            .cell.column-pci-status {
+                width: 3.7%;
+                .fa {
+                    color: $guests-color;
+                    font-size: 24px;
+                }
+            }
+            .cell.column-pci-name {
+                width: 21%;
+            }
+            .cell.column-product {
+                width: 45%;
+            }
+            .cell.column-vendor {
+                width: 24.1%;
+            }
+        }
+        .header {
+            background: $table-bg;
+            display: block;
+            border-bottom: 1px solid $table-border-color;
+            overflow: hidden;
+            clear: both;
+            > span {
+                padding: $table-cell-padding;
+                display: inline-block;
+                font-family: $font-family-light;
+                font-weight: 400;
+                font-size: 12.5pt;
+                vertical-align: bottom;
+                border-bottom: none;
+                border-top: 0;
+                line-height: $line-height-base;
+                &.column-actions {
+                    height: 36px;
+                }
+            }
+        }
+        .body {
+            overflow-y: auto;
+            overflow-x: hidden;
+            height: 471px;
+            .item {
+                border-top: 1px solid $table-border-color;
+                height: 53px;
+                &:first-child {
+                    border-top: 0;
+                }
+                &:nth-child(even) {
+                    background-color: $table-bg-accent;
+                }
+                &:nth-child(odd) {
+                    background-color: $table-bg;
+                }
+                > span {
+                    padding: $table-cell-padding;
+                    display: inline-block;
+                    vertical-align: middle;
+                    input[type="text"] {
+                        height: 40px;
+                    }
+                    input[readonly],
+                    input[readonly]:hover,
+                    input[readonly]:focus,
+                    input[readonly]:active {
+                        background-color: transparent !important;
+                        border-color: transparent !important;
+                        box-shadow: none !important;
+                        border-radius: 0 !important;
+                        text-overflow: ellipsis;
+                        padding-right: 0 !important;
+                        padding-left: 0 !important;
+                        width: 100%;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.guest-edit-snapshot .hide,
+.guest-edit-interface .hide {
+    display: none !important;
+}
+
+.guest-edit-pci {
+    .filter {
+        height: 40px;
+        overflow: visible;
+        clear: both;
+    }
+    .pull-right .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+        width: 133px;
+    }
+    .filter input[type="text"].form-control {
+        width: 460px;
+        height: 40px;
+        float: right;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    .filter .bootstrap-select.btn-group .btn .caret {
+        border-left: 0;
+    }
+    .filter button.btn.dropdown-toggle.form-control.selectpicker.btn-default {
+        border-top-right-radius: 0 !important;
+        border-bottom-right-radius: 0 !important;
+        background: $table-bg-accent;
+        border-right: 0;
+    }
+    .body {
+        overflow-y: auto;
+        overflow-x: hidden;
+        height: 442px !important;
+    }
+    .body .item.disabled input[type="text"].form-control {
+        color: $gray-light;
+    }
+    .body .item.disabled span.column-pci-status i {
+        display: none;
+    }
+}
+
+.guest-edit-permission {
+    .pam {
+        height: 540px;
+        .column {
+            display: inline-block;
+            vertical-align: top;
+        }
+        .v-center {
+            min-height: 532px;
+            display: flex;
+            justify-content: center;
+            flex-flow: column wrap;
+        }
+        .center-block {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        .center-block + .center-block {
+            margin-top: 5px;
+        }
+        .title {
+            font-size: 13pt;
+        }
+        .body {
+            margin-top: 4px;
+            border-radius: 3px;
+            border: 1px solid $table-border-color;
+            height: 460px !important;
+        }
+        .body .head {
+            .item {
+                display: block;
+                padding: $table-cell-padding;
+                margin-bottom: 5px;
+                font-family: $font-family-light;
+                font-weight: 400;
+                font-size: 12.5pt;
+                vertical-align: bottom;
+                line-height: $line-height-base;
+                height: auto !important;
+                background: $table-bg;
+                border-top: 0;
+                border-bottom: 1px solid $table-border-color;
+                cursor: default;
+            }
+        }
+        .body > .column-user .item,
+        .body > .column-group .item {
+            height: auto !important;
+            margin-bottom: 0;
+            margin-left: 5px;
+        }
+        .body > .column-group .item {
+            margin-right: 5px;
+        }
+        .column-user label,
+        .column-group label {
+            cursor: pointer;
+            margin-bottom: 0;
+            margin-left: 5px;
+            width: 160px;
+            height: 24px;
+            line-height: 22px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            vertical-align: middle;
+        }
+        .body > .column .item {
+            background-color: $btn-default-bg !important;
+            border: 1px solid $table-border-color !important;
+            margin-bottom: 3px;
+            display: block;
+            padding: .2em .6em .3em;
+            font-weight: 700;
+            line-height: 1;
+            text-align: left;
+            white-space: nowrap;
+            vertical-align: middle;
+            border-radius: .25em;
+            overflow: hidden;
+        }
+        .body > .column .item:hover {
+            color: $btn-default-color !important;
+            background-color: #e6e6e6 !important;
+            border-color: #adadad !important;
+            label {
+                color: $btn-default-color !important;
+            }
+        }
+        .body > .column .item.item-picked {
+            color: $btn-primary-color !important;
+            background-color: $btn-primary-bg !important;
+            border-color: #1b1b1c !important;
+            outline: 5px auto -webkit-focus-ring-color;
+            outline-offset: -2px;
+            label {
+                color: $btn-primary-color !important;
+            }
+        }
+    }
+    .hide {
+        display: none;
+    }
+}
+
+// .guest-edit-permission .pam .body .item:hover {
+//     background-color: #AAAAAA;
+// }
+// .guest-edit-permission .pam .body .item-picked {
+//     background-color: #BBBBBB;
+// }
+// .guest-edit-permission .pam .body .item .icon {
+//     display: inline-block;
+//     height: 15px;
+//     width: 15px;
+//     vertical-align: bottom;
+// }
+#form-guest-edit-permission .ldap .body .item {
+    margin: 8px 0;
+}
+
+#form-guest-edit-permission .ldap .cell {
+    width: 250px;
+}
+
+#form-guest-edit-permission .ldap .action-area {
+    float: right;
+    line-height: 24px;
+}
+
+#form-guest-edit-permission .ldap .header button {
+    margin-bottom: 1px;
+}
+
+#form-guest-edit-permission .ldap .checked {
+    border-color: red;
+    border-style: solid;
+    border-width: 1px;
+}
+
+#form-guest-edit-permission .ldap .checked.hide {
+    display: none;
+}
+
+/*
+ * Project Kimchi
+ *
+ * Copyright IBM, Corp. 2014
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#guest-storage-add-window {}
+
+#form-guest-storage-add .form-section .field {
+    overflow: visible;
+}
diff --git a/ui/css/src/modules/_modal-flat.scss b/ui/css/src/modules/_modal-flat.scss
index 90ae44a..a6528cc 100644
--- a/ui/css/src/modules/_modal-flat.scss
+++ b/ui/css/src/modules/_modal-flat.scss
@@ -212,30 +212,37 @@
 .modal-body .nav {
     margin-left: -30px;
     margin-right: -30px;
+    display: table;
+    width: 1082px; // Rewrite for mediaqueries later;
+    width: calc(100% + 60px);
 }
 
 .modal-body .nav-tabs {
-    border-bottom: 5px solid #eee;
+    border-bottom: 0;
 }
 
 .modal-body .nav-tabs > li.active > a, .modal-body .nav-tabs > li.active > a:hover, .modal-body .nav-tabs > li.active > a:focus {
-    border: none;
+    border: 0;
     border-radius: 0;
     border-bottom: 5px solid map-get($colors, guests);
     font-weight: 600;
-    padding: 8px 15px;
 }
 
 .modal-body .nav-tabs > li {
-    margin-bottom: -5px;
-    width: 190px;
+    margin-bottom: 0;
+    width: auto;
+    float: none;
+    position: static;
+    display: table-cell;
+    border: 0;
 }
 
 .modal-body .nav-tabs > li > a {
     font-size: 17px;
     font-weight: 300;
     font-family: $font-family-light;
-    border: none;
+    border: 0;
+    border-bottom: 5px solid $table-border-color;
     text-align: center;
     border-radius: 0;
     margin: 0;
diff --git a/ui/css/src/modules/_templates.scss b/ui/css/src/modules/_templates.scss
index f3ee854..0756f8e 100644
--- a/ui/css/src/modules/_templates.scss
+++ b/ui/css/src/modules/_templates.scss
@@ -76,7 +76,7 @@
     .template-tab-header {
         background: $table-bg;
         display: block;
-        border-top: 1px solid $table-border-color;
+        border-bottom: 1px solid $table-border-color;
         > span {
             padding: $table-cell-padding;
             display: inline-block;
@@ -87,7 +87,7 @@
             border-bottom: none;
             border-top: 0;
             line-height: $line-height-base;
-            height: 40px;
+            height: 42px;
         }
     }
     .template-tab-body {
@@ -97,15 +97,21 @@
             &:first-child {
                 border-top: 0;
             }
-            &:nth-child('even') {
+            &:nth-child(even) {
                 background-color: $table-bg-accent;
             }
-            &:nth-child('odd') {
+            &:nth-child(odd) {
                 background-color: $table-bg;
             }
             > span {
                 padding: $table-cell-padding;
                 display: inline-block;
+                vertical-align: middle;
+
+                input[type="text"].form-control {
+                    height: 40px;
+                }
+
             }
         }
     }
@@ -229,11 +235,11 @@
             }
         }
         .wok-vm-body {
+            clear: both;
             border-top: 1px solid $table-border-color;
             &:first-child {
                 border-color: $table-first-row-border-color;
             }
-            border-top: 1px solid $table-border-color;
             > span {
                 padding: $table-cell-padding;
                 display: inline-block;
diff --git a/ui/css/src/wok.scss b/ui/css/src/wok.scss
index cdb0430..4456b2d 100755
--- a/ui/css/src/wok.scss
+++ b/ui/css/src/wok.scss
@@ -101,6 +101,8 @@
 // Templates - To do: move to Kimchi
 @import "modules/guests";
 // Templates - To do: move to Kimchi
+ at import "modules/edit-guests";
+// Templates - To do: move to Kimchi
 @import "modules/templates";
 // Networks - To do: move to Kimchi
 @import "modules/network";
diff --git a/ui/pages/wok-ui.html.tmpl b/ui/pages/wok-ui.html.tmpl
index acfae27..671b530 100644
--- a/ui/pages/wok-ui.html.tmpl
+++ b/ui/pages/wok-ui.html.tmpl
@@ -24,6 +24,7 @@
 #silent _ = t.gettext
 #silent _t = t.gettext
 #from wok.config import get_version
+<!DOCTYPE html>
 <html lang="$lang.lang[0]">
 <head>
     <meta charset="UTF-8">
-- 
1.9.3




More information about the Kimchi-devel mailing list