diff --git a/src/assets/styles/mixins.scss b/src/assets/styles/mixins.scss
index 643507dd..d878bb86 100644
--- a/src/assets/styles/mixins.scss
+++ b/src/assets/styles/mixins.scss
@@ -144,8 +144,12 @@
   }
 }
 
-@mixin transition($props) {
+// TODO replace $base-transition with this mixin. $base-transition is using `all` which is:
+//  1) is highly unperformant,
+//  2) can cause unexpected transitions
+@mixin transition($props...) {
   transition-duration: 100ms;
   transition-property: $props;
   transition-timing-function: ease-in-out;
+  will-change: $props;
 }
diff --git a/src/components/DataTable/index.ts b/src/components/DataTable/index.ts
index fd63f6ac..063362e1 100644
--- a/src/components/DataTable/index.ts
+++ b/src/components/DataTable/index.ts
@@ -105,7 +105,6 @@ const SbDataTable = {
         this.deselectAll()
       }
     },
-
     selectedRows(value) {
       this.$emit('selected-rows', value)
     },
diff --git a/src/components/EmptyState/empty.scss b/src/components/EmptyState/empty.scss
index 793ee433..7ed38014 100644
--- a/src/components/EmptyState/empty.scss
+++ b/src/components/EmptyState/empty.scss
@@ -22,6 +22,7 @@
   }
 
   svg {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
   }
diff --git a/src/components/Icon/icon.scss b/src/components/Icon/icon.scss
index 2e0bb764..65fe78ac 100644
--- a/src/components/Icon/icon.scss
+++ b/src/components/Icon/icon.scss
@@ -40,7 +40,9 @@ $bg-colors: (
 
 .sb-icon {
   display: inline-block;
+  flex-shrink: 0;
   vertical-align: middle;
+  user-select: none;
 
   @include setIconSize($icon-default-size);
   @include setIconColor(currentColor);
diff --git a/src/components/Popover/SbPopover.vue b/src/components/Popover/SbPopover.vue
index 15474e8e..ae85df62 100644
--- a/src/components/Popover/SbPopover.vue
+++ b/src/components/Popover/SbPopover.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts">
-import SbPortal from '../Portal'
+import SbPortal from '../Portal/index.vue'
 import { createPopper } from '@popperjs/core/lib/popper-lite'
 import {
   flip,
@@ -223,7 +223,7 @@ export default {
       }
     },
 
-    wrapClose(e) {
+    wrapClose(e: Event) {
       const referenceIsString = typeof this.referenceEl === 'string'
       const hasContains = typeof this.referenceEl?.contains === 'function'
       const targetIsNode = e?.target instanceof Node
diff --git a/src/lib/internal-icons.ts b/src/lib/internal-icons.ts
index 716b7458..abe24f5b 100644
--- a/src/lib/internal-icons.ts
+++ b/src/lib/internal-icons.ts
@@ -147,6 +147,14 @@ const icons = {
       </g>
     `,
   },
+  'status-small': {
+    viewBox: '0 0 24 24',
+    path: `
+      <g fill="none" fill-rule="evenodd">
+        <circle cx="12" cy="12" r="4" fill="currentColor"/>
+      </g>
+    `,
+  },
   sync: {
     viewBox: '0 0 24 24',
     path: `
@@ -1043,6 +1051,17 @@ const fieldTypeIcons = {
       </g>
     `,
   },
+  'fieldtype-references': {
+    viewBox: '0 0 24 24',
+    path: `
+      <rect width="24" height="24" rx="5" fill="#395ECE"/>
+      <path d="M10 12C10 9.79086 11.7909 8 14 8V11.9648C14 14.1797 12.2148 15.9806 10 16V12Z" fill="white"/>
+      <rect opacity="0.8" x="14" y="8" width="2" height="4" fill="white"/>
+      <rect opacity="0.8" x="8" y="12" width="2" height="4" fill="white"/>
+      <path d="M4 14L8 10L8 18L4 14Z" fill="white"/>
+      <path d="M20 10L16 14L16 6L20 10Z" fill="white"/>
+    `,
+  },
   'fieldtype-richtext': {
     viewBox: '0 0 24 24',
     path: `