diff --git a/client-app/core/composables/index.ts b/client-app/core/composables/index.ts
index 6112ee2ca..9e7cb75ed 100644
--- a/client-app/core/composables/index.ts
+++ b/client-app/core/composables/index.ts
@@ -14,3 +14,4 @@ export { default as usePageHead } from "./usePageHead";
 export { default as useProductsRoutes } from "./useProductsRoutes";
 export { default as useRouteQueryParam } from "./useRouteQueryParam";
 export { default as useThemeContext } from "./useThemeContext";
+export { default as useComponentId } from "./useComponentId";
diff --git a/client-app/core/composables/useComponentId.ts b/client-app/core/composables/useComponentId.ts
new file mode 100644
index 000000000..d36aa39ac
--- /dev/null
+++ b/client-app/core/composables/useComponentId.ts
@@ -0,0 +1,5 @@
+import { getCurrentInstance } from "vue";
+
+export default function useComponentId(prefix = "") {
+  return prefix + getCurrentInstance()!.uid;
+}
diff --git a/client-app/pages/account/edit-quote.vue b/client-app/pages/account/edit-quote.vue
index 51a73eb49..60a7ade40 100644
--- a/client-app/pages/account/edit-quote.vue
+++ b/client-app/pages/account/edit-quote.vue
@@ -15,16 +15,13 @@
         icon="document-text"
         content-classes="px-6 pb-1 pt-2 lg:px-7 lg:pb-2"
       >
-        <div class="text-base leading-5 font-bold lg:text-15">
-          {{ $t("pages.account.quote_details.remarks_field_label") }}
-        </div>
-
-        <VcTextArea
+        <VcTextarea
+          :label="$t('pages.account.quote_details.remarks_field_label')"
           v-model="quote.comment"
-          :is-disabled="fetching"
+          :disabled="fetching"
           :max-length="1000"
           :rows="4"
-          class="mt-2 py-2 px-3 text-15 leading-5 font-medium resize-none lg:mt-1"
+          no-resize
           counter
         />
       </VcSectionWidget>
diff --git a/client-app/pages/account/view-quote.vue b/client-app/pages/account/view-quote.vue
index fb39d4e32..5c2a2858f 100644
--- a/client-app/pages/account/view-quote.vue
+++ b/client-app/pages/account/view-quote.vue
@@ -11,12 +11,7 @@
     <VcLayoutWithRightSidebar>
       <template #main>
         <!-- Quote products -->
-        <VcSectionWidget
-          :title="$t('pages.account.quote_details.products')"
-          icon="cube"
-          hide-desktop-title
-          content-classes="px-6 pt-3 pb-0 md:p-7"
-        >
+        <VcSectionWidget :title="$t('pages.account.quote_details.products')" icon="cube" hide-desktop-title>
           <QuoteLineItems :items="quote.items!" readonly />
         </VcSectionWidget>
 
@@ -41,10 +36,10 @@
 
         <VcCardWidget
           :title="$t('pages.account.quote_details.quote_data')"
-          hide-mobile-title
           class="-order-1 lg:order-none"
+          hide-mobile-title
         >
-          <div class="-mt-1 mb-1 space-y-1">
+          <div class="space-y-1">
             <div class="flex text-base">
               <span class="font-bold mr-2">{{ $t("pages.account.quote_details.created") }}:</span>
 
@@ -62,11 +57,11 @@
         </VcCardWidget>
 
         <VcCardWidget v-if="shippingAddress" :title="$t('pages.account.quote_details.shipping_address')" icon="cube">
-          <VcAddressInfo class="-mt-1" :address="shippingAddress!" />
+          <VcAddressInfo :address="shippingAddress!" />
         </VcCardWidget>
 
         <VcCardWidget v-if="billingAddress" :title="$t('pages.account.quote_details.billing_address')" icon="cash">
-          <VcAddressInfo class="-mt-1" :address="billingAddress!" />
+          <VcAddressInfo :address="billingAddress!" />
         </VcCardWidget>
       </template>
     </VcLayoutWithRightSidebar>
diff --git a/client-app/pages/cart.vue b/client-app/pages/cart.vue
index c2f926933..9bbba23cd 100644
--- a/client-app/pages/cart.vue
+++ b/client-app/pages/cart.vue
@@ -436,14 +436,13 @@
             class="shadow-inner pb-8 lg:shadow"
           >
             <div class="mx-5 xl:ml-28 lg:ml-6 xl:mr-11 lg:mr-6">
-              <p class="font-extrabold text-base mb-1" v-t="'pages.checkout.extra_section.comment_label'" />
-
-              <VcTextArea
+              <VcTextarea
                 v-model="comment"
-                :is-disabled="loading || creatingOrder || creatingQuote"
+                :label="$t('pages.checkout.extra_section.comment_label')"
+                :disabled="loading || creatingOrder || creatingQuote"
                 :max-length="1000"
                 :rows="4"
-                class="resize-none"
+                no-resize
                 counter
               />
             </div>
diff --git a/client-app/pages/checkout/shipping.vue b/client-app/pages/checkout/shipping.vue
index 9d4094606..fa6a3e9ac 100644
--- a/client-app/pages/checkout/shipping.vue
+++ b/client-app/pages/checkout/shipping.vue
@@ -1,8 +1,8 @@
 <template>
   <VcSectionWidget :title="'Specify shipping details'" icon="truck"></VcSectionWidget>
 
-  <VcSectionWidget :title="'Order comment'" icon="document-text" content-classes="px-6 pb-1 pt-3 lg:px-7 lg:pb-2">
-    <VcTextArea :max-length="1000" :rows="4" class="py-2 px-3 text-15 leading-5 font-medium resize-none" counter />
+  <VcSectionWidget :title="'Order comment'" icon="document-text">
+    <VcTextarea label="Normal input" placeholder="Please enter value" :max-length="1000" :rows="4" counter />
   </VcSectionWidget>
 </template>
 
diff --git a/client-app/shared/bulk-order/components/copy-and-paste.vue b/client-app/shared/bulk-order/components/copy-and-paste.vue
index 3e8e8af16..fdc0bd9d5 100644
--- a/client-app/shared/bulk-order/components/copy-and-paste.vue
+++ b/client-app/shared/bulk-order/components/copy-and-paste.vue
@@ -10,11 +10,11 @@
 
       <p class="mb-2 text-sm text-gray-500" v-html="$t('shared.bulk_order.copy_n_paste.guide_message')"></p>
 
-      <VcTextArea
+      <VcTextarea
         v-model.trim="text"
-        :is-disabled="loading"
+        :disabled="loading"
         :placeholder="$t('shared.bulk_order.copy_n_paste.text_area_placeholder')"
-        class="resize-none min-h-[292px] xl:min-h-[312px]"
+        :rows="14"
       />
 
       <div class="flex flex-wrap justify-between gap-3 mt-5 mb-2 md:mt-2 md:mb-0">
diff --git a/client-app/shared/bulk-order/components/manually.vue b/client-app/shared/bulk-order/components/manually.vue
index 92f5c9f5d..cbf6608d6 100644
--- a/client-app/shared/bulk-order/components/manually.vue
+++ b/client-app/shared/bulk-order/components/manually.vue
@@ -21,7 +21,7 @@
         <div class="w-1/3 xl:w-1/4 max-w-[164px] font-bold" v-t="'shared.bulk_order.manually.quantity_label'"></div>
       </div>
 
-      <div class="flex flex-col gap-y-5">
+      <div class="flex flex-col gap-y-4">
         <div v-for="(item, index) in items" :key="index" class="flex flex-row gap-x-5">
           <div class="w-full">
             <VcInput v-model.trim="item.productSku" :is-disabled="loading" placeholder="SKU" />
@@ -53,7 +53,7 @@
         </button>
       </div>
 
-      <div class="flex flex-row flex-wrap md:flex-nowrap justify-between gap-3 mt-5 mb-2 md:mb-0">
+      <div class="flex flex-row flex-wrap md:flex-nowrap justify-between gap-3 mt-6 mb-2 md:mb-0">
         <VcButton
           :is-disabled="!dirty || loading"
           @click="resetItems"
diff --git a/client-app/shared/company/components/invite-member-dialog.vue b/client-app/shared/company/components/invite-member-dialog.vue
index a8d988fcc..3feba31f4 100644
--- a/client-app/shared/company/components/invite-member-dialog.vue
+++ b/client-app/shared/company/components/invite-member-dialog.vue
@@ -9,7 +9,7 @@
       <p v-for="error in commonErrors" :key="error">{{ error }}</p>
     </VcAlert>
 
-    <form class="p-6 py-5 sm:p-5 sm:border-b h-full">
+    <form class="space-y-4 p-6 py-5 sm:p-5 sm:border-b h-full">
       <VcSelect
         v-model="roleId"
         :items="roles"
@@ -20,41 +20,30 @@
         text-field="normalizedName"
         value-field="id"
         size="lg"
-        class="mb-4"
         is-required
       />
 
-      <p>
-        <span class="font-bold text-gray-900">{{ $t("shared.account.invite_member_dialog.emails_label") }}</span>
-        <span class="text-[color:var(--color-danger)]">*</span>
-      </p>
-
-      <VcTextArea
+      <VcTextarea
         v-model.trim="emails"
+        :label="$t('shared.account.invite_member_dialog.emails_label')"
         :placeholder="$t('shared.account.invite_member_dialog.emails_placeholder')"
-        :is-disabled="loading"
-        :error-message="errors.emails"
-        class="max-h-36 block"
-        rows="2"
+        :disabled="loading"
+        :message="errors.emails"
+        :error="!!errors.emails"
+        :rows="2"
+        required
       />
 
-      <div class="mb-4 text-xs text-[color:var(--color-danger)]">{{ errors.emails }}</div>
-
-      <p>
-        <span class="font-bold text-gray-900">{{ $t("shared.account.invite_member_dialog.message_label") }}</span>
-      </p>
-
-      <VcTextArea
+      <VcTextarea
         v-model.trim="message"
+        :label="$t('shared.account.invite_member_dialog.message_label')"
         :placeholder="$t('shared.account.invite_member_dialog.message_placeholder')"
-        :is-disabled="loading"
+        :disabled="loading"
         :max-length="1000"
-        :error-message="errors.message"
+        :message="errors.message"
+        :error="!!errors.message"
         rows="3"
-        class="max-h-48 block"
       />
-
-      <div class="text-xs text-[color:var(--color-danger)]">{{ errors.message }}</div>
     </form>
 
     <template #actions="{ close }">
diff --git a/client-app/ui-kit/components/atoms/card-widget/vc-card-widget.vue b/client-app/ui-kit/components/atoms/card-widget/vc-card-widget.vue
index e05bf74cf..553e0b356 100644
--- a/client-app/ui-kit/components/atoms/card-widget/vc-card-widget.vue
+++ b/client-app/ui-kit/components/atoms/card-widget/vc-card-widget.vue
@@ -1,26 +1,24 @@
 <template>
   <div class="vc-card-widget">
-    <slot name="title" v-if="title">
-      <div
-        :class="[
-          'vc-card-widget__title',
-          {
-            'vc-section-widget__title--hide-mobile': hideMobileTitle,
-            'vc-section-widget__title--hide-desktop': hideDesktopTitle,
-          },
-        ]"
-      >
-        <div class="vc-card-widget__icon">
-          <VcHexagonIcon :icon="icon" />
-        </div>
-
-        <VcTypography variant="h3" weight="extrabold">
-          {{ title }}
-        </VcTypography>
+    <div
+      :class="[
+        'vc-card-widget__title',
+        {
+          'vc-card-widget__title--hide-mobile': hideMobileTitle || !title,
+          'vc-card-widget__title--hide-desktop': hideDesktopTitle || !title,
+        },
+      ]"
+    >
+      <div v-if="icon" class="vc-card-widget__icon">
+        <VcHexagonIcon :icon="icon" />
       </div>
-    </slot>
 
-    <div :class="contentClasses ?? 'vc-card-widget__content'">
+      <VcTypography variant="h3" weight="extrabold">
+        {{ title }}
+      </VcTypography>
+    </div>
+
+    <div class="vc-card-widget__content">
       <slot />
     </div>
   </div>
@@ -40,16 +38,13 @@ defineProps({
     type: String,
     default: "",
   },
-
-  contentClasses: {
-    type: String,
-    default: null,
-  },
 });
 </script>
 
 <style lang="scss">
 .vc-card-widget {
+  $hideMobileTitle: "";
+
   @apply relative bg-[color:var(--color-white)];
 
   @media (min-width: theme("screens.lg")) {
@@ -68,11 +63,13 @@ defineProps({
     @apply flex items-center gap-3 px-7 pt-6 pb-3;
 
     @media (min-width: theme("screens.lg")) {
-      @apply px-6 py-3;
+      @apply px-5 py-3 border-b;
     }
 
     &--hide-mobile {
-      @apply hidden lg:block;
+      $hideMobileTitle: &;
+
+      @apply hidden lg:flex;
     }
 
     &--hide-desktop {
@@ -88,7 +85,11 @@ defineProps({
     @apply px-7 pt-3 pb-7;
 
     @media (min-width: theme("screens.lg")) {
-      @apply px-6 pb-5 border-t;
+      @apply p-5;
+    }
+
+    #{$hideMobileTitle} ~ & {
+      @apply pt-7 lg:pt-5;
     }
   }
 }
diff --git a/client-app/ui-kit/components/atoms/icon/vc-icon.vue b/client-app/ui-kit/components/atoms/icon/vc-icon.vue
index 0090469bb..970d12760 100644
--- a/client-app/ui-kit/components/atoms/icon/vc-icon.vue
+++ b/client-app/ui-kit/components/atoms/icon/vc-icon.vue
@@ -1,5 +1,5 @@
 <template>
-  <svg :class="[`vc-icon`, `vc-icon--size-${size}`]">
+  <svg :class="[`vc-icon`, `vc-icon--size--${size}`]">
     <use :href="`/static/icons/basic/${name}.svg#icon`"></use>
   </svg>
 </template>
@@ -24,20 +24,22 @@ defineProps({
 .vc-icon {
   @apply text-inherit;
 
-  &--size-xxs {
-    @apply w-2.5 h-2.5;
-  }
+  &--size {
+    &--xxs {
+      @apply w-2.5 h-2.5;
+    }
 
-  &--size-xs {
-    @apply w-3.5 h-3.5;
-  }
+    &--xs {
+      @apply w-3.5 h-3.5;
+    }
 
-  &--size-sm {
-    @apply w-5 h-5;
-  }
+    &--sm {
+      @apply w-5 h-5;
+    }
 
-  &--size-md {
-    @apply w-6 h-6;
+    &--md {
+      @apply w-6 h-6;
+    }
   }
 }
 </style>
diff --git a/client-app/ui-kit/components/atoms/index.ts b/client-app/ui-kit/components/atoms/index.ts
index 40ceabd94..e32497e08 100644
--- a/client-app/ui-kit/components/atoms/index.ts
+++ b/client-app/ui-kit/components/atoms/index.ts
@@ -33,7 +33,7 @@ export { default as VcSection } from "./section/vc-section.vue";
 export { default as VcSectionWidget } from "./section-widget/vc-section-widget.vue";
 export { default as VcSelect } from "./select/vc-select.vue";
 export { default as VcTabs } from "./tabs/vc-tabs.vue";
-export { default as VcTextArea } from "./text-area/vc-text-area.vue";
+export { default as VcTextarea } from "./textarea/vc-textarea.vue";
 export { default as VcTooltip } from "./tooltip/vc-tooltip.vue";
 export { default as VcTotalDisplay } from "./total-display/vc-total-display.vue";
 export { default as VcTransitionScale } from "./transition-scale/vc-transition-scale.vue";
diff --git a/client-app/ui-kit/components/atoms/section-widget/vc-section-widget.vue b/client-app/ui-kit/components/atoms/section-widget/vc-section-widget.vue
index 62322544d..3dd5c1f32 100644
--- a/client-app/ui-kit/components/atoms/section-widget/vc-section-widget.vue
+++ b/client-app/ui-kit/components/atoms/section-widget/vc-section-widget.vue
@@ -1,24 +1,22 @@
 <template>
   <div class="vc-section-widget">
-    <slot name="title" v-if="title">
-      <div
-        :class="[
-          'vc-section-widget__title',
-          {
-            'vc-section-widget__title--hide-mobile': hideMobileTitle,
-            'vc-section-widget__title--hide-desktop': hideDesktopTitle,
-          },
-        ]"
-      >
-        <VcHexagonIcon :icon="icon" />
-
-        <VcTypography variant="h3" weight="extrabold">
-          {{ title }}
-        </VcTypography>
-      </div>
-    </slot>
-
-    <div :class="contentClasses ?? 'vc-section-widget__content'">
+    <div
+      :class="[
+        'vc-section-widget__title',
+        {
+          'vc-section-widget__title--hide-mobile': hideMobileTitle || !title,
+          'vc-section-widget__title--hide-desktop': hideDesktopTitle || !title,
+        },
+      ]"
+    >
+      <VcHexagonIcon :icon="icon" />
+
+      <VcTypography variant="h3" weight="extrabold">
+        {{ title }}
+      </VcTypography>
+    </div>
+
+    <div class="vc-section-widget__content">
       <slot></slot>
     </div>
   </div>
@@ -38,16 +36,14 @@ defineProps({
     type: String,
     default: "",
   },
-
-  contentClasses: {
-    type: String,
-    default: null,
-  },
 });
 </script>
 
 <style lang="scss">
 .vc-section-widget {
+  $hideMobileTitle: "";
+  $hideDesktopTitle: "";
+
   @apply relative bg-[color:var(--color-white)];
 
   @media (min-width: theme("screens.lg")) {
@@ -67,10 +63,14 @@ defineProps({
     @apply flex items-center gap-3 px-7 pt-6 pb-3;
 
     &--hide-mobile {
-      @apply hidden lg:block;
+      $hideMobileTitle: &;
+
+      @apply hidden lg:flex;
     }
 
     &--hide-desktop {
+      $hideDesktopTitle: &;
+
       @apply lg:hidden;
     }
   }
@@ -81,6 +81,16 @@ defineProps({
     @media (min-width: theme("screens.lg")) {
       @apply pb-6;
     }
+
+    #{$hideMobileTitle} ~ & {
+      @apply pt-7 lg:pt-3;
+    }
+
+    #{$hideDesktopTitle} ~ & {
+      @media (min-width: theme("screens.lg")) {
+        @apply pt-6;
+      }
+    }
   }
 }
 </style>
diff --git a/client-app/ui-kit/components/atoms/text-area/vc-text-area.vue b/client-app/ui-kit/components/atoms/text-area/vc-text-area.vue
deleted file mode 100644
index aab400fb1..000000000
--- a/client-app/ui-kit/components/atoms/text-area/vc-text-area.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-  <div>
-    <textarea
-      v-model="text"
-      :rows="rows"
-      :maxlength="maxLength"
-      :placeholder="placeholder"
-      :disabled="isDisabled"
-      class="rounded w-full leading-tight p-3 border focus:border-gray-400 outline-none"
-      :class="$attrs.class"
-    />
-    <div
-      v-if="counter"
-      class="text-xs text-right"
-      :class="symbolsLeft >= 10 ? 'text-gray-300' : 'text-[color:var(--color-danger)]'"
-    >
-      {{ symbolsCount }}
-    </div>
-  </div>
-</template>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
-
-<script setup lang="ts">
-import { computed } from "vue";
-
-const props = defineProps({
-  counter: Boolean,
-  isDisabled: Boolean,
-
-  rows: {
-    type: [Number, String],
-    default: 2,
-  },
-
-  maxLength: {
-    type: Number,
-    default: 999999,
-  },
-
-  modelValue: {
-    type: String,
-    default: "",
-  },
-
-  placeholder: {
-    type: String,
-    default: "",
-  },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-const text = computed<string>({
-  get: () => props.modelValue,
-  set: (newValue) => emit("update:modelValue", newValue),
-});
-
-const symbolsCount = computed(() => `${text.value.length}/${props.maxLength}`);
-const symbolsLeft = computed(() => props.maxLength - text.value.length);
-</script>
diff --git a/client-app/ui-kit/components/atoms/textarea/vc-textarea.vue b/client-app/ui-kit/components/atoms/textarea/vc-textarea.vue
new file mode 100644
index 000000000..6102e3c50
--- /dev/null
+++ b/client-app/ui-kit/components/atoms/textarea/vc-textarea.vue
@@ -0,0 +1,171 @@
+<template>
+  <div
+    :class="[
+      'vc-textarea',
+      {
+        'vc-textarea--disabled': disabled,
+        'vc-textarea--no-resize': noResize,
+        'vc-textarea--hide-empty-details': !showEmptyDetails,
+        'vc-textarea--error': error,
+      },
+      $attrs.class,
+    ]"
+  >
+    <label v-if="label" :for="componentId" class="vc-textarea__label">
+      {{ label }}
+
+      <span v-if="required" class="vc-textarea__asterisk">*</span>
+    </label>
+
+    <textarea
+      v-model="text"
+      :id="componentId"
+      :name="name"
+      :placeholder="placeholder"
+      :readonly="readonly"
+      :disabled="disabled"
+      :required="required"
+      :autofocus="autofocus"
+      :maxlength="maxLength"
+      :rows="rows"
+      class="vc-textarea__input"
+    />
+
+    <!-- Details -->
+    <div class="vc-textarea__details">
+      <!-- Message -->
+      <div v-if="message" class="vc-textarea__message" v-html="message"></div>
+
+      <!-- Counter -->
+      <div v-if="counter" class="vc-textarea__counter">
+        {{ text.length }}<template v-if="maxLength"> / {{ maxLength }}</template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useComponentId } from "@/core/composables";
+
+const props = defineProps({
+  readonly: Boolean,
+  disabled: Boolean,
+  required: Boolean,
+  autofocus: Boolean,
+  name: String,
+  label: String,
+  placeholder: String,
+  message: String,
+  error: Boolean,
+  counter: Boolean,
+  maxLength: [Number, String],
+  noResize: Boolean,
+  showEmptyDetails: Boolean,
+
+  modelValue: {
+    type: String,
+    default: "",
+  },
+
+  rows: {
+    type: [Number, String],
+    default: 2,
+  },
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const componentId = useComponentId("textarea-");
+
+const text = computed<string>({
+  get: () => props.modelValue,
+  set: (newValue) => emit("update:modelValue", newValue),
+});
+</script>
+
+<style lang="scss">
+.vc-textarea {
+  $disabled: "";
+  $noResize: "";
+  $hideEmptyDetails: "";
+  $error: "";
+
+  @apply flex flex-col gap-1 text-[color:var(--color-body-text)];
+
+  &--disabled {
+    $disabled: &;
+  }
+
+  &--no-resize {
+    $noResize: &;
+  }
+
+  &--hide-empty-details {
+    $hideEmptyDetails: &;
+  }
+
+  &--error {
+    $error: &;
+  }
+
+  &__label {
+    @apply text-15 font-bold;
+
+    #{$error} & {
+      @apply text-[color:var(--color-danger)];
+    }
+  }
+
+  &__asterisk {
+    @apply text-[color:var(--color-danger)];
+  }
+
+  &__input {
+    @apply p-3 w-full rounded border text-15 font-medium bg-white;
+
+    #{$noResize} & {
+      @apply resize-none;
+    }
+
+    &:focus {
+      @apply outline outline-offset-0 outline-2 outline-[color:var(--color-primary-light)];
+    }
+
+    &[disabled],
+    #{$disabled} & {
+      @apply bg-gray-100 cursor-not-allowed;
+    }
+
+    #{$error} & {
+      @apply border-[color:var(--color-danger)];
+    }
+  }
+
+  &__details {
+    @apply flex justify-end gap-2 min-h-[0.875rem] text-11;
+
+    #{$hideEmptyDetails} & {
+      @apply empty:hidden;
+    }
+  }
+
+  &__message {
+    @apply grow text-gray-400;
+
+    #{$error} & {
+      @apply text-[color:var(--color-danger)];
+    }
+  }
+
+  &__counter {
+    @apply font-medium text-right;
+  }
+}
+</style>
diff --git a/client-app/ui-kit/components/atoms/typography/vc-typography.vue b/client-app/ui-kit/components/atoms/typography/vc-typography.vue
index d9c7f0548..e4ab2539c 100644
--- a/client-app/ui-kit/components/atoms/typography/vc-typography.vue
+++ b/client-app/ui-kit/components/atoms/typography/vc-typography.vue
@@ -1,5 +1,8 @@
 <template>
-  <component :is="tag" :class="['vc-typography', `vc-typography--${variant}`, `vc-typography--${weight}`]">
+  <component
+    :is="tag"
+    :class="['vc-typography', `vc-typography--variant--${variant}`, `vc-typography--weight--${weight}`]"
+  >
     <slot />
   </component>
 </template>
@@ -32,67 +35,69 @@ defineProps({
 .vc-typography {
   @apply text-inherit;
 
-  // Variants
-  &--h1 {
-    @apply text-3xl uppercase tracking-wide;
+  &--variant {
+    &--h1 {
+      @apply text-3xl uppercase tracking-wide;
 
-    @media (min-width: theme("screens.lg")) {
-      @apply text-4xl;
+      @media (min-width: theme("screens.lg")) {
+        @apply text-4xl;
+      }
     }
-  }
 
-  &--h2 {
-    @apply text-3xl uppercase tracking-wide;
-  }
+    &--h2 {
+      @apply text-3xl uppercase tracking-wide;
+    }
 
-  &--h3 {
-    @apply text-xl uppercase tracking-wide;
-  }
+    &--h3 {
+      @apply text-xl uppercase tracking-wide;
+    }
 
-  &--h4 {
-  }
+    &--h4 {
+    }
 
-  &--h5 {
-  }
+    &--h5 {
+    }
 
-  &--h6 {
-  }
+    &--h6 {
+    }
 
-  &--large {
-    @apply text-lg;
+    &--large {
+      @apply text-lg;
 
-    @media (min-width: theme("screens.lg")) {
-      @apply text-xl;
+      @media (min-width: theme("screens.lg")) {
+        @apply text-xl;
+      }
     }
-  }
 
-  &--base {
-    @apply text-base;
-  }
+    &--base {
+      @apply text-base;
+    }
 
-  &--medium {
-    @apply text-sm;
-  }
+    &--medium {
+      @apply text-sm;
+    }
 
-  &--small {
-    @apply text-xs;
+    &--small {
+      @apply text-xs;
+    }
   }
 
-  // Weight
-  &--normal {
-    @apply font-normal;
-  }
+  &--weight {
+    &--normal {
+      @apply font-normal;
+    }
 
-  &--semibold {
-    @apply font-semibold;
-  }
+    &--semibold {
+      @apply font-semibold;
+    }
 
-  &--bold {
-    @apply font-bold;
-  }
+    &--bold {
+      @apply font-bold;
+    }
 
-  &--extrabold {
-    @apply font-extrabold;
+    &--extrabold {
+      @apply font-extrabold;
+    }
   }
 }
 </style>
diff --git a/client-app/ui-kit/components/molecules/layout-with-right-sidebar/vc-layout-with-right-sidebar.vue b/client-app/ui-kit/components/molecules/layout-with-right-sidebar/vc-layout-with-right-sidebar.vue
index e124d231b..5210e1dbe 100644
--- a/client-app/ui-kit/components/molecules/layout-with-right-sidebar/vc-layout-with-right-sidebar.vue
+++ b/client-app/ui-kit/components/molecules/layout-with-right-sidebar/vc-layout-with-right-sidebar.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="flex flex-col -mx-5 lg:mx-0 lg:flex-row lg:items-start lg:gap-x-6">
+  <div class="vc-layout-with-right-sidebar">
     <!-- Main section -->
-    <div class="contents lg:grow lg:block lg:space-y-6">
+    <div class="vc-layout-with-right-sidebar__main">
       <slot name="main"></slot>
     </div>
 
     <!-- Sidebar -->
     <div
-      class="contents lg:block lg:shrink-0 lg:space-y-6 lg:w-1/4 2xl:w-[285px]"
-      :class="{ 'lg:sticky lg:top-5': isSidebarSticky }"
+      class="vc-layout-with-right-sidebar__sidebar"
+      :class="{ 'vc-layout-with-right-sidebar__sidebar--sticky': isSidebarSticky }"
     >
       <slot name="sidebar"></slot>
     </div>
@@ -23,3 +23,39 @@ defineProps({
   },
 });
 </script>
+
+<style lang="scss">
+.vc-layout-with-right-sidebar {
+  @apply flex flex-col -mx-5;
+
+  @media (min-width: theme("screens.lg")) {
+    @apply mx-0 flex-row items-start gap-x-6;
+  }
+
+  &__main {
+    @apply contents;
+
+    @media (min-width: theme("screens.lg")) {
+      @apply grow block space-y-6;
+    }
+  }
+
+  &__sidebar {
+    @apply contents;
+
+    @media (min-width: theme("screens.lg")) {
+      @apply block shrink-0 space-y-6 w-1/4;
+    }
+
+    @media (min-width: theme("screens.2xl")) {
+      @apply w-[285px];
+    }
+
+    &--sticky {
+      @media (min-width: theme("screens.lg")) {
+        @apply sticky top-5;
+      }
+    }
+  }
+}
+</style>
diff --git a/config/settings_data.json b/config/settings_data.json
index 1fbf75838..b56539784 100644
--- a/config/settings_data.json
+++ b/config/settings_data.json
@@ -56,6 +56,7 @@
         }
       ],
       "color_primary": "#F0AD4E",
+      "color_primary_light": "#FFE9C1",
       "color_primary_hover": "#EC951A",
       "color_secondary": "#151B1E",
       "color_secondary_hover": "#000000",