diff --git a/apps/site/components/withMetaBar.tsx b/apps/site/components/withMetaBar.tsx
index dea25e5900e19..ca7b7f3f6a0ca 100644
--- a/apps/site/components/withMetaBar.tsx
+++ b/apps/site/components/withMetaBar.tsx
@@ -35,9 +35,10 @@ const WithMetaBar: FC = () => {
   // Since we cannot show the same number of avatars in Mobile / Tablet
   // resolution as we do on desktop and there is overflow, we are adjusting
   // the number of avatars manually for the resolutions below
-  const isMobileResolution = useMediaQuery('(max-width: 670px)');
+  const isMobileResolution = useMediaQuery('(max-width: 890px)');
+
   const isTabletResolution = useMediaQuery(
-    '(min-width: 670px) and (max-width: 1280px)'
+    '(min-width: 890px) and (max-width: 1280px)'
   );
 
   return (
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index 9b2934cbb3f4d..429eac54fe626 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@node-core/ui-components",
-  "version": "1.5.9",
+  "version": "1.5.10",
   "type": "module",
   "exports": {
     "./*": [
diff --git a/packages/ui-components/src/Common/Select/index.module.css b/packages/ui-components/src/Common/Select/index.module.css
index 7e4c610b1174f..7909fbca3b97d 100644
--- a/packages/ui-components/src/Common/Select/index.module.css
+++ b/packages/ui-components/src/Common/Select/index.module.css
@@ -38,13 +38,13 @@
       focus:border-neutral-500
       focus:ring-1
       focus:ring-neutral-500
-      data-[placeholder]:text-neutral-800
+      data-placeholder:text-neutral-800
       dark:border-neutral-800
       dark:bg-neutral-950
       dark:text-white
       dark:focus:border-neutral-600
       dark:focus:ring-neutral-600
-      dark:data-[placeholder]:text-neutral-200;
+      dark:data-placeholder:text-neutral-200;
   }
 
   .trigger span {
@@ -85,12 +85,12 @@
 
   .text {
     @apply text-neutral-800
-      data-[highlighted]:bg-green-500
-      data-[highlighted]:text-white
-      data-[highlighted]:outline-hidden
+      data-highlighted:bg-green-500
+      data-highlighted:text-white
+      data-highlighted:outline-hidden
       dark:text-neutral-200
-      dark:data-[highlighted]:bg-green-600
-      dark:data-[highlighted]:text-white;
+      dark:data-highlighted:bg-green-600
+      dark:data-highlighted:text-white;
   }
 
   .text > span {
@@ -137,13 +137,13 @@
 
   .text {
     @apply text-neutral-900
-      data-[disabled]:text-neutral-600
-      data-[highlighted]:bg-neutral-100
-      data-[highlighted]:text-neutral-900
+      data-disabled:text-neutral-600
+      data-highlighted:bg-neutral-100
+      data-highlighted:text-neutral-900
       dark:text-white
-      dark:data-[disabled]:text-neutral-700
-      dark:data-[highlighted]:bg-neutral-900
-      dark:data-[highlighted]:text-white;
+      dark:data-disabled:text-neutral-700
+      dark:data-highlighted:bg-neutral-900
+      dark:data-highlighted:text-white;
   }
 
   &.dropdown {
@@ -182,7 +182,7 @@
   .dropdown {
     @apply absolute
       left-0
-      z-99
+      z-999
       mt-4;
   }
 
diff --git a/packages/ui-components/src/Containers/Sidebar/index.module.css b/packages/ui-components/src/Containers/Sidebar/index.module.css
index 610c7d51936a2..f129b31b576de 100644
--- a/packages/ui-components/src/Containers/Sidebar/index.module.css
+++ b/packages/ui-components/src/Containers/Sidebar/index.module.css
@@ -5,6 +5,7 @@
     ml:max-w-xs
     ml:overflow-auto
     ml:border-r
+    z-0
     flex
     w-full
     flex-col