diff --git a/client-app/assets/presets/default.json b/client-app/assets/presets/default.json
index 92af0f6cbc..d00cfd8d31 100644
--- a/client-app/assets/presets/default.json
+++ b/client-app/assets/presets/default.json
@@ -1,10 +1,10 @@
 {
   "color_primary_50": "#fff8eb",
   "color_primary_100": "#fbead2",
-  "color_primary_200": "#f8dbb1",
-  "color_primary_300": "#f8c680",
-  "color_primary_400": "#f0ad4e",
-  "color_primary_500": "#eb9016",
+  "color_primary_200": "#fadbaf",
+  "color_primary_300": "#fdc77c",
+  "color_primary_400": "#ffbb5b",
+  "color_primary_500": "#f99e24",
   "color_primary_600": "#b46b0f",
   "color_primary_700": "#874f0c",
   "color_primary_800": "#543008",
diff --git a/client-app/assets/presets/mercury.json b/client-app/assets/presets/mercury.json
index 92af0f6cbc..d00cfd8d31 100644
--- a/client-app/assets/presets/mercury.json
+++ b/client-app/assets/presets/mercury.json
@@ -1,10 +1,10 @@
 {
   "color_primary_50": "#fff8eb",
   "color_primary_100": "#fbead2",
-  "color_primary_200": "#f8dbb1",
-  "color_primary_300": "#f8c680",
-  "color_primary_400": "#f0ad4e",
-  "color_primary_500": "#eb9016",
+  "color_primary_200": "#fadbaf",
+  "color_primary_300": "#fdc77c",
+  "color_primary_400": "#ffbb5b",
+  "color_primary_500": "#f99e24",
   "color_primary_600": "#b46b0f",
   "color_primary_700": "#874f0c",
   "color_primary_800": "#543008",
diff --git a/client-app/ui-kit/components/atoms/badge/vc-badge.stories.ts b/client-app/ui-kit/components/atoms/badge/vc-badge.stories.ts
index a39a4b66d2..f8c5aa343e 100644
--- a/client-app/ui-kit/components/atoms/badge/vc-badge.stories.ts
+++ b/client-app/ui-kit/components/atoms/badge/vc-badge.stories.ts
@@ -1,9 +1,8 @@
 import { VcBadge } from "..";
-import VcIcon from "../icon/vc-icon.vue";
-import type { Meta, StoryFn } from "@storybook/vue3-vite";
+import type { Meta, StoryObj } from "@storybook/vue3-vite";
 
 const SIZES = ["xs", "sm", "md", "lg"];
-const COLORS = ["primary", "secondary", "success", "info", "neutral", "warning", "danger"];
+const COLORS = ["primary", "secondary", "success", "info", "neutral", "warning", "danger", "accent"];
 const VARIANTS = ["solid", "solid-light", "outline", "outline-dark"];
 
 export default {
@@ -41,139 +40,194 @@ export default {
       },
     },
   },
+  render: (args) => ({
+    components: { VcBadge },
+    setup: () => ({ args }),
+    template: '<VcBadge v-bind="args">35</VcBadge>',
+  }),
 } as Meta<typeof VcBadge>;
 
-const Template: StoryFn = (args) => ({
+const renderTemplate = (template: string) => (args: Record<string, unknown>) => ({
   components: { VcBadge },
   setup: () => ({ args }),
-  template: '<VcBadge v-bind="args">35</VcBadge>',
+  template,
 });
 
-export const Basic = Template.bind({});
+export const Basic: StoryObj = {};
 
-export const SolidLight = Template.bind({});
-SolidLight.args = {
-  variant: "solid-light",
+export const SolidLight: StoryObj = {
+  args: {
+    variant: "solid-light",
+  },
 };
 
-export const Outline = Template.bind({});
-Outline.args = {
-  variant: "outline",
+export const Outline: StoryObj = {
+  args: {
+    variant: "outline",
+  },
 };
 
-export const OutlineDark = Template.bind({});
-OutlineDark.args = {
-  variant: "outline-dark",
+export const OutlineDark: StoryObj = {
+  args: {
+    variant: "outline-dark",
+  },
 };
 
-export const Rounded = Template.bind({});
-Rounded.args = {
-  rounded: true,
+export const Rounded: StoryObj = {
+  args: {
+    rounded: true,
+  },
 };
 
-export const Truncate: StoryFn = (args) => ({
-  components: { VcBadge },
-  setup: () => ({ args }),
-  template: '<VcBadge class="w-32" v-bind="args">Long long long long badge text</VcBadge>',
-});
-Truncate.args = {
-  truncate: true,
+export const Truncate: StoryObj = {
+  args: {
+    truncate: true,
+  },
+  render: renderTemplate(`
+    <div class="flex gap-4">
+      <VcBadge class="w-32" v-bind="args">Long long long long badge text</VcBadge>
+
+      <VcBadge class="w-32" v-bind="args">
+        <VcIcon name="round-check" />
+        <span>Long long long long badge text</span>
+      </VcBadge>
+    </div>
+  `),
 };
 
-export const WithIcon: StoryFn = (args) => ({
-  components: { VcBadge, VcIcon },
-  setup: () => ({ args }),
-  template: `<VcBadge v-bind="args">
+export const Nowrap: StoryObj = {
+  args: {
+    nowrap: true,
+  },
+  render: renderTemplate('<VcBadge v-bind="args">Long long long long badge text</VcBadge>'),
+};
+
+export const MaxWidth: StoryObj = {
+  args: {
+    maxWidth: "8rem",
+  },
+  render: renderTemplate('<VcBadge v-bind="args">Very long badge text that should be constrained</VcBadge>'),
+};
+
+export const WithIcon: StoryObj = {
+  render: renderTemplate(`<VcBadge v-bind="args">
     <VcIcon name="round-check" />
     <span>35</span>
-  </VcBadge>`,
-});
+  </VcBadge>`),
+};
 
-export const WithIcons: StoryFn = (args) => ({
-  components: { VcBadge, VcIcon },
-  setup: () => ({ args }),
-  template: `<VcBadge v-bind="args">
+export const WithIcons: StoryObj = {
+  render: renderTemplate(`<VcBadge v-bind="args">
     <VcIcon name="round-check" />
     <span>35</span>
     <VcIcon name="round-check" />
-  </VcBadge>`,
-});
-
-export const OnlyIcon: StoryFn = (args) => ({
-  components: { VcBadge, VcIcon },
-  setup: () => ({ args }),
-  template: `<VcBadge v-bind="args">
-    <VcIcon name="fire" />
-  </VcBadge>`,
-});
-OnlyIcon.args = {
-  square: true,
+  </VcBadge>`),
 };
 
-export const Dot: StoryFn = () => ({
-  components: { VcBadge },
-  template: "<VcBadge />",
-});
-
-export const AllStates: StoryFn = () => ({
-  components: { VcBadge, VcIcon },
-  setup: () => ({ colors: COLORS, variants: VARIANTS, sizes: SIZES }),
-  template: `<div class="space-y-6">
-    <div v-for="size in sizes" class="space-y-6">
-      <h2 class="text-lg font-bold">Size: {{ size }}</h2>
-
-      <div class="flex flex-wrap gap-1" v-for="variant in variants">
-        <div class="w-28 text-xs">Variant: <b>{{ variant }}</b></div>
-
-        <div class="space-y-2">
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
-              <VcIcon name="fire" />
-              Color: {{ color }}
-            </VcBadge>
-          </div>
-
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
-              <VcIcon name="fire" />
-              Color: {{ color }}
-            </VcBadge>
-          </div>
-
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
-              Color: {{ color }}
-            </VcBadge>
-          </div>
-
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
-              Color: {{ color }}
-            </VcBadge>
-          </div>
+export const OnlyIcon: StoryObj = {
+  args: {
+    square: true,
+  },
+  render: renderTemplate('<VcBadge v-bind="args"><VcIcon name="fire" /></VcBadge>'),
+};
 
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square>
-              <VcIcon name="fire" />
-            </VcBadge>
-          </div>
+export const Dot: StoryObj = {
+  render: renderTemplate(`<VcBadge />`),
+};
 
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square rounded>
-              <VcIcon name="fire" />
-            </VcBadge>
-          </div>
+export const AllSizes: StoryObj = {
+  render: () => ({
+    components: { VcBadge },
+    setup: () => ({ sizes: SIZES }),
+    template: `<div class="space-y-4">
+      <div v-for="size in sizes" class="flex items-center gap-4">
+        <span class="w-8 text-sm">{{ size }}:</span>
+        <VcBadge :size="size">35</VcBadge>
+        <VcBadge :size="size" rounded>35</VcBadge>
+        <VcBadge :size="size" square>
+          <VcIcon name="fire" />
+        </VcBadge>
+        <VcBadge :size="size" />
+      </div>
+    </div>`,
+  }),
+};
 
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" />
-          </div>
+export const AllColors: StoryObj = {
+  render: () => ({
+    setup: () => ({ colors: COLORS }),
+    template: `<div class="space-y-4">
+      <div v-for="color in colors" class="flex items-center gap-4">
+        <span class="w-20 text-sm">{{ color }}:</span>
+        <VcBadge :color="color">35</VcBadge>
+        <VcBadge :color="color" variant="solid-light">35</VcBadge>
+        <VcBadge :color="color" variant="outline">35</VcBadge>
+        <VcBadge :color="color" variant="outline-dark">35</VcBadge>
+      </div>
+    </div>`,
+  }),
+};
 
-          <div class="flex justify-around flex-wrap gap-1">
-            <VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" rounded />
+export const AllStates: StoryObj = {
+  render: () => ({
+    setup: () => ({ colors: COLORS, variants: VARIANTS, sizes: SIZES }),
+    template: `<div class="space-y-6">
+      <div v-for="size in sizes" class="space-y-6">
+        <h2 class="text-lg font-bold">Size: {{ size }}</h2>
+
+        <div class="flex flex-wrap gap-1" v-for="variant in variants">
+          <div class="w-28 text-xs">Variant: <b>{{ variant }}</b></div>
+
+          <div class="space-y-2">
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
+                <VcIcon name="cloud" />
+                Color: {{ color }}
+              </VcBadge>
+            </div>
+
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
+                <VcIcon name="cloud" />
+                Color: {{ color }}
+              </VcBadge>
+            </div>
+
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant">
+                Color: {{ color }}
+              </VcBadge>
+            </div>
+
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" rounded>
+                Color: {{ color }}
+              </VcBadge>
+            </div>
+
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square>
+                <VcIcon name="cloud" />
+              </VcBadge>
+            </div>
+
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :size="size" :color="color" :variant="variant" square rounded>
+                <VcIcon name="cloud" />
+              </VcBadge>
+            </div>
+
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" />
+            </div>
+
+            <div class="flex justify-around flex-wrap gap-1">
+              <VcBadge v-for="color in colors" :color="color" :variant="variant" :size="size" rounded />
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-  `,
-});
+    `,
+  }),
+};
diff --git a/client-app/ui-kit/components/atoms/badge/vc-badge.vue b/client-app/ui-kit/components/atoms/badge/vc-badge.vue
index 4ca09275d4..4878eb39e7 100644
--- a/client-app/ui-kit/components/atoms/badge/vc-badge.vue
+++ b/client-app/ui-kit/components/atoms/badge/vc-badge.vue
@@ -39,7 +39,7 @@ withDefaults(defineProps<IProps>(), {
 
 <style lang="scss">
 .vc-badge {
-  $colors: primary, secondary, neutral, info, success, warning, danger;
+  $colors: primary, secondary, neutral, info, success, warning, danger, accent;
 
   $truncate: "";
   $square: "";
@@ -48,14 +48,15 @@ withDefaults(defineProps<IProps>(), {
   --max-width: var(--props-max-width, var(--vc-badge-max-width, 100%));
   --radius: var(--vc-badge-radius, var(--vc-radius, 0.5rem));
 
-  @apply flex-none inline-flex align-top min-h-[--size] min-w-[--size] max-w-[--max-width] border rounded-[--radius] font-bold;
+  @apply flex-none inline-flex align-middle min-h-[--size] min-w-[--size] max-w-[--max-width] border rounded-[--radius] font-bold bg-[--bg-color] border-[--border-color] text-[--text-color];
 
   &--size {
     &--xs {
       --size: 1rem;
       --vc-icon-size: 0.625rem;
+      --gap: 0.25rem;
 
-      @apply gap-1 px-0.5 text-xxs;
+      @apply px-[0.188rem] text-xxs/[1];
 
       &--dot {
         @apply size-1.5;
@@ -65,8 +66,9 @@ withDefaults(defineProps<IProps>(), {
     &--sm {
       --size: 1.125rem;
       --vc-icon-size: 0.75rem;
+      --gap: 0.25rem;
 
-      @apply gap-1.5 px-0.5 text-xs/[1.2];
+      @apply px-[0.188rem] text-xs/[1.2];
 
       &--dot {
         @apply size-2;
@@ -76,8 +78,9 @@ withDefaults(defineProps<IProps>(), {
     &--md {
       --size: 1.375rem;
       --vc-icon-size: 0.875rem;
+      --gap: 0.375rem;
 
-      @apply gap-1.5 px-1 text-sm/[1.2];
+      @apply px-1 text-sm/[1.2];
 
       &--dot {
         @apply size-2.5;
@@ -87,8 +90,9 @@ withDefaults(defineProps<IProps>(), {
     &--lg {
       --size: 1.625rem;
       --vc-icon-size: 1rem;
+      --gap: 0.375rem;
 
-      @apply gap-1.5 px-1 text-base/[1.25];
+      @apply px-1 text-base/[1.25];
 
       &--dot {
         @apply size-3;
@@ -116,41 +120,52 @@ withDefaults(defineProps<IProps>(), {
 
   @each $color in $colors {
     &--solid--#{$color} {
-      @apply bg-[color:var(--color-#{$color}-500)]
-      border-[color:var(--color-#{$color}-500)]
-      text-additional-50;
+      --bg-color: var(--color-#{$color}-500);
+      --border-color: var(--color-#{$color}-500);
+
+      &:not([class*="--warning"]) {
+        --text-color: var(--color-additional-50);
+      }
+
+      &[class*="--warning"] {
+        --text-color: var(--color-neutral-900);
+      }
     }
 
     &--solid-light--#{$color} {
+      --bg-color: var(--color-#{$color}-100);
+      --border-color: var(--color-#{$color}-100);
+      --text-color: var(--color-#{$color}-800);
       --vc-icon-color: var(--color-#{$color}-700);
-
-      @apply bg-[color:var(--color-#{$color}-100)]
-      border-[color:var(--color-#{$color}-100)]
-      text-[color:var(--color-#{$color}-800)];
     }
 
     &--outline--#{$color} {
+      --bg-color: var(--color-additional-50);
+      --border-color: var(--color-#{$color}-500);
       --vc-icon-color: var(--color-#{$color}-700);
 
-      @apply bg-additional-50
-      border-[color:var(--color-#{$color}-500)]
-      text-[color:var(--color-#{$color}-800)];
+      &:not([class*="--warning"]) {
+        --text-color: var(--color-#{$color}-500);
+      }
+
+      &[class*="--warning"] {
+        --text-color: var(--color-warning-700);
+      }
     }
 
     &--outline-dark--#{$color} {
+      --bg-color: var(--color-#{$color}-100);
+      --border-color: var(--color-#{$color}-500);
+      --text-color: var(--color-#{$color}-800);
       --vc-icon-color: var(--color-#{$color}-700);
-
-      @apply bg-[color:var(--color-#{$color}-100)]
-      border-[color:var(--color-#{$color}-500)]
-      text-[color:var(--color-#{$color}-800)];
     }
   }
 
   &__content {
-    @apply grow gap-[inherit] text-center self-center [word-break:break-word];
+    @apply grow text-center self-center [word-break:break-word];
 
     &:has(.vc-icon) {
-      @apply flex items-center;
+      @apply flex items-center gap-[--gap];
     }
 
     &:not(:has(.vc-icon:first-child)) {
@@ -161,9 +176,8 @@ withDefaults(defineProps<IProps>(), {
       @apply pe-0.5;
     }
 
-    #{$truncate} &,
-    #{$truncate} & * {
-      @apply truncate;
+    #{$truncate} & {
+      @apply min-w-0 max-w-full truncate;
     }
 
     #{$square} & {
@@ -171,7 +185,7 @@ withDefaults(defineProps<IProps>(), {
     }
 
     & > * {
-      @apply text-left;
+      @apply text-start;
 
       #{$truncate} & {
         @apply truncate;