diff --git a/src/pages/UserSettings.vue b/src/pages/UserSettings.vue
index d0ab92c..6b53f1d 100644
--- a/src/pages/UserSettings.vue
+++ b/src/pages/UserSettings.vue
@@ -1,32 +1,30 @@
 <template>
   <SiteTitle :title="$t('userSettings')" />
-  <div class="q-pa-md">
-    <div class="q-gutter-y-md">
-      <q-card>
-        <q-tabs
-          v-model="tab"
-          dense
-          class="taxt-grey"
-          active-color="primary"
-          indicator-color="primary"
-          align="justify"
-          narrow-indicator
-        >
-          <q-tab name="users" no-caps :label="$t('users')" />
-          <q-tab name="roles" no-caps :label="$t('roles')" />
-        </q-tabs>
-        <q-separator />
+  <div class="q-gutter-y-md">
+    <q-card>
+      <q-tabs
+        v-model="tab"
+        dense
+        class="taxt-grey"
+        active-color="primary"
+        indicator-color="primary"
+        align="justify"
+        narrow-indicator
+      >
+        <q-tab name="users" no-caps :label="$t('users')" />
+        <q-tab name="roles" no-caps :label="$t('roles')" />
+      </q-tabs>
+      <q-separator />
 
-        <q-tab-panels v-model="tab" animated>
-          <q-tab-panel name="users">
-            <UserTable />
-          </q-tab-panel>
-          <q-tab-panel name="roles">
-            <RoleTable />
-          </q-tab-panel>
-        </q-tab-panels>
-      </q-card>
-    </div>
+      <q-tab-panels v-model="tab" animated>
+        <q-tab-panel name="users" style="padding: 0px">
+          <UserTable />
+        </q-tab-panel>
+        <q-tab-panel name="roles" style="padding: 0px">
+          <RoleTable />
+        </q-tab-panel>
+      </q-tab-panels>
+    </q-card>
   </div>
 </template>
 
diff --git a/src/vueLib/tables/roles/RoleTable.vue b/src/vueLib/tables/roles/RoleTable.vue
index 43a7783..cb4b21d 100644
--- a/src/vueLib/tables/roles/RoleTable.vue
+++ b/src/vueLib/tables/roles/RoleTable.vue
@@ -1,128 +1,126 @@
 <template>
-  <div class="q-pa-md">
-    <q-table
-      flat
-      bordered
-      ref="tableRef"
-      title="Roles"
-      title-class="text-bold text-blue-9"
-      :no-data-label="$t('noDataAvailable')"
-      :loading-label="$t('loading')"
-      :rows-per-page-label="$t('recordsPerPage')"
-      :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :rows="roles"
-      :columns="columns"
-      row-key="id"
-      v-model:pagination="pagination"
-      :loading="loading"
-      :filter="filter"
-      :selection="selectOption ? 'multiple' : 'none'"
-      v-model:selected="selected"
-      binary-state-sort
-      dense
-      class="bigger-table-text"
-    >
-      <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
-          <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
-            dense
-            flat
-            icon="add"
-            @click="openAllValueDialog(null)"
+  <q-table
+    flat
+    bordered
+    ref="tableRef"
+    title="Roles"
+    title-class="text-bold text-blue-9"
+    :no-data-label="$t('noDataAvailable')"
+    :loading-label="$t('loading')"
+    :rows-per-page-label="$t('recordsPerPage')"
+    :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
+    :rows="roles"
+    :columns="columns"
+    row-key="id"
+    v-model:pagination="pagination"
+    :loading="loading"
+    :filter="filter"
+    :selection="selectOption ? 'multiple' : 'none'"
+    v-model:selected="selected"
+    binary-state-sort
+    dense
+    class="bigger-table-text"
+  >
+    <template v-slot:top-left>
+      <q-btn-group push flat style="color: grey">
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'write')"
+          dense
+          flat
+          icon="add"
+          @click="openAllValueDialog(null)"
+        >
+          <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
+        </q-btn>
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'write')"
+          dense
+          flat
+          style="color: grey"
+          :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
+          @click="selectOption = !selectOption"
+        >
+          <q-tooltip>{{ $t('selectRoleOptions') }}</q-tooltip>
+        </q-btn>
+      </q-btn-group>
+      <div v-if="selectOption && selected.length > 0">
+        <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
+        <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
+          <q-item
+            clickable
+            v-close-popup
+            @click="openRemoveDialog(...selected)"
+            class="text-negative"
+            >{{ $t('delete') }}</q-item
           >
-            <q-tooltip>{{ $t('addNewRole') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('userSettings', 'write')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectRoleOptions') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
-        <div v-if="selectOption && selected.length > 0">
-          <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
-          <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
-            <q-item
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(...selected)"
-              class="text-negative"
-              >{{ $t('delete') }}</q-item
-            >
-          </q-menu>
-        </div>
-        <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
-          {{ $t('selected') }}: {{ selected.length }}
-        </div>
-      </template>
-      <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
-      </template>
-      <template v-slot:body-cell="props">
-        <q-td
-          :props="props"
-          :disable="!autorized(props.row)"
-          :style="
+        </q-menu>
+      </div>
+      <div v-if="selectOption && selected.length > 0" class="q-ml-md text-weight-bold">
+        {{ $t('selected') }}: {{ selected.length }}
+      </div>
+    </template>
+    <template v-slot:top-right>
+      <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
+        <template v-slot:append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+    <template v-slot:body-cell="props">
+      <q-td
+        :props="props"
+        :disable="!autorized(props.row)"
+        :style="
+          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            ? 'cursor: pointer'
+            : ''
+        "
+        @click="
+          autorized(props.row) && user.isPermittedTo('userSettings', 'write')
+            ? openSingleValueDialog(props.col.label, props.col.name, props.row)
+            : ''
+        "
+      >
+        {{ props.value }}
+      </q-td>
+    </template>
+    <template v-slot:body-cell-permissions="props">
+      <q-td :props="props">
+        <q-btn
+          :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
+          flat
+          dense
+          icon="rule"
+          :color="
             autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? 'cursor: pointer'
-              : ''
+              ? 'secondary'
+              : 'grey'
           "
           @click="
-            autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-              ? openSingleValueDialog(props.col.label, props.col.name, props.row)
-              : ''
+            user.isPermittedTo('userSettings', 'write') &&
+            openAllValueDialog(props.row, 'permissions')
           "
         >
-          {{ props.value }}
-        </q-td>
-      </template>
-      <template v-slot:body-cell-permissions="props">
-        <q-td :props="props">
-          <q-btn
-            :disable="!autorized(props.row) || !user.isPermittedTo('userSettings', 'write')"
-            flat
-            dense
-            icon="rule"
-            :color="
-              autorized(props.row) && user.isPermittedTo('userSettings', 'write')
-                ? 'secondary'
-                : 'grey'
-            "
-            @click="
-              user.isPermittedTo('userSettings', 'write') &&
-              openAllValueDialog(props.row, 'permissions')
-            "
-          >
-            <q-tooltip> {{ $t('permissions') }} </q-tooltip>
-          </q-btn>
-        </q-td>
-      </template>
-      <template v-slot:body-cell-option="props">
-        <q-td :props="props">
-          <q-btn
-            v-if="user.isPermittedTo('userSettings', 'delete')"
-            :disable="!autorized(props.row)"
-            flat
-            dense
-            icon="delete"
-            color="negative"
-            @click="openRemoveDialog(props.row)"
-          >
-            <q-tooltip> {{ $t('delete') }} </q-tooltip>
-          </q-btn>
-        </q-td>
-      </template>
-    </q-table>
-  </div>
+          <q-tooltip> {{ $t('permissions') }} </q-tooltip>
+        </q-btn>
+      </q-td>
+    </template>
+    <template v-slot:body-cell-option="props">
+      <q-td :props="props">
+        <q-btn
+          v-if="user.isPermittedTo('userSettings', 'delete')"
+          :disable="!autorized(props.row)"
+          flat
+          dense
+          icon="delete"
+          color="negative"
+          @click="openRemoveDialog(props.row)"
+        >
+          <q-tooltip> {{ $t('delete') }} </q-tooltip>
+        </q-btn>
+      </q-td>
+    </template>
+  </q-table>
   <EditOneDialog
     ref="editOneDialog"
     endpoint="roles/update"