From d40f7210da713600406107353ca1765cdc1a362c Mon Sep 17 00:00:00 2001
From: Jonathan Adeline <jonathan@baserow.io>
Date: Wed, 15 Nov 2023 06:08:35 +0000
Subject: [PATCH] Restyle context, select, dropdown menus

---
 ...918_redesign_context_and_select_menus.json |    7 +
 .../contexts/CreateAuthProviderContext.vue    |    6 +-
 .../contexts/EditAuthProviderMenuContext.vue  |   21 +-
 .../MemberRolesDatabaseContextItem.vue        |   10 +-
 .../MemberRolesTableContextItem.vue           |    6 +-
 .../components/teams/EditTeamContext.vue      |   12 +-
 .../components/teams/ManageTeamForm.vue       |    2 +-
 .../assets/scss/components/views/kanban.scss  |    9 +-
 .../admin/users/contexts/EditUserContext.vue  |   46 +-
 .../admin/users/modals/DeleteUserModal.vue    |    4 +-
 .../contexts/EditWorkspaceContext.vue         |    9 +-
 .../modals/DeleteWorkspaceModal.vue           |    4 +-
 .../row_comments/RowCommentContext.vue        |   20 +-
 .../views/ViewOwnershipMenuLink.vue           |   13 +-
 .../views/kanban/KanbanViewStackContext.vue   |   20 +-
 .../components/elements/ElementsListItem.vue  |    2 +-
 .../PageSettingsPathParamsFormElement.vue     |    1 +
 .../sidebar/SidebarComponentBuilder.vue       |    5 +-
 .../components/sidebar/SidebarItemBuilder.vue |   17 +-
 .../core/assets/scss/components/button.scss   |    2 +
 .../core/assets/scss/components/context.scss  |  213 ++-
 .../core/assets/scss/components/dropdown.scss |   57 +-
 .../components/expand_on_overflow_list.scss   |    1 +
 .../core/assets/scss/components/filters.scss  |    9 +-
 .../assets/scss/components/group_bys.scss     |    4 -
 .../core/assets/scss/components/select.scss   |  134 +-
 .../core/assets/scss/components/sortings.scss |    4 -
 .../core/components/ColorPickerContext.vue    |    3 +-
 .../modules/core/components/Dropdown.vue      |    6 +-
 .../modules/core/components/DropdownItem.vue  |    2 +-
 .../application/CreateApplicationContext.vue  |   17 +-
 .../settings/members/EditInviteContext.vue    |   15 +-
 .../settings/members/EditMemberContext.vue    |   12 +-
 .../settings/members/EditRoleContext.vue      |   21 +-
 .../core/components/sidebar/Sidebar.vue       |   16 +-
 .../components/sidebar/SidebarApplication.vue |   26 +-
 ...SidebarDuplicateApplicationContextItem.vue |    5 +-
 .../workspace/RemoveFromWorkspaceModal.vue    |    4 +-
 .../components/workspace/WorkspaceContext.vue |   41 +-
 .../workspace/WorkspaceInviteForm.vue         |    1 +
 .../workspace/WorkspacesContextItem.vue       |   20 +-
 web-frontend/modules/core/mixins/dropdown.js  |   13 +
 .../modules/core/pages/styleGuide.vue         |  277 ++-
 .../components/docs/APIDocsExample.vue        |    1 +
 .../components/field/FieldContext.vue         |   11 +-
 .../components/field/FieldDateSubForm.vue     |    2 +
 .../database/components/field/FieldForm.vue   |    1 +
 .../components/field/FieldLinkRowSubForm.vue  |    1 +
 .../components/field/FieldNumberSubForm.vue   |    1 +
 .../components/field/FieldRatingSubForm.vue   |    2 +
 .../components/field/FieldRollupSubForm.vue   |    2 +
 .../components/row/RowEditModalField.vue      |    9 +-
 .../database/components/settings/APIToken.vue |   29 +-
 .../database/components/sidebar/Sidebar.vue   |    5 +-
 .../components/sidebar/SidebarItem.vue        |   25 +-
 .../SidebarDuplicateTableContextItem.vue      |    5 +-
 .../database/components/view/ViewContext.vue  |   28 +-
 .../view/ViewFieldConditionItem.vue           |    4 +-
 .../view/ViewFilterFormOperator.vue           |    2 +-
 .../view/ViewFilterTypeCollaborators.vue      |    3 +-
 .../view/ViewFilterTypeFileTypeDropdown.vue   |    3 +-
 .../components/view/ViewFilterTypeLinkRow.vue |    3 +-
 .../view/ViewFilterTypeSelectOptions.vue      |    3 +-
 .../components/view/ViewGroupByContext.vue    |    8 +-
 .../components/view/ViewSortContext.vue       |    8 +-
 .../components/view/ViewsContextItem.vue      |    4 +
 .../form/FormViewFieldMultipleLinkRow.vue     |    2 +-
 .../view/form/FormViewModeContext.vue         |   14 +-
 .../components/view/grid/GridView.vue         |   68 +-
 .../view/grid/GridViewFieldFooter.vue         |   30 +-
 .../view/grid/GridViewFieldType.vue           |   41 +-
 .../grid/GridViewRowIdentifierDropdown.vue    |   14 +-
 .../grid/fields/GridViewRowsAddContext.vue    |   11 +-
 .../components/webhook/WebhookForm.vue        |    3 +-
 web-frontend/modules/database/locales/en.json | 1611 +++++++++--------
 .../LocalBaserowTableServiceSortForm.vue      |    3 +-
 .../__snapshots__/dropdown.spec.js.snap       |   70 +-
 .../exportTableModal.spec.js.snap             |  164 +-
 .../__snapshots__/viewFilterForm.spec.js.snap |   88 +-
 .../gridViewFieldFooter.spec.js.snap          |   64 +-
 80 files changed, 1995 insertions(+), 1465 deletions(-)
 create mode 100644 changelog/entries/unreleased/feature/1918_redesign_context_and_select_menus.json

diff --git a/changelog/entries/unreleased/feature/1918_redesign_context_and_select_menus.json b/changelog/entries/unreleased/feature/1918_redesign_context_and_select_menus.json
new file mode 100644
index 000000000..6addb44c7
--- /dev/null
+++ b/changelog/entries/unreleased/feature/1918_redesign_context_and_select_menus.json
@@ -0,0 +1,7 @@
+{
+    "type": "feature",
+    "message": "Redesign context and select menus",
+    "issue_number": 1918,
+    "bullet_points": [],
+    "created_at": "2023-10-23"
+}
\ No newline at end of file
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/CreateAuthProviderContext.vue b/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/CreateAuthProviderContext.vue
index cda0dbf7d..8d4690395 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/CreateAuthProviderContext.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/CreateAuthProviderContext.vue
@@ -8,8 +8,12 @@
       <li
         v-for="authProviderType in authProviderTypes"
         :key="authProviderType.type"
+        class="context__menu-item"
       >
-        <a @click="$emit('create', authProviderType)">
+        <a
+          class="context__menu-item-link"
+          @click="$emit('create', authProviderType)"
+        >
           <AuthProviderIcon :icon="getIcon(authProviderType)" />
           {{ getName(authProviderType) }}
         </a>
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/EditAuthProviderMenuContext.vue b/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/EditAuthProviderMenuContext.vue
index 77c072d20..c45090a05 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/EditAuthProviderMenuContext.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/admin/contexts/EditAuthProviderMenuContext.vue
@@ -5,15 +5,24 @@
     :max-height-if-outside-viewport="true"
   >
     <ul class="context__menu">
-      <li v-if="canBeEdited(authProvider.type)">
-        <a @click="$emit('edit', authProvider.id)">
-          <i class="context__menu-icon iconoir-edit-pencil"></i>
+      <li v-if="canBeEdited(authProvider.type)" class="context__menu-item">
+        <a
+          class="context__menu-item-link"
+          @click="$emit('edit', authProvider.id)"
+        >
+          <i class="context__menu-item-icon iconoir-edit-pencil"></i>
           {{ $t('editAuthProviderMenuContext.edit') }}
         </a>
       </li>
-      <li v-if="canBeDeleted(authProvider.type)">
-        <a @click="$emit('delete', authProvider.id)">
-          <i class="context__menu-icon iconoir-bin"></i>
+      <li
+        v-if="canBeDeleted(authProvider.type)"
+        class="context__menu-item context__menu-item--with-separator"
+      >
+        <a
+          class="context__menu-item-link context__menu-item-link--delete"
+          @click="$emit('delete', authProvider.id)"
+        >
+          <i class="context__menu-item-icon iconoir-bin"></i>
           {{ $t('editAuthProviderMenuContext.delete') }}
         </a>
       </li>
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesDatabaseContextItem.vue b/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesDatabaseContextItem.vue
index 9817776de..7e2ef87a9 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesDatabaseContextItem.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesDatabaseContextItem.vue
@@ -1,11 +1,9 @@
 <template>
   <div>
-    <div @click="() => $refs.modal.show()">
-      <a>
-        <i class="context__menu-icon iconoir-community"></i
-        >{{ $t('memberRolesDatabaseContexItem.label') }}</a
-      >
-    </div>
+    <a class="context__menu-item-link" @click="() => $refs.modal.show()">
+      <i class="context__menu-item-icon iconoir-community"></i
+      >{{ $t('memberRolesDatabaseContexItem.label') }}</a
+    >
     <MemberRolesModal ref="modal" :database="application" />
   </div>
 </template>
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesTableContextItem.vue b/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesTableContextItem.vue
index 2dc0f74a1..b46932d65 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesTableContextItem.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/member-roles/MemberRolesTableContextItem.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <div @click="() => $refs.modal.show()">
-      <a>
-        <i class="context__menu-icon iconoir-community"></i
+    <div class="context__menu-item" @click="() => $refs.modal.show()">
+      <a class="context__menu-item-link">
+        <i class="context__menu-item-icon iconoir-community"></i
         >{{ $t('memberRolesTableContexItem.label') }}</a
       >
     </div>
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/components/teams/EditTeamContext.vue b/enterprise/web-frontend/modules/baserow_enterprise/components/teams/EditTeamContext.vue
index 9ddd88d7e..a58489a47 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/teams/EditTeamContext.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/teams/EditTeamContext.vue
@@ -10,9 +10,10 @@
               workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="handleEditClick(team)">
-            <i class="context__menu-icon iconoir-edit-pencil"></i>
+          <a class="context__menu-item-link" @click="handleEditClick(team)">
+            <i class="context__menu-item-icon iconoir-edit-pencil"></i>
             {{ $t('editTeamContext.edit') }}
           </a>
         </li>
@@ -24,15 +25,16 @@
               workspace.id
             )
           "
+          class="context__menu-item context__menu-item--with-separator"
         >
           <a
             :class="{
-              'context__menu-item--loading': removeLoading,
+              'context__menu-item-link--loading': removeLoading,
             }"
-            class="color-error"
+            class="context__menu-item-link context__menu-item-link--delete"
             @click.prevent="remove(team)"
           >
-            <i class="context__menu-icon iconoir-bin"></i>
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('editTeamContext.remove') }}
           </a>
         </li>
diff --git a/enterprise/web-frontend/modules/baserow_enterprise/components/teams/ManageTeamForm.vue b/enterprise/web-frontend/modules/baserow_enterprise/components/teams/ManageTeamForm.vue
index 661e85b71..98bd04fbd 100644
--- a/enterprise/web-frontend/modules/baserow_enterprise/components/teams/ManageTeamForm.vue
+++ b/enterprise/web-frontend/modules/baserow_enterprise/components/teams/ManageTeamForm.vue
@@ -42,7 +42,7 @@
         </div>
         <FormElement class="control">
           <div class="control__elements">
-            <Dropdown v-model="values.default_role" :show-search="false">
+            <Dropdown v-model="values.default_role" :show-search="false" small>
               <DropdownItem
                 v-for="role in roles"
                 :key="role.uid"
diff --git a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss
index 4d6b5551d..2b9e22959 100644
--- a/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss
+++ b/premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss
@@ -165,7 +165,9 @@
     transition-delay: 0s;
   }
 
-  &:not(.kanban-view__stack-card--disabled):not(.kanban-view__stack-card--dragging):hover {
+  &:not(.kanban-view__stack-card--disabled):not(
+      .kanban-view__stack-card--dragging
+    ):hover {
     cursor: pointer;
 
     @include add-elevation($elevation-medium);
@@ -186,8 +188,11 @@
   border: solid 1px $color-neutral-400;
   border-radius: 100%;
   color: $color-neutral-900;
+  width: 28px;
+  height: 28px;
+  justify-content: center;
 
-  @include center-text(28px, 12px);
+  @include flex-align-items();
 
   line-height: 26px;
 
diff --git a/premium/web-frontend/modules/baserow_premium/components/admin/users/contexts/EditUserContext.vue b/premium/web-frontend/modules/baserow_premium/components/admin/users/contexts/EditUserContext.vue
index 54da0ffe6..d733142ba 100644
--- a/premium/web-frontend/modules/baserow_premium/components/admin/users/contexts/EditUserContext.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/admin/users/contexts/EditUserContext.vue
@@ -3,54 +3,66 @@
     <template v-if="Object.keys(user).length > 0">
       <div class="context__menu-title">{{ user.username }} ({{ user.id }})</div>
       <ul class="context__menu">
-        <li>
-          <a @click.prevent="showEditModal">
-            <i class="context__menu-icon iconoir-edit-pencil"></i>
+        <li class="context__menu-item">
+          <a class="context__menu-item-link" @click.prevent="showEditModal">
+            <i class="context__menu-item-icon iconoir-edit-pencil"></i>
             {{ $t('action.edit') }}
           </a>
         </li>
-        <li>
-          <a @click.prevent="showChangePasswordModal">
-            <i class="context__menu-icon iconoir-key-alt"></i>
+        <li class="context__menu-item">
+          <a
+            class="context__menu-item-link"
+            @click.prevent="showChangePasswordModal"
+          >
+            <i class="context__menu-item-icon iconoir-key-alt"></i>
             {{ $t('editUserContext.changePassword') }}
           </a>
         </li>
-        <li>
+        <li class="context__menu-item">
           <a
             v-if="user.is_active"
+            class="context__menu-item-link"
             :class="{
-              'context__menu-item--loading': loading,
+              'context__menu-item-link--loading': loading,
             }"
             @click.prevent="deactivate"
           >
-            <i class="context__menu-icon iconoir-cancel"></i>
+            <i class="context__menu-item-icon iconoir-cancel"></i>
             {{ $t('action.deactivate') }}
           </a>
           <a
             v-else
+            class="context__menu-item-link"
             :class="{
-              'context__menu-item--loading': loading,
+              'context__menu-item-link--loading': loading,
             }"
             @click.prevent="activate"
           >
-            <i class="context__menu-icon iconoir-check"></i>
+            <i class="context__menu-item-icon iconoir-check"></i>
             {{ $t('action.activate') }}
           </a>
         </li>
-        <li v-if="user.id !== userId && !user.is_staff">
+        <li
+          v-if="user.id !== userId && !user.is_staff"
+          class="context__menu-item"
+        >
           <a
+            class="context__menu-item-link"
             :class="{
-              'context__menu-item--loading': impersonateLoading,
+              'context__menu-item-link--loading': impersonateLoading,
             }"
             @click.prevent="impersonate"
           >
-            <i class="context__menu-icon iconoir-group"></i>
+            <i class="context__menu-item-icon iconoir-group"></i>
             {{ $t('editUserContext.impersonate') }}
           </a>
         </li>
-        <li>
-          <a @click.prevent="showDeleteModal">
-            <i class="context__menu-icon iconoir-bin"></i>
+        <li class="context__menu-item context__menu-item--with-separator">
+          <a
+            class="context__menu-item-link context__menu-item-link--delete"
+            @click.prevent="showDeleteModal"
+          >
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('editUserContext.delete') }}
           </a>
         </li>
diff --git a/premium/web-frontend/modules/baserow_premium/components/admin/users/modals/DeleteUserModal.vue b/premium/web-frontend/modules/baserow_premium/components/admin/users/modals/DeleteUserModal.vue
index 3cc689629..a8cdca959 100644
--- a/premium/web-frontend/modules/baserow_premium/components/admin/users/modals/DeleteUserModal.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/admin/users/modals/DeleteUserModal.vue
@@ -16,7 +16,7 @@
       </p>
       <div class="actions">
         <div class="align-right">
-          <a
+          <button
             class="button button--large button--error button--overflow"
             :class="{ 'button--loading': loading }"
             :disabled="loading"
@@ -24,7 +24,7 @@
             @click.prevent="deleteUser()"
           >
             {{ $t('deleteUserModal.delete', user) }}
-          </a>
+          </button>
         </div>
       </div>
     </div>
diff --git a/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/contexts/EditWorkspaceContext.vue b/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/contexts/EditWorkspaceContext.vue
index 2e5fc33e5..ba203b071 100644
--- a/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/contexts/EditWorkspaceContext.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/contexts/EditWorkspaceContext.vue
@@ -5,9 +5,12 @@
         {{ workspace.name }} ({{ workspace.id }})
       </div>
       <ul class="context__menu">
-        <li>
-          <a @click.prevent="showDeleteModal">
-            <i class="context__menu-icon iconoir-bin"></i>
+        <li class="context__menu-item context__menu-item--with-separator">
+          <a
+            class="context__menu-item-link context__menu-item-link--delete"
+            @click.prevent="showDeleteModal"
+          >
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('editWorkspaceContext.delete') }}
           </a>
         </li>
diff --git a/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/modals/DeleteWorkspaceModal.vue b/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/modals/DeleteWorkspaceModal.vue
index 6b5875fe3..8daa84c4a 100644
--- a/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/modals/DeleteWorkspaceModal.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/admin/workspaces/modals/DeleteWorkspaceModal.vue
@@ -15,7 +15,7 @@
       </p>
       <div class="actions">
         <div class="align-right">
-          <a
+          <button
             class="button button--large button--error button--overflow"
             :class="{ 'button--loading': loading }"
             :disabled="loading"
@@ -23,7 +23,7 @@
             @click.prevent="deleteGroup()"
           >
             {{ $t('deleteWorkspaceModal.delete', workspace) }}
-          </a>
+          </button>
         </div>
       </div>
     </div>
diff --git a/premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentContext.vue b/premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentContext.vue
index d7b1a1aab..a74e92aa1 100644
--- a/premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentContext.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/row_comments/RowCommentContext.vue
@@ -6,15 +6,23 @@
   >
     <div>
       <ul class="context__menu">
-        <li class="edit">
-          <a :class="{ disabled: !canEdit }" @click.prevent="editComment">
-            <i class="context__menu-icon iconoir-edit-pencil"></i>
+        <li class="context__menu-item edit">
+          <a
+            class="context__menu-item-link"
+            :class="{ disabled: !canEdit }"
+            @click.prevent="editComment"
+          >
+            <i class="context__menu-item-icon iconoir-edit-pencil"></i>
             <span> {{ $t('rowCommentContext.edit') }} </span>
           </a>
         </li>
-        <li class="delete">
-          <a :class="{ disabled: !canDelete }" @click.prevent="deleteComment">
-            <i class="context__menu-icon iconoir-bin"></i>
+        <li class="context__menu-item context__menu-item--with-separator">
+          <a
+            class="context__menu-item-link context__menu-item-link--delete"
+            :class="{ disabled: !canDelete }"
+            @click.prevent="deleteComment"
+          >
+            <i class="context__menu-item-icon iconoir-bin"></i>
             <span> {{ $t('rowCommentContext.delete') }} </span>
           </a>
         </li>
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/ViewOwnershipMenuLink.vue b/premium/web-frontend/modules/baserow_premium/components/views/ViewOwnershipMenuLink.vue
index 1492e9d20..7f54c0ad2 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/ViewOwnershipMenuLink.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/ViewOwnershipMenuLink.vue
@@ -1,8 +1,13 @@
 <template>
-  <a @click="changeOwnershipType(view.ownership_type)">
-    <i class="context__menu-icon iconoir-right-round-arrow"></i>
-    {{ changeOwnershipTypeText }}
-  </a>
+  <li class="context__menu-item">
+    <a
+      class="context__menu-item-link"
+      @click="changeOwnershipType(view.ownership_type)"
+    >
+      <i class="context__menu-item-icon iconoir-right-round-arrow"></i>
+      {{ changeOwnershipTypeText }}
+    </a>
+  </li>
 </template>
 
 <script>
diff --git a/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStackContext.vue b/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStackContext.vue
index 4a892d858..da00bbd80 100644
--- a/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStackContext.vue
+++ b/premium/web-frontend/modules/baserow_premium/components/views/kanban/KanbanViewStackContext.vue
@@ -9,9 +9,13 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
-        <a @click=";[$emit('create-row'), hide()]">
-          <i class="context__menu-icon iconoir-plus"></i>
+        <a
+          class="context__menu-item-link"
+          @click=";[$emit('create-row'), hide()]"
+        >
+          <i class="context__menu-item-icon iconoir-plus"></i>
           {{ $t('kanbanViewStackContext.createCard') }}
         </a>
       </li>
@@ -24,12 +28,14 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
         <a
           ref="updateContextLink"
+          class="context__menu-item-link"
           @click="$refs.updateContext.toggle($refs.updateContextLink)"
         >
-          <i class="context__menu-icon iconoir-edit-pencil"></i>
+          <i class="context__menu-item-icon iconoir-edit-pencil"></i>
           {{ $t('kanbanViewStackContext.editStack') }}
         </a>
         <KanbanViewUpdateStackContext
@@ -49,9 +55,13 @@
             database.workspace.id
           )
         "
+        class="context__menu-item context__menu-item--with-separator"
       >
-        <a @click="$refs.deleteModal.show()">
-          <i class="context__menu-icon iconoir-bin"></i>
+        <a
+          class="context__menu-item-link context__menu-item-link--delete"
+          @click="$refs.deleteModal.show()"
+        >
+          <i class="context__menu-item-icon iconoir-bin"></i>
           {{ $t('kanbanViewStackContext.deleteStack') }}
         </a>
       </li>
diff --git a/web-frontend/modules/builder/components/elements/ElementsListItem.vue b/web-frontend/modules/builder/components/elements/ElementsListItem.vue
index 53815009d..db988ad32 100644
--- a/web-frontend/modules/builder/components/elements/ElementsListItem.vue
+++ b/web-frontend/modules/builder/components/elements/ElementsListItem.vue
@@ -2,7 +2,7 @@
   <a class="select__item-link" @click="$emit('click')">
     <span class="select__item-name">
       <i :class="`${elementType.iconClass} select__item-icon`"></i>
-      {{ elementType.name }}
+      <span class="select__item-name-text">{{ elementType.name }}</span>
     </span>
   </a>
 </template>
diff --git a/web-frontend/modules/builder/components/page/settings/PageSettingsPathParamsFormElement.vue b/web-frontend/modules/builder/components/page/settings/PageSettingsPathParamsFormElement.vue
index 8989211f3..9fddb4154 100644
--- a/web-frontend/modules/builder/components/page/settings/PageSettingsPathParamsFormElement.vue
+++ b/web-frontend/modules/builder/components/page/settings/PageSettingsPathParamsFormElement.vue
@@ -20,6 +20,7 @@
       <div class="page-settings-path-params__dropdown">
         <Dropdown
           :value="pathParam.type"
+          small
           @input="$emit('update', pathParam.name, $event)"
         >
           <DropdownItem
diff --git a/web-frontend/modules/builder/components/sidebar/SidebarComponentBuilder.vue b/web-frontend/modules/builder/components/sidebar/SidebarComponentBuilder.vue
index 9c3f1f006..04a63a7af 100644
--- a/web-frontend/modules/builder/components/sidebar/SidebarComponentBuilder.vue
+++ b/web-frontend/modules/builder/components/sidebar/SidebarComponentBuilder.vue
@@ -15,9 +15,10 @@
               application.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="settingsClicked">
-            <i class="context__menu-icon iconoir-settings"></i>
+          <a class="context__menu-item-link" @click="settingsClicked">
+            <i class="context__menu-item-icon iconoir-settings"></i>
             {{ $t('sidebarComponentBuilder.settings') }}
           </a>
         </li>
diff --git a/web-frontend/modules/builder/components/sidebar/SidebarItemBuilder.vue b/web-frontend/modules/builder/components/sidebar/SidebarItemBuilder.vue
index c0c41ca77..0fe6b0309 100644
--- a/web-frontend/modules/builder/components/sidebar/SidebarItemBuilder.vue
+++ b/web-frontend/modules/builder/components/sidebar/SidebarItemBuilder.vue
@@ -35,9 +35,10 @@
           v-if="
             $hasPermission('builder.page.update', page, builder.workspace.id)
           "
+          class="context__menu-item"
         >
-          <a @click="enableRename()">
-            <i class="context__menu-icon iconoir-edit-pencil"></i>
+          <a class="context__menu-item-link" @click="enableRename()">
+            <i class="context__menu-item-icon iconoir-edit-pencil"></i>
             {{ $t('action.rename') }}
           </a>
         </li>
@@ -45,15 +46,17 @@
           v-if="
             $hasPermission('builder.page.duplicate', page, builder.workspace.id)
           "
+          class="context__menu-item"
         >
           <a
             :class="{
-              'context__menu-item--loading': duplicateLoading,
+              'context__menu-item-link--loading': duplicateLoading,
               disabled: deleteLoading || duplicateLoading,
             }"
+            class="context__menu-item-link"
             @click="duplicatePage()"
           >
-            <i class="context__menu-icon iconoir-copy"></i>
+            <i class="context__menu-item-icon iconoir-copy"></i>
             {{ $t('action.duplicate') }}
           </a>
         </li>
@@ -61,12 +64,14 @@
           v-if="
             $hasPermission('builder.page.delete', page, builder.workspace.id)
           "
+          class="context__menu-item context__menu-item--with-separator"
         >
           <a
-            :class="{ 'context__menu-item--loading': deleteLoading }"
+            :class="{ 'context__menu-item-link--loading': deleteLoading }"
+            class="context__menu-item-link context__menu-link--delete"
             @click="deletePage()"
           >
-            <i class="context__menu-icon iconoir-bin"></i>
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('action.delete') }}
           </a>
         </li>
diff --git a/web-frontend/modules/core/assets/scss/components/button.scss b/web-frontend/modules/core/assets/scss/components/button.scss
index 1c81f6f81..9ce683108 100644
--- a/web-frontend/modules/core/assets/scss/components/button.scss
+++ b/web-frontend/modules/core/assets/scss/components/button.scss
@@ -277,6 +277,8 @@
   @extend %ellipsis;
 
   display: block;
+  width: 100%;
+  text-align: center;
 }
 
 .button--full-width {
diff --git a/web-frontend/modules/core/assets/scss/components/context.scss b/web-frontend/modules/core/assets/scss/components/context.scss
index 1161a10de..058aa9b5c 100644
--- a/web-frontend/modules/core/assets/scss/components/context.scss
+++ b/web-frontend/modules/core/assets/scss/components/context.scss
@@ -3,7 +3,7 @@
   z-index: $z-index-context;
   white-space: nowrap;
   background-color: $white;
-  border: 1px solid $color-neutral-200;
+  border: 1px solid $palette-neutral-400;
 
   @include add-elevation($elevation-medium);
   @include rounded($rounded-md);
@@ -47,90 +47,113 @@
 }
 
 .context__menu-title {
-  color: $color-neutral-600;
+  color: $palette-neutral-900;
   padding: 12px 8px 2px 8px;
   line-height: 13px;
   margin-bottom: 10px;
+  font-weight: 500;
+}
+
+.context__menu-item-icon {
+  position: relative;
+  color: $palette-neutral-800;
+  text-align: left;
+  font-size: 16px;
+
+  .context__menu-item-link--loading & {
+    visibility: hidden;
+  }
+}
+
+.context__menu-item-description {
+  font-size: 12px;
+  color: $palette-neutral-900;
+  white-space: normal;
+  line-height: 18px;
+  font-weight: 400;
+}
+
+.context__menu-item-link {
+  position: relative;
+  color: $palette-neutral-1300;
+  padding: 8px 10px;
+  user-select: none;
+
+  @include rounded($rounded);
+  @include flex-align-items(6px);
+
+  &.disabled {
+    cursor: not-allowed;
+    box-shadow: none;
+    color: $palette-neutral-700;
+
+    .context__menu-item-description {
+      color: $palette-neutral-700;
+    }
+  }
+
+  &:hover {
+    background-color: rgba($palette-neutral-1300, 0.04);
+    text-decoration: none;
+
+    &.disabled {
+      background: transparent;
+    }
+
+    .context__menu-item-icon {
+      color: $palette-neutral-1300;
+    }
+
+    &.context__menu-item-link--delete {
+      background: $palette-red-50;
+      color: $palette-red-800;
+
+      .context__menu-item-icon {
+        color: $palette-red-800;
+      }
+    }
+  }
+
+  &:active:not(.disabled) {
+    color: $palette-neutral-900;
+    background: #07081014;
+
+    .context__menu-item-icon {
+      color: $palette-neutral-600;
+    }
+
+    &.context__menu-item-link--delete {
+      background: $palette-red-100;
+      color: $palette-red-500;
+
+      .context__menu-item-icon {
+        color: $palette-red-500;
+      }
+    }
+  }
 }
 
 .context__menu {
   list-style: none;
   padding: 0;
-  margin: 10px 0;
+  margin: 4px 0;
 
-  li {
-    margin-bottom: 4px;
-    padding: 0 8px;
-  }
+  &.context__menu--can-be-active {
+    .context__menu-item-link {
+      padding-right: 32px;
+      display: flex;
 
-  a {
-    position: relative;
-    color: $color-neutral-900;
-    padding: 7px 8px;
-    user-select: none;
-    font-size: 14px;
+      &.context__menu-item-link--loading {
+        &::before {
+          left: auto;
+          right: 8px;
+        }
 
-    @include rounded($rounded);
-    @include flex-align-items(6px);
-
-    &.context__menu-item-with-desc {
-      flex-direction: column;
-      align-items: start;
-    }
-
-    &.disabled {
-      cursor: not-allowed;
-      opacity: 0.65;
-      box-shadow: none;
-    }
-
-    &:hover {
-      background-color: $color-neutral-100;
-      text-decoration: none;
-    }
-
-    &.context__menu-item--loading {
-      background-color: transparent;
-      cursor: initial;
-
-      &::before {
-        content: '';
-        z-index: 1;
-
-        @include loading(14px);
-        @include absolute(8px, auto, auto, 8px);
+        &.active::after {
+          display: none;
+        }
       }
     }
-
-    &.context__menu-item--delete {
-      color: $color-error-600;
-    }
-  }
-
-  &.context__menu--can-be-active a {
-    padding-right: 32px;
-    display: flex;
-
-    &.context__menu-item--loading {
-      &::before {
-        left: auto;
-        right: 8px;
-      }
-
-      &.active::after {
-        display: none;
-      }
-    }
-  }
-}
-
-.context__menu-icon {
-  position: relative;
-  color: $color-neutral-600;
-  text-align: left;
-
-  .context__menu-item--loading & {
-    color: $white;
   }
 }
 
@@ -138,17 +161,6 @@
   @include flex-align-items(4px);
 }
 
-.context__menu-item-description {
-  font-size: 11px;
-  color: $color-neutral-600;
-  white-space: normal;
-  line-height: 15px;
-
-  .context__menu--can-be-active & {
-    margin-right: -22px;
-  }
-}
-
 .context__form {
   min-width: 260px;
   padding: 16px;
@@ -165,9 +177,42 @@
 }
 
 .context__menu-active-icon {
-  color: $palette-green-600;
+  color: $palette-neutral-1200;
   position: absolute;
   top: 7px;
   right: 8px;
   font-size: 16px;
 }
+
+.context__menu-item {
+  margin-bottom: 4px;
+  padding: 0 4px;
+  font-weight: 500;
+}
+
+.context__menu-item--with-separator {
+  border-top: 1px solid $palette-neutral-200;
+  padding-top: 4px;
+}
+
+.context__menu-item-link--with-desc {
+  flex-direction: column;
+  align-items: start;
+
+  &.active {
+    background: rgba($palette-neutral-1300, 0.04);
+  }
+}
+
+.context__menu-item-link--loading {
+  background-color: transparent;
+  cursor: initial;
+
+  &::before {
+    content: '';
+    z-index: 1;
+
+    @include loading(14px);
+    @include absolute(8px, auto, auto, 10px);
+  }
+}
diff --git a/web-frontend/modules/core/assets/scss/components/dropdown.scss b/web-frontend/modules/core/assets/scss/components/dropdown.scss
index 7b1b8401b..80e6ef2c0 100644
--- a/web-frontend/modules/core/assets/scss/components/dropdown.scss
+++ b/web-frontend/modules/core/assets/scss/components/dropdown.scss
@@ -1,27 +1,30 @@
 .dropdown {
   position: relative;
   background-color: $white;
+  @include add-elevation($elevation-low);
+  @include rounded($rounded);
 }
 
 .dropdown__selected {
   position: relative;
   display: block;
   width: 100%;
-  border: 1px solid $color-neutral-400;
-  padding: 0 12px;
-  color: $color-neutral-900;
+  border: 1px solid $palette-neutral-400;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  color: $palette-neutral-1200;
 
-  @include fixed-height(36px, 13px);
+  @include fixed-height(44px, 13px);
   @include rounded($rounded);
   @include flex-align-items(4px);
 
   &:hover {
     text-decoration: none;
-    border-color: $color-neutral-600;
+    border-color: $palette-neutral-500;
   }
 
   .dropdown--error & {
-    border-color: $color-error-500;
+    border-color: $palette-red-600;
   }
 
   .dropdown--tiny & {
@@ -30,13 +33,15 @@
   }
 
   .dropdown--disabled & {
-    background-color: $color-neutral-50;
-    color: $color-neutral-500;
+    background-color: $palette-neutral-100;
+    color: $palette-neutral-900;
     cursor: not-allowed;
+    border-color: $palette-neutral-600;
+  }
 
-    &:hover {
-      border-color: $color-neutral-400;
-    }
+  .dropdown.dropdown--small & {
+    padding: 8px 12px;
+    @include fixed-height(36px, 13px);
   }
 }
 
@@ -60,17 +65,17 @@
 
 .dropdown__toggle-icon {
   margin-left: auto;
+  color: $palette-neutral-600;
 }
 
 .dropdown__items {
-  border: 1px solid $color-primary-500;
+  border: 1px solid $palette-neutral-400;
   background-color: $white;
-  box-shadow: 0 2px 6px 0 rgba($black, 0.16);
   z-index: 1;
-  max-width: 500px;
 
   @include absolute(0, 0, auto, 0);
   @include rounded($rounded);
+  @include add-elevation($elevation-medium);
 
   &.dropdown__items--fixed {
     flex-direction: column;
@@ -82,22 +87,6 @@
     }
   }
 
-  .select__item:hover {
-    background-color: transparent;
-  }
-
-  .select__item.hover {
-    background-color: $color-neutral-100;
-  }
-
-  .select__item.active {
-    background-color: $color-primary-100;
-  }
-
-  .select__item.active:hover::after {
-    display: block;
-  }
-
   .dropdown--floating & {
     right: auto;
   }
@@ -107,3 +96,11 @@
     right: 0;
   }
 }
+
+.dropdown__selected-placeholder {
+  color: $palette-neutral-700;
+}
+
+.dropdown__items--max-width {
+  max-width: 500px;
+}
diff --git a/web-frontend/modules/core/assets/scss/components/expand_on_overflow_list.scss b/web-frontend/modules/core/assets/scss/components/expand_on_overflow_list.scss
index 30440ea63..fbd8f3472 100644
--- a/web-frontend/modules/core/assets/scss/components/expand_on_overflow_list.scss
+++ b/web-frontend/modules/core/assets/scss/components/expand_on_overflow_list.scss
@@ -70,4 +70,5 @@
   background-color: $color-neutral-100;
   box-sizing: border-box;
   width: fit-content;
+  padding: 0 10px;
 }
diff --git a/web-frontend/modules/core/assets/scss/components/filters.scss b/web-frontend/modules/core/assets/scss/components/filters.scss
index 44ecb2fb7..f3e3f8896 100644
--- a/web-frontend/modules/core/assets/scss/components/filters.scss
+++ b/web-frontend/modules/core/assets/scss/components/filters.scss
@@ -86,10 +86,15 @@
   color: $color-neutral-500;
   font-size: 16px;
   border-radius: 6px;
-  border: 1px solid #b5b5b7;
+  border: 1px solid $palette-neutral-400;
   background: #fff;
   box-shadow: 0 1px 2px 0 rgba(7, 8, 16, 0.1);
-  padding: 8px 6px 3px;
+  width: 36px;
+  height: 36px;
+  justify-content: center;
+
+  @include add-elevation($elevation-low);
+  @include flex-align-items();
 
   &:hover {
     text-decoration: none;
diff --git a/web-frontend/modules/core/assets/scss/components/group_bys.scss b/web-frontend/modules/core/assets/scss/components/group_bys.scss
index 911c53c7e..5ae2ac9a7 100644
--- a/web-frontend/modules/core/assets/scss/components/group_bys.scss
+++ b/web-frontend/modules/core/assets/scss/components/group_bys.scss
@@ -142,7 +142,3 @@
 .group-bys__add-icon {
   font-size: 20px;
 }
-
-.group-bys__add-context .context__menu-icon {
-  color: $color-neutral-900;
-}
diff --git a/web-frontend/modules/core/assets/scss/components/select.scss b/web-frontend/modules/core/assets/scss/components/select.scss
index e6ea392f2..9f4849077 100644
--- a/web-frontend/modules/core/assets/scss/components/select.scss
+++ b/web-frontend/modules/core/assets/scss/components/select.scss
@@ -6,29 +6,36 @@
   flex-direction: column;
 }
 
+.select__search-icon {
+  color: $palette-neutral-600;
+  padding: 0 10px;
+  font-size: 16px;
+
+  .select__search:focus-within & {
+    color: $palette-blue-500;
+  }
+}
+
 .select__search {
   flex: 0 0;
   position: relative;
-  border-bottom: 1px solid $color-neutral-200;
+  border-bottom: 1px solid $palette-neutral-200;
 
   @include flex-align-items();
 }
 
-.select__search-icon {
-  color: $color-neutral-300;
-  padding: 0 12px;
-  font-size: 18px;
-}
-
 .select__search-input {
   display: block;
   width: 100%;
   border: none;
   padding: 0 12px 0 0;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
 
-  @include fixed-height(36px, 14px);
+  @include rounded($rounded);
+  @include fixed-height(36px, 12px);
+
+  &::placeholder {
+    color: $palette-neutral-700;
+  }
 }
 
 .select__items {
@@ -46,7 +53,7 @@
   &::after {
     content: '';
     display: block;
-    height: 10px;
+    height: 4px;
     width: 100%;
   }
 
@@ -66,7 +73,7 @@
   padding: 20px 10px;
   white-space: normal;
   text-align: center;
-  color: $color-neutral-500;
+  color: $palette-neutral-700;
 }
 
 .select__items-loading {
@@ -93,41 +100,38 @@
   }
 }
 
-%select__item-size {
-  @include fixed-height(32px, 14px);
-}
-
 .select__item-active-icon {
   text-align: center;
-  color: $palette-green-600;
+  color: $palette-neutral-1200;
   position: absolute;
   top: 8px;
   right: 5px;
   font-size: 17px;
   display: none;
+
+  .select__item.disabled &,
+  .select__item-link:active & {
+    color: $palette-neutral-400;
+  }
 }
 
 .select__item {
   position: relative;
-  margin: 0 8px 4px 8px;
-  padding: 0 32px 0 10px;
+  margin: 0 4px 3px 4px;
   user-select: none;
   @include rounded($rounded);
 
-  &.select__item--has-notification {
-    padding-right: 48px;
-  }
-
   &:last-child {
     margin-bottom: 0;
   }
 
-  &:hover {
-    background-color: $color-neutral-100;
+  &:hover,
+  &.hover {
+    background-color: $palette-neutral-100;
   }
 
   &--selected {
-    background-color: $color-primary-100;
+    background-color: $palette-neutral-100;
   }
 
   &--indented {
@@ -142,7 +146,7 @@
   }
 
   &.active {
-    background-color: $color-primary-100;
+    background-color: rgba($palette-neutral-1300, 0.04);
 
     .select__item-active-icon {
       display: block;
@@ -157,6 +161,7 @@
 
   &.disabled {
     background-color: transparent;
+    cursor: not-allowed;
 
     &:hover {
       background-color: transparent;
@@ -166,14 +171,19 @@
 
 .select__item-link {
   display: block;
-  color: $color-neutral-900;
+  color: $palette-neutral-1300;
+  padding: 8px 32px 8px 10px;
+
+  .select__item--has-notification & {
+    padding-right: 48px;
+  }
 
   &:hover {
     text-decoration: none;
   }
 
   .select__item.disabled & {
-    color: $color-neutral-400;
+    color: $palette-neutral-700;
 
     &:hover {
       cursor: inherit;
@@ -184,12 +194,13 @@
 .select__item-name {
   display: flex;
   align-items: center;
+  font-weight: 500;
+  line-height: 15px;
 
   @extend %ellipsis;
-  @extend %select__item-size;
 
-  span:first-child {
-    @extend %ellipsis;
+  .select__item-link:active & {
+    color: $palette-neutral-900;
   }
 }
 
@@ -200,6 +211,11 @@
 .select__item-icon {
   margin-right: 6px;
   font-size: 16px;
+
+  .select__item.disabled &,
+  .select__item-link:active & {
+    color: $palette-neutral-900;
+  }
 }
 
 .select__item-image {
@@ -209,28 +225,25 @@
 }
 
 .select__item-description {
-  font-size: 11px;
-  margin-right: -32px;
-  line-height: 140%;
-  color: $color-neutral-600;
-  padding-bottom: 6px;
-  padding-right: 10px;
+  font-size: 12px;
+  color: $palette-neutral-900;
   white-space: normal;
+  line-height: 18px;
+  font-weight: 400;
+  padding-top: 6px;
 }
 
 .select__item-options {
-  @extend %select__item-size;
-
   display: none;
   text-align: center;
   width: 32px;
-  color: $color-neutral-600;
+  color: $palette-neutral-800;
   font-size: 17px;
 
-  @include absolute(0, 0, auto, auto);
+  @include absolute(5px, 0, auto, auto);
 
   &:hover {
-    color: $color-neutral-800;
+    color: $palette-neutral-1200;
   }
 
   :not(.select__item--loading):not(.select__item--no-options):hover > & {
@@ -245,41 +258,43 @@
 
 .select__footer {
   flex: 0 0;
-  border-top: 1px solid $color-neutral-200;
+  border-top: 1px solid $palette-neutral-200;
+  padding: 4px 4px 0 4px;
 }
 
 .select__footer-button {
   position: relative;
   display: block;
-  padding: 0 12px;
-  color: $color-neutral-600;
+  padding: 0 10px;
+  color: $palette-neutral-1300;
   user-select: none;
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
+  margin-bottom: 4px;
 
+  @include rounded($rounded);
   @include fixed-height(36px, 14px);
   @include flex-align-items(6px);
 
   &:hover {
-    background-color: $color-neutral-100;
+    background-color: rgba($palette-neutral-1300, 0.04);
     text-decoration: none;
   }
 
   &.button--loading {
-    background-color: $color-neutral-200;
+    background-color: $palette-neutral-400;
   }
 }
 
 .select__footer-create {
   display: flex;
   flex-wrap: wrap;
-  padding: 8px 12px 4px 12px;
 }
 
 .select__footer-create-link {
   position: relative;
-  width: calc(50% - 10px);
-  color: $color-neutral-900;
+  width: 50%;
+  color: $palette-neutral-1300;
   padding: 0 10px;
   margin-bottom: 4px;
   min-width: 0;
@@ -295,28 +310,23 @@
     padding-left: 6px;
   }
 
-  &:nth-child(2n + 1) {
-    margin-right: 20px;
-  }
-
   &:hover {
     text-decoration: none;
   }
 
   &:not(.select__footer-create-link--disabled):hover {
     text-decoration: none;
-    background-color: $color-neutral-100;
+    background-color: rgba($palette-neutral-1300, 0.04);
   }
 }
 
 .select__footer-create-link-icon {
-  color: $color-neutral-600;
+  color: $palette-neutral-800;
   font-size: 14px;
   margin-left: auto;
-}
 
-.select__footer-create-icon {
-  color: $color-neutral-600;
-  margin-right: 4px;
-  font-size: 14px;
+  .select__footer-create-link:not(.select__footer-create-link--disabled):hover
+    & {
+    color: $palette-neutral-1300;
+  }
 }
diff --git a/web-frontend/modules/core/assets/scss/components/sortings.scss b/web-frontend/modules/core/assets/scss/components/sortings.scss
index b895f164e..064799d15 100644
--- a/web-frontend/modules/core/assets/scss/components/sortings.scss
+++ b/web-frontend/modules/core/assets/scss/components/sortings.scss
@@ -142,7 +142,3 @@
 .sortings__add-icon {
   font-size: 20px;
 }
-
-.sortings__add-context .context__menu-icon {
-  color: $color-neutral-900;
-}
diff --git a/web-frontend/modules/core/components/ColorPickerContext.vue b/web-frontend/modules/core/components/ColorPickerContext.vue
index 89781abca..960cd6fc5 100644
--- a/web-frontend/modules/core/components/ColorPickerContext.vue
+++ b/web-frontend/modules/core/components/ColorPickerContext.vue
@@ -9,6 +9,7 @@
         v-model="type"
         class="dropdown--floating color-picker-context__color-type"
         :show-search="false"
+        small
       >
         <DropdownItem name="Hex" :value="COLOR_NOTATIONS.HEX"></DropdownItem>
         <DropdownItem name="RGB" :value="COLOR_NOTATIONS.RGB"></DropdownItem>
@@ -66,7 +67,7 @@
       v-if="Object.keys(variables).length > 0"
       class="color-picker-context__variables"
     >
-      <Dropdown :value="isVariable ? value : ''" @input="setVariable">
+      <Dropdown :value="isVariable ? value : ''" small @input="setVariable">
         <DropdownItem name="Custom" value=""></DropdownItem>
         <DropdownItem
           v-for="variable in variables"
diff --git a/web-frontend/modules/core/components/Dropdown.vue b/web-frontend/modules/core/components/Dropdown.vue
index c70d27837..e245aa0ad 100644
--- a/web-frontend/modules/core/components/Dropdown.vue
+++ b/web-frontend/modules/core/components/Dropdown.vue
@@ -4,6 +4,7 @@
     :class="{
       'dropdown--floating': !showInput,
       'dropdown--disabled': disabled,
+      'dropdown--small': small,
     }"
     :tabindex="realTabindex"
     @focusin="show()"
@@ -27,7 +28,9 @@
       </template>
       <template v-else>
         <slot name="defaultValue">
-          {{ placeholder ? placeholder : $t('action.makeChoice') }}
+          <span class="dropdown__selected-placeholder">{{
+            placeholder ? placeholder : $t('action.makeChoice')
+          }}</span>
         </slot>
       </template>
       <i class="dropdown__toggle-icon iconoir-nav-arrow-down"></i>
@@ -38,6 +41,7 @@
       :class="{
         hidden: !open,
         'dropdown__items--fixed': fixedItemsImmutable,
+        'dropdown__items--max-width': maxWidth,
       }"
     >
       <div v-if="showSearch" class="select__search">
diff --git a/web-frontend/modules/core/components/DropdownItem.vue b/web-frontend/modules/core/components/DropdownItem.vue
index 404979a33..738b6eae6 100644
--- a/web-frontend/modules/core/components/DropdownItem.vue
+++ b/web-frontend/modules/core/components/DropdownItem.vue
@@ -29,7 +29,7 @@
         {{ description }}
       </div>
     </a>
-    <i class="select__item-active-icon iconoir-check-circle"></i>
+    <i class="select__item-active-icon iconoir-check"></i>
   </li>
 </template>
 
diff --git a/web-frontend/modules/core/components/application/CreateApplicationContext.vue b/web-frontend/modules/core/components/application/CreateApplicationContext.vue
index 3de014d3c..604af2521 100644
--- a/web-frontend/modules/core/components/application/CreateApplicationContext.vue
+++ b/web-frontend/modules/core/components/application/CreateApplicationContext.vue
@@ -9,15 +9,23 @@
       class="loading margin-left-2 margin-top-2 margin-right-2 margin-bottom-2"
     ></div>
     <ul v-else class="context__menu">
-      <li v-for="(applicationType, type) in applications" :key="type">
+      <li
+        v-for="(applicationType, type) in applications"
+        :key="type"
+        class="context__menu-item"
+      >
         <a
           :ref="'createApplicationModalToggle' + type"
+          class="context__menu-item-link"
           :class="{
             disabled: !canCreateCreateApplication,
           }"
           @click="toggleCreateApplicationModal(type)"
         >
-          <i class="context__menu-icon" :class="applicationType.iconClass"></i>
+          <i
+            class="context__menu-item-icon"
+            :class="applicationType.iconClass"
+          ></i>
           {{ applicationType.getName() }}
         </a>
         <CreateApplicationModal
@@ -27,14 +35,15 @@
           @created="hide"
         ></CreateApplicationModal>
       </li>
-      <li>
+      <li class="context__menu-item">
         <a
+          class="context__menu-item-link"
           :class="{
             disabled: !canCreateCreateApplication,
           }"
           @click="openTemplateModal()"
         >
-          <i class="context__menu-icon iconoir-page"></i>
+          <i class="context__menu-item-icon iconoir-page"></i>
           {{ $t('createApplicationContext.fromTemplate') }}
         </a>
         <TemplateModal
diff --git a/web-frontend/modules/core/components/settings/members/EditInviteContext.vue b/web-frontend/modules/core/components/settings/members/EditInviteContext.vue
index cdc31c270..0502bbbd0 100644
--- a/web-frontend/modules/core/components/settings/members/EditInviteContext.vue
+++ b/web-frontend/modules/core/components/settings/members/EditInviteContext.vue
@@ -2,21 +2,24 @@
   <Context :overflow-scroll="true" :max-height-if-outside-viewport="true">
     <template v-if="Object.keys(invitation).length > 0">
       <ul class="context__menu">
-        <li>
-          <a @click.prevent="copyEmail(invitation)">
+        <li class="context__menu-item">
+          <a
+            class="context__menu-item-link"
+            @click.prevent="copyEmail(invitation)"
+          >
             <Copied ref="emailCopied"></Copied>
             {{ $t('membersSettings.invitesTable.actions.copyEmail') }}
           </a>
         </li>
-        <li>
+        <li class="context__menu-item context__menu-item--with-separator">
           <a
             :class="{
-              'context__menu-item--loading': removeLoading,
+              'context__menu-item-link--loading': removeLoading,
             }"
-            class="color-error"
+            class="context__menu-item-link context__menu-item-link--delete"
             @click.prevent="remove(invitation)"
           >
-            <i class="context__menu-icon iconoir-bin"></i>
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('membersSettings.invitesTable.actions.remove') }}
           </a>
         </li>
diff --git a/web-frontend/modules/core/components/settings/members/EditMemberContext.vue b/web-frontend/modules/core/components/settings/members/EditMemberContext.vue
index f3b5799f4..bf7626f33 100644
--- a/web-frontend/modules/core/components/settings/members/EditMemberContext.vue
+++ b/web-frontend/modules/core/components/settings/members/EditMemberContext.vue
@@ -2,8 +2,8 @@
   <Context :overflow-scroll="true" :max-height-if-outside-viewport="true">
     <template v-if="Object.keys(member).length > 0">
       <ul class="context__menu">
-        <li>
-          <a @click.prevent="copyEmail(member)">
+        <li class="context__menu-item">
+          <a class="context__menu-item-link" @click.prevent="copyEmail(member)">
             <Copied ref="emailCopied"></Copied>
             {{ $t('membersSettings.membersTable.actions.copyEmail') }}
           </a>
@@ -13,9 +13,13 @@
             member.user_id !== userId &&
             $hasPermission('workspace_user.delete', member, workspace.id)
           "
+          class="context__menu-item context__menu-item--with-separator"
         >
-          <a class="color-error" @click.prevent="showRemoveModal">
-            <i class="context__menu-icon iconoir-bin"></i>
+          <a
+            class="context__menu-item-link context__menu-item-link--delete"
+            @click.prevent="showRemoveModal"
+          >
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('membersSettings.membersTable.actions.remove') }}
           </a>
         </li>
diff --git a/web-frontend/modules/core/components/settings/members/EditRoleContext.vue b/web-frontend/modules/core/components/settings/members/EditRoleContext.vue
index 2dab75477..af91a91e8 100644
--- a/web-frontend/modules/core/components/settings/members/EditRoleContext.vue
+++ b/web-frontend/modules/core/components/settings/members/EditRoleContext.vue
@@ -21,9 +21,9 @@
         </div>
       </div>
       <ul class="context__menu context__menu--can-be-active">
-        <li v-for="role in roles" :key="role.uid">
+        <li v-for="role in roles" :key="role.uid" class="context__menu-item">
           <a
-            class="context__menu-item-with-desc"
+            class="context__menu-item-link context__menu-item-link--with-desc"
             :class="{ active: subject[roleValueColumn] === role.uid }"
             @click="roleUpdate(role.uid, subject)"
           >
@@ -33,22 +33,21 @@
                 >{{ $t('common.free') }}
               </Badge>
             </span>
-            <span
-              v-if="role.description"
-              class="context__menu-item-description"
-            >
+            <div v-if="role.description" class="context__menu-item-description">
               {{ role.description }}
-            </span>
+            </div>
             <i
               v-if="subject[roleValueColumn] === role.uid"
-              class="context__menu-active-icon iconoir-check-circle"
+              class="context__menu-active-icon iconoir-check"
             ></i>
           </a>
         </li>
-        <li>
+        <li
+          v-if="allowRemovingRole"
+          class="context__menu-item context__menu-item--with-separator"
+        >
           <a
-            v-if="allowRemovingRole"
-            class="context__menu-item--delete"
+            class="context__menu-item-link context__menu-item-link--delete"
             @click="$emit('delete')"
             >{{ $t('action.remove') }}</a
           >
diff --git a/web-frontend/modules/core/components/sidebar/Sidebar.vue b/web-frontend/modules/core/components/sidebar/Sidebar.vue
index ac6fd1baf..6a3aed6ab 100644
--- a/web-frontend/modules/core/components/sidebar/Sidebar.vue
+++ b/web-frontend/modules/core/components/sidebar/Sidebar.vue
@@ -37,19 +37,23 @@
       >
         <div class="context__menu-title">{{ name }}</div>
         <ul class="context__menu">
-          <li>
-            <a @click=";[$refs.settingsModal.show(), $refs.userContext.hide()]">
-              <i class="context__menu-icon iconoir-settings"></i>
+          <li class="context__menu-item">
+            <a
+              class="context__menu-item-link"
+              @click=";[$refs.settingsModal.show(), $refs.userContext.hide()]"
+            >
+              <i class="context__menu-item-icon iconoir-settings"></i>
               {{ $t('sidebar.settings') }}
             </a>
             <SettingsModal ref="settingsModal"></SettingsModal>
           </li>
-          <li>
+          <li class="context__menu-item">
             <a
-              :class="{ 'context__menu-item--loading': logoffLoading }"
+              class="context__menu-item-link"
+              :class="{ 'context__menu-item-link--loading': logoffLoading }"
               @click="logoff()"
             >
-              <i class="context__menu-icon iconoir-log-out"></i>
+              <i class="context__menu-item-icon iconoir-log-out"></i>
               {{ $t('sidebar.logoff') }}
             </a>
           </li>
diff --git a/web-frontend/modules/core/components/sidebar/SidebarApplication.vue b/web-frontend/modules/core/components/sidebar/SidebarApplication.vue
index e447d2bcd..b63f52db2 100644
--- a/web-frontend/modules/core/components/sidebar/SidebarApplication.vue
+++ b/web-frontend/modules/core/components/sidebar/SidebarApplication.vue
@@ -46,6 +46,7 @@
           <li
             v-for="(component, index) in additionalContextComponents"
             :key="index"
+            class="context__menu-item"
             @click="$refs.context.hide()"
           >
             <component :is="component" :application="application"></component>
@@ -59,9 +60,10 @@
                 application.workspace.id
               )
             "
+            class="context__menu-item"
           >
-            <a @click="enableRename()">
-              <i class="context__menu-icon iconoir-edit-pencil"></i>
+            <a class="context__menu-item-link" @click="enableRename()">
+              <i class="context__menu-item-icon iconoir-edit-pencil"></i>
               {{
                 $t('sidebarApplication.rename', {
                   type: application._.type.name.toLowerCase(),
@@ -77,6 +79,7 @@
                 application.workspace.id
               )
             "
+            class="context__menu-item"
           >
             <SidebarDuplicateApplicationContextItem
               :application="application"
@@ -92,9 +95,10 @@
                 application.workspace.id
               )
             "
+            class="context__menu-item"
           >
-            <a @click="openSnapshots">
-              <i class="context__menu-icon baserow-icon-history"></i>
+            <a class="context__menu-item-link" @click="openSnapshots">
+              <i class="context__menu-item-icon baserow-icon-history"></i>
               {{ $t('sidebarApplication.snapshots') }}
             </a>
           </li>
@@ -110,9 +114,13 @@
                 application.workspace.id
               )
             "
+            class="context__menu-item"
           >
-            <a @click="showApplicationTrashModal">
-              <i class="context__menu-icon iconoir-refresh-double"></i>
+            <a
+              class="context__menu-item-link"
+              @click="showApplicationTrashModal"
+            >
+              <i class="context__menu-item-icon iconoir-refresh-double"></i>
               {{ $t('sidebarApplication.viewTrash') }}
             </a>
           </li>
@@ -124,12 +132,14 @@
                 application.workspace.id
               )
             "
+            class="context__menu-item context__menu-item--with-separator"
           >
             <a
-              :class="{ 'context__menu-item--loading': deleting }"
+              class="context__menu-item-link context__menu-item-link--delete"
+              :class="{ 'context__menu-item-link--loading': deleting }"
               @click="deleteApplication()"
             >
-              <i class="context__menu-icon iconoir-bin"></i>
+              <i class="context__menu-item-icon iconoir-bin"></i>
               {{
                 $t('sidebarApplication.delete', {
                   type: application._.type.name.toLowerCase(),
diff --git a/web-frontend/modules/core/components/sidebar/SidebarDuplicateApplicationContextItem.vue b/web-frontend/modules/core/components/sidebar/SidebarDuplicateApplicationContextItem.vue
index 92832906a..559c506ec 100644
--- a/web-frontend/modules/core/components/sidebar/SidebarDuplicateApplicationContextItem.vue
+++ b/web-frontend/modules/core/components/sidebar/SidebarDuplicateApplicationContextItem.vue
@@ -1,12 +1,13 @@
 <template>
   <a
+    class="context__menu-item-link"
     :class="{
-      'context__menu-item--loading': duplicating,
+      'context__menu-item-link--loading': duplicating,
       disabled: disabled || duplicating,
     }"
     @click="duplicateApplication()"
   >
-    <i class="context__menu-icon iconoir-copy"></i>
+    <i class="context__menu-item-icon iconoir-copy"></i>
     {{
       $t('sidebarApplication.duplicate', {
         type: application._.type.name.toLowerCase(),
diff --git a/web-frontend/modules/core/components/workspace/RemoveFromWorkspaceModal.vue b/web-frontend/modules/core/components/workspace/RemoveFromWorkspaceModal.vue
index db24f4b32..17a089a3a 100644
--- a/web-frontend/modules/core/components/workspace/RemoveFromWorkspaceModal.vue
+++ b/web-frontend/modules/core/components/workspace/RemoveFromWorkspaceModal.vue
@@ -15,14 +15,14 @@
       </p>
       <div class="actions">
         <div class="align-right">
-          <a
+          <button
             class="button button--large button--error button--overflow"
             :class="{ 'button--loading': loading }"
             :disabled="loading"
             @click.prevent="remove()"
           >
             {{ $t('removeFromWorkspaceModal.remove') }}
-          </a>
+          </button>
         </div>
       </div>
     </div>
diff --git a/web-frontend/modules/core/components/workspace/WorkspaceContext.vue b/web-frontend/modules/core/components/workspace/WorkspaceContext.vue
index 688d7d5e7..f2b1fce18 100644
--- a/web-frontend/modules/core/components/workspace/WorkspaceContext.vue
+++ b/web-frontend/modules/core/components/workspace/WorkspaceContext.vue
@@ -13,14 +13,21 @@
       class="loading margin-left-2 margin-top-2 margin-bottom-2 margin-bottom-2"
     ></div>
     <ul v-else class="context__menu">
-      <li v-if="$hasPermission('workspace.update', workspace, workspace.id)">
-        <a @click="$emit('rename')">
-          <i class="context__menu-icon iconoir-edit-pencil"></i>
+      <li
+        v-if="$hasPermission('workspace.update', workspace, workspace.id)"
+        class="context__menu-item"
+      >
+        <a class="context__menu-item-link" @click="$emit('rename')">
+          <i class="context__menu-item-icon iconoir-edit-pencil"></i>
           {{ $t('workspaceContext.renameWorkspace') }}
         </a>
       </li>
-      <li v-if="$hasPermission('invitation.read', workspace, workspace.id)">
+      <li
+        v-if="$hasPermission('invitation.read', workspace, workspace.id)"
+        class="context__menu-item"
+      >
         <a
+          class="context__menu-item-link"
           @click="
             $router.push({
               name: 'settings-members',
@@ -31,30 +38,38 @@
             hide()
           "
         >
-          <i class="context__menu-icon iconoir-community"></i>
+          <i class="context__menu-item-icon iconoir-community"></i>
           {{ $t('workspaceContext.members') }}
         </a>
       </li>
       <li
         v-if="$hasPermission('workspace.read_trash', workspace, workspace.id)"
+        class="context__menu-item"
       >
-        <a @click="showWorkspaceTrashModal">
-          <i class="context__menu-icon iconoir-refresh-double"></i>
+        <a class="context__menu-item-link" @click="showWorkspaceTrashModal">
+          <i class="context__menu-item-icon iconoir-refresh-double"></i>
           {{ $t('workspaceContext.viewTrash') }}
         </a>
       </li>
-      <li>
-        <a @click="$refs.leaveWorkspaceModal.show()">
-          <i class="context__menu-icon iconoir-log-out"></i>
+      <li class="context__menu-item">
+        <a
+          class="context__menu-item-link"
+          @click="$refs.leaveWorkspaceModal.show()"
+        >
+          <i class="context__menu-item-icon iconoir-log-out"></i>
           {{ $t('workspaceContext.leaveWorkspace') }}
         </a>
       </li>
-      <li v-if="$hasPermission('workspace.delete', workspace, workspace.id)">
+      <li
+        v-if="$hasPermission('workspace.delete', workspace, workspace.id)"
+        class="context__menu-item context__menu-item--with-separator"
+      >
         <a
-          :class="{ 'context__menu-item--loading': loading }"
+          class="context__menu-item-link context__menu-item-link--delete"
+          :class="{ 'context__menu-item-link--loading': loading }"
           @click="deleteWorkspace"
         >
-          <i class="context__menu-icon iconoir-bin"></i>
+          <i class="context__menu-item-icon iconoir-bin"></i>
           {{ $t('workspaceContext.deleteWorkspace') }}
         </a>
       </li>
diff --git a/web-frontend/modules/core/components/workspace/WorkspaceInviteForm.vue b/web-frontend/modules/core/components/workspace/WorkspaceInviteForm.vue
index 7793596ae..2584bef86 100644
--- a/web-frontend/modules/core/components/workspace/WorkspaceInviteForm.vue
+++ b/web-frontend/modules/core/components/workspace/WorkspaceInviteForm.vue
@@ -28,6 +28,7 @@
                 v-model="values.permissions"
                 class="group-invite-form__role-selector-dropdown"
                 :show-search="false"
+                small
               >
                 <DropdownItem
                   v-for="role in roles"
diff --git a/web-frontend/modules/core/components/workspace/WorkspacesContextItem.vue b/web-frontend/modules/core/components/workspace/WorkspacesContextItem.vue
index b2e1c554e..8c9d8ddfb 100644
--- a/web-frontend/modules/core/components/workspace/WorkspacesContextItem.vue
+++ b/web-frontend/modules/core/components/workspace/WorkspacesContextItem.vue
@@ -10,21 +10,23 @@
   >
     <a class="select__item-link" @click="selectWorkspace(workspace)">
       <div :title="workspace.name" class="select__item-name">
-        <Editable
-          ref="rename"
-          :value="workspace.name"
-          @change="renameWorkspace(workspace, $event)"
-        ></Editable>
+        <span class="select__item-name-text">
+          <Editable
+            ref="rename"
+            :value="workspace.name"
+            @change="renameWorkspace(workspace, $event)"
+          ></Editable>
+        </span>
         <span
           v-if="hasUnreadNotifications"
           class="sidebar__unread-notifications-icon"
         ></span>
       </div>
-      <i
-        v-if="workspace._.selected"
-        class="select__item-active-icon iconoir-check-circle"
-      ></i>
     </a>
+    <i
+      v-if="workspace._.selected"
+      class="select__item-active-icon iconoir-check"
+    ></i>
     <a
       ref="contextLink"
       class="select__item-options"
diff --git a/web-frontend/modules/core/mixins/dropdown.js b/web-frontend/modules/core/mixins/dropdown.js
index e0dc059d8..7fe6f6af1 100644
--- a/web-frontend/modules/core/mixins/dropdown.js
+++ b/web-frontend/modules/core/mixins/dropdown.js
@@ -45,6 +45,11 @@ export default {
       required: false,
       default: false,
     },
+    small: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
     tabindex: {
       type: Number,
       required: false,
@@ -61,6 +66,14 @@ export default {
       required: false,
       default: false,
     },
+    /**
+     * Apply max width to the dropdown items container.
+     */
+    maxWidth: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
diff --git a/web-frontend/modules/core/pages/styleGuide.vue b/web-frontend/modules/core/pages/styleGuide.vue
index 920af4590..bbcbd85f0 100644
--- a/web-frontend/modules/core/pages/styleGuide.vue
+++ b/web-frontend/modules/core/pages/styleGuide.vue
@@ -287,6 +287,87 @@
               </div>
             </div>
           </div>
+          <div class="control">
+            <label class="control__label">Dropdown small</label>
+            <div class="control__elements">
+              value: {{ dropdown }}
+              <br />
+              <br />
+              <div style="width: 200px">
+                <Dropdown v-model="dropdown" small>
+                  <DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
+                  <DropdownItem
+                    name="Choice 2"
+                    value="choice-2"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 3"
+                    value="choice-3"
+                    icon="iconoir-db"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 4"
+                    value="choice-4"
+                    icon="iconoir-cancel"
+                    :disabled="true"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 5"
+                    value="choice-5"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 6"
+                    value="choice-6"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                </Dropdown>
+              </div>
+            </div>
+          </div>
+          <div class="control">
+            <label class="control__label">Dropdown disabled</label>
+            <div class="control__elements">
+              <div style="width: 200px">
+                <Dropdown v-model="dropdown" disabled>
+                  <DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
+                  <DropdownItem
+                    name="Choice 2"
+                    value="choice-2"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 3"
+                    value="choice-3"
+                    icon="iconoir-db"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 4"
+                    value="choice-4"
+                    icon="iconoir-cancel"
+                    :disabled="true"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 5"
+                    value="choice-5"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 6"
+                    value="choice-6"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                </Dropdown>
+              </div>
+            </div>
+          </div>
           <div class="control">
             <label class="control__label">Dropdown</label>
             <div class="control__elements">
@@ -412,23 +493,95 @@
                   <DropdownItem
                     name="Choice 2"
                     value="choice-2"
-                    icon="pencil"
+                    icon="iconoir-edit-pencil"
                   ></DropdownItem>
                   <DropdownItem
                     name="Choice 3"
                     value="choice-3"
-                    icon="database"
+                    icon="iconoir-db"
                   ></DropdownItem>
                   <DropdownItem
                     name="Choice 4"
                     value="choice-4"
-                    icon="times"
+                    icon="iconoir-cancel"
                     :disabled="true"
                   ></DropdownItem>
                 </Dropdown>
               </div>
             </div>
           </div>
+          <div class="control">
+            <label class="control__label">Dropdown tiny</label>
+            <div class="control__elements">
+              value: {{ dropdown }}
+              <br />
+              <br />
+              <div style="width: 200px">
+                <Dropdown
+                  v-model="dropdown"
+                  :show-search="false"
+                  class="dropdown--tiny"
+                >
+                  <DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
+                  <DropdownItem
+                    name="Choice 2"
+                    value="choice-2"
+                    icon="iconoir-edit-pencil"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 3"
+                    value="choice-3"
+                    icon="iconoir-db"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 4"
+                    value="choice-4"
+                    icon="iconoir-cancel"
+                    :disabled="true"
+                  ></DropdownItem>
+                </Dropdown>
+              </div>
+            </div>
+          </div>
+          <div class="control">
+            <label class="control__label">Dropdown error</label>
+            <div class="control__elements">
+              <div style="width: 200px">
+                <Dropdown v-model="dropdown" class="dropdown--error">
+                  <DropdownItem name="Choice 1" value="choice-1"></DropdownItem>
+                  <DropdownItem
+                    name="Choice 2"
+                    value="choice-2"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 3"
+                    value="choice-3"
+                    icon="iconoir-db"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 4"
+                    value="choice-4"
+                    icon="iconoir-cancel"
+                    :disabled="true"
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 5"
+                    value="choice-5"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                  <DropdownItem
+                    name="Choice 6"
+                    value="choice-6"
+                    icon="iconoir-edit-pencil"
+                    description="Lorem ipsum dolor sit amet, consectetur."
+                  ></DropdownItem>
+                </Dropdown>
+              </div>
+            </div>
+          </div>
           <div class="control">
             <label class="control__label">Datepicker field</label>
             <div class="control__elements">
@@ -671,6 +824,18 @@
             type="ghost"
           ></Button>
         </div>
+        <div
+          class="margin-bottom-3 style-guide__buttons"
+          :style="{ backgroundColor: 'white', padding: '5px' }"
+        >
+          <h3>Overflow button</h3>
+          <Button overflow>Overflow</Button>
+
+          <button class="button button--large button--error button--overflow">
+            Remove
+          </button>
+        </div>
+
         <div
           class="margin-bottom-3"
           :style="{ backgroundColor: 'white', padding: '5px' }"
@@ -803,21 +968,24 @@
           <div class="context">
             <div class="context__menu-title">Vehicles</div>
             <ul class="context__menu">
-              <li>
-                <a href="#">
-                  <i class="context__menu-icon iconoir-edit-pencil"></i>
+              <li class="context__menu-item">
+                <a class="context__menu-item-link" href="#">
+                  <i class="context__menu-item-icon iconoir-edit-pencil"></i>
                   Rename database
                 </a>
               </li>
-              <li>
-                <a href="#">
-                  <i class="context__menu-icon iconoir-bin"></i>
+              <li class="context__menu-item">
+                <a class="context__menu-item-link" href="#">
+                  <i class="context__menu-item-icon iconoir-bin"></i>
                   Delete table
                 </a>
               </li>
-              <li>
-                <a href="#" class="context__menu-item--loading">
-                  <i class="context__menu-icon iconoir-bin"></i>
+              <li class="context__menu-item">
+                <a
+                  class="context__menu-item-link context__menu-item-link--loading"
+                  href="#"
+                >
+                  <i class="context__menu-item-icon iconoir-bin"></i>
                   Loading
                 </a>
               </li>
@@ -826,20 +994,35 @@
           <div class="context" style="max-width: 264px">
             <div class="context__menu-title">Workspace permissions</div>
             <ul class="context__menu context__menu--can-be-active">
-              <li>
-                <a href="#" class="context__menu-item-with-desc active">
+              <li class="context__menu-item">
+                <a
+                  href="#"
+                  class="context__menu-item-link context__menu-item-link--with-desc active"
+                >
                   <span class="context__menu-item-title">Admin</span>
                   <div class="context__menu-item-description">
                     Description of what an admin can or can’t do on the
                     workspace.
                   </div>
-                  <i class="context__menu-active-icon iconoir-check-circle"></i>
+                  <i class="context__menu-active-icon iconoir-check"></i>
                 </a>
               </li>
-              <li>
+              <li class="context__menu-item">
                 <a
                   href="#"
-                  class="context__menu-item-with-desc context__menu-item--loading"
+                  class="context__menu-item-link context__menu-item-link--with-desc disabled"
+                >
+                  <span class="context__menu-item-title">Admin</span>
+                  <div class="context__menu-item-description">
+                    Description of what an admin can or can’t do on the
+                    workspace.
+                  </div>
+                </a>
+              </li>
+              <li class="context__menu-item">
+                <a
+                  href="#"
+                  class="context__menu-item-link context__menu-item-link--with-desc context__menu-item-link--loading"
                 >
                   <span class="context__menu-item-title">Builder</span>
                   <div class="context__menu-item-description">
@@ -848,8 +1031,13 @@
                   </div>
                 </a>
               </li>
-              <li>
-                <a class="color-error" href="#"> Remove from workspace </a>
+              <li class="context__menu-item context__menu-item--with-separator">
+                <a
+                  class="context__menu-item-link context__menu-item-link--delete"
+                  href="#"
+                >
+                  Remove from workspace
+                </a>
               </li>
             </ul>
           </div>
@@ -866,8 +1054,8 @@
               <li class="select__item active">
                 <a href="#" class="select__item-link">
                   <div class="select__item-name">Workspace name 1</div>
-                  <i class="select__item-active-icon iconoir-check-circle"></i>
                 </a>
+                <i class="select__item-active-icon iconoir-check"></i>
                 <a href="#" class="select__item-options">
                   <i class="baserow-icon-more-vertical"></i>
                 </a>
@@ -890,7 +1078,7 @@
               </li>
               <li class="select__item">
                 <a href="#" class="select__item-link">
-                  <div class="select__item-name">roup name 4</div>
+                  <div class="select__item-name">Workspace name 4</div>
                 </a>
                 <a href="#" class="select__item-options">
                   <i class="baserow-icon-more-vertical"></i>
@@ -1192,22 +1380,30 @@
           <Context ref="context1">
             <div class="context__menu-title">Vehicles</div>
             <ul class="context__menu">
-              <li>
-                <a href="#">
-                  <i class="context__menu-icon iconoir-edit-pencil"></i>
+              <li class="context__menu-item">
+                <a class="context__menu-item-link" href="#">
+                  <i class="context__menu-item-icon iconoir-edit-pencil"></i>
                   This does nothing
                 </a>
               </li>
-              <li>
-                <a @click="$refs.context2.toggle($event.target)">
+              <li class="context__menu-item">
+                <a
+                  class="context__menu-item-link"
+                  @click="$refs.context2.toggle($event.target)"
+                >
                   Open another context
                 </a>
                 <Context ref="context2">
                   <div class="context__menu-title">Open modal</div>
                   <ul class="context__menu">
-                    <li>
-                      <a @click="$refs.modal1.show()">
-                        <i class="context__menu-icon iconoir-edit-pencil"></i>
+                    <li class="context__menu-item">
+                      <a
+                        class="context__menu-item-link"
+                        @click="$refs.modal1.show()"
+                      >
+                        <i
+                          class="context__menu-item-icon iconoir-edit-pencil"
+                        ></i>
                         Click to open modal
                       </a>
                     </li>
@@ -1221,25 +1417,30 @@
                       <Context ref="context3">
                         <div class="context__menu-title">Vehicles</div>
                         <ul class="context__menu">
-                          <li>
-                            <a href="#">
+                          <li class="context__menu-item">
+                            <a class="context__menu-item-link" href="#">
                               <i
-                                class="context__menu-icon iconoir-edit-pencil"
+                                class="context__menu-item-icon iconoir-edit-pencil"
                               ></i>
                               This does nothing
                             </a>
                           </li>
-                          <li>
-                            <a @click="$refs.context4.toggle($event.target)">
+                          <li class="context__menu-item">
+                            <a
+                              class="context__menu-item-link"
+                              @click="$refs.context4.toggle($event.target)"
+                            >
                               Open another context
                             </a>
                             <Context ref="context4">
                               <div class="context__menu-title">End!</div>
                             </Context>
                           </li>
-                          <li>
-                            <a href="#">
-                              <i class="context__menu-icon iconoir-bin"></i>
+                          <li class="context__menu-item">
+                            <a class="context__menu-item-link" href="#">
+                              <i
+                                class="context__menu-item-icon iconoir-bin"
+                              ></i>
                               This does nothing
                             </a>
                           </li>
@@ -1251,7 +1452,7 @@
               </li>
               <li>
                 <a href="#">
-                  <i class="context__menu-icon iconoir-bin"></i>
+                  <i class="context__menu-item-icon iconoir-bin"></i>
                   This does nothing
                 </a>
               </li>
diff --git a/web-frontend/modules/database/components/docs/APIDocsExample.vue b/web-frontend/modules/database/components/docs/APIDocsExample.vue
index 9647eca97..d14d342ab 100644
--- a/web-frontend/modules/database/components/docs/APIDocsExample.vue
+++ b/web-frontend/modules/database/components/docs/APIDocsExample.vue
@@ -52,6 +52,7 @@
         <Dropdown
           class="dropdown--floating"
           :value="value.type"
+          small
           @input="
             $emit('input', {
               userFieldNames: value.userFieldNames,
diff --git a/web-frontend/modules/database/components/field/FieldContext.vue b/web-frontend/modules/database/components/field/FieldContext.vue
index d4e7cdc9b..71d43bf88 100644
--- a/web-frontend/modules/database/components/field/FieldContext.vue
+++ b/web-frontend/modules/database/components/field/FieldContext.vue
@@ -14,10 +14,11 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
         <a
           ref="updateFieldContextLink"
-          class="grid-view__description-options"
+          class="context__menu-item-link grid-view__description-options"
           @click="
             $refs.updateFieldContext.toggle(
               $refs.updateFieldContextLink,
@@ -27,7 +28,7 @@
             )
           "
         >
-          <i class="context__menu-icon iconoir-edit-pencil"></i>
+          <i class="context__menu-item-icon iconoir-edit-pencil"></i>
           {{ $t('fieldContext.editField') }}
         </a>
         <UpdateFieldContext
@@ -48,12 +49,14 @@
             database.workspace.id
           )
         "
+        class="context__menu-item context__menu-item--with-separator"
       >
         <a
-          :class="{ 'context__menu-item--loading': deleteLoading }"
+          :class="{ 'context__menu-item-link--loading': deleteLoading }"
+          class="context__menu-item-link context__menu-item-link--delete"
           @click="deleteField()"
         >
-          <i class="context__menu-icon iconoir-bin"></i>
+          <i class="context__menu-item-icon iconoir-bin"></i>
           {{ $t('fieldContext.deleteField') }}
         </a>
       </li>
diff --git a/web-frontend/modules/database/components/field/FieldDateSubForm.vue b/web-frontend/modules/database/components/field/FieldDateSubForm.vue
index b502ea15a..51f5a06a4 100644
--- a/web-frontend/modules/database/components/field/FieldDateSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldDateSubForm.vue
@@ -9,6 +9,7 @@
           v-model="values.date_format"
           :class="{ 'dropdown--error': $v.values.date_format.$error }"
           :fixed-items="true"
+          small
           @hide="$v.values.date_format.$touch()"
         >
           <DropdownItem
@@ -39,6 +40,7 @@
             <Dropdown
               v-model="values.date_time_format"
               :fixed-items="true"
+              small
               @hide="$v.values.date_time_format.$touch()"
             >
               <DropdownItem
diff --git a/web-frontend/modules/database/components/field/FieldForm.vue b/web-frontend/modules/database/components/field/FieldForm.vue
index 89d36b66e..733eb6419 100644
--- a/web-frontend/modules/database/components/field/FieldForm.vue
+++ b/web-frontend/modules/database/components/field/FieldForm.vue
@@ -51,6 +51,7 @@
           v-model="values.type"
           :class="{ 'dropdown--error': $v.values.type.$error }"
           :fixed-items="true"
+          small
           @hide="$v.values.type.$touch()"
         >
           <DropdownItem
diff --git a/web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue b/web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue
index f032869dc..3d4540ca7 100644
--- a/web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldLinkRowSubForm.vue
@@ -11,6 +11,7 @@
             :class="{ 'dropdown--error': $v.values.link_row_table_id.$error }"
             :fixed-items="true"
             :disabled="!isSelectedFieldAccessible"
+            small
             @hide="$v.values.link_row_table_id.$touch()"
           >
             <DropdownItem
diff --git a/web-frontend/modules/database/components/field/FieldNumberSubForm.vue b/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
index ce7b3f5e9..465e20fa3 100644
--- a/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldNumberSubForm.vue
@@ -9,6 +9,7 @@
           v-model="values.number_decimal_places"
           :class="{ 'dropdown--error': $v.values.number_decimal_places.$error }"
           :fixed-items="true"
+          small
           @hide="$v.values.number_decimal_places.$touch()"
         >
           <DropdownItem name="0 (1)" :value="0"></DropdownItem>
diff --git a/web-frontend/modules/database/components/field/FieldRatingSubForm.vue b/web-frontend/modules/database/components/field/FieldRatingSubForm.vue
index 21dd954d0..4d2830a03 100644
--- a/web-frontend/modules/database/components/field/FieldRatingSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldRatingSubForm.vue
@@ -25,6 +25,7 @@
           :class="{ 'dropdown--error': $v.values.style.$error }"
           :fixed-items="true"
           :show-search="false"
+          small
           @hide="$v.values.style.$touch()"
         >
           <DropdownItem
@@ -48,6 +49,7 @@
           :class="{ 'dropdown--error': $v.values.max_value.$error }"
           :show-search="false"
           :fixed-items="true"
+          small
           @hide="$v.values.max_value.$touch()"
         >
           <DropdownItem
diff --git a/web-frontend/modules/database/components/field/FieldRollupSubForm.vue b/web-frontend/modules/database/components/field/FieldRollupSubForm.vue
index 91de71e08..91c93f3dd 100644
--- a/web-frontend/modules/database/components/field/FieldRollupSubForm.vue
+++ b/web-frontend/modules/database/components/field/FieldRollupSubForm.vue
@@ -22,8 +22,10 @@
         <div class="control__elements">
           <Dropdown
             v-model="values.rollup_function"
+            max-width
             :class="{ 'dropdown--error': $v.values.rollup_function.$error }"
             :fixed-items="true"
+            small
             @hide="$v.values.rollup_function.$touch()"
           >
             <DropdownItem
diff --git a/web-frontend/modules/database/components/row/RowEditModalField.vue b/web-frontend/modules/database/components/row/RowEditModalField.vue
index 0ef8515a3..acf7bf9a6 100644
--- a/web-frontend/modules/database/components/row/RowEditModalField.vue
+++ b/web-frontend/modules/database/components/row/RowEditModalField.vue
@@ -22,10 +22,13 @@
       @update="$emit('field-updated', $event)"
       @delete="$emit('field-deleted')"
     >
-      <li v-if="canBeHidden">
-        <a @click="$emit('toggle-field-visibility', { field })">
+      <li v-if="canBeHidden" class="context__menu-item">
+        <a
+          class="context__menu-item-link"
+          @click="$emit('toggle-field-visibility', { field })"
+        >
           <i
-            class="context__menu-icon"
+            class="context__menu-item-icon"
             :class="[hidden ? 'iconoir-eye-empty' : 'iconoir-eye-off']"
           ></i>
           {{ $t(hidden ? 'fieldContext.showField' : 'fieldContext.hideField') }}
diff --git a/web-frontend/modules/database/components/settings/APIToken.vue b/web-frontend/modules/database/components/settings/APIToken.vue
index c8aa891f9..7300da77d 100644
--- a/web-frontend/modules/database/components/settings/APIToken.vue
+++ b/web-frontend/modules/database/components/settings/APIToken.vue
@@ -61,37 +61,42 @@
               </a>
             </div>
             <ul class="context__menu">
-              <li>
-                <nuxt-link :to="{ name: 'database-api-docs' }">
-                  <i class="context__menu-icon iconoir-book"></i>
+              <li class="context__menu-item">
+                <nuxt-link
+                  class="context__menu-item-link"
+                  :to="{ name: 'database-api-docs' }"
+                >
+                  <i class="context__menu-item-icon iconoir-book"></i>
                   {{ $t('apiToken.viewAPIDocs') }}
                 </nuxt-link>
               </li>
-              <li>
+              <li class="context__menu-item">
                 <a
+                  class="context__menu-item-link"
                   :class="{
-                    'context__menu-item--loading': rotateLoading,
+                    'context__menu-item-link--loading': rotateLoading,
                   }"
                   @click="rotateKey(token)"
                 >
-                  <i class="context__menu-icon iconoir-refresh-double"></i>
+                  <i class="context__menu-item-icon iconoir-refresh-double"></i>
                   {{ $t('apiToken.generateNewToken') }}
                 </a>
               </li>
-              <li>
-                <a @click="enableRename()">
-                  <i class="context__menu-icon iconoir-edit-pencil"></i>
+              <li class="context__menu-item">
+                <a class="context__menu-item-link" @click="enableRename()">
+                  <i class="context__menu-item-icon iconoir-edit-pencil"></i>
                   {{ $t('action.rename') }}
                 </a>
               </li>
-              <li>
+              <li class="context__menu-item">
                 <a
                   :class="{
-                    'context__menu-item--loading': deleteLoading,
+                    'context__menu-item-link--loading': deleteLoading,
                   }"
+                  class="context__menu-item-link"
                   @click.prevent="deleteToken(token)"
                 >
-                  <i class="context__menu-icon iconoir-bin"></i>
+                  <i class="context__menu-item-icon iconoir-bin"></i>
                   {{ $t('action.delete') }}
                 </a>
               </li>
diff --git a/web-frontend/modules/database/components/sidebar/Sidebar.vue b/web-frontend/modules/database/components/sidebar/Sidebar.vue
index 9c46c6e77..4edd19c13 100644
--- a/web-frontend/modules/database/components/sidebar/Sidebar.vue
+++ b/web-frontend/modules/database/components/sidebar/Sidebar.vue
@@ -5,7 +5,7 @@
     @selected="selected"
   >
     <template #context>
-      <li>
+      <li class="context__menu-item">
         <nuxt-link
           :to="{
             name: 'database-api-docs-detail',
@@ -13,8 +13,9 @@
               databaseId: application.id,
             },
           }"
+          class="context__menu-item-link"
         >
-          <i class="context__menu-icon iconoir-book"></i>
+          <i class="context__menu-item-icon iconoir-book"></i>
           {{ $t('sidebar.viewAPI') }}
         </nuxt-link>
       </li>
diff --git a/web-frontend/modules/database/components/sidebar/SidebarItem.vue b/web-frontend/modules/database/components/sidebar/SidebarItem.vue
index 70a9d52ce..958b41925 100644
--- a/web-frontend/modules/database/components/sidebar/SidebarItem.vue
+++ b/web-frontend/modules/database/components/sidebar/SidebarItem.vue
@@ -34,6 +34,7 @@
         <li
           v-for="(component, index) in additionalContextComponents"
           :key="index"
+          class="context__menu-item"
           @click="$refs.context.hide()"
         >
           <component
@@ -50,9 +51,10 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="exportTable()">
-            <i class="context__menu-icon iconoir-share-ios"></i>
+          <a class="context__menu-item-link" @click="exportTable()">
+            <i class="context__menu-item-icon iconoir-share-ios"></i>
             {{ $t('sidebarItem.exportTable') }}
           </a>
         </li>
@@ -64,10 +66,11 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="openWebhookModal()">
-            <i class="context__menu-icon iconoir-globe"></i>
-            Webhooks
+          <a class="context__menu-item-link" @click="openWebhookModal()">
+            <i class="context__menu-item-icon iconoir-globe"></i>
+            {{ $t('sidebarItem.webhooks') }}
           </a>
         </li>
         <li
@@ -78,9 +81,10 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="enableRename()">
-            <i class="context__menu-icon iconoir-edit-pencil"></i>
+          <a class="context__menu-item-link" @click="enableRename()">
+            <i class="context__menu-item-icon iconoir-edit-pencil"></i>
             {{ $t('action.rename') }}
           </a>
         </li>
@@ -92,6 +96,7 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
           <SidebarDuplicateTableContextItem
             :database="database"
@@ -108,12 +113,14 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
           <a
-            :class="{ 'context__menu-item--loading': deleteLoading }"
+            class="context__menu-item-link context__menu-item-link--delete"
+            :class="{ 'context__menu-item-link--loading': deleteLoading }"
             @click="deleteTable()"
           >
-            <i class="context__menu-icon iconoir-bin"></i>
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('action.delete') }}
           </a>
         </li>
diff --git a/web-frontend/modules/database/components/sidebar/table/SidebarDuplicateTableContextItem.vue b/web-frontend/modules/database/components/sidebar/table/SidebarDuplicateTableContextItem.vue
index b6706a58b..331d33de3 100644
--- a/web-frontend/modules/database/components/sidebar/table/SidebarDuplicateTableContextItem.vue
+++ b/web-frontend/modules/database/components/sidebar/table/SidebarDuplicateTableContextItem.vue
@@ -1,12 +1,13 @@
 <template>
   <a
+    class="context__menu-item-link"
     :class="{
-      'context__menu-item--loading': duplicating,
+      'context__menu-item-link--loading': duplicating,
       disabled: disabled || duplicating,
     }"
     @click="duplicateTable()"
   >
-    <i class="context__menu-icon iconoir-copy"></i>
+    <i class="context__menu-item-icon iconoir-copy"></i>
     {{ $t('action.duplicate') }}
   </a>
 </template>
diff --git a/web-frontend/modules/database/components/view/ViewContext.vue b/web-frontend/modules/database/components/view/ViewContext.vue
index 71e37405e..cad14bb4f 100644
--- a/web-frontend/modules/database/components/view/ViewContext.vue
+++ b/web-frontend/modules/database/components/view/ViewContext.vue
@@ -15,9 +15,10 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
-        <a @click="exportView()">
-          <i class="context__menu-icon iconoir-share-ios"></i>
+        <a class="context__menu-item-link" @click="exportView()">
+          <i class="context__menu-item-icon iconoir-share-ios"></i>
           {{ $t('viewContext.exportView') }}
         </a>
       </li>
@@ -29,9 +30,10 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
-        <a @click="importFile()">
-          <i class="context__menu-icon iconoir-import"></i>
+        <a class="context__menu-item-link" @click="importFile()">
+          <i class="context__menu-item-icon iconoir-import"></i>
           {{ $t('viewContext.importFile') }}
         </a>
       </li>
@@ -43,12 +45,14 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
         <a
+          class="context__menu-item-link"
           :class="{ 'context__menu-item--loading': duplicateLoading }"
           @click="duplicateView()"
         >
-          <i class="context__menu-icon iconoir-copy"></i>
+          <i class="context__menu-item-icon iconoir-copy"></i>
           {{ $t('viewContext.duplicateView') }}
         </a>
       </li>
@@ -71,9 +75,10 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
-        <a @click="openWebhookModal()">
-          <i class="context__menu-icon iconoir-globe"></i>
+        <a class="context__menu-item-link" @click="openWebhookModal()">
+          <i class="context__menu-item-icon iconoir-globe"></i>
           {{ $t('viewContext.webhooks') }}
         </a>
       </li>
@@ -85,9 +90,10 @@
             database.workspace.id
           )
         "
+        class="context__menu-item"
       >
-        <a @click="enableRename()">
-          <i class="context__menu-icon iconoir-edit-pencil"></i>
+        <a class="context__menu-item-link" @click="enableRename()">
+          <i class="context__menu-item-icon iconoir-edit-pencil"></i>
           {{ $t('viewContext.renameView') }}
         </a>
       </li>
@@ -99,12 +105,14 @@
             database.workspace.id
           )
         "
+        class="context__menu-item context-menu-item--with-separator"
       >
         <a
+          class="context__menu-item-link context__menu-item-link--delete"
           :class="{ 'context__menu-item--loading': deleteLoading }"
           @click="deleteView()"
         >
-          <i class="context__menu-icon iconoir-bin"></i>
+          <i class="context__menu-item-icon iconoir-bin"></i>
           {{ $t('viewContext.deleteView') }}
         </a>
       </li>
diff --git a/web-frontend/modules/database/components/view/ViewFieldConditionItem.vue b/web-frontend/modules/database/components/view/ViewFieldConditionItem.vue
index 99a167429..033644e4d 100644
--- a/web-frontend/modules/database/components/view/ViewFieldConditionItem.vue
+++ b/web-frontend/modules/database/components/view/ViewFieldConditionItem.vue
@@ -8,7 +8,7 @@
         :value="filter.field"
         :disabled="disableFilter"
         :fixed-items="true"
-        class="dropdown--tiny"
+        small
         @input="$emit('updateFilter', { field: $event })"
       >
         <DropdownItem
@@ -25,7 +25,7 @@
         :disabled="disableFilter"
         :value="filter.type"
         :fixed-items="true"
-        class="dropdown--tiny"
+        small
         @input="$emit('updateFilter', { type: $event })"
       >
         <DropdownItem
diff --git a/web-frontend/modules/database/components/view/ViewFilterFormOperator.vue b/web-frontend/modules/database/components/view/ViewFilterFormOperator.vue
index 8cb8c6c97..6421289e0 100644
--- a/web-frontend/modules/database/components/view/ViewFilterFormOperator.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterFormOperator.vue
@@ -8,7 +8,7 @@
       :value="filterType"
       :show-search="false"
       :fixed-items="true"
-      class="dropdown--tiny"
+      small
       @input="$emit('select-boolean-operator', $event)"
     >
       <DropdownItem
diff --git a/web-frontend/modules/database/components/view/ViewFilterTypeCollaborators.vue b/web-frontend/modules/database/components/view/ViewFilterTypeCollaborators.vue
index 822f5b10c..77e0d8e82 100644
--- a/web-frontend/modules/database/components/view/ViewFilterTypeCollaborators.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeCollaborators.vue
@@ -5,7 +5,8 @@
     :value="copy"
     :show-empty-value="false"
     :fixed-items="true"
-    class="dropdown--floating filters__value-dropdown dropdown--tiny"
+    class="dropdown--floating filters__value-dropdown"
+    small
     @input="input"
   ></FieldCollaboratorDropdown>
 </template>
diff --git a/web-frontend/modules/database/components/view/ViewFilterTypeFileTypeDropdown.vue b/web-frontend/modules/database/components/view/ViewFilterTypeFileTypeDropdown.vue
index 30525609a..028d28da6 100644
--- a/web-frontend/modules/database/components/view/ViewFilterTypeFileTypeDropdown.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeFileTypeDropdown.vue
@@ -3,7 +3,8 @@
     :value="filter.value"
     :show-search="false"
     :fixed-items="true"
-    class="filters__value-dropdown dropdown--tiny"
+    class="filters__value-dropdown"
+    small
     @input="$emit('input', $event)"
   >
     <DropdownItem
diff --git a/web-frontend/modules/database/components/view/ViewFilterTypeLinkRow.vue b/web-frontend/modules/database/components/view/ViewFilterTypeLinkRow.vue
index bdda7ce9b..2b0fc3ff6 100644
--- a/web-frontend/modules/database/components/view/ViewFilterTypeLinkRow.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeLinkRow.vue
@@ -6,7 +6,8 @@
     :fetch-on-open="true"
     :disabled="disabled"
     :fixed-items="true"
-    class="filters__value-dropdown dropdown--tiny"
+    class="filters__value-dropdown"
+    small
     @input="$emit('input', $event)"
   ></PaginatedDropdown>
   <a
diff --git a/web-frontend/modules/database/components/view/ViewFilterTypeSelectOptions.vue b/web-frontend/modules/database/components/view/ViewFilterTypeSelectOptions.vue
index b394cc038..1e35d4c61 100644
--- a/web-frontend/modules/database/components/view/ViewFilterTypeSelectOptions.vue
+++ b/web-frontend/modules/database/components/view/ViewFilterTypeSelectOptions.vue
@@ -4,7 +4,8 @@
     :options="field.select_options"
     :disabled="disabled"
     :fixed-items="true"
-    class="dropdown--floating filters__value-dropdown dropdown--tiny"
+    class="dropdown--floating filters__value-dropdown"
+    small
     @input="input"
   ></FieldSelectOptionsDropdown>
 </template>
diff --git a/web-frontend/modules/database/components/view/ViewGroupByContext.vue b/web-frontend/modules/database/components/view/ViewGroupByContext.vue
index 2c0f8938f..e7389dfe9 100644
--- a/web-frontend/modules/database/components/view/ViewGroupByContext.vue
+++ b/web-frontend/modules/database/components/view/ViewGroupByContext.vue
@@ -43,7 +43,8 @@
             :value="groupBy.field"
             :disabled="disableGroupBy"
             :fixed-items="true"
-            class="dropdown--floating dropdown--tiny"
+            class="dropdown--floating"
+            small
             @input="updateGroupBy(groupBy, { field: $event })"
           >
             <DropdownItem
@@ -132,10 +133,11 @@
               v-for="field in fields"
               v-show="isFieldAvailable(field)"
               :key="field.id"
+              class="context__menu-item"
             >
-              <a @click="addGroupBy(field)">
+              <a class="context__menu-item-link" @click="addGroupBy(field)">
                 <i
-                  class="context__menu-icon"
+                  class="context__menu-item-icon"
                   :class="field._.type.iconClass"
                 ></i>
                 {{ field.name }}
diff --git a/web-frontend/modules/database/components/view/ViewSortContext.vue b/web-frontend/modules/database/components/view/ViewSortContext.vue
index ff507d61c..630a5d698 100644
--- a/web-frontend/modules/database/components/view/ViewSortContext.vue
+++ b/web-frontend/modules/database/components/view/ViewSortContext.vue
@@ -44,7 +44,8 @@
             :value="sort.field"
             :disabled="disableSort"
             :fixed-items="true"
-            class="dropdown--floating dropdown--tiny"
+            class="dropdown--floating"
+            small
             @input="updateSort(sort, { field: $event })"
           >
             <DropdownItem
@@ -132,10 +133,11 @@
               v-for="field in fields"
               v-show="isFieldAvailable(field)"
               :key="field.id"
+              class="context__menu-item"
             >
-              <a @click="addSort(field)">
+              <a class="context__menu-item-link" @click="addSort(field)">
                 <i
-                  class="context__menu-icon"
+                  class="context__menu-item-icon"
                   :class="field._.type.iconClass"
                 ></i>
                 {{ field.name }}
diff --git a/web-frontend/modules/database/components/view/ViewsContextItem.vue b/web-frontend/modules/database/components/view/ViewsContextItem.vue
index b199700c5..42888a059 100644
--- a/web-frontend/modules/database/components/view/ViewsContextItem.vue
+++ b/web-frontend/modules/database/components/view/ViewsContextItem.vue
@@ -22,6 +22,10 @@
         </div>
       </div>
     </a>
+    <i
+      v-if="view._.selected"
+      class="select__item-active-icon iconoir-check"
+    ></i>
     <component
       :is="deactivatedClickModal"
       v-if="deactivatedClickModal !== null"
diff --git a/web-frontend/modules/database/components/view/form/FormViewFieldMultipleLinkRow.vue b/web-frontend/modules/database/components/view/form/FormViewFieldMultipleLinkRow.vue
index 8e3b4d32a..c4c47efc6 100644
--- a/web-frontend/modules/database/components/view/form/FormViewFieldMultipleLinkRow.vue
+++ b/web-frontend/modules/database/components/view/form/FormViewFieldMultipleLinkRow.vue
@@ -10,7 +10,7 @@
           :fetch-page="fetchPage"
           :value="value[index].id"
           :initial-display-name="value[index].value"
-          class="dropdown--tiny"
+          small
           :class="{
             'dropdown--error':
               touched && !valid && isInvalidValue(value[index]),
diff --git a/web-frontend/modules/database/components/view/form/FormViewModeContext.vue b/web-frontend/modules/database/components/view/form/FormViewModeContext.vue
index 1fa8b0dc9..298859a90 100644
--- a/web-frontend/modules/database/components/view/form/FormViewModeContext.vue
+++ b/web-frontend/modules/database/components/view/form/FormViewModeContext.vue
@@ -9,21 +9,21 @@
         :class="{ active: mode.type === view.mode }"
       >
         <a class="select__item-link" @click="select(mode, index)"
-          ><div class="select__item-name">
+          ><span class="select__item-name">
             <i :class="`select__item-icon ${mode.getIconClass()}`"></i>
-            {{ mode.getName() }}
+            <span class="select__item-name-text">{{ mode.getName() }}</span>
             <div v-if="isDeactivated(mode)" class="deactivated-label">
               <i class="iconoir-lock"></i>
             </div>
-          </div>
+          </span>
           <div class="select__item-description">
             {{ mode.getDescription() }}
           </div>
-          <i
-            v-if="mode.type === view.mode"
-            class="select__item-active-icon iconoir-check-circle"
-          ></i>
         </a>
+        <i
+          v-if="mode.type === view.mode"
+          class="select__item-active-icon iconoir-check"
+        ></i>
         <component
           :is="mode.getDeactivatedClickModal()"
           v-if="hasDeactivatedClickModal(mode)"
diff --git a/web-frontend/modules/database/components/view/grid/GridView.vue b/web-frontend/modules/database/components/view/grid/GridView.vue
index 6202c1e54..37b9010d6 100644
--- a/web-frontend/modules/database/components/view/grid/GridView.vue
+++ b/web-frontend/modules/database/components/view/grid/GridView.vue
@@ -141,9 +141,12 @@
       :max-height-if-outside-viewport="true"
     >
       <ul v-show="isMultiSelectActive" class="context__menu">
-        <li>
-          <a @click=";[copySelection($event), $refs.rowContext.hide()]">
-            <i class="context__menu-icon iconoir-copy"></i>
+        <li class="context__menu-item">
+          <a
+            class="context__menu-item-link"
+            @click=";[copySelection($event), $refs.rowContext.hide()]"
+          >
+            <i class="context__menu-item-icon iconoir-copy"></i>
             {{ $t('gridView.copyCells') }}
           </a>
         </li>
@@ -156,12 +159,14 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
           <a
-            :class="{ 'context__menu-item--loading': deletingRow }"
+            class="context__menu-item-link"
+            :class="{ 'context__menu-item-link--loading': deletingRow }"
             @click.stop="deleteRowsFromMultipleCellSelection()"
           >
-            <i class="context__menu-icon iconoir-bin"></i>
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('gridView.deleteRows') }}
           </a>
         </li>
@@ -169,9 +174,10 @@
       <ul v-show="!isMultiSelectActive" class="context__menu">
         <li>
           <a
+            class="context__menu-item-link"
             @click=";[selectRow($event, selectedRow), $refs.rowContext.hide()]"
           >
-            <i class="context__menu-icon iconoir-check-circle"></i>
+            <i class="context__menu-item-icon iconoir-check-circle"></i>
             {{ $t('gridView.selectRow') }}
           </a>
         </li>
@@ -184,9 +190,13 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="addRowAboveSelectedRow($event, selectedRow)">
-            <i class="context__menu-icon iconoir-arrow-up"></i>
+          <a
+            class="context__menu-item-link"
+            @click="addRowAboveSelectedRow($event, selectedRow)"
+          >
+            <i class="context__menu-item-icon iconoir-arrow-up"></i>
             {{ $t('gridView.insertRowAbove') }}
           </a>
         </li>
@@ -199,9 +209,13 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="addRowBelowSelectedRow($event, selectedRow)">
-            <i class="context__menu-icon iconoir-arrow-down"></i>
+          <a
+            class="context__menu-item-link"
+            @click="addRowBelowSelectedRow($event, selectedRow)"
+          >
+            <i class="context__menu-item-icon iconoir-arrow-down"></i>
             {{ $t('gridView.insertRowBelow') }}
           </a>
         </li>
@@ -214,21 +228,34 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="duplicateSelectedRow($event, selectedRow)">
-            <i class="context__menu-icon iconoir-copy"></i>
+          <a
+            class="context__menu-item-link"
+            @click="duplicateSelectedRow($event, selectedRow)"
+          >
+            <i class="context__menu-item-icon iconoir-copy"></i>
             {{ $t('gridView.duplicateRow') }}
           </a>
         </li>
-        <li v-if="!readOnly">
-          <a @click="copyLinkToSelectedRow($event, selectedRow)">
-            <i class="context__menu-icon iconoir-link"></i>
+        <li v-if="!readOnly" class="context__menu-item">
+          <a
+            class="context__menu-item-link"
+            @click="copyLinkToSelectedRow($event, selectedRow)"
+          >
+            <i class="context__menu-item-icon iconoir-link"></i>
             {{ $t('gridView.copyRowURL') }}
           </a>
         </li>
-        <li v-if="selectedRow !== null && !selectedRow._.loading">
-          <a @click=";[openRowEditModal(selectedRow), $refs.rowContext.hide()]">
-            <i class="context__menu-icon iconoir-expand"></i>
+        <li
+          v-if="selectedRow !== null && !selectedRow._.loading"
+          class="context__menu-item"
+        >
+          <a
+            class="context__menu-item-link"
+            @click=";[openRowEditModal(selectedRow), $refs.rowContext.hide()]"
+          >
+            <i class="context__menu-item-icon iconoir-expand"></i>
             {{ $t('gridView.enlargeRow') }}
           </a>
         </li>
@@ -241,9 +268,10 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="deleteRow(selectedRow)">
-            <i class="context__menu-icon iconoir-bin"></i>
+          <a class="context__menu-item-link" @click="deleteRow(selectedRow)">
+            <i class="context__menu-item-icon iconoir-bin"></i>
             {{ $t('gridView.deleteRow') }}
           </a>
         </li>
diff --git a/web-frontend/modules/database/components/view/grid/GridViewFieldFooter.vue b/web-frontend/modules/database/components/view/grid/GridViewFieldFooter.vue
index 3889b2d84..bef9d5ffa 100644
--- a/web-frontend/modules/database/components/view/grid/GridViewFieldFooter.vue
+++ b/web-frontend/modules/database/components/view/grid/GridViewFieldFooter.vue
@@ -29,12 +29,16 @@
           :class="{ active: !viewAggregationType }"
         >
           <a class="select__item-link" @click="selectAggregation('none')"
-            ><div class="select__item-name">{{ $t('common.none') }}</div>
-            <i
-              v-if="!viewAggregationType"
-              class="select__item-active-icon iconoir-check-circle"
-            ></i
-          ></a>
+            ><div class="select__item-name">
+              <span class="select__item-name-text">{{
+                $t('common.none')
+              }}</span>
+            </div>
+          </a>
+          <i
+            v-if="!viewAggregationType"
+            class="select__item-active-icon iconoir-check"
+          ></i>
         </li>
         <li
           v-for="viewAggregation in viewAggregationTypes"
@@ -48,13 +52,15 @@
             class="select__item-link"
             @click="selectAggregation(viewAggregation.getType())"
             ><div class="select__item-name">
-              {{ viewAggregation.getName() }}
+              <span class="select__item-name-text">{{
+                viewAggregation.getName()
+              }}</span>
             </div>
-            <i
-              v-if="viewAggregation === viewAggregationType"
-              class="select__item-active-icon iconoir-check-circle"
-            ></i
-          ></a>
+          </a>
+          <i
+            v-if="viewAggregation === viewAggregationType"
+            class="select__item-active-icon iconoir-check"
+          ></i>
         </li>
       </ul>
     </Context>
diff --git a/web-frontend/modules/database/components/view/grid/GridViewFieldType.vue b/web-frontend/modules/database/components/view/grid/GridViewFieldType.vue
index 84637ec46..d21703a5b 100644
--- a/web-frontend/modules/database/components/view/grid/GridViewFieldType.vue
+++ b/web-frontend/modules/database/components/view/grid/GridViewFieldType.vue
@@ -57,14 +57,16 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
           <a
             ref="insertLeftLink"
+            class="context__menu-item-link"
             @click="
               $refs.insertFieldContext.toggle($refs.insertLeftLink, 'left')
             "
           >
-            <i class="context__menu-icon iconoir-arrow-left"></i>
+            <i class="context__menu-item-icon iconoir-arrow-left"></i>
             {{ $t('gridViewFieldType.insertLeft') }}
           </a>
         </li>
@@ -78,14 +80,16 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
           <a
             ref="insertRightLink"
+            class="context__menu-item-link"
             @click="
               $refs.insertFieldContext.toggle($refs.insertRightLink, 'right')
             "
           >
-            <i class="context__menu-icon iconoir-arrow-right"></i>
+            <i class="context__menu-item-icon iconoir-arrow-right"></i>
             {{ $t('gridViewFieldType.insertRight') }}
           </a>
           <InsertFieldContext
@@ -105,11 +109,13 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
           <a
+            class="context__menu-item-link"
             @click=";[$refs.duplicateFieldModal.toggle(), $refs.context.hide()]"
           >
-            <i class="context__menu-icon iconoir-copy"></i>
+            <i class="context__menu-item-icon iconoir-copy"></i>
             {{ $t('gridViewFieldType.duplicate') }}
           </a>
           <DuplicateFieldModal
@@ -130,9 +136,13 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="createFilter($event, view, field)">
-            <i class="context__menu-icon iconoir-filter"></i>
+          <a
+            class="context__menu-item-link"
+            @click="createFilter($event, view, field)"
+          >
+            <i class="context__menu-item-icon iconoir-filter"></i>
             {{ $t('gridViewFieldType.createFilter') }}
           </a>
         </li>
@@ -145,9 +155,13 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="createSort($event, view, field, 'ASC')">
-            <i class="context__menu-icon iconoir-sort-down"></i>
+          <a
+            class="context__menu-item-link"
+            @click="createSort($event, view, field, 'ASC')"
+          >
+            <i class="context__menu-item-icon iconoir-sort-down"></i>
             {{ $t('gridViewFieldType.sortField') }}
             <template v-if="getSortIndicator(field, 0) === 'text'">{{
               getSortIndicator(field, 1)
@@ -175,9 +189,13 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="createSort($event, view, field, 'DESC')">
-            <i class="context__menu-icon iconoir-sort-down"></i>
+          <a
+            class="context__menu-item-link"
+            @click="createSort($event, view, field, 'DESC')"
+          >
+            <i class="context__menu-item-icon iconoir-sort-down"></i>
             {{ $t('gridViewFieldType.sortField') }}
             <template v-if="getSortIndicator(field, 0) === 'text'">{{
               getSortIndicator(field, 2)
@@ -205,9 +223,10 @@
               database.workspace.id
             )
           "
+          class="context__menu-item"
         >
-          <a @click="hide($event, view, field)">
-            <i class="context__menu-icon iconoir-eye-off"></i>
+          <a class="context__menu-item-link" @click="hide($event, view, field)">
+            <i class="context__menu-item-icon iconoir-eye-off"></i>
             {{ $t('gridViewFieldType.hideField') }}
           </a>
         </li>
diff --git a/web-frontend/modules/database/components/view/grid/GridViewRowIdentifierDropdown.vue b/web-frontend/modules/database/components/view/grid/GridViewRowIdentifierDropdown.vue
index 763672ca9..1dd45f751 100644
--- a/web-frontend/modules/database/components/view/grid/GridViewRowIdentifierDropdown.vue
+++ b/web-frontend/modules/database/components/view/grid/GridViewRowIdentifierDropdown.vue
@@ -15,18 +15,20 @@
         <li
           v-for="option in options"
           :key="option"
-          class="select__item select__item-no-options"
+          class="select__item select__item--no-options"
           :class="{ active: option === rowIdentifierTypeSelected }"
         >
           <a class="select__item-link" @click="setRowIdentifierTypes(option)">
             <span class="select__item-name">
-              {{ $t(`gridViewIdentifierOptions.${option}`) }}
+              <span class="select__item-text">{{
+                $t(`gridViewIdentifierOptions.${option}`)
+              }}</span>
             </span>
-            <i
-              v-if="option === rowIdentifierTypeSelected"
-              class="select__item-active-icon iconoir-check-circle"
-            ></i>
           </a>
+          <i
+            v-if="option === rowIdentifierTypeSelected"
+            class="select__item-active-icon iconoir-check"
+          ></i>
         </li>
       </ul>
     </Context>
diff --git a/web-frontend/modules/database/components/view/grid/fields/GridViewRowsAddContext.vue b/web-frontend/modules/database/components/view/grid/fields/GridViewRowsAddContext.vue
index 709834f24..31479cdd3 100644
--- a/web-frontend/modules/database/components/view/grid/fields/GridViewRowsAddContext.vue
+++ b/web-frontend/modules/database/components/view/grid/fields/GridViewRowsAddContext.vue
@@ -4,8 +4,15 @@
       {{ $t('gridViewRowsAddContext.title') }}
     </div>
     <ul class="context__menu">
-      <li v-for="rowAmountChoice in rowAmountChoices" :key="rowAmountChoice">
-        <a @click="$emit('add-rows', rowAmountChoice)">
+      <li
+        v-for="rowAmountChoice in rowAmountChoices"
+        :key="rowAmountChoice"
+        class="context__menu-item"
+      >
+        <a
+          class="context__menu-item-link"
+          @click="$emit('add-rows', rowAmountChoice)"
+        >
           {{ $t('gridViewRowsAddContext.choice', { rowAmountChoice }) }}
         </a>
       </li>
diff --git a/web-frontend/modules/database/components/webhook/WebhookForm.vue b/web-frontend/modules/database/components/webhook/WebhookForm.vue
index 53715844e..993d2f94b 100644
--- a/web-frontend/modules/database/components/webhook/WebhookForm.vue
+++ b/web-frontend/modules/database/components/webhook/WebhookForm.vue
@@ -52,7 +52,7 @@
               {{ $t('webhookForm.inputLabels.requestMethod') }}
             </div>
             <div class="control__elements">
-              <Dropdown v-model="values.request_method">
+              <Dropdown v-model="values.request_method" small>
                 <DropdownItem name="GET" value="GET"></DropdownItem>
                 <DropdownItem name="POST" value="POST"></DropdownItem>
                 <DropdownItem name="PATCH" value="PATCH"></DropdownItem>
@@ -197,6 +197,7 @@
               <Dropdown
                 v-model="exampleWebhookEventType"
                 class="dropdown--floating-left"
+                small
               >
                 <DropdownItem
                   v-for="webhookEvent in webhookEventTypes"
diff --git a/web-frontend/modules/database/locales/en.json b/web-frontend/modules/database/locales/en.json
index 57bc71a55..3b909a296 100644
--- a/web-frontend/modules/database/locales/en.json
+++ b/web-frontend/modules/database/locales/en.json
@@ -1,808 +1,809 @@
 {
-    "webhookModal": {
-        "title": "{name} webhooks",
-        "createWebhook": "Create webhook",
-        "backToList": "Back to list"
-    },
-    "deleteWebhookModal": {
-        "title": "Delete {webhookName}",
-        "deleteButton": "Delete webhook",
-        "body": "Are you sure you want to delete this webhook? You will not be able to restore it later."
-    },
-    "webhookList": {
-        "noWebhooksMessage": "You have not created any webhooks yet. Webhooks can be used in order to inform 3rd party systems when a row in Baserow has been created, updated or deleted."
-    },
-    "testWebhookModal": {
-        "title": "Test webhook",
-        "unreachable": "Server unreachable"
-    },
-    "webhookForm": {
-        "inputLabels": {
-            "name": "Name",
-            "value": "Value",
-            "requestMethod": "Method",
-            "url": "URL",
-            "userFieldNames": "User field names",
-            "events": "Which events should trigger this webhook?",
-            "headers": "Additional headers",
-            "example": "Example payload"
-        },
-        "errors": {
-            "urlField": "Must be a valid url starting with 'https://' or 'http://'.",
-            "invalidHeaders": "One of the headers is invalid."
-        },
-        "checkbox": {
-            "sendUserFieldNames": "Use field name instead of id"
-        },
-        "radio": {
-            "allEvents": "Send me everything",
-            "customEvents": "Let me select individual events"
-        },
-        "triggerButton": "Trigger test webhook",
-        "deactivated": {
-            "title": "Webhook is deactivated",
-            "content": "This webhook has been deactivated because there have been too many consecutive failures. Please check the call log for more details. Click on the button below to activate it again. Don't forgot to save the webhook after activating.",
-            "activate": "Activate"
-        },
-        "deprecatedEventType": {
-            "title": "Deprecated event type",
-            "description": "This webhook doesn't receive information about all changed rows at once. Please convert it to batch-style event type. This changes the JSON body payload to a format that contains multiple rows.",
-            "convert": "Convert"
-        }
-    },
-    "webhook": {
-        "details": "details",
-        "lastCall": "Last call: {lastCallTime}",
-        "noCalls": "No calls made",
-        "callLog": "Call log",
-        "triggerDescription": "Triggers on every event | Triggers on {count} event | Triggers on {count} events"
-    },
-    "createWebhook": {
-        "errorTableWebhookMaxLimitExceededTitle": "Max webhooks exceeded",
-        "errorTableWebhookMaxLimitExceededDescription": "Can't create the webhook because the maximum amount of webhooks per table has been exceeded."
-    },
-    "sidebar": {
-        "viewAPI": "View API Docs",
-        "createTable": "Create table"
-    },
-    "sidebarItem": {
-        "exportTable": "Export table"
-    },
-    "duplicateTableJobType": {
-        "duplicating": "Duplicating",
-        "duplicatedTitle": "Table duplicated"
-    },
-    "apiToken": {
-        "create": "create",
-        "read": "read",
-        "update": "update",
-        "delete": "delete",
-        "tokenPrefix": "Token:",
-        "viewAPIDocs": "View API documentation",
-        "generateNewToken": "Generate new token",
-        "showOrHide": "Show or hide the token",
-        "copyToClipboard": "Copy to clipboard",
-        "showDatabases": "show databases"
-    },
-    "apiTokenSettings": {
-        "title": "Database tokens",
-        "createToken": "Create token",
-        "noTokensMessage": "You have not yet created a database token. You can use database tokens to authenticate with the REST API endpoints where you can create, read, update and delete rows. It is possible to set permissions on table level.",
-        "hasFullPermissions": "Has full permissions, also to all children.",
-        "hasOnlySelectedPermissions": "Has only permissions to the selected children.",
-        "noPermissions": "Doesn't have permissions.",
-        "createNewTitle": "Create new database token",
-        "backToOverview": "Back to overview"
-    },
-    "apiTokenForm": {
-        "nameLabel": "Name",
-        "workspaceLabel": "Workspace"
-    },
-    "apiDocsSelectDatabase": {
-        "needOneDatabase": "You need to have at least one database to view the API documentation."
-    },
-    "apiDocsExample": {
-        "requestSample": "Request sample",
-        "responseSample": "Response sample",
-        "userFieldNames": "User field names"
-    },
-    "apiDocsParameter": {
-        "optional": "optional",
-        "defaultValue": "Default: {value}"
-    },
-    "apiDocsTableGetRow": {
-        "description": "Fetch a single {name} row.",
-        "rowId": "The unique identifier of the row that is requested."
-    },
-    "apiDocsErrors": {
-        "errorCode": "Error code",
-        "name": "Name",
-        "description": "Description",
-        "okDescription": "Request completed successfully.",
-        "badRequestDescription": "The request contains invalid values or the JSON could not be parsed.",
-        "unauthorizedDescription": "When you try to access an endpoint without a valid database token.",
-        "notFoundDescription": "Row or table is not found.",
-        "requestEntityTooLargeDescription": "The request exceeded the maximum allowed payload size.",
-        "internalErrorDescription": "The server encountered an unexpected condition.",
-        "badGatewayDescription": "Baserow is restarting or an unexpected outage is in progress.",
-        "unavailableDescription": "The server could not process your request in time."
-    },
-    "apiDocsTableFields": {
-        "tableTitle": "{name} table",
-        "tableId": "The ID of this table is:",
-        "description": "Each row in the {name} table contains the following fields.",
-        "id": "ID",
-        "name": "Name",
-        "type": "Type",
-        "compatibleFilters": "Compatible filters"
-    },
-    "apiDocsTableListRows": {
-        "description": "To list rows in the *{name}* table a `GET` request has to be made to the *{name}* endpoint. The response is paginated and by default the first page is returned. The correct page can be fetched by providing the `page` and `size` query parameters.",
-        "page": "Defines which page of rows should be returned.",
-        "size": "Defines how many rows should be returned per page.",
-        "userFieldNames": "When any value is provided for the `user_field_names` GET param then field names returned by this endpoint will be the actual names of the fields.\n\n If the `user_field_names` GET param is not provided, then all returned field names will be `field_` followed by the id of the field. For example `field_1` refers to the field with an id of `1`.\n\n Additionally when `user_field_names` is set then the behaviour of the other GET parameters `order_by`, `include` and `exclude` changes. They instead expect comma separated lists of the actual field names instead.",
-        "search": "If provided only rows with data that matches the search query are going to be returned.",
-        "orderBy": "Optionally the rows can be ordered by fields separated by comma. By default or if prepended with a '+' a field is ordered in ascending (A-Z) order, but by prepending the field with a '-' it can be ordered descending (Z-A).\n\n #### With `user_field_names`:\n\n `order_by` should be a comma separated list of the field names to order by. For example if you provide the following GET parameter `order_by=My Field,-My Field 2` the rows will ordered by the field called `My Field` in ascending order. If some fields have the same value, that subset will be ordered by the field called `My Field 2` in descending order.\n\n Ensure fields with names starting with a `+` or `-` are explicitly prepended with another `+` or `-`. E.g `+-Name`.\n\n The name of fields containing commas must be surrounded by quotes: `\"Name ,\"`. If the field names contain quotes, then they must be escaped using the `\\` character. Eg: `Name \\\"`. \n\n#### Without `user_field_names`:\n\n `order_by` should be a comma separated list of `field_` followed by the id of the field to order by. For example if you provide the following GET parameter `order_by=field_1,-field_2` the rows will ordered by `field_1` in ascending order. If some fields have the same value, that subset will be ordered by `field_2` in descending order.",
-        "filters": "Rows can optionally be filtered using the same view filters that are available for the views. This parameter accepts a JSON serialized string containing the filter tree to apply to this view. The filter tree is a nested structure containing the filters that need to be applied. \n\n#### With `user_field_names`:\n\nAn example of a valid filter tree is the following: `{\"filter_type\": \"AND\", \"filters\": [{\"field\": \"Name\", \"type\": \"equal\", \"value\": \"test\"}]}`.\n\n#### Without `user_field_names`:\n\nFor example, if you optionally provide the following GET parameter: `{\"filter_type\": \"AND\", \"filters\": [{\"field\": 1, \"type\": \"equal\", \"value\": \"test\"}]}`\n\nPlease note that if this parameter is provided, all other `filter__{field}__{filter}` will be ignored, as well as the filter_type parameter.",
-        "filter": "Rows can optionally be filtered using the same view filters that are available for the views. Multiple filters may be applied if they follow the same format. The `field` and `filter` variables indicate how and where to apply the filter, respectively.\n\n#### With `user_field_names`:\n\nFor example, if you optionally provide the following GET parameter: `filter__Name__equal=test`, only rows where the value of `Name` equals 'test' will be returned. This method is backwards compatible and will check against `field_id` if it fails on the name.\n\n#### Without `user_field_names`:\n\nFor example, if you optionally provide the following GET parameter: `filter__field_1__equal=test`, only rows where the value of `field_1` equals 'test' will be returned.\n\nPlease note that if the filters parameter is provided, this parameter will be ignored. ",
-        "filterLink": "A list of all filters can be found here.",
-        "filterType": "- `AND`: Indicates that the rows must match all the provided filters.\n- `OR`: Indicates that the rows only have to match one of the filters.\n\n This works only if two or more filters are provided.",
-        "include": "All the fields are included in the response by default. You can select a subset of fields to include by providing the include query parameter.\n\n #### With `user_field_names`:\n\n `include` should be a comma separated list of field names to be included in results. For example if you provide the following GET param: `include=My Field,-My Field 2` then only those fields will be included (unless they are explicitly excluded).\n\n The name of fields containing commas must be surrounded by quotes: `\"Name ,\"`. If the field names contain quotes, then they must be escaped using the `\\` character. Eg: `Name \\\"`.\n\n #### Without `user_field_names`:\n\n `include` should be a comma separated list of `field_` followed by the id of the field to include in the results. For example: If you provide the following GET parameter `include=field_1,field_2` then the fields with id `1` and id `2` then only those fields will be included (unless they are explicitly excluded).",
-        "exclude": "All the fields are included in the response by default. You can select a subset of fields to exclude by providing the exclude query parameter.\n\n #### With `user_field_names`:\n\n `exclude` should be a comma separated list of field names to be excluded from the results. For example if you provide the following GET param: `exclude=My Field,-My Field 2` then those fields will be excluded.\n\n The name of fields containing commas must be surrounded by quotes: `\"Name ,\"`. If the field names contain quotes, then they must be escaped using the `\\` character. Eg: `Name \\\"`.\n\n #### Without `user_field_names`:\n\n `exclude` should be a comma separated list of `field_` followed by the id of the field to exclude from the results. For example: If you provide the following GET parameter `exclude=field_1,field_2` then the fields with id `1` and id `2` will be excluded.",
-        "viewId": "By default non of the filters and sorts outside of the ones defined in the query parameters are applied. You can add the filters and sorts of a view by providing its `id` in the `view_id` GET parameter. For example if you provide the following GET parameter `view_id=1` then the filters and sorts defined in the view with id `1` will be applied. You can find the `view_id` in the context menu of any given view. It is the number in brackets behind the view name. \n\n #### With `filter__{field}__{filter}` \n\n Both the filter provided in the query parameter and the filters defined in the view will be applied.\n\n #### With `order_by` \n\n If `order_by` is provided then the sort defined in the view will be ignored.",
-        "filtersBuilder": "Open filters parameter builder"
-    },
-    "apiDocsIntro": {
-        "intro": "The {name} database provides an easy way to integrate the data with any external system. The API follows REST semantics, uses JSON to encode objects and relies on standard HTTP codes, machine and human readable errors to signal operation outcomes.",
-        "autoDocDescription": "This documentation is generated automatically based on the tables and fields that are in your database. If you make changes to your database, table or fields it could be that the API interface has also changed. Therefore, make sure that you update your API implementation accordingly.",
-        "databaseId": "The ID of this database is:",
-        "jsClient": "JavaScript example API client:",
-        "pythonClient": "Python example API client:"
-    },
-    "apiDocsTableListFields": {
-        "description": "To list fields of the {name} table a `GET` request has to be made to the {name} fields endpoint. It's only possible to list the fields if the database token has read, create or update permissions.",
-        "resultFieldProperties": "Result field properties",
-        "id": "Field primary key. Can be used to generate the database column name by adding `field_` prefix.",
-        "name": "Field name.",
-        "tableId": "Related table id.",
-        "order": "Field order in table. 0 for the first field.",
-        "primary": "Indicates if the field is a primary field. If `true` the field cannot be deleted and the value should represent the whole row.",
-        "type": "Type defined for this field.",
-        "extraProps": "Some extra properties are not described here because they are type specific.",
-        "readOnly": "Indicates whether the field is a read only field. If true, it's not possible to update the cell value."
-    },
-    "apiDocsTableDeleteRow": {
-        "description": "Deletes an existing {name} row.",
-        "rowId": "The unique identifier of the row that needs to be deleted."
-    },
-    "apiDocsTableDeleteRows": {
-        "description": "Deletes existing {name} rows.",
-        "items": "An array of row ids that should be deleted."
-    },
-    "apiDocsTableMoveRow": {
-        "description": "Moves an existing {name} row before another row. If no `before_id` is provided, then the row will be moved to the end of the table.",
-        "rowId": "Moves the row related to the value.",
-        "before": "Moves the row related to the given `row_id` before the row related to the provided value. If not provided, then the row will be moved to the end."
-    },
-    "apiDocsUploadFile": {
-        "description": "Uploads a file to Baserow by uploading the file contents directly. A `file` multipart is expected containing the file contents. The response can then be used to [upload a file to a row]({PUBLIC_BACKEND_URL}/api/redoc/#tag/Database-table-rows/operation/update_database_table_row).",
-        "file": "The `file` multipart containing the file contents."
-    },
-    "apiDocsUploadFileViaURL": {
-        "description": "Uploads a file to Baserow by downloading it from the provided URL. The response can then be used to [upload a file to a row]({PUBLIC_BACKEND_URL}/api/redoc/#tag/Database-table-rows/operation/update_database_table_row).",
-        "url": "The URL you would like Baserow to download and upload on your behalf."
-    },
-    "apiDocsTableUpdateRow": {
-        "description": "Updates an existing {name} row.",
-        "rowId": "The unique identifier of the row that needs to be updated.",
-        "before": "If provided then the newly created row will be positioned before the row with the provided id."
-    },
-    "apiDocsTableUpdateRows": {
-        "description": "Updates existing {name} rows.",
-        "id": "The row id."
-    },
-    "apiDocsTableCreateRow": {
-        "description": "Create a new {name} row.",
-        "before": "If provided then the newly created row will be positioned before the row with the provided id."
-    },
-    "apiDocsTableCreateRows": {
-        "description": "Create new {name} rows.",
-        "before": "If provided then the newly created rows will be positioned before the row with the provided id."
-    },
-    "apiDocsAuth": {
-        "description": "Baserow uses a simple token based authentication. You need to generate at least one database token in your {settingsLink} to use the endpoints described below. It is possible to give create, read, update and delete permissions up until table level per token. You can authenticate to the API by providing your token in the HTTP authorization bearer token header. All API requests must be authenticated and made over HTTPS.",
-        "settingsLink": "settings"
-    },
-    "apiDocsFilters": {
-        "filter": "Filter",
-        "exampleValue": "Example value",
-        "example": "Full example",
-        "field": "field {name}"
-    },
-    "apiDocsFiltersBuilderModal": {
-        "title": "Filters parameter builder",
-        "userFieldNames": "User field names",
-        "json": "JSON",
-        "queryParameter": "Query parameter"
-    },
-    "fieldTextSubForm": {
-        "placeholder": "Default text"
-    },
-    "fieldSingleSelectSubForm": {
-        "optionsLabel": "Options"
-    },
-    "fieldSingleSelectDropdown": {
-        "notFound": "Option not found"
-    },
-    "fieldmultipleCollaboratorsDropdown": {
-        "notFound": "Collaborator not found"
-    },
-    "fieldDateSubForm": {
-        "dateFormatLabel": "Date format",
-        "dateFormatEuropean": "European",
-        "dateFormatUS": "US",
-        "dateFormatISO": "ISO",
-        "includeTimeLabel": "Include time",
-        "showTimezoneLabel": "Show timezone",
-        "forceTimezoneLabel": "Set timezone for all collaborators",
-        "forceTimezoneValue": "Timezone",
-        "addTimezoneOffsetLabel": "Convert values (add {utcOffsetDiff} minutes)",
-        "subTimezoneOffsetLabel": "Convert values (subtract {utcOffsetDiff} minutes)",
-        "timeFormatLabel": "Time format",
-        "24Hour": "24 hour",
-        "12Hour": "12 hour"
-    },
-    "fieldLinkRowSubForm": {
-        "noTable": "You need at least one other table in the same database to link to.",
-        "selectTableLabel": "Select a table to link to",
-        "hasRelatedFieldLabel": "Create related field in linked table"
-    },
-    "fieldSelectOptions": {
-        "add": "Add an option"
-    },
-    "fieldNumberSubForm": {
-        "typeLabel": "Number type",
-        "integer": "Integer",
-        "decimal": "Decimal",
-        "decimalPlacesLabel": "Decimal places",
-        "allowNegative": "Allow negative"
-    },
-    "fieldContext": {
-        "editField": "Edit field",
-        "deleteField": "Delete field",
-        "hideField": "Hide field",
-        "showField": "Show field"
-    },
-    "fieldForm": {
-        "name": "Name",
-        "fieldAlreadyExists": "A field with this name already exists.",
-        "nameNotAllowed": "This field name is not allowed.",
-        "nameTooLong": "This field name is too long."
-    },
-    "fieldSelectThroughFieldSubForm": {
-        "noTable": "You need at least one link to table field to create this field.",
-        "selectThroughFieldLabel": "Select a link to table field"
-    },
-    "fieldRollupSubForm": {
-        "label": "Rollup function",
-        "selectTargetFieldLabel": "Select a field to rollup"
-    },
-    "fieldLookupSubForm": {
-        "selectTargetFieldLabel": "Select a field to lookup"
-    },
-    "fieldFormulaNumberSubForm": {
-        "typeLabel": "Number type",
-        "integer": "Integer",
-        "decimal": "Decimal",
-        "decimalPlacesLabel": "Decimal places",
-        "allowNegative": "Allow negative"
-    },
-    "fieldRatingSubForm": {
-        "maxValue": "Max",
-        "color": "Color",
-        "style": "Style"
-    },
-    "rowCreateModal": {
-        "addField": "add field"
-    },
-    "selectRowContent": {
-        "search": "Search rows"
-    },
-    "rowEditModal": {
-        "addField": "add field",
-        "showHiddenFields": "Show hidden fields",
-        "hideHiddenFields": "Hide hidden fields"
-    },
-    "rowEditFieldMultipleSelect": {
-        "addOption": "Choose an option"
-    },
-    "rowEditFieldMultipleCollaborators": {
-        "addCollaborator": "Choose a collaborator"
-    },
-    "rowEditFieldFile": {
-        "addFile": "Add a file",
-        "sizes": {
-            "0": "Bytes",
-            "1": "KB",
-            "2": "MB",
-            "3": "GB",
-            "4": "TB",
-            "5": "PB"
-        }
-    },
-    "rowEditFieldLinkRow": {
-        "addLink": "Choose a link"
-    },
-    "tableCSVImporter": {
-        "chooseFileLabel": "Choose CSV file",
-        "chooseFileDescription": "You can import an existing CSV by uploading the .CSV file with tabular data. Most spreadsheet applications will allow you to export your spreadsheet as a .CSV file.",
-        "chooseFile": "Choose CSV file",
-        "columnSeparator": "Column separator",
-        "recordSeparator": "record separator",
-        "unitSeparator": "unit separator",
-        "encoding": "Encoding",
-        "firstRowHeader": "First row is header",
-        "limitFileSize": "The maximum file size is {limit}MB.",
-        "limitError": "It is not possible to import more than {limit} rows.",
-        "emptyCSV": "This CSV file is empty."
-    },
-    "importer": {
-        "fieldDefaultName": "Field {count}",
-        "loading": "Loading file",
-        "decoding": "Decoding data",
-        "parsing": "Parsing data",
-        "preparing": "Preparing data",
-        "inProgress": "In progress..."
-    },
-    "tableForm": {
-        "name": "Name"
-    },
-    "tableXMLImporter": {
-        "fileLabel": "Choose XML file",
-        "fileDescription": "You can import an existing XML by uploading the .XML file with tabular data, i.e.:",
-        "chooseButton": "Choose XML file",
-        "processingError": "Error occurred while processing XML: {errors}",
-        "emptyError": "This XML file is empty.",
-        "limitFileSize": "The maximum file size is {limit}MB.",
-        "limitError": "It is not possible to import more than {limit} rows."
-    },
-    "tableJSONImporter": {
-        "fileLabel": "Choose JSON file",
-        "fileDescription": "You can import an existing JSON file by uploading the .json file with tabular data, i.e.:",
-        "chooseButton": "Choose JSON file",
-        "encodingLabel": "Encoding",
-        "processingError": "Error occurred while parsing JSON: {error}",
-        "arrayError": "The JSON file is not an array.",
-        "emptyError": "This JSON file is empty.",
-        "limitFileSize": "The maximum file size is {limit}MB.",
-        "limitError": "It is not possible to import more than {limit} rows."
-    },
-    "tablePasteImporter": {
-        "pasteLabel": "Paste the table data",
-        "pasteDescription": "You can copy the cells from a spreadsheet and paste them below.",
-        "firstRowHeader": "First row is header",
-        "limitError": "It is not possible to import more than {limit} rows."
-    },
-    "importFileModal": {
-        "title": "Create new table",
-        "defaultName": "Table",
-        "changeImporterType": "Change import type",
-        "additionalImportTitle": "Import into {table}",
-        "importLabel": "Would you like to import existing data?",
-        "newTable": "Start with a new table",
-        "addButton": "Add table",
-        "showTable": "show table",
-        "importButton": "Import",
-        "uploading": "Uploading...",
-        "preparing": "Preparing data...",
-        "importError": "Something went wrong during the file import",
-        "openCreatedTable": "Open created table",
-        "showReport": "Show error report",
-        "reportTitleFailure": "Failing rows",
-        "reportTitleSuccess": "Import successful but...",
-        "reportMessage": "The following row indexes couldn't be imported:",
-        "stateRowCreation": "Importing...",
-        "statePreValidation": "Validating data...",
-        "stateCreateTable": "Creating table...",
-        "fieldMappingTitle": "Field mapping",
-        "fieldMappingDescription": "We have automatically mapped the columns of the Baserow fields in your table. You can change them below. Any incompatible cell will remain empty after the import.",
-        "selectImportMessage": "Please select data to import.",
-        "filePreview": "File content preview",
-        "importPreview": "Import preview"
-    },
-    "formulaAdvancedEditContext": {
-        "textAreaFormulaInputPlaceholder": "Click to edit the formula",
-        "fields": "Fields",
-        "functions": "Functions",
-        "operators": "Operators",
-        "fieldType": "A {type} field"
-    },
-    "fieldFormulaInitialSubForm": {
-        "formulaInputPlaceholder": "Click to edit the formula",
-        "refreshFormulaOptions": "Refresh formula options"
-    },
-    "formulaFieldItemDescription": {
-        "syntax": "Syntax",
-        "examples": "Examples"
-    },
-    "viewSearchContext": {
-        "searchInRows": "Search in all rows",
-        "hideNotMatching": "hide not matching rows"
-    },
-    "viewsContext": {
-        "searchView": "Search views",
-        "noViews": "No views found",
-        "collaborative": "Collaborative"
-    },
-    "viewFilterTypeLinkRow": {
-        "unnamed": "unnamed row {value}",
-        "choose": "Choose row"
-    },
-    "viewFieldConditionsForm": {
-        "addCondition": "Add condition"
-    },
-    "viewFilterContext": {
-        "addFilter": "Add filter",
-        "addFilterGroup": "Add filter group",
-        "disableAllFilters": "all disabled",
-        "noFilterTitle": "You have not yet created a filter",
-        "noFilterText": "Filters allow you to show rows that apply to your conditions.",
-        "where": "Where",
-        "and": "And",
-        "or": "Or",
-        "relatedFieldNotFound": "The related field is not found.",
-        "filterTypeNotFound": "The filter type is not compatible.",
-        "noCompatibleFilterTypesErrorTitle": "No compatible filter types",
-        "noCompatibleFilterTypesErrorMessage": "None of your fields have any compatible filter types"
-    },
-    "viewFilterTypeFileTypeDropdown": {
-        "image": "image",
-        "document": "document"
-    },
-    "createViewModal": {
-        "createNew": "Create new {view}",
-        "add": "Add {view}"
-    },
-    "shareViewLink": {
-        "shareView": "Share {viewTypeSharingLinkName}",
-        "shareViewTitle": "Create a private shareable link to the {viewTypeSharingLinkName}",
-        "sharedViewTitle": "This {viewTypeSharingLinkName} is currently shared via a private link",
-        "sharedViewDescription": "People who have the link can see the {viewTypeSharingLinkName}.",
-        "disableLink": "disable shared link",
-        "generateNewUrl": "generate new url",
-        "copyURL": "copy URL",
-        "EnablePassword": "Restrict access with a password",
-        "DisablePassword": "Access is password-protected",
-        "ChangePassword": "Change"
-    },
-    "viewGroupByContext": {
-        "noGroupByTitle": "You have not yet created any groupings",
-        "noGroupByText": "Group rows together by a field.",
-        "groupBy": "Group by",
-        "thenBy": "Then by",
-        "addGroupBy": "choose a field to group by"
-    },
-    "viewGroupBy": {
-        "groupBy": "Group | Group by 1 fields | Group by {count} fields"
-    },
-    "viewSortContext": {
-        "noSortTitle": "You have not yet created a sort",
-        "noSortText": "Sorts allow you to sort rows by a field.",
-        "sortBy": "Sort by",
-        "thenBy": "Then by",
-        "addSort": "choose a field to sort by"
-    },
-    "viewSort": {
-        "sort": "Sort | 1 Sort | {count} Sorts"
-    },
-    "viewDecorator": {
-        "decorator": "Color | 1 Color | {count} Colors"
-    },
-    "viewRotateSlugModal": {
-        "title": "Refresh URL",
-        "refreshWarning": "Are you sure that you want to refresh the URL of {viewName}? After refreshing, a new URL will be generated and it will not be possible to access the {viewTypeSharingLinkName} via the old URL. Everyone that you have shared the URL with, won't be able to access the {viewTypeSharingLinkName}.",
-        "generateNewURL": "Generate new URL"
-    },
-    "shareViewEnablePasswordModal": {
-        "newPasswordTitle": "Enter a password",
-        "newPasswordDescription": "The public link will only be accessible after entering the password. This password will be saved encrypted.",
-        "newPasswordSave": "Set password",
-        "changePasswordTitle": "Change password",
-        "changePasswordDescription": "By changing the password, the previous one will no longer work. This password will be saved encrypted.",
-        "changePasswordSave": "Change password"
-    },
-    "shareViewDisablePasswordModal": {
-        "title": "Disable password protection",
-        "description": "Are you sure you want to disable password protection for this public link? By disabling, the password will be deleted and it will not be possible to recover it",
-        "disable": "Disable"
-    },
-    "publicViewAuthLogin": {
-        "title": "This page is password protected",
-        "description": "Insert the correct password to access the page.",
-        "enter": "Enter",
-        "error": {
-            "incorrectPasswordTitle": "Incorrect password",
-            "incorrectPasswordText": "The provided password is incorrect."
-        }
-    },
-    "viewFieldsContext": {
-        "coverField": "Cover field",
-        "noCover": "No cover",
-        "search": "Search fields",
-        "hideAll": "Hide all",
-        "showAll": "Show all"
-    },
-    "viewFilterTypeBoolean": {
-        "selected": "Selected"
-    },
-    "viewFilter": {
-        "filter": "Filter | 1 Filter | {count} Filters"
-    },
-    "viewContext": {
-        "exportView": "Export view",
-        "duplicateView": "Duplicate view",
-        "renameView": "Rename view",
-        "toPersonal": "To personal",
-        "toCollaborative": "To collaborative",
-        "webhooks": "Webhooks",
-        "importFile": "Import file",
-        "deleteView": "Delete view"
-    },
-    "deleteViewModal": {
-        "title": "Delete {name}",
-        "description": "Are you sure you want to delete the view {name}? The table data will be preserved, but the filters, sortings and field widths related to the view will be deleted.",
-        "delete": "Delete view"
-    },
-    "viewForm": {
-        "name": "Name",
-        "whoCanEdit": "Who can edit"
-    },
-    "viewOwnershipType": {
-        "collaborative": "Collaborative",
-        "personal": "Personal"
-    },
-    "galleryViewHeader": {
-        "customizeCards": "Customize cards"
-    },
-    "gridViewHide": {
-        "hideField": "Hide Fields | 1 hidden field | {count} hidden fields"
-    },
-    "gridViewFieldType": {
-        "insertLeft": "Insert left",
-        "insertRight": "Insert right",
-        "createFilter": "Create filter",
-        "duplicate": "Duplicate field",
-        "sortField": "Sort",
-        "hideField": "Hide field"
-    },
-    "gridViewRow": {
-        "rowNotMatchingFilters": "Row does not match filters",
-        "rowNotMatchingSearch": "Row does not match search",
-        "rowHasMoved": "Row has moved"
-    },
-    "gridView": {
-        "selectRow": "Select row",
-        "insertRowAbove": "Insert row above",
-        "insertRowBelow": "Insert row below",
-        "duplicateRow": "Duplicate row",
-        "copyRowURL": "Copy Row URL",
-        "copiedRowURL": "Copied Row URL",
-        "copiedRowURLMessage": "Row {id}'s URL has been copied to your clipboard.",
-        "enlargeRow": "Enlarge row",
-        "deleteRow": "Delete row",
-        "deleteRows": "Delete rows",
-        "copyCells": "Copy cells",
-        "rowCount": "No rows | 1 row | {count} rows",
-        "hiddenRowsInsertedTitle": "Rows added",
-        "hiddenRowsInsertedMessage": "{number} newly added rows have been added, but are not visible because of the active filters."
-    },
-    "gridViewFieldFile": {
-        "dropHere": "Drop here",
-        "dropFileHere": "Drop files here"
-    },
-    "gridViewFieldLinkRow": {
-        "unnamed": "unnamed row {value}"
-    },
-    "gridViewIdentifierOptions": {
-        "id": "Row identifier",
-        "count": "Count"
-    },
-    "gridViewRowsAddContext": {
-        "title": "Create multiple rows",
-        "choice": "Add {rowAmountChoice} rows"
-    },
-    "formViewMeta": {
-        "includeRowId": "Use {row_id} to include the newly created row id in the URL."
-    },
-    "previewAny": {
-        "externalWarning": "Opening your file via an external service exposes your file to their servers."
-    },
-    "exportTableModal": {
-        "failedTitle": "Export Failed",
-        "failedDescription": "The export failed due to a server error.",
-        "cancelledTitle": "Export Cancelled",
-        "cancelledDescription": "The export was cancelled."
-    },
-    "exporterTypeChoices": {
-        "formatLabel": "To which format would you like to export?"
-    },
-    "exportTableForm": {
-        "viewLabel": "Select the view to export:",
-        "typeError": "No exporter type available please select a different view or entire table."
-    },
-    "exportTableLoadingBar": {
-        "export": "Export",
-        "download": "Download"
-    },
-    "exportTableDropdown": {
-        "exportEntireTable": "Export entire table"
-    },
-    "tableCSVExporter": {
-        "columnSeparatorLabel": "Column separator",
-        "recordSeparator": "record separator",
-        "unitSeparator": "unit separator",
-        "encodingLabel": "Encoding",
-        "firstRowIsHeaderLabel": "First row is header"
-    },
-    "apiDocsDatabase": {
-        "pageTitle": "{name} database API documentation",
-        "back": "Back to dashboard",
-        "openDatabase": "open database"
-    },
-    "apiDocsComponent": {
-        "title": "REST API",
-        "intro": "After you have created your database schema and API key in the {settingsLink} your Baserow database provides his own REST API endpoints to create, read, update and delete rows.",
-        "settings": "settings",
-        "selectApplicationTitle": "For which database do you want to see the documentation?",
-        "signIn": "Sign in to get started",
-        "back": "Back to dashboard"
-    },
-    "viewAggregationType": {
-        "emptyCount": "Empty",
-        "notEmptyCount": "Filled",
-        "emptyPercentage": "Percent empty",
-        "notEmptyPercentage": "Percent filled",
-        "checkedCount": "Checked",
-        "notCheckedCount": "Unchecked",
-        "checkedPercentage": "Percent Checked",
-        "notCheckedPercentage": "Percent Unchecked",
-        "min": "Min",
-        "max": "Max",
-        "earliestDate": "Earliest date",
-        "earliestDateShort": "Earliest",
-        "latestDate": "Latest date",
-        "latestDateShort": "Latest",
-        "uniqueCount": "Unique",
-        "sum": "Sum",
-        "average": "Average",
-        "median": "Median",
-        "stdDev": "Standard deviation",
-        "stdDevShort": "Std dev",
-        "variance": "Variance"
-    },
-    "databaseForm": {
-        "importLabel": "Would you like to import existing data?",
-        "emptyLabel": "Start from scratch",
-        "airtableLabel": "Import from Airtable (beta)"
-    },
-    "importFromAirtable": {
-        "airtableShareLinkTitle": "Share a link to your Base",
-        "airtableShareLinkDescription": "To import your Airtable base, you need to have a shared link to your entire base. In Airtable, click on the share button in the top right corner after opening your base. After that you must choose the \"Access to base\" option. In the share modal you can click on the \"Create a shared link to the whole base\" button and then on “Private read-only link”. Copy the public link and paste it in the input below.",
-        "airtableShareLinkBeta": "Note that this feature is in beta, your tables, fields (except formula, lookup and count) and data will be imported. Your views will not be imported.",
-        "airtableShareLinkPaste": "Paste the link here",
-        "importButtonLabel": "Import from Airtable",
-        "openButtonLabel": "Open imported database",
-        "importError": "Something went wrong",
-        "statePending": "Waiting to start",
-        "stateFailed": "Failed",
-        "stateFinished": "Finished",
-        "stateDownloadingBase": "Downloading base schema",
-        "stateConverting": "Converting to Baserow",
-        "stateDownloadingFiles": "Downloading files",
-        "stateImporting": "Importing",
-        "stateImportingTable": "Importing table {table}",
-        "errorJobAlreadyRunningTitle": "Already running",
-        "errorJobAlreadyRunningDescription": "Another import job is already running. You need to wait for that one to finish before starting another.",
-        "linkError": "The link should look like: https://airtable.com/shrxxxxxxxxxxxxxx"
-    },
-    "chooseSingleSelectField": {
-        "addSelectField": "Add single select field",
-        "warningWhenNothingToChooseOrCreate": "There are no single select fields to choose from and you do not have permissions to make one."
-    },
-    "viewDecoratorContext": {
-        "addDecorator": "Add decorator"
-    },
-    "databaseDashboardSidebarLinks": {
-        "apiDocumentation": "API documentation"
-    },
-    "formViewField": {
-        "required": "required",
-        "descriptionPlaceholder": "Description",
-        "showWhenMatchingConditions": "show when conditions are met",
-        "addCondition": "Add condition",
-        "addConditionGroup": "Add condition group",
-        "showFieldAs": "Show field as"
-    },
-    "duplicateFieldContext": {
-        "duplicate": "Duplicate field",
-        "cloneData": "Copy data",
-        "readOnlyField": "Cell values will be filled automatically."
-    },
-    "snapshotsModal": {
-        "title": "snapshots",
-        "description": "Snapshots are a full copy of your database of the moment when they were created. A duplication of that data will be created when restoring. Snapshots are automatically deleted after one year.",
-        "descriptionLimits": "You can have a maximum of {n} snapshots per workspace. | You can have a maximum of {n} snapshot per workspace. | You can have a maximum of {n} snapshots per workspace.",
-        "createLabel": "Create a new snapshot",
-        "create": "Create snapshot",
-        "snapshotRestoredErrorTitle": "Error occurred",
-        "snapshotRestoredErrorMessage": "The snapshot couldn't be restored. please try again later.",
-        "snapshotDeletedErrorTitle": "Error occurred",
-        "snapshotDeletedErrorMessage": "The snapshot couldn't be deleted. please try again later.",
-        "limitReached": "The limit of maximum snapshots has been reached.",
-        "snapshot": "Snapshot",
-        "importingState": "Creating",
-        "reset": "Create another"
-    },
-    "deleteSnapshotModal": {
-        "title": "Delete snapshot",
-        "content": "Are you sure you want to permanently delete snapshot {name}?",
-        "confirm": "Delete"
-    },
-    "snapshotListItem": {
-        "restore": "restore",
-        "delete": "delete",
-        "created": "created"
-    },
-    "formViewModeType": {
-        "form": "Form",
-        "formDescription": "All fields are visible and vertically stacked."
-    },
-    "formViewHeader": {
-        "mode": "Mode",
-        "preview": "Preview",
-        "fields": "Fields"
-    },
-    "formViewModePreviewForm": {
-        "addCoverImage": "Add a cover image",
-        "addLogo": "Add a logo",
-        "titlePlaceholder": "Title",
-        "descriptionPlaceholder": "Description",
-        "noFields": "This form doesn't have any fields. Click on a field in the left sidebar to add one."
-    },
-    "table": {
-        "adjacentRow": {
-            "toast": {
-                "notFound": {
-                    "next": {
-                        "title": "No more rows",
-                        "message": "There is no next row"
-                    },
-                    "previous": {
-                        "title": "No more rows",
-                        "message": "There is no previous row"
-                    }
-                },
-                "error": {
-                    "title": "Error occurred",
-                    "message": "An error occurred while retrieving the adjacent row"
-                }
-            }
-        },
-        "chooseView": "Choose view"
-    },
-    "fileField": {
-        "errorEmptyFileNameTitle": "Invalid file name",
-        "errorEmptyFileNameMessage": "You can't set an empty name for a file."
-    },
-    "fieldCollaboratorSubForm": {
-        "notifyUserWhenAdded": "Notify user when added"
-    },
-    "collaboratorAddedToRowNotification": {
-        "title": "{sender} assigned you to {fieldName} in row {rowId} in {tableName}"
-    },
-    "rowHistorySidebar": {
-        "name": "History",
-        "empty": "No changes yet. You'll be able to track any changes to this row here.",
-        "you": "You"
+  "webhookModal": {
+    "title": "{name} webhooks",
+    "createWebhook": "Create webhook",
+    "backToList": "Back to list"
+  },
+  "deleteWebhookModal": {
+    "title": "Delete {webhookName}",
+    "deleteButton": "Delete webhook",
+    "body": "Are you sure you want to delete this webhook? You will not be able to restore it later."
+  },
+  "webhookList": {
+    "noWebhooksMessage": "You have not created any webhooks yet. Webhooks can be used in order to inform 3rd party systems when a row in Baserow has been created, updated or deleted."
+  },
+  "testWebhookModal": {
+    "title": "Test webhook",
+    "unreachable": "Server unreachable"
+  },
+  "webhookForm": {
+    "inputLabels": {
+      "name": "Name",
+      "value": "Value",
+      "requestMethod": "Method",
+      "url": "URL",
+      "userFieldNames": "User field names",
+      "events": "Which events should trigger this webhook?",
+      "headers": "Additional headers",
+      "example": "Example payload"
+    },
+    "errors": {
+      "urlField": "Must be a valid url starting with 'https://' or 'http://'.",
+      "invalidHeaders": "One of the headers is invalid."
+    },
+    "checkbox": {
+      "sendUserFieldNames": "Use field name instead of id"
+    },
+    "radio": {
+      "allEvents": "Send me everything",
+      "customEvents": "Let me select individual events"
+    },
+    "triggerButton": "Trigger test webhook",
+    "deactivated": {
+      "title": "Webhook is deactivated",
+      "content": "This webhook has been deactivated because there have been too many consecutive failures. Please check the call log for more details. Click on the button below to activate it again. Don't forgot to save the webhook after activating.",
+      "activate": "Activate"
+    },
+    "deprecatedEventType": {
+      "title": "Deprecated event type",
+      "description": "This webhook doesn't receive information about all changed rows at once. Please convert it to batch-style event type. This changes the JSON body payload to a format that contains multiple rows.",
+      "convert": "Convert"
     }
+  },
+  "webhook": {
+    "details": "details",
+    "lastCall": "Last call: {lastCallTime}",
+    "noCalls": "No calls made",
+    "callLog": "Call log",
+    "triggerDescription": "Triggers on every event | Triggers on {count} event | Triggers on {count} events"
+  },
+  "createWebhook": {
+    "errorTableWebhookMaxLimitExceededTitle": "Max webhooks exceeded",
+    "errorTableWebhookMaxLimitExceededDescription": "Can't create the webhook because the maximum amount of webhooks per table has been exceeded."
+  },
+  "sidebar": {
+    "viewAPI": "View API Docs",
+    "createTable": "Create table"
+  },
+  "sidebarItem": {
+    "exportTable": "Export table",
+    "webhooks": "Webhooks"
+  },
+  "duplicateTableJobType": {
+    "duplicating": "Duplicating",
+    "duplicatedTitle": "Table duplicated"
+  },
+  "apiToken": {
+    "create": "create",
+    "read": "read",
+    "update": "update",
+    "delete": "delete",
+    "tokenPrefix": "Token:",
+    "viewAPIDocs": "View API documentation",
+    "generateNewToken": "Generate new token",
+    "showOrHide": "Show or hide the token",
+    "copyToClipboard": "Copy to clipboard",
+    "showDatabases": "show databases"
+  },
+  "apiTokenSettings": {
+    "title": "Database tokens",
+    "createToken": "Create token",
+    "noTokensMessage": "You have not yet created a database token. You can use database tokens to authenticate with the REST API endpoints where you can create, read, update and delete rows. It is possible to set permissions on table level.",
+    "hasFullPermissions": "Has full permissions, also to all children.",
+    "hasOnlySelectedPermissions": "Has only permissions to the selected children.",
+    "noPermissions": "Doesn't have permissions.",
+    "createNewTitle": "Create new database token",
+    "backToOverview": "Back to overview"
+  },
+  "apiTokenForm": {
+    "nameLabel": "Name",
+    "workspaceLabel": "Workspace"
+  },
+  "apiDocsSelectDatabase": {
+    "needOneDatabase": "You need to have at least one database to view the API documentation."
+  },
+  "apiDocsExample": {
+    "requestSample": "Request sample",
+    "responseSample": "Response sample",
+    "userFieldNames": "User field names"
+  },
+  "apiDocsParameter": {
+    "optional": "optional",
+    "defaultValue": "Default: {value}"
+  },
+  "apiDocsTableGetRow": {
+    "description": "Fetch a single {name} row.",
+    "rowId": "The unique identifier of the row that is requested."
+  },
+  "apiDocsErrors": {
+    "errorCode": "Error code",
+    "name": "Name",
+    "description": "Description",
+    "okDescription": "Request completed successfully.",
+    "badRequestDescription": "The request contains invalid values or the JSON could not be parsed.",
+    "unauthorizedDescription": "When you try to access an endpoint without a valid database token.",
+    "notFoundDescription": "Row or table is not found.",
+    "requestEntityTooLargeDescription": "The request exceeded the maximum allowed payload size.",
+    "internalErrorDescription": "The server encountered an unexpected condition.",
+    "badGatewayDescription": "Baserow is restarting or an unexpected outage is in progress.",
+    "unavailableDescription": "The server could not process your request in time."
+  },
+  "apiDocsTableFields": {
+    "tableTitle": "{name} table",
+    "tableId": "The ID of this table is:",
+    "description": "Each row in the {name} table contains the following fields.",
+    "id": "ID",
+    "name": "Name",
+    "type": "Type",
+    "compatibleFilters": "Compatible filters"
+  },
+  "apiDocsTableListRows": {
+    "description": "To list rows in the *{name}* table a `GET` request has to be made to the *{name}* endpoint. The response is paginated and by default the first page is returned. The correct page can be fetched by providing the `page` and `size` query parameters.",
+    "page": "Defines which page of rows should be returned.",
+    "size": "Defines how many rows should be returned per page.",
+    "userFieldNames": "When any value is provided for the `user_field_names` GET param then field names returned by this endpoint will be the actual names of the fields.\n\n If the `user_field_names` GET param is not provided, then all returned field names will be `field_` followed by the id of the field. For example `field_1` refers to the field with an id of `1`.\n\n Additionally when `user_field_names` is set then the behaviour of the other GET parameters `order_by`, `include` and `exclude` changes. They instead expect comma separated lists of the actual field names instead.",
+    "search": "If provided only rows with data that matches the search query are going to be returned.",
+    "orderBy": "Optionally the rows can be ordered by fields separated by comma. By default or if prepended with a '+' a field is ordered in ascending (A-Z) order, but by prepending the field with a '-' it can be ordered descending (Z-A).\n\n #### With `user_field_names`:\n\n `order_by` should be a comma separated list of the field names to order by. For example if you provide the following GET parameter `order_by=My Field,-My Field 2` the rows will ordered by the field called `My Field` in ascending order. If some fields have the same value, that subset will be ordered by the field called `My Field 2` in descending order.\n\n Ensure fields with names starting with a `+` or `-` are explicitly prepended with another `+` or `-`. E.g `+-Name`.\n\n The name of fields containing commas must be surrounded by quotes: `\"Name ,\"`. If the field names contain quotes, then they must be escaped using the `\\` character. Eg: `Name \\\"`. \n\n#### Without `user_field_names`:\n\n `order_by` should be a comma separated list of `field_` followed by the id of the field to order by. For example if you provide the following GET parameter `order_by=field_1,-field_2` the rows will ordered by `field_1` in ascending order. If some fields have the same value, that subset will be ordered by `field_2` in descending order.",
+    "filters": "Rows can optionally be filtered using the same view filters that are available for the views. This parameter accepts a JSON serialized string containing the filter tree to apply to this view. The filter tree is a nested structure containing the filters that need to be applied. \n\n#### With `user_field_names`:\n\nAn example of a valid filter tree is the following: `{\"filter_type\": \"AND\", \"filters\": [{\"field\": \"Name\", \"type\": \"equal\", \"value\": \"test\"}]}`.\n\n#### Without `user_field_names`:\n\nFor example, if you optionally provide the following GET parameter: `{\"filter_type\": \"AND\", \"filters\": [{\"field\": 1, \"type\": \"equal\", \"value\": \"test\"}]}`\n\nPlease note that if this parameter is provided, all other `filter__{field}__{filter}` will be ignored, as well as the filter_type parameter.",
+    "filter": "Rows can optionally be filtered using the same view filters that are available for the views. Multiple filters may be applied if they follow the same format. The `field` and `filter` variables indicate how and where to apply the filter, respectively.\n\n#### With `user_field_names`:\n\nFor example, if you optionally provide the following GET parameter: `filter__Name__equal=test`, only rows where the value of `Name` equals 'test' will be returned. This method is backwards compatible and will check against `field_id` if it fails on the name.\n\n#### Without `user_field_names`:\n\nFor example, if you optionally provide the following GET parameter: `filter__field_1__equal=test`, only rows where the value of `field_1` equals 'test' will be returned.\n\nPlease note that if the filters parameter is provided, this parameter will be ignored. ",
+    "filterLink": "A list of all filters can be found here.",
+    "filterType": "- `AND`: Indicates that the rows must match all the provided filters.\n- `OR`: Indicates that the rows only have to match one of the filters.\n\n This works only if two or more filters are provided.",
+    "include": "All the fields are included in the response by default. You can select a subset of fields to include by providing the include query parameter.\n\n #### With `user_field_names`:\n\n `include` should be a comma separated list of field names to be included in results. For example if you provide the following GET param: `include=My Field,-My Field 2` then only those fields will be included (unless they are explicitly excluded).\n\n The name of fields containing commas must be surrounded by quotes: `\"Name ,\"`. If the field names contain quotes, then they must be escaped using the `\\` character. Eg: `Name \\\"`.\n\n #### Without `user_field_names`:\n\n `include` should be a comma separated list of `field_` followed by the id of the field to include in the results. For example: If you provide the following GET parameter `include=field_1,field_2` then the fields with id `1` and id `2` then only those fields will be included (unless they are explicitly excluded).",
+    "exclude": "All the fields are included in the response by default. You can select a subset of fields to exclude by providing the exclude query parameter.\n\n #### With `user_field_names`:\n\n `exclude` should be a comma separated list of field names to be excluded from the results. For example if you provide the following GET param: `exclude=My Field,-My Field 2` then those fields will be excluded.\n\n The name of fields containing commas must be surrounded by quotes: `\"Name ,\"`. If the field names contain quotes, then they must be escaped using the `\\` character. Eg: `Name \\\"`.\n\n #### Without `user_field_names`:\n\n `exclude` should be a comma separated list of `field_` followed by the id of the field to exclude from the results. For example: If you provide the following GET parameter `exclude=field_1,field_2` then the fields with id `1` and id `2` will be excluded.",
+    "viewId": "By default non of the filters and sorts outside of the ones defined in the query parameters are applied. You can add the filters and sorts of a view by providing its `id` in the `view_id` GET parameter. For example if you provide the following GET parameter `view_id=1` then the filters and sorts defined in the view with id `1` will be applied. You can find the `view_id` in the context menu of any given view. It is the number in brackets behind the view name. \n\n #### With `filter__{field}__{filter}` \n\n Both the filter provided in the query parameter and the filters defined in the view will be applied.\n\n #### With `order_by` \n\n If `order_by` is provided then the sort defined in the view will be ignored.",
+    "filtersBuilder": "Open filters parameter builder"
+  },
+  "apiDocsIntro": {
+    "intro": "The {name} database provides an easy way to integrate the data with any external system. The API follows REST semantics, uses JSON to encode objects and relies on standard HTTP codes, machine and human readable errors to signal operation outcomes.",
+    "autoDocDescription": "This documentation is generated automatically based on the tables and fields that are in your database. If you make changes to your database, table or fields it could be that the API interface has also changed. Therefore, make sure that you update your API implementation accordingly.",
+    "databaseId": "The ID of this database is:",
+    "jsClient": "JavaScript example API client:",
+    "pythonClient": "Python example API client:"
+  },
+  "apiDocsTableListFields": {
+    "description": "To list fields of the {name} table a `GET` request has to be made to the {name} fields endpoint. It's only possible to list the fields if the database token has read, create or update permissions.",
+    "resultFieldProperties": "Result field properties",
+    "id": "Field primary key. Can be used to generate the database column name by adding `field_` prefix.",
+    "name": "Field name.",
+    "tableId": "Related table id.",
+    "order": "Field order in table. 0 for the first field.",
+    "primary": "Indicates if the field is a primary field. If `true` the field cannot be deleted and the value should represent the whole row.",
+    "type": "Type defined for this field.",
+    "extraProps": "Some extra properties are not described here because they are type specific.",
+    "readOnly": "Indicates whether the field is a read only field. If true, it's not possible to update the cell value."
+  },
+  "apiDocsTableDeleteRow": {
+    "description": "Deletes an existing {name} row.",
+    "rowId": "The unique identifier of the row that needs to be deleted."
+  },
+  "apiDocsTableDeleteRows": {
+    "description": "Deletes existing {name} rows.",
+    "items": "An array of row ids that should be deleted."
+  },
+  "apiDocsTableMoveRow": {
+    "description": "Moves an existing {name} row before another row. If no `before_id` is provided, then the row will be moved to the end of the table.",
+    "rowId": "Moves the row related to the value.",
+    "before": "Moves the row related to the given `row_id` before the row related to the provided value. If not provided, then the row will be moved to the end."
+  },
+  "apiDocsUploadFile": {
+    "description": "Uploads a file to Baserow by uploading the file contents directly. A `file` multipart is expected containing the file contents. The response can then be used to [upload a file to a row]({PUBLIC_BACKEND_URL}/api/redoc/#tag/Database-table-rows/operation/update_database_table_row).",
+    "file": "The `file` multipart containing the file contents."
+  },
+  "apiDocsUploadFileViaURL": {
+    "description": "Uploads a file to Baserow by downloading it from the provided URL. The response can then be used to [upload a file to a row]({PUBLIC_BACKEND_URL}/api/redoc/#tag/Database-table-rows/operation/update_database_table_row).",
+    "url": "The URL you would like Baserow to download and upload on your behalf."
+  },
+  "apiDocsTableUpdateRow": {
+    "description": "Updates an existing {name} row.",
+    "rowId": "The unique identifier of the row that needs to be updated.",
+    "before": "If provided then the newly created row will be positioned before the row with the provided id."
+  },
+  "apiDocsTableUpdateRows": {
+    "description": "Updates existing {name} rows.",
+    "id": "The row id."
+  },
+  "apiDocsTableCreateRow": {
+    "description": "Create a new {name} row.",
+    "before": "If provided then the newly created row will be positioned before the row with the provided id."
+  },
+  "apiDocsTableCreateRows": {
+    "description": "Create new {name} rows.",
+    "before": "If provided then the newly created rows will be positioned before the row with the provided id."
+  },
+  "apiDocsAuth": {
+    "description": "Baserow uses a simple token based authentication. You need to generate at least one database token in your {settingsLink} to use the endpoints described below. It is possible to give create, read, update and delete permissions up until table level per token. You can authenticate to the API by providing your token in the HTTP authorization bearer token header. All API requests must be authenticated and made over HTTPS.",
+    "settingsLink": "settings"
+  },
+  "apiDocsFilters": {
+    "filter": "Filter",
+    "exampleValue": "Example value",
+    "example": "Full example",
+    "field": "field {name}"
+  },
+  "apiDocsFiltersBuilderModal": {
+    "title": "Filters parameter builder",
+    "userFieldNames": "User field names",
+    "json": "JSON",
+    "queryParameter": "Query parameter"
+  },
+  "fieldTextSubForm": {
+    "placeholder": "Default text"
+  },
+  "fieldSingleSelectSubForm": {
+    "optionsLabel": "Options"
+  },
+  "fieldSingleSelectDropdown": {
+    "notFound": "Option not found"
+  },
+  "fieldmultipleCollaboratorsDropdown": {
+    "notFound": "Collaborator not found"
+  },
+  "fieldDateSubForm": {
+    "dateFormatLabel": "Date format",
+    "dateFormatEuropean": "European",
+    "dateFormatUS": "US",
+    "dateFormatISO": "ISO",
+    "includeTimeLabel": "Include time",
+    "showTimezoneLabel": "Show timezone",
+    "forceTimezoneLabel": "Set timezone for all collaborators",
+    "forceTimezoneValue": "Timezone",
+    "addTimezoneOffsetLabel": "Convert values (add {utcOffsetDiff} minutes)",
+    "subTimezoneOffsetLabel": "Convert values (subtract {utcOffsetDiff} minutes)",
+    "timeFormatLabel": "Time format",
+    "24Hour": "24 hour",
+    "12Hour": "12 hour"
+  },
+  "fieldLinkRowSubForm": {
+    "noTable": "You need at least one other table in the same database to link to.",
+    "selectTableLabel": "Select a table to link to",
+    "hasRelatedFieldLabel": "Create related field in linked table"
+  },
+  "fieldSelectOptions": {
+    "add": "Add an option"
+  },
+  "fieldNumberSubForm": {
+    "typeLabel": "Number type",
+    "integer": "Integer",
+    "decimal": "Decimal",
+    "decimalPlacesLabel": "Decimal places",
+    "allowNegative": "Allow negative"
+  },
+  "fieldContext": {
+    "editField": "Edit field",
+    "deleteField": "Delete field",
+    "hideField": "Hide field",
+    "showField": "Show field"
+  },
+  "fieldForm": {
+    "name": "Name",
+    "fieldAlreadyExists": "A field with this name already exists.",
+    "nameNotAllowed": "This field name is not allowed.",
+    "nameTooLong": "This field name is too long."
+  },
+  "fieldSelectThroughFieldSubForm": {
+    "noTable": "You need at least one link to table field to create this field.",
+    "selectThroughFieldLabel": "Select a link to table field"
+  },
+  "fieldRollupSubForm": {
+    "label": "Rollup function",
+    "selectTargetFieldLabel": "Select a field to rollup"
+  },
+  "fieldLookupSubForm": {
+    "selectTargetFieldLabel": "Select a field to lookup"
+  },
+  "fieldFormulaNumberSubForm": {
+    "typeLabel": "Number type",
+    "integer": "Integer",
+    "decimal": "Decimal",
+    "decimalPlacesLabel": "Decimal places",
+    "allowNegative": "Allow negative"
+  },
+  "fieldRatingSubForm": {
+    "maxValue": "Max",
+    "color": "Color",
+    "style": "Style"
+  },
+  "rowCreateModal": {
+    "addField": "add field"
+  },
+  "selectRowContent": {
+    "search": "Search rows"
+  },
+  "rowEditModal": {
+    "addField": "add field",
+    "showHiddenFields": "Show hidden fields",
+    "hideHiddenFields": "Hide hidden fields"
+  },
+  "rowEditFieldMultipleSelect": {
+    "addOption": "Choose an option"
+  },
+  "rowEditFieldMultipleCollaborators": {
+    "addCollaborator": "Choose a collaborator"
+  },
+  "rowEditFieldFile": {
+    "addFile": "Add a file",
+    "sizes": {
+      "0": "Bytes",
+      "1": "KB",
+      "2": "MB",
+      "3": "GB",
+      "4": "TB",
+      "5": "PB"
+    }
+  },
+  "rowEditFieldLinkRow": {
+    "addLink": "Choose a link"
+  },
+  "tableCSVImporter": {
+    "chooseFileLabel": "Choose CSV file",
+    "chooseFileDescription": "You can import an existing CSV by uploading the .CSV file with tabular data. Most spreadsheet applications will allow you to export your spreadsheet as a .CSV file.",
+    "chooseFile": "Choose CSV file",
+    "columnSeparator": "Column separator",
+    "recordSeparator": "record separator",
+    "unitSeparator": "unit separator",
+    "encoding": "Encoding",
+    "firstRowHeader": "First row is header",
+    "limitFileSize": "The maximum file size is {limit}MB.",
+    "limitError": "It is not possible to import more than {limit} rows.",
+    "emptyCSV": "This CSV file is empty."
+  },
+  "importer": {
+    "fieldDefaultName": "Field {count}",
+    "loading": "Loading file",
+    "decoding": "Decoding data",
+    "parsing": "Parsing data",
+    "preparing": "Preparing data",
+    "inProgress": "In progress..."
+  },
+  "tableForm": {
+    "name": "Name"
+  },
+  "tableXMLImporter": {
+    "fileLabel": "Choose XML file",
+    "fileDescription": "You can import an existing XML by uploading the .XML file with tabular data, i.e.:",
+    "chooseButton": "Choose XML file",
+    "processingError": "Error occurred while processing XML: {errors}",
+    "emptyError": "This XML file is empty.",
+    "limitFileSize": "The maximum file size is {limit}MB.",
+    "limitError": "It is not possible to import more than {limit} rows."
+  },
+  "tableJSONImporter": {
+    "fileLabel": "Choose JSON file",
+    "fileDescription": "You can import an existing JSON file by uploading the .json file with tabular data, i.e.:",
+    "chooseButton": "Choose JSON file",
+    "encodingLabel": "Encoding",
+    "processingError": "Error occurred while parsing JSON: {error}",
+    "arrayError": "The JSON file is not an array.",
+    "emptyError": "This JSON file is empty.",
+    "limitFileSize": "The maximum file size is {limit}MB.",
+    "limitError": "It is not possible to import more than {limit} rows."
+  },
+  "tablePasteImporter": {
+    "pasteLabel": "Paste the table data",
+    "pasteDescription": "You can copy the cells from a spreadsheet and paste them below.",
+    "firstRowHeader": "First row is header",
+    "limitError": "It is not possible to import more than {limit} rows."
+  },
+  "importFileModal": {
+    "title": "Create new table",
+    "defaultName": "Table",
+    "changeImporterType": "Change import type",
+    "additionalImportTitle": "Import into {table}",
+    "importLabel": "Would you like to import existing data?",
+    "newTable": "Start with a new table",
+    "addButton": "Add table",
+    "showTable": "show table",
+    "importButton": "Import",
+    "uploading": "Uploading...",
+    "preparing": "Preparing data...",
+    "importError": "Something went wrong during the file import",
+    "openCreatedTable": "Open created table",
+    "showReport": "Show error report",
+    "reportTitleFailure": "Failing rows",
+    "reportTitleSuccess": "Import successful but...",
+    "reportMessage": "The following row indexes couldn't be imported:",
+    "stateRowCreation": "Importing...",
+    "statePreValidation": "Validating data...",
+    "stateCreateTable": "Creating table...",
+    "fieldMappingTitle": "Field mapping",
+    "fieldMappingDescription": "We have automatically mapped the columns of the Baserow fields in your table. You can change them below. Any incompatible cell will remain empty after the import.",
+    "selectImportMessage": "Please select data to import.",
+    "filePreview": "File content preview",
+    "importPreview": "Import preview"
+  },
+  "formulaAdvancedEditContext": {
+    "textAreaFormulaInputPlaceholder": "Click to edit the formula",
+    "fields": "Fields",
+    "functions": "Functions",
+    "operators": "Operators",
+    "fieldType": "A {type} field"
+  },
+  "fieldFormulaInitialSubForm": {
+    "formulaInputPlaceholder": "Click to edit the formula",
+    "refreshFormulaOptions": "Refresh formula options"
+  },
+  "formulaFieldItemDescription": {
+    "syntax": "Syntax",
+    "examples": "Examples"
+  },
+  "viewSearchContext": {
+    "searchInRows": "Search in all rows",
+    "hideNotMatching": "hide not matching rows"
+  },
+  "viewsContext": {
+    "searchView": "Search views",
+    "noViews": "No views found",
+    "collaborative": "Collaborative"
+  },
+  "viewFilterTypeLinkRow": {
+    "unnamed": "unnamed row {value}",
+    "choose": "Choose row"
+  },
+  "viewFieldConditionsForm": {
+    "addCondition": "Add condition"
+  },
+  "viewFilterContext": {
+    "addFilter": "Add filter",
+    "addFilterGroup": "Add filter group",
+    "disableAllFilters": "all disabled",
+    "noFilterTitle": "You have not yet created a filter",
+    "noFilterText": "Filters allow you to show rows that apply to your conditions.",
+    "where": "Where",
+    "and": "And",
+    "or": "Or",
+    "relatedFieldNotFound": "The related field is not found.",
+    "filterTypeNotFound": "The filter type is not compatible.",
+    "noCompatibleFilterTypesErrorTitle": "No compatible filter types",
+    "noCompatibleFilterTypesErrorMessage": "None of your fields have any compatible filter types"
+  },
+  "viewFilterTypeFileTypeDropdown": {
+    "image": "image",
+    "document": "document"
+  },
+  "createViewModal": {
+    "createNew": "Create new {view}",
+    "add": "Add {view}"
+  },
+  "shareViewLink": {
+    "shareView": "Share {viewTypeSharingLinkName}",
+    "shareViewTitle": "Create a private shareable link to the {viewTypeSharingLinkName}",
+    "sharedViewTitle": "This {viewTypeSharingLinkName} is currently shared via a private link",
+    "sharedViewDescription": "People who have the link can see the {viewTypeSharingLinkName}.",
+    "disableLink": "disable shared link",
+    "generateNewUrl": "generate new url",
+    "copyURL": "copy URL",
+    "EnablePassword": "Restrict access with a password",
+    "DisablePassword": "Access is password-protected",
+    "ChangePassword": "Change"
+  },
+  "viewGroupByContext": {
+    "noGroupByTitle": "You have not yet created any groupings",
+    "noGroupByText": "Group rows together by a field.",
+    "groupBy": "Group by",
+    "thenBy": "Then by",
+    "addGroupBy": "choose a field to group by"
+  },
+  "viewGroupBy": {
+    "groupBy": "Group | Group by 1 fields | Group by {count} fields"
+  },
+  "viewSortContext": {
+    "noSortTitle": "You have not yet created a sort",
+    "noSortText": "Sorts allow you to sort rows by a field.",
+    "sortBy": "Sort by",
+    "thenBy": "Then by",
+    "addSort": "choose a field to sort by"
+  },
+  "viewSort": {
+    "sort": "Sort | 1 Sort | {count} Sorts"
+  },
+  "viewDecorator": {
+    "decorator": "Color | 1 Color | {count} Colors"
+  },
+  "viewRotateSlugModal": {
+    "title": "Refresh URL",
+    "refreshWarning": "Are you sure that you want to refresh the URL of {viewName}? After refreshing, a new URL will be generated and it will not be possible to access the {viewTypeSharingLinkName} via the old URL. Everyone that you have shared the URL with, won't be able to access the {viewTypeSharingLinkName}.",
+    "generateNewURL": "Generate new URL"
+  },
+  "shareViewEnablePasswordModal": {
+    "newPasswordTitle": "Enter a password",
+    "newPasswordDescription": "The public link will only be accessible after entering the password. This password will be saved encrypted.",
+    "newPasswordSave": "Set password",
+    "changePasswordTitle": "Change password",
+    "changePasswordDescription": "By changing the password, the previous one will no longer work. This password will be saved encrypted.",
+    "changePasswordSave": "Change password"
+  },
+  "shareViewDisablePasswordModal": {
+    "title": "Disable password protection",
+    "description": "Are you sure you want to disable password protection for this public link? By disabling, the password will be deleted and it will not be possible to recover it",
+    "disable": "Disable"
+  },
+  "publicViewAuthLogin": {
+    "title": "This page is password protected",
+    "description": "Insert the correct password to access the page.",
+    "enter": "Enter",
+    "error": {
+      "incorrectPasswordTitle": "Incorrect password",
+      "incorrectPasswordText": "The provided password is incorrect."
+    }
+  },
+  "viewFieldsContext": {
+    "coverField": "Cover field",
+    "noCover": "No cover",
+    "search": "Search fields",
+    "hideAll": "Hide all",
+    "showAll": "Show all"
+  },
+  "viewFilterTypeBoolean": {
+    "selected": "Selected"
+  },
+  "viewFilter": {
+    "filter": "Filter | 1 Filter | {count} Filters"
+  },
+  "viewContext": {
+    "exportView": "Export view",
+    "duplicateView": "Duplicate view",
+    "renameView": "Rename view",
+    "toPersonal": "To personal",
+    "toCollaborative": "To collaborative",
+    "webhooks": "Webhooks",
+    "importFile": "Import file",
+    "deleteView": "Delete view"
+  },
+  "deleteViewModal": {
+    "title": "Delete {name}",
+    "description": "Are you sure you want to delete the view {name}? The table data will be preserved, but the filters, sortings and field widths related to the view will be deleted.",
+    "delete": "Delete view"
+  },
+  "viewForm": {
+    "name": "Name",
+    "whoCanEdit": "Who can edit"
+  },
+  "viewOwnershipType": {
+    "collaborative": "Collaborative",
+    "personal": "Personal"
+  },
+  "galleryViewHeader": {
+    "customizeCards": "Customize cards"
+  },
+  "gridViewHide": {
+    "hideField": "Hide Fields | 1 hidden field | {count} hidden fields"
+  },
+  "gridViewFieldType": {
+    "insertLeft": "Insert left",
+    "insertRight": "Insert right",
+    "createFilter": "Create filter",
+    "duplicate": "Duplicate field",
+    "sortField": "Sort",
+    "hideField": "Hide field"
+  },
+  "gridViewRow": {
+    "rowNotMatchingFilters": "Row does not match filters",
+    "rowNotMatchingSearch": "Row does not match search",
+    "rowHasMoved": "Row has moved"
+  },
+  "gridView": {
+    "selectRow": "Select row",
+    "insertRowAbove": "Insert row above",
+    "insertRowBelow": "Insert row below",
+    "duplicateRow": "Duplicate row",
+    "copyRowURL": "Copy Row URL",
+    "copiedRowURL": "Copied Row URL",
+    "copiedRowURLMessage": "Row {id}'s URL has been copied to your clipboard.",
+    "enlargeRow": "Enlarge row",
+    "deleteRow": "Delete row",
+    "deleteRows": "Delete rows",
+    "copyCells": "Copy cells",
+    "rowCount": "No rows | 1 row | {count} rows",
+    "hiddenRowsInsertedTitle": "Rows added",
+    "hiddenRowsInsertedMessage": "{number} newly added rows have been added, but are not visible because of the active filters."
+  },
+  "gridViewFieldFile": {
+    "dropHere": "Drop here",
+    "dropFileHere": "Drop files here"
+  },
+  "gridViewFieldLinkRow": {
+    "unnamed": "unnamed row {value}"
+  },
+  "gridViewIdentifierOptions": {
+    "id": "Row identifier",
+    "count": "Count"
+  },
+  "gridViewRowsAddContext": {
+    "title": "Create multiple rows",
+    "choice": "Add {rowAmountChoice} rows"
+  },
+  "formViewMeta": {
+    "includeRowId": "Use {row_id} to include the newly created row id in the URL."
+  },
+  "previewAny": {
+    "externalWarning": "Opening your file via an external service exposes your file to their servers."
+  },
+  "exportTableModal": {
+    "failedTitle": "Export Failed",
+    "failedDescription": "The export failed due to a server error.",
+    "cancelledTitle": "Export Cancelled",
+    "cancelledDescription": "The export was cancelled."
+  },
+  "exporterTypeChoices": {
+    "formatLabel": "To which format would you like to export?"
+  },
+  "exportTableForm": {
+    "viewLabel": "Select the view to export:",
+    "typeError": "No exporter type available please select a different view or entire table."
+  },
+  "exportTableLoadingBar": {
+    "export": "Export",
+    "download": "Download"
+  },
+  "exportTableDropdown": {
+    "exportEntireTable": "Export entire table"
+  },
+  "tableCSVExporter": {
+    "columnSeparatorLabel": "Column separator",
+    "recordSeparator": "record separator",
+    "unitSeparator": "unit separator",
+    "encodingLabel": "Encoding",
+    "firstRowIsHeaderLabel": "First row is header"
+  },
+  "apiDocsDatabase": {
+    "pageTitle": "{name} database API documentation",
+    "back": "Back to dashboard",
+    "openDatabase": "open database"
+  },
+  "apiDocsComponent": {
+    "title": "REST API",
+    "intro": "After you have created your database schema and API key in the {settingsLink} your Baserow database provides his own REST API endpoints to create, read, update and delete rows.",
+    "settings": "settings",
+    "selectApplicationTitle": "For which database do you want to see the documentation?",
+    "signIn": "Sign in to get started",
+    "back": "Back to dashboard"
+  },
+  "viewAggregationType": {
+    "emptyCount": "Empty",
+    "notEmptyCount": "Filled",
+    "emptyPercentage": "Percent empty",
+    "notEmptyPercentage": "Percent filled",
+    "checkedCount": "Checked",
+    "notCheckedCount": "Unchecked",
+    "checkedPercentage": "Percent Checked",
+    "notCheckedPercentage": "Percent Unchecked",
+    "min": "Min",
+    "max": "Max",
+    "earliestDate": "Earliest date",
+    "earliestDateShort": "Earliest",
+    "latestDate": "Latest date",
+    "latestDateShort": "Latest",
+    "uniqueCount": "Unique",
+    "sum": "Sum",
+    "average": "Average",
+    "median": "Median",
+    "stdDev": "Standard deviation",
+    "stdDevShort": "Std dev",
+    "variance": "Variance"
+  },
+  "databaseForm": {
+    "importLabel": "Would you like to import existing data?",
+    "emptyLabel": "Start from scratch",
+    "airtableLabel": "Import from Airtable (beta)"
+  },
+  "importFromAirtable": {
+    "airtableShareLinkTitle": "Share a link to your Base",
+    "airtableShareLinkDescription": "To import your Airtable base, you need to have a shared link to your entire base. In Airtable, click on the share button in the top right corner after opening your base. After that you must choose the \"Access to base\" option. In the share modal you can click on the \"Create a shared link to the whole base\" button and then on “Private read-only link”. Copy the public link and paste it in the input below.",
+    "airtableShareLinkBeta": "Note that this feature is in beta, your tables, fields (except formula, lookup and count) and data will be imported. Your views will not be imported.",
+    "airtableShareLinkPaste": "Paste the link here",
+    "importButtonLabel": "Import from Airtable",
+    "openButtonLabel": "Open imported database",
+    "importError": "Something went wrong",
+    "statePending": "Waiting to start",
+    "stateFailed": "Failed",
+    "stateFinished": "Finished",
+    "stateDownloadingBase": "Downloading base schema",
+    "stateConverting": "Converting to Baserow",
+    "stateDownloadingFiles": "Downloading files",
+    "stateImporting": "Importing",
+    "stateImportingTable": "Importing table {table}",
+    "errorJobAlreadyRunningTitle": "Already running",
+    "errorJobAlreadyRunningDescription": "Another import job is already running. You need to wait for that one to finish before starting another.",
+    "linkError": "The link should look like: https://airtable.com/shrxxxxxxxxxxxxxx"
+  },
+  "chooseSingleSelectField": {
+    "addSelectField": "Add single select field",
+    "warningWhenNothingToChooseOrCreate": "There are no single select fields to choose from and you do not have permissions to make one."
+  },
+  "viewDecoratorContext": {
+    "addDecorator": "Add decorator"
+  },
+  "databaseDashboardSidebarLinks": {
+    "apiDocumentation": "API documentation"
+  },
+  "formViewField": {
+    "required": "required",
+    "descriptionPlaceholder": "Description",
+    "showWhenMatchingConditions": "show when conditions are met",
+    "addCondition": "Add condition",
+    "addConditionGroup": "Add condition group",
+    "showFieldAs": "Show field as"
+  },
+  "duplicateFieldContext": {
+    "duplicate": "Duplicate field",
+    "cloneData": "Copy data",
+    "readOnlyField": "Cell values will be filled automatically."
+  },
+  "snapshotsModal": {
+    "title": "snapshots",
+    "description": "Snapshots are a full copy of your database of the moment when they were created. A duplication of that data will be created when restoring. Snapshots are automatically deleted after one year.",
+    "descriptionLimits": "You can have a maximum of {n} snapshots per workspace. | You can have a maximum of {n} snapshot per workspace. | You can have a maximum of {n} snapshots per workspace.",
+    "createLabel": "Create a new snapshot",
+    "create": "Create snapshot",
+    "snapshotRestoredErrorTitle": "Error occurred",
+    "snapshotRestoredErrorMessage": "The snapshot couldn't be restored. please try again later.",
+    "snapshotDeletedErrorTitle": "Error occurred",
+    "snapshotDeletedErrorMessage": "The snapshot couldn't be deleted. please try again later.",
+    "limitReached": "The limit of maximum snapshots has been reached.",
+    "snapshot": "Snapshot",
+    "importingState": "Creating",
+    "reset": "Create another"
+  },
+  "deleteSnapshotModal": {
+    "title": "Delete snapshot",
+    "content": "Are you sure you want to permanently delete snapshot {name}?",
+    "confirm": "Delete"
+  },
+  "snapshotListItem": {
+    "restore": "restore",
+    "delete": "delete",
+    "created": "created"
+  },
+  "formViewModeType": {
+    "form": "Form",
+    "formDescription": "All fields are visible and vertically stacked."
+  },
+  "formViewHeader": {
+    "mode": "Mode",
+    "preview": "Preview",
+    "fields": "Fields"
+  },
+  "formViewModePreviewForm": {
+    "addCoverImage": "Add a cover image",
+    "addLogo": "Add a logo",
+    "titlePlaceholder": "Title",
+    "descriptionPlaceholder": "Description",
+    "noFields": "This form doesn't have any fields. Click on a field in the left sidebar to add one."
+  },
+  "table": {
+    "adjacentRow": {
+      "toast": {
+        "notFound": {
+          "next": {
+            "title": "No more rows",
+            "message": "There is no next row"
+          },
+          "previous": {
+            "title": "No more rows",
+            "message": "There is no previous row"
+          }
+        },
+        "error": {
+          "title": "Error occurred",
+          "message": "An error occurred while retrieving the adjacent row"
+        }
+      }
+    },
+    "chooseView": "Choose view"
+  },
+  "fileField": {
+    "errorEmptyFileNameTitle": "Invalid file name",
+    "errorEmptyFileNameMessage": "You can't set an empty name for a file."
+  },
+  "fieldCollaboratorSubForm": {
+    "notifyUserWhenAdded": "Notify user when added"
+  },
+  "collaboratorAddedToRowNotification": {
+    "title": "{sender} assigned you to {fieldName} in row {rowId} in {tableName}"
+  },
+  "rowHistorySidebar": {
+    "name": "History",
+    "empty": "No changes yet. You'll be able to track any changes to this row here.",
+    "you": "You"
+  }
 }
diff --git a/web-frontend/modules/integrations/components/services/LocalBaserowTableServiceSortForm.vue b/web-frontend/modules/integrations/components/services/LocalBaserowTableServiceSortForm.vue
index e50d6c686..2d779fca4 100644
--- a/web-frontend/modules/integrations/components/services/LocalBaserowTableServiceSortForm.vue
+++ b/web-frontend/modules/integrations/components/services/LocalBaserowTableServiceSortForm.vue
@@ -36,7 +36,8 @@
             :value="sort.field"
             :disabled="disableSort"
             :fixed-items="true"
-            class="dropdown--floating dropdown--tiny"
+            class="dropdown--floating"
+            small
             @input="updateSort(sort, { field: $event })"
           >
             <DropdownItem
diff --git a/web-frontend/test/unit/core/components/__snapshots__/dropdown.spec.js.snap b/web-frontend/test/unit/core/components/__snapshots__/dropdown.spec.js.snap
index fe3377ec6..2643ba327 100644
--- a/web-frontend/test/unit/core/components/__snapshots__/dropdown.spec.js.snap
+++ b/web-frontend/test/unit/core/components/__snapshots__/dropdown.spec.js.snap
@@ -55,7 +55,7 @@ exports[`Dropdown component Test slots 1`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -75,9 +75,12 @@ exports[`Dropdown component With items 1`] = `
   <a
     class="dropdown__selected"
   >
-    
-        action.makeChoice
-       
+    <span
+      class="dropdown__selected-placeholder"
+    >
+      action.makeChoice
+    </span>
+     
     <i
       class="dropdown__toggle-icon iconoir-nav-arrow-down"
     />
@@ -130,7 +133,7 @@ exports[`Dropdown component With items 1`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -212,7 +215,7 @@ exports[`Dropdown component With items 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -241,7 +244,7 @@ exports[`Dropdown component With items 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -270,7 +273,7 @@ exports[`Dropdown component With items 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -301,7 +304,7 @@ exports[`Dropdown component With items 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -336,7 +339,7 @@ exports[`Dropdown component With items 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -402,7 +405,7 @@ exports[`Dropdown component With items 3`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -431,7 +434,7 @@ exports[`Dropdown component With items 3`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -451,9 +454,12 @@ exports[`Dropdown component basics 1`] = `
   <a
     class="dropdown__selected"
   >
-    
-        action.makeChoice
-       
+    <span
+      class="dropdown__selected-placeholder"
+    >
+      action.makeChoice
+    </span>
+     
     <i
       class="dropdown__toggle-icon iconoir-nav-arrow-down"
     />
@@ -497,9 +503,12 @@ exports[`Dropdown component basics 2`] = `
   <a
     class="dropdown__selected"
   >
-    
-        action.makeChoice
-       
+    <span
+      class="dropdown__selected-placeholder"
+    >
+      action.makeChoice
+    </span>
+     
     <i
       class="dropdown__toggle-icon iconoir-nav-arrow-down"
     />
@@ -530,9 +539,12 @@ exports[`Dropdown component basics 3`] = `
   <a
     class="dropdown__selected"
   >
-    
-        action.makeChoice
-       
+    <span
+      class="dropdown__selected-placeholder"
+    >
+      action.makeChoice
+    </span>
+     
     <i
       class="dropdown__toggle-icon iconoir-nav-arrow-down"
     />
@@ -638,7 +650,7 @@ exports[`Dropdown component change value prop 1`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -667,7 +679,7 @@ exports[`Dropdown component change value prop 1`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -749,7 +761,7 @@ exports[`Dropdown component test focus 1`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -831,7 +843,7 @@ exports[`Dropdown component test focus 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -913,7 +925,7 @@ exports[`Dropdown component test interactions 1`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -942,7 +954,7 @@ exports[`Dropdown component test interactions 1`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
@@ -1024,7 +1036,7 @@ exports[`Dropdown component test interactions 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
        
@@ -1053,7 +1065,7 @@ exports[`Dropdown component test interactions 2`] = `
         </a>
          
         <i
-          class="select__item-active-icon iconoir-check-circle"
+          class="select__item-active-icon iconoir-check"
         />
       </li>
     </ul>
diff --git a/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap b/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap
index f1c98ba53..f5218cf4e 100644
--- a/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap
+++ b/web-frontend/test/unit/database/components/export/__snapshots__/exportTableModal.spec.js.snap
@@ -107,7 +107,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                       </a>
                        
                       <i
-                        class="select__item-active-icon iconoir-check-circle"
+                        class="select__item-active-icon iconoir-check"
                       />
                     </li>
                      
@@ -138,7 +138,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                       </a>
                        
                       <i
-                        class="select__item-active-icon iconoir-check-circle"
+                        class="select__item-active-icon iconoir-check"
                       />
                     </li>
                   </ul>
@@ -285,7 +285,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -314,7 +314,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -343,7 +343,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -372,7 +372,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -401,7 +401,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -430,7 +430,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                     </ul>
@@ -528,7 +528,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -557,7 +557,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -586,7 +586,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -615,7 +615,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -644,7 +644,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -673,7 +673,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -702,7 +702,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -731,7 +731,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -760,7 +760,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -789,7 +789,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -818,7 +818,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -847,7 +847,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -876,7 +876,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -905,7 +905,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -934,7 +934,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -963,7 +963,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -992,7 +992,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1021,7 +1021,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1050,7 +1050,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1079,7 +1079,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1108,7 +1108,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1137,7 +1137,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1166,7 +1166,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1195,7 +1195,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1224,7 +1224,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1253,7 +1253,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1282,7 +1282,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1311,7 +1311,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1340,7 +1340,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1369,7 +1369,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1398,7 +1398,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1427,7 +1427,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1456,7 +1456,7 @@ exports[`Preview exportTableModal Modal with no view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                     </ul>
@@ -1643,7 +1643,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                       </a>
                        
                       <i
-                        class="select__item-active-icon iconoir-check-circle"
+                        class="select__item-active-icon iconoir-check"
                       />
                     </li>
                      
@@ -1674,7 +1674,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                       </a>
                        
                       <i
-                        class="select__item-active-icon iconoir-check-circle"
+                        class="select__item-active-icon iconoir-check"
                       />
                     </li>
                   </ul>
@@ -1821,7 +1821,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1850,7 +1850,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1879,7 +1879,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1908,7 +1908,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1937,7 +1937,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -1966,7 +1966,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                     </ul>
@@ -2064,7 +2064,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2093,7 +2093,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2122,7 +2122,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2151,7 +2151,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2180,7 +2180,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2209,7 +2209,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2238,7 +2238,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2267,7 +2267,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2296,7 +2296,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2325,7 +2325,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2354,7 +2354,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2383,7 +2383,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2412,7 +2412,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2441,7 +2441,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2470,7 +2470,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2499,7 +2499,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2528,7 +2528,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2557,7 +2557,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2586,7 +2586,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2615,7 +2615,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2644,7 +2644,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2673,7 +2673,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2702,7 +2702,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2731,7 +2731,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2760,7 +2760,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2789,7 +2789,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2818,7 +2818,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2847,7 +2847,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2876,7 +2876,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2905,7 +2905,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2934,7 +2934,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2963,7 +2963,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                        
@@ -2992,7 +2992,7 @@ exports[`Preview exportTableModal Modal with view 1`] = `
                         </a>
                          
                         <i
-                          class="select__item-active-icon iconoir-check-circle"
+                          class="select__item-active-icon iconoir-check"
                         />
                       </li>
                     </ul>
diff --git a/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap b/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
index 0d5a5d59d..304a90c7c 100644
--- a/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/__snapshots__/viewFilterForm.spec.js.snap
@@ -94,7 +94,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
             class="filters__field"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex="0"
             >
               <a
@@ -162,7 +162,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -190,7 +190,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -218,7 +218,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
@@ -234,7 +234,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
             class="filters__type"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex="0"
             >
               <a
@@ -302,7 +302,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -330,7 +330,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -358,7 +358,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -386,7 +386,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -414,7 +414,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -442,7 +442,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -470,7 +470,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -498,7 +498,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -526,7 +526,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
@@ -567,7 +567,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
           <!---->
            
           <div
-            class="dropdown dropdown--tiny"
+            class="dropdown dropdown--small"
             tabindex="0"
           >
             <a
@@ -622,7 +622,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                   </a>
                    
                   <i
-                    class="select__item-active-icon iconoir-check-circle"
+                    class="select__item-active-icon iconoir-check"
                   />
                 </li>
                  
@@ -651,7 +651,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                   </a>
                    
                   <i
-                    class="select__item-active-icon iconoir-check-circle"
+                    class="select__item-active-icon iconoir-check"
                   />
                 </li>
               </ul>
@@ -672,7 +672,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
             class="filters__field"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex="0"
             >
               <a
@@ -740,7 +740,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -768,7 +768,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -796,7 +796,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
@@ -812,7 +812,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
             class="filters__type"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex="0"
             >
               <a
@@ -880,7 +880,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -908,7 +908,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -936,7 +936,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -964,7 +964,7 @@ exports[`ViewFilterForm component Full view filter component 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
@@ -1093,7 +1093,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
             class="filters__field"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex="0"
             >
               <a
@@ -1161,7 +1161,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1189,7 +1189,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1217,7 +1217,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
@@ -1233,7 +1233,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
             class="filters__type"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex=""
             >
               <a
@@ -1302,7 +1302,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1330,7 +1330,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1358,7 +1358,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1386,7 +1386,7 @@ exports[`ViewFilterForm component Test rating filter 1`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
@@ -1515,7 +1515,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
             class="filters__field"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex="0"
             >
               <a
@@ -1583,7 +1583,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1611,7 +1611,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1639,7 +1639,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
@@ -1655,7 +1655,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
             class="filters__type"
           >
             <div
-              class="dropdown dropdown--tiny"
+              class="dropdown dropdown--small"
               tabindex="0"
             >
               <a
@@ -1724,7 +1724,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1752,7 +1752,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1780,7 +1780,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                   <li
@@ -1808,7 +1808,7 @@ exports[`ViewFilterForm component Test rating filter 2`] = `
                     </a>
                      
                     <i
-                      class="select__item-active-icon iconoir-check-circle"
+                      class="select__item-active-icon iconoir-check"
                     />
                   </li>
                 </ul>
diff --git a/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap b/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap
index e64369302..64f2ca82d 100644
--- a/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap
+++ b/web-frontend/test/unit/database/components/view/grid/__snapshots__/gridViewFieldFooter.spec.js.snap
@@ -17,11 +17,15 @@ exports[`Field footer component Change type 1`] = `
         <div
           class="select__item-name"
         >
-          common.none
+          <span
+            class="select__item-name-text"
+          >
+            common.none
+          </span>
         </div>
-         
-        <!---->
       </a>
+       
+      <!---->
     </li>
      
     <li
@@ -33,13 +37,15 @@ exports[`Field footer component Change type 1`] = `
         <div
           class="select__item-name"
         >
-          
+          <span
+            class="select__item-name-text"
+          >
             viewAggregationType.emptyCount
-          
+          </span>
         </div>
-         
-        <!---->
       </a>
+       
+      <!---->
     </li>
     <li
       class="select__item select__item--no-options active"
@@ -50,15 +56,17 @@ exports[`Field footer component Change type 1`] = `
         <div
           class="select__item-name"
         >
-          
+          <span
+            class="select__item-name-text"
+          >
             viewAggregationType.notEmptyCount
-          
+          </span>
         </div>
-         
-        <i
-          class="select__item-active-icon iconoir-check-circle"
-        />
       </a>
+       
+      <i
+        class="select__item-active-icon iconoir-check"
+      />
     </li>
     <li
       class="select__item select__item--no-options"
@@ -69,13 +77,15 @@ exports[`Field footer component Change type 1`] = `
         <div
           class="select__item-name"
         >
-          
+          <span
+            class="select__item-name-text"
+          >
             viewAggregationType.emptyPercentage
-          
+          </span>
         </div>
-         
-        <!---->
       </a>
+       
+      <!---->
     </li>
     <li
       class="select__item select__item--no-options"
@@ -86,13 +96,15 @@ exports[`Field footer component Change type 1`] = `
         <div
           class="select__item-name"
         >
-          
+          <span
+            class="select__item-name-text"
+          >
             viewAggregationType.notEmptyPercentage
-          
+          </span>
         </div>
-         
-        <!---->
       </a>
+       
+      <!---->
     </li>
     <li
       class="select__item select__item--no-options"
@@ -103,13 +115,15 @@ exports[`Field footer component Change type 1`] = `
         <div
           class="select__item-name"
         >
-          
+          <span
+            class="select__item-name-text"
+          >
             viewAggregationType.uniqueCount
-          
+          </span>
         </div>
-         
-        <!---->
       </a>
+       
+      <!---->
     </li>
   </ul>
 </div>