diff --git a/src/app/api/streetcode/streetcodes.api.ts b/src/app/api/streetcode/streetcodes.api.ts
index 87151e58c..da9a43a0b 100644
--- a/src/app/api/streetcode/streetcodes.api.ts
+++ b/src/app/api/streetcode/streetcodes.api.ts
@@ -27,6 +27,10 @@ const StreetcodesApi = {
 
     getAllMainPage: () => Agent.get<StreetcodeMainPage[]>(`${API_ROUTES.STREETCODES.GET_ALL_MAINPAGE}`),
 
+    getPageMainPage: (page: number, pageSize: number, args: any) => Agent
+        .get<StreetcodeMainPage[]>(`${API_ROUTES.STREETCODES.GET_PAGE_MAINPAGE}`,
+        new URLSearchParams(Object.entries({ page: page.toString(), pageSize: pageSize.toString(), shuffleSeed: args["shuffleSeed"].toString() }))),
+
     getAllCatalog: (page: number, count: number) => Agent
         .get<StreetcodeCatalogRecord[]>(
             `${API_ROUTES.STREETCODES.GET_ALL_CATALOG}`,
diff --git a/src/app/common/components/modals/Donates/DonatesModal.component.tsx b/src/app/common/components/modals/Donates/DonatesModal.component.tsx
index a88acae6b..89837c163 100644
--- a/src/app/common/components/modals/Donates/DonatesModal.component.tsx
+++ b/src/app/common/components/modals/Donates/DonatesModal.component.tsx
@@ -74,7 +74,7 @@ const DonatesModal = () => {
 
             Promise.all([DonationApi.create(donation)])
                 .then((response) => {
-                    window.location.assign(response[0].pageUrl);
+                    window.open(response[0].pageUrl);
                 })
                 .catch();
         }
@@ -145,7 +145,7 @@ const DonatesModal = () => {
                         checked={isCheckboxChecked}
                         onChange={(e) => setIsCheckboxChecked(e.target.checked)}
                     >
-                        Я даю згоду на обробку моїх персональних даних
+                        Я даю згоду на обробку моїх <a className='privacyPolicy' href='/privacy-policy'>персональних даних</a>
                     </Checkbox>
                 </div>
                 <button
diff --git a/src/app/common/components/modals/Donates/DonatesModal.styles.scss b/src/app/common/components/modals/Donates/DonatesModal.styles.scss
index 8d29870d2..759ed32db 100644
--- a/src/app/common/components/modals/Donates/DonatesModal.styles.scss
+++ b/src/app/common/components/modals/Donates/DonatesModal.styles.scss
@@ -149,6 +149,12 @@
       border: none;
       display: flex;
       align-items: center;
+      .privacyPolicy{
+        color: c.$dark-red-color;
+        &:hover{
+          text-decoration: underline;
+        }
+      }
 
 
       .ant-checkbox-input {
diff --git a/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss b/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss
index 2adbb6904..73fc27612 100644
--- a/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss
+++ b/src/app/common/components/modals/Lightbox/LightboxComponent.styles.scss
@@ -45,16 +45,7 @@
 
     @media screen and (min-width:1025px) {
 
-        .yarl__slide_description_container {
-            @include mut.sized($height: 159px);
-        }
-
-        .yarl__slide_title_container {
-            @include mut.sized($height: 68px);
-        }
-
         .yarl__slide_description {
-            @include mut.sized($height: 129px);
             @include mut.rem-margined($top: 5px, $left: 50px);
             @include mut.with-font($font-weight: 300);
             @include mut.with-font();
@@ -86,15 +77,10 @@
 
     @media screen and (max-width:1025px) {
         .yarl__slide_description_container {
-            @include mut.sized($height: 128px);
             background: rgba(0, 0, 0, 0.5);
             backdrop-filter: blur(26.5px);
         }
 
-        .yarl__slide_title_container {
-            @include mut.sized($height: 45px);
-        }
-
         .yarl__slide_description {
             @include mut.rem-margined($top: 2px, $left: 10px);
             @include mut.with-font();
diff --git a/src/app/common/components/modals/ListenText/ListenText.styles.scss b/src/app/common/components/modals/ListenText/ListenText.styles.scss
index 1fb7f4d13..8cc9510a6 100644
--- a/src/app/common/components/modals/ListenText/ListenText.styles.scss
+++ b/src/app/common/components/modals/ListenText/ListenText.styles.scss
@@ -8,7 +8,7 @@
     @include mut.sized(1200px, 46px);
     @include mut.flex-centered();
 
-    @include mut.positioned-as(fixed, $bottom: 4%);
+    @include mut.positioned-as(fixed, $bottom: 15px);
     @include mut.full-rounded(11px, $overflow: visible);
 
     background-color: c.$pure-white-color;
diff --git a/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.component.tsx b/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.component.tsx
index 8c098ad59..f1af0f803 100644
--- a/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.component.tsx
+++ b/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.component.tsx
@@ -36,6 +36,9 @@ const TagsSliderModal = ({ streetCodeid, activeTagBlock, setActiveTagId }: Props
                         slidesToScroll={1}
                         initialSlide={activeTagBlock}
                         focusOnSelect
+                        beforeChange={
+                            (currentSlide, nextSlide) => setActiveTagId(getTagArray[nextSlide].id)
+                        }
                     >
                         {getTagArray?.map((tag) => (
                             <div key={tag.id}>
diff --git a/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.styles.scss b/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.styles.scss
index 3e4f1c394..c9671fd25 100644
--- a/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.styles.scss
+++ b/src/app/common/components/modals/Tags/TagsSliderModal/TagsSliderModal.styles.scss
@@ -2,11 +2,15 @@
 @use "@assets/sass/variables/_variables.colors.scss" as c;
 @use "@assets/sass/_utils.functions.scss" as f;
 
+
 .tagModalContainer {
   width: 100%;
-
   @include mut.flex-centered();
   
+  .slick-slide{
+    margin-left: f.pxToRem(8px);
+    margin-right: f.pxToRem(8px);
+  }
   .slick-list {
     padding: f.pxToRem(20px);
   }
@@ -27,8 +31,6 @@
     
     height: f.pxToRem(38px);
     width: fit-content;
-    margin-left: f.pxToRem(8px);
-    margin-right: f.pxToRem(8px);
 
     color: c.$dark-red-color;
     border: 2px solid c.$dark-red-color;
diff --git a/src/app/common/constants/api-routes.constants.ts b/src/app/common/constants/api-routes.constants.ts
index 60a63c581..723010d8d 100644
--- a/src/app/common/constants/api-routes.constants.ts
+++ b/src/app/common/constants/api-routes.constants.ts
@@ -161,6 +161,7 @@ export const API_ROUTES = {
         GET_ALL: 'streetcode/getAll',
         GET_BY_FILTER: 'streetcode/getByFilter',
         GET_ALL_MAINPAGE: 'streetcode/getAllMainPage',
+        GET_PAGE_MAINPAGE: 'streetcode/getPageMainPage',
         GET_ALL_PUBLISHED: 'streetcode/getAllPublished',
         GET_ALL_SHORT: 'streetcode/getAllShort',
         GET_SHORT_BY_ID: 'streetcode/getShortById',
diff --git a/src/app/common/constants/social.constants.ts b/src/app/common/constants/social.constants.ts
new file mode 100644
index 000000000..acd7296aa
--- /dev/null
+++ b/src/app/common/constants/social.constants.ts
@@ -0,0 +1,10 @@
+const SOCIAL_MEDIA = {
+    FACEBOOK: 'https://www.facebook.com/streetcodeua',
+    INSTAGRAM: 'https://www.instagram.com/streetcodeua',
+    TWITTER: 'https://twitter.com/streetcodeua',
+    TELEGRAM: 'https://t.me/streetcodeua',
+    TIKTOK: 'https://www.tiktok.com/@streetcodeua',
+    YOUTUBE: 'https://www.youtube.com/@streetcodeua',
+};
+
+export default SOCIAL_MEDIA;
diff --git a/src/app/common/utils/getUrlHash.utility.tsx b/src/app/common/utils/getUrlHash.utility.tsx
new file mode 100644
index 000000000..7a9f918b7
--- /dev/null
+++ b/src/app/common/utils/getUrlHash.utility.tsx
@@ -0,0 +1,2 @@
+const getUrlHash = (location: Location): string => location.hash.replace('#', '');
+export default getUrlHash;
\ No newline at end of file
diff --git a/src/app/common/utils/paginateRequest.tsx b/src/app/common/utils/paginateRequest.tsx
new file mode 100644
index 000000000..befa24a33
--- /dev/null
+++ b/src/app/common/utils/paginateRequest.tsx
@@ -0,0 +1,24 @@
+// eslint-disable-next-line import/prefer-default-export
+export function paginateRequest(
+    pageSize: number,
+    request: (page: number, pageSize: number, args: any) => Promise<any>,
+    args: any,
+) {
+    let page = 1;
+
+    const fetchNextPage = async () => {
+        const currentPage = page;
+        const response = await request(currentPage, pageSize, args).catch((error) => {
+            console.error('Error in request:', error);
+        });
+
+        if (response.length === 0) {
+            throw new Error('No more data to load');
+        }
+
+        page = currentPage + 1;
+        return response;
+    };
+
+    return { fetchNextPage };
+}
diff --git a/src/app/layout/footer/Footer.component.tsx b/src/app/layout/footer/Footer.component.tsx
index a61b8c27b..9551419b3 100644
--- a/src/app/layout/footer/Footer.component.tsx
+++ b/src/app/layout/footer/Footer.component.tsx
@@ -1,24 +1,28 @@
 import './Footer.styles.scss';
 
-import FaceBook from '@images/footer/Facebook.webp';
-import Instagram from '@images/footer/Instagram.webp';
+import FaceBook from '@images/footer/Facebook.svg';
+import Instagram from '@images/footer/Instagram.svg';
 import StreetcodeFooter from '@images/footer/streetcode-footer.webp';
-import TikTok from '@images/footer/TikTok.webp';
-import Twitter from '@images/footer/Twitter.webp';
-import Youtube from '@images/footer/Youtube.webp';
+import Telegram from '@images/footer/Telegram.svg';
+import TikTok from '@images/footer/TikTok.svg';
+import Twitter from '@images/footer/Twitter2.svg';
+import Youtube from '@images/footer/Youtube.svg';
 
 import { useEffect, useState } from 'react';
 import { HashLink as Link } from 'react-router-hash-link';
 import useWindowSize from '@hooks/stateful/useWindowSize.hook';
 
 import JobApi from '@/app/api/job/Job.api';
-import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants';
 import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/ContactUsModal.component';
+import FRONTEND_ROUTES from '@/app/common/constants/frontend-routes.constants';
+import SOCIAL_MEDIA from '@/app/common/constants/social.constants';
 import scrollWithOffset from '@/app/common/utils/window.utility';
 
 const Footer = () => {
     const windowSize = useWindowSize();
     const [hasVacancies, setHasVacancies] = useState(false);
+    const REPORTS = 'https://drive.google.com/drive/folders/11Ef4y_6ZHyqT5eDxD5Cn-aWhr-kThh3A?usp=drive_link';
+
     useEffect(() => {
         JobApi.getActive()
             .then(
@@ -48,7 +52,7 @@ const Footer = () => {
                                 <li>
                                     <Link
                                         to={`${FRONTEND_ROUTES.OTHER_PAGES.ABOUT_US}#vacancies`}
-                                        scroll={(el:any) => scrollWithOffset(el, 100)}
+                                        scroll={(el: any) => scrollWithOffset(el, 100)}
                                     >
                                         Вакансії
                                     </Link>
@@ -59,32 +63,41 @@ const Footer = () => {
                         <ul className="usefulLinksColumn supportLinks">
                             <li><a href={FRONTEND_ROUTES.OTHER_PAGES.PRIVACY_POLICY}>Політика конфіденційності</a></li>
                             <li><ContactUsModal toggleState={() => { }} text="Зворотний зв&apos;язок" /></li>
-                            <li><a href="https://drive.google.com/drive/folders/11Ef4y_6ZHyqT5eDxD5Cn-aWhr-kThh3A?usp=drive_link" target="_blank" rel="noreferrer">Звітність ГО «Історична Платформа»</a></li>
+                            <li>
+                                <a href={REPORTS} target="_blank" rel="noreferrer">
+                                    Звітність ГО «Історична Платформа»
+                                </a>
+                            </li>
                         </ul>
                         <ul className="socialIconContainer">
                             <li>
-                                <a href="https://www.facebook.com/streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={FaceBook} alt="" />
+                                <a href={SOCIAL_MEDIA.INSTAGRAM} target="_blank" rel="noreferrer">
+                                    <Instagram />
+                                </a>
+                            </li>
+                            <li>
+                                <a href={SOCIAL_MEDIA.FACEBOOK} target="_blank" rel="noreferrer">
+                                    <FaceBook />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://www.instagram.com/streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={Instagram} alt="" />
+                                <a href={SOCIAL_MEDIA.TWITTER} target="_blank" rel="noreferrer">
+                                    <Twitter />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://twitter.com/streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={Twitter} alt="" />
+                                <a href={SOCIAL_MEDIA.TIKTOK} target="_blank" rel="noreferrer">
+                                    <TikTok />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://www.tiktok.com/@streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={TikTok} alt="" />
+                                <a href={SOCIAL_MEDIA.TELEGRAM} target="_blank" rel="noreferrer">
+                                    <Telegram />
                                 </a>
                             </li>
                             <li>
-                                <a href="https://www.youtube.com/@streetcodeua" target="_blank" rel="noreferrer">
-                                    <img src={Youtube} alt="" />
+                                <a href={SOCIAL_MEDIA.YOUTUBE} target="_blank" rel="noreferrer">
+                                    <Youtube />
                                 </a>
                             </li>
                         </ul>
diff --git a/src/app/layout/footer/Footer.styles.scss b/src/app/layout/footer/Footer.styles.scss
index 61567e5d6..411db8701 100644
--- a/src/app/layout/footer/Footer.styles.scss
+++ b/src/app/layout/footer/Footer.styles.scss
@@ -70,6 +70,7 @@
     li{
       .ant-typography.text-white{
         color: white;
+        @include mut.with-font($font-weight: 300, $font-size: 15px);
       }
     }
   }
@@ -83,9 +84,6 @@
     > * {
      @include mut.rem-margined($right: 14.62px);
     }
-      li:nth-child(5) {
-        @include mut.sized($height: 20px);
-      }
   }
 }
 @media screen and (max-width: 480px) {
diff --git a/src/app/layout/header/HeaderBlock.styles.scss b/src/app/layout/header/HeaderBlock.styles.scss
index fadbd1621..19022947d 100644
--- a/src/app/layout/header/HeaderBlock.styles.scss
+++ b/src/app/layout/header/HeaderBlock.styles.scss
@@ -58,6 +58,12 @@ $navbar-hidden-innerwidth: 400px;
     display: flex;
     align-items: center;
     gap: f.pxToRem(15px);
+
+    .logoContainer{
+      svg{
+        @include mut.sized(167.79px, 29px);
+      }
+    }
 }
 .rightPartContainer {
   @include mut.flexed($justify-content: space-between, $align-items: center);
@@ -68,7 +74,7 @@ $navbar-hidden-innerwidth: 400px;
   @include mut.rem-margined($left: 20px);
 
   .loginBtn {
-    @include mut.sized(142px, 39px);
+    @include mut.sized(139.34px, 39px);
     @include mut.full-rounded(12px);
     background-color: c.$accented-red-color;
 
@@ -134,26 +140,29 @@ $navbar-hidden-innerwidth: 400px;
     
     .leftPartContainer {
         .logoContainer {
-            height: f.pxToRem(34px);
+            height: f.pxToRem(24px);
             svg
             {
-                width: 100%;
-                height: f.pxToRem(34px);
+              @include mut.sized(131px, 22px);
             }
         }    
     }
 
     .rightPartContainer {
-      svg {
-        @include mut.rem-margined($right: 15px);
-
-        &:hover {
-          filter: invert(27%) sepia(26%) saturate(0%) hue-rotate(201deg) brightness(96%) contrast(86%);
+      .rightSectionContainer{
+        svg {
+          @include mut.rem-margined($right: 15px);
+          @include mut.sized(24px, 24px);
+
+          &:hover {
+            filter: invert(27%) sepia(26%) saturate(0%) hue-rotate(201deg) brightness(96%) contrast(86%);
+          }
+        }
+  
+        .burgerMenuContainer {
+          @include mut.rem-margined($right: 15px);
+          @include mut.sized(28px, 17.34px);
         }
-      }
-
-      .burgerMenuContainer {
-        @include mut.rem-margined($right: 15px);
       }
     }
   }
diff --git a/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx b/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx
index 872eb99ec..77a6edc7d 100644
--- a/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx
+++ b/src/app/layout/header/HeaderDrawer/HeaderDrawer.component.tsx
@@ -20,15 +20,15 @@ import { ContactUsModal } from '@/app/common/components/modals/ContactUsModal/Co
 const mobileOptions = 8;
 const desktopOptions = 6;
 const scaleDesktop = 1;
-const scaleMobile = 5;
+const scaleMobile = 12;
 const menuPositionsMobile = [
     1 * scaleMobile,
     2 * scaleMobile,
     3 * scaleMobile - 1,
-    4 * scaleMobile - 1,
-    5 * scaleMobile - 1,
-    6 * scaleMobile - 1,
-    7 * scaleMobile - 1,
+    4 * scaleMobile - 2,
+    5 * scaleMobile - 3,
+    6 * scaleMobile - 3,
+    7 * scaleMobile - 2,
     8 * scaleMobile,
 ];
 const menuOptions = [
diff --git a/src/app/layout/header/HeaderDrawer/HeaderDrawer.styles.scss b/src/app/layout/header/HeaderDrawer/HeaderDrawer.styles.scss
index 0edbe05c1..5a3bd8588 100644
--- a/src/app/layout/header/HeaderDrawer/HeaderDrawer.styles.scss
+++ b/src/app/layout/header/HeaderDrawer/HeaderDrawer.styles.scss
@@ -28,9 +28,11 @@
   width: 25%;
 }
 
+$track-width: f.pxToRem(1.5px);
+
 .customSlider-track {
   top: f.pxToRem(8px);
-  width: f.pxToRem(1.5px);
+  width: $track-width;
   background: c.$normal-gray-color;
   position: relative;
 }
@@ -38,7 +40,7 @@
 .thumb {
   cursor: default;
   position: absolute;
-  left: -(f.pxToRem(5.2px));
+  transform: translateX(calc(-50% + $track-width / 2)); 
   z-index: 100;
   background: c.$dark-red-color;
   border: f.pxToRem(6px) solid c.$dark-red-color;
diff --git a/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx b/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx
index 59757d692..05eefe311 100644
--- a/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx
+++ b/src/app/layout/header/HeaderDrawer/SocialMediaLinks/SocialMediaLinks.component.tsx
@@ -1,36 +1,38 @@
 import './SocialMediaLinks.styles.scss';
 
-import FaceBook from '@images/header-drawer/Facebook.webp';
-import Instagram from '@images/header-drawer/Instagram.webp';
-import TikTok from '@images/header-drawer/TikTok.webp';
-import Twitter from '@images/header-drawer/Twitter.webp';
-import Youtube from '@images/header-drawer/Youtube.webp';
+import FaceBook from '@images/header-drawer/Facebook.svg';
+import Instagram from '@images/header-drawer/Instagram.svg';
+import Telegram from '@images/header-drawer/Telegram.svg';
+import TikTok from '@images/header-drawer/TikTok.svg';
+import Youtube from '@images/header-drawer/Youtube.svg';
+
+import SOCIAL_MEDIA from '@/app/common/constants/social.constants';
 
 const SocialMediaLinks = () => (
     <ul className="socialIconHeaderContainer">
         <li>
-            <a href="https://www.facebook.com/streetcodeua" target="_blank" rel="noreferrer">
-                <img src={FaceBook} alt="" />
+            <a href={SOCIAL_MEDIA.INSTAGRAM} target="_blank" rel="noreferrer">
+                <Instagram />
             </a>
         </li>
         <li>
-            <a href="https://www.instagram.com/streetcodeua" target="_blank" rel="noreferrer">
-                <img src={Instagram} alt="" />
+            <a href={SOCIAL_MEDIA.FACEBOOK} target="_blank" rel="noreferrer">
+                <FaceBook />
             </a>
         </li>
         <li>
-            <a href="https://twitter.com/streetcodeua" target="_blank" rel="noreferrer">
-                <img src={Twitter} alt="" />
+            <a href={SOCIAL_MEDIA.TIKTOK} target="_blank" rel="noreferrer">
+                <TikTok />
             </a>
         </li>
         <li>
-            <a href="https://www.tiktok.com/@streetcodeua" target="_blank" rel="noreferrer">
-                <img src={TikTok} alt="" />
+            <a href={SOCIAL_MEDIA.TELEGRAM} target="_blank" rel="noreferrer">
+                <Telegram />
             </a>
         </li>
         <li>
-            <a href="https://www.youtube.com/@streetcodeua" target="_blank" rel="noreferrer">
-                <img src={Youtube} alt="" />
+            <a href={SOCIAL_MEDIA.YOUTUBE} target="_blank" rel="noreferrer">
+                <Youtube />
             </a>
         </li>
     </ul>
diff --git a/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx b/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx
index 0329203ea..b5390f05f 100644
--- a/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx
+++ b/src/app/layout/header/SearchBlock/SearchResultItem/SearchItem.component.tsx
@@ -8,7 +8,10 @@ interface Props {
 }
 
 const SearchResultItem = ({ searchResultItem } : Props) => {
-    const url = `/${searchResultItem.streetcodeTransliterationUrl}${searchResultItem.factId !== 0 ? (`?factId=${searchResultItem.factId}`) : ('')}${searchResultItem.timelineItemId !== 0 ? (`?timelineItemId=${searchResultItem.timelineItemId}`) : ('')}${searchResultItem.blockName ? (`#${searchResultItem.blockName}`) : ('')}`;
+    const url = `/${searchResultItem.streetcodeTransliterationUrl
+    }${searchResultItem.factId !== 0 ? (`?factId=${searchResultItem.factId}`) : ('')
+    }${searchResultItem.timelineItemId !== 0 ? (`?timelineItemId=${searchResultItem.timelineItemId}`) : ('')
+    }${searchResultItem.blockName ? (`#${searchResultItem.blockName}`) : ('')}`;
 
     const sourceName = `Стріткод #${searchResultItem.streetcodeIndex.toString().padStart(4, '0')
     }${searchResultItem.sourceName ? `/${searchResultItem.sourceName}` : ''}`;
diff --git a/src/app/stores/streetcode-mainpage-store.ts b/src/app/stores/streetcode-mainpage-store.ts
index 7f214ab91..f346df4a9 100644
--- a/src/app/stores/streetcode-mainpage-store.ts
+++ b/src/app/stores/streetcode-mainpage-store.ts
@@ -11,13 +11,23 @@ export default class StreetcodesMainPageStore {
     }
 
     public fetchStreetcodesMainPageAll = async () => {
-        StreetcodesApi.getAllMainPage()
-            .then((value) => {
-                this.streetcodes = value.map((s) => ({ id: s.id, title: s.title, teaser: s.teaser, alias: s.alias, text:s.text, imageId: s.imageId, transliterationUrl: s.transliterationUrl }));
-            }).catch((error) => {});
+        try {
+            const value = await StreetcodesApi.getAllMainPage();
+            this.streetcodes = value.map((s) => ({
+                id: s.id,
+                title: s.title,
+                teaser: s.teaser,
+                alias: s.alias,
+                text: s.text,
+                imageId: s.imageId,
+                transliterationUrl: s.transliterationUrl,
+            }));
+        } catch (error) {
+            console.error(error);
+        }
     };
 
     get getStreetcodesArray() {
         return this.streetcodes;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/stores/streetcodes-catalog-store.ts b/src/app/stores/streetcodes-catalog-store.ts
index a25b87796..6edb86502 100644
--- a/src/app/stores/streetcodes-catalog-store.ts
+++ b/src/app/stores/streetcodes-catalog-store.ts
@@ -6,22 +6,27 @@ import { StreetcodeCatalogRecord } from '@/models/streetcode/streetcode-types.mo
 export default class StreetcodesCatalogStore {
     public catalog = new Array<StreetcodeCatalogRecord>();
 
-    public isNotEightorZero = false;
+    public fetchNumber = 8;
+
+    public moreThenEight = false;
 
     constructor() {
         makeAutoObservable(this);
     }
 
-    public fetchCatalogStreetcodes = async (page: number, count = 8) => {
+    public fetchCatalogStreetcodes = async (page: number, count = this.fetchNumber) => {
         try {
+            const fetchedPublishCount = (await StreetcodesApi.getAllPublished())
+                .length;
             const array = await StreetcodesApi.getAllCatalog(page, count);
             if (
-                this.catalog.length === 0
-                || !array.some((item) => item.id === this.catalog.at(0)?.id)
+                this.catalog.length === 0 || !array.some((item) => item.id === this.catalog.at(0)?.id)
             ) {
                 this.catalog = this.catalog.concat(array);
-                if (array.length !== 0 && array.length < count) {
-                    this.isNotEightorZero = true;
+                if (this.catalog.length === fetchedPublishCount || fetchedPublishCount <= this.fetchNumber) {
+                    this.moreThenEight = false;
+                } else {
+                    this.moreThenEight = true;
                 }
             }
         } catch (error) {}
diff --git a/src/assets/images/contact-us/Email.svg b/src/assets/images/contact-us/Email.svg
new file mode 100644
index 000000000..faa656c17
--- /dev/null
+++ b/src/assets/images/contact-us/Email.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 4H4C2.9 4 2.01 4.9 2.01 6L2 18C2 19.1 2.9 20 4 20H20C21.1 20 22 19.1 22 18V6C22 4.9 21.1 4 20 4ZM19.6 8.25L12.53 12.67C12.21 12.87 11.79 12.87 11.47 12.67L4.4 8.25C4.29973 8.19371 4.21192 8.11766 4.14189 8.02645C4.07186 7.93525 4.02106 7.83078 3.99258 7.71937C3.96409 7.60796 3.9585 7.49194 3.97616 7.37831C3.99381 7.26468 4.03434 7.15581 4.09528 7.0583C4.15623 6.96079 4.23632 6.87666 4.33073 6.811C4.42513 6.74533 4.53187 6.69951 4.6445 6.6763C4.75712 6.65309 4.87328 6.65297 4.98595 6.67595C5.09863 6.69893 5.20546 6.74453 5.3 6.81L12 11L18.7 6.81C18.7945 6.74453 18.9014 6.69893 19.014 6.67595C19.1267 6.65297 19.2429 6.65309 19.3555 6.6763C19.4681 6.69951 19.5749 6.74533 19.6693 6.811C19.7637 6.87666 19.8438 6.96079 19.9047 7.0583C19.9657 7.15581 20.0062 7.26468 20.0238 7.37831C20.0415 7.49194 20.0359 7.60796 20.0074 7.71937C19.9789 7.83078 19.9281 7.93525 19.8581 8.02645C19.7881 8.11766 19.7003 8.19371 19.6 8.25Z" fill="#E04031"/>
+</svg>
diff --git a/src/assets/images/contact-us/Facebook.svg b/src/assets/images/contact-us/Facebook.svg
new file mode 100644
index 000000000..acfe44a20
--- /dev/null
+++ b/src/assets/images/contact-us/Facebook.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22 12.0611C22 6.50451 17.5229 2 12 2C6.47715 2 2 6.50451 2 12.0611C2 17.0828 5.65684 21.2452 10.4375 22V14.9694H7.89844V12.0611H10.4375V9.84452C10.4375 7.32296 11.9305 5.93012 14.2146 5.93012C15.3084 5.93012 16.4531 6.12663 16.4531 6.12663V8.60261H15.1922C13.95 8.60261 13.5625 9.37822 13.5625 10.1747V12.0611H16.3359L15.8926 14.9694H13.5625V22C18.3432 21.2452 22 17.0828 22 12.0611Z" fill="#E04031"/>
+</svg>
diff --git a/src/assets/images/contact-us/Facebook.webp b/src/assets/images/contact-us/Facebook.webp
deleted file mode 100644
index 020865f50..000000000
Binary files a/src/assets/images/contact-us/Facebook.webp and /dev/null differ
diff --git a/src/assets/images/contact-us/Instagram.svg b/src/assets/images/contact-us/Instagram.svg
new file mode 100644
index 000000000..85e642178
--- /dev/null
+++ b/src/assets/images/contact-us/Instagram.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 2C14.717 2 15.056 2.01 16.122 2.06C17.187 2.11 17.912 2.277 18.55 2.525C19.21 2.779 19.766 3.123 20.322 3.678C20.8305 4.1779 21.224 4.78259 21.475 5.45C21.722 6.087 21.89 6.813 21.94 7.878C21.987 8.944 22 9.283 22 12C22 14.717 21.99 15.056 21.94 16.122C21.89 17.187 21.722 17.912 21.475 18.55C21.2247 19.2178 20.8311 19.8226 20.322 20.322C19.822 20.8303 19.2173 21.2238 18.55 21.475C17.913 21.722 17.187 21.89 16.122 21.94C15.056 21.987 14.717 22 12 22C9.283 22 8.944 21.99 7.878 21.94C6.813 21.89 6.088 21.722 5.45 21.475C4.78233 21.2245 4.17753 20.8309 3.678 20.322C3.16941 19.8222 2.77593 19.2175 2.525 18.55C2.277 17.913 2.11 17.187 2.06 16.122C2.013 15.056 2 14.717 2 12C2 9.283 2.01 8.944 2.06 7.878C2.11 6.812 2.277 6.088 2.525 5.45C2.77524 4.78218 3.1688 4.17732 3.678 3.678C4.17767 3.16923 4.78243 2.77573 5.45 2.525C6.088 2.277 6.812 2.11 7.878 2.06C8.944 2.013 9.283 2 12 2ZM12 7C10.6739 7 9.40215 7.52678 8.46447 8.46447C7.52678 9.40215 7 10.6739 7 12C7 13.3261 7.52678 14.5979 8.46447 15.5355C9.40215 16.4732 10.6739 17 12 17C13.3261 17 14.5979 16.4732 15.5355 15.5355C16.4732 14.5979 17 13.3261 17 12C17 10.6739 16.4732 9.40215 15.5355 8.46447C14.5979 7.52678 13.3261 7 12 7ZM18.5 6.75C18.5 6.41848 18.3683 6.10054 18.1339 5.86612C17.8995 5.6317 17.5815 5.5 17.25 5.5C16.9185 5.5 16.6005 5.6317 16.3661 5.86612C16.1317 6.10054 16 6.41848 16 6.75C16 7.08152 16.1317 7.39946 16.3661 7.63388C16.6005 7.8683 16.9185 8 17.25 8C17.5815 8 17.8995 7.8683 18.1339 7.63388C18.3683 7.39946 18.5 7.08152 18.5 6.75ZM12 9C12.7956 9 13.5587 9.31607 14.1213 9.87868C14.6839 10.4413 15 11.2044 15 12C15 12.7956 14.6839 13.5587 14.1213 14.1213C13.5587 14.6839 12.7956 15 12 15C11.2044 15 10.4413 14.6839 9.87868 14.1213C9.31607 13.5587 9 12.7956 9 12C9 11.2044 9.31607 10.4413 9.87868 9.87868C10.4413 9.31607 11.2044 9 12 9Z" fill="#E04031"/>
+</svg>
diff --git a/src/assets/images/contact-us/Instagram.webp b/src/assets/images/contact-us/Instagram.webp
deleted file mode 100644
index 9be16aaf4..000000000
Binary files a/src/assets/images/contact-us/Instagram.webp and /dev/null differ
diff --git a/src/assets/images/contact-us/Telegram.svg b/src/assets/images/contact-us/Telegram.svg
new file mode 100644
index 000000000..62d34a392
--- /dev/null
+++ b/src/assets/images/contact-us/Telegram.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM12.3585 9.38254C11.3858 9.7871 9.44188 10.6244 6.52668 11.8945C6.0533 12.0828 5.80532 12.2669 5.78274 12.447C5.74459 12.7513 6.1257 12.8712 6.64466 13.0344C6.71525 13.0566 6.7884 13.0796 6.86338 13.1039C7.37397 13.2699 8.06079 13.4641 8.41784 13.4718C8.74172 13.4788 9.10321 13.3453 9.5023 13.0712C12.2261 11.2326 13.6321 10.3033 13.7204 10.2832C13.7826 10.2691 13.8689 10.2513 13.9274 10.3033C13.9859 10.3553 13.9801 10.4537 13.9739 10.4801C13.9362 10.6411 12.4402 12.0318 11.666 12.7516C11.4247 12.976 11.2535 13.1351 11.2185 13.1715C11.1401 13.2529 11.0602 13.3299 10.9834 13.4039C10.5091 13.8612 10.1534 14.2041 11.0031 14.7641C11.4115 15.0332 11.7382 15.2557 12.0642 15.4777C12.4202 15.7202 12.7753 15.962 13.2348 16.2632C13.3518 16.3399 13.4636 16.4196 13.5725 16.4972C13.9868 16.7926 14.3591 17.0579 14.8189 17.0156C15.0861 16.991 15.3622 16.7398 15.5023 15.9904C15.8336 14.2194 16.4848 10.3821 16.6353 8.80091C16.6485 8.66238 16.6319 8.48508 16.6186 8.40725C16.6052 8.32942 16.5774 8.21852 16.4762 8.13644C16.3564 8.03922 16.1715 8.01871 16.0887 8.02017C15.7126 8.0268 15.1356 8.22745 12.3585 9.38254Z" fill="#E04031"/>
+</svg>
diff --git a/src/assets/images/contact-us/TikTok.svg b/src/assets/images/contact-us/TikTok.svg
new file mode 100644
index 000000000..520916e18
--- /dev/null
+++ b/src/assets/images/contact-us/TikTok.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4992 2H13.145V15.6232C13.145 17.2464 11.855 18.5797 10.2496 18.5797C8.64418 18.5797 7.35413 17.2464 7.35413 15.6232C7.35413 14.029 8.61552 12.7246 10.1636 12.6667V9.24639C6.75211 9.30433 4 12.1159 4 15.6232C4 19.1594 6.80944 22 10.2783 22C13.747 22 16.5565 19.1304 16.5565 15.6232V8.63767C17.8179 9.56522 19.3659 10.1159 21 10.1449V6.72464C18.4773 6.63768 16.4992 4.55072 16.4992 2Z" fill="#E04031"/>
+</svg>
diff --git a/src/assets/images/contact-us/TikTok.webp b/src/assets/images/contact-us/TikTok.webp
deleted file mode 100644
index 14481f4b0..000000000
Binary files a/src/assets/images/contact-us/TikTok.webp and /dev/null differ
diff --git a/src/assets/images/contact-us/Twitter.svg b/src/assets/images/contact-us/Twitter.svg
new file mode 100644
index 000000000..59e046bdd
--- /dev/null
+++ b/src/assets/images/contact-us/Twitter.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="2" y="2" width="20" height="20" rx="5" fill="#E04031"/>
+<path d="M6.0293 6L10.6622 12.6198L6 17.9997H7.04928L11.1312 13.2887L14.4302 18H18L13.1062 11.009L17.4458 6H16.3965L12.6374 10.338L9.59985 6H6.0293ZM7.57244 6.82594H9.21283L16.4561 17.1738H14.8162L7.57244 6.82594Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/contact-us/Twitter.webp b/src/assets/images/contact-us/Twitter.webp
deleted file mode 100644
index 0398b0391..000000000
Binary files a/src/assets/images/contact-us/Twitter.webp and /dev/null differ
diff --git a/src/assets/images/contact-us/YouTube.svg b/src/assets/images/contact-us/YouTube.svg
new file mode 100644
index 000000000..b4a7dd64e
--- /dev/null
+++ b/src/assets/images/contact-us/YouTube.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.8 15.4286L15.509 12L9.8 8.57143V15.4286ZM22.516 6.48C22.659 7.01714 22.758 7.73714 22.824 8.65143C22.901 9.56571 22.934 10.3543 22.934 11.04L23 12C23 14.5029 22.824 16.3429 22.516 17.52C22.241 18.5486 21.603 19.2114 20.613 19.4971C20.096 19.6457 19.15 19.7486 17.698 19.8171C16.268 19.8971 14.959 19.9314 13.749 19.9314L12 20C7.391 20 4.52 19.8171 3.387 19.4971C2.397 19.2114 1.759 18.5486 1.484 17.52C1.341 16.9829 1.242 16.2629 1.176 15.3486C1.099 14.4343 1.066 13.6457 1.066 12.96L1 12C1 9.49714 1.176 7.65714 1.484 6.48C1.759 5.45143 2.397 4.78857 3.387 4.50286C3.904 4.35429 4.85 4.25143 6.302 4.18286C7.732 4.10286 9.041 4.06857 10.251 4.06857L12 4C16.609 4 19.48 4.18286 20.613 4.50286C21.603 4.78857 22.241 5.45143 22.516 6.48Z" fill="#E04031"/>
+</svg>
diff --git a/src/assets/images/contact-us/Youtube.webp b/src/assets/images/contact-us/Youtube.webp
deleted file mode 100644
index 291e24927..000000000
Binary files a/src/assets/images/contact-us/Youtube.webp and /dev/null differ
diff --git a/src/assets/images/contact-us/email.webp b/src/assets/images/contact-us/email.webp
deleted file mode 100644
index 58631086f..000000000
Binary files a/src/assets/images/contact-us/email.webp and /dev/null differ
diff --git a/src/assets/images/footer/Facebook.svg b/src/assets/images/footer/Facebook.svg
new file mode 100644
index 000000000..833835f3f
--- /dev/null
+++ b/src/assets/images/footer/Facebook.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 13.5C27 6.04415 20.9558 0 13.5 0C6.04415 0 0 6.04415 0 13.5C0 20.2381 4.93673 25.8232 11.3906 26.836V17.4023H7.96289V13.5H11.3906V10.5258C11.3906 7.14234 13.4061 5.27344 16.4898 5.27344C17.9663 5.27344 19.5117 5.53711 19.5117 5.53711V8.85938H17.8095C16.1325 8.85938 15.6094 9.90009 15.6094 10.9688V13.5H19.3535L18.755 17.4023H15.6094V26.836C22.0633 25.8232 27 20.2381 27 13.5Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/footer/Facebook.webp b/src/assets/images/footer/Facebook.webp
deleted file mode 100644
index c1330ce60..000000000
Binary files a/src/assets/images/footer/Facebook.webp and /dev/null differ
diff --git a/src/assets/images/footer/Instagram.svg b/src/assets/images/footer/Instagram.svg
new file mode 100644
index 000000000..a1f259f85
--- /dev/null
+++ b/src/assets/images/footer/Instagram.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 0C17.1679 0 17.6256 0.0134999 19.0647 0.0809999C20.5025 0.1485 21.4812 0.37395 22.3425 0.70875C23.2335 1.05165 23.9841 1.51605 24.7347 2.2653C25.4212 2.94016 25.9523 3.75649 26.2913 4.6575C26.6247 5.51745 26.8515 6.49755 26.919 7.9353C26.9825 9.3744 27 9.83205 27 13.5C27 17.1679 26.9865 17.6256 26.919 19.0647C26.8515 20.5025 26.6247 21.4812 26.2913 22.3425C25.9533 23.244 25.422 24.0605 24.7347 24.7347C24.0596 25.4209 23.2434 25.9521 22.3425 26.2913C21.4825 26.6247 20.5025 26.8515 19.0647 26.919C17.6256 26.9825 17.1679 27 13.5 27C9.83205 27 9.3744 26.9865 7.9353 26.919C6.49755 26.8515 5.5188 26.6247 4.6575 26.2913C3.75614 25.953 2.93966 25.4218 2.2653 24.7347C1.5787 24.06 1.04751 23.2436 0.70875 22.3425C0.37395 21.4825 0.1485 20.5025 0.0809999 19.0647C0.0175499 17.6256 0 17.1679 0 13.5C0 9.83205 0.0134999 9.3744 0.0809999 7.9353C0.1485 6.4962 0.37395 5.5188 0.70875 4.6575C1.04657 3.75594 1.57788 2.93938 2.2653 2.2653C2.93986 1.57846 3.75628 1.04723 4.6575 0.70875C5.5188 0.37395 6.4962 0.1485 7.9353 0.0809999C9.3744 0.0175499 9.83205 0 13.5 0ZM13.5 6.75C11.7098 6.75 9.9929 7.46116 8.72703 8.72703C7.46116 9.9929 6.75 11.7098 6.75 13.5C6.75 15.2902 7.46116 17.0071 8.72703 18.273C9.9929 19.5388 11.7098 20.25 13.5 20.25C15.2902 20.25 17.0071 19.5388 18.273 18.273C19.5388 17.0071 20.25 15.2902 20.25 13.5C20.25 11.7098 19.5388 9.9929 18.273 8.72703C17.0071 7.46116 15.2902 6.75 13.5 6.75ZM22.275 6.4125C22.275 5.96495 22.0972 5.53573 21.7807 5.21926C21.4643 4.90279 21.0351 4.725 20.5875 4.725C20.1399 4.725 19.7107 4.90279 19.3943 5.21926C19.0778 5.53573 18.9 5.96495 18.9 6.4125C18.9 6.86005 19.0778 7.28928 19.3943 7.60574C19.7107 7.92221 20.1399 8.1 20.5875 8.1C21.0351 8.1 21.4643 7.92221 21.7807 7.60574C22.0972 7.28928 22.275 6.86005 22.275 6.4125ZM13.5 9.45C14.5741 9.45 15.6043 9.87669 16.3638 10.6362C17.1233 11.3957 17.55 12.4259 17.55 13.5C17.55 14.5741 17.1233 15.6043 16.3638 16.3638C15.6043 17.1233 14.5741 17.55 13.5 17.55C12.4259 17.55 11.3957 17.1233 10.6362 16.3638C9.87669 15.6043 9.45 14.5741 9.45 13.5C9.45 12.4259 9.87669 11.3957 10.6362 10.6362C11.3957 9.87669 12.4259 9.45 13.5 9.45Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/footer/Instagram.webp b/src/assets/images/footer/Instagram.webp
deleted file mode 100644
index ab8b38f7a..000000000
Binary files a/src/assets/images/footer/Instagram.webp and /dev/null differ
diff --git a/src/assets/images/footer/Telegram.svg b/src/assets/images/footer/Telegram.svg
new file mode 100644
index 000000000..f4287d293
--- /dev/null
+++ b/src/assets/images/footer/Telegram.svg
@@ -0,0 +1,10 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13486_6261)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 13.5C27 20.9558 20.9558 27 13.5 27C6.04416 27 0 20.9558 0 13.5C0 6.04416 6.04416 0 13.5 0C20.9558 0 27 6.04416 27 13.5ZM13.984 9.96649C12.6709 10.5126 10.0466 11.643 6.11107 13.3577C5.472 13.6118 5.13723 13.8604 5.10676 14.1035C5.05525 14.5144 5.56974 14.6762 6.27035 14.8965C6.36565 14.9264 6.46439 14.9575 6.56562 14.9904C7.25491 15.2144 8.18212 15.4766 8.66414 15.487C9.10138 15.4964 9.58939 15.3162 10.1282 14.9462C13.8052 12.4641 15.7034 11.2095 15.8225 11.1824C15.9066 11.1634 16.0231 11.1394 16.1021 11.2095C16.181 11.2797 16.1732 11.4126 16.1649 11.4482C16.1139 11.6655 14.0943 13.543 13.0492 14.5147C12.7234 14.8176 12.4923 15.0325 12.445 15.0815C12.3392 15.1915 12.2313 15.2954 12.1277 15.3954C11.4873 16.0127 11.0071 16.4756 12.1543 17.2316C12.7055 17.5949 13.1467 17.8953 13.5867 18.195C14.0674 18.5223 14.5468 18.8487 15.167 19.2553C15.325 19.3589 15.4759 19.4665 15.6229 19.5713C16.1823 19.97 16.6848 20.3283 17.3056 20.2712C17.6663 20.238 18.039 19.8988 18.2282 18.8871C18.6754 16.4962 19.5545 11.316 19.7577 9.18129C19.7755 8.99426 19.7531 8.75491 19.7351 8.64984C19.7171 8.54477 19.6796 8.39506 19.543 8.28424C19.3812 8.153 19.1315 8.12532 19.0199 8.12729C18.5121 8.13623 17.7331 8.40711 13.984 9.96649Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_13486_6261">
+<rect width="27" height="27" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/footer/TikTok.webp b/src/assets/images/footer/TikTok.webp
deleted file mode 100644
index d9dc25257..000000000
Binary files a/src/assets/images/footer/TikTok.webp and /dev/null differ
diff --git a/src/assets/images/footer/Tiktok.svg b/src/assets/images/footer/Tiktok.svg
new file mode 100644
index 000000000..638ae7fa2
--- /dev/null
+++ b/src/assets/images/footer/Tiktok.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9566 0H14.4063V18.3913C14.4063 20.5826 12.6562 22.3826 10.4783 22.3826C8.30038 22.3826 6.55028 20.5826 6.55028 18.3913C6.55028 16.2391 8.26149 14.4782 10.3616 14.4V9.78263C5.73356 9.86085 2 13.6565 2 18.3913C2 23.1653 5.81134 27 10.5172 27C15.223 27 19.0343 23.1261 19.0343 18.3913V8.96085C20.7456 10.213 22.8457 10.9565 25.0625 10.9957V6.37826C21.6401 6.26087 18.9566 3.44348 18.9566 0Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/footer/Twitter.webp b/src/assets/images/footer/Twitter.webp
deleted file mode 100644
index 171e58e00..000000000
Binary files a/src/assets/images/footer/Twitter.webp and /dev/null differ
diff --git a/src/assets/images/footer/Twitter2.svg b/src/assets/images/footer/Twitter2.svg
new file mode 100644
index 000000000..0531ac8f1
--- /dev/null
+++ b/src/assets/images/footer/Twitter2.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="27" height="27" rx="6.75" fill="white"/>
+<path d="M5.34033 5.30005L11.5947 14.2368L5.30078 21.4997H6.71731L12.2279 15.1399L16.6815 21.5H21.5008L14.8941 12.0622L20.7526 5.30005H19.3361L14.2613 11.1564L10.1606 5.30005H5.34033ZM7.42358 6.41506H9.63811L19.4165 20.3847H17.2027L7.42358 6.41506Z" fill="#891F16"/>
+</svg>
diff --git a/src/assets/images/footer/Youtube.svg b/src/assets/images/footer/Youtube.svg
new file mode 100644
index 000000000..fcb0ce891
--- /dev/null
+++ b/src/assets/images/footer/Youtube.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8 18.2857L17.8065 14L10.8 9.71429V18.2857ZM26.406 7.1C26.5815 7.77143 26.703 8.67143 26.784 9.81429C26.8785 10.9571 26.919 11.9429 26.919 12.8L27 14C27 17.1286 26.784 19.4286 26.406 20.9C26.0685 22.1857 25.2855 23.0143 24.0705 23.3714C23.436 23.5571 22.275 23.6857 20.493 23.7714C18.738 23.8714 17.1315 23.9143 15.6465 23.9143L13.5 24C7.8435 24 4.32 23.7714 2.9295 23.3714C1.7145 23.0143 0.9315 22.1857 0.594 20.9C0.4185 20.2286 0.297 19.3286 0.216 18.1857C0.1215 17.0429 0.0809999 16.0571 0.0809999 15.2L0 14C0 10.8714 0.216 8.57143 0.594 7.1C0.9315 5.81429 1.7145 4.98571 2.9295 4.62857C3.564 4.44286 4.725 4.31429 6.507 4.22857C8.262 4.12857 9.8685 4.08571 11.3535 4.08571L13.5 4C19.1565 4 22.68 4.22857 24.0705 4.62857C25.2855 4.98571 26.0685 5.81429 26.406 7.1Z" fill="white"/>
+</svg>
diff --git a/src/assets/images/footer/Youtube.webp b/src/assets/images/footer/Youtube.webp
deleted file mode 100644
index f8b38ca88..000000000
Binary files a/src/assets/images/footer/Youtube.webp and /dev/null differ
diff --git a/src/assets/images/header-drawer/Facebook.svg b/src/assets/images/header-drawer/Facebook.svg
new file mode 100644
index 000000000..3132b25de
--- /dev/null
+++ b/src/assets/images/header-drawer/Facebook.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27 13.5C27 6.04415 20.9558 0 13.5 0C6.04415 0 0 6.04415 0 13.5C0 20.2381 4.93673 25.8232 11.3906 26.836V17.4023H7.96289V13.5H11.3906V10.5258C11.3906 7.14234 13.4061 5.27344 16.4898 5.27344C17.9663 5.27344 19.5117 5.53711 19.5117 5.53711V8.85938H17.8095C16.1325 8.85938 15.6094 9.90009 15.6094 10.9688V13.5H19.3535L18.755 17.4023H15.6094V26.836C22.0633 25.8232 27 20.2381 27 13.5Z" fill="#891F16"/>
+</svg>
diff --git a/src/assets/images/header-drawer/Facebook.webp b/src/assets/images/header-drawer/Facebook.webp
deleted file mode 100644
index fd1d910a2..000000000
Binary files a/src/assets/images/header-drawer/Facebook.webp and /dev/null differ
diff --git a/src/assets/images/header-drawer/Instagram.svg b/src/assets/images/header-drawer/Instagram.svg
new file mode 100644
index 000000000..8b11c3ad8
--- /dev/null
+++ b/src/assets/images/header-drawer/Instagram.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 0C17.1679 0 17.6256 0.0134999 19.0647 0.0809999C20.5025 0.1485 21.4812 0.37395 22.3425 0.70875C23.2335 1.05165 23.9841 1.51605 24.7347 2.2653C25.4212 2.94016 25.9523 3.75649 26.2913 4.6575C26.6247 5.51745 26.8515 6.49755 26.919 7.9353C26.9825 9.3744 27 9.83205 27 13.5C27 17.1679 26.9865 17.6256 26.919 19.0647C26.8515 20.5025 26.6247 21.4812 26.2913 22.3425C25.9533 23.244 25.422 24.0605 24.7347 24.7347C24.0596 25.4209 23.2434 25.9521 22.3425 26.2913C21.4825 26.6247 20.5025 26.8515 19.0647 26.919C17.6256 26.9825 17.1679 27 13.5 27C9.83205 27 9.3744 26.9865 7.9353 26.919C6.49755 26.8515 5.5188 26.6247 4.6575 26.2913C3.75614 25.953 2.93966 25.4218 2.2653 24.7347C1.5787 24.06 1.04751 23.2436 0.70875 22.3425C0.37395 21.4825 0.1485 20.5025 0.0809999 19.0647C0.0175499 17.6256 0 17.1679 0 13.5C0 9.83205 0.0134999 9.3744 0.0809999 7.9353C0.1485 6.4962 0.37395 5.5188 0.70875 4.6575C1.04657 3.75594 1.57788 2.93938 2.2653 2.2653C2.93986 1.57846 3.75628 1.04723 4.6575 0.70875C5.5188 0.37395 6.4962 0.1485 7.9353 0.0809999C9.3744 0.0175499 9.83205 0 13.5 0ZM13.5 6.75C11.7098 6.75 9.9929 7.46116 8.72703 8.72703C7.46116 9.9929 6.75 11.7098 6.75 13.5C6.75 15.2902 7.46116 17.0071 8.72703 18.273C9.9929 19.5388 11.7098 20.25 13.5 20.25C15.2902 20.25 17.0071 19.5388 18.273 18.273C19.5388 17.0071 20.25 15.2902 20.25 13.5C20.25 11.7098 19.5388 9.9929 18.273 8.72703C17.0071 7.46116 15.2902 6.75 13.5 6.75ZM22.275 6.4125C22.275 5.96495 22.0972 5.53573 21.7807 5.21926C21.4643 4.90279 21.0351 4.725 20.5875 4.725C20.1399 4.725 19.7107 4.90279 19.3943 5.21926C19.0778 5.53573 18.9 5.96495 18.9 6.4125C18.9 6.86005 19.0778 7.28928 19.3943 7.60574C19.7107 7.92221 20.1399 8.1 20.5875 8.1C21.0351 8.1 21.4643 7.92221 21.7807 7.60574C22.0972 7.28928 22.275 6.86005 22.275 6.4125ZM13.5 9.45C14.5741 9.45 15.6043 9.87669 16.3638 10.6362C17.1233 11.3957 17.55 12.4259 17.55 13.5C17.55 14.5741 17.1233 15.6043 16.3638 16.3638C15.6043 17.1233 14.5741 17.55 13.5 17.55C12.4259 17.55 11.3957 17.1233 10.6362 16.3638C9.87669 15.6043 9.45 14.5741 9.45 13.5C9.45 12.4259 9.87669 11.3957 10.6362 10.6362C11.3957 9.87669 12.4259 9.45 13.5 9.45Z" fill="#891F16"/>
+</svg>
diff --git a/src/assets/images/header-drawer/Instagram.webp b/src/assets/images/header-drawer/Instagram.webp
deleted file mode 100644
index a8730ecb8..000000000
Binary files a/src/assets/images/header-drawer/Instagram.webp and /dev/null differ
diff --git a/src/assets/images/header-drawer/Telegram.svg b/src/assets/images/header-drawer/Telegram.svg
new file mode 100644
index 000000000..775db9e1e
--- /dev/null
+++ b/src/assets/images/header-drawer/Telegram.svg
@@ -0,0 +1,10 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_13614_4871)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27 13.5C27 20.9558 20.9558 27 13.5 27C6.04416 27 0 20.9558 0 13.5C0 6.04416 6.04416 0 13.5 0C20.9558 0 27 6.04416 27 13.5ZM13.984 9.96649C12.6709 10.5126 10.0466 11.643 6.11107 13.3577C5.472 13.6118 5.13723 13.8604 5.10676 14.1035C5.05525 14.5144 5.56974 14.6762 6.27035 14.8965C6.36565 14.9264 6.46439 14.9575 6.56562 14.9904C7.25491 15.2144 8.18212 15.4766 8.66414 15.487C9.10138 15.4964 9.58939 15.3162 10.1282 14.9462C13.8052 12.4641 15.7034 11.2095 15.8225 11.1824C15.9066 11.1634 16.0231 11.1394 16.1021 11.2095C16.181 11.2797 16.1732 11.4126 16.1649 11.4482C16.1139 11.6655 14.0943 13.543 13.0492 14.5147C12.7234 14.8176 12.4923 15.0325 12.445 15.0815C12.3392 15.1915 12.2313 15.2954 12.1277 15.3954C11.4873 16.0127 11.0071 16.4756 12.1543 17.2316C12.7055 17.5949 13.1467 17.8953 13.5867 18.195C14.0674 18.5223 14.5468 18.8487 15.167 19.2553C15.325 19.3589 15.4759 19.4665 15.6229 19.5713C16.1823 19.97 16.6848 20.3283 17.3056 20.2712C17.6663 20.238 18.039 19.8988 18.2282 18.8871C18.6754 16.4962 19.5545 11.316 19.7577 9.18129C19.7755 8.99426 19.7531 8.75491 19.7351 8.64984C19.7171 8.54477 19.6796 8.39506 19.543 8.28424C19.3812 8.153 19.1315 8.12532 19.0199 8.12729C18.5121 8.13623 17.7331 8.40711 13.984 9.96649Z" fill="#891F16"/>
+</g>
+<defs>
+<clipPath id="clip0_13614_4871">
+<rect width="27" height="27" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/src/assets/images/header-drawer/TikTok.webp b/src/assets/images/header-drawer/TikTok.webp
deleted file mode 100644
index 6b9c6a7cb..000000000
Binary files a/src/assets/images/header-drawer/TikTok.webp and /dev/null differ
diff --git a/src/assets/images/header-drawer/Tiktok.svg b/src/assets/images/header-drawer/Tiktok.svg
new file mode 100644
index 000000000..620f37414
--- /dev/null
+++ b/src/assets/images/header-drawer/Tiktok.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.9566 0H14.4063V18.3913C14.4063 20.5826 12.6562 22.3826 10.4783 22.3826C8.30038 22.3826 6.55028 20.5826 6.55028 18.3913C6.55028 16.2391 8.26149 14.4782 10.3616 14.4V9.78263C5.73356 9.86085 2 13.6565 2 18.3913C2 23.1653 5.81134 27 10.5172 27C15.223 27 19.0343 23.1261 19.0343 18.3913V8.96085C20.7456 10.213 22.8457 10.9565 25.0625 10.9957V6.37826C21.6401 6.26087 18.9566 3.44348 18.9566 0Z" fill="#891F16"/>
+</svg>
diff --git a/src/assets/images/header-drawer/Twitter.webp b/src/assets/images/header-drawer/Twitter.webp
deleted file mode 100644
index 6e5ce5c10..000000000
Binary files a/src/assets/images/header-drawer/Twitter.webp and /dev/null differ
diff --git a/src/assets/images/header-drawer/Youtube.svg b/src/assets/images/header-drawer/Youtube.svg
new file mode 100644
index 000000000..3b2d07624
--- /dev/null
+++ b/src/assets/images/header-drawer/Youtube.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="27" viewBox="0 0 27 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8 18.2857L17.8065 14L10.8 9.71429V18.2857ZM26.406 7.1C26.5815 7.77143 26.703 8.67143 26.784 9.81429C26.8785 10.9571 26.919 11.9429 26.919 12.8L27 14C27 17.1286 26.784 19.4286 26.406 20.9C26.0685 22.1857 25.2855 23.0143 24.0705 23.3714C23.436 23.5571 22.275 23.6857 20.493 23.7714C18.738 23.8714 17.1315 23.9143 15.6465 23.9143L13.5 24C7.8435 24 4.32 23.7714 2.9295 23.3714C1.7145 23.0143 0.9315 22.1857 0.594 20.9C0.4185 20.2286 0.297 19.3286 0.216 18.1857C0.1215 17.0429 0.0809999 16.0571 0.0809999 15.2L0 14C0 10.8714 0.216 8.57143 0.594 7.1C0.9315 5.81429 1.7145 4.98571 2.9295 4.62857C3.564 4.44286 4.725 4.31429 6.507 4.22857C8.262 4.12857 9.8685 4.08571 11.3535 4.08571L13.5 4C19.1565 4 22.68 4.22857 24.0705 4.62857C25.2855 4.98571 26.0685 5.81429 26.406 7.1Z" fill="#891F16"/>
+</svg>
diff --git a/src/assets/images/header-drawer/Youtube.webp b/src/assets/images/header-drawer/Youtube.webp
deleted file mode 100644
index a5da90288..000000000
Binary files a/src/assets/images/header-drawer/Youtube.webp and /dev/null differ
diff --git a/src/assets/sass/mixins/_utils.mixins.scss b/src/assets/sass/mixins/_utils.mixins.scss
index 3e0094802..333f51036 100644
--- a/src/assets/sass/mixins/_utils.mixins.scss
+++ b/src/assets/sass/mixins/_utils.mixins.scss
@@ -252,3 +252,18 @@
     @content;
   }
 }
+
+@mixin blur($edge:0, $top:0, $height:0) {
+  position: relative;
+  &:after {
+    content: '';
+    position: absolute;
+    top: $top;
+    left: 0;
+    right: 0;
+    height: f.pxToRem($height);
+    background: linear-gradient($edge, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.25) 5%, rgba(255, 255, 255, 0.664) 21%);
+    -webkit-text-fill-color: transparent;
+    z-index: 100;
+  }
+}
diff --git a/src/features/AboutUsPage/AboutUsHeaderText/AboutUsHeaderText.component.tsx b/src/features/AboutUsPage/AboutUsHeaderText/AboutUsHeaderText.component.tsx
index 8818acede..762a9928b 100644
--- a/src/features/AboutUsPage/AboutUsHeaderText/AboutUsHeaderText.component.tsx
+++ b/src/features/AboutUsPage/AboutUsHeaderText/AboutUsHeaderText.component.tsx
@@ -1,40 +1,42 @@
-import './AboutUsHeaderText.styles.scss'
+import './AboutUsHeaderText.styles.scss';
 
 const AboutUsHeaderText = () => (
     <div className="aboutUsBlockContainer">
         <div className="headerTitle">ПРО НАС</div>
 
-        <div className='contentWrapper'>
-            <div className='headerBigText'>
-                Привіт! Ми – ГО <label className='redText'>«Історична Платформа»</label>, що разом із командою досвідчених креаторів, провідних істориків та потужних партнерів створює «Стріткод» – найбільшу платформу про історію України, вбудовану в простори міст.
+        <div className="contentWrapper">
+            <div className="headerBigText">
+                Привіт! Ми — ГО
+                {' '}
+                <label className="redText">«Історична Платформа»</label>, що разом із командою досвідчених креаторів, провідних істориків та потужних партнерів створює «Стріткод» — найбільшу платформу про історію України, вбудовану в простори міст.
             </div>
 
-            <div className='headerList'>
-                <div className='listItem'>
-                    <div className='redLine' />
-                    <div className='listText'>
+            <div className="headerList">
+                <div className="listItem">
+                    <div className="redLine" />
+                    <div className="listText">
                         Ми розповідаємо про видатні постаті та визначні події, на честь яких названі наші вулиці.
                     </div>
                 </div>
-                <div className='listItem'>
-                    <div className='redLine' />
-                    <div className='listText'>
+                <div className="listItem">
+                    <div className="redLine" />
+                    <div className="listText">
                         Пояснюємо історичні зв’язки у просторі та часі.
                     </div>
                 </div>
-                <div className='listItem'>
-                    <div className='redLine' />
-                    <div className='listText'>
+                <div className="listItem">
+                    <div className="redLine" />
+                    <div className="listText">
                         Посилюємо історичну просвіту, популяризуємо історію, допомагаємо з декомунізацією історичної свідомості.
                     </div>
                 </div>
             </div>
 
-            <div className='headerSmallText'>
+            <div className="headerSmallText">
                 Все це верифіковано, концентровано, структуровано та в одному місці. Щоб нарешті позбутися колонізаторських впливів та наслідків.
             </div>
         </div>
     </div>
-)
+);
 
-export default AboutUsHeaderText;
\ No newline at end of file
+export default AboutUsHeaderText;
diff --git a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx
index b18c7f998..a6fe51d11 100644
--- a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx
+++ b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.component.tsx
@@ -1,24 +1,31 @@
-import './FounderCard.styles.scss'
-import Instagram from '@/assets/images/about-us/instagram.png'
-import Facebook from '@/assets/images/about-us/facebook.png'
+import './FounderCard.styles.scss';
 
-const FounderCard = (founder: FounderProps) => {
-    return (
-        <div className='founderCard'>
-            <div className='founderCardImageContainer' >
-                <img className='founderImage' src={founder.founderImage} />
-            </div>
-            <div className='foundersTextBlock borderRadiusSmall'>
-                <div className='founderCardTextContainer'>
-                    <h2>{founder.founderName}</h2>
-                    <p>{founder.founderRole}</p>
-                    <div className='founderCardLinks'>
-                        <a href={founder.founderFacebook}><img src={Facebook} /></a>
-                        <a href={founder.founderInstagram}><img src={Instagram} /></a>
-                    </div>
+import Facebook from '@/assets/images/partners/facebook.svg';
+import Instagram from '@/assets/images/partners/instagram.svg';
+
+const createLink = (url: string, iconComponent) => (
+    <a href={url} target="_blank" rel="noreferrer">
+        {iconComponent}
+    </a>
+);
+
+const FounderCard = ({
+    founderImage, founderName, founderRole, founderFacebook, founderInstagram,
+}: FounderProps) => (
+    <div className="founderCard">
+        <div className="founderCardImageContainer">
+            <img className="founderImage" src={founderImage} />
+        </div>
+        <div className="foundersTextBlock borderRadiusSmall">
+            <div className="founderCardTextContainer">
+                <h2>{founderName}</h2>
+                <p>{founderRole}</p>
+                <div className="founderCardLinks">
+                    {createLink(founderFacebook, <Facebook />)}
+                    {createLink(founderInstagram, <Instagram />)}
                 </div>
             </div>
         </div>
-    )
-}
-export default FounderCard;
\ No newline at end of file
+    </div>
+);
+export default FounderCard;
diff --git a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss
index c662690e6..7f1fbbdb6 100644
--- a/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss
+++ b/src/features/AboutUsPage/Founders/Founder/FounderCard/FounderCard.styles.scss
@@ -43,6 +43,9 @@
         justify-content: center;
         display: flex;
         gap: 14px;
+        @media screen and (min-width: 1024px) {
+        transform: scale(1.4);
+        }
     }
 
     @media screen and (max-width: s.$smallDesctop)
@@ -58,7 +61,7 @@
                 font-size: 24px !important;
             }
             p { 
-                word-break: break-all;
+                word-break: word-break;
                 font-size: 15px !important;
             }
         }
diff --git a/src/features/AboutUsPage/Founders/Founders.component.tsx b/src/features/AboutUsPage/Founders/Founders.component.tsx
index 7e73012a2..ba58429c8 100644
--- a/src/features/AboutUsPage/Founders/Founders.component.tsx
+++ b/src/features/AboutUsPage/Founders/Founders.component.tsx
@@ -24,11 +24,11 @@ const FounderInna: FounderProps = {
 
 const FounderNatalia: FounderProps = {
     founderName: 'Наталя Демідова',
-    founderRole: 'Авторка ідеї, співзасновниця проєкту',
+    founderRole: 'Авторка ідеї, співзасновниця ГО',
     founderImage: Natalia,
     founderInstagram: 'https://www.instagram.com/notatka8/',
     founderFacebook: 'https://www.facebook.com/NatalyaDemydiv',
-    founderText: '«Я хочу, щоб українські діти, які зростатимуть після Перемоги, знали, хто в цьому світі на що здатний. Хочу, щоби розуміли причинно-наслідкові зв’язки і були захищені цим знанням. Для того маємо відновлювати історичну пам’ять вже зараз. Це водночас і просто, і складно. Просто – бо є проєкт «Стріткод», бачення, як його втілити, і команда, яка вже це робить. Складно, бо масштаби – вся Україна. Але це той проєкт, який має бути реалізований, тут без варіантів. Тому несемось!) Приєднуйтеся ;)»',
+    founderText: '«Я хочу, щоб українські діти, які зростатимуть після Перемоги, знали, хто в цьому світі на що здатний. Хочу, щоби розуміли причинно-наслідкові зв’язки і були захищені цим знанням. Для того маємо відновлювати історичну пам’ять вже зараз. Це водночас і просто, і складно. Просто — бо є проєкт «Стріткод», бачення, як його втілити, і команда, яка вже це робить. Складно, бо масштаби — вся Україна. Але це той проєкт, який має бути реалізований, тут без варіантів. Тому несемось!) Приєднуйтеся ;)»',
     order: false,
 };
 
@@ -74,12 +74,12 @@ const TeamMemberCardNatalia: TeamMember = {
     teamMemberLinks: [
         {
             id: -1,
-            targetUrl: FounderInna.founderFacebook,
+            targetUrl: FounderNatalia.founderFacebook,
             logoType: 2,
         },
         {
             id: -2,
-            targetUrl: FounderInna.founderInstagram,
+            targetUrl: FounderNatalia.founderInstagram,
             logoType: 1,
         },
     ],
diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss
index 64b8b2720..d2fcc2860 100644
--- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss
+++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberCard.styles.scss
@@ -51,7 +51,7 @@
 
             h2 {
                 @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 23px);
-                @include mut.truncated($line-num: 1);
+                @include mut.truncated($line-num: 2);
             }
 
             p {
diff --git a/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx b/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx
index 7a29ea603..79a005c8e 100644
--- a/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx
+++ b/src/features/AboutUsPage/TeamMemberCard/TeamMemberLinks/TeamMemberLinks.component.tsx
@@ -17,7 +17,7 @@ const TeamMemberLinks = ({ link }: Props) => {
     const LogoComponent = LogoType[link.logoType];
 
     return (
-        <a href={link.targetUrl}>
+        <a href={link.targetUrl} target="_blank" rel="noreferrer">
             <LogoComponent />
         </a>
     );
diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx
index 20a8d21cc..fc0450813 100644
--- a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx
+++ b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.component.tsx
@@ -1,22 +1,27 @@
 import './ContactBlock.styles.scss';
 
-import Email from '@images/contact-us/email.webp';
-import Facebook from '@images/contact-us/Facebook.webp';
-import Instagram from '@images/contact-us/Instagram.webp';
+import Email from '@images/contact-us/Email.svg';
+import Facebook from '@images/contact-us/Facebook.svg';
+import Instagram from '@images/contact-us/Instagram.svg';
 import Logo from '@images/contact-us/logo-2.webp';
-import TikTok from '@images/contact-us/TikTok.webp';
-import Twitter from '@images/contact-us/Twitter.webp';
-import YouTube from '@images/contact-us/Youtube.webp';
+import Telegram from '@images/contact-us/Telegram.svg';
+import TikTok from '@images/contact-us/TikTok.svg';
+import Twitter from '@images/contact-us/Twitter.svg';
+import YouTube from '@images/contact-us/Youtube.svg';
 
 import { EMAIL_INFO } from '@constants/email.constants';
 
+import SOCIAL_MEDIA from '@/app/common/constants/social.constants';
+
 const ContactBlock = () => (
     <div className="contactBlock">
         <img className="contactLogo" src={Logo} alt="" />
         <div className="contactCover">
             <div className="emailBlock">
                 <a href={EMAIL_INFO.WRITE_EMAIL_TO_US} className="emailLink">
-                    <img className="icon" src={Email} alt="email-logo" />
+                    <div className="icon">
+                        <Email />
+                    </div>
                 </a>
                 <span className="email">
                     {EMAIL_INFO.EMAIL}
@@ -24,28 +29,35 @@ const ContactBlock = () => (
             </div>
 
             <div className="socials">
-                <a
-                    href="https://www.facebook.com/streetcodeua"
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    <img className="icon" src={Facebook} alt="Facebook-logo" />
+                <a href={SOCIAL_MEDIA.FACEBOOK} target="_blank" rel="noreferrer">
+                    <div className="icon">
+                        <Facebook />
+                    </div>
+                </a>
+                <a href={SOCIAL_MEDIA.INSTAGRAM} target="_blank" rel="noreferrer">
+                    <div className="icon">
+                        <Instagram />
+                    </div>
                 </a>
-                <a
-                    href="https://www.instagram.com/streetcodeua"
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    <img className="icon" src={Instagram} alt="Instagram-logo" />
+                <a href={SOCIAL_MEDIA.TWITTER} target="_blank" rel="noreferrer">
+                    <div className="icon">
+                        <Twitter />
+                    </div>
                 </a>
-                <a href="https://twitter.com/streetcodeua" target="_blank" rel="noreferrer">
-                    <img className="icon" src={Twitter} alt="Twitter-logo" />
+                <a href={SOCIAL_MEDIA.TIKTOK} target="_blank" rel="noreferrer">
+                    <div className="icon">
+                        <TikTok />
+                    </div>
                 </a>
-                <a href="https://www.tiktok.com/@streetcodeua" target="_blank" rel="noreferrer">
-                    <img className="icon" src={TikTok} alt="TikTok-logo" />
+                <a href={SOCIAL_MEDIA.TELEGRAM} target="_blank" rel="noreferrer">
+                    <div className="icon">
+                        <Telegram />
+                    </div>
                 </a>
-                <a href="https://www.youtube.com/@streetcodeua" target="_blank" rel="noreferrer">
-                    <img className="icon" src={YouTube} alt="YouTube-logo" />
+                <a href={SOCIAL_MEDIA.YOUTUBE} target="_blank" rel="noreferrer">
+                    <div className="icon">
+                        <YouTube />
+                    </div>
                 </a>
             </div>
         </div>
diff --git a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss
index 33239aece..77f99cc75 100644
--- a/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss
+++ b/src/features/AdditionalPages/ContactUsPage/MainBlock/ContactBlock/ContactBlock.styles.scss
@@ -7,48 +7,66 @@
     transform: translate3d(0, 0, 0); //required to make safari use gpu for render filter:drop-shadow
     @include vnd.vendored(filter, 'drop-shadow(0 0 10px rgba(255, 0, 0, 0.612))');
     cursor: pointer;
+    transform: scale(1.7);
 }
 
-.contactUsContainer{
-    .contactBlock{
+.contactUsContainer {
+    .contactBlock {
         position: relative;
         bottom: f.pxToRem(50px);
 
-        .contactCover{
+        .contactCover {
             position: relative;
             z-index: 1;
         }
 
-        .contactLogo{
+        .contactLogo {
             position: absolute;
             top: f.pxToRem(-110px);
             left: f.pxToRem(-54px);
             z-index: 0;
         }
 
-        .emailBlock img,  .phonesBlock img{
-            margin-right: f.pxToRem(10px);
-        }
-        .emailBlock{
-            @include mut.flexed($align-items: center);
+        .emailBlock {
+            @include mut.flexed($align-items: baseline);
             margin-bottom: f.pxToRem(20px);
+            @media screen and (max-width: 1024px) {
+                @include mut.flexed($align-items: normal);
+            }
+            .icon {
+                transform: scale(1.7);
+                margin-right: f.pxToRem(20px);
+                @media screen and (max-width: 1024px) {
+                    transform: scale(1.025);
+                    margin-right: f.pxToRem(5px);
+                }
+            }
 
-            .icon:hover{
+            .icon:hover {
                 @include hoverStyles;
             }
         }
 
-        .socials{
-            .icon{
+        .socials {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+
+            .icon {
                 transition: all 0.2s ease;
-                margin-right: f.pxToRem(30px);
+                margin-right: f.pxToRem(35px);
+                transform: scale(1.7);
+                @media screen and (max-width: 1024px) {
+                    transform: scale(1.025);
+                }
             }
-            .icon:hover{
+
+            .icon:hover {
                 @include hoverStyles;
             }
         }
 
-        .email{
+        .email {
             @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 36px);
             line-height: 48px;
             color: #1D1F23;
@@ -57,14 +75,15 @@
 }
 
 @media screen and (max-width: 1024px) {
-    .contactUsContainer{
-        .contactBlock{
+    .contactUsContainer {
+        .contactBlock {
             bottom: 0;
-            .icon{
+
+            .icon {
                 transform: scale(0.6);
             }
 
-            .contactLogo{
+            .contactLogo {
                 @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 54px);
                 line-height: 71px;
                 width: f.pxToRem(140px);
@@ -74,11 +93,11 @@
                 left: f.pxToRem(220px);
             }
 
-            .socials .icon{
+            .socials .icon {
                 margin-right: f.pxToRem(20px);
             }
 
-            .email{
+            .email {
                 @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 20px);
                 line-height: 26px;
                 font-family: 'Closer Text';
@@ -86,5 +105,4 @@
             }
         }
     }
-}
-
+}
\ No newline at end of file
diff --git a/src/features/AdditionalPages/PartnersPage/PartnersItem/PartnersItem.styles.scss b/src/features/AdditionalPages/PartnersPage/PartnersItem/PartnersItem.styles.scss
index 6367bda9e..a033c6214 100644
--- a/src/features/AdditionalPages/PartnersPage/PartnersItem/PartnersItem.styles.scss
+++ b/src/features/AdditionalPages/PartnersPage/PartnersItem/PartnersItem.styles.scss
@@ -11,5 +11,6 @@
         width: 100%;
         object-fit: contain;
         cursor: pointer;
+        @include mut.rem-padded($right: 32px, $left: 32px);
     }
 }
\ No newline at end of file
diff --git a/src/features/AdditionalPages/PrivatePolicyPage/SubSections/SubSectionSeventh/SectionSeventh.component.tsx b/src/features/AdditionalPages/PrivatePolicyPage/SubSections/SubSectionSeventh/SectionSeventh.component.tsx
index ee3770271..5b2c976e7 100644
--- a/src/features/AdditionalPages/PrivatePolicyPage/SubSections/SubSectionSeventh/SectionSeventh.component.tsx
+++ b/src/features/AdditionalPages/PrivatePolicyPage/SubSections/SubSectionSeventh/SectionSeventh.component.tsx
@@ -12,7 +12,7 @@ const SectionSeventh = () => (
             <br />
             З питань щодо політики конфіденційності (в т.ч. видалення персональних даних), Користувач може
 
-            зв&apos;язатися з нами, використовуючи e—mail:
+            зв&apos;язатися з нами, використовуючи e—mail: 
             <a className="link" href={EMAIL_INFO.WRITE_EMAIL_TO_US}>{EMAIL_INFO.EMAIL}</a>
             .
         </div>
diff --git a/src/features/AdditionalPages/SupportUsPage/SupportUs.component.tsx b/src/features/AdditionalPages/SupportUsPage/SupportUs.component.tsx
index e9bb73cc8..c41ef2465 100644
--- a/src/features/AdditionalPages/SupportUsPage/SupportUs.component.tsx
+++ b/src/features/AdditionalPages/SupportUsPage/SupportUs.component.tsx
@@ -43,7 +43,7 @@ const SupportUs = () => {
 
     const handlePay = () => {
         donateEvent('support_us_page');
-        window.location.assign('https://pay.mbnk.biz/IyAdn53wljbN');
+        window.open('https://pay.mbnk.biz/IyAdn53wljbN', '_blank');
     };
 
     return (
diff --git a/src/features/AdditionalPages/SupportUsPage/components/DonationBlock.component.tsx b/src/features/AdditionalPages/SupportUsPage/components/DonationBlock.component.tsx
index b98ba9750..38e2f3037 100644
--- a/src/features/AdditionalPages/SupportUsPage/components/DonationBlock.component.tsx
+++ b/src/features/AdditionalPages/SupportUsPage/components/DonationBlock.component.tsx
@@ -66,7 +66,7 @@ const DonationBlock = () => {
             try {
                 const response = await DonationApi.create(donation);
                 donateEvent('support_us_page_donation_block');
-                window.location.assign(response.pageUrl);
+                window.open(response.pageUrl);
             } catch (err) {}
         }
     };
@@ -125,7 +125,7 @@ const DonationBlock = () => {
                     checked={isCheckboxChecked} 
                     onChange={(e) => setIsCheckboxChecked(e.target.checked)}
                 >
-                    Я даю згоду на обробку моїх персональних даних
+                    Я даю згоду на обробку моїх <a href='/privacy-policy'>персональних даних</a>
                 </Checkbox>
             </div>
             <button
diff --git a/src/features/AdminPage/NewStreetcode/ArtGallery/components/ArtGallery/ArtGalleryAdminStyles.styles.scss b/src/features/AdminPage/NewStreetcode/ArtGallery/components/ArtGallery/ArtGalleryAdminStyles.styles.scss
index f786d8c62..241a7ffc1 100644
--- a/src/features/AdminPage/NewStreetcode/ArtGallery/components/ArtGallery/ArtGalleryAdminStyles.styles.scss
+++ b/src/features/AdminPage/NewStreetcode/ArtGallery/components/ArtGallery/ArtGalleryAdminStyles.styles.scss
@@ -107,16 +107,17 @@
     .imgTitle {
         @include mut.with-font();
         @include mut.rem-padded($bottom: 5px);
-        @include mut.truncated();
-        @include mut.with-font($font-size: 15px);
+        @include mut.truncated(2);
+        @include mut.with-font($font-size: 18px);
     }
 
     .imgDescription {
-        @include mut.with-font($font-size: 12px);
+        @include mut.with-font($font-size: 15px);
         @include mut.truncated();
     }
 
     .imgImg {
         border-radius: pxToRem(30px);
+        object-fit: cover;
     }
 }
diff --git a/src/features/AdminPage/NewStreetcode/ForFansBlock/ForFansAdminModal/ForFansAdminModal.component.tsx b/src/features/AdminPage/NewStreetcode/ForFansBlock/ForFansAdminModal/ForFansAdminModal.component.tsx
index 7699916ed..81e2bc1d6 100644
--- a/src/features/AdminPage/NewStreetcode/ForFansBlock/ForFansAdminModal/ForFansAdminModal.component.tsx
+++ b/src/features/AdminPage/NewStreetcode/ForFansBlock/ForFansAdminModal/ForFansAdminModal.component.tsx
@@ -31,8 +31,8 @@ interface Props {
 
 const ForFansModal = ({
     character_limit, open, setOpen, allCategories, onChange,
-} : Props) => {
-    const {sourceCreateUpdateStreetcode, sourcesAdminStore } = useMobx();
+}: Props) => {
+    const { sourceCreateUpdateStreetcode, sourcesAdminStore } = useMobx();
     const editorRef = useRef<Editor | null>(null);
     const categoryUpdate = useRef<StreetcodeCategoryContent | null>();
     const [availableCategories, setAvailableCategories] = useState<SourceCategoryName[]>([]);
@@ -94,15 +94,17 @@ const ForFansModal = ({
         fetchData();
     }, [open, sourceCreateUpdateStreetcode]);
 
-    const onSave = (values:any) => {
-        let elementToUpdate = sourceCreateUpdateStreetcode.ElementToUpdate;
+    const onSave = (values: any) => {
+        const elementToUpdate = sourceCreateUpdateStreetcode.ElementToUpdate;
         if (elementToUpdate) {
             sourceCreateUpdateStreetcode
                 .updateElement(
                     sourceCreateUpdateStreetcode.indexUpdate,
-                    { ...elementToUpdate,
-                      sourceLinkCategoryId: values.category,
-                      text: editorRef.current?.editor?.getContent() ?? '' },
+                    {
+                        ...elementToUpdate,
+                        sourceLinkCategoryId: values.category,
+                        text: editorRef.current?.editor?.getContent() ?? '',
+                    },
                 );
         } else {
             sourceCreateUpdateStreetcode
@@ -120,7 +122,7 @@ const ForFansModal = ({
         try {
             await form.validateFields();
             form.submit();
-            message.success("Категорію для фанатів успішно додано!", 2)
+            message.success('Категорію для фанатів успішно додано!', 2);
         } catch (error) {
             message.config({
                 top: 100,
@@ -203,8 +205,15 @@ const ForFansModal = ({
                             Додати нову категорію...
                         </Select.Option>
                         {Categories
-                            // eslint-disable-next-line max-len
-                            .map((c) => <Select.Option key={`${c.id}`} value={c.id} disabled={handleDisabled(c.id)}>{c.title}</Select.Option>)}
+                            .map((c) => (
+                                <Select.Option
+                                    key={`${c.id}`}
+                                    value={c.id}
+                                    disabled={handleDisabled(c.id)}
+                                >
+                                    {c.title}
+                                </Select.Option>
+                            ))}
                     </Select>
                 </FormItem>
                 <SourceModal
@@ -230,10 +239,11 @@ const ForFansModal = ({
                                 'insertdatetime', 'wordcount', 'link', 'lists', 'formatselect ',
                             ],
                             toolbar: 'undo redo blocks bold italic link align | underline superscript subscript '
-                        + 'formats blockformats align | removeformat strikethrough ',
+                                + 'formats blockformats align | removeformat strikethrough ',
                             toolbar_mode: 'sliding',
                             language: 'uk',
                             content_style: 'body { font-family:Roboto,Helvetica Neue,sans-serif; font-size:14px }',
+                            link_default_target: '_blank',
                         }}
                         onPaste={(e, editor) => {
                             const previousContent = editor.getContent({ format: 'text' });
diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx
index 46585811d..cf5f079e3 100644
--- a/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx
+++ b/src/features/AdminPage/NewStreetcode/TextBlock/TextBlock.component.tsx
@@ -21,11 +21,13 @@ const TextBlock = React.memo(({
     inputInfo, setInputInfo, video, setVideo, onChange, parseId,
 }: Props) => {
     const [inputInfoAsync, setInputInfoAsync] = useState<Partial<Text>>();
-    useAsync(() => {
+    const [canLoad, setCanLoad] = useState<boolean>(parseId === null);
+
+    useAsync(async () => {
         if(parseId != null) {
-            TextsApi.getByStreetcodeId(parseId).then((result) => {
-                setInputInfoAsync(result);
-            });
+            const result = await TextsApi.getByStreetcodeId(parseId);
+            setInputInfoAsync(result);
+            setCanLoad(true);
         }
     }, [parseId]);
 
@@ -34,8 +36,7 @@ const TextBlock = React.memo(({
     }, [inputInfoAsync]);
 
     return (
-        inputInfoAsync !== null
-            ? (
+        canLoad ? (
                 <TextForm
                     inputInfo={inputInfoAsync}
                     setInputInfo={setInputInfoAsync}
diff --git a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/AdditionTextBlock/AdditionalTextBlockAdminForm.component.tsx b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/AdditionTextBlock/AdditionalTextBlockAdminForm.component.tsx
index f3125eff0..0dceff55c 100644
--- a/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/AdditionTextBlock/AdditionalTextBlockAdminForm.component.tsx
+++ b/src/features/AdminPage/NewStreetcode/TextBlock/TextForm/AdditionTextBlock/AdditionalTextBlockAdminForm.component.tsx
@@ -36,7 +36,7 @@ const AdditionalTextBlockAdminForm = ({ character_limit, inputInfo, setInputInfo
 
                     menubar: false,
                     init_instance_callback(editor) {
-                        editor.setContent(text ?? 'Текст підготовлений спільно з');
+                        editor.setContent((text === undefined || text === '') ? 'Текст підготовлений спільно з' : text);
                     },
                     plugins: [
                         'autolink',
diff --git a/src/features/AdminPage/NewsPage/NewsModal/NewsModal.component.tsx b/src/features/AdminPage/NewsPage/NewsModal/NewsModal.component.tsx
index 8a0a97b50..68b591291 100644
--- a/src/features/AdminPage/NewsPage/NewsModal/NewsModal.component.tsx
+++ b/src/features/AdminPage/NewsPage/NewsModal/NewsModal.component.tsx
@@ -37,7 +37,9 @@ const NewsModal: React.FC<{
   open: boolean;
   setIsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
   afterSubmit?: (news: News) => void;
-}> = observer(({ newsItem, open, setIsModalOpen, afterSubmit }) => {
+  initialValue: any;
+  limit: any;
+}> = observer(({ newsItem, open, setIsModalOpen, afterSubmit, initialValue, limit }) => {
     const [form] = Form.useForm();
     const { newsStore } = useMobx();
     const [previewOpen, setPreviewOpen] = useState(false);
@@ -46,6 +48,9 @@ const NewsModal: React.FC<{
     const [textIsChanged, setTextIsChanged] = useState<boolean>(false);
     const imageId = useRef<number | undefined>(0);
     const editorRef = useRef<TinyMCEEditor>();
+    const sizeLimit = limit ?? 15000;
+    const [data, setData] = React.useState(initialValue ?? "");
+    const [count, setCount] = React.useState(0);
 
     const handlePreview = async (file: UploadFile) => {
         setFilePreview(file);
@@ -204,6 +209,25 @@ const NewsModal: React.FC<{
         }
     };
 
+    const handleInit = (value: any, editor: any) => {
+        setCount(editor.getContent({ format: "text" }).length);
+    };
+
+    const handleUpdate = (value: any, editor: any) => {
+        const cCount = editor.getContent({ format: "text" }).length;
+        if (cCount <= sizeLimit) {
+            setData(value);
+            setCount(cCount);
+        }
+    };
+
+    const handleBeforeAddUndo = (evt: any, editor: any) => {
+        const cCount = editor.getContent({ format: "text" }).length;
+        if (cCount > sizeLimit) {
+            evt.preventDefault();
+        }
+    };
+
     return (
         <div>
             <ConfigProvider locale={ukUA}>
@@ -262,8 +286,7 @@ const NewsModal: React.FC<{
                                             }
                                             return Promise.reject(new Error('Посилання вже існує'));
                                         },
-                                    },
-                                ]}
+                                    },                                ]}
                             >
                                 <Input maxLength={200} showCount />
                             </Form.Item>
@@ -273,9 +296,12 @@ const NewsModal: React.FC<{
                                 <span>Текст:</span>
                             </div>
                             <Editor
-                                onEditorChange={handleTextChange}
+                                onEditorChange={handleUpdate}
+                                value={data}
+                                onBeforeAddUndo={handleBeforeAddUndo}
                                 onInit={(evt, editor) => {
                                     editorRef.current = editor;
+                                    handleInit;
                                 }}
                                 initialValue={newsItem ? newsItem.text : ''}
                                 init={{
@@ -297,6 +323,7 @@ const NewsModal: React.FC<{
                     'body { font-family:Roboto,Helvetica Neue,sans-serif; font-size:14px }',
                                 }}
                             />
+                            <p>Remaining: {sizeLimit - count}</p>
                             {!textIsPresent && textIsChanged && (
                                 <p className="form-text">Введіть текст</p>
                             )}
diff --git a/src/features/MainPage/Heading/Heading.styles.scss b/src/features/MainPage/Heading/Heading.styles.scss
index f389552aa..5012e8a0b 100644
--- a/src/features/MainPage/Heading/Heading.styles.scss
+++ b/src/features/MainPage/Heading/Heading.styles.scss
@@ -22,21 +22,24 @@
     .headingButton {
         @include mut.sized($width: 235px);
         @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 500, $font-size: 20px);
-        
+
         line-height: 23.44px;
         text-decoration: underline;
         text-align: right;
         color: c.$text-red-color;
         cursor: pointer;
     }
-    @media screen and (max-width: 1024px){
+
+    @media screen and (max-width: 1024px) {
         @include mut.sized($height: 50px, $width: 100%);
+
         .leftPart {
             .blockName {
                 @include mut.with-font($font-family: ft.$closer-text-font, $font-weight: 500, $font-size: 24px);
                 line-height: 40px;
             }
         }
+
         .headingButton {
             @include mut.with-font($font-family: ft.$roboto-font, $font-weight: 500, $font-size: 16px);
             line-height: 18.75px;
@@ -44,7 +47,12 @@
     }
 
     @media screen and (max-width: 480px) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: f.pxToRem(30px);
         @include mut.rem-padded($left: 33px, $right: 33px);
+
         .leftPart {
             .blockName {
                 @include mut.rem-margined($left: 0px);
diff --git a/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss b/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss
index 08a11f1ea..d045a3167 100644
--- a/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss
+++ b/src/features/MainPage/InstagramBlock/InstagramBlock.styles.scss
@@ -33,6 +33,10 @@
                 }
             }
 
+            .slick-dots {
+                bottom: f.pxToRem(3px) !important;
+            }
+
             .slick-next {
                 right: 20px !important;
 
@@ -51,7 +55,11 @@
         .slick-track {
             @include mut.flexed($align-items: flex-start, $gap: 20px);
             @include mut.rem-padded($bottom: 30px);
-            @include mut.rem-margined($left: 20px);
+            @include mut.rem-margined($top: 52px, $left: 20px);
+
+            @media screen and (max-width: 1024px) {
+                @include mut.rem-margined($top: 30px, $left: 20px);
+            }
 
         }
 
diff --git a/src/features/MainPage/NewsSlider/NewsSlider.component.tsx b/src/features/MainPage/NewsSlider/NewsSlider.component.tsx
index 784d20727..d97e36299 100644
--- a/src/features/MainPage/NewsSlider/NewsSlider.component.tsx
+++ b/src/features/MainPage/NewsSlider/NewsSlider.component.tsx
@@ -92,7 +92,13 @@ const NewsSlider = () => {
                                 <div className="blockCentering">
                                     <div className="newsSliderContent">
                                         {(news.length === 1) ? (
-                                            <div key={news[0].id} className="slider-item">
+                                            <div 
+                                                key={news[0].id} 
+                                                className="slider-item"
+                                                onClickCapture={(e) => {
+                                                    handleOnItemClick(e, news[0].url.toString());
+                                                }}
+                                            >
                                                 <NewsSliderItem news={news[0]} image={images[0]} />
                                             </div>
                                         ) : (
diff --git a/src/features/MainPage/NewsSlider/NewsSlider.styles.scss b/src/features/MainPage/NewsSlider/NewsSlider.styles.scss
index f60d8cb9d..432fc87f4 100644
--- a/src/features/MainPage/NewsSlider/NewsSlider.styles.scss
+++ b/src/features/MainPage/NewsSlider/NewsSlider.styles.scss
@@ -21,7 +21,12 @@
     .newsSliderComponent {
         margin-bottom: f.pxToRem(30px);
 
-        margin-top: f.pxToRem(32px);
+        margin-top: f.pxToRem(20px);
+
+        @media screen and (min-width: 767px) and (max-width: 1024px) {
+            margin-top: f.pxToRem(15px);
+        }
+
         @media screen and (max-width: 768px) {
             margin-top: f.pxToRem(15px);
         }
@@ -41,12 +46,13 @@
         }
 
         .slick-slide {
-        width: unset !important;
-        
-        @media screen and (max-width: 767px) {
+            width: unset !important;
+
+            @media screen and (max-width: 767px) {
                 width: 100% !important;
             }
-       }
+        }
+
         .newsSliderContent {
             width: 100%;
             @include mut.flex-centered();
@@ -74,6 +80,13 @@
         }
     }
 
+    @media screen and (min-width: 767px) and (max-width: 1024px) {
+        .newsSliderContent {
+            margin-top: 0px !important;
+            padding-top: 0px !important;
+        }
+    }
+
     .redirectButton {
         @include mut.sized($width: 100%, $height: 46px);
         @include mut.full-rounded(10px);
diff --git a/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss b/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss
index 5cba5f712..5214ddd5e 100644
--- a/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss
+++ b/src/features/MainPage/PartnersBlockMain/PartnersBlockMain.styles.scss
@@ -13,7 +13,7 @@
             row-gap: 0;
 
             .partnersItem {
-                @include mut.rem-margined($top: 87px, $right: 10px, $bottom: 30px, $left: 10px);
+                @include mut.rem-margined($top: 53px, $right: 10px, $bottom: 30px, $left: 10px);
                 @media screen and (max-width: 768px) {
                     @include mut.rem-margined($top: 50px, $right: 10px, $bottom: 30px, $left: 10px);
                 }
@@ -29,13 +29,14 @@
     }
 
     .keyPartnersBlock {
-        margin: 0;
+        @include mut.rem-margined($top: 25px, $bottom: 80px);
     }
 }
 
 @media screen and (max-width: 1200px) {
     .partnersBlock {
         .keyPartnersBlock {
+            @include mut.rem-margined($top: 0px, $bottom: 30px);
             .partnersItem {
                 @include mut.rem-margined($top: 15px, $right: 10px, $bottom: 10px, $left: 15px);
                 @include mut.sized($width: 350px, $height: 106px);
diff --git a/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx b/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx
index be0378b8d..5abde5743 100644
--- a/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx
+++ b/src/features/MainPage/StreetcodeSlider/StreetcodeSlider.component.tsx
@@ -1,13 +1,15 @@
+/* eslint-disable no-await-in-loop */
 import './StreetcodeSlider.styles.scss';
 
 import { observer } from 'mobx-react-lite';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import ImagesApi from '@api/media/images.api';
 import { useAsync } from '@hooks/stateful/useAsync.hook';
 import Image from '@models/media/image.model';
 
 import StreetcodesApi from '@/app/api/streetcode/streetcodes.api';
 import useWindowSize from '@/app/common/hooks/stateful/useWindowSize.hook';
+import { paginateRequest } from '@/app/common/utils/paginateRequest';
 import { StreetcodeMainPage } from '@/models/streetcode/streetcode-types.model';
 
 import SlickSlider from '../../SlickSlider/SlickSlider.component';
@@ -17,6 +19,7 @@ import StreetcodeSliderItem from './StreetcodeSliderItem/StreetcodeSliderItem.co
 const StreetcodeSlider = () => {
     const [streetcodes, setStreetcodes] = useState<StreetcodeMainPage[]>([]);
     const [images, setImages] = useState<Image[]>([]);
+    const loading = useRef(false);
 
     const props = {
         touchAction: 'pan-y',
@@ -37,46 +40,66 @@ const StreetcodeSlider = () => {
     if (windowsize.width <= 1024) props.dots = true;
 
     useAsync(async () => {
-        try {
-            const response = await StreetcodesApi.getAllMainPage();
-            setStreetcodes(response);
+        const shuffleSeed = Math.floor(Date.now() / 1000);
+        const { fetchNextPage } = paginateRequest(3, StreetcodesApi.getPageMainPage, { shuffleSeed });
 
-            const newImages : Image[] = [];
-            for (const streetcode of response) {
-                await ImagesApi.getById(streetcode.imageId)
-                    .then((img) => {
-                        newImages.push(img);
-                        setImages(newImages);
+        if (!loading.current) {
+            loading.current = true;
+            while (true) {
+                try {
+                    const newStreetcodes = await fetchNextPage();
+                    setStreetcodes((prevState) => [...prevState, ...newStreetcodes]);
+
+                    const newImages: Image[] = [];
+                    const promises = [];
+
+                    for (let i = 0; i < newStreetcodes.length; i++) {
+                        const currentPosition = newImages.length + i;
+                        promises.push(ImagesApi.getById(newStreetcodes[i].imageId).then((img) => {
+                            newImages[currentPosition] = img;
+                        }));
+                    }
+
+                    await Promise.all(promises).then(() => {
+                        setImages((prevState) => [...prevState, ...newImages]);
                     });
+                } catch (error: unknown) {
+                    break;
+                }
             }
-        } catch (error) {}
+        }
     });
 
-    if (streetcodes.length > 0) {
-        return (
-            <div>
-                <div className="streetcodeMainPageWrapper">
-                    <div id="streetcodeSliderContentBlock" className="streetcodeSliderComponent">
-                        <div className="streetcodeSliderContainer">
-                            <div className="blockCenter">
-                                <div className="streetcodeSliderContent">
-                                    <SlickSlider {...props}>
-                                        {streetcodes.map((item, index) => (
-                                            <div key={item.id} className="slider-item">
-                                                <StreetcodeSliderItem streetcode={item} image={images[index]} />
-                                            </div>
-                                        ))}
-                                    </SlickSlider>
-                                </div>
+    return (
+        <div>
+            <div className="streetcodeMainPageWrapper">
+                <div id="streetcodeSliderContentBlock" className="streetcodeSliderComponent">
+                    <div className="streetcodeSliderContainer">
+                        <div className="blockCenter">
+                            <div className="streetcodeSliderContent">
+                                {
+                                    streetcodes.length > 0
+                                        ? (
+                                            <SlickSlider {...props}>
+                                                {streetcodes.map((item, index) => (
+                                                    <div key={item.id} className="slider-item">
+                                                        <StreetcodeSliderItem
+                                                            streetcode={item}
+                                                            image={images[index]}
+                                                        />
+                                                    </div>
+                                                ))}
+                                            </SlickSlider>
+                                        )
+                                        : <></>
+                                }
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-        );
-    }
-
-    return null;
+        </div>
+    );
 };
 
 export default observer(StreetcodeSlider);
diff --git a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
index 4d6b575ac..28c3e6091 100644
--- a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
+++ b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.component.tsx
@@ -10,7 +10,7 @@ import { StreetcodeMainPage } from '@/models/streetcode/streetcode-types.model';
 
 interface Props {
     streetcode: StreetcodeMainPage;
-    image : Image
+    image: Image | undefined
 }
 
 const StreetcodeSliderItem = ({ streetcode, image }: Props) => {
@@ -19,8 +19,6 @@ const StreetcodeSliderItem = ({ streetcode, image }: Props) => {
         query: '(max-width: 480px)',
     });
 
-    const id = streetcode?.id;
-
     const truncateText = (text: string, maxLength: number) => {
         if (text.length <= maxLength) {
             return text;
@@ -46,11 +44,15 @@ const StreetcodeSliderItem = ({ streetcode, image }: Props) => {
             <div className="itemStreetCodeMainPage" onClick={isMobile ? handleClickRedirect : undefined}>
                 <div className="leftSlider">
                     <div className="leftSliderContent">
-                        <img
-                            key={image?.id}
-                            src={base64ToUrl(image?.base64, image?.mimeType)}
-                            className="streetcodeMainPageImg"
-                        />
+                        {image?.id
+                            ? (
+                                <img
+                                    key={image?.id}
+                                    alt={streetcode?.title}
+                                    src={base64ToUrl(image?.base64, image?.mimeType)}
+                                    className={`streetcodeMainPageImg ${image?.id ? 'imgVisible' : ''}`}
+                                />
+                            ) : <></>}
                     </div>
                 </div>
                 <div className="rightSlider">
diff --git a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.styles.scss b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.styles.scss
index bd1b1e5da..4a87a1c6f 100644
--- a/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.styles.scss
+++ b/src/features/MainPage/StreetcodeSlider/StreetcodeSliderItem/StreetcodeSliderItem.styles.scss
@@ -5,6 +5,11 @@
 @use "@sass/_utils.functions.scss" as *;
 @use "@sass/mixins/_vendor.mixins.scss" as vnd;
 
+@keyframes opacity-animation {
+    0%    { opacity: 0; }
+    100%  { opacity: 1; }
+}
+
 .mainPageStreetCodeSlider {
     .itemStreetCodeMainPage {
         @include mut.flexed(row, center, center, wrap);
@@ -20,7 +25,7 @@
             @include mut.sized(266px, 402px);
             margin-bottom: f.pxToRem(20px);
         }
-        
+
         @media screen and (max-width: 767px) {
             @include mut.sized(310px, 462px);
             margin-left: f.pxToRem(0px);
@@ -37,7 +42,7 @@
         @media (min-width: 768px) and (max-width: 1024px) {
             @include mut.sized(266px, 338px);
         }
-        
+
         @media screen and (max-width: 767px) {
             @include mut.sized(100%, 398px);
         }
@@ -54,7 +59,7 @@
             @include mut.sized(100%, 338px);
             border-bottom: 0px !important;
         }
-        
+
         @media screen and (max-width: 767px) {
             @include mut.sized(100%, 398px);
             border-bottom: 0px !important;
@@ -74,7 +79,7 @@
 
         @media screen and (max-width: 1024px) {
             height: fit-content;
-        
+
             .textContainer {
                 height: 100%;
                 width: 100%;
@@ -138,7 +143,7 @@
             @include mut.rem-padded(6px, 0px, 0px, 0px);
         }
     }
-  
+
     .streetcodeTeaser {
         width: 100%;
         @include mut.rem-margined(12px, 3px, 0px, 0px);
@@ -166,10 +171,14 @@
             @include mut.sized(200px, 261px);
             object-fit: contain;
         }
-        
+
         @media screen and (max-width: 767px) {
             @include mut.sized(240px, 312px);
             object-fit: contain;
         }
     }
+
+    .imgVisible{
+        animation: opacity-animation .5s ease-in forwards;
+    }
 }
diff --git a/src/features/MainPage/TeamSlider/TeamComponent.styles.scss b/src/features/MainPage/TeamSlider/TeamComponent.styles.scss
index 2b2e2a3f7..749d36b4a 100644
--- a/src/features/MainPage/TeamSlider/TeamComponent.styles.scss
+++ b/src/features/MainPage/TeamSlider/TeamComponent.styles.scss
@@ -75,6 +75,7 @@ $bgImg: '@assets/images/streetcode-card/background.webp';
             height: unset;
 
             .mainContent {
+                margin-top: f.pxToRem(28px);
                 ::-webkit-scrollbar {
                     width: f.pxToRem(2px);
                 }
diff --git a/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss b/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss
index c2f00e46f..cce29f571 100644
--- a/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss
+++ b/src/features/MainPage/TeamSlider/TeamItemSlider/TeamItemSlider.styles.scss
@@ -20,7 +20,7 @@
         margin-left: f.pxToRem(20px);
 
         @media (min-width: 768px) and (max-width: 1024px) {
-            margin-top: f.pxToRem(40px);
+            margin-top: f.pxToRem(18px);
             @include mut.sized(266px, 402px);
             padding-bottom: f.pxToRem(20px);
         }
diff --git a/src/features/ProgressBar/ProgressBar.component.tsx b/src/features/ProgressBar/ProgressBar.component.tsx
index c1f6e1378..23e9deb8f 100644
--- a/src/features/ProgressBar/ProgressBar.component.tsx
+++ b/src/features/ProgressBar/ProgressBar.component.tsx
@@ -58,7 +58,7 @@ const ProgressBar: FC<Props> = ({
 
     useScrollPosition(
         ({ currentPos: { y } }) => {
-            const curScrollY = Math.abs(y);
+            const curScrollY = Math.ceil(Math.abs(y));
 
             setScrollPosition(curScrollY);
 
diff --git a/src/features/SlickSlider/SlickSlider.styles.scss b/src/features/SlickSlider/SlickSlider.styles.scss
index 5b9285b82..33b59da67 100644
--- a/src/features/SlickSlider/SlickSlider.styles.scss
+++ b/src/features/SlickSlider/SlickSlider.styles.scss
@@ -83,16 +83,9 @@ li.slick-active button:before {
 .slick-arrow {
     opacity: .4;
     filter: c.$selected-arrow-filter-color;
-}
 
-.nonInfiniteSlider {
-    .slick-arrow {
+    &:hover {
         opacity: .25;
-        filter: c.$selected-arrow-filter-color;
-
-        &:hover {
-            opacity: .25;
-        }
     }
 }
 
diff --git a/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx b/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx
index f91bde140..556d613bc 100644
--- a/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx
+++ b/src/features/StreetcodeCatalogPage/StreetcodeCatalog.component.tsx
@@ -12,10 +12,9 @@ import StreetcodeCatalogItem from './StreetcodeCatalogItem/StreetcodeCatalogItem
 
 const StreetcodeCatalog = () => {
     const { streetcodeCatalogStore } = useMobx();
-    const { fetchCatalogStreetcodes, getCatalogStreetcodesArray, isNotEightorZero } = streetcodeCatalogStore;
+    const { fetchCatalogStreetcodes, getCatalogStreetcodesArray, moreThenEight, fetchNumber } = streetcodeCatalogStore;
     const [loading, setLoading] = useState(false);
     const [screen, setScreen] = useState(1);
-    const [publishCount, setPublishCount] = useState(0);
 
     const handleSetNextScreen = () => {
         setScreen(screen + 1);
@@ -28,16 +27,12 @@ const StreetcodeCatalog = () => {
 
     useAsync(async () => {
         const count = await StreetcodesApi.getCount();
-        const fetchedPublishCount = (await StreetcodesApi.getAllPublished()).length;
-        setPublishCount(fetchedPublishCount);
-        if (publishCount === 8) {
-            setLoading(false);
-        }
+
         if (count === getCatalogStreetcodesArray.length) {
             return;
         }
         setTimeout(() => {
-            Promise.all([fetchCatalogStreetcodes(screen, 8)]).then(() => {
+            Promise.all([fetchCatalogStreetcodes(screen, fetchNumber)]).then(() => {
                 setLoading(false);
             });
         }, 1000);
@@ -46,7 +41,10 @@ const StreetcodeCatalog = () => {
     return (
         <div className="catalogPage">
             <div className="streetcodeCatalogWrapper">
-                <h1 className="streetcodeCatalogHeading">Стріткоди</h1>
+                <div className="streetcodeHeadingContainer">
+                    <div className="headingFlexItem"><h1 className="streetcodeCatalogHeading">Стріткоди</h1></div>
+                    <div className="headingFlexItem"><p className="streetcodeCatalogCaption">СТРІТКОДИ</p></div>
+                </div>
                 <div className="steetcodeCatalogContainer">
                     {
                         getCatalogStreetcodesArray.map(
@@ -63,7 +61,7 @@ const StreetcodeCatalog = () => {
                 </div>
             </div>
             {
-                loading && (!isNotEightorZero && publishCount !== 8)
+                loading && (moreThenEight)
                 && (
                     <div className="loadingWrapper">
                         <div id="loadingGif" />
diff --git a/src/features/StreetcodeCatalogPage/StreetcodeCatalog.styles.scss b/src/features/StreetcodeCatalogPage/StreetcodeCatalog.styles.scss
index 34d23cad1..7b28a7cd5 100644
--- a/src/features/StreetcodeCatalogPage/StreetcodeCatalog.styles.scss
+++ b/src/features/StreetcodeCatalogPage/StreetcodeCatalog.styles.scss
@@ -7,6 +7,21 @@
 $bgImg: '@assets/images/catalog/background.webp';
 $loadImg: '@assets/images/catalog/loading.webp';
 
+.streetcodeCatalogCaption {
+    @include mut.with-font($font-family: f.$roboto-font, $font-weight: 300, $font-size: 12px);
+    line-height: 14px;
+    text-transform: uppercase;
+    color: c.$dark-red-color;
+}
+
+.streetcodeHeadingContainer {
+    display: flex;
+    justify-content: space-between;
+    .headingFlexItem {
+        display: inline-block;
+    }
+}
+
 .catalogPage{
     width: 100%;
     background: url($bgImg) no-repeat center / 100%;
@@ -19,6 +34,11 @@ $loadImg: '@assets/images/catalog/loading.webp';
         margin-top: 5.125rem;
         padding: pxToRem(10px) 10% pxToRem(100px) 10%;
         width: 100%;
+
+        .streetcodeHeadingContainer {
+            margin-top: pxToRem(20px);
+        }
+
         .streetcodeCatalogHeading {
             @include mut.with-font('Closer Text', 500, 96px, normal);
             padding-bottom: pxToRem(40px);
@@ -57,7 +77,12 @@ $loadImg: '@assets/images/catalog/loading.webp';
         .streetcodeCatalogWrapper {
             padding: pxToRem(80px) pxToRem(13px) 0;
             margin-top: 0;
-    
+            width: 100%;
+
+            .streetcodeHeadingContainer {
+                margin-top: pxToRem(4px);
+            }
+
             .streetcodeCatalogHeading {
                 padding-bottom: 0;
                 font-size: 54px;
@@ -84,4 +109,12 @@ $loadImg: '@assets/images/catalog/loading.webp';
             }
         }
     }
+}
+
+@media screen and (max-width: 480px) {
+    .catalogPage{
+        .streetcodeCatalogWrapper {
+            padding: pxToRem(80px) pxToRem(10px) 0;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/features/StreetcodeCatalogPage/StreetcodeCatalogItem/StreetcodeCatalogItem.component.tsx b/src/features/StreetcodeCatalogPage/StreetcodeCatalogItem/StreetcodeCatalogItem.component.tsx
index d08f7236a..aaa61a13c 100644
--- a/src/features/StreetcodeCatalogPage/StreetcodeCatalogItem/StreetcodeCatalogItem.component.tsx
+++ b/src/features/StreetcodeCatalogPage/StreetcodeCatalogItem/StreetcodeCatalogItem.component.tsx
@@ -37,6 +37,15 @@ const StreetcodeCatalogItem = ({ streetcode, isLast, handleNextScreen }: Props)
     };
     const windowsize = useWindowSize();
 
+    const handleClickRedirect = () => {
+        toStreetcodeRedirectClickEvent(streetcode.url.toString(), 'catalog');
+        window.location.href = `/${streetcode.url}`;
+    };
+    const handleTextClick = (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault();
+        handleClickRedirect();
+    };
+    
     return (
         <>
             {windowsize.width > 1024 && (
@@ -57,11 +66,11 @@ const StreetcodeCatalogItem = ({ streetcode, isLast, handleNextScreen }: Props)
                 <div>
                     <a {...LinkProps} href={`/${streetcode.url}`} onTouchStart={() => toStreetcodeRedirectClickEvent(streetcode.url, 'catalog')}/>
                     <div ref={elementRef} className="catalogItemText mobile">
-                        <div className="heading">
+                        <div className="heading" onClick={handleTextClick}>
                             <p>{streetcode.title}</p>
                             {
                                 streetcode.alias !== null && streetcode.alias?.trim() !== '' ? (
-                                    <p className="aliasText">({streetcode.alias})</p>
+                                    <p className="aliasText">{streetcode.alias}</p>
                                 ) : undefined
                             }
                         </div>
diff --git a/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss b/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss
index bb7dae3d3..2ddaef96a 100644
--- a/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss
+++ b/src/features/StreetcodePage/ArtGalleryBlock/ArtGalleryItem/ArtGallerySlideItem.styles.scss
@@ -96,20 +96,21 @@
     }
 
     .imgData {
-        @include mut.sized(100%, 113px);
+        @include mut.sized(100%);
         @include mut.positioned-as($position: absolute, $bottom: 0);
         @include mut.colored($color: c.$pure-white-color, $bg-color: rgba(0, 0, 0, 0.5));
         visibility: hidden;
         opacity: 0;
         @include vnd.vendored(transition, 'all .5s ease');
-        @include mut.rounded($bottom-right: 30px, $bottom-left: 30px);
+        @include mut.rounded( $bottom-right: 30px, $bottom-left: 30px);
         padding: pxToRem(11px) pxToRem(21px);
     }
 
     .imgTitle {
         @include mut.with-font();
         @include mut.rem-padded($bottom: 5px);
-        @include mut.truncated();
+        @include mut.truncated(2);
+        @include mut.with-font($font-size: 18px);
     }
 
     .imgDescription {
@@ -119,8 +120,6 @@
 
     .imgImg {
         border-radius: pxToRem(30px);
-        height: 100%;
         object-fit: cover;
-        width:100%;
     }
 }
diff --git a/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx b/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx
index b58fe76c0..7cf3142d5 100644
--- a/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx
+++ b/src/features/StreetcodePage/InterestingFactsBlock/InterestingFacts.component.tsx
@@ -11,6 +11,7 @@ import ImagesApi from '@/app/api/media/images.api';
 import { useAsync } from '@/app/common/hooks/stateful/useAsync.hook';
 import { Fact } from '@/models/streetcode/text-contents.model';
 import { useSearchParams } from 'react-router-dom';
+import getUrlHash from '@/app/common/utils/getUrlHash.utility';
 
 const InterestingFactsComponent = () => {
     const { streetcodeStore } = useStreetcodeDataContext();
@@ -18,6 +19,7 @@ const InterestingFactsComponent = () => {
     const { getStreetCodeId, errorStreetCodeId } = streetcodeStore;
     const [sliderArray, setSliderArray] = useState<Fact[]>([]);
     const [middleFactIndex, setMiddleFactIndex] = useState(0);
+    const [isScrolled, setIsScrolled] = useState<boolean>(false);
 
     const facts = useRef<Fact[]>([]);
     useAsync(
@@ -42,19 +44,25 @@ const InterestingFactsComponent = () => {
 
     const [searchParams, setSearchParams] = useSearchParams();
     const factID = Number(searchParams.get('factId'));
-    const initialSlide = sliderArray.findIndex(fact => fact.id === factID) == -1 ? 0 : sliderArray.findIndex(fact => fact.id === factID);
+    let initialSlideIndex = sliderArray.findIndex(fact => fact.id === factID);
+    if(initialSlideIndex === -1) initialSlideIndex = 0;
 
     useEffect(() => {
-        const hash = location.hash.replace('#', '');
-        const element = document.getElementById(hash);
+        const hash = getUrlHash(location);
+        if (!isScrolled && hash === 'wow-facts'){
+            const element = document.getElementById(hash);
     
-        setTimeout(() => {
-            element?.scrollIntoView({behavior: "smooth", block: "center"});
-        }, 1000);
+            setTimeout(() => {
+                if(element !== null) {
+                    element.scrollIntoView({behavior: "smooth", block: "end"});
+                    setIsScrolled(true);
+                }
+            }, 1000);
+        }
     });
 
     const setings = {
-        initialSlide: initialSlide,
+        initialSlide: initialSlideIndex,
         dots: facts.current.length > 3,
         swipeOnClick: false,
         touchThreshold: 25,
diff --git a/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx b/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx
index c37da6f3f..3160b41a1 100644
--- a/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx
+++ b/src/features/StreetcodePage/MainBlock/MainBlock.component.tsx
@@ -6,6 +6,8 @@ import StreetcodeCard from '@streetcode/MainBlock/StreetcodeCard/StreetcodeCard.
 
 import ListenTextModal from '@/app/common/components/modals/ListenText/ListenText.component';
 import Streetcode from '@/models/streetcode/streetcode-types.model';
+import { useEffect, useState } from 'react';
+import getUrlHash from '@/app/common/utils/getUrlHash.utility';
 
 interface Props {
     setActiveTagId: React.Dispatch<React.SetStateAction<number>>,
@@ -13,23 +15,38 @@ interface Props {
     streetcode?: Streetcode,
 }
 
-const MainBlock = ({ setActiveTagId, setActiveBlock, streetcode } : Props) => (streetcode && (
-    <div id="mainBlock" className="mainBlock">
-        <div className="mainContainer">
-            <BreadCrumb separator={<div className="separator" />} streetcode={streetcode} />
-            <div className="blockCentering">
-                <div className="mainContent">
-                    <StreetcodeCard
-                        streetcode={streetcode}
-                        setActiveTagId={setActiveTagId}
-                        setActiveBlock={setActiveBlock}
-                    />
+
+const MainBlock = ({ setActiveTagId, setActiveBlock, streetcode } : Props) =>{
+    const [isScrolled, setIsScrolled] = useState<boolean>(false);
+
+    useEffect(() => {
+        const hash = getUrlHash(location);
+        if (!isScrolled && hash === ''){
+            setTimeout(() => {
+                window.scrollTo(0, 0);
+                setIsScrolled(true);
+            }, 100);
+        }
+    });
+    return (
+        <div id="mainBlock" className="mainBlock">
+            <div className="mainContainer">
+                <BreadCrumb separator={<div className="separator" />} streetcode={streetcode} />
+                <div className="blockCentering">
+                    <div className="mainContent">
+                        <StreetcodeCard
+                            streetcode={streetcode}
+                            setActiveTagId={setActiveTagId}
+                            setActiveBlock={setActiveBlock}
+                        />
+                    </div>
                 </div>
             </div>
+            <ListenTextModal />
         </div>
-        <ListenTextModal />
-    </div>
-)
-);
+    );
+}
+
+    
 
 export default observer(MainBlock);
\ No newline at end of file
diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx
index 819377041..cbf78dca2 100644
--- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx
+++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.component.tsx
@@ -133,10 +133,13 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) =
                                 setActiveTagBlock={setActiveBlock}
                             />
                         </div>
+                        <div className="blurTop" />
+
                         <p className="teaserBlock">
                             {streetcode?.teaser}
                         </p>
 
+                        <div className="blurBottom" />
                         <div className="cardFooter">
                             {audio?.base64 && audioIsLoaded
                                 ? (
@@ -167,8 +170,9 @@ const StreetcodeCard = ({ streetcode, setActiveTagId, setActiveBlock }: Props) =
                                     <Button
                                         className="animateFigureBtn"
                                         onClick={() => personLiveEvent(streetcode?.id ?? 0)}
+                                        href="#QRBlock"
                                     >
-                                        <a href="#QRBlock">Оживити картинку</a>
+                                        <a>Оживити картинку</a>
                                     </Button>
                                 )
                                 : <></>}
diff --git a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss
index 6c5924fb9..cd5582795 100644
--- a/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss
+++ b/src/features/StreetcodePage/MainBlock/StreetcodeCard/StreetcodeCard.styles.scss
@@ -2,6 +2,7 @@
 @use "@sass/variables/_variables.colors.scss" as c;
 @use "@sass/variables/_variables.fonts.scss" as ft;
 @use "@sass/_utils.functions.scss" as f;
+
 .card {
   display: flex;
   flex-direction: row;
@@ -65,10 +66,16 @@
 .tagContainer{
   @include mut.rem-margined(13px, 0, 13px, 0);
 }
+.blurTop{
+  @include mut.blur($edge: 0deg, $top: 9px, $height: 16px);
+}
+.blurBottom{
+  @include mut.blur($edge: 180deg, $top: -20px, $height: 21px);
+}
 .teaserBlock {
-  padding-bottom: f.pxToRem(20px);
   @include mut.with-font($font-weight: 300, $font-size: 20px);
-  @include mut.rem-margined(25px, 0px, 0px, 0px);
+  @include mut.rem-margined($top: 10px);
+  @include mut.rem-padded($top: 15px, $bottom: 15px);
   line-height: 23px;
   overflow: auto;
   flex-grow: 1;
@@ -90,17 +97,6 @@
     border-width: 3px;
     border-color: c.$accented-red-color;
   }
-  &:before {
-    content: '';
-    position: absolute;
-    top: -25px;
-    left: 0;
-    right: 0;
-    height: f.pxToRem(25px);
-    background: linear-gradient(180deg, rgba(255,255,255,0.01) 0%, rgba(255,255,255,0.25) 5%, rgba(255,255,255,0.75) 21%);
-    -webkit-text-fill-color: transparent;
-  }
-
 }
 .audioBtnActive {
   background-color: c.$accented-red-color;
@@ -170,10 +166,14 @@
 @media screen and (max-width: 1024px) {
   .blockCentering {
     @include mut.rem-padded($top: 2px, $right: 10px, $bottom: 0px, $left: 10px);
+    .blurTop{
+      @include mut.blur($edge: 0deg, $top: 4px, $height: 11px);
+    }
     .teaserBlock {
       line-height: f.pxToRem(18.75px);
       font-size: f.pxToRem(16px);
-      @include mut.rem-margined(15px, 0px, 0px, 0px);
+      @include mut.rem-margined($top: 5px);
+      @include mut.rem-padded($top: 10px, $bottom: 15px);
       @include mut.with-font($font-weight: 300, $font-size: 16px);
     }
     .card {
@@ -258,9 +258,6 @@
       .cardFooter{
         margin-top: f.pxToRem(39px) !important;
         @include mut.rem-padded(0px, 0px, 0px, 0px);
-        &:before {
-          top: -64px;
-        }
         .audioBtn{
           width: 100%;
         }
@@ -272,4 +269,14 @@
       }
     }
   }
-}
\ No newline at end of file
+}
+
+@media screen and (max-width: 385px) {
+  .blockCentering {
+    .card {
+      .leftSider {
+        @include mut.sized(98%, 489px);
+      }
+    }
+  }
+}
diff --git a/src/features/StreetcodePage/QRBlock/QR.component.tsx b/src/features/StreetcodePage/QRBlock/QR.component.tsx
index 252e9238a..5bbde9589 100644
--- a/src/features/StreetcodePage/QRBlock/QR.component.tsx
+++ b/src/features/StreetcodePage/QRBlock/QR.component.tsx
@@ -28,10 +28,10 @@ const QRComponent = () => {
     return (
         qrUrl?.url
             ? (
-                <div id="QRBlock" className="QRBlockContainer container">
+                <div className="QRBlockContainer container">
                     {isDesktop
                         ? (
-                            <div className="QRBlockContent">
+                            <div id="QRBlock" className="QRBlockContent">
                                 <div className="QRBlockImg">
                                     <img src={IPhoneImg} alt="" />
                                 </div>
diff --git a/src/features/StreetcodePage/SourcesBlock/SourceItem/SourceItem.component.tsx b/src/features/StreetcodePage/SourcesBlock/SourceItem/SourceItem.component.tsx
index 5774703d4..aa4ca1a71 100644
--- a/src/features/StreetcodePage/SourcesBlock/SourceItem/SourceItem.component.tsx
+++ b/src/features/StreetcodePage/SourcesBlock/SourceItem/SourceItem.component.tsx
@@ -1,7 +1,7 @@
-import { useState } from 'react';
 import './SourceItem.styles.scss';
 
 import { observer } from 'mobx-react-lite';
+import { useState } from 'react';
 import { SourceCategory } from '@models/sources/sources.model';
 import { useModalContext } from '@stores/root-store';
 
@@ -17,17 +17,17 @@ const SourceItem = ({ srcCategory }: Props) => {
 
     const handleMouseDown = () => {
         setIsDragging(false);
-    }
+    };
 
     const handleMouseMove = () => {
         setIsDragging(true);
-    }
+    };
 
     const handleMouseUp = () => {
         if (!isDragging) {
             setModal('sources', srcCategory.id, true);
         }
-    }
+    };
 
     return (
         <div
diff --git a/src/features/StreetcodePage/SourcesBlock/Sources.component.tsx b/src/features/StreetcodePage/SourcesBlock/Sources.component.tsx
index c112f97ed..53d05521b 100644
--- a/src/features/StreetcodePage/SourcesBlock/Sources.component.tsx
+++ b/src/features/StreetcodePage/SourcesBlock/Sources.component.tsx
@@ -1,7 +1,7 @@
 import './Sources.styles.scss';
 
 import { observer } from 'mobx-react-lite';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import BlockSlider from '@features/SlickSlider/SlickSlider.component';
 import useMobx, { useStreetcodeDataContext } from '@stores/root-store';
 import BlockHeading from '@streetcode/HeadingBlock/BlockHeading.component';
diff --git a/src/features/StreetcodePage/Streetcode.styles.scss b/src/features/StreetcodePage/Streetcode.styles.scss
index e7d63b569..fb86b271e 100644
--- a/src/features/StreetcodePage/Streetcode.styles.scss
+++ b/src/features/StreetcodePage/Streetcode.styles.scss
@@ -36,7 +36,7 @@ $bgImg: '@assets/images/streetcode-card/background.webp';
     position: sticky;
     display: flex;
     z-index: 4;
-    bottom: f.pxToRem(50px);
+    bottom: f.pxToRem(75px);
     justify-content: flex-end;
 }
 
@@ -71,10 +71,6 @@ $bgImg: '@assets/images/streetcode-card/background.webp';
         @include mut.rem-padded($top: 64px);
     }
 
-    .sticky{
-        bottom: f.pxToRem(25px);
-    }
-
     .container{
         margin-top: f.pxToRem(44px);
     }
@@ -84,9 +80,6 @@ $bgImg: '@assets/images/streetcode-card/background.webp';
     .streetcodeContainer, .mainBlock{
         background-image: none !important;
     }
-    .sticky{
-        bottom: f.pxToRem(50px);
-    }
 }
 
 .loader-container{
diff --git a/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.styles.scss b/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.styles.scss
index 6acb4f1bf..fd62b18fc 100644
--- a/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.styles.scss
+++ b/src/features/StreetcodePage/TextBlock/ReadMore/ReadMore.styles.scss
@@ -2,6 +2,10 @@
 @use "@sass/variables/_variables.colors.scss" as c;
 @use "@sass/_utils.functions.scss" as f;
 
+.text {
+    white-space: pre-line;
+}
+
 @media screen and (min-width: 481px) {
     .readMore {
         color: c.$dark-red-color;
@@ -22,7 +26,6 @@
     }
 
     .text {
-        white-space: pre-line;
         margin-right: f.pxToRem(10px);
         margin-left: f.pxToRem(10px);
     }
diff --git a/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx b/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx
index 45f787256..bca5ed1ed 100644
--- a/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx
+++ b/src/features/StreetcodePage/TextBlock/TextBlock.component.tsx
@@ -14,6 +14,7 @@ import { Text } from '@/models/streetcode/text-contents.model';
 
 import AdditionalText from './AdditionalTextBlock/AdditionalTextBlock.component';
 import ReadMore from './ReadMore/ReadMore.component';
+import getUrlHash from '@/app/common/utils/getUrlHash.utility';
 
 const TextComponent = () => {
     const { streetcodeStore: { getStreetCodeId } } = useStreetcodeDataContext();
@@ -22,6 +23,7 @@ const TextComponent = () => {
     const { getByStreetcodeId: getText } = textsApi;
     const [text, setText] = useState<Text>();
     const [video, setVideo] = useState<Video>();
+    const [isScrolled, setIsScrolled] = useState<boolean>(false);
 
     useEffect(() => {
         if (getStreetCodeId > 0) {
@@ -38,38 +40,43 @@ const TextComponent = () => {
     }, [getStreetCodeId]);
 
     useEffect(() => {
-        const hash = location.hash.replace('#', '');
-        const element = document.getElementById(hash);
+        const hash = getUrlHash(location);
+        if (!isScrolled && hash === 'text'){
+            const element = document.getElementById(hash);
     
-        setTimeout(() => {
-            element?.scrollIntoView({behavior: "smooth", block: "start"});
-        }, 1000);
+            setTimeout(() => {
+                if(element !== null) {
+                    element.scrollIntoView({behavior: "smooth", block: "start"});
+                    setIsScrolled(true);
+                }
+            }, 1000);
+        }
     });
 
     return (
         <div id="text">
             {text
-            ? (
-                <div
-                    className="textComponentContainer"
-                >
-                    <BlockHeading headingText={String(text?.title)} />
-                    <div className="textComponent">
-                        <div className="TextContainer">
-                            <ReadMore key={text?.title} text={String(text?.textContent)} />
-                            <AdditionalText additionalText={htmpReactParser(text?.additionalText ?? '')} />
+                ? (
+                    <div
+                        className="textComponentContainer"
+                    >
+                        <BlockHeading headingText={String(text?.title)} />
+                        <div className="textComponent">
+                            <div className="TextContainer">
+                                <ReadMore key={text?.title} text={String(text?.textContent)} />
+                                <AdditionalText additionalText={htmpReactParser(text?.additionalText ?? '')} />
+                            </div>
                         </div>
+                        {video.url.length > 1
+                            ? (
+                                <div className="videoComponent">
+                                    <VideoPlayer
+                                        videoUrls={String(video?.url)}
+                                    />
+                                </div>
+                            ) : <></>}
                     </div>
-                    {video.url.length > 1
-                        ? (
-                            <div className="videoComponent">
-                                <VideoPlayer
-                                    videoUrls={String(video?.url)}
-                                />
-                            </div>
-                        ) : <></>}
-                </div>
-            ) : <></>}
+                ) : <></>}
         </div>
     );
 };
diff --git a/src/features/StreetcodePage/TimelineBlock/TimelineBlock.component.tsx b/src/features/StreetcodePage/TimelineBlock/TimelineBlock.component.tsx
index 7692a8d23..1d14fe235 100644
--- a/src/features/StreetcodePage/TimelineBlock/TimelineBlock.component.tsx
+++ b/src/features/StreetcodePage/TimelineBlock/TimelineBlock.component.tsx
@@ -8,13 +8,15 @@ import TimelineSlideCard from '@streetcode/TimelineBlock/TimelineItem/TimelineIt
 import TimelineReelOutline from '@streetcode/TimelineBlock/TimelineReelOutline/TimelineReelOutline.component';
 import TimelineSlider from '@streetcode/TimelineBlock/TimelineSlider.component';
 import TimelineTimespan from '@streetcode/TimelineBlock/Timespan/Timespan.component';
-import { useEffect, useRef } from 'react';
+import { useEffect, useState } from 'react';
+import getUrlHash from '@/app/common/utils/getUrlHash.utility';
 
 const TimelineBlock = () => {
     const { timelineItemStore } = useMobx();
     const { fetchTimelineItemsByStreetcodeId, getTimelineItemArray } = timelineItemStore;
     const { streetcodeStore: { getStreetCodeId, errorStreetCodeId } } = useStreetcodeDataContext();
-
+    const [isScrolled, setIsScrolled] = useState<boolean>(false);
+    
     useAsync(
         () => {
             if (getStreetCodeId !== errorStreetCodeId) {
@@ -28,12 +30,17 @@ const TimelineBlock = () => {
     );
     
     useEffect(() => {
-        const hash = location.hash.replace('#', '');
-        const element = document.getElementById(hash);
+        const hash = getUrlHash(location);
+        if (!isScrolled && hash === 'timeline'){
+            const element = document.getElementById(hash);
     
-        setTimeout(() => {
-            element?.scrollIntoView({behavior: "smooth", block: "center"});
-        }, 1000);
+            setTimeout(() => {
+                if(element !== null) {
+                    element.scrollIntoView({behavior: "smooth", block: "end"});
+                    setIsScrolled(true);
+                }
+            }, 1000);
+        }
     });
 
     return (