diff --git a/components/AdCard/AdCard.hbs b/components/AdCard/AdCard.hbs
index 52ea99df..d471c22b 100644
--- a/components/AdCard/AdCard.hbs
+++ b/components/AdCard/AdCard.hbs
@@ -1,49 +1,88 @@
-<div class="ad-card" id="card-{{id}}">
+<div class='ad-card' id='card-{{id}}'>
     <!-- ID is used for js not styles -->
-    <img class="ad_card__img1" src="{{mainPicture}}" alt="Ad card image">
-    <div class="ad-card__image-pagination-div">
+    <img class='ad_card__img1' src='{{images.[0]}}' alt='Ad card image' />
+    <div class='ad-card__image-pagination-div'>
         <!-- Здесь будут кружочки -->
         <!--        <div class="circle-full"></div>-->
         <!--        <div class="circle-empty"></div>-->
     </div>
 
-    <button class="ad-card__button">
-        <svg width="43" height="43" viewBox="0 0 43 43" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <g style="mix-blend-mode:multiply" filter="url(#filter0_d_181_2)">
-                <circle cx="21.5" cy="17.5" r="17.5" fill="#9D9999" />
+    <button class='ad-card__button'>
+        <svg
+            width='43'
+            height='43'
+            viewBox='0 0 43 43'
+            fill='none'
+            xmlns='http://www.w3.org/2000/svg'
+        >
+            <g style='mix-blend-mode:multiply' filter='url(#filter0_d_181_2)'>
+                <circle cx='21.5' cy='17.5' r='17.5' fill='#9D9999' />
             </g>
-            <path fill-rule="evenodd" clip-rule="evenodd"
-                  d="M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z"
-                  stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path
+                fill-rule='evenodd'
+                clip-rule='evenodd'
+                d='M22 13.0001C20.5005 11.2526 17.9948 10.7126 16.116 12.3128C14.2372 13.913 13.9727 16.5884 15.4481 18.481C16.6749 20.0545 20.3873 23.3732 21.6041 24.4474C21.7402 24.5676 21.8082 24.6276 21.8877 24.6512C21.9569 24.6718 22.0327 24.6718 22.1021 24.6512C22.1815 24.6276 22.2495 24.5676 22.3857 24.4474C23.6024 23.3732 27.3148 20.0545 28.5416 18.481C30.017 16.5884 29.7848 13.8961 27.8737 12.3128C25.9626 10.7294 23.4995 11.2526 22 13.0001Z'
+                stroke='white'
+                stroke-width='2'
+                stroke-linecap='round'
+                stroke-linejoin='round'
+            />
             <defs>
-                <filter id="filter0_d_181_2" x="0" y="0" width="43" height="43" filterUnits="userSpaceOnUse"
-                        color-interpolation-filters="sRGB">
-                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
-                    <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
-                                   result="hardAlpha" />
-                    <feOffset dy="4" />
-                    <feGaussianBlur stdDeviation="2" />
-                    <feComposite in2="hardAlpha" operator="out" />
-                    <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0" />
-                    <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_181_2" />
-                    <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_181_2" result="shape" />
+                <filter
+                    id='filter0_d_181_2'
+                    x='0'
+                    y='0'
+                    width='43'
+                    height='43'
+                    filterUnits='userSpaceOnUse'
+                    color-interpolation-filters='sRGB'
+                >
+                    <feFlood flood-opacity='0' result='BackgroundImageFix' />
+                    <feColorMatrix
+                        in='SourceAlpha'
+                        type='matrix'
+                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'
+                        result='hardAlpha'
+                    />
+                    <feOffset dy='4' />
+                    <feGaussianBlur stdDeviation='2' />
+                    <feComposite in2='hardAlpha' operator='out' />
+                    <feColorMatrix
+                        type='matrix'
+                        values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'
+                    />
+                    <feBlend
+                        mode='normal'
+                        in2='BackgroundImageFix'
+                        result='effect1_dropShadow_181_2'
+                    />
+                    <feBlend
+                        mode='normal'
+                        in='SourceGraphic'
+                        in2='effect1_dropShadow_181_2'
+                        result='shape'
+                    />
                 </filter>
             </defs>
         </svg>
     </button>
 
-    <div class="ad-card__info">
-        <div class="ad-card__location">
-            <p class="ad-card__p1">{{locationMain}}</p>
-            <p class="ad-card__p2">{{locationStreet}}</p>
-            <a href="{{onMap}}" class="ad-card__href">Показать на карте</a>
+    <div class='ad-card__info'>
+        <div class='ad-card__location'>
+            <p class='ad-card__p1'>{{locationMain}}</p>
+            <p class='ad-card__p2'>{{locationStreet}}</p>
+            <a href='{{onMap}}' class='ad-card__href'>Показать на карте</a>
         </div>
-        <div class="ad-card__author-info">
-            <img class="ad-card__img2" src="{{author.avatar}}" alt="User avatar">
+        <div class='ad-card__author-info'>
+            <img
+                class='ad-card__img2'
+                src='{{author.avatar}}'
+                alt='User avatar'
+            />
             <p>{{author.name}}</p>
-            <div class="ad-card__score-container">
-                <img class="ad-card__img3" src="images/star.png" alt="star">
-                <span class="ad-card__score">{{author.score}}</span>
+            <div class='ad-card__score-container'>
+                <img class='ad-card__img3' src='images/star.png' alt='star' />
+                <span class='ad-card__score'>{{author.score}}</span>
             </div>
         </div>
     </div>
diff --git a/components/AdCard/AdCard.ts b/components/AdCard/AdCard.ts
index cab8b2f5..6e801ddc 100644
--- a/components/AdCard/AdCard.ts
+++ b/components/AdCard/AdCard.ts
@@ -2,29 +2,21 @@
 
 const SCROLL_DELAY = 200;
 
-interface CardData {
-    id: number;
-    mainPicture: string;
-    pictures: string[];
-}
+import { AdCardData } from '../../modules/Types';
 
 /** Карточка объявления на главной странице */
 class AdCard {
-    #data: CardData;
+    #data: AdCardData;
     #currentImgIndex: number;
     #circles: HTMLDivElement[];
     private parent: HTMLDivElement | null | undefined;
 
     /** @param {object} data - информация о карточке
      @param {HTMLDivElement} parent - родитель, в чьем списке детей будет карточка */
-    constructor(
-        data: { pictures: string[]; id: number; mainPicture: string },
-        parent: HTMLDivElement | null | undefined
-    ) {
+    constructor(data: AdCardData, parent: HTMLDivElement | null | undefined) {
         this.#data = data;
         this.parent = parent!;
 
-        this.#data.mainPicture = data.pictures[0];
         this.#currentImgIndex = 0;
         this.#circles = [];
 
@@ -62,7 +54,7 @@ class AdCard {
         const imgElem: HTMLImageElement =
             thisElement.querySelector('.ad_card__img1')!;
 
-        const imagesAmount = Math.min(this.#data.pictures.length, 7); // We must only show max amount of 7!
+        const imagesAmount = Math.min(this.#data.images.length, 7); // We must only show max amount of 7!
         const areaFraction =
             imgElem.getBoundingClientRect().width / imagesAmount;
 
@@ -97,7 +89,7 @@ class AdCard {
         setTimeout(() => {
             this.#makeCircleActive(toShowIndex);
             this.#currentImgIndex = toShowIndex;
-            imgElem.src = this.#data.pictures[toShowIndex];
+            imgElem.src = this.#data.images[toShowIndex];
         }, SCROLL_DELAY);
     }
 
@@ -109,7 +101,7 @@ class AdCard {
         setTimeout(() => {
             this.#makeCircleActive(0);
             this.#currentImgIndex = 0;
-            imgElem.src = this.#data.pictures[0];
+            imgElem.src = this.#data.images[0];
         }, SCROLL_DELAY);
     }
 
diff --git a/components/AuthPopup/AuthPopup.ts b/components/AuthPopup/AuthPopup.ts
index 77ae7ca8..f455d993 100644
--- a/components/AuthPopup/AuthPopup.ts
+++ b/components/AuthPopup/AuthPopup.ts
@@ -1,9 +1,8 @@
 'use strict';
 
+import APIClient from '../../modules/ApiClient';
 import Validation from '../../modules/Validation';
 
-import { login, register } from '../../modules/Auth';
-
 class AuthPopup {
     #config;
     #currentState;
@@ -235,7 +234,7 @@ class AuthPopup {
 
         if (this.#currentState === 'signup') {
             try {
-                const res = await register({
+                const res = await APIClient.register({
                     name: data['name'],
                     username: data['username'],
                     password: data['password'],
@@ -252,7 +251,7 @@ class AuthPopup {
             return;
         }
 
-        login({
+        APIClient.login({
             username: data['username'],
             password: data['password'],
         })
diff --git a/components/Filter/Filter.scss b/components/Filter/Filter.scss
index d8addc66..8b488192 100644
--- a/components/Filter/Filter.scss
+++ b/components/Filter/Filter.scss
@@ -8,8 +8,6 @@
 }
 
 .filter {
-    pointer-events: none;
-    opacity: 0.5;
     grid-area: aside;
     padding-inline-start: 5%;
     padding-inline-end: 5%;
diff --git a/components/MainPage/MainPage.ts b/components/MainPage/MainPage.ts
index f86bc1cf..36999e02 100644
--- a/components/MainPage/MainPage.ts
+++ b/components/MainPage/MainPage.ts
@@ -2,8 +2,9 @@
 
 import Filter from '../Filter/Filter';
 import AdCard from '../AdCard/AdCard';
+import { AdCardData } from '../../modules/Types';
 import MainPhoto from '../MainPhoto/MainPhoto';
-import { BACKEND_URL } from '../../modules/Consts';
+import APIClient from '../../modules/ApiClient';
 
 /** Главная страница с витриной объявлений, поиском и фильтрами */
 class MainPage {
@@ -11,11 +12,22 @@ class MainPage {
     #mainPhotoContainer;
     #pageContent;
     #adsContainer;
+    #adsData: any;
 
     constructor(root: HTMLDivElement) {
         this.#root = root;
+        this.#adsData = [];
 
-        this.#mainPhotoContainer = new MainPhoto();
+        this.#mainPhotoContainer = new MainPhoto(
+            async (locationMain: string) => {
+                const filters = {
+                    locationMain: locationMain,
+                };
+                const data = await APIClient.getAds(filters);
+                this.#adsData = data;
+                this.render();
+            }
+        );
 
         this.#pageContent = document.createElement('div');
         this.#pageContent.id = 'main-content';
@@ -27,22 +39,28 @@ class MainPage {
         // Здесь будет витрина
         this.#adsContainer = document.createElement('div');
         this.#adsContainer.classList.add('advert');
+
+        APIClient.getAds().then((data) => {
+            this.#adsData = data;
+            this.render();
+        });
     }
 
     /**
      * @public
      */
     async render() {
-        try {
-            const response = await fetch(BACKEND_URL + '/ads');
-            let data = await response.json();
-            data = data['places'];
-            for (const [_, d] of Object.entries(data)) {
-                const card = new AdCard(d, this.#adsContainer);
-                card.render();
-            }
-        } catch (error) {
-            console.error(error);
+        this.#adsContainer.replaceChildren();
+        for (const fetchedCardData of this.#adsData) {
+            const cardData: AdCardData = {
+                id: fetchedCardData.id,
+                images: fetchedCardData.Images,
+                locationMain: fetchedCardData.location_main,
+                locationStreet: fetchedCardData.location_street,
+                author: fetchedCardData.author,
+            };
+            const card = new AdCard(cardData, this.#adsContainer);
+            card.render();
         }
 
         this.#pageContent.appendChild(this.#adsContainer);
diff --git a/components/MainPhoto/MainPhoto.ts b/components/MainPhoto/MainPhoto.ts
index a648aee6..09acae59 100644
--- a/components/MainPhoto/MainPhoto.ts
+++ b/components/MainPhoto/MainPhoto.ts
@@ -2,8 +2,10 @@
 
 class MainPhoto {
     #mainPhotoContainer;
+    #onSearchButtonClick;
 
-    constructor() {
+    constructor(onSearch: any) {
+        this.#onSearchButtonClick = onSearch;
         this.#mainPhotoContainer = document.createElement('div');
         this.#mainPhotoContainer.classList.add('photo-container');
 
@@ -26,7 +28,6 @@ class MainPhoto {
         beHost.text = 'Стать хостом';
         findHost.href = '#';
         beHost.href = '#';
-        searchCityForm.action = '#';
         search.placeholder = 'Поиск по городам';
 
         searchButtonDiv.classList.add('custom-search');
@@ -37,6 +38,11 @@ class MainPhoto {
         hostsHrefs.appendChild(beHost);
         this.#mainPhotoContainer.appendChild(hostsHrefs);
 
+        searchCityForm.onsubmit = (e) => {
+            e.preventDefault();
+            this.#onSearchButtonClick(search.value);
+        };
+
         searchButtonDiv.appendChild(search);
         searchButtonDiv.appendChild(findButton);
         searchCityForm.appendChild(searchButtonDiv);
diff --git a/components/ProfilePopup/ProfilePopup.ts b/components/ProfilePopup/ProfilePopup.ts
index 9ff1897f..7382026c 100644
--- a/components/ProfilePopup/ProfilePopup.ts
+++ b/components/ProfilePopup/ProfilePopup.ts
@@ -1,38 +1,37 @@
 'use strict';
 
-import { logout } from '../../modules/Auth';
+import APIClient from '../../modules/ApiClient';
 
 class ProfilePopup {
     #config;
     #events = {
-        logoutEvent:
-            async () => {
-                const response = await logout();
-                if (response.ok) {
-                    location.reload();
-                }
-                throw new Error('Failed to logout');
-            },
+        logoutEvent: async () => {
+            const response = await APIClient.logout();
+            if (response.ok) {
+                location.reload();
+            }
+            throw new Error('Failed to logout');
+        },
         profileEvent: null, //TODO
-        donateEvent: null   //TODO or DELETE
+        donateEvent: null, //TODO or DELETE
     };
 
     constructor() {
         this.#config = {
-            profile : {
+            profile: {
                 title: 'Профиль',
                 href: '/profile',
                 event: this.#events.profileEvent,
             },
-            donate : {
+            donate: {
                 title: 'Донаты',
                 href: '/donate',
                 event: this.#events.donateEvent,
             },
-            logout : {
+            logout: {
                 title: 'Выйти',
                 href: '#',
-                event: this.#events.logoutEvent
+                event: this.#events.logoutEvent,
             },
         };
 
@@ -61,7 +60,7 @@ class ProfilePopup {
     #closeOverlay(parent: HTMLElement): void {
         const overlay = parent.querySelector('.profile-overlay');
         if (overlay != null) {
-            overlay.addEventListener('click', ()=> {
+            overlay.addEventListener('click', () => {
                 overlay.remove();
                 document.body.classList.remove('no-scroll');
             });
@@ -73,18 +72,16 @@ class ProfilePopup {
      * @description Добавляет обработчики для меню попапа
      */
     #addEventListeners() {
-        Object.entries(this.#config).forEach(([name, {event}])=>{
-            if (event !== null) { //Временно пока нет других eventов
+        Object.entries(this.#config).forEach(([name, { event }]) => {
+            if (event !== null) {
+                //Временно пока нет других eventов
                 const listElement = document.getElementById(name);
                 if (listElement) {
-                    listElement.addEventListener(
-                        'click', 
-                        event
-                    );
+                    listElement.addEventListener('click', event);
                 }
             }
         });
     }
 }
 
-export default ProfilePopup;
\ No newline at end of file
+export default ProfilePopup;
diff --git a/index.ts b/index.ts
index b427f9d7..ea17c29e 100644
--- a/index.ts
+++ b/index.ts
@@ -4,10 +4,8 @@ import Header from './components/Header/Header';
 import AuthPopup from './components/AuthPopup/AuthPopup';
 import MainPage from './components/MainPage/MainPage';
 import ProfilePopup from './components/ProfilePopup/ProfilePopup';
-import Ajax from './modules/Ajax';
 import './components/precompiled-templates';
-
-import { BACKEND_URL } from './modules/Consts';
+import APIService from './modules/ApiClient';
 
 const root = document.getElementById('root')!;
 const pageContainer = document.createElement('div');
@@ -51,16 +49,8 @@ function renderProfileList() {
 
 /** Главная функция */
 const main = async () => {
-    const response = await Ajax.get(BACKEND_URL + '/getSessionData');
-    let isAuthorized = false;
-    if (response.ok) {
-        isAuthorized = true;
-        const sessionInfo = await response.json();
-    } else if (response.status !== 401) {
-        console.error('Wrong response from server', response);
-    }
-
-    const header = new Header(headerCallbacks, isAuthorized);
+    const sessionData = await APIService.getSessionData();
+    const header = new Header(headerCallbacks, sessionData ? true : false);
     root.appendChild(header.getMainContainer());
 
     pageContainer.classList.add('page-container');
diff --git a/modules/Ajax.ts b/modules/Ajax.ts
index d0a4da59..3e15eb91 100644
--- a/modules/Ajax.ts
+++ b/modules/Ajax.ts
@@ -1,14 +1,14 @@
 'use strict';
 
 interface PostParams {
-    url: string
-    body: object
+    url: string;
+    body: object;
 }
 
 interface RequestParams {
-    url: string
-    body?: object
-    method: string
+    url: string;
+    body?: object;
+    method: string;
 }
 
 class Ajax {
diff --git a/modules/ApiClient.ts b/modules/ApiClient.ts
new file mode 100644
index 00000000..b9052f8a
--- /dev/null
+++ b/modules/ApiClient.ts
@@ -0,0 +1,85 @@
+'use strict';
+
+import Ajax from './Ajax';
+import { RegisterParams, AdsFilters, LoginParams } from './Types';
+
+const APIClient = {
+    BASE_URL: `http://${window.location.hostname}:8008/api`,
+
+    /**
+     * @public
+     * @description Получает список объявлений
+     */
+    async getAds(filters?: AdsFilters) {
+        try {
+            let response;
+            if (filters && filters.locationMain) {
+                console.log(123);
+                response = await fetch(
+                    this.BASE_URL + `/getPlacesPerCity/${filters.locationMain}`
+                );
+            } else {
+                response = await fetch(this.BASE_URL + '/ads');
+            }
+            let data = await response.json();
+            data = data['places'];
+            if (data === undefined) return [];
+            return data;
+        } catch (error) {
+            console.error(error);
+        }
+        return [];
+    },
+
+    async getSessionData() {
+        const response = await Ajax.get(this.BASE_URL + '/getSessionData');
+        if (response.ok) {
+            const sessionInfo = await response.json();
+            return sessionInfo;
+        } else if (response.status !== 401) {
+            console.error('Wrong response from server', response);
+        }
+        return undefined;
+    },
+
+    /**
+     * @public
+     * @description Посылает запрос на вход пользователя в аккаунт
+     * @param {LoginParams} loginParams
+     * @returns {Promise<any>}
+     */
+    async login({ username, password }: LoginParams) {
+        const url = this.BASE_URL + '/auth/login';
+        const body = {
+            username: username,
+            password: password,
+        };
+        return Ajax.post({ url, body });
+    },
+
+    async logout() {
+        const url = this.BASE_URL + '/auth/logout';
+        const body = {};
+        return Ajax.delete({ url, body });
+    },
+
+    /**
+     * @public
+     * @description Посылает запрос на регистрацию пользователя
+     * @param {RegisterParams} params
+     * @returns {Promise<any>}
+     */
+    async register({ name, username, password, email }: RegisterParams) {
+        const url = this.BASE_URL + '/auth/register';
+        const body = {
+            name: name,
+            username: username,
+            password: password,
+            email: email,
+        };
+
+        return Ajax.post({ url, body });
+    },
+};
+
+export default APIClient;
diff --git a/modules/Auth.ts b/modules/Auth.ts
deleted file mode 100644
index ce0cd707..00000000
--- a/modules/Auth.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-'use strict';
-
-import Ajax from './Ajax';
-import { BACKEND_URL } from './Consts';
-
-interface RegisterParams {
-    name: string
-    username: string
-    password: string
-    email: string
-}
-
-interface LoginParams {
-    username: string
-    password: string
-}
-
-/**
- * @public
- * @description Посылает запрос на регистрацию пользователя
- * @param {RegisterParams} params
- * @returns {Promise<any>}
- */
-
-export const register = async ({
-    name,
-    username,
-    password,
-    email,
-}: RegisterParams): Promise<any> => {
-    const url = BACKEND_URL + '/auth/register';
-    const body = {
-        name: name,
-        username: username,
-        password: password,
-        email: email,
-    };
-
-    return Ajax.post({ url, body });
-};
-
-/**
- * @public
- * @description Посылает запрос на вход пользователя в аккаунт
- * @param {LoginParams} loginParams
- * @returns {Promise<any>}
- */
-export const login = async ({
-    username,
-    password,
-}: LoginParams): Promise<any> => {
-    const url = BACKEND_URL + '/auth/login';
-    const body = {
-        username: username,
-        password: password,
-    };
-    return Ajax.post({ url, body });
-};
-
-/**
- * @public
- * @returns {Promise<*>}
- */
-export const logout = async (): Promise<any> => {
-    const url = BACKEND_URL + '/auth/logout';
-    const body = {};
-    return Ajax.delete({ url, body });
-};
diff --git a/modules/Consts.ts b/modules/Consts.ts
deleted file mode 100644
index adaeb4b2..00000000
--- a/modules/Consts.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const BACKEND_URL = `http://${window.location.hostname}:8008/api`;
diff --git a/modules/Types.ts b/modules/Types.ts
new file mode 100644
index 00000000..2707cafc
--- /dev/null
+++ b/modules/Types.ts
@@ -0,0 +1,29 @@
+export interface RegisterParams {
+    name: string;
+    username: string;
+    password: string;
+    email: string;
+}
+
+export interface LoginParams {
+    username: string;
+    password: string;
+}
+
+export interface AdsFilters {
+    locationMain?: string;
+}
+
+interface AuthorData {
+    uuid: string;
+    avatar: string;
+    score: number;
+}
+
+export interface AdCardData {
+    id: number;
+    images: string[];
+    locationMain: string;
+    locationStreet: string;
+    author: AuthorData;
+}