diff --git a/package-lock.json b/package-lock.json
index dd26fd1a..0df7c871 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1922,6 +1922,11 @@
             "integrity": "sha512-nhf3rGyiZh/VM7FrSJ/5KeLlfaFkXz0nYcXriynfPH4vVpnxnqyEwaNGdNCVzHyyCA3cHgkQAMpdF/SFbFGZfA==",
             "dev": true
         },
+        "bulma-checkradio": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/bulma-checkradio/-/bulma-checkradio-1.1.1.tgz",
+            "integrity": "sha512-6Wn2faBiFkctSeiaQkeU2MbjkQeuXsN4AthBDEKrHGGPl5wmV2GEj4iZCqzvw7Te7baaHdU8PbUgrmlD5D6oGA=="
+        },
         "bytes": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
diff --git a/package.json b/package.json
index 2300feff..5a1de7e7 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
         "@fortawesome/free-regular-svg-icons": "^5.12.0",
         "@fortawesome/free-solid-svg-icons": "^5.12.0",
         "@fortawesome/vue-fontawesome": "^0.1.9",
+        "bulma-checkradio": "^1.1.1",
         "v-clipboard": "^2.2.2",
         "vue-axios": "^2.1.5",
         "vue-i18n": "^8.15.3",
diff --git a/resources/js/packages/fontawesome.js b/resources/js/packages/fontawesome.js
index f5c611af..8bd00527 100644
--- a/resources/js/packages/fontawesome.js
+++ b/resources/js/packages/fontawesome.js
@@ -13,7 +13,8 @@ import {
     faCheck,
     faLock,
     faLockOpen,
-    faSearch
+    faSearch,
+    faEllipsisH
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -25,7 +26,8 @@ library.add(
     faCheck,
     faLock,
     faLockOpen,
-    faSearch
+    faSearch,
+    faEllipsisH
 );
 
 Vue.component('font-awesome-icon', FontAwesomeIcon)
\ No newline at end of file
diff --git a/resources/js/views/Accounts.vue b/resources/js/views/Accounts.vue
index 99efded4..487b27b1 100644
--- a/resources/js/views/Accounts.vue
+++ b/resources/js/views/Accounts.vue
@@ -16,25 +16,37 @@
                 </div>
             </div>
             <!-- accounts -->
-            <div class="columns is-multiline is-centered is-gapless">
-                <div class="column is-narrow" v-for="account in filteredAccounts">
-                    <div class="tfa has-text-white is-size-4 has-ellipsis" @click.stop="showAccount(account.id)">
-                        <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
-                        {{ account.service }}
-                        <span class="is-family-primary is-size-7 has-text-grey ">{{ account.account }}</span>
+            <div class="columns is-multiline is-centered">
+                <div class="tfa column is-narrow has-text-white" v-for="account in filteredAccounts">
+                    <div class="tfa-container">
+                        <div class="tfa-checkbox" v-if="editMode">
+                            <div class="field">
+                                <input class="is-checkradio is-small is-white" :id="'ckb_' + account.id" type="checkbox" :name="'ckb_' + account.id">
+                                <label :for="'ckb_' + account.id"></label>
+                            </div>
+                        </div>
+                        <div class="tfa-content is-size-4" @click.stop="showAccount(account.id)">  
+                            <div class="tfa-text has-ellipsis">
+                                <img :src="'/storage/icons/' + account.icon" v-if="account.icon">
+                                {{ account.service }}
+                                <span class="is-family-primary is-size-7 has-text-grey ">{{ account.account }}</span>
+                            </div>
+                        </div>
+                        <div class="tfa-dots has-text-grey" v-if="!editMode">
+                            <font-awesome-icon :icon="['fas', 'ellipsis-h']" />
+                        </div>
                     </div>
-                    <span v-if="editMode">
+                </div>
+<!--                     <span v-if="editMode">
                         <router-link :to="{ name: 'edit', params: { twofaccountId: account.id }}" class="tag is-dark">
                             <font-awesome-icon :icon="['fas', 'edit']" />
                         </router-link>
                         <a class="tag is-dark" v-on:click="deleteAccount(account.id)">
                             <font-awesome-icon :icon="['fas', 'trash']" />
                         </a>
-                    </span>
-                </div>
+                    </span> -->
             </div>
         </div>
-
         <!-- No account -->
         <div class="container has-text-centered" v-show="this.showNoAccount">
             <p class="no-account"></p>
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 44dd64a7..148fc58f 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -6,7 +6,8 @@
 
 // Bootstrap
 //@import '~bootstrap/scss/bootstrap';
-@import '~bulma/bulma';
+@import '~bulma';
+@import '~bulma-checkradio';
 
 .main-section {
   padding: 1.5rem 1rem 8rem 1rem;
@@ -44,18 +45,12 @@
 }
 
 .tfa {
-    display: block;
-    height: auto;
     border-radius: 6px;
     text-align: center;
-    padding: 0.75rem 2.5rem;
-    margin: 0.5rem;
     cursor: pointer;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
     background-color: hsl(0, 0%, 10%); /*black-bis from Bulma*/
-    max-width: 400px;
+    padding: 0.75rem 1.5rem;
+    margin: 0.5rem;
 }
 
 @media screen and (max-width: 768px) {
@@ -70,6 +65,88 @@
   }
 }
 
+.tfa-container {
+  align-items: center;
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+}
+
+.tfa-container > div:first-of-type {
+    padding: 0;
+}
+
+.tfa-container > div:last-of-type {
+    padding: 0.5rem 0;
+}
+
+@media screen and (max-width: 768px) {
+  .tfa-container {
+    flex-direction: row;
+  }
+
+  .tfa-container > div:first-of-type {
+      padding: 0 0 0 0.5rem;
+  }
+
+  .tfa-container > div:last-of-type {
+      padding: 0 0.5rem 0 0;
+  }
+}
+
+.tfa-checkbox, .tfa-dots {
+  display: flex;
+  align-items: center;
+  padding: 0
+}
+
+@media screen and (max-width: 768px) {
+  .tfa-checkbox, .tfa-dots {
+    display: flex;
+    align-items: center;
+      padding: 0
+  }
+}
+
+.tfa-content {
+    flex-grow: 1;
+    order: 1;
+    overflow: hidden;
+}
+
+.tfa-checkbox {
+  order: 2;
+}
+
+.tfa-dots {
+  order: 3;
+}
+
+@media screen and (max-width: 768px) {
+  .tfa-checkbox {
+    order: 1;
+  }
+
+  .tfa-content {
+      order: 2;
+  }
+
+  .tfa-dots {
+    order: 3;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .is-checkradio[type="checkbox"] + label, .is-checkradio[type="radio"] + label {
+    padding-left: 0 !important;
+  }
+}
+
+.tfa-text {
+    display: block;
+    max-width: 300px;
+}
+
 .tfa img {
     height: 0.75em;
     width: 0.75em;
@@ -78,6 +155,7 @@
 
 .tfa span {
   display: block;
+  // margin-left: 2.3em;
 }
 
 .has-ellipsis {