diff --git a/client/components/layout/FooterBar.vue b/client/components/layout/FooterBar.vue
index 9a033b07..7c2eaf9d 100644
--- a/client/components/layout/FooterBar.vue
+++ b/client/components/layout/FooterBar.vue
@@ -32,7 +32,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '~bulma/sass/utilities/mixins';
+@import '~bulma/sass/utilities/_all';
 
 .footer {
   margin-left: 180px;
diff --git a/client/views/components/modals/CardModal.vue b/client/views/components/modals/CardModal.vue
index 4c982130..0c57b697 100644
--- a/client/views/components/modals/CardModal.vue
+++ b/client/views/components/modals/CardModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <card-modal :visible="visible" @close="close" :title="title" transition="zoom">
+  <card-modal class="modal" :visible="visible" @close="close" :title="title" transition="zoom">
     <div class="content has-text-centered"><img :src="src" height="120" alt="Vue Admin"></div>
     <a @click="open(url)">Vue Admin on GitHub</a>
   </card-modal>
@@ -36,3 +36,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.modal {
+  z-index: 1024;
+}
+</style>
diff --git a/client/views/components/modals/ImageModal.vue b/client/views/components/modals/ImageModal.vue
index ec276cc5..c75e3c8b 100644
--- a/client/views/components/modals/ImageModal.vue
+++ b/client/views/components/modals/ImageModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <image-modal :visible="visible" @close="close" transition="roll">
+  <image-modal class="modal" :visible="visible" @close="close" transition="roll">
     <p class="image is-4by3"><img src="http://placehold.it/1280x960"></p>
   </image-modal>
 </template>
@@ -24,3 +24,9 @@ export default {
 
 }
 </script>
+
+<style scoped>
+.modal {
+  z-index: 1024;
+}
+</style>
diff --git a/client/views/components/modals/Modal.vue b/client/views/components/modals/Modal.vue
index 0f880eec..59b6c475 100644
--- a/client/views/components/modals/Modal.vue
+++ b/client/views/components/modals/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <modal :visible="visible" @close="close">
+  <modal class="modal" :visible="visible" @close="close">
     <div class="box">
       <article class="media">
         <div class="media-left">
@@ -53,3 +53,9 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+.modal {
+  z-index: 1024;
+}
+</style>
diff --git a/client/views/ui/Form.vue b/client/views/ui/Form.vue
index 4b3ac00e..074f18a7 100644
--- a/client/views/ui/Form.vue
+++ b/client/views/ui/Form.vue
@@ -381,7 +381,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '~bulma/sass/utilities/mixins';
+@import '~bulma/sass/utilities/_all';
 
 .button {
   margin: 5px 0 0;
diff --git a/package.json b/package.json
index fb613c2f..847f9aef 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,7 @@
     "animate.css": "3.5.2",
     "animejs": "^2.0.1",
     "axios": "^0.15.3",
-    "bulma": "^0.3.2",
+    "bulma": "^0.5.3",
     "font-awesome": "4.7.0",
     "mdi": "^1.8.36",
     "plotly.js": "^1.24.2",
@@ -54,7 +54,7 @@
     "vue-bulma-expanding": "^0.0.1",
     "vue-bulma-jump": "^0.0.2",
     "vue-bulma-message": "^1.1.1",
-    "vue-bulma-modal": "1.0.1",
+    "vue-bulma-modal": "github:imoontech/modal",
     "vue-bulma-notification": "^1.1.1",
     "vue-bulma-progress-bar": "^1.0.2",
     "vue-bulma-progress-tracker": "0.0.4",