diff --git a/assets/main.scss b/assets/main.scss
index 45156b9..7cfb543 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -47,15 +47,16 @@ body {
 }
 
 .menu {
-    @apply col-span-10 flex justify-end;
+    @apply hidden xl:flex col-span-10 justify-end;
 
     a {
-        @apply hover:text-ioprim-900 transition-colors;
+        @apply text-zinc-800 hover:text-ioprim-900 transition-colors;
 
         &:before {
             content: '';
-            @apply inline-block w-[2px] h-5  mx-4 align-middle bg-gradient-to-t from-transparent via-[#333333] via-50% to-transparent;
+            @apply inline-block w-[2px] h-5 mx-4 align-middle bg-gradient-to-t from-transparent via-zinc-800 via-50% to-transparent;
         }
+
         &:first-child::before {
             content: none;
         }
@@ -69,6 +70,32 @@ body {
             @apply ml-2;
         }
     }
+
+    &.toggle_visible {
+        @apply max-xl:flex max-xl:flex-col max-xl:text-center;
+
+        a {
+            @apply max-xl:mb-2;
+        }
+
+        a:before {
+            @media screen and (max-width: 1280px) {    
+                content: none;
+            }
+        }
+    }
+
+    &-toggle {
+        @apply flex xl:hidden col-span-8 justify-end;
+
+        >span {
+            @apply cursor-pointer text-zinc-600 hover:text-ioprim-900 transition-colors;
+
+            svg {
+                @apply text-3xl;
+            }
+        }
+    }
 }
 
 a[href^="#"] {
@@ -76,31 +103,67 @@ a[href^="#"] {
 }
 
 .footer {
-    @apply px-2 py-4 bg-slate-200;
+    @apply px-2 py-4 bg-slate-200 text-zinc-800 pt-12;
 
     .container {
         @apply gap-4
     }
 
     .k-logo {
-        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl;
+        @apply col-span-12 xl:col-span-2 row-span-3 text-9xl text-ioprim;
 
         svg {
             @apply my-0 mx-auto;
         }
+
+        &:after {
+            content: '';
+            @apply block lg:hidden mr-auto ml-auto mt-5 h-[2px] max-w-44 mx-4 align-middle bg-gradient-to-r from-transparent via-zinc-800 via-50% to-transparent;
+
+        }
     }
 
     &-text {
-        @apply col-span-12 xl:col-span-5 text-sm prose;
+        @apply col-span-12 xl:col-span-5 text-sm mb-2;
 
         &-small {
-            @apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
+            @apply col-span-12 xl:col-span-10 text-xs min-w-full;
         }
 
         &-social {
-            @apply col-span-12 xl:col-span-10 flex gap-4
+            @apply col-span-12 xl:col-span-10 flex gap-4 flex-wrap justify-center;
         }
     }
+
+    &-icon {
+        @apply order-2 flex justify-center items-center gap-2;
+
+        &:hover {
+            .footer-icon-text {
+                @apply no-underline;
+            }
+        }
+
+        svg {
+            @apply mb-0;
+        }
+
+        &-big {
+            @apply text-3xl order-1 w-full text-center;
+
+            .footer-icon-text {
+                @apply no-underline;
+            }
+        }
+
+        &-text {
+            @apply underline;
+        }
+    }
+
+    &_two {
+        @apply xl:bg-slate-200 py-16 lg:py-8 text-sm text-zinc-500;
+    }
 }
 
 .siteblock {
diff --git a/components/footer.vue b/components/footer.vue
index 2efc357..7797b2f 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -15,22 +15,49 @@ const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=s
 const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
 </script>
 <template>
-    <div class="footer" id="contacts">
-        <div class="container">
-            <div class="k-logo">
-                <k_logo />
+    <div>
+        <div class="footer" id="contacts">
+            <div class="container">
+                <div class="col-span-12 lg:col-span-6 xl:col-span-3 mb-12 lg:mb-0">
+                    <div class="k-logo">
+                        <k_logo />
+                    </div>
+                </div>
+                <div class="col-span-12 lg:col-span-6 xl:col-span-6 mb-12 lg:mb-0">
+                    <template v-for="item in footerData">
+                        <div class="footer-text" v-if="!item.small_text">
+                            <template v-for="p in item.text.split('\n')">
+                                <p v-if="p.trim().length">{{ p }}</p>
+                            </template>
+                        </div>
+                    </template>
+                </div>
+                <div class="col-span-12 xl:col-span-3">
+                    <div class="footer-text footer-text-social" v-if="social_networkData">
+                        <template v-for="item in social_networkData">
+                            <a :class="['footer-icon', { 'footer-icon-big': !item.icon }]" :href="item.link"
+                                target="_blank">
+                                <template v-if="item.icon">
+                                    <component :is="icons[(item.icon.trim() as keyof typeof icons)]"
+                                        v-if="icons.hasOwnProperty(item.icon.trim())" />
+                                    <Icon :name="item.icon" v-else />
+                                </template>
+                                <span class="footer-icon-text">{{ item.name }}</span>
+                            </a>
+                        </template>
+                    </div>
+                </div>
             </div>
-            <template v-for="item in footerData">
-                <div class="footer-text" :class="[{ 'footer-text-small': item.small_text }]">{{ item.text }}</div>
-            </template>
-            <div class="footer-text footer-text-social" v-if="social_networkData">
-                <template v-for="item in social_networkData">
-                    <a :href="item.link" target="_blank">
-                        <component :is="icons[(item.icon.trim() as keyof typeof icons)]"
-                            v-if="icons.hasOwnProperty(item.icon.trim())" />
-                        <Icon :name="item.icon" v-else /> {{ item.name }}
-                    </a>
-                </template>
+        </div>
+        <div class="footer_two">
+            <div class="container">
+                <div class="col-span-10 col-start-2">
+                    <template v-for="item in footerData">
+                        <div class="footer-text" v-if="item.small_text">
+                            {{ item.text }}
+                        </div>
+                    </template>
+                </div>
             </div>
         </div>
     </div>
diff --git a/components/header.vue b/components/header.vue
index 93ef533..0291c09 100644
--- a/components/header.vue
+++ b/components/header.vue
@@ -5,6 +5,13 @@ import k_logo from '@/assets/LOGO.svg'
 const { data: menuData } = await apiFetch<ApiMenuType>(`menu/1/`)
 const pagesData = (menuData.value ? menuData.value.pages : []).sort((a, b) => a.order - b.order)
 const route = useRoute()
+
+const menu_visible = ref(false)
+const toggle_menu = () => {
+    if (window.innerWidth < 1280) {
+        menu_visible.value = !menu_visible.value
+    }
+}
 </script>
 <template>
     <div class="header">
@@ -15,10 +22,15 @@ const route = useRoute()
                     <span class="logo_text">Kupizabor</span>
                 </NuxtLink>
             </div>
-            <div class="menu">
+            <div class="menu-toggle">
+                <span @click="toggle_menu">
+                    <Icon name="mdi:menu" />
+                </span>
+            </div>
+            <div class="menu" :class="[{ 'toggle_visible': menu_visible }]">
                 <template v-for="item in pagesData">
                     <NuxtLink :to="item.external_link || ((route.name == 'index' ? '' : '/') + `#${item.slug}`)"
-                        :target="item.external_link ? '_blank' : '_self'">
+                        :target="item.external_link ? '_blank' : '_self'" @click="toggle_menu">
                         {{ item.menu_title }}
                     </NuxtLink>
                 </template>