diff --git a/client/src/components/chainetv.vue b/client/src/components/chainetv.vue
index 5565507..0bc7a70 100644
--- a/client/src/components/chainetv.vue
+++ b/client/src/components/chainetv.vue
@@ -73,8 +73,8 @@
         </div>
       </div>
     </div>
-    <modalLogin v-bind:class="{'is-active': showModalLogin}" @close="showModalLogin = false"/>
-    <modal v-bind:class="{'is-active': showModal}" @close="showModal = false">{{modalmessage}}</modal>
+    <modalLogin  v-bind:show="showModalLogin" @close="showModalLogin = false" />
+    <modal v-bind:show="showModal" @close="showModal = false">{{modalmessage}}</modal>
   </div>
 </template>
 
diff --git a/client/src/components/modal.vue b/client/src/components/modal.vue
index c92d77d..39d7580 100644
--- a/client/src/components/modal.vue
+++ b/client/src/components/modal.vue
@@ -1,16 +1,20 @@
 <template>
-  <div class="modal">
+<div>
+  <div v-bind:class="{'is-active':show}" class="modal">
     <div class="modal-background"></div>
      <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
     <div class="modal-content box">
          <slot></slot>
     </div>
   </div>
+  </div>
 </template>
 
 <script>
 export default {
-
+    props:{
+        show:false,
+    },
 };
 </script>
 
diff --git a/client/src/components/modalLogin.vue b/client/src/components/modalLogin.vue
index 762b291..c8274d3 100644
--- a/client/src/components/modalLogin.vue
+++ b/client/src/components/modalLogin.vue
@@ -1,11 +1,8 @@
 <!-- components/Login.vue -->
 <template>
-  <div class="modal">
-    <div class="modal-background"></div>
-    <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
-    <div class="modal-content box">
-      <div class="section is-success">
-        <div class="has-text-centered">
+  <modal v-bind:show="show" @close="$emit('close')">
+      <div class="hero is-success">
+        <div class="hero-body has-text-centered">
           <h2 class="title">Login</h2>
           <p class="subtitle error-msg">{{ errorMsg }}</p>
         </div>
@@ -28,14 +25,16 @@
         <a class="button is-success is-large" @click="authenticate">Login</a>
       </div>
       </section>
-    </div>
-  </div>
+  </modal>
 </template>
 
 <script>
-import { EventBus } from "../utils";
-
+import { EventBus } from '../utils';
+import modal from './modal'
 export default {
+  props:{
+    show:false,
+  },
   data() {
     return {
       name: "",
@@ -43,6 +42,9 @@ export default {
       errorMsg: ""
     };
   },
+  components: {
+    modal
+  },
   methods: {
     authenticate() {
       this.$store