diff --git a/ui/src/components/base/Field.svelte b/ui/src/components/base/Field.svelte
index 122ef0ef..a9b8c033 100644
--- a/ui/src/components/base/Field.svelte
+++ b/ui/src/components/base/Field.svelte
@@ -1,5 +1,6 @@
 <script>
     import { onMount } from "svelte";
+    import { slide } from "svelte/transition";
     import { errors, removeError } from "@/stores/errors";
     import CommonHelper from "@/utils/CommonHelper";
 
@@ -38,7 +39,7 @@
     <slot {uniqueId} />
 
     {#each fieldErrors as error}
-        <div class="help-block help-block-error">
+        <div class="help-block help-block-error" transition:slide|local={{ duration: 150 }}>
             {#if typeof error === "object"}
                 <pre>{error?.message || error?.code || defaultError}</pre>
             {:else}
diff --git a/ui/src/scss/_alert.scss b/ui/src/scss/_alert.scss
index d3e2ecf5..6debf62b 100644
--- a/ui/src/scss/_alert.scss
+++ b/ui/src/scss/_alert.scss
@@ -34,7 +34,7 @@
         color: var(--txtHintColor);
     }
     .close {
-        $size: 30px;
+        $size: 28px;
         display: inline-flex;
         margin-right: -5px;
         width: $size;