diff --git a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
index 5b661e207e..351d13dd14 100644
--- a/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/ApiTokenManagement.vue
@@ -119,7 +119,7 @@ onMounted(() => {
         </a-button>
 
         <!-- Generate Token -->
-        <div class="flex flex-row justify-center w-full -mt-1 mb-3">
+        <div class="flex flex-row justify-start w-full -mt-1 mb-3">
           <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
         </div>
 
@@ -129,16 +129,16 @@ onMounted(() => {
           :model="selectedTokenData"
           name="basic"
           layout="vertical"
-          class="flex flex-col justify-center space-y-6"
+          class="flex flex-col justify-center space-y-3"
           no-style
           autocomplete="off"
           @finish="generateToken"
         >
-          <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
+          <a-input v-model:value="selectedTokenData.description" size="middle" :placeholder="$t('labels.description')" />
 
           <!-- Generate -->
-          <div class="flex flex-row justify-center">
-            <a-button type="primary" html-type="submit">
+          <div class="flex flex-row justify-end">
+            <a-button type="primary" html-type="submit" class="!rounded-md">
               {{ $t('general.generate') }}
             </a-button>
           </div>
@@ -157,9 +157,9 @@ onMounted(() => {
       <div class="flex flex-col h-full">
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">This action will remove this API Token</div>
 
-        <div class="flex mt-6 justify-center space-x-2">
-          <a-button @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }}</a-button>
-          <a-button type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }}</a-button>
+        <div class="flex mt-6 justify-end space-x-2">
+          <a-button class="!rounded-md" @click="showDeleteTokenModal = false"> {{ $t('general.cancel') }}</a-button>
+          <a-button class="!rounded-md" type="primary" danger @click="deleteToken()"> {{ $t('general.confirm') }}</a-button>
         </div>
       </div>
     </a-modal>
@@ -175,7 +175,7 @@ onMounted(() => {
           </a-button>
 
           <!--        Add New Token -->
-          <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
+          <a-button size="middle" class="!rounded-md" @click="openNewTokenModal">
             <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
               <component :is="iconMap.plus" />
               <div>{{ $t('activity.newToken') }}</div>
@@ -244,7 +244,7 @@ onMounted(() => {
                 <template #overlay>
                   <a-menu>
                     <a-menu-item>
-                      <div class="flex flex-row items-center py-3 h-[1rem]" @click="openDeleteModal(item)">
+                      <div class="flex flex-row items-center py-4 h-[1rem]" @click="openDeleteModal(item)">
                         <component :is="iconMap.delete" class="flex" />
                         <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
                       </div>
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index 005469c0a7..c0a8275f92 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -204,6 +204,7 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
       :closable="false"
       width="28rem"
       centered
+      class="!rounded-md"
       :footer="null"
       wrap-class-name="nc-modal-delete-user"
     >
@@ -211,9 +212,9 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
         <div class="flex flex-row justify-center mt-2 text-center w-full text-base">
           This action will remove this user from this project
         </div>
-        <div class="flex mt-6 justify-center space-x-2">
-          <a-button @click="showUserDeleteModal = false"> {{ $t('general.cancel') }}</a-button>
-          <a-button type="primary" danger @click="deleteUser"> {{ $t('general.confirm') }}</a-button>
+        <div class="flex mt-6 justify-end space-x-2">
+          <a-button class="!rounded-md" @click="showUserDeleteModal = false"> {{ $t('general.cancel') }}</a-button>
+          <a-button class="!rounded-md" type="primary" danger @click="deleteUser"> {{ $t('general.confirm') }}</a-button>
         </div>
       </div>
     </a-modal>
@@ -239,9 +240,8 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
           v-if="isUIAllowed('newUser')"
           v-e="['c:user:invite']"
           size="middle"
-          type="primary"
-          ghost
-          class="nc-invite-team"
+          type="default"
+          class="nc-invite-team !rounded-md"
           @click="onInvite"
         >
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
@@ -254,12 +254,12 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
 
     <div class="px-5">
       <div class="flex flex-row border-b-1 pb-2 px-2">
-        <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
+        <div class="flex flex-row w-3/6 space-x-1 items-center pl-1">
           <component :is="iconMap.email" class="flex text-gray-500 -mt-0.5" />
 
           <div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div>
         </div>
-        <div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1">
+        <div class="flex flex-row justify-start w-2/6 space-x-1 items-center pl-1">
           <component :is="iconMap.role" class="flex text-gray-500 -mt-0.5" />
 
           <div class="text-gray-600 text-xs">{{ $t('objects.role') }}</div>
@@ -270,21 +270,21 @@ const isSuperAdmin = (user: { main_roles?: string }) => {
       </div>
 
       <div v-for="(user, index) of users" :key="index" class="flex flex-row items-center border-b-1 py-2 px-2 nc-user-row">
-        <div class="flex w-4/6 flex-wrap nc-user-email">
+        <div class="flex w-3/6 flex-wrap nc-user-email">
           {{ user.email }}
         </div>
 
-        <div class="flex w-1/6 justify-center flex-wrap ml-4">
+        <div class="flex w-2/6 justify-start gap-2 flex-wrap ml-4">
           <div
             v-if="isSuperAdmin(user)"
-            class="rounded-full px-2 py-1 nc-user-role"
+            class="rounded-full px-3 py-1 nc-user-role"
             :style="{ backgroundColor: projectRoleTagColors[OrgUserRoles.SUPER_ADMIN] }"
           >
             Super Admin
           </div>
           <div
             v-if="user.roles"
-            class="rounded-full px-2 py-1 nc-user-role"
+            class="rounded-full px-3 py-1 nc-user-role"
             :style="{ backgroundColor: projectRoleTagColors[user.roles] }"
           >
             {{ $t(`objects.roleType.${user.roles}`) }}
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index 944095d143..8bcb180c9d 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -152,13 +152,55 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex flex-col w-full" data-testid="nc-share-base-sub-modal">
-    <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
-      <component :is="iconMap.share" />
+  <div class="flex flex-col gap-2 w-full" data-testid="nc-share-base-sub-modal">
+    <!--    Generate publicly shareable readonly base -->
+    <div class="flex text-xs text-gray-500 justify-start ml-1">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
 
-      <div class="text-xs">{{ $t('activity.shareBase.link') }}</div>
-    </div>
+    <div class="flex flex-row justify-between mx-1">
+      <a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
+        <a-button>
+          <div class="flex flex-row rounded-md items-center space-x-2 nc-disable-shared-base">
+            <div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
+            <div v-else>{{ $t('activity.shareBase.disable') }}</div>
+            <IcRoundKeyboardArrowDown class="h-[1rem]" />
+          </div>
+        </a-button>
 
+        <template #overlay>
+          <a-menu>
+            <a-menu-item>
+              <div v-if="base?.uuid" class="py-3" @click="disableSharedBase">{{ $t('activity.shareBase.disable') }}</div>
+              <div v-else class="py-3" @click="createShareBase(ShareBaseRole.Viewer)">{{ $t('activity.shareBase.enable') }}</div>
+            </a-menu-item>
+          </a-menu>
+        </template>
+      </a-dropdown>
+
+      <a-select
+        v-if="base?.uuid"
+        v-model:value="base.role"
+        class="flex nc-shared-base-role"
+        dropdown-class-name="nc-dropdown-share-base-role"
+      >
+        <template #suffixIcon>
+          <div class="flex flex-row">
+            <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
+          </div>
+        </template>
+
+        <a-select-option
+          v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
+          :key="index"
+          :value="role"
+          dropdown-class-name="capitalize"
+          @click="createShareBase(role)"
+        >
+          <div class="w-full px-2 capitalize">
+            {{ role }}
+          </div>
+        </a-select-option>
+      </a-select>
+    </div>
     <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
       <span class="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2 nc-url">{{ url }}</span>
 
@@ -212,54 +254,5 @@ onMounted(() => {
         </a-tooltip>
       </div>
     </div>
-
-    <!--    Generate publicly shareable readonly base -->
-    <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">{{ $t('msg.info.generatePublicShareableReadonlyBase') }}</div>
-
-    <div class="mt-4 flex flex-row justify-between mx-1">
-      <a-dropdown v-model="showEditBaseDropdown" class="flex" overlay-class-name="nc-dropdown-shared-base-toggle">
-        <a-button>
-          <div class="flex flex-row items-center space-x-2 nc-disable-shared-base">
-            <div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
-            <div v-else>{{ $t('activity.shareBase.disable') }}</div>
-            <IcRoundKeyboardArrowDown class="h-[1rem]" />
-          </div>
-        </a-button>
-
-        <template #overlay>
-          <a-menu>
-            <a-menu-item>
-              <div v-if="base?.uuid" class="py-3" @click="disableSharedBase">{{ $t('activity.shareBase.disable') }}</div>
-              <div v-else class="py-3" @click="createShareBase(ShareBaseRole.Viewer)">{{ $t('activity.shareBase.enable') }}</div>
-            </a-menu-item>
-          </a-menu>
-        </template>
-      </a-dropdown>
-
-      <a-select
-        v-if="base?.uuid"
-        v-model:value="base.role"
-        class="flex nc-shared-base-role"
-        dropdown-class-name="nc-dropdown-share-base-role"
-      >
-        <template #suffixIcon>
-          <div class="flex flex-row">
-            <IcRoundKeyboardArrowDown class="text-black -mt-0.5 h-[1rem]" />
-          </div>
-        </template>
-
-        <a-select-option
-          v-for="(role, index) in [ShareBaseRole.Editor, ShareBaseRole.Viewer]"
-          :key="index"
-          :value="role"
-          dropdown-class-name="capitalize"
-          @click="createShareBase(role)"
-        >
-          <div class="w-full px-2 capitalize">
-            {{ role }}
-          </div>
-        </a-select-option>
-      </a-select>
-    </div>
   </div>
 </template>
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 48386e9b86..003c2c16e9 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -230,19 +230,13 @@ watch(
         </template>
 
         <div v-else class="flex flex-col pb-4">
-          <div class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
+          <div v-if="selectedUser" class="flex flex-row items-center pl-2 pb-1 h-[1rem]">
             <component :is="iconMap.account" />
             <div class="text-xs ml-0.5 mt-0.5">{{ selectedUser ? $t('activity.editUser') : $t('activity.inviteTeam') }}</div>
           </div>
 
-          <div class="border-1 py-3 px-4 rounded-md mt-1">
-            <a-form
-              ref="formRef"
-              :validate-on-rule-change="false"
-              :model="usersData"
-              validate-trigger="onBlur"
-              @finish="saveUser"
-            >
+          <a-form ref="formRef" :validate-on-rule-change="false" :model="usersData" validate-trigger="onBlur" @finish="saveUser">
+            <div class="border-1 py-3 px-4 rounded-md mt-1">
               <div class="flex flex-row space-x-4">
                 <div class="flex flex-col w-3/4">
                   <a-form-item
@@ -256,6 +250,7 @@ watch(
                     <a-input
                       ref="emailField"
                       v-model:value="usersData.emails"
+                      size="middle"
                       validate-trigger="onBlur"
                       :placeholder="$t('labels.email')"
                       :disabled="!!selectedUser"
@@ -267,11 +262,16 @@ watch(
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
+                    <a-select
+                      v-model:value="usersData.role"
+                      size="middle"
+                      class="nc-user-roles !rounded-md"
+                      dropdown-class-name="nc-dropdown-user-role"
+                    >
                       <a-select-option v-for="(role, index) in projectRoles" :key="index" :value="role" class="nc-role-option">
                         <div class="flex flex-row h-full justify-start items-center">
                           <div
-                            class="px-2 py-1 flex rounded-full text-xs"
+                            class="px-3 py-1 flex rounded-full text-xs"
                             :style="{ backgroundColor: projectRoleTagColors[role] }"
                           >
                             {{ role }}
@@ -283,8 +283,8 @@ watch(
                 </div>
               </div>
 
-              <div class="flex flex-row justify-center">
-                <a-button type="primary" html-type="submit">
+              <div class="flex flex-row justify-end">
+                <a-button type="primary" html-type="submit" class="!rounded-md">
                   <div v-if="selectedUser">{{ $t('general.save') }}</div>
 
                   <div v-else class="flex flex-row justify-center items-center space-x-1.5">
@@ -293,11 +293,11 @@ watch(
                   </div>
                 </a-button>
               </div>
-            </a-form>
-          </div>
+            </div>
+          </a-form>
         </div>
 
-        <div class="flex mt-4">
+        <div class="flex">
           <LazyTabsAuthUserManagementShareBase />
         </div>
       </div>