diff --git a/packages/nicolium/src/components/ui/combobox.css b/packages/nicolium/src/components/ui/combobox.css
deleted file mode 100644
index 5c708c8e9..000000000
--- a/packages/nicolium/src/components/ui/combobox.css
+++ /dev/null
@@ -1,31 +0,0 @@
-:root {
-  --reach-combobox: 1;
-}
-
-[data-reach-combobox-popover] {
-  @apply rounded-md shadow-lg bg-white dark:bg-gray-900 dark:ring-2 dark:ring-primary-700 z-[100];
-}
-
-[data-reach-combobox-list] {
-  @apply list-none m-0 py-1 px-0 select-none;
-}
-
-[data-reach-combobox-option] {
-  @apply block px-4 py-2.5 text-sm text-gray-700 dark:text-gray-500 cursor-pointer;
-}
-
-[data-reach-combobox-option][aria-selected='true'] {
-  @apply bg-gray-100 dark:bg-gray-800;
-}
-
-[data-reach-combobox-option]:hover {
-  @apply bg-gray-100 dark:bg-gray-800;
-}
-
-[data-reach-combobox-option][aria-selected='true']:hover {
-  @apply bg-gray-100 dark:bg-gray-800;
-}
-
-[data-suggested-value] {
-  @apply font-bold;
-}
diff --git a/packages/nicolium/src/components/ui/combobox.scss b/packages/nicolium/src/components/ui/combobox.scss
new file mode 100644
index 000000000..9c03d06de
--- /dev/null
+++ b/packages/nicolium/src/components/ui/combobox.scss
@@ -0,0 +1,52 @@
+:root {
+  --reach-combobox: 1;
+}
+
+[data-reach-combobox-popover] {
+  z-index: 100;
+  border-radius: 0.375rem;
+  background: white;
+  box-shadow: var(--shadow-lg);
+
+  .dark & {
+    background: rgb(var(--color-gray-900));
+    outline: 2px solid rgb(var(--color-primary-700));
+  }
+}
+
+[data-reach-combobox-list] {
+  user-select: none;
+  margin: 0;
+  padding: 0.25rem 0;
+  list-style-type: none;
+}
+
+[data-reach-combobox-option] {
+  cursor: pointer;
+
+  display: block;
+
+  padding: 0.625rem 1rem;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: rgb(var(--color-gray-700));
+
+  .dark & {
+    color: rgb(var(--color-gray-500));
+  }
+}
+
+[data-reach-combobox-option][aria-selected='true'],
+[data-reach-combobox-option]:hover,
+[data-reach-combobox-option][aria-selected='true']:hover {
+  background: rgb(var(--color-gray-100));
+
+  .dark & {
+    background: rgb(var(--color-gray-800));
+  }
+}
+
+[data-suggested-value] {
+  font-weight: 700;
+}
diff --git a/packages/nicolium/src/components/ui/combobox.tsx b/packages/nicolium/src/components/ui/combobox.tsx
index acd17e700..ef208172b 100644
--- a/packages/nicolium/src/components/ui/combobox.tsx
+++ b/packages/nicolium/src/components/ui/combobox.tsx
@@ -1,4 +1,4 @@
-import './combobox.css';
+import './combobox.scss';
 
 export {
   Combobox as default,
diff --git a/packages/nicolium/src/components/ui/tabs.css b/packages/nicolium/src/components/ui/tabs.css
deleted file mode 100644
index 684b52f6e..000000000
--- a/packages/nicolium/src/components/ui/tabs.css
+++ /dev/null
@@ -1,22 +0,0 @@
-:root {
-  --reach-tabs: 1;
-}
-
-[data-reach-tabs] {
-  @apply relative pb-[3px];
-}
-
-[data-reach-tab-list] {
-  @apply flex overflow-auto;
-}
-
-[data-reach-tab] {
-  @apply flex-1 flex justify-center items-center
-  min-w-fit py-4 px-1 text-center font-medium text-sm text-gray-700
-  dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500
-  focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus-visible:ring-primary-500;
-}
-
-[data-reach-tab][data-selected] {
-  @apply text-gray-900 dark:text-gray-100;
-}
diff --git a/packages/nicolium/src/components/ui/tabs.scss b/packages/nicolium/src/components/ui/tabs.scss
new file mode 100644
index 000000000..fe69a36d5
--- /dev/null
+++ b/packages/nicolium/src/components/ui/tabs.scss
@@ -0,0 +1,59 @@
+:root {
+  --reach-tabs: 1;
+}
+
+[data-reach-tabs] {
+  position: relative;
+  padding-bottom: 3px;
+}
+
+[data-reach-tab-list] {
+  overflow: auto;
+  display: flex;
+}
+
+[data-reach-tab] {
+  display: flex;
+  flex: 1 1 0%;
+  align-items: center;
+  justify-content: center;
+
+  min-width: fit-content;
+  padding: 1rem 0.25rem;
+
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.25rem;
+  color: rgb(var(--color-gray-700));
+  text-align: center;
+
+  .dark & {
+    color: rgb(var(--color-gray-600));
+  }
+
+  &:hover {
+    color: rgb(var(--color-gray-800));
+
+    .dark & {
+      color: rgb(var(--color-gray-500));
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid rgb(var(--color-primary-500));
+    outline-offset: 2px;
+
+    .dark & {
+      outline-color: rgb(var(--color-primary-500));
+      outline-offset: 0;
+    }
+  }
+}
+
+[data-reach-tab][data-selected] {
+  color: rgb(var(--color-gray-900));
+
+  .dark & {
+    color: rgb(var(--color-gray-100));
+  }
+}
diff --git a/packages/nicolium/src/components/ui/tabs.tsx b/packages/nicolium/src/components/ui/tabs.tsx
index 8ab398842..f8566bf7c 100644
--- a/packages/nicolium/src/components/ui/tabs.tsx
+++ b/packages/nicolium/src/components/ui/tabs.tsx
@@ -13,7 +13,7 @@ import Counter from './counter';
 
 import type { LinkOptions } from '@tanstack/react-router';
 
-import './tabs.css';
+import './tabs.scss';
 
 const HORIZONTAL_PADDING = 8;
 const AnimatedContext = React.createContext<React.Dispatch<
diff --git a/packages/nicolium/src/styles/basics.scss b/packages/nicolium/src/styles/basics.scss
index 0b448217a..e1f4727a6 100644
--- a/packages/nicolium/src/styles/basics.scss
+++ b/packages/nicolium/src/styles/basics.scss
@@ -8,13 +8,19 @@ body {
 }
 
 ::selection {
-  @apply bg-primary-600 text-white;
-}
-
-noscript {
-  @apply text-center;
+  color: white;
+  background: rgb(var(--color-primary-600));
 }
 
 .emojione {
-  @apply w-4 h-4 -mt-[0.2ex] mb-[0.2ex] inline-block align-middle object-contain;
+  display: inline-block;
+
+  width: 1rem;
+  height: 1rem;
+  margin-top: -0.2ex;
+  margin-bottom: 0.2ex;
+
+  vertical-align: middle;
+
+  object-fit: contain;
 }
diff --git a/packages/nicolium/src/styles/emoji-picker.scss b/packages/nicolium/src/styles/emoji-picker.scss
index 241b6a4bf..4e9145752 100644
--- a/packages/nicolium/src/styles/emoji-picker.scss
+++ b/packages/nicolium/src/styles/emoji-picker.scss
@@ -2,8 +2,7 @@ em-emoji-picker {
   --rgb-background: 255 255 255;
   --rgb-accent: var(--color-primary-600);
   --tw-shadow: 0 10px 15px -3px #0001, 0 4px 6px -4px #0001;
-  --shadow:
-    var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  --shadow: var(--shadow-lg);
 }
 
 .dark em-emoji-picker {
diff --git a/packages/nicolium/src/styles/new/components.scss b/packages/nicolium/src/styles/new/components.scss
index 4633f66b3..1fac37617 100644
--- a/packages/nicolium/src/styles/new/components.scss
+++ b/packages/nicolium/src/styles/new/components.scss
@@ -913,9 +913,7 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
     border-radius: 0.375rem;
 
     background-color: #fff;
-    box-shadow:
-      0 10px 15px -3px #0001,
-      0 4px 6px -4px #0001;
+    box-shadow: var(--shadow-lg);
 
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 100ms;
@@ -1031,9 +1029,7 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
   &--rounded {
     color: rgb(var(--color-gray-900));
     background-color: #fff;
-    box-shadow:
-      0 10px 15px -3px #0001,
-      0 4px 6px -4px #0001;
+    box-shadow: var(--shadow-lg);
 
     .dark.black & {
       background-color: #000;
diff --git a/packages/nicolium/src/styles/new/layout.scss b/packages/nicolium/src/styles/new/layout.scss
index ad665175c..ed768703c 100644
--- a/packages/nicolium/src/styles/new/layout.scss
+++ b/packages/nicolium/src/styles/new/layout.scss
@@ -90,9 +90,7 @@ body {
 
   background-color: #fffe;
   backdrop-filter: blur(12px) saturate(2);
-  box-shadow:
-    0 10px 15px -3px #0001,
-    0 4px 6px -4px #0001;
+  box-shadow: var(--shadow-lg);
 
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 
@@ -1113,9 +1111,7 @@ body {
   border-radius: 0.5rem;
 
   background-color: #fff;
-  box-shadow:
-    0 10px 15px -3px #0001,
-    0 4px 6px -4px #0001;
+  box-shadow: var(--shadow-lg);
 
   .dark.black & {
     background-color: #000;
diff --git a/packages/nicolium/src/styles/new/mixins.scss b/packages/nicolium/src/styles/new/mixins.scss
index 6d096fb6f..0ce18d1bd 100644
--- a/packages/nicolium/src/styles/new/mixins.scss
+++ b/packages/nicolium/src/styles/new/mixins.scss
@@ -133,9 +133,7 @@
   @if $variant == rounded {
     color: rgb(var(--color-gray-900));
     background-color: #fff;
-    box-shadow:
-      0 10px 15px -3px #0001,
-      0 4px 6px -4px #0001;
+    box-shadow: var(--shadow-lg);
 
     &:is(.dark.black *) {
       background-color: #000;
diff --git a/packages/nicolium/src/styles/new/modals.scss b/packages/nicolium/src/styles/new/modals.scss
index db7944527..f3868e436 100644
--- a/packages/nicolium/src/styles/new/modals.scss
+++ b/packages/nicolium/src/styles/new/modals.scss
@@ -207,9 +207,7 @@
     border-top-right-radius: 0.75rem;
 
     background-color: #fff;
-    box-shadow:
-      0 10px 15px -3px #0001,
-      0 4px 6px -4px #0001;
+    box-shadow: var(--shadow-lg);
 
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 200ms;
diff --git a/packages/nicolium/src/styles/new/variables.scss b/packages/nicolium/src/styles/new/variables.scss
index 7a5fc5da0..c55d18698 100644
--- a/packages/nicolium/src/styles/new/variables.scss
+++ b/packages/nicolium/src/styles/new/variables.scss
@@ -4,6 +4,8 @@ $breakpoint-lg: 976px;
 $breakpoint-xl: 1280px;
 
 :root {
+  --shadow-lg: 0 10px 15px -3px #0001, 0 4px 6px -4px #0001;
+
   /* --hex-slate-50: #f8fafc;
   --hex-slate-100: #f1f5f9;
   --hex-slate-200: #e2e8f0;