diff --git a/client/components/tables/UsersTable.vue b/client/components/tables/UsersTable.vue
index 8fb644eab..d243fe316 100644
--- a/client/components/tables/UsersTable.vue
+++ b/client/components/tables/UsersTable.vue
@@ -1,12 +1,5 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
-    <div class="flex items-center mb-2">
-      <h1 class="text-xl">{{ $strings.HeaderUsers }}</h1>
-      <div class="mx-2 w-7 h-7 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center" @click="clickAddUser">
-        <span class="material-icons" style="font-size: 1.4rem">add</span>
-      </div>
-    </div>
-
+  <div>
     <div class="text-center">
       <table id="accounts">
         <tr>
diff --git a/client/pages/config/users/index.vue b/client/pages/config/users/index.vue
index a47eedc4f..7501ef0cc 100644
--- a/client/pages/config/users/index.vue
+++ b/client/pages/config/users/index.vue
@@ -1,16 +1,27 @@
 <template>
   <div>
-    <tables-users-table />
+    <app-settings-content :headerText="$strings.HeaderUsers" showAddButton=true @clicked="setShowUserModal">
+      <tables-users-table />
+    </app-settings-content>
+    <modals-account-modal ref="accountModal" v-model="showAccountModal" :account="selectedAccount" />
   </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      selectedAccount: null,
+      showAccountModal: false,
+    }
   },
   computed: {},
-  methods: {},
+  methods: {
+    setShowUserModal(selectedAccount) {
+      this.selectedAccount = selectedAccount
+      this.showAccountModal = true
+    }
+  },
   mounted() {}
 }
 </script>
\ No newline at end of file