diff --git a/packages/nicolium/src/features/ui/index.tsx b/packages/nicolium/src/features/ui/index.tsx
index 62d9cdbbc..007ab72a8 100644
--- a/packages/nicolium/src/features/ui/index.tsx
+++ b/packages/nicolium/src/features/ui/index.tsx
@@ -180,7 +180,7 @@ const UI: React.FC = React.memo(() => {
 
           {me && features.chats && (
             <div className='⁂-chat-widget__container'>
-              <Suspense fallback={<div className='⁂-chat-widget--placeholder' />}>
+              <Suspense fallback={<div className='⁂-chat-widget ⁂-chat-widget--placeholder' />}>
                 <ChatWidget />
               </Suspense>
             </div>
diff --git a/packages/nicolium/src/styles/new/admin.scss b/packages/nicolium/src/styles/new/admin.scss
index f2d7f3391..d81552e2b 100644
--- a/packages/nicolium/src/styles/new/admin.scss
+++ b/packages/nicolium/src/styles/new/admin.scss
@@ -1,4 +1,5 @@
 @use 'mixins';
+@use 'variables';
 
 .⁂-dashboard {
   display: flex;
@@ -6,11 +7,22 @@
   gap: 1.5rem;
 
   &__counters {
-    @apply grid grid-cols-1 gap-2 sm:grid-cols-2;
+    display: grid;
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+    gap: 0.5rem;
+
+    @media (min-width: variables.$breakpoint-sm) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
   }
 
   &__source-code {
-    @apply flex items-center space-x-1 truncate;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     svg {
       height: 1rem;
@@ -20,7 +32,19 @@
 }
 
 .⁂-dashcounter {
-  @apply flex cursor-pointer flex-col items-center space-y-2 rounded bg-gray-200 p-4 transition-transform hover:-translate-y-1 dark:bg-gray-800;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  background-color: rgb(var(--color-gray-100));
+  transition: transform 0.15s ease-in-out;
+
+  &:is(.dark *) {
+    background-color: rgb(var(--color-gray-800));
+  }
 
   &__number {
     @include mixins.text($align: center, $size: 2xl, $weight: medium);
diff --git a/packages/nicolium/src/styles/new/chats.scss b/packages/nicolium/src/styles/new/chats.scss
index d7be647ed..447714090 100644
--- a/packages/nicolium/src/styles/new/chats.scss
+++ b/packages/nicolium/src/styles/new/chats.scss
@@ -2,7 +2,25 @@
 @use 'variables';
 
 .⁂-chat-widget {
-  @apply fixed bottom-0 z-[99] flex w-96 flex-col rounded-t-lg bg-white shadow-3xl black:border black:border-b-0 black:border-gray-800 black:bg-black dark:bg-gray-900 ltr:right-5 rtl:left-5 h-16;
+  position: fixed;
+  bottom: 0;
+  z-index: 99;
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  height: 4rem;
+  border-radius: 0.5rem 0.5rem 0 0;
+  background: white;
+  box-shadow: 0 25px 75px -15px rgb(0, 0, 0, 0.25);
+  @apply ltr:right-5 rtl:left-5;
+
+  &:is(.dark *) {
+    background: rgb(var(--color-gray-900));
+  }
+
+  &:is(.black *) {
+    background: black;
+  }
 
   &--open {
     height: 550px;
@@ -14,7 +32,7 @@
   }
 
   &--placeholder {
-    @apply fixed bottom-0 z-[99] flex h-16 w-96 animate-pulse flex-col rounded-t-lg bg-white shadow-3xl dark:bg-gray-900 ltr:right-5 rtl:left-5;
+    @apply animate-pulse;
   }
 
   &__container {
@@ -121,7 +139,11 @@
 
       &.⁂-chat-widget__list--near-top::before,
       &.⁂-chat-widget__list--near-bottom::after {
-        @apply opacity-0 black:opacity-0;
+        opacity: 0;
+
+        &:is(.black *) {
+          @apply opacity-0;
+        }
       }
     }
   }
@@ -165,11 +187,14 @@
   }
 
   &--shoutbox > div {
-    @apply justify-normal;
+    justify-content: normal;
   }
 
   &__info {
-    @apply flex items-center gap-2 overflow-hidden;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    overflow: hidden;
   }
 
   &__avatar {