diff --git a/apps/showcase/doc/forms/SubmitDoc.vue b/apps/showcase/doc/forms/SubmitDoc.vue
index 0a9790e7c..4b60bb8a5 100644
--- a/apps/showcase/doc/forms/SubmitDoc.vue
+++ b/apps/showcase/doc/forms/SubmitDoc.vue
@@ -57,15 +57,15 @@ export default {
             code: {
                 basic: `
 <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
         <InputText name="username" type="text" placeholder="Username" fluid />
-        <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+        <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
     </div>
-    <div class="flex flex-col gap-2">
+    <div class="flex flex-col gap-1">
         <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
-        <Message v-if="$form.password?.invalid" severity="error">
-            <ul class="mx-1 px-3">
-                <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
+        <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
+            <ul class="my-0 px-4 flex flex-col gap-1">
+                <li v-for="(error, index) of $form.password.errors" :key="index">{{ error.message }}</li>
             </ul>
         </Message>
     </div>
@@ -78,15 +78,15 @@ export default {
         <Toast />
 
         <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
-                <Message v-if="$form.password?.invalid" severity="error">
-                    <ul class="mx-1 px-3">
-                        <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
+                <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
+                    <ul class="my-0 px-4 flex flex-col gap-1">
+                        <li v-for="(error, index) of $form.password.errors" :key="index">{{ error.message }}</li>
                     </ul>
                 </Message>
             </div>
@@ -149,15 +149,15 @@ export default {
         <Toast />
 
         <Form v-slot="$form" :initialValues :resolver @submit="onFormSubmit" class="flex flex-col gap-4 w-full sm:w-60">
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <InputText name="username" type="text" placeholder="Username" fluid />
-                <Message v-if="$form.username?.invalid" severity="error">{{ $form.username.error.message }}</Message>
+                <Message v-if="$form.username?.invalid" severity="error" size="small" variant="simple">{{ $form.username.error.message }}</Message>
             </div>
-            <div class="flex flex-col gap-2">
+            <div class="flex flex-col gap-1">
                 <Password name="password" placeholder="Password" :feedback="false" toggleMask fluid />
-                <Message v-if="$form.password?.invalid" severity="error">
-                    <ul class="mx-1 px-3">
-                        <li v-for="(error, index) of $form.password.errors" :key="index" class="py-1">{{ error.message }}</li>
+                <Message v-if="$form.password?.invalid" severity="error" size="small" variant="simple">
+                    <ul class="my-0 px-4 flex flex-col gap-1">
+                        <li v-for="(error, index) of $form.password.errors" :key="index">{{ error.message }}</li>
                     </ul>
                 </Message>
             </div>