diff --git a/app.vue b/app.vue
index 6739485..e11c82c 100644
--- a/app.vue
+++ b/app.vue
@@ -2,8 +2,24 @@
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>
+  <div id="app-modals" />
 </template>
 
 <script lang="ts" setup>
+import { useViewportSizes } from '@/composables'
+import { debounce } from 'lodash-es'
+import { onBeforeUnmount, onMounted } from 'vue'
 import 'virtual:svg-icons-register'
+
+const { assignVhCssVariable } = useViewportSizes()
+
+const assignVhCssVariableDebounced = debounce(assignVhCssVariable, 300)
+
+onMounted(() => {
+  window.addEventListener('resize', assignVhCssVariableDebounced)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', assignVhCssVariableDebounced)
+})
 </script>
diff --git a/assets/styles/_app-colors.scss b/assets/styles/_app-colors.scss
index 34f8b36..4dd145b 100644
--- a/assets/styles/_app-colors.scss
+++ b/assets/styles/_app-colors.scss
@@ -49,3 +49,6 @@ $text-primary-invert-dark: #0F141E;
 $border-primary-light: #FCFCFC;
 $border-primary-main: #595758;
 $border-primary-dark: #2E2E2E;
+
+/* backdrop colors */
+$backdrop-modal: rgba(#000000, 0.5);
diff --git a/assets/styles/_global.scss b/assets/styles/_global.scss
index c98c517..13ce41e 100644
--- a/assets/styles/_global.scss
+++ b/assets/styles/_global.scss
@@ -8,6 +8,7 @@ html {
   -webkit-font-smoothing: antialiased;
   box-sizing: border-box;
   min-height: vh(100);
+  min-width: toRem(375);
   display: flex;
   flex-direction: column;
 }
@@ -19,7 +20,6 @@ body, #__nuxt {
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
-  width: 100vw;
   background: var(--background-primary-dark);
 }
 
@@ -101,6 +101,11 @@ a {
   @include p-16-regular;
 }
 
+main {
+  margin-top: var(--app-height-header);
+  padding: var(--app-padding);
+}
+
 h1 {
   font-family: var(--app-font-family-main);
   font-size: toRem(56);
@@ -115,6 +120,11 @@ h2 {
   font-weight: 500;
   line-height: toRem(48);
   letter-spacing: 0;
+
+  @include respond-to(medium) {
+    font-size: toRem(26);
+    line-height: toRem(32);
+  }
 }
 
 h3 {
@@ -123,43 +133,9 @@ h3 {
   font-weight: 500;
   line-height: toRem(32);
   letter-spacing: 0;
-}
-
-.fade-enter-active {
-  animation: fade-in 0.25s;
-}
-
-.fade-leave-active {
-  animation: fade-in 0.25s reverse;
-}
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
 
-  100% {
-    opacity: 1;
+  @include respond-to(medium) {
+    font-size: toRem(20);
+    line-height: toRem(28);
   }
 }
-
-.layout-wrapper {
-  max-width: toRem(1800);
-  margin: 0 auto;
-}
-
-.block {
-  display: flex;
-  flex-direction: column;
-  min-height: toRem(400);
-  width: 100%;
-  border-radius: var(--border-radius-main);
-  background: var(--background-primary-main);
-}
-
-.content {
-  display: flex;
-  padding: toRem(40);
-  height: 100%;
-  flex-direction: column;
-}
diff --git a/assets/styles/_mixins.scss b/assets/styles/_mixins.scss
index f452a95..a191551 100644
--- a/assets/styles/_mixins.scss
+++ b/assets/styles/_mixins.scss
@@ -97,7 +97,6 @@ $media-breakpoints: (
   letter-spacing: var(--field-error-letter-spacing);
   color: var(--field-error);
   margin-top: var(--field-error-margin-top);
-  padding-left: var(--field-padding-left);
   transition: var(--field-transition-duration) ease;
   transition-property: opacity, color, font-size, transform;
 }
@@ -129,6 +128,51 @@ $media-breakpoints: (
   }
 }
 
+@mixin solidity-tools-page-base {
+  display: flex;
+  flex-direction: column;
+  gap: toRem(32);
+
+  @include respond-to(medium) {
+    gap: toRem(24);
+  }
+}
+
+@mixin solidity-tools-page-content {
+  display: flex;
+  flex-direction: column;
+  padding: toRem(40);
+  border-radius: 0 0 var(--border-radius-main) var(--border-radius-main);
+  background: var(--background-primary-main);
+
+  @include respond-to(medium) {
+    padding: toRem(24) toRem(16) toRem(24) toRem(16);
+  }
+}
+
+@mixin solidity-tools-form {
+  display: grid;
+  grid-gap: toRem(40);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(24);
+  }
+}
+
+@mixin solidity-tools-form-part {
+  display: grid;
+  grid-gap: toRem(20);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(16) toRem(24);
+  }
+}
+
+@mixin solidity-tools-form-divider {
+  height: toRem(1);
+  background: var(--border-primary-main);
+}
+
 @mixin page-msg {
   max-width: toRem(420);
   width: 100%;
diff --git a/assets/styles/_variables.scss b/assets/styles/_variables.scss
index d77a8d7..7b533b5 100644
--- a/assets/styles/_variables.scss
+++ b/assets/styles/_variables.scss
@@ -56,6 +56,9 @@
   --border-primary-main: #{$border-primary-main};
   --border-primary-dark: #{$border-primary-dark};
 
+  /* common colors */
+  --backdrop-modal: #{$backdrop-modal};
+
   /* border radii */
   --border-radius-main: #{toRem(8)};
 
@@ -66,19 +69,14 @@
   --app-padding-left: #{toRem(32)};
   --app-padding-top: #{toRem(48)};
   --app-padding-bottom: #{toRem(48)};
+  --app-height-header: #{toRem(80)};
 
-  @include respond-to(xmedium) {
-    --app-padding-right: #{toRem(24)};
-    --app-padding-left: #{toRem(24)};
-    --app-padding-top: #{toRem(32)};
-    --app-padding-bottom: #{toRem(32)};
-  }
-
-  @include respond-to(small) {
-    --app-padding-right: #{toRem(12)};
-    --app-padding-left: #{toRem(12)};
+  @include respond-to(medium) {
+    --app-padding-right: #{toRem(16)};
+    --app-padding-left: #{toRem(16)};
     --app-padding-top: #{toRem(24)};
     --app-padding-bottom: #{toRem(24)};
+    --app-height-header: #{toRem(70)};
   }
 
   --app-padding:
diff --git a/assets/styles/flatpickr.scss b/assets/styles/flatpickr.scss
index 23b851e..8030ae6 100644
--- a/assets/styles/flatpickr.scss
+++ b/assets/styles/flatpickr.scss
@@ -16,6 +16,10 @@ $z-index-arrow: 1;
   background: var(--primary-main);
   padding: var(--field-padding-top) var(--field-padding-right)
     toRem(8) var(--field-padding-left);
+
+  @include respond-to(small) {
+    padding: toRem(8) toRem(4) toRem(4);
+  }
 }
 
 .flatpickr-month {
@@ -169,6 +173,10 @@ $z-index-arrow: 1;
 .dayContainer {
   padding: toRem(8) var(--field-padding-right)
     toRem(8) var(--field-padding-left);
+
+  @include respond-to(small) {
+    padding: toRem(4);
+  }
 }
 
 .flatpickr-weekdaycontainer {
@@ -259,6 +267,10 @@ $z-index-arrow: 1;
       }
     }
   }
+
+  @include respond-to(small) {
+    margin: 0 toRem(4) toRem(4);
+  }
 }
 
 .flatpickr-hour,
diff --git a/components/AppFooter.vue b/components/AppFooter.vue
index 616748c..a8df835 100644
--- a/components/AppFooter.vue
+++ b/components/AppFooter.vue
@@ -11,7 +11,12 @@
   display: flex;
   gap: toRem(24);
   padding: toRem(24) toRem(80);
-  border-top: toRem(1) solid var(--background-primary-light);
+  box-shadow: 0 toRem(-1) var(--background-primary-light);
+
+  @include respond-to(medium) {
+    padding: toRem(16) var(--app-padding-right) toRem(16)
+      var(--app-padding-left);
+  }
 }
 
 .app-footer__item {
diff --git a/components/AppModal.vue b/components/AppModal.vue
new file mode 100644
index 0000000..fc21cbf
--- /dev/null
+++ b/components/AppModal.vue
@@ -0,0 +1,90 @@
+<template>
+  <teleport to="#app-modals">
+    <transition name="app-modal" appear>
+      <div
+        v-if="isResettable ? isShown : true"
+        v-show="!isResettable ? isShown : true"
+        class="app-modal"
+        tabindex="0"
+        role="button"
+        ref="modalBackdropElement"
+        @click="onBackdropClick"
+      >
+        <div class="app-modal__pane" v-bind="$attrs">
+          <slot :close="closeModal" />
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const emit = defineEmits<{
+  (event: 'update:is-shown', value: boolean): void
+}>()
+
+const props = withDefaults(
+  defineProps<{
+    isShown?: boolean
+    isCloseByClickOutside?: boolean
+    isResettable?: boolean
+  }>(),
+  {
+    isShown: false,
+    isCloseByClickOutside: true,
+    isResettable: true,
+  },
+)
+
+const modalBackdropElement = ref<HTMLDivElement | undefined>()
+
+const closeModal = () => {
+  emit('update:is-shown', false)
+}
+
+const onBackdropClick = (event: Event) => {
+  if (
+    props.isCloseByClickOutside &&
+    event.target === modalBackdropElement.value
+  ) {
+    closeModal()
+    event.preventDefault()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$z-index: 1300;
+
+.app-modal {
+  display: flex;
+  position: fixed;
+  inset: 0;
+  z-index: $z-index;
+  height: vh(100);
+  width: 100%;
+  background: var(--backdrop-modal);
+  overflow-y: auto;
+  padding: var(--app-padding);
+
+  &-enter-active,
+  &-leave-active {
+    transition: var(--field-transition-duration) ease-in-out;
+    transition-property: opacity, transform;
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+    transform: scale(1.1);
+  }
+}
+
+.app-modal__pane {
+  position: relative;
+  margin: auto;
+  flex-shrink: 0;
+}
+</style>
diff --git a/components/AppNavbar.vue b/components/AppNavbar.vue
index 1c9828e..cc2ffaa 100644
--- a/components/AppNavbar.vue
+++ b/components/AppNavbar.vue
@@ -1,7 +1,17 @@
 <template>
-  <div class="app-navbar" :class="{ 'app-navbar--dark': isDarkenBg }">
+  <div class="app-navbar" :class="{ 'app-navbar--dark': isDark }">
     <app-logo />
-    <nav class="app-navbar__nav">
+    <button
+      v-if="hasBurgerMenu"
+      class="app-navbar__burger-btn"
+      :class="{
+        'app-navbar__burger-btn--active': isActiveBurgerMenu,
+      }"
+      @click="emit('burger-menu-click')"
+    >
+      <span class="app-navbar__burger-btn-line" />
+    </button>
+    <nav v-else class="app-navbar__nav">
       <app-button
         :text="$t('app-navbar.link-text')"
         :href="config.COMPANY_URL"
@@ -18,12 +28,30 @@ import { AppLogo, AppButton } from '#components'
 import { config } from '@/config'
 import { onUnmounted, ref, onMounted } from 'vue'
 
-const isDarkenBg = ref(false)
+const emit = defineEmits<{
+  (event: 'burger-menu-click'): void
+}>()
 
+const props = withDefaults(
+  defineProps<{
+    isStaticDark?: boolean
+    hasBurgerMenu?: boolean
+    isActiveBurgerMenu?: boolean
+  }>(),
+  {
+    isStaticDark: false,
+    hasBurgerMenu: false,
+    isActiveBurgerMenu: false,
+  },
+)
+
+const _isDark = ref(false)
 const toggleColorHeader = () => {
-  isDarkenBg.value = window.scrollY >= 1
+  _isDark.value = window.scrollY >= 1
 }
 
+const isDark = computed(() => props.isStaticDark || _isDark.value)
+
 onMounted(() => {
   window.addEventListener('scroll', toggleColorHeader)
 })
@@ -35,25 +63,27 @@ onUnmounted(() => {
 
 <style lang="scss" scoped>
 $z-index: 100;
+$height-burger-btn-line: toRem(2);
+$gap-burger-btn-line: toRem(8);
 
 .app-navbar {
   position: fixed;
-  left: 0;
   top: 0;
-  width: 100vw;
+  right: 0;
+  left: 0;
   z-index: $z-index;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: toRem(24) var(--app-padding-right) toRem(24) var(--app-padding-left);
+  padding: 0 var(--app-padding-right) 0 var(--app-padding-left);
+  height: var(--app-height-header);
   background: transparent;
   transition: var(--field-transition-duration) ease;
-  transition-property: background-color, border-color;
-  border-bottom: toRem(1) solid transparent;
+  transition-property: background-color, box-shadow;
 
   &--dark {
     background: var(--background-primary-main);
-    border-color: var(--background-primary-light);
+    box-shadow: 0 toRem(1) var(--background-primary-light);
   }
 }
 
@@ -61,4 +91,51 @@ $z-index: 100;
   display: flex;
   gap: toRem(12);
 }
+
+.app-navbar__burger-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: toRem(22);
+  height: calc($height-burger-btn-line * 3 + $gap-burger-btn-line * 2);
+}
+
+.app-navbar__burger-btn-line {
+  &,
+  &::before,
+  &::after {
+    display: block;
+    position: absolute;
+    width: 100%;
+    height: $height-burger-btn-line;
+    background-color: var(--primary-light);
+    border-radius: var(--border-primary-main);
+    transition: var(--field-transition-duration);
+  }
+
+  .app-navbar__burger-btn--active & {
+    transform: rotate(-45deg);
+  }
+
+  &:before {
+    content: '';
+    top: -$gap-burger-btn-line;
+
+    .app-navbar__burger-btn--active & {
+      top: 0;
+      transform: rotate(-90deg);
+    }
+  }
+
+  &:after {
+    content: '';
+    top: $gap-burger-btn-line;
+
+    .app-navbar__burger-btn--active & {
+      top: 0;
+      transform: rotate(-90deg);
+    }
+  }
+}
 </style>
diff --git a/components/AppTabs.vue b/components/AppTabs.vue
index f0b709a..9a37af8 100644
--- a/components/AppTabs.vue
+++ b/components/AppTabs.vue
@@ -36,9 +36,7 @@ const updateTab = (tab: Tab) => {
 
 <style lang="scss" scoped>
 .app-tabs {
-  display: grid;
-  grid-auto-columns: min-content;
-  grid-auto-flow: column;
+  display: flex;
   overflow-x: scroll;
   overflow-y: hidden;
   border-radius: var(--border-radius-main) var(--border-radius-main) 0 0;
@@ -66,6 +64,14 @@ const updateTab = (tab: Tab) => {
       --app-button-text-focused: var(--text-primary-invert-main);
       --app-button-text-active: var(--text-primary-invert-main);
     }
+
+    @include respond-to(medium) {
+      width: 100%;
+
+      :deep(.icon) {
+        display: none;
+      }
+    }
   }
 }
 </style>
diff --git a/components/AuditsCard.vue b/components/AuditsCard.vue
index 08a684d..d3f1588 100644
--- a/components/AuditsCard.vue
+++ b/components/AuditsCard.vue
@@ -3,7 +3,9 @@
     <img :src="audit.imgSrc" class="audits-card__img" alt="audit-image" />
     <div class="audits-card__content">
       <div class="audits-card__title-wrp">
-        <h3>{{ audit.title }}</h3>
+        <h3 class="audits-card__title">
+          {{ audit.title }}
+        </h3>
         <div class="audits-card__circle" />
         <h3>{{ audit.fileSize }}</h3>
       </div>
@@ -49,7 +51,7 @@ defineProps<{
 
 .audits-card__content {
   display: flex;
-  gap: toRem(12);
+  gap: toRem(16);
 
   @include respond-to(xsmall) {
     flex-direction: column;
@@ -57,9 +59,15 @@ defineProps<{
 }
 
 .audits-card__title-wrp {
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
   align-items: center;
-  gap: toRem(8);
+  grid-gap: toRem(8);
+  max-width: max-content;
+}
+
+.audits-card__title {
+  @include text-ellipsis;
 }
 
 .audits-card__circle {
diff --git a/components/DropMenu.vue b/components/DropMenu.vue
index 0c00e6a..0e780ec 100644
--- a/components/DropMenu.vue
+++ b/components/DropMenu.vue
@@ -1,27 +1,29 @@
 <template>
   <transition name="drop-item">
-    <div v-if="isOpen" class="drop-menu" ref="dropMenuElement">
-      <template v-if="$slots.default">
-        <slot :drop-menu="{ select, close }" />
-      </template>
-      <template v-else-if="options?.length">
-        <app-button
-          v-for="(option, idx) in options"
-          :key="idx"
-          class="drop-menu__option"
-          :class="{
-            'drop-menu__option--active': modelValue === option.value,
-            'drop-menu__option--nav': navOptionIdx === idx,
-          }"
-          scheme="none"
-          color="none"
-          modification="none"
-          @click="select(option.value)"
-          @pointermove="emit('update:nav-option-idx', idx)"
-        >
-          {{ option.title }}
-        </app-button>
-      </template>
+    <div v-if="isOpen" class="drop-menu">
+      <div ref="dropMenuWrpElement" class="drop-menu__wrp">
+        <template v-if="$slots.default">
+          <slot :drop-menu="{ select, close }" />
+        </template>
+        <template v-else-if="options?.length">
+          <app-button
+            v-for="(option, idx) in options"
+            :key="idx"
+            class="drop-menu__option"
+            :class="{
+              'drop-menu__option--active': modelValue === option.value,
+              'drop-menu__option--nav': navOptionIdx === idx,
+            }"
+            scheme="none"
+            color="none"
+            modification="none"
+            @click="select(option.value)"
+            @pointermove="emit('update:nav-option-idx', idx)"
+          >
+            {{ option.title }}
+          </app-button>
+        </template>
+      </div>
     </div>
   </transition>
 </template>
@@ -49,7 +51,7 @@ const props = withDefaults(
   },
 )
 
-const dropMenuElement = ref<HTMLDivElement | null>(null)
+const dropMenuWrpElement = ref<HTMLDivElement | null>(null)
 
 const select = (value: FieldOption['value']) => {
   emit('update:model-value', value)
@@ -60,46 +62,52 @@ const close = () => {
   emit('update:is-open', false)
 }
 
+// reset navOptionIdx on open
 watch(
-  () => props.modelValue,
-  () => emit('update:is-open', false),
+  () => props.isOpen,
+  newValue => {
+    if (newValue) {
+      const modelValueIdx = props.options.findIndex(
+        option => option.value === props.modelValue,
+      )
+
+      emit('update:nav-option-idx', modelValueIdx !== -1 ? modelValueIdx : 0)
+    }
+  },
 )
 
-watch(dropMenuElement, () => {
-  const modelValueIdx = props.options.findIndex(
-    option => option.value === props.modelValue,
-  )
-
-  emit('update:nav-option-idx', modelValueIdx !== -1 ? modelValueIdx : 0)
-})
-
-watch([() => props.navOptionIdx, dropMenuElement], () => {
-  if (!dropMenuElement.value?.children.length) return
+// scroll to element with navOptionIdx
+watch([() => props.navOptionIdx, dropMenuWrpElement], () => {
+  if (!dropMenuWrpElement.value?.children.length) return
 
-  dropMenuElement.value.children[props.navOptionIdx].scrollIntoView({
+  dropMenuWrpElement.value.children[props.navOptionIdx].scrollIntoView({
     block: 'nearest',
   })
 })
 </script>
 
 <style lang="scss" scoped>
-$z-local-index: 1;
+$z-local-index: 10;
 
 .drop-menu {
   position: absolute;
   top: 110%;
   display: flex;
   flex-direction: column;
-  overflow: hidden auto;
+  overflow: hidden;
   width: 100%;
   max-height: 500%;
   z-index: $z-local-index;
-  background: var(--field-bg-primary);
   border-radius: var(--border-radius-main);
 
   @include drop-item-shadow;
 }
 
+.drop-menu__wrp {
+  overflow: auto;
+  background: var(--field-bg-primary);
+}
+
 .drop-menu__option {
   font-family: var(--field-text-font-family);
   font-size: var(--field-text-font-size);
diff --git a/components/PageTitle.vue b/components/PageTitle.vue
deleted file mode 100644
index 1ff3a77..0000000
--- a/components/PageTitle.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
-  <div class="page-title">
-    <h2 class="page-title__title">
-      {{ title }}
-    </h2>
-    <app-button
-      class="page-title__sidebar-button"
-      scheme="none"
-      size="none"
-      :icon-left="$icons.burger"
-      @click="openSidebar"
-    />
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { AppButton } from '#components'
-import { bus, BUS_EVENTS } from '@/helpers'
-
-const openSidebar = () => {
-  bus.emit(BUS_EVENTS.toggleSidebar)
-}
-
-defineProps<{
-  title: string
-}>()
-</script>
-
-<style lang="scss" scoped>
-.page-title {
-  width: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.page-title__title {
-  @include text-ellipsis;
-
-  @include respond-to(small) {
-    font-size: toRem(32);
-  }
-}
-
-.page-title .page-title__sidebar-button {
-  display: none;
-
-  @include respond-to(medium) {
-    display: flex;
-    width: toRem(32);
-    height: toRem(32);
-    color: var(--text-primary-main);
-  }
-}
-</style>
diff --git a/components/ProjectsInfo.vue b/components/ProjectsInfo.vue
index 86b91ea..73c077a 100644
--- a/components/ProjectsInfo.vue
+++ b/components/ProjectsInfo.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="projects-info layout-wrapper">
+  <div class="projects-info">
     <projects-info-card v-for="(card, idx) in cards" :key="idx" :card="card" />
   </div>
 </template>
@@ -45,12 +45,13 @@ const cards: ProjectInfoCard[] = [
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: toRem(24);
-  padding: toRem(104) toRem(96) toRem(62);
+  padding: var(--app-padding-top) toRem(96) var(--app-padding-bottom);
 
-  @include respond-to(tablet) {
+  @include respond-to(medium) {
     grid-template-columns: 1fr;
-    padding: var(--app-padding);
-    padding-top: toRem(50);
+    gap: toRem(8);
+    padding-right: var(--app-padding-right);
+    padding-left: var(--app-padding-left);
   }
 }
 </style>
diff --git a/components/StatsPreview.vue b/components/StatsPreview.vue
index 7fece75..6980b12 100644
--- a/components/StatsPreview.vue
+++ b/components/StatsPreview.vue
@@ -21,11 +21,12 @@
   background-size: 100% 100%;
   width: 100%;
   min-height: vh(100);
-  padding: toRem(96) toRem(80);
+  padding: calc(var(--app-height-header) + var(--app-padding-top)) toRem(80)
+    var(--app-padding-bottom);
 
-  @include respond-to(tablet) {
-    padding: var(--app-padding);
-    padding-top: toRem(100);
+  @include respond-to(medium) {
+    padding-right: var(--app-padding-right);
+    padding-left: var(--app-padding-left);
   }
 }
 
diff --git a/components/ToolsSidebar.vue b/components/ToolsSidebar.vue
index 435b9ac..4120009 100644
--- a/components/ToolsSidebar.vue
+++ b/components/ToolsSidebar.vue
@@ -1,24 +1,15 @@
 <template>
   <transition name="tools-sidebar__transition">
     <div
-      v-show="isSidebarShown"
+      v-show="isShown || !isLessThanMediumScreen"
       ref="sidebarElement"
       class="tools-sidebar"
       @click="onSidebarClick"
     >
       <aside class="tools-sidebar__aside">
-        <div class="tools-sidebar__header">
-          <app-logo />
-          <app-button
-            class="tools-sidebar__close-button"
-            color="secondary"
-            modification="text"
-            :icon-left="$icons.x"
-            @click="toggleSidebar"
-          />
-        </div>
-
-        <nav>
+        <app-logo class="tools-sidebar__logo" />
+
+        <nav class="tools-sidebar__nav">
           <ul class="tools-sidebar__nav-links-list">
             <li v-for="navLink in navLinks" :key="navLink.title">
               <app-button
@@ -38,16 +29,20 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, watch, onBeforeUnmount } from 'vue'
 import { useRoute } from '#app'
-import { AppLogo, AppButton } from '#components'
-import { bus, BUS_EVENTS } from '@/helpers'
-import { useWindowSize } from '@vueuse/core'
-import { WINDOW_BREAKPOINTS, ICON_NAMES } from '@/enums'
+import { AppButton, AppLogo } from '#components'
 import { ROUTE_PATH } from '@/constants'
+import { ICON_NAMES, WINDOW_BREAKPOINTS } from '@/enums'
+import { useWindowSize } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
 import { i18n } from '~/plugins/localization'
 
+const emit = defineEmits<{ (event: 'update:is-shown', value: boolean): void }>()
+
+defineProps<{ isShown: boolean }>()
+
 const route = useRoute()
+
 const { t } = i18n.global
 
 const navLinks = computed(() => [
@@ -80,22 +75,13 @@ const navLinks = computed(() => [
 
 const { width: windowWidth } = useWindowSize()
 const sidebarElement = ref<HTMLElement | null>(null)
-const isVisible = ref(false)
 
 const isLessThanMediumScreen = computed(
-  () => windowWidth.value <= WINDOW_BREAKPOINTS.medium,
-)
-
-const isSidebarShown = computed(
-  () => !isLessThanMediumScreen.value || isVisible.value,
+  () => windowWidth.value < WINDOW_BREAKPOINTS.medium,
 )
 
-const toggleSidebar = () => {
-  isVisible.value = !isVisible.value
-}
-
 const closeSidebar = () => {
-  isVisible.value = false
+  emit('update:is-shown', false)
 }
 
 const onSidebarClick = (event: Event) => {
@@ -104,12 +90,6 @@ const onSidebarClick = (event: Event) => {
   }
 }
 
-bus.on(BUS_EVENTS.toggleSidebar, toggleSidebar)
-
-onBeforeUnmount(() => {
-  bus.off(BUS_EVENTS.toggleSidebar, toggleSidebar)
-})
-
 // eslint-disable-next-line
 // @ts-ignore
 watch(() => route.name, closeSidebar)
@@ -130,7 +110,7 @@ $aside-max-width: toRem(280);
     position: fixed;
     min-width: 100%;
     max-width: 100%;
-    background: rgba(var(--black-rgb), 0.5);
+    background: var(--backdrop-modal);
   }
 }
 
@@ -141,22 +121,31 @@ $aside-max-width: toRem(280);
   width: 100%;
   height: $aside-height;
   max-width: $aside-max-width;
-  padding: toRem(24) var(--app-padding-right) toRem(24) var(--app-padding-left);
+  padding: 0 var(--app-padding-right) var(--app-padding-bottom)
+    var(--app-padding-left);
   background: var(--background-primary-main);
-
-  @include respond-to(medium) {
-    padding: toRem(24);
-  }
+  overflow-y: auto;
 
   @include respond-to(xsmall) {
     max-width: 100%;
   }
 }
 
-.tools-sidebar__header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: toRem(96);
+.tools-sidebar .tools-sidebar__logo {
+  height: var(--app-height-header);
+  flex-shrink: 0;
+
+  @include respond-to(medium) {
+    display: none;
+  }
+}
+
+.tools-sidebar__nav {
+  margin-top: toRem(48);
+
+  @include respond-to(medium) {
+    margin-top: toRem(76);
+  }
 }
 
 .tools-sidebar__nav-links-list {
@@ -171,20 +160,13 @@ $aside-max-width: toRem(280);
   transition: none;
 }
 
-.tools-sidebar .tools-sidebar__close-button {
-  display: none;
-
-  @include respond-to(xsmall) {
-    display: grid;
-  }
-}
-
 .tools-sidebar__transition-enter-active {
-  animation: fade-unroll-right 0.2s ease-in-out;
+  animation: fade-unroll-right var(--field-transition-duration) ease-in-out;
 }
 
 .tools-sidebar__transition-leave-active {
-  animation: fade-unroll-right 0.2s ease-in-out reverse;
+  animation: fade-unroll-right var(--field-transition-duration) ease-in-out
+    reverse;
 }
 
 @keyframes fade-unroll-right {
diff --git a/composables/use-viewport-sizes.ts b/composables/use-viewport-sizes.ts
index 6e5663f..ef98c0a 100644
--- a/composables/use-viewport-sizes.ts
+++ b/composables/use-viewport-sizes.ts
@@ -1,19 +1,22 @@
-import { debounce } from 'lodash-es'
-import { onBeforeUnmount } from 'vue'
+import { WINDOW_BREAKPOINTS } from '@/enums'
+import { computed, type ComputedRef } from 'vue'
+
+export interface IUseViewportSizes {
+  isSmallBreakpoint: ComputedRef<boolean>
+  assignVhCssVariable: () => void
+}
+
+export const useViewportSizes = (): IUseViewportSizes => {
+  const { width } = useWindowSize()
+
+  const isSmallBreakpoint = computed(
+    () => width.value < WINDOW_BREAKPOINTS.small,
+  )
 
-export const useViewportSizes = (): { assignVhCssVariable(): void } => {
   const assignVhCssVariable = () => {
     const vh = (window.innerHeight * 0.01).toFixed(5)
     document.documentElement.style.setProperty('--vh', `${vh}px`)
   }
 
-  const assignVhCssVariableDebounced = debounce(assignVhCssVariable, 300)
-
-  window.addEventListener('resize', assignVhCssVariableDebounced)
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', assignVhCssVariableDebounced)
-  })
-
-  return { assignVhCssVariable }
+  return { isSmallBreakpoint, assignVhCssVariable }
 }
diff --git a/fields/AutocompleteField.vue b/fields/AutocompleteField.vue
index ffaee21..856ab99 100644
--- a/fields/AutocompleteField.vue
+++ b/fields/AutocompleteField.vue
@@ -60,7 +60,7 @@ const emit = defineEmits<{
 
 const props = withDefaults(
   defineProps<{
-    modelValue: string
+    modelValue: FieldOption['value']
     options: FieldOption[]
     label?: string
     placeholder?: string
@@ -108,8 +108,11 @@ const inputListeners = computed(() => ({
     }
   },
   input(event: Event) {
+    if (!isDropMenuOpen.value) isDropMenuOpen.value = true
     filterTitle.value = (event.target as HTMLInputElement).value
     navOptionIdx.value = 0
+    if (options.value.length && filterTitle.value === options.value[0].title)
+      emit('update:model-value', options.value[0].value)
   },
   keydown(event: KeyboardEvent) {
     if (!options.value.length) return
@@ -144,10 +147,10 @@ const options = computed<typeof props.options>(() =>
     : props.options,
 )
 
-const modelTitle = computed<string>(
+const modelTitle = computed<FieldOption['title']>(
   () =>
     props.options.find(option => option.value === props.modelValue)?.title ||
-    props.modelValue,
+    String(props.modelValue),
 )
 
 const setHeightCSSVar = (element: Element) => {
@@ -157,10 +160,7 @@ const setHeightCSSVar = (element: Element) => {
   )
 }
 
-watch(
-  [() => props.modelValue, isDropMenuOpen],
-  () => (filterTitle.value = undefined),
-)
+watch(isDropMenuOpen, () => (filterTitle.value = undefined))
 
 onMounted(() => {
   if (autocompleteFieldElement.value)
@@ -211,6 +211,7 @@ onMounted(() => {
 
 .autocomplete-field__input {
   width: 100%;
+  padding-right: toRem(54);
 
   .autocomplete-field--error & {
     border-color: var(--field-error);
diff --git a/fields/CheckboxField.vue b/fields/CheckboxField.vue
index 4e8db39..c6d1d40 100644
--- a/fields/CheckboxField.vue
+++ b/fields/CheckboxField.vue
@@ -45,7 +45,7 @@ const onChange = (event: Event) => {
   display: block;
   cursor: pointer;
   user-select: none;
-  max-width: max-content;
+  min-width: max-content;
   padding: toRem(4);
   border-radius: var(--border-radius-main);
   background: var(--background-primary-dark);
@@ -81,6 +81,7 @@ const onChange = (event: Event) => {
   line-height: var(--field-text-line-height);
   letter-spacing: var(--field-text-letter-spacing);
   min-width: max-content;
+  text-align: center;
 
   .checkbox-field--checked & {
     background: var(--background-primary-light);
diff --git a/fields/DatetimeField.vue b/fields/DatetimeField.vue
index d03c51b..b8c750b 100644
--- a/fields/DatetimeField.vue
+++ b/fields/DatetimeField.vue
@@ -1,5 +1,9 @@
 <template>
-  <div ref="dataFieldElement" class="datetime-field">
+  <div
+    ref="dataFieldElement"
+    class="datetime-field"
+    :class="{ 'datetime-field--open': isOpen }"
+  >
     <div class="datetime-field__wrp">
       <button
         ref="btnElement"
@@ -11,22 +15,37 @@
         <app-icon class="datetime-field__icon" :name="$icons.calendar" />
       </button>
 
-      <transition name="drop-item">
-        <div
-          v-show="isOpen"
-          ref="flatpickrWrpElement"
-          class="datetime-field__flatpickr-wrp"
-        />
-      </transition>
+      <template v-if="isSmallBreakpoint">
+        <app-modal
+          :is-shown="isOpen"
+          :is-close-by-click-outside="false"
+          :is-resettable="false"
+        >
+          <div
+            ref="flatpickrWrpElement"
+            class="datetime-field__flatpickr-wrp"
+          />
+        </app-modal>
+      </template>
+      <template v-else>
+        <transition name="drop-item" @after-enter="scrollToFlatpickr">
+          <div
+            v-show="isOpen"
+            ref="flatpickrWrpElement"
+            class="datetime-field__flatpickr-wrp"
+          />
+        </transition>
+      </template>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { AppIcon } from '#components'
+import { AppIcon, AppModal } from '#components'
+import { useViewportSizes } from '@/composables'
 import { onClickOutside } from '@vueuse/core'
 import { default as createFlatpickr } from 'flatpickr'
-import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { nextTick, ref, watch } from 'vue'
 import type { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance'
 import type { Options } from 'flatpickr/dist/types/options'
 import arrowIconHTML from '@/assets/icons/arrow-drop-down-icon.svg?raw'
@@ -40,24 +59,30 @@ const props = defineProps<{
   modelValue: number
 }>()
 
+const { isSmallBreakpoint } = useViewportSizes()
+
 const dataFieldElement = ref<HTMLDivElement | null>(null)
 const btnElement = ref<HTMLInputElement | null>(null)
 const flatpickrWrpElement = ref<HTMLDivElement | null>(null)
 const flatpickrInstance = ref<FlatpickrInstance | null>(null)
 const isOpen = ref(false)
 
-onMounted(() => {
+let _unsubscribeFromClickOutside: (() => void) | undefined
+const initFlatpickr = (): void => {
   if (
     !dataFieldElement.value ||
     !btnElement.value ||
     !flatpickrWrpElement.value
-  )
+  ) {
+    flatpickrInstance.value?.destroy()
     return
+  }
 
   const options: Options = {
     enableTime: true,
     enableSeconds: true,
     time_24hr: true,
+    disableMobile: true,
 
     /** Date object with less than this min date works incorrectly */
     minDate: new Date('05/02/1924'),
@@ -79,19 +104,36 @@ onMounted(() => {
 
   flatpickrInstance.value = createFlatpickr(btnElement.value, options)
 
-  onClickOutside(dataFieldElement, () => (isOpen.value = false))
-})
+  nextTick(() => {
+    if (!flatpickrWrpElement.value) return
+
+    _unsubscribeFromClickOutside?.()
+    _unsubscribeFromClickOutside = onClickOutside(
+      flatpickrWrpElement.value.children[0] as HTMLDivElement,
+      () => {
+        isOpen.value = false
+      },
+      { ignore: [btnElement] },
+    )
+  })
+}
+
+const updateFlatpickrDate = (timestamp: number): void => {
+  flatpickrInstance.value?.setDate(timestamp.toString(), false, 'U')
+}
+
+const scrollToFlatpickr = (): void => {
+  if (isOpen.value && flatpickrWrpElement.value) {
+    flatpickrWrpElement.value.scrollIntoView({
+      behavior: 'smooth',
+      block: 'end',
+    })
+  }
+}
 
-onBeforeUnmount(() => {
-  flatpickrInstance.value?.destroy()
-})
+watch(() => props.modelValue, updateFlatpickrDate)
 
-watch(
-  () => props.modelValue,
-  newValue => {
-    flatpickrInstance.value?.setDate(newValue.toString(), false, 'U')
-  },
-)
+watch([dataFieldElement, btnElement, flatpickrWrpElement], initFlatpickr)
 </script>
 
 <style lang="scss">
@@ -135,6 +177,7 @@ $z-index-btn: 1;
       background: var(--background-primary-light);
     }
 
+    .datetime-field--open &,
     &:focus,
     &:active {
       background: var(--background-primary-light);
@@ -147,6 +190,11 @@ $z-index-btn: 1;
   position: absolute;
   top: 110%;
   right: 0;
+  padding-bottom: var(--app-padding-bottom);
+
+  @include respond-to(small) {
+    position: static;
+  }
 }
 
 @include drop-item-transition;
diff --git a/fields/RadioButtonField.vue b/fields/RadioButtonField.vue
index d0fd186..a9d9986 100644
--- a/fields/RadioButtonField.vue
+++ b/fields/RadioButtonField.vue
@@ -46,7 +46,7 @@ const emit = defineEmits<{
   padding: toRem(4);
   background: var(--background-primary-dark);
   border-radius: var(--border-radius-main);
-  max-width: max-content;
+  min-width: max-content;
 }
 
 .radio-button-field__option {
diff --git a/fields/TextareaField.vue b/fields/TextareaField.vue
index d88c935..79bc4dc 100644
--- a/fields/TextareaField.vue
+++ b/fields/TextareaField.vue
@@ -9,9 +9,10 @@
     </label>
     <div class="textarea-field__textarea-wrp">
       <textarea
-        ref="textarea"
+        ref="textareaElement"
         class="textarea-field__textarea"
         :id="`textarea-field--${uid}`"
+        spellcheck="false"
         v-bind="$attrs"
         v-on="listeners"
         :value="modelValue"
@@ -57,16 +58,17 @@
 
 <script lang="ts" setup>
 import { AppIcon } from '#components'
-import { useTextareaAutosize } from '@vueuse/core'
 import { v4 as uuidv4 } from 'uuid'
-import { computed, useAttrs, useSlots } from 'vue'
+import { computed, nextTick, onMounted, useAttrs, useSlots, watch } from 'vue'
 
 type SCHEMES = 'primary'
+type SIZES = 'default' | 'small'
 
 const props = withDefaults(
   defineProps<{
-    scheme?: SCHEMES
     modelValue: string
+    scheme?: SCHEMES
+    size?: SIZES
     label?: string
     placeholder?: string
     errorMessage?: string
@@ -75,6 +77,7 @@ const props = withDefaults(
   }>(),
   {
     scheme: 'primary',
+    size: 'default',
     label: '',
     placeholder: ' ',
     errorMessage: '',
@@ -92,6 +95,7 @@ const attrs = useAttrs()
 const slots = useSlots()
 
 const uid = uuidv4()
+const textareaElement = ref<HTMLTextAreaElement | null>(null)
 
 const isDisabled = computed(() =>
   ['', 'disabled', true].includes(attrs.disabled as string | boolean),
@@ -112,24 +116,32 @@ const hasRightNode = computed<boolean>(() =>
 const listeners = computed(() => ({
   input: (event: Event) => {
     const eventTarget = event.target as HTMLTextAreaElement
-
-    if (props.modelValue === eventTarget.value) return
-
     emit('update:modelValue', eventTarget.value)
   },
 }))
 
-const textareaClasses = computed(() =>
-  [
-    'textarea-field',
-    ...(hasRightNode.value ? ['textarea-field--node-right'] : []),
-    ...(isDisabled.value ? ['textarea-field--disabled'] : []),
-    ...(isReadonly.value ? ['textarea-field--readonly'] : []),
-    ...(props.errorMessage ? ['textarea-field--error'] : []),
-    ...(props.modelValue ? ['textarea-field--filled'] : []),
-    `textarea-field--${props.scheme}`,
-  ].join(' '),
-)
+const textareaClasses = computed(() => [
+  'textarea-field',
+  ...(hasRightNode.value ? ['textarea-field--node-right'] : []),
+  ...(isDisabled.value ? ['textarea-field--disabled'] : []),
+  ...(isReadonly.value ? ['textarea-field--readonly'] : []),
+  ...(props.errorMessage ? ['textarea-field--error'] : []),
+  ...(props.modelValue ? ['textarea-field--filled'] : []),
+  `textarea-field--size-${props.size}`,
+  `textarea-field--${props.scheme}`,
+])
+
+const resizeTextarea = () => {
+  if (!textareaElement.value) throw new Error('textareaElement unavailable')
+
+  const offset =
+    textareaElement.value.offsetHeight - textareaElement.value.clientHeight
+
+  textareaElement.value.style.height = '1px'
+  textareaElement.value.style.height = `${
+    textareaElement.value.scrollHeight + offset
+  }px`
+}
 
 const clear = () => {
   emit('update:modelValue', '')
@@ -143,12 +155,12 @@ const setHeightCSSVar = (element: Element) => {
   )
 }
 
-const { textarea, input } = useTextareaAutosize()
-
 watch(
   () => props.modelValue,
-  newValue => (input.value = newValue),
+  () => nextTick(resizeTextarea),
 )
+
+onMounted(resizeTextarea)
 </script>
 
 <style lang="scss" scoped>
@@ -173,8 +185,17 @@ $z-index-side-nodes: 1;
 
 .textarea-field__textarea {
   resize: none;
-  min-height: toRem(130);
-  max-height: toRem(390);
+  height: 0;
+
+  .textarea-field--size-default & {
+    min-height: toRem(130);
+    max-height: toRem(390);
+  }
+
+  .textarea-field--size-small & {
+    min-height: toRem(48);
+    max-height: toRem(144);
+  }
 
   & + .textarea-field__focus-indicator {
     pointer-events: none;
diff --git a/forms/AbiDecodeForm.vue b/forms/AbiDecodeForm.vue
index 7931882..87551bc 100644
--- a/forms/AbiDecodeForm.vue
+++ b/forms/AbiDecodeForm.vue
@@ -8,10 +8,12 @@
         <div class="abi-decode-form__options-wrp">
           <checkbox-field
             v-model="form.hasFuncSelector"
+            class="abi-decode-form__checkbox-field"
             :label="$t('abi-decode-form.has-func-selector-label')"
           />
           <radio-button-field
             v-model="form.decodeMode"
+            class="abi-decode-form__radio-button-field"
             :options="decodeModeOptions"
           />
         </div>
@@ -59,7 +61,7 @@
               {{ warningMessage }}
             </p>
           </div>
-          <div class="abi-decode-form__args_wrp">
+          <div v-if="funcArgs.length" class="abi-decode-form__args_wrp">
             <div
               v-for="funcArg in funcArgs"
               :key="funcArg.id"
@@ -85,19 +87,21 @@
                     $t('abi-decode-form.arg-subtype-placeholder--tuple')
                   "
                 />
-                <input-field
+                <textarea-field
                   v-model="funcArg.value"
+                  size="small"
                   readonly
                   :placeholder="$t('abi-decode-form.arg-value-placeholder')"
                 >
                   <template #nodeRight>
                     <app-copy :value="funcArg.value" />
                   </template>
-                </input-field>
+                </textarea-field>
               </div>
-              <input-field
+              <textarea-field
                 v-else
                 v-model="funcArg.value"
+                size="small"
                 readonly
                 :label="$t('abi-decode-form.arg-value-label')"
                 :placeholder="$t('abi-decode-form.arg-value-placeholder')"
@@ -105,7 +109,7 @@
                 <template #nodeRight>
                   <app-copy :value="funcArg.value" />
                 </template>
-              </input-field>
+              </textarea-field>
             </div>
           </div>
         </template>
@@ -398,18 +402,21 @@ watch(() => form, onFormChange, { deep: true })
 <style lang="scss" scoped>
 .abi-decode-form {
   display: grid;
-  gap: toRem(32);
+  grid-gap: toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(24);
+  }
 }
 
 .abi-decode-form__output,
 .abi-decode-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
 .abi-decode-form__title-wrp {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: inherit;
   flex-wrap: wrap;
 }
@@ -423,25 +430,33 @@ watch(() => form, onFormChange, { deep: true })
   display: flex;
   align-items: center;
   gap: toRem(8);
-  flex-wrap: wrap;
-}
 
-.abi-decode-form__args_wrp {
-  display: grid;
-  grid-gap: toRem(16);
+  @include respond-to(small) {
+    flex-direction: column;
+    width: 100%;
+  }
+}
 
+.abi-decode-form .abi-decode-form__checkbox-field,
+.abi-decode-form .abi-decode-form__radio-button-field {
   @include respond-to(small) {
-    grid-gap: toRem(48);
+    width: 100%;
   }
 }
 
+.abi-decode-form__args_wrp {
+  display: grid;
+  grid-gap: inherit;
+}
+
 .abi-decode-form__arg {
   display: grid;
+  grid-template-columns: minmax(toRem(150), 20%) 1fr;
   grid-gap: toRem(16);
-  grid-template-columns: minmax(toRem(140), 20%) 1fr;
 
   @include respond-to(small) {
     grid-template-columns: auto;
+    grid-gap: toRem(8);
   }
 }
 
diff --git a/forms/AbiEncodeForm.vue b/forms/AbiEncodeForm.vue
index 5ebe2f8..dc2663a 100644
--- a/forms/AbiEncodeForm.vue
+++ b/forms/AbiEncodeForm.vue
@@ -39,17 +39,19 @@
               @clear="removeArg(arg.id)"
               @update:model-value="onArgSubtypeUpdate($event as string, idx)"
             />
-            <input-field
+            <textarea-field
               v-model="arg.value"
+              size="small"
               :placeholder="$t('abi-encode-form.arg-value-placeholder')"
               :error-message="getFieldErrorMessage(`args[${idx}].value`)"
               @blur="touchField(`args[${idx}].value`)"
             />
           </div>
-          <input-field
+          <textarea-field
             v-else
             v-model="arg.value"
             is-clearable
+            size="small"
             :label="$t('abi-encode-form.arg-value-label')"
             :placeholder="$t('abi-encode-form.arg-value-placeholder')"
             :error-message="getFieldErrorMessage(`args[${idx}].value`)"
@@ -225,31 +227,31 @@ abiEncoding.value = encodeAbi([], [])
 <style lang="scss" scoped>
 .abi-encode-form {
   display: grid;
-  gap: toRem(40);
+  grid-gap: toRem(32);
+
+  @include respond-to(medium) {
+    grid-gap: toRem(24);
+  }
 }
 
 .abi-encode-form__output,
 .abi-encode-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
 .abi-encode-form__args_wrp {
   display: grid;
-  grid-gap: toRem(16);
-
-  @include respond-to(small) {
-    grid-gap: toRem(48);
-  }
+  grid-gap: inherit;
 }
 
 .abi-encode-form__arg {
   display: grid;
+  grid-template-columns: minmax(toRem(150), 20%) 1fr;
   grid-gap: toRem(16);
-  grid-template-columns: minmax(toRem(140), 20%) 1fr;
 
   @include respond-to(small) {
     grid-template-columns: auto;
+    grid-gap: toRem(8);
   }
 }
 
diff --git a/forms/Create2AddressForm.vue b/forms/Create2AddressForm.vue
index 5b262a7..b39fb95 100644
--- a/forms/Create2AddressForm.vue
+++ b/forms/Create2AddressForm.vue
@@ -24,6 +24,7 @@
         />
       </div>
     </div>
+    <div class="create2-address-form__divider" />
     <div class="create2-address-form__output">
       <h3>{{ $t('create2-address-form.output-title') }}</h3>
       <div>
@@ -91,19 +92,16 @@ watch(form, () => {
 
 <style lang="scss" scoped>
 .create2-address-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .create2-address-form__output,
 .create2-address-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.create2-address-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.create2-address-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .create2-address-form__input-fields {
diff --git a/forms/CreateAddressForm.vue b/forms/CreateAddressForm.vue
index 6450547..0bf7f4d 100644
--- a/forms/CreateAddressForm.vue
+++ b/forms/CreateAddressForm.vue
@@ -19,6 +19,7 @@
         />
       </div>
     </div>
+    <div class="create-address-form__divider" />
     <div class="create-address-form__output">
       <h3>{{ $t('create-address-form.output-title') }}</h3>
       <div>
@@ -76,19 +77,16 @@ watch(form, () => {
 
 <style lang="scss" scoped>
 .create-address-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .create-address-form__output,
 .create-address-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.create-address-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.create-address-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .create-address-form__input-fields {
diff --git a/forms/DateForm.vue b/forms/DateForm.vue
index 02c939f..5563785 100644
--- a/forms/DateForm.vue
+++ b/forms/DateForm.vue
@@ -16,9 +16,10 @@
       </div>
       <datetime-field
         :model-value="datetimeFieldTimestamp"
-        @update:model-value="setForm(new Time($event))"
+        @update:model-value="onUpdateDatetimeFieldTimestamp"
       />
     </div>
+    <div class="date-form__divider" />
     <div class="date-form__output">
       <h3>{{ $t('date-form.output-title') }}</h3>
       <div v-for="(item, idx) in outputItems" :key="idx">
@@ -135,6 +136,10 @@ const datetimeFieldTimestamp = computed<number>(
   () => localTime.value?.timestamp || new Time().timestamp,
 )
 
+const onUpdateDatetimeFieldTimestamp = (timestamp: number) => {
+  setForm(new Time(timestamp))
+}
+
 const outputItems = computed(() => [
   {
     label: t('date-form.seconds-label'),
@@ -149,19 +154,16 @@ const outputItems = computed(() => [
 
 <style lang="scss" scoped>
 .date-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .date-form__output,
 .date-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.date-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.date-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .date-form__input-fields {
diff --git a/forms/HashFunctionForm.vue b/forms/HashFunctionForm.vue
index a1ab2d0..930e080 100644
--- a/forms/HashFunctionForm.vue
+++ b/forms/HashFunctionForm.vue
@@ -5,7 +5,11 @@
         <h3 class="hash-function-form__title">
           {{ $t('hash-function-form.input-title', { type: title }) }}
         </h3>
-        <radio-button-field v-model="form.type" :options="decodeOptions" />
+        <radio-button-field
+          v-model="form.type"
+          class="hash-function-form__radio-button-field"
+          :options="decodeOptions"
+        />
       </div>
       <textarea-field
         v-model="form.text"
@@ -14,6 +18,7 @@
         @blur="touchField('text')"
       />
     </div>
+    <div class="hash-function-form__divider" />
     <div class="hash-function-form__output">
       <h3>{{ $t('hash-function-form.output-title') }}</h3>
       <div>
@@ -86,24 +91,21 @@ watch(form, () => {
 
 <style lang="scss" scoped>
 .hash-function-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .hash-function-form__output,
 .hash-function-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.hash-function-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.hash-function-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .hash-function-form__title-wrp {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   gap: inherit;
   flex-wrap: wrap;
 }
@@ -113,6 +115,12 @@ watch(form, () => {
   min-width: max-content;
 }
 
+.hash-function-form .hash-function-form__radio-button-field {
+  @include respond-to(small) {
+    width: 100%;
+  }
+}
+
 .hash-function-form__output-item-label {
   @include field-label;
 }
diff --git a/forms/NumberConverterForm.vue b/forms/NumberConverterForm.vue
index 875c178..f92de4c 100644
--- a/forms/NumberConverterForm.vue
+++ b/forms/NumberConverterForm.vue
@@ -77,12 +77,10 @@ formatInputs('10', 'decimal')
 
 <style lang="scss" scoped>
 .number-converter-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .number-converter-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 </style>
diff --git a/forms/TimestampForm.vue b/forms/TimestampForm.vue
index 78c3b7b..f32abd7 100644
--- a/forms/TimestampForm.vue
+++ b/forms/TimestampForm.vue
@@ -11,6 +11,7 @@
         @blur="touchField('timestamp')"
       />
     </div>
+    <div class="timestamp-form__divider" />
     <div class="timestamp-form__output">
       <h3>{{ $t('timestamp-form.output-title') }}</h3>
       <div v-for="(item, idx) in outputItems" :key="idx">
@@ -86,19 +87,16 @@ const outputItems = computed(() => [
 
 <style lang="scss" scoped>
 .timestamp-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .timestamp-form__output,
 .timestamp-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 
-.timestamp-form__input {
-  padding-bottom: toRem(40);
-  border-bottom: toRem(1) solid var(--border-primary-main);
+.timestamp-form__divider {
+  @include solidity-tools-form-divider;
 }
 
 .timestamp-form__output-item-label {
diff --git a/forms/UnitConverterForm.vue b/forms/UnitConverterForm.vue
index aed33d3..a85f6ce 100644
--- a/forms/UnitConverterForm.vue
+++ b/forms/UnitConverterForm.vue
@@ -70,12 +70,10 @@ formatInputs('1', 'ether')
 
 <style lang="scss" scoped>
 .unit-converter-form {
-  display: grid;
-  gap: toRem(40);
+  @include solidity-tools-form;
 }
 
 .unit-converter-form__input {
-  display: grid;
-  gap: toRem(20);
+  @include solidity-tools-form-part;
 }
 </style>
diff --git a/helpers/event-bus.helper.ts b/helpers/event-bus.helper.ts
index 692262d..dec1169 100644
--- a/helpers/event-bus.helper.ts
+++ b/helpers/event-bus.helper.ts
@@ -16,7 +16,6 @@ export type DefaultBusEventMap = {
   [BUS_EVENTS.warning]: string | NotificationObjectPayload
   [BUS_EVENTS.info]: string | NotificationObjectPayload
   [BUS_EVENTS.default]: string | NotificationObjectPayload
-  [BUS_EVENTS.toggleSidebar]: unknown
 }
 
 export const bus = new EventEmitter<DefaultBusEventMap>()
diff --git a/layouts/solidity-tools.vue b/layouts/solidity-tools.vue
index 6cabca1..901f1a0 100644
--- a/layouts/solidity-tools.vue
+++ b/layouts/solidity-tools.vue
@@ -1,26 +1,47 @@
 <template>
   <div class="solidity-tools">
-    <tools-sidebar />
-    <div class="solidity-tools__main">
-      <slot />
+    <app-navbar
+      class="solidity-tools__app-navbar"
+      has-burger-menu
+      is-static-dark
+      :is-active-burger-menu="isAsideShown"
+      @burger-menu-click="isAsideShown = !isAsideShown"
+    />
+    <div class="solidity-tools__content-wrp">
+      <tools-sidebar v-model:is-shown="isAsideShown" />
+      <main class="solidity-tools__main">
+        <slot />
+      </main>
     </div>
   </div>
 </template>
 
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const isAsideShown = ref(false)
+</script>
+
 <style lang="scss" scoped>
-.solidity-tools {
-  padding: 0;
+.solidity-tools .solidity-tools__app-navbar {
+  display: none;
+
+  @include respond-to(medium) {
+    display: flex;
+  }
+}
+
+.solidity-tools__content-wrp {
   display: flex;
-  min-width: vh(100);
-  min-height: vh(100);
-  position: relative;
+
+  @include respond-to(medium) {
+    padding-top: var(--app-height-header);
+  }
 }
 
 .solidity-tools__main {
+  margin-top: 0;
   padding: var(--app-padding);
-  max-width: 100vw;
   width: 100%;
-  overflow-y: scroll;
-  background: var(--background-primary-dark);
 }
 </style>
diff --git a/package.json b/package.json
index 3891601..b4b920a 100644
--- a/package.json
+++ b/package.json
@@ -65,7 +65,6 @@
     "flatpickr": "^4.6.13",
     "lodash-es": "^4.17.21",
     "nuxt": "^3.6.5",
-    "pinia": "^2.0.22",
     "uuid": "^9.0.0",
     "vue-i18n": "^9.2.2",
     "vue-toastification": "^2.0.0-rc.5",
diff --git a/pages/abi.vue b/pages/abi.vue
index f665332..4c0eafc 100644
--- a/pages/abi.vue
+++ b/pages/abi.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="abi-page">
-    <page-title :title="$t('abi-page.main-title')" />
-    <div class="block">
+    <h2>{{ $t('abi-page.main-title') }}</h2>
+    <div>
       <app-tabs :tabs="tabsList" />
-      <div class="content">
+      <div class="abi-page__content">
         <nuxt-page keepalive />
       </div>
     </div>
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppTabs, PageTitle } from '#components'
+import { AppTabs } from '#components'
 import { definePageMeta } from '#imports'
 import { ROUTE_PATH } from '@/constants'
 import { type Tab } from '@/types'
@@ -45,8 +45,10 @@ const tabsList = computed<Tab[]>(() => [
 
 <style lang="scss" scoped>
 .abi-page {
-  display: flex;
-  flex-direction: column;
-  gap: toRem(32);
+  @include solidity-tools-page-base;
+}
+
+.abi-page__content {
+  @include solidity-tools-page-content;
 }
 </style>
diff --git a/pages/address-predictor.vue b/pages/address-predictor.vue
index e995965..b36c812 100644
--- a/pages/address-predictor.vue
+++ b/pages/address-predictor.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="address-predictor-page">
-    <page-title :title="$t('address-predictor-page.main-title')" />
-    <div class="block">
+    <h2>{{ $t('address-predictor-page.main-title') }}</h2>
+    <div>
       <app-tabs :tabs="tabsList" />
-      <div class="content">
+      <div class="address-predictor-page__content">
         <nuxt-page keepalive />
       </div>
     </div>
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppTabs, PageTitle } from '#components'
+import { AppTabs } from '#components'
 import { definePageMeta } from '#imports'
 import { ROUTE_PATH } from '@/constants'
 import { type Tab } from '@/types'
@@ -45,8 +45,10 @@ const tabsList = computed<Tab[]>(() => [
 
 <style lang="scss" scoped>
 .address-predictor-page {
-  display: flex;
-  flex-direction: column;
-  gap: toRem(32);
+  @include solidity-tools-page-base;
+}
+
+.address-predictor-page__content {
+  @include solidity-tools-page-content;
 }
 </style>
diff --git a/pages/audits.vue b/pages/audits.vue
index bfb7506..6ac3b11 100644
--- a/pages/audits.vue
+++ b/pages/audits.vue
@@ -1,15 +1,13 @@
 <template>
-  <div class="audits-page">
-    <div class="audits-page__title">
-      <h2>{{ $t('audits-page.main-title') }}</h2>
-      <p class="audits-page__title-secondary">
-        {{ $t('audits-page.secondary-title') }}
-      </p>
-    </div>
+  <main class="audits-page">
+    <h2>{{ $t('audits-page.main-title') }}</h2>
+    <p class="audits-page__title-secondary">
+      {{ $t('audits-page.secondary-title') }}
+    </p>
     <div class="audits-page__list">
       <audits-card v-for="(audit, idx) in audits" :key="idx" :audit="audit" />
     </div>
-  </div>
+  </main>
 </template>
 
 <script lang="ts" setup>
@@ -46,18 +44,17 @@ const audits: Audit[] = [
 
 <style lang="scss" scoped>
 .audits-page {
-  padding: var(--app-padding);
-  padding-top: toRem(130);
-  max-width: toRem(1800);
-  margin: 0 auto;
-}
+  padding-right: toRem(80);
+  padding-left: toRem(80);
 
-.audits-page__title {
-  display: grid;
-  gap: toRem(16);
+  @include respond-to(medium) {
+    padding-right: var(--app-padding-right);
+    padding-left: var(--app-padding-left);
+  }
 }
 
 .audits-page__title-secondary {
+  margin-top: toRem(16);
   color: var(--text-primary-main);
 }
 
@@ -65,11 +62,11 @@ const audits: Audit[] = [
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: toRem(24);
-  margin-top: toRem(40);
-  margin-bottom: toRem(110);
+  margin-top: toRem(24);
 
   @include respond-to(medium) {
     grid-template-columns: 1fr;
+    gap: toRem(16);
   }
 }
 </style>
diff --git a/pages/converter.vue b/pages/converter.vue
index bf83027..91e76fc 100644
--- a/pages/converter.vue
+++ b/pages/converter.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="converter-page">
-    <page-title :title="$t('converter-page.main-title')" />
-    <div class="block">
+    <h2>{{ $t('converter-page.main-title') }}</h2>
+    <div>
       <app-tabs :tabs="tabsList" />
-      <div class="content">
+      <div class="converter-page__content">
         <nuxt-page keepalive />
       </div>
     </div>
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppTabs, PageTitle } from '#components'
+import { AppTabs } from '#components'
 import { definePageMeta } from '#imports'
 import { ROUTE_PATH } from '@/constants'
 import { type Tab } from '@/types'
@@ -45,8 +45,10 @@ const tabsList = computed<Tab[]>(() => [
 
 <style lang="scss" scoped>
 .converter-page {
-  display: flex;
-  flex-direction: column;
-  gap: toRem(32);
+  @include solidity-tools-page-base;
+}
+
+.converter-page__content {
+  @include solidity-tools-page-content;
 }
 </style>
diff --git a/pages/hash-function.vue b/pages/hash-function.vue
index 9be9a8e..4655e9d 100644
--- a/pages/hash-function.vue
+++ b/pages/hash-function.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="hash-functions-page">
-    <page-title :title="$t('hash-functions-page.main-title')" />
-    <div class="block">
+    <h2>{{ $t('hash-functions-page.main-title') }}</h2>
+    <div>
       <app-tabs :tabs="TABS_LIST" />
-      <div class="content">
+      <div class="hash-functions-page__content">
         <nuxt-page keepalive />
       </div>
     </div>
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppTabs, PageTitle } from '#components'
+import { AppTabs } from '#components'
 import { definePageMeta } from '#imports'
 import { ROUTE_PATH } from '@/constants'
 import { type Tab } from '@/types'
@@ -48,8 +48,10 @@ const TABS_LIST: Tab[] = [
 
 <style lang="scss" scoped>
 .hash-functions-page {
-  display: flex;
-  flex-direction: column;
-  gap: toRem(32);
+  @include solidity-tools-page-base;
+}
+
+.hash-functions-page__content {
+  @include solidity-tools-page-content;
 }
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index fcf329b..36acb1c 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,10 +1,17 @@
 <template>
-  <div class="home-page">
+  <main class="home-page">
     <stats-preview />
     <projects-info />
-  </div>
+  </main>
 </template>
 
 <script lang="ts" setup>
 import { StatsPreview, ProjectsInfo } from '#components'
 </script>
+
+<style lang="scss" scoped>
+.home-page {
+  margin-top: 0;
+  padding: 0;
+}
+</style>
diff --git a/pages/unix-epoch.vue b/pages/unix-epoch.vue
index 258b61c..07b049e 100644
--- a/pages/unix-epoch.vue
+++ b/pages/unix-epoch.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="unix-epoch-page">
-    <page-title :title="$t('unix-epoch-page.main-title')" />
-    <div class="block">
+    <h2>{{ $t('unix-epoch-page.main-title') }}</h2>
+    <div>
       <app-tabs :tabs="tabsList" />
-      <div class="content">
+      <div class="unix-epoch-page__content">
         <nuxt-page keepalive />
       </div>
     </div>
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { AppTabs, PageTitle } from '#components'
+import { AppTabs } from '#components'
 import { definePageMeta } from '#imports'
 import { ROUTE_PATH } from '@/constants'
 import { type Tab } from '@/types'
@@ -45,8 +45,13 @@ const tabsList = computed<Tab[]>(() => [
 
 <style lang="scss" scoped>
 .unix-epoch-page {
-  display: flex;
-  flex-direction: column;
-  gap: toRem(32);
+  @include solidity-tools-page-base;
+}
+
+.unix-epoch-page__content {
+  // to avoid a UI bug on scroll when calendar is opening
+  margin-bottom: toRem(104);
+
+  @include solidity-tools-page-content;
 }
 </style>
diff --git a/yarn.lock b/yarn.lock
index dbe1b9a..6b9d07e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5150,7 +5150,7 @@ pify@^2.3.0:
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
 
-pinia@>=2.1.0, pinia@^2.0.22:
+pinia@>=2.1.0:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/pinia/-/pinia-2.1.4.tgz#a642adfe6208e10c36d3dc16184a91064788142a"
   integrity sha512-vYlnDu+Y/FXxv1ABo1vhjC+IbqvzUdiUC3sfDRrRyY2CQSrqqaa+iiHmqtARFxJVqWQMCJfXx1PBvFs9aJVLXQ==