diff --git a/src/components/hint/VHint.vue b/src/components/hint/VHint.vue
index 455181a..1a3b039 100644
--- a/src/components/hint/VHint.vue
+++ b/src/components/hint/VHint.vue
@@ -39,21 +39,28 @@ const severity = computed(() => {
   <Message
     variant="simple"
     :severity="severity"
+    class="p-message"
     :class="[styles['text-body-XS-mention-text-Regular'], {'disabled': props.disabled }]"
-    :icon="props.icon ? iconClass: undefined"
     :closable="false"
     size="small"
     role="alert"
   >
     {{ props.title }}
+    <template #icon v-if="props.icon">
+      <i :class="[iconClass]" style="font-size: var(--text-body-SM-detail-text-Regular-size);"></i>
+    </template>
   </Message>
 </template>
 
 <style scoped>
 .p-message.disabled {color: var(--text-disabled-grey);}
 
-.p-message-icon{
+.p-message {
   display: flex;
-  align-items: center;
+  flex-direction: row;
+  align-items: baseline;
+  padding: 0px;
+  gap: var(--p-message-content-gap);
+  height: 100%;
 }
 </style>