diff --git a/assets/icons/spinner-icon.svg b/assets/icons/spinner-icon.svg
new file mode 100644
index 0000000..cae8ea9
--- /dev/null
+++ b/assets/icons/spinner-icon.svg
@@ -0,0 +1,17 @@
+<svg viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M13.76 8.0001C14.1134 8.0001 14.4033 8.28735 14.368 8.63905C14.2764 9.55164 13.9897 10.4341 13.5274 11.2262C13.3492 11.5315 12.9459 11.5935 12.6599 11.3857C12.374 11.178 12.3146 10.7793 12.485 10.4696C12.7974 9.9024 12.9993 9.28094 13.08 8.63845C13.1241 8.28775 13.4065 8.0001 13.76 8.0001Z" fill="currentColor"/>
+  <path d="M13.2622 10.3429C13.5851 10.4867 13.7331 10.867 13.5578 11.1739C13.1029 11.9704 12.4821 12.6599 11.7375 13.1955C11.4506 13.4019 11.0569 13.2945 10.8802 12.9884C10.7034 12.6823 10.8113 12.2939 11.093 12.0804C11.6091 11.6892 12.0463 11.2036 12.3814 10.6495C12.5643 10.347 12.9393 10.1991 13.2622 10.3429Z" fill="currentColor"/>
+  <path d="M11.8544 12.2805C12.0909 12.5432 12.0714 12.9508 11.7864 13.1599C11.0469 13.7025 10.1993 14.0799 9.30127 14.2663C8.95519 14.3382 8.63922 14.08 8.60227 13.7284C8.56532 13.3769 8.82188 13.066 9.16605 12.9855C9.79658 12.838 10.3935 12.5723 10.925 12.2023C11.2151 12.0004 11.6179 12.0178 11.8544 12.2805Z" fill="currentColor"/>
+  <path d="M9.78002 13.4781C9.88924 13.8143 9.70562 14.1787 9.36023 14.2538C8.46401 14.4488 7.53615 14.4487 6.63992 14.2538C6.29454 14.1787 6.11091 13.8143 6.22014 13.4781C6.32936 13.1419 6.69021 12.9622 7.03737 13.0287C7.67335 13.1505 8.3268 13.1505 8.96279 13.0287C9.30995 12.9622 9.67079 13.1419 9.78002 13.4781Z" fill="currentColor"/>
+  <path d="M7.39805 13.7286C7.3611 14.0801 7.04513 14.3384 6.69905 14.2665C5.80102 14.0801 4.95338 13.7027 4.21392 13.1601C3.92895 12.951 3.90943 12.5433 4.14594 12.2807C4.38246 12.018 4.78519 12.0006 5.07531 12.2025C5.60679 12.5724 6.20374 12.8382 6.83427 12.9857C7.17844 13.0661 7.435 13.3771 7.39805 13.7286Z" fill="currentColor"/>
+  <path d="M5.12011 12.9886C4.94338 13.2947 4.54969 13.4021 4.26275 13.1957C3.5182 12.6601 2.89734 11.9706 2.44251 11.1741C2.26723 10.8672 2.41519 10.4868 2.73809 10.3431C3.061 10.1993 3.43599 10.3472 3.6189 10.6497C3.95397 11.2038 4.39121 11.6894 4.90725 12.0806C5.18894 12.2941 5.29685 12.6825 5.12011 12.9886Z" fill="currentColor"/>
+  <path d="M3.34011 11.3858C3.05415 11.5935 2.65081 11.5315 2.47263 11.2262C2.0103 10.4341 1.72357 9.55168 1.63201 8.63908C1.59673 8.28738 1.88658 8.00013 2.24004 8.00013C2.59351 8.00013 2.87592 8.28778 2.91999 8.63849C3.00072 9.28097 3.20265 9.90244 3.51498 10.4697C3.68546 10.7793 3.62606 11.178 3.34011 11.3858Z" fill="currentColor"/>
+  <path d="M2.36579 9.19775C2.02005 9.27124 1.67681 9.05053 1.6382 8.69918C1.53802 7.78749 1.63501 6.86471 1.92255 5.99377C2.03336 5.65813 2.41499 5.51361 2.7379 5.65737C3.0608 5.80114 3.2018 6.17879 3.09941 6.5171C2.91185 7.13687 2.84354 7.78674 2.89815 8.43197C2.92796 8.78418 2.71153 9.12426 2.36579 9.19775Z" fill="currentColor"/>
+  <path d="M2.36568 6.80247C2.01994 6.72898 1.79614 6.38774 1.90378 6.05107C2.18308 5.17745 2.64701 4.3739 3.26394 3.69521C3.50169 3.43366 3.90911 3.45685 4.14562 3.71953C4.38213 3.9822 4.35734 4.38455 4.1262 4.65197C3.70276 5.14187 3.37604 5.70777 3.16349 6.31943C3.04747 6.65331 2.71142 6.87596 2.36568 6.80247Z" fill="currentColor"/>
+  <path d="M3.33983 4.61428C3.05387 4.40652 2.98822 4.00375 3.22348 3.73996C3.83397 3.05548 4.58462 2.51009 5.42426 2.14101C5.74784 1.99877 6.1106 2.18567 6.21983 2.52183C6.32905 2.858 6.14275 3.21548 5.82283 3.36576C5.23674 3.64108 4.70809 4.02517 4.26513 4.4975C4.02334 4.75532 3.62579 4.82204 3.33983 4.61428Z" fill="currentColor"/>
+  <path d="M5.11979 3.01181C4.94306 2.7057 5.0469 2.31105 5.36912 2.16576C6.20523 1.78876 7.11282 1.59585 8.02998 1.60018C8.38344 1.60185 8.63882 1.92014 8.60187 2.27167C8.56493 2.62319 8.24933 2.87399 7.89594 2.88116C7.24854 2.89429 6.60937 3.03015 6.01259 3.28148C5.68684 3.41867 5.29652 3.31791 5.11979 3.01181Z" fill="currentColor"/>
+  <path d="M7.39771 2.27181C7.36076 1.92029 7.61614 1.60199 7.9696 1.60032C8.88676 1.59599 9.79435 1.7889 10.6305 2.16591C10.9527 2.3112 11.0565 2.70584 10.8798 3.01195C10.7031 3.31806 10.3127 3.41881 9.98699 3.28162C9.39021 3.0303 8.75104 2.89444 8.10364 2.8813C7.75025 2.87414 7.43465 2.62334 7.39771 2.27181Z" fill="currentColor"/>
+  <path d="M7.39771 2.27181C7.36076 1.92029 7.61614 1.60199 7.9696 1.60032C8.88677 1.59599 9.79435 1.7889 10.6305 2.16591C10.9527 2.3112 11.0565 2.70584 10.8798 3.01195C10.7031 3.31806 10.3127 3.41881 9.98699 3.28162C9.39021 3.0303 8.75104 2.89444 8.10364 2.88131C7.75025 2.87414 7.43465 2.62334 7.39771 2.27181Z" fill="currentColor"/>
+  <path d="M7.39783 2.27181C7.36088 1.92029 7.61626 1.60199 7.96972 1.60032C8.88689 1.59599 9.79447 1.7889 10.6306 2.16591C10.9528 2.3112 11.0566 2.70584 10.8799 3.01195C10.7032 3.31806 10.3129 3.41881 9.98711 3.28162C9.39034 3.0303 8.75117 2.89444 8.10376 2.88131C7.75037 2.87414 7.43478 2.62334 7.39783 2.27181Z" fill="currentColor"/>
+  <path d="M7.39771 2.27181C7.36076 1.92029 7.61614 1.60199 7.9696 1.60032C8.88676 1.59599 9.79435 1.7889 10.6305 2.16591C10.9527 2.3112 11.0565 2.70584 10.8798 3.01195C10.7031 3.31806 10.3127 3.41881 9.98699 3.28162C9.39021 3.0303 8.75104 2.89444 8.10364 2.8813C7.75025 2.87414 7.43465 2.62334 7.39771 2.27181Z" fill="currentColor"/>
+</svg>
diff --git a/assets/icons/x-circle-icon.svg b/assets/icons/x-circle-icon.svg
new file mode 100644
index 0000000..0d72ac5
--- /dev/null
+++ b/assets/icons/x-circle-icon.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="currentColor"><path d="m480-424 116 116q11 11 28 11t28-11q11-11 11-28t-11-28L536-480l116-116q11-11 11-28t-11-28q-11-11-28-11t-28 11L480-536 364-652q-11-11-28-11t-28 11q-11 11-11 28t11 28l116 116-116 116q-11 11-11 28t11 28q11 11 28 11t28-11l116-116Zm0 344q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/></svg>
\ No newline at end of file
diff --git a/assets/styles/_app-colors.scss b/assets/styles/_app-colors.scss
index 724816f..ea29bb9 100644
--- a/assets/styles/_app-colors.scss
+++ b/assets/styles/_app-colors.scss
@@ -7,12 +7,16 @@ $background-primary-light: #252627;
 $background-primary-main: #151314;
 $background-primary-dark: #0C0D10;
 
+$background-success-main: #161F18;
+
+$background-error-main: #1F1616;
+
 $background-secondary-main: #181819;
 
 /* status colors */
-$success-light: #5EDDB7;
+$success-light: #66EBC2;
 $success-main: #5EDDB7;
-$success-dark: #5EDDB7;
+$success-dark: #56CBA5;
 
 $error-light: #FF8383;
 $error-main: #FF8383;
diff --git a/assets/styles/_variables.scss b/assets/styles/_variables.scss
index e65a082..722f61c 100644
--- a/assets/styles/_variables.scss
+++ b/assets/styles/_variables.scss
@@ -16,6 +16,10 @@
 
   --background-secondary-main: #{$background-secondary-main};
 
+  --background-success-main: #{$background-success-main};
+
+  --background-error-main: #{$background-error-main};
+
   /* status colors */
   --success-light: #{$success-light};
   --success-main: #{$success-main};
diff --git a/components/AppAlert.vue b/components/AppAlert.vue
new file mode 100644
index 0000000..8135285
--- /dev/null
+++ b/components/AppAlert.vue
@@ -0,0 +1,80 @@
+<template>
+  <div :class="alertClasses">
+    <app-icon class="app-alert__icon" :name="alertIcon" />
+    <div class="app-alert__details">
+      <p class="app-alert__title">
+        {{ title }}
+      </p>
+      <p class="app-alert__message">
+        {{ message }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { AppIcon } from '#components'
+import { ICON_NAMES } from '@/enums'
+
+const props = defineProps<{
+  title?: string
+  message?: string
+  type: 'success' | 'error'
+}>()
+
+const alertClasses = computed(() => ['app-alert', `app-alert--${props.type}`])
+const alertIcon = computed(() => {
+  switch (props.type) {
+    case 'success':
+      return ICON_NAMES.checkCircle
+    case 'error':
+      return ICON_NAMES.xCircle
+  }
+})
+</script>
+
+<style scoped lang="scss">
+.app-alert {
+  display: flex;
+  align-items: center;
+  gap: toRem(12);
+  background: var(--app-alert-bg);
+  border: var(--app-alert-border);
+  color: var(--app-alert-color);
+  border-radius: var(--field-border-radius);
+  padding: toRem(16);
+
+  @include respond-to(small) {
+    padding: toRem(10) toRem(12);
+  }
+
+  & .app-alert__title {
+    color: var(--app-alert-color);
+
+    @include p-16-semi-bold;
+  }
+
+  & .app-alert__message {
+    color: var(--app-alert-color);
+
+    @include p-14-semi-bold;
+  }
+
+  & .app-alert__icon {
+    width: toRem(20);
+    aspect-ratio: 1;
+  }
+
+  &--success {
+    --app-alert-bg: var(--background-success-main);
+    --app-alert-border: #{toRem(1)} solid var(--success-main);
+    --app-alert-color: var(--success-main);
+  }
+
+  &--error {
+    --app-alert-bg: var(--background-error-main);
+    --app-alert-border: #{toRem(1)} solid var(--error-main);
+    --app-alert-color: var(--error-main);
+  }
+}
+</style>
diff --git a/components/AppButton.vue b/components/AppButton.vue
index a0c5ec1..e2d25bc 100644
--- a/components/AppButton.vue
+++ b/components/AppButton.vue
@@ -7,9 +7,9 @@
       :to="route"
     >
       <app-icon
-        v-if="iconLeft"
-        class="app-button__icon-left"
-        :name="iconLeft"
+        v-if="buttonIconLeft"
+        class="app-button__icon app-button__icon--left"
+        :name="buttonIconLeft"
       />
       <template v-if="$slots.default">
         <slot />
@@ -21,7 +21,7 @@
       </template>
       <app-icon
         v-if="iconRight"
-        class="app-button__icon-right"
+        class="app-button__icon app-button__icon--right"
         :name="iconRight"
       />
     </nuxt-link>
@@ -29,9 +29,9 @@
   <template v-else-if="href">
     <a class="app-button" :class="buttonClasses" v-bind="$attrs" :href="href">
       <app-icon
-        v-if="iconLeft"
-        class="app-button__icon-left"
-        :name="iconLeft"
+        v-if="buttonIconLeft"
+        class="app-button__icon app-button__icon--left"
+        :name="buttonIconLeft"
       />
       <template v-if="$slots.default">
         <slot />
@@ -43,7 +43,7 @@
       </template>
       <app-icon
         v-if="iconRight"
-        class="app-button__icon-right"
+        class="app-button__icon app-button__icon--right"
         :name="iconRight"
       />
     </a>
@@ -57,9 +57,9 @@
       :type="buttonType"
     >
       <app-icon
-        v-if="iconLeft"
-        class="app-button__icon-left"
-        :name="iconLeft"
+        v-if="buttonIconLeft"
+        class="app-button__icon app-button__icon--left"
+        :name="buttonIconLeft"
       />
       <template v-if="$slots.default">
         <slot />
@@ -71,7 +71,7 @@
       </template>
       <app-icon
         v-if="iconRight"
-        class="app-button__icon-right"
+        class="app-button__icon app-button__icon--right"
         :name="iconRight"
       />
     </button>
@@ -91,12 +91,13 @@ const props = withDefaults(
     text?: string
     scheme?: 'filled' | 'flat' | 'none'
     modification?: 'border-circle' | 'border-rounded' | 'text' | 'none'
-    color?: 'primary' | 'secondary' | 'none'
+    color?: 'primary' | 'secondary' | 'success' | 'error' | 'none'
     size?: 'large' | 'medium' | 'none'
     route?: RouteLocationRaw
     href?: string
     iconLeft?: ICON_NAMES | ''
     iconRight?: ICON_NAMES | ''
+    isLoading?: boolean
   }>(),
   {
     text: '',
@@ -108,14 +109,17 @@ const props = withDefaults(
     href: '',
     iconLeft: '',
     iconRight: '',
+    isLoading: false,
   },
 )
 
 const attrs = useAttrs()
 const slots = useSlots()
 
-const isDisabled = computed((): boolean =>
-  ['', 'disabled', true].includes(attrs.disabled as string | boolean),
+const isDisabled = computed(
+  (): boolean =>
+    ['', 'disabled', true].includes(attrs.disabled as string | boolean) ||
+    props.isLoading,
 )
 
 const buttonClasses = computed(() => [
@@ -130,8 +134,13 @@ const buttonClasses = computed(() => [
   ...((props.iconLeft || props.iconRight) && !props.text && !slots.default
     ? ['app-button--icon-only']
     : []),
+  ...(props.isLoading ? ['app-button--loading'] : []),
 ])
 
+const buttonIconLeft = computed(() =>
+  props.isLoading ? ICON_NAMES.spinner : props.iconLeft,
+)
+
 const buttonType = computed<ButtonType>(
   () => (attrs.type as ButtonType) || 'button',
 )
@@ -152,8 +161,8 @@ const buttonType = computed<ButtonType>(
   background-color: var(--app-button-bg);
   color: var(--app-button-text);
 
-  &:disabled,
-  &--disabled {
+  &:disabled:not(.app-button--loading),
+  &--disabled:not(.app-button--loading) {
     cursor: not-allowed;
     pointer-events: none;
     --app-button-bg: var(--app-button-disabled-bg);
@@ -161,6 +170,14 @@ const buttonType = computed<ButtonType>(
     --app-button-border: var(--app-button-disabled-border);
   }
 
+  &.app-button--disabled,
+  .app-button--loading {
+    background-color: var(--app-button-bg);
+    color: var(--app-button-text);
+    border: var(--app-button-border);
+    opacity: 0.5;
+  }
+
   &:not([disabled]):hover {
     text-decoration: none;
     transition-timing-function: var(--transition-timing-default);
@@ -331,6 +348,90 @@ const buttonType = computed<ButtonType>(
     }
   }
 
+  &--success {
+    --app-button-filled-bg: var(--success-main);
+    --app-button-filled-bg-hover: var(--success-dark);
+    --app-button-filled-bg-focused: var(--success-dark);
+    --app-button-filled-bg-active: var(--success-dark);
+
+    --app-button-filled-text: var(--text-primary-invert-main);
+    --app-button-filled-text-hover: var(--text-primary-invert-main);
+    --app-button-filled-text-focused: var(--text-primary-invert-light);
+    --app-button-filled-text-active: var(--text-primary-invert-main);
+
+    --app-button-flat-bg-hover: var(--background-success-light);
+    --app-button-flat-bg-focused: var(--background-success-light);
+    --app-button-flat-bg-active: var(--background-success-light);
+
+    --app-button-flat-text: var(--success-main);
+    --app-button-flat-text-hover: var(--success-main);
+    --app-button-flat-text-focused: var(--success-light);
+    --app-button-flat-text-active: var(--success-light);
+
+    --app-button-flat-border: #{toRem(1)} solid var(--success-main);
+    --app-button-flat-border-hover: #{toRem(1)} solid var(--success-main);
+    --app-button-flat-border-focused: #{toRem(1)} solid var(--success-light);
+    --app-button-flat-border-active: #{toRem(1)} solid var(--success-light);
+
+    --app-button-none-bg-hover: var(--background-success-light);
+    --app-button-none-bg-focused: var(--background-success-light);
+    --app-button-none-bg-active: var(--background-success-light);
+
+    --app-button-none-text: var(--success-main);
+    --app-button-none-text-hover: var(--success-main);
+    --app-button-none-text-focused: var(--success-light);
+    --app-button-none-text-active: var(--success-light);
+
+    &.app-button--text {
+      --app-button-text: var(--text-primary-invert-main);
+      --app-button-text-hover: var(--primary-light);
+      --app-button-text-focused: var(--primary-dark);
+      --app-button-text-active: var(--primary-dark);
+    }
+  }
+
+  &--error {
+    --app-button-filled-bg: var(--error-main);
+    --app-button-filled-bg-hover: var(--error-dark);
+    --app-button-filled-bg-focused: var(--error-dark);
+    --app-button-filled-bg-active: var(--error-dark);
+
+    --app-button-filled-text: var(--text-primary-invert-main);
+    --app-button-filled-text-hover: var(--text-primary-invert-main);
+    --app-button-filled-text-focused: var(--text-primary-invert-light);
+    --app-button-filled-text-active: var(--text-primary-invert-main);
+
+    --app-button-flat-bg-hover: var(--background-error-light);
+    --app-button-flat-bg-focused: var(--background-error-light);
+    --app-button-flat-bg-active: var(--background-error-light);
+
+    --app-button-flat-text: var(--error-main);
+    --app-button-flat-text-hover: var(--error-main);
+    --app-button-flat-text-focused: var(--error-light);
+    --app-button-flat-text-active: var(--error-light);
+
+    --app-button-flat-border: #{toRem(1)} solid var(--error-main);
+    --app-button-flat-border-hover: #{toRem(1)} solid var(--error-main);
+    --app-button-flat-border-focused: #{toRem(1)} solid var(--error-light);
+    --app-button-flat-border-active: #{toRem(1)} solid var(--error-light);
+
+    --app-button-none-bg-hover: var(--background-error-light);
+    --app-button-none-bg-focused: var(--background-error-light);
+    --app-button-none-bg-active: var(--background-error-light);
+
+    --app-button-none-text: var(--error-main);
+    --app-button-none-text-hover: var(--error-main);
+    --app-button-none-text-focused: var(--error-light);
+    --app-button-none-text-active: var(--error-light);
+
+    &.app-button--text {
+      --app-button-text: var(--text-primary-invert-main);
+      --app-button-text-hover: var(--primary-light);
+      --app-button-text-focused: var(--primary-dark);
+      --app-button-text-active: var(--primary-dark);
+    }
+  }
+
   &--none {
     $flat-border-hover: #{toRem(1)} solid var(--primary-light);
 
@@ -406,11 +507,16 @@ const buttonType = computed<ButtonType>(
       text-decoration: underline;
     }
   }
+}
 
-  .app-button__icon-left,
-  .app-button__icon-right {
-    height: 1.6em;
-    width: 1.6em;
+.app-button__icon {
+  height: toRem(20);
+  width: toRem(20);
+
+  &--left {
+    .app-button--loading & {
+      animation: spin 2s linear infinite;
+    }
   }
 }
 
@@ -423,4 +529,10 @@ const buttonType = computed<ButtonType>(
 
   @include text-ellipsis;
 }
+
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
 </style>
diff --git a/enums/icon-names.enum.ts b/enums/icon-names.enum.ts
index 492ad5c..340ec25 100644
--- a/enums/icon-names.enum.ts
+++ b/enums/icon-names.enum.ts
@@ -22,4 +22,5 @@ export enum ICON_NAMES {
   xCircle = 'x-circle',
   x = 'x',
   squareRoot = 'square-root',
+  spinner = 'spinner',
 }
diff --git a/fields/DatetimeField.vue b/fields/DatetimeField.vue
index 63d8e61..cd5ca2a 100644
--- a/fields/DatetimeField.vue
+++ b/fields/DatetimeField.vue
@@ -192,6 +192,7 @@ $z-index-btn: 1;
   right: 0;
   padding-bottom: var(--app-padding-bottom);
   width: min-content;
+  z-index: $z-index-btn;
 
   @include respond-to(small) {
     position: static;
diff --git a/forms/ConstantsForm.vue b/forms/ConstantsForm.vue
index 5c33a96..6d90e2f 100644
--- a/forms/ConstantsForm.vue
+++ b/forms/ConstantsForm.vue
@@ -1,33 +1,40 @@
 <template>
   <form class="constants-form" @submit.prevent>
-    <div class="constants-form__input">
+    <div class="constants-form__input-fields">
       <h3>{{ $t('constants-form.title') }}</h3>
-      <div>
-        <div class="constants-form__label-wrp">
-          <label class="constants-form__label">
-            {{ $t(`constants-form.random-bytes32-label`) }}
-          </label>
-          <button @click="updateRandomBytes">
-            <app-icon class="constants-form__btn-icon" :name="$icons.refresh" />
-          </button>
-        </div>
-        <input-field v-model="form.randomBytes32" readonly>
+      <div class="constants-form__input">
+        <input-field
+          v-model="form.zeroBytes32"
+          readonly
+          :label="$t(`constants-form.zero-bytes32-label`)"
+        >
           <template #nodeLeft>
-            <app-copy :value="form.randomBytes32" />
+            <app-copy :value="form.zeroBytes32" />
           </template>
         </input-field>
       </div>
-    </div>
 
-    <input-field
-      v-model="form.zeroBytes32"
-      readonly
-      :label="$t(`constants-form.zero-bytes32-label`)"
-    >
-      <template #nodeLeft>
-        <app-copy :value="form.zeroBytes32" />
-      </template>
-    </input-field>
+      <div class="constants-form__input">
+        <div>
+          <div class="constants-form__label-wrp">
+            <label class="constants-form__label">
+              {{ $t(`constants-form.random-bytes32-label`) }}
+            </label>
+            <button @click="updateRandomBytes">
+              <app-icon
+                class="constants-form__btn-icon"
+                :name="$icons.refresh"
+              />
+            </button>
+          </div>
+          <input-field v-model="form.randomBytes32" readonly>
+            <template #nodeLeft>
+              <app-copy :value="form.randomBytes32" />
+            </template>
+          </input-field>
+        </div>
+      </div>
+    </div>
   </form>
 </template>
 
@@ -58,6 +65,12 @@ const form = reactive({
   @include solidity-tools-form-part;
 }
 
+.constants-form__input-fields {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(20);
+}
+
 .constants-form__label-wrp {
   display: flex;
   gap: toRem(8);
diff --git a/forms/DateForm.vue b/forms/DateForm.vue
index 5563785..0fa6a9e 100644
--- a/forms/DateForm.vue
+++ b/forms/DateForm.vue
@@ -1,7 +1,13 @@
 <template>
   <form class="date-form" @submit.prevent>
     <div class="date-form__input">
-      <h3>{{ $t('date-form.input-title') }}</h3>
+      <div class="date-form__input-title-wrp">
+        <h3>{{ $t('date-form.input-title') }}</h3>
+        <datetime-field
+          :model-value="datetimeFieldTimestamp"
+          @update:model-value="onUpdateDatetimeFieldTimestamp"
+        />
+      </div>
       <div class="date-form__input-fields">
         <input-field
           v-for="(_, key) in form"
@@ -14,10 +20,6 @@
           @blur="touchField(key)"
         />
       </div>
-      <datetime-field
-        :model-value="datetimeFieldTimestamp"
-        @update:model-value="onUpdateDatetimeFieldTimestamp"
-      />
     </div>
     <div class="date-form__divider" />
     <div class="date-form__output">
@@ -162,6 +164,11 @@ const outputItems = computed(() => [
   @include solidity-tools-form-part;
 }
 
+.date-form__input-title-wrp {
+  display: flex;
+  justify-content: space-between;
+}
+
 .date-form__divider {
   @include solidity-tools-form-divider;
 }
diff --git a/forms/UnitConverterForm.vue b/forms/UnitConverterForm.vue
index 2ef9544..54a348b 100644
--- a/forms/UnitConverterForm.vue
+++ b/forms/UnitConverterForm.vue
@@ -35,16 +35,10 @@ type UnitConverterFormKeys = keyof typeof form
 
 const form = reactive({
   wei: '',
-  kwei: '',
-  mwei: '',
   gwei: '',
   finney: '',
   szabo: '',
   ether: '',
-  kether: '',
-  mether: '',
-  gether: '',
-  tether: '',
 })
 
 const { getFieldErrorMessage, touchField, isFormValid } = useFormValidation(
diff --git a/forms/VerifySignatureForm.vue b/forms/VerifySignatureForm.vue
index 459dc6b..4ebf735 100644
--- a/forms/VerifySignatureForm.vue
+++ b/forms/VerifySignatureForm.vue
@@ -1,7 +1,28 @@
 <template>
   <form class="verify-signature-form" @submit.prevent="verifySignature">
     <div class="verify-signature-form__input">
-      <h3>{{ $t('verify-signature-form.input-title') }}</h3>
+      <div class="verify-signature-form__title-wrp">
+        <h3 class="verify-signature-form__title">
+          {{ $t('verify-signature-form.input-title') }}
+        </h3>
+        <radio-button-field
+          v-model="form.messageMode"
+          class="verify-signature-form__radio-button-field"
+          :options="decodeOptions"
+        />
+      </div>
+      <template v-if="verifyingState === 'verified'">
+        <app-alert
+          type="success"
+          :message="$t('verify-signature-form.alert-success')"
+        />
+      </template>
+      <template v-if="verifyingState === 'unverified'">
+        <app-alert
+          type="error"
+          :message="$t('verify-signature-form.alert-error')"
+        />
+      </template>
       <div class="verify-signature-form__input-fields">
         <input-field
           v-model="form.accountAddress"
@@ -10,6 +31,13 @@
           :error-message="getFieldErrorMessage('accountAddress')"
           @blur="touchField('accountAddress')"
         />
+        <input-field
+          v-model="form.signature"
+          :label="$t('verify-signature-form.signature-label')"
+          :placeholder="$t('verify-signature-form.signature-placeholder')"
+          :error-message="getFieldErrorMessage('signature')"
+          @blur="touchField('signature')"
+        />
         <textarea-field
           v-model="form.message"
           :label="$t('verify-signature-form.message-label')"
@@ -17,19 +45,14 @@
           :error-message="getFieldErrorMessage('message')"
           @blur="touchField('message')"
         />
-        <textarea-field
-          v-model="form.signature"
-          :label="$t('verify-signature-form.signature-label')"
-          :placeholder="$t('verify-signature-form.signature-placeholder')"
-          :error-message="getFieldErrorMessage('signature')"
-          @blur="touchField('signature')"
-        />
         <div class="verify-signature-form__buttons">
           <app-button
+            class="verify-signature-form__button"
             type="submit"
             :text="$t('verify-signature-form.submit-btn')"
           />
           <app-button
+            class="verify-signature-form__button"
             scheme="flat"
             :text="$t('verify-signature-form.reset-btn')"
             @click="resetForm"
@@ -42,48 +65,74 @@
 
 <script lang="ts" setup>
 import { useFormValidation } from '@/composables'
-import { InputField, TextareaField } from '@/fields'
-import { ErrorHandler, address, hexadecimal, required } from '@/helpers'
-import { verifyMessage, getAddress } from 'ethers'
+import { InputField, TextareaField, RadioButtonField } from '@/fields'
+import { address, required, hexadecimal, ErrorHandler } from '@/helpers'
+import { type FieldOption, type DecodeType } from '@/types'
+import { getAddress, recoverAddress, toUtf8Bytes } from 'ethers'
 import { i18n } from '~/plugins/localization'
-import { reactive } from 'vue'
 
-const { showToast } = useNotifications()
+type VerifyingState = 'idle' | 'verified' | 'unverified'
+
 const { t } = i18n.global
 
+const decodeOptions = computed<FieldOption[]>(() => [
+  { title: t('hash-function-form.select-option-text'), value: 'text' },
+  { title: t('hash-function-form.select-option-hex'), value: 'hex' },
+])
+
 const INITIAL_FORM_STATE = {
   accountAddress: '',
   signature: '',
   message: '',
+  messageMode: decodeOptions.value[0].value as DecodeType,
 }
 
+const verifyingState = ref<VerifyingState>('idle')
+
 const form = reactive({ ...INITIAL_FORM_STATE })
 
+const rules = computed(() => ({
+  accountAddress: { required, address },
+  signature: { required, hexadecimal },
+  message: {
+    required,
+    ...(form.messageMode === 'hex' && { hexadecimal, required }),
+  },
+}))
+
 const { isFormValid, getFieldErrorMessage, touchField, validationController } =
-  useFormValidation(form, {
-    accountAddress: { required, address },
-    signature: { required, hexadecimal },
-    message: { required },
-  })
+  useFormValidation(form, rules)
 
-const verifySignature = async () => {
+const verifySignature = () => {
+  if (!isFormValid()) return
   try {
-    if (!isFormValid()) return
-    const signerAddr = verifyMessage(form.message, form.signature)
+    const messageToVerify =
+      form.messageMode === 'hex' ? form.message : toUtf8Bytes(form.message)
+    const signerAddr = recoverAddress(messageToVerify, form.signature)
     if (signerAddr !== getAddress(form.accountAddress)) {
-      showToast('error', t('verify-signature-form.not-verified'))
+      verifyingState.value = 'unverified'
       return
     }
-    showToast('success', t('verify-signature-form.verified'))
+    verifyingState.value = 'verified'
   } catch (error) {
-    ErrorHandler.process(error)
+    verifyingState.value = 'unverified'
+    ErrorHandler.processWithoutFeedback(error)
   }
 }
 
+const resetVerifyingState = () => {
+  verifyingState.value = 'idle'
+}
+
 const resetForm = () => {
   Object.assign(form, INITIAL_FORM_STATE)
   validationController.value.$reset()
+  resetVerifyingState()
 }
+
+watch(form, () => {
+  resetVerifyingState()
+})
 </script>
 
 <style lang="scss" scoped>
@@ -106,6 +155,18 @@ const resetForm = () => {
   gap: toRem(16);
 }
 
+.verify-signature-form__title-wrp {
+  display: flex;
+  align-items: baseline;
+  gap: inherit;
+  flex-wrap: wrap;
+}
+
+.verify-signature-form__title {
+  margin-right: auto;
+  min-width: max-content;
+}
+
 .verify-signature-form__output-item-label {
   @include field-label;
 }
@@ -115,7 +176,12 @@ const resetForm = () => {
 }
 
 .verify-signature-form__buttons {
+  margin-top: toRem(4);
   display: flex;
   gap: toRem(16);
 }
+
+.verify-signature-form__button {
+  width: toRem(150);
+}
 </style>
diff --git a/plugins/localization/resources/en.json b/plugins/localization/resources/en.json
index be85985..951aeef 100644
--- a/plugins/localization/resources/en.json
+++ b/plugins/localization/resources/en.json
@@ -86,7 +86,7 @@
     "duration-form-tab": "Duration"
   },
   "duration-form": {
-    "info": "Please note that in the convertor 1 year = {daysInYear} days and 1 month = {daysInMonth} days",
+    "info": "1 year = {daysInYear} days and 1 month = {daysInMonth} days",
     "pasted-value": "{years} year(s) {months} month(s) {weeks} week(s) {days} day(s)\n {hours} hour(s) {minutes} minute(s)",
     "input-title": "Enter Duration",
     "duration-label": "Duration in following format",
@@ -291,13 +291,15 @@
     "input-title": "Verify signature",
     "verified": "Message signature verified",
     "not-verified": "The Message Signature Verification Failed!",
-    "account-address-label": "Address",
+    "account-address-label": "Signer address",
     "account-address-placeholder": "Enter the signer address",
-    "message-label": "Message",
+    "message-label": "Signing message",
     "message-placeholder": "Enter the original message",
-    "signature-label": "Hash",
+    "signature-label": "Signature hash",
     "signature-placeholder": "Enter the hash of signed message",
     "submit-btn": "Check signature",
+    "alert-success": "The message is succesfully verified!",
+    "alert-error": "The message is not verified!",
     "reset-btn": "Reset form"
   }
 }
\ No newline at end of file