diff --git a/src/components/FAQSection.vue b/src/components/FAQSection.vue
index 32c403c..28f8d3e 100644
--- a/src/components/FAQSection.vue
+++ b/src/components/FAQSection.vue
@@ -4,6 +4,7 @@
       class="q-pa-md w100 flex justify-center"
       style="max-width: 800px"
       >
+      
       <q-list>
         <faq-section-item
           v-for="item in 8"
@@ -13,12 +14,15 @@
           class="q-my-md"
         />
       </q-list>
-      <div class="text-h6 text-primary q-py-md text-center">
+      
+      <div
+        class="text-h6 text-primary q-py-md text-center"
+      >
         {{ $t('faq__description') }}
         <a
           href="mailto:support@tgcrew.ru"
           style="text-decoration: none; color: inherit"
-          >
+        >
           support@tgcrew.ru
         </a>
       </div>
diff --git a/src/components/HeroBanner.vue b/src/components/HeroBanner.vue
index 2aff3e8..16e9fe6 100644
--- a/src/components/HeroBanner.vue
+++ b/src/components/HeroBanner.vue
@@ -11,14 +11,15 @@
         class="column items-center"
         style="max-width: 75%; height: 100%">
         <div
-          class="column justify-end text-h4 text-grey-4 text-center edge-block"
+          class="column justify-end text-grey-4 text-center edge-block"
+          :class="$q.screen.lt.sm ? 'text-h5' : 'text-h4'"
           >
           {{ $t('banner__slogan_prepend') }} 	&mdash;
         </div>
   
         <div
-          class="text-h2 text-white text-center q-py-lg center-block"
-          style="line-height: 4rem;"
+          class="text-white text-center q-py-lg center-block"
+          :class="$q.screen.lt.sm ? 'text-h4' : 'text-h3'"
           >
           {{ $t('banner__slogan_body') }}
           <span class="text-no-wrap" color="primary">
@@ -36,11 +37,16 @@
             rounded
             >
             <div class="flex items-center no-wrap center-block">
-              <div class="q-pl-md text-h4">{{ $t('banner__main_btn')}}</div> 
+              <div
+                class="q-pl-md"
+                :class="$q.screen.lt.sm ? 'text-h5' : 'text-h4'"
+                >
+                {{ $t('banner__main_btn')}}
+              </div> 
               <q-icon name="keyboard_arrow_right"/>
             </div>
           </q-btn>
-          <div class="text-white q-pt-md edge-block justify-start">
+          <div class="text-white q-pt-md edge-block justify-start text-grey-2">
             {{ $t('banner__main_btn_description')}}
           </div>
         </div>
@@ -51,7 +57,7 @@
 <script setup lang="ts">
 </script>
 
-<style scoped>
+<style scoped lang="scss">
  .vert-height {
    min-height: calc(100vh * 0.75);
  }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 85a4a17..4c45e09 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -32,6 +32,7 @@
               no-caps
               @click="scrollToElement(item.ref)"
               ref="menuButtons"
+              color="grey-9"
               >
               <span class="text-no-wrap">{{ $t(item.title) }}</span>
             </q-btn>