diff --git a/components/Card/DesktopCard/DesktopCard.tsx b/components/Card/DesktopCard/index.tsx
similarity index 51%
rename from components/Card/DesktopCard/DesktopCard.tsx
rename to components/Card/DesktopCard/index.tsx
index d2751952..2bb3612a 100644
--- a/components/Card/DesktopCard/DesktopCard.tsx
+++ b/components/Card/DesktopCard/index.tsx
@@ -1,17 +1,14 @@
-import React from 'react';
-import { Card } from 'components/Card/Card';
+import React, { ReactNode } from 'react';
 import { Close } from 'shared/UI/Close';
-import { ContentConfig, MapItemType } from 'types/Content.types';
 import styles from './DesktopCard.module.css';
 
 interface Props {
-    contentConfig: ContentConfig;
     popupId?: string;
-    popupType: MapItemType | null;
+    children: ReactNode;
     closePopup: () => void;
 }
 
-export function DesktopCard({ contentConfig, popupId, popupType, closePopup }: Props) {
+export function DesktopCard({ popupId, children, closePopup }: Props) {
     if (!popupId) {
         return <></>;
     }
@@ -21,7 +18,7 @@ export function DesktopCard({ contentConfig, popupId, popupType, closePopup }: P
             <div className={styles.DesktopCard__header}>
                 <Close close={closePopup} />
             </div>
-            <Card popupId={popupId} popupType={popupType} contentConfig={contentConfig} />
+            {children}
         </div>
     );
 }
diff --git a/components/Card/MobileCard.tsx b/components/Card/MobileCard.tsx
deleted file mode 100644
index 52ea9413..00000000
--- a/components/Card/MobileCard.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { SheetModal } from 'ekb';
-import { Card } from 'components/Card/Card';
-import { ContentConfig, MapItemType } from 'types/Content.types';
-
-interface Props {
-    contentConfig: ContentConfig;
-    popupId?: string;
-    popupType: MapItemType | null;
-    closePopup: () => void;
-}
-
-export function MobileCard({ contentConfig, popupId, popupType, closePopup }: Props) {
-    return (
-        <SheetModal isOpen={Boolean(popupId)} onClose={closePopup} snapPoints={[0.7]}>
-            <Card popupId={popupId} popupType={popupType} contentConfig={contentConfig} />
-        </SheetModal>
-    );
-}
diff --git a/components/Card/components/CardActions.tsx b/components/Card/components/CardActions.tsx
new file mode 100644
index 00000000..ea6c5a27
--- /dev/null
+++ b/components/Card/components/CardActions.tsx
@@ -0,0 +1,54 @@
+import React, { useMemo } from 'react';
+import { Button, ButtonSize, ButtonType, Icon, IconType } from 'ekb';
+import { useCopyHref } from 'shared/helpers/useCopyHref';
+
+type Props = {
+    coordinates?: [number, number] | number[];
+};
+
+const COPY_RESET_TIMEOUT = 2000;
+
+export function CardActions({ coordinates }: Props) {
+    const { isCopied: isLinkCopied, onCopy: onCopyLink } = useCopyHref(
+        window.location.href,
+        COPY_RESET_TIMEOUT,
+    );
+
+    const coordsString = useMemo(() => {
+        if (!coordinates) {
+            return null;
+        }
+
+        const coords = Array.isArray(coordinates[0]) ? coordinates[0] : coordinates;
+
+        return `${coords[0]?.toFixed(6)}, ${coords[1]?.toFixed(6)}`;
+    }, [coordinates]);
+
+    const { isCopied: isCoordsCopied, onCopy: onCopyCoords } = useCopyHref(
+        coordsString,
+        COPY_RESET_TIMEOUT,
+    );
+
+    return (
+        <>
+            {coordsString && (
+                <Button
+                    type={ButtonType.DEFAULT}
+                    size={ButtonSize.SMALL}
+                    onClick={onCopyCoords}
+                    postfix={<Icon type={IconType.Copy} />}
+                >
+                    {isCoordsCopied ? 'Скопировано' : coordsString}
+                </Button>
+            )}
+            <Button
+                type={ButtonType.DEFAULT}
+                size={ButtonSize.SMALL}
+                onClick={onCopyLink}
+                postfix={<Icon type={IconType.Link} />}
+            >
+                {isLinkCopied ? 'Скопировано' : 'Ссылка на объект'}
+            </Button>
+        </>
+    );
+}
diff --git a/components/Card/components/ConstructionInfo/ConstructionInfo.tsx b/components/Card/components/ConstructionInfo/ConstructionInfo.tsx
deleted file mode 100644
index d45cf49e..00000000
--- a/components/Card/components/ConstructionInfo/ConstructionInfo.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { useMemo } from 'react';
-import { getYearNameByValue } from 'shared/helpers/getYearNameByValue';
-import { Info } from 'components/Card/components/Info/Info';
-
-const YEAR_RE = /\d{4}/;
-
-type ConstructionInfoProps = {
-    date: string;
-};
-
-export function ConstructionInfo({ date }: ConstructionInfoProps) {
-    const constructionDateInfo = useMemo(() => {
-        const result = [
-            {
-                name: 'Когда построили',
-                text: date,
-            },
-        ];
-
-        const constructionYearMatch = date.match(YEAR_RE);
-
-        if (constructionYearMatch) {
-            const constructionYear = Number(constructionYearMatch[0]);
-            const age = new Date().getFullYear() - Number(constructionYear);
-
-            result.push({
-                name: 'Возраст здания',
-                text: `${String(age)} ${getYearNameByValue(age)}`,
-            });
-        }
-
-        return result;
-    }, [date]);
-
-    return (
-        <Info infos={constructionDateInfo} nameColor="rgba(155, 170, 195, 0.8)" textColor="#fff" />
-    );
-}
diff --git a/components/Card/components/Header/Header.module.css b/components/Card/components/Header/Header.module.css
deleted file mode 100644
index c443ba4c..00000000
--- a/components/Card/components/Header/Header.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.header {
-    display: flex;
-    flex-wrap: wrap;
-    column-gap: 4px;
-}
-
-.header__title {
-    margin: 12px 0 0;
-    font-size: 30px;
-    font-weight: 500;
-    line-height: 1;
-}
-
-.header__description {
-    margin: 4px 0 0;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-}
-
-@media screen and (width >= 1150px) {
-    .header__title {
-        font-size: 32px;
-    }
-
-    .header__description {
-        font-size: 16px;
-    }
-}
diff --git a/components/Card/components/Header/Header.tsx b/components/Card/components/Header/Header.tsx
deleted file mode 100644
index d63477e6..00000000
--- a/components/Card/components/Header/Header.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { useMemo } from 'react';
-import { Button, ButtonSize, ButtonType } from 'ekb';
-import { Icon } from 'shared/UI/Icons';
-import { IconType } from 'shared/UI/Icons/Icons.types';
-import { useCopyHref } from 'shared/helpers/useCopyHref';
-import styles from './Header.module.css';
-
-export type HeaderProps = {
-    coordinates?: [number, number] | number[];
-    title?: string;
-    description?: string;
-};
-
-const COPY_RESET_TIMEOUT = 2000;
-
-export function Header({ coordinates, title, description }: HeaderProps) {
-    const { isCopied: isLinkCopied, onCopy: onCopyLink } = useCopyHref(
-        window.location.href,
-        COPY_RESET_TIMEOUT,
-    );
-
-    const coordsString = useMemo(() => {
-        if (!coordinates) {
-            return null;
-        }
-
-        const coords = Array.isArray(coordinates[0]) ? coordinates[0] : coordinates;
-
-        return `${coords[0]?.toFixed(6)}, ${coords[1]?.toFixed(6)}`;
-    }, [coordinates]);
-    const { isCopied: isCoordsCopied, onCopy: onCopyCoords } = useCopyHref(
-        coordsString,
-        COPY_RESET_TIMEOUT,
-    );
-
-    return (
-        <>
-            <div className={styles.header}>
-                {coordsString && (
-                    <Button
-                        type={ButtonType.DEFAULT}
-                        size={ButtonSize.SMALL}
-                        onClick={onCopyCoords}
-                        postfix={<Icon color="currentColor" type={IconType.Copy} />}
-                    >
-                        {isCoordsCopied ? 'Скопировано' : coordsString}
-                    </Button>
-                )}
-                <Button
-                    type={ButtonType.DEFAULT}
-                    size={ButtonSize.SMALL}
-                    onClick={onCopyLink}
-                    postfix={<Icon color="currentColor" type={IconType.Link} />}
-                >
-                    {isLinkCopied ? 'Скопировано' : 'Ссылка на объект'}
-                </Button>
-            </div>
-            <h2 className={styles.header__title}>{title}</h2>
-            {description && <p className={styles.header__description}>{description}</p>}
-        </>
-    );
-}
diff --git a/components/Card/components/Section/Section.module.css b/components/Card/components/Section/Section.module.css
deleted file mode 100644
index a47616fe..00000000
--- a/components/Card/components/Section/Section.module.css
+++ /dev/null
@@ -1,11 +0,0 @@
-.block {
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid rgba(256, 256, 256, 0.16);
-}
-
-.block_inline {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
diff --git a/components/Card/components/Section/Section.tsx b/components/Card/components/Section/Section.tsx
deleted file mode 100644
index 7c82e9cf..00000000
--- a/components/Card/components/Section/Section.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-import styles from './Section.module.css';
-
-export function Section({ children }: React.PropsWithChildren) {
-    return <div className={styles.block}>{children}</div>;
-}
diff --git a/components/Card/components/Sources/Sources.tsx b/components/Card/components/Sources/Sources.tsx
index 812c60ed..5f2a3551 100644
--- a/components/Card/components/Sources/Sources.tsx
+++ b/components/Card/components/Sources/Sources.tsx
@@ -1,17 +1,15 @@
 import React from 'react';
 import { Link, LinkSize } from 'ekb';
-import { SourceInfo } from 'types/Sources.types';
 import styles from './Sources.module.css';
 
-export function Sources({ sources }: { sources: SourceInfo[] }) {
+export function Sources({ sources }: { sources: { name: string; link: string }[] }) {
     return (
         <div className={styles.sources}>
-            <h3 className={styles.sources__title}>Источники</h3>
             <ul className={styles.sources__list}>
-                {sources.map(({ link, name, data }) => {
+                {sources.map(({ link, name }) => {
                     return (
                         <li key={link} className={styles.sources__listItem}>
-                            <Link href={data || link} size={LinkSize.SMALL}>
+                            <Link href={link} size={LinkSize.SMALL}>
                                 {name}
                             </Link>
                         </li>
diff --git a/components/Card/index.ts b/components/Card/index.ts
deleted file mode 100644
index 984b6544..00000000
--- a/components/Card/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { DesktopCard } from './DesktopCard/DesktopCard';
-export { MobileCard } from './MobileCard';
diff --git a/components/Card/Card.tsx b/components/Card/index.tsx
similarity index 99%
rename from components/Card/Card.tsx
rename to components/Card/index.tsx
index cdbdbe84..d93f158c 100644
--- a/components/Card/Card.tsx
+++ b/components/Card/index.tsx
@@ -25,7 +25,6 @@ export function Card({ contentConfig, popupId, popupType }: Props) {
             }
 
             setLoading(true);
-
             const requestFunction = contentConfig[popupType].oneItemRequest;
 
             const data = await requestFunction(popupId);
diff --git a/components/Filters/FilterGrid.tsx b/components/Filters/FilterGrid.tsx
new file mode 100644
index 00000000..2396f632
--- /dev/null
+++ b/components/Filters/FilterGrid.tsx
@@ -0,0 +1,53 @@
+import React, { ComponentProps, useCallback, useEffect, useState } from 'react';
+import { Checkbox, ListGrid, ListGridItem } from 'ekb';
+
+export type IFilterGridItem = Partial<ComponentProps<typeof ListGridItem>> & {
+    type: string;
+    color?: string;
+};
+
+interface Props {
+    selectedByDefault?: string[];
+    items?: IFilterGridItem[];
+    onChange?: (state: string[]) => void;
+}
+
+export function FilterGrid({ items, onChange, selectedByDefault = [] }: Props) {
+    const [selected, setSelected] = useState<string[]>(selectedByDefault);
+
+    const toggle = useCallback(
+        (type: string) => {
+            if (selected.includes(type)) {
+                setSelected(selected.filter((s) => s !== type));
+            } else {
+                setSelected(selected.concat(type));
+            }
+        },
+        [selected],
+    );
+
+    useEffect(() => {
+        onChange?.(selected);
+    }, [onChange, selected]);
+
+    return (
+        <ListGrid>
+            {items.map(({ type, subTitle, description, color }) => (
+                <ListGridItem
+                    key={type}
+                    subTitle={subTitle}
+                    description={description}
+                    prefix={
+                        <Checkbox
+                            isSelected={selected.includes(type)}
+                            activeColor={color}
+                            toggle={() => toggle(type)}
+                        />
+                    }
+                >
+                    {type}
+                </ListGridItem>
+            ))}
+        </ListGrid>
+    );
+}
diff --git a/components/Filters/index.ts b/components/Filters/index.ts
deleted file mode 100644
index 194f6207..00000000
--- a/components/Filters/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { Filters } from './Filters';
diff --git a/constants/colors.ts b/constants/colors.ts
index 6221a34b..d3d2f81e 100644
--- a/constants/colors.ts
+++ b/constants/colors.ts
@@ -1,7 +1 @@
-import { MapItemType } from 'types/Content.types';
-
-export const MARKER_COLOR = {
-    [MapItemType.DTP]: '#05B506',
-};
-
 export const DEFAULT_BULDING_COLOR_NORMAL = '#0c1021';
diff --git a/constants/sources.ts b/constants/sources.ts
deleted file mode 100644
index 32c45a35..00000000
--- a/constants/sources.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import { SourceType, SourcesConfig } from 'types/Sources.types';
-
-export const SOURCES_BY_TYPE: SourcesConfig = {
-    [SourceType.osm]: {
-        name: 'OpenStreetMap',
-        link: 'https://www.openstreetmap.org/',
-        data: null,
-    },
-    [SourceType.okn]: {
-        name: 'Объекты культурного наследия Свердловской области',
-        link: 'https://okn.midural.ru/kategorii/obekty-kulturnogo-naslediya-sverdlovskoy-oblasti',
-        data: null,
-    },
-    [SourceType.howoldthishouse]: {
-        name: 'Карта возраста домов',
-        link: 'https://how-old-is-this.house/',
-        data: 'https://how-old-is-this.house/dataset?p=h-ekb',
-    },
-    [SourceType.domaekb]: {
-        name: 'Жилые дома Екатеринбурга',
-        link: 'https://domaekb.ru',
-        data: null,
-    },
-    [SourceType.mingkh]: {
-        name: 'МинЖКХ',
-        link: 'https://mingkh.ru',
-        data: null,
-    },
-    [SourceType.ekaterinburgdesign]: {
-        name: 'Дизайн-код Ектеринбурга',
-        link: 'https://ekaterinburg.design',
-        data: 'https://ekaterinburg.design',
-    },
-    [SourceType.dtp]: {
-        name: 'Карта ДТП',
-        link: 'https://dtp-stat.ru/',
-        data: 'https://dtp-stat.ru/opendata',
-    },
-    [SourceType.ekb_quarter]: {
-        name: 'екатеринбург.рф',
-        link: 'https://екатеринбург.рф/справка/квартальные',
-        data: null,
-    },
-    [SourceType.design_objects_map]: {
-        name: 'Карта объектов «Дизайн-кода»',
-        link: 'https://map.ekaterinburg.design',
-        data: 'https://map.ekaterinburg.design',
-    },
-};
diff --git a/features/App/App.tsx b/features/App/App.tsx
index 663fe805..2c29bb26 100644
--- a/features/App/App.tsx
+++ b/features/App/App.tsx
@@ -8,7 +8,6 @@ import { Copyright } from 'features/Copyright/Copyright';
 import { MapContextProvider } from 'features/Map/providers/MapProvider';
 import { Footer } from 'components/Footer/Footer';
 import { Map } from 'features/Map/Map';
-import { FILTERS_CONFIG } from './Filters.config';
 import { Sidebars } from './Sidebars';
 
 export default function App() {
@@ -19,7 +18,7 @@ export default function App() {
                     <MapContextProvider>
                         <Map />
                         <Sidebars />
-                        <Copyright filters={FILTERS_CONFIG} />
+                        <Copyright />
                         <AboutProjectIcons />
                         <Footer />
                     </MapContextProvider>
diff --git a/features/App/Content.config.ts b/features/App/Content.config.ts
index 458a0a10..aa1b8059 100644
--- a/features/App/Content.config.ts
+++ b/features/App/Content.config.ts
@@ -3,17 +3,17 @@ import { designCode } from 'features/DesignCode/designCode';
 import { dtp } from 'features/DTP/dtp';
 import { okn } from 'features/OKN/okn';
 import { lines } from 'features/Lines/lines';
-import { LinesCardContent } from 'features/Lines/CardContent/CardContent';
-import { QuarterCardContent } from 'features/Quarter/CardContent/CardContent';
+import { LinesCardContent } from 'features/Lines/LinesCardContent';
+import { QuarterCardContent } from 'features/Quarter/QuarterCardContent';
 import { quarter } from 'features/Quarter/quarter';
-import { DesignCodeCardContent } from 'features/DesignCode/CardContent/CardContent';
-import { DTPCardContent } from 'features/DTP/CardContent/CardContent';
-import { HousesCardContent } from 'features/Buildings/CardContent/CardContent';
-import { OKNCardContent } from 'features/OKN/CardContent';
+import { DesignCodeCardContent } from 'features/DesignCode/DesignCodeCard';
+import { DTPCardContent } from 'features/DTP/DtpCardContent';
+import { BuildingCard } from 'features/Buildings/BuildingCard';
+import { OKNCardContent } from 'features/OKN/OknCardContent';
 
 export const CONTENTS_CONFIG: ContentConfig = {
     [MapItemType.Houses]: {
-        cardContent: HousesCardContent,
+        cardContent: BuildingCard,
         oneItemRequest: () => Promise.resolve(),
     },
     [MapItemType.DesignCode]: {
diff --git a/features/App/Filters.config.tsx b/features/App/Filters.config.tsx
index 5d826c60..d741fd02 100644
--- a/features/App/Filters.config.tsx
+++ b/features/App/Filters.config.tsx
@@ -1,68 +1,52 @@
 import { DTPFilter } from 'features/DTP/Filter/DTPFilter';
-import { DesignCodeFilter } from 'features/DesignCode/Filter/DesignCodeFilter';
-import { HouseAgeFilter } from 'features/HouseAge/HouseAgeFilter';
-import { HouseFloorFilter } from 'features/HouseFloor/HouseFloorFilter';
-import { HouseWearTearFilter } from 'features/HouseWearTear/HouseWearTearFilter';
-import { LinesFilter } from 'features/Lines/Filter/LinesFilter';
 import { OknFilter } from 'features/OKN/Filter/OknFilter';
-import { QuarterFilter } from 'features/Quarter/Filter/QuarterFilter';
-import { SOURCES_BY_TYPE } from 'constants/sources';
-import { SourceType } from 'types/Sources.types';
+import { QuarterFilter } from 'features/Quarter/QuarterFilter';
 import { FilterConfig, FilterType } from 'types/Filters.types';
-import { FacadeFilter } from 'features/Facade/Filter/FacadeFilter';
+import { FacadeFilter } from 'features/Facade/FacadeFilter';
+import { BuildingRange } from 'features/Buildings/BuildingRange';
 
 export const FILTERS_CONFIG: FilterConfig = {
     [FilterType.HouseAge]: {
         title: 'Возраст домов',
-        component: <HouseAgeFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.howoldthishouse]],
+        component: <BuildingRange property="building:year" />,
         isVerified: false,
     },
     [FilterType.HouseFloor]: {
         title: 'Этажность домов',
-        component: <HouseFloorFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.mingkh], SOURCES_BY_TYPE[SourceType.domaekb]],
+        component: <BuildingRange property="building:levels" />,
         isVerified: false,
     },
     [FilterType.HouseWearTear]: {
         title: 'Степень износа домов',
-        component: <HouseWearTearFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.mingkh], SOURCES_BY_TYPE[SourceType.domaekb]],
+        component: <BuildingRange property="building:health" />,
         isVerified: false,
     },
     [FilterType.OKN]: {
         title: 'Объекты культурного наследия',
         component: <OknFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.okn]],
         isVerified: false,
     },
     [FilterType.DesignCode]: {
         title: '«Дизайн-код Екатеринбурга»',
-        component: <DesignCodeFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.design_objects_map]],
         isVerified: true,
     },
     [FilterType.DTP]: {
         title: 'ДТП',
         component: <DTPFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.dtp]],
         isVerified: true,
     },
     [FilterType.Line]: {
         title: 'Туристические маршруты',
-        component: <LinesFilter />,
         isVerified: true,
     },
     [FilterType.Quarter]: {
         title: 'Квартальные',
         component: <QuarterFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.ekb_quarter]],
         isVerified: true,
     },
     [FilterType.HouseFacades]: {
         title: 'Дизайн-код фасадов',
         component: <FacadeFilter />,
-        source: [SOURCES_BY_TYPE[SourceType.ekaterinburgdesign]],
         isVerified: true,
     },
 };
diff --git a/features/App/Sidebars.tsx b/features/App/Sidebars.tsx
index f4178cce..d08d3b8c 100644
--- a/features/App/Sidebars.tsx
+++ b/features/App/Sidebars.tsx
@@ -5,13 +5,14 @@ import { toggleData } from 'state/features/dataLayers';
 import { activeFilterSelector } from 'state/features/selectors';
 import { FilterType } from 'types/Filters.types';
 import { useIsDesktop } from 'shared/helpers/isDesktop';
-import { DesktopCard, MobileCard } from 'components/Card';
+import { Card } from 'components/Card';
+import { DesktopCard } from 'components/Card/DesktopCard';
 import { LeftSidebar } from 'components/LeftSidebar';
 import { RightSidebar } from 'components/RightSidebar';
 import { AboutProjectModal } from 'features/About/AboutProjectModal';
 import { MobileAboutProject } from 'features/About/MobileAboutProject';
 import { MapContext } from 'features/Map/providers/MapProvider';
-import { Filters } from 'components/Filters';
+import { Filters } from 'features/Filters/Filters';
 import { CONTENTS_CONFIG } from './Content.config';
 import { FILTERS_CONFIG } from './Filters.config';
 
@@ -40,12 +41,14 @@ export function Sidebars() {
         />
     );
 
+    const card = <Card {...cardProps} />;
+
     if (isDesktop) {
         return (
             <>
                 <LeftSidebar>{filter}</LeftSidebar>
                 <RightSidebar>
-                    <DesktopCard {...cardProps} contentConfig={CONTENTS_CONFIG} />
+                    <DesktopCard {...popupProps}>{card}</DesktopCard>
                 </RightSidebar>
                 <AboutProjectModal />
             </>
@@ -57,7 +60,13 @@ export function Sidebars() {
             <SheetModal snapPoints={[0.6, 0.1]} isOpen>
                 {filter}
             </SheetModal>
-            <MobileCard {...cardProps} contentConfig={CONTENTS_CONFIG} />
+            <SheetModal
+                isOpen={Boolean(popupProps.popupId)}
+                onClose={popupProps.closePopup}
+                snapPoints={[0.7]}
+            >
+                {card}
+            </SheetModal>
             <MobileAboutProject />
         </>
     );
diff --git a/features/Buildings/BuildingCard.tsx b/features/Buildings/BuildingCard.tsx
new file mode 100644
index 00000000..3eb21a0c
--- /dev/null
+++ b/features/Buildings/BuildingCard.tsx
@@ -0,0 +1,165 @@
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useMap } from 'react-map-gl';
+import { Card, Tag } from 'ekb';
+import { MapContext } from 'features/Map/providers/MapProvider';
+import { usePopup } from 'features/Map/providers/usePopup';
+import { CardActions } from 'components/Card/components/CardActions';
+import { Sources } from 'components/Card/components/Sources/Sources';
+import { getYearStringByValue } from 'shared/helpers/getYearNameByValue';
+import { getLatLngFromHash } from 'shared/helpers/hash';
+import facades from 'public/ekb-facades.json';
+import HealthProgress from 'features/HouseWearTear/HealthProgress/HealthProgress';
+import { FeedbackButton } from 'features/FeedbackButton/FeedbackButton';
+import { DownloadButton } from 'features/Facade/DownloadButton/DownloadButton';
+import { state } from 'state/config';
+
+interface HouseObject {
+    id: string;
+    coordinates: [number, number][];
+    attributes: Record<string, string>;
+}
+
+export function BuildingCard() {
+    const { popupId } = usePopup();
+    const { ekbMap } = useMap();
+    const { loading } = useContext(MapContext);
+
+    const [placemark, setPlacemark] = useState<HouseObject | null>(null);
+
+    const { properties, card } = state.sources['building-tile'];
+
+    useEffect(() => {
+        const map = ekbMap?.getMap?.();
+
+        if (!map || !popupId || loading) {
+            return;
+        }
+
+        try {
+            const [lat, lng] = getLatLngFromHash();
+
+            const house = map.queryRenderedFeatures(map.project({ lat: +lat, lng: +lng }), {
+                layers: ['building'],
+            })?.[0]?.properties;
+
+            if (!house) return;
+
+            setPlacemark({
+                id: popupId,
+                coordinates: [[+lat, +lng]],
+                attributes: house,
+            });
+        } catch (error) {
+            console.error(error);
+        }
+    }, [ekbMap, popupId, loading]);
+
+    useEffect(() => {
+        const map = ekbMap?.getMap?.();
+
+        if (!map || !popupId) {
+            return;
+        }
+
+        // center map only on loading step
+        if (loading) {
+            try {
+                const [lat, lng] = popupId.split('_');
+
+                map.flyTo({ center: { lat: +lat, lng: +lng } });
+            } catch (error) {
+                console.error(error);
+            }
+        }
+    }, [ekbMap, popupId, loading]);
+
+    const emergency = placemark?.attributes?.['building:emergency'];
+    const isEmergency = emergency === 'Аварийность';
+    const address = `${placemark?.attributes?.['addr:street'] || ''} ${
+        placemark?.attributes?.['addr:housenumber'] || ''
+    }`;
+
+    const blocks = useMemo(() => {
+        const items = [];
+
+        if (!placemark?.attributes) return items;
+
+        return card
+            .map((item) => ({
+                ...item,
+                title: properties[item.id]?.title,
+                value: placemark?.attributes?.[item.id],
+            }))
+            .filter((item) => item.type !== 'value' || (item.value && item.title))
+            .map((item) => {
+                if (item.type === 'age' && placemark?.attributes?.[item?.deps]) {
+                    return {
+                        ...item,
+                        type: 'value',
+                        value: getYearStringByValue(placemark?.attributes?.[item.deps]),
+                    };
+                }
+                if (item.id === 'building:health') {
+                    const health = Number(item.value);
+
+                    return {
+                        ...item,
+                        value: (
+                            <div
+                                key={item.id}
+                                style={{ display: 'flex', alignItems: 'center', gap: 12 }}
+                            >
+                                {health} %
+                                <HealthProgress percent={health} isEmergency={isEmergency} />
+                            </div>
+                        ),
+                    };
+                }
+
+                return item;
+            });
+    }, [card, isEmergency, placemark?.attributes, properties]);
+
+    const facade = facades[placemark?.attributes?.osmId];
+    const facadesSection = [];
+    if (facade) {
+        if (blocks.length) {
+            facadesSection.push({ type: 'divider' });
+        }
+        facadesSection.push({
+            type: 'section',
+            title: 'Дизайн-код фасада',
+            value: <DownloadButton type="primary" name={facade.name} link={facade.link} />,
+        });
+    }
+
+    if (!placemark?.attributes) {
+        return null;
+    }
+
+    return (
+        <Card
+            loading={loading}
+            actions={<CardActions coordinates={placemark?.coordinates?.[0]} />}
+            title={address}
+            description={
+                isEmergency ? (
+                    <Tag style={{ marginTop: 12 }} color="#e63223">
+                        {placemark?.attributes.Condition}
+                    </Tag>
+                ) : undefined
+            }
+            blocks={[
+                ...blocks,
+                ...facadesSection,
+                { type: 'divider' },
+                {
+                    type: 'section',
+                    title: 'Источники',
+                    value: <Sources sources={Object.values(state.copyright)} />,
+                },
+            ]}
+            footerActions={<FeedbackButton address={address} />}
+        />
+    );
+}
diff --git a/features/Buildings/BuildingRange.tsx b/features/Buildings/BuildingRange.tsx
new file mode 100644
index 00000000..73f730a9
--- /dev/null
+++ b/features/Buildings/BuildingRange.tsx
@@ -0,0 +1,54 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { MinMax } from 'ekb';
+import { houseBase } from 'features/Buildings/houseBase';
+import { setFilterParams } from 'state/features/dataLayers';
+import { RangeBaseFilter } from 'components/RangeBaseFilter';
+import { state } from 'state/config';
+
+interface Props {
+    property: string;
+}
+
+export function BuildingRange({ property }: Props) {
+    const dispatch = useDispatch();
+
+    const rangeData = state.sources['building-tile'].properties[property]?.values;
+
+    const getHouses = useCallback(
+        async (range: MinMax) => {
+            dispatch(setFilterParams({ activeFilterParams: range }));
+        },
+        [dispatch],
+    );
+
+    const getHistogramData = useCallback(async () => {
+        if (!rangeData) return;
+
+        return houseBase.getFilterValues(property).then((values) =>
+            // @ts-ignore
+            rangeData.map((floorItemData, idx) => ({
+                ...floorItemData,
+                value: values[idx],
+            })),
+        );
+    }, [property, rangeData]);
+
+    // @ts-ignore
+    const defaultMin = Math.min.apply(null, rangeData?.map((item) => item.from));
+    // @ts-ignore
+    const defaultMax = Math.max.apply(null, rangeData?.map((item) => item.to));
+
+    if (typeof defaultMin !== 'number' || typeof defaultMax !== 'number') {
+        return null;
+    }
+
+    return (
+        <RangeBaseFilter
+            defaultMin={defaultMin}
+            defaultMax={defaultMax}
+            onChangeCallback={getHouses}
+            getHistogramData={getHistogramData}
+        />
+    );
+}
diff --git a/features/Buildings/BuildingSource.tsx b/features/Buildings/BuildingSource.tsx
index 69d010f2..e08d6f43 100644
--- a/features/Buildings/BuildingSource.tsx
+++ b/features/Buildings/BuildingSource.tsx
@@ -1,114 +1,13 @@
-import {
-    ColorSpecification,
-    DataDrivenPropertyValueSpecification,
-    ExpressionSpecification,
-} from 'maplibre-gl';
 import { useEffect } from 'react';
 import { useMap } from 'react-map-gl';
 import { useSelector } from 'react-redux';
-import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
-import { colorLuminance } from 'features/Map/helpers/colorLuminance';
-import {
-    AGE_FILTERS_DATA,
-    FLOOR_FILTERS_DATA,
-    WEAR_TEAR_FILTERS_DATA,
-} from 'features/Buildings/Houses.constants';
 import { activeFilterParamsSelector, activeFilterSelector } from 'state/features/selectors';
 import { FilterType } from 'types/Filters.types';
 import { MapItemType } from 'types/Content.types';
 import useMapObjectState from 'features/Map/helpers/useMapObjectState';
 import { usePopup } from 'features/Map/providers/usePopup';
-
-const BUILDING_LAYER_ID = 'building';
-
-const DEFAULT_BULDING_COLOR_NORMAL = '#0c1021';
-
-interface SetBuildingStyleProps {
-    map: mapboxgl.Map;
-    color: DataDrivenPropertyValueSpecification<ColorSpecification | ExpressionSpecification>;
-    caseCondition?: (string | string[])[];
-    layerProps?: Record<string, any>;
-}
-
-export function setBuildingColor({
-    map,
-    color,
-    caseCondition = ['has', '_unknown_'],
-    layerProps,
-}: SetBuildingStyleProps) {
-    map.setStyle({
-        ...map?.getStyle(),
-        layers: map?.getStyle().layers.map((layer: any) => {
-            if (layer.id === BUILDING_LAYER_ID) {
-                return {
-                    ...layer,
-                    ...layerProps,
-                    paint: {
-                        ...layer.paint,
-                        'fill-extrusion-color': [
-                            'case',
-                            caseCondition,
-                            color,
-                            DEFAULT_BULDING_COLOR_NORMAL,
-                        ],
-                        ...layerProps?.paint,
-                    },
-                };
-            }
-            return layer;
-        }),
-    });
-}
-
-function setBuildingStyle({ map, range, field, rangeData }) {
-    if (
-        !(
-            typeof range?.min === 'number' &&
-            typeof range?.max === 'number' &&
-            field &&
-            rangeData &&
-            map?.setStyle &&
-            map?.getStyle
-        )
-    ) {
-        setBuildingColor({ map, color: DEFAULT_BULDING_COLOR_NORMAL });
-        return;
-    }
-
-    const colorsInitial = rangeData
-        .map((item) => {
-            if (item.from >= range.min && item.to <= range.max) {
-                return item;
-            }
-            return { ...item, color: DEFAULT_BULDING_COLOR_NORMAL };
-        })
-        .map((item) => [item.from, item.color]);
-
-    const colorsHover = colorsInitial.map(([from, color]) => [from, colorLuminance(color, 0.4)]);
-
-    const colorsActive = colorsInitial.map(([from, color]) => [from, colorLuminance(color, 0.55)]);
-
-    const getColor = (style: [number, number][]): ExpressionSpecification => [
-        'interpolate',
-        ['linear'],
-        ['to-number', ['get', field]],
-        ...style.flat(2),
-    ];
-
-    setBuildingColor({
-        map,
-        color: getLayerStyle<ExpressionSpecification>({
-            initial: getColor(colorsInitial),
-            hover: getColor(colorsHover),
-            active: getColor(colorsActive),
-        }),
-        caseCondition: ['has', field],
-    });
-}
-
-const ageRangeData = AGE_FILTERS_DATA.map((item) => ({ ...item, value: 1 }));
-const levelsRangeData = FLOOR_FILTERS_DATA.map((item) => ({ ...item, value: 1 }));
-const healthRangeData = WEAR_TEAR_FILTERS_DATA.map((item) => ({ ...item, value: 1 }));
+import { setBuildingRangeStyle } from 'features/Map/helpers/setBuildingStyle';
+import { state } from 'state/config';
 
 export function BuildingSource() {
     const ekbMap = useMap();
@@ -126,13 +25,9 @@ export function BuildingSource() {
             [FilterType.HouseFacades]: 'building:facade',
         }[activeFilter];
 
-        const rangeData = {
-            [FilterType.HouseAge]: ageRangeData,
-            [FilterType.HouseFloor]: levelsRangeData,
-            [FilterType.HouseWearTear]: healthRangeData,
-        }[activeFilter];
+        const rangeData = state.sources['building-tile'].properties[field]?.values;
 
-        setBuildingStyle({
+        setBuildingRangeStyle({
             map,
             field,
             rangeData,
diff --git a/features/Buildings/CardContent/CardContent.module.css b/features/Buildings/CardContent/CardContent.module.css
deleted file mode 100644
index 4b149b29..00000000
--- a/features/Buildings/CardContent/CardContent.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.popup {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    padding: 16px 8px 16px 16px;
-}
-.popup_mobile {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    padding: 16px;
-}
-
-.popup__emergencyLabel {
-    margin-bottom: 12px;
-}
diff --git a/features/Buildings/CardContent/CardContent.tsx b/features/Buildings/CardContent/CardContent.tsx
deleted file mode 100644
index bac2ac41..00000000
--- a/features/Buildings/CardContent/CardContent.tsx
+++ /dev/null
@@ -1,200 +0,0 @@
-import { useContext, useEffect, useMemo, useState } from 'react';
-import { useMap } from 'react-map-gl';
-import { Tag } from 'ekb';
-import { HouseObject } from 'features/Buildings/houseBase';
-import { MapContext } from 'features/Map/providers/MapProvider';
-import { usePopup } from 'features/Map/providers/usePopup';
-import { ConstructionInfo } from 'components/Card/components/ConstructionInfo/ConstructionInfo';
-import Facade from 'features/Facade/CardContent/Facade';
-import { Header } from 'components/Card/components/Header/Header';
-import { Info } from 'components/Card/components/Info/Info';
-import { Section } from 'components/Card/components/Section/Section';
-import { Sources } from 'components/Card/components/Sources/Sources';
-import { FeedbackButton } from 'features/FeedbackButton/FeedbackButton';
-import { FilterLoader } from 'components/Filters/FilterLoader';
-import { getLatLngFromHash } from 'shared/helpers/hash';
-import { useIsDesktop } from 'shared/helpers/isDesktop';
-import { SOURCES_BY_TYPE } from 'constants/sources';
-import { SourceType } from 'types/Sources.types';
-import facades from 'public/ekb-facades.json';
-import HealthProgress from 'features/HouseWearTear/HealthProgress/HealthProgress';
-import styles from './CardContent.module.css';
-
-export function HousesCardContent() {
-    const { popupId } = usePopup();
-    const { ekbMap } = useMap();
-    const { loading } = useContext(MapContext);
-    const isDesktop = useIsDesktop();
-
-    const [placemark, setPlacemark] = useState<HouseObject | null>(null);
-
-    useEffect(() => {
-        const map = ekbMap?.getMap?.();
-
-        if (!map || !popupId || loading) {
-            return;
-        }
-
-        try {
-            const [lat, lng] = getLatLngFromHash();
-
-            const house = map.queryRenderedFeatures(map.project({ lat: +lat, lng: +lng }), {
-                layers: ['building'],
-            })?.[0]?.properties;
-
-            if (!house) return;
-
-            setPlacemark({
-                id: popupId,
-                attributes: {
-                    osmId: house['osm:id'] || null,
-                    Address: [house['addr:street'], house['addr:housenumber']]
-                        .filter(Boolean)
-                        .join(', '),
-                    Management_company: house['building:management'],
-                    Series: house['building:series'],
-                    Condition: house['building:condition'],
-                    Floors: house['building:levels'],
-                    Year: house['building:year'],
-                    Emergency: house['building:emergency'],
-                    WearAndTear: house['building:health'],
-                    borders: {
-                        coordinates: [[+lat, +lng]],
-                    },
-                },
-            });
-        } catch (error) {
-            console.error(error);
-        }
-    }, [ekbMap, popupId, loading]);
-
-    useEffect(() => {
-        const map = ekbMap?.getMap?.();
-
-        if (!map || !popupId) {
-            return;
-        }
-
-        // center map only on loading step
-        if (loading) {
-            try {
-                const [lat, lng] = popupId.split('_');
-
-                map.flyTo({ center: { lat: +lat, lng: +lng } });
-            } catch (error) {
-                console.error(error);
-            }
-        }
-    }, [ekbMap, popupId, loading]);
-
-    const isEmergency = useMemo(
-        () => placemark?.attributes?.Condition === 'Аварийный',
-        [placemark?.attributes?.Condition],
-    );
-
-    const aboutHouse = useMemo(() => {
-        const result = [];
-        if (placemark?.attributes?.Management_company) {
-            result.push({
-                name: 'Управляющая компания',
-                text: placemark?.attributes?.Management_company,
-            });
-        }
-
-        if (placemark?.attributes?.WearAndTear) {
-            result.push({
-                name: 'Износ',
-                text: `${placemark?.attributes?.WearAndTear} %`,
-                content: (
-                    <HealthProgress
-                        percent={placemark?.attributes?.WearAndTear}
-                        isEmergency={isEmergency}
-                    />
-                ),
-            });
-        }
-
-        if (placemark?.attributes?.Series) {
-            result.push({
-                name: 'Серия дома',
-                text: placemark?.attributes?.Series,
-            });
-        }
-
-        if (placemark?.attributes?.Floors) {
-            result.push({
-                name: 'Количество этажей',
-                text: placemark?.attributes?.Floors,
-            });
-        }
-
-        return result;
-    }, [
-        placemark?.attributes?.Management_company,
-        placemark?.attributes?.WearAndTear,
-        placemark?.attributes?.Series,
-        placemark?.attributes?.Floors,
-        isEmergency,
-    ]);
-
-    const defaultSources = [
-        SOURCES_BY_TYPE[SourceType.osm],
-        SOURCES_BY_TYPE[SourceType.howoldthishouse],
-        SOURCES_BY_TYPE[SourceType.mingkh],
-        SOURCES_BY_TYPE[SourceType.domaekb],
-    ];
-
-    if (loading) {
-        return (
-            <div className={styles.popup}>
-                <FilterLoader />
-            </div>
-        );
-    }
-
-    if (!placemark?.attributes) {
-        return null;
-    }
-
-    return (
-        <div className={isDesktop ? styles.popup : styles.popup_mobile}>
-            <Header
-                coordinates={placemark?.attributes.borders?.coordinates?.[0]}
-                title={placemark?.attributes.Address}
-            />
-            {(isEmergency || aboutHouse?.length > 0) && (
-                <Section>
-                    {isEmergency && (
-                        <div className={styles.popup__emergencyLabel}>
-                            <Tag color="#e63223">{placemark?.attributes.Condition}</Tag>
-                        </div>
-                    )}
-                    <Info nameColor="#9baac3" infos={aboutHouse} />
-                </Section>
-            )}
-            {placemark?.attributes.Year && (
-                <Section>
-                    <ConstructionInfo date={String(placemark?.attributes.Year)} />
-                </Section>
-            )}
-
-            {facades[placemark?.attributes?.osmId] && (
-                <Section>
-                    <Facade facade={facades[placemark?.attributes?.osmId]} />
-                </Section>
-            )}
-            <Section>
-                <Sources
-                    sources={
-                        facades[placemark?.attributes?.osmId]
-                            ? defaultSources.concat(SOURCES_BY_TYPE[SourceType.ekaterinburgdesign])
-                            : defaultSources
-                    }
-                />
-            </Section>
-            <Section>
-                <FeedbackButton address={placemark?.attributes.Address} />
-            </Section>
-        </div>
-    );
-}
diff --git a/features/Buildings/Filter/HouseBaseFilter.tsx b/features/Buildings/Filter/HouseBaseFilter.tsx
deleted file mode 100644
index cfef30fd..00000000
--- a/features/Buildings/Filter/HouseBaseFilter.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { HistogramData, MinMax } from 'ekb';
-import { RangeBaseFilter } from 'components/RangeBaseFilter';
-
-export interface HouseBaseFilterProps {
-    defaultMin: number;
-    defaultMax: number;
-    units?: string;
-    onChangeRequest: (range: MinMax) => void;
-    getHistogramData: () => Promise<HistogramData>;
-}
-
-export function HouseBaseFilter({
-    onChangeRequest,
-    defaultMin,
-    defaultMax,
-    units,
-    getHistogramData,
-}: HouseBaseFilterProps) {
-    return (
-        <RangeBaseFilter
-            defaultMin={defaultMin}
-            defaultMax={defaultMax}
-            units={units}
-            onChangeCallback={onChangeRequest}
-            getHistogramData={getHistogramData}
-        />
-    );
-}
diff --git a/features/Buildings/Houses.constants.ts b/features/Buildings/Houses.constants.ts
deleted file mode 100644
index 05fd20f6..00000000
--- a/features/Buildings/Houses.constants.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { HistogramDataWithoutValues } from 'ekb';
-
-export enum HouseSourceType {
-    Year = 'Year',
-    Floors = 'Floors',
-    WearAndTear = 'WearAndTear',
-}
-
-export const AGE_FILTERS_DATA: HistogramDataWithoutValues = [
-    { from: 1723, to: 1860, color: '#ff7461' },
-    { from: 1860, to: 1917, color: '#ffA34e' },
-    { from: 1917, to: 1930, color: '#fee678' },
-    { from: 1930, to: 1940, color: '#85e634' },
-    { from: 1940, to: 1955, color: '#0f9467' },
-    { from: 1955, to: 1991, color: '#71b3ff' },
-    { from: 1991, to: 2010, color: '#c270ff' },
-    { from: 2010, to: new Date().getFullYear(), color: '#f97bcf' },
-];
-
-export const FLOOR_FILTERS_DATA: HistogramDataWithoutValues = [
-    { from: 1, to: 3, color: '#006adb' },
-    { from: 3, to: 5, color: '#0084e2' },
-    { from: 5, to: 9, color: '#009ee1' },
-    { from: 9, to: 12, color: '#00b7d9' },
-    { from: 12, to: 16, color: '#00cfc5' },
-    { from: 16, to: 21, color: '#00e7a3' },
-    { from: 21, to: 25, color: '#72f674' },
-    { from: 25, to: 31, color: '#c0fc49' },
-    { from: 31, to: 52, color: '#ffea00' },
-];
-
-export const WEAR_TEAR_FILTERS_DATA: HistogramDataWithoutValues = [
-    { from: 0, to: 10, color: '#006b29' },
-    { from: 10, to: 20, color: '#24782a' },
-    { from: 20, to: 30, color: '#73a426' },
-    { from: 30, to: 40, color: '#b6c718' },
-    { from: 40, to: 50, color: '#e9e005' },
-    { from: 50, to: 60, color: '#ffea00' },
-    { from: 60, to: 70, color: '#ffdc00' },
-    { from: 70, to: 80, color: '#ffbb00' },
-    { from: 80, to: 90, color: '#ff8a00' },
-    { from: 90, to: 100, color: '#ff0000' },
-];
diff --git a/features/Buildings/houseBase.ts b/features/Buildings/houseBase.ts
index 98ed6283..e620dafb 100644
--- a/features/Buildings/houseBase.ts
+++ b/features/Buildings/houseBase.ts
@@ -1,6 +1,3 @@
-import { HistogramDataWithoutValues } from 'ekb';
-import { HouseSourceType } from './Houses.constants';
-
 type Meta = Record<string, number | null>;
 
 let cache: Meta = null;
@@ -15,47 +12,19 @@ async function getHouseMeta(): Promise<Meta> {
 }
 
 export const houseBase = {
-    async getFilterValues(_: HistogramDataWithoutValues, filterName: HouseSourceType) {
+    async getFilterValues(filterName: string) {
         const houseMeta = cache || (await getHouseMeta());
         cache = houseMeta;
 
         switch (filterName) {
-            case HouseSourceType.Year:
+            case 'building:year':
                 return Promise.resolve(houseMeta.years);
-            case HouseSourceType.Floors:
+            case 'building:levels':
                 return Promise.resolve(houseMeta.levels);
-            case HouseSourceType.WearAndTear:
+            case 'building:health':
                 return Promise.resolve(houseMeta.health);
             default:
                 return Promise.resolve([]);
         }
     },
 };
-
-export interface HouseClient {
-    borders: HouseAttributes['borders']['coordinates'];
-    year: number;
-    floors: number;
-    wearAndTear: number;
-    id: string;
-}
-
-export interface HouseObject {
-    id: string;
-    attributes: HouseAttributes;
-}
-
-export interface HouseAttributes {
-    osmId: number | null;
-    Address: string;
-    Management_company: string;
-    Series: string;
-    Condition: string;
-    Floors: number;
-    Year: number;
-    Emergency: string;
-    WearAndTear?: any;
-    borders?: {
-        coordinates: [number, number][];
-    };
-}
diff --git a/features/Copyright/Copyright.tsx b/features/Copyright/Copyright.tsx
index e0071b92..3a8ba0d9 100644
--- a/features/Copyright/Copyright.tsx
+++ b/features/Copyright/Copyright.tsx
@@ -1,25 +1,22 @@
 import { useContext } from 'react';
-import { useSelector } from 'react-redux';
-import { activeFilterSelector } from 'state/features/selectors';
 import { MapContext } from 'features/Map/providers/MapProvider';
-import { FilterConfig } from 'types/Filters.types';
 import styles from './Copyright.module.css';
 
-export function Copyright({ filters }: { filters: FilterConfig }) {
+export function Copyright() {
     const { loading } = useContext(MapContext);
-    const activeFilter = useSelector(activeFilterSelector);
-    const copyright = filters[activeFilter]?.source;
+    // const activeFilter = useSelector(activeFilterSelector);
+    // const copyright = filters[activeFilter]?.source;
 
     return (
         <div className={styles.copyright} hidden={loading}>
             <a href="https://www.openstreetmap.org/" target="_blank" rel="noreferrer">
                 OpenStreetMap
             </a>
-            {copyright?.map((elem) => (
+            {/* {copyright?.map((elem) => (
                 <a key={elem.link} href={elem.link} target="_blank" rel="noreferrer">
                     {elem.name}
                 </a>
-            ))}
+            ))} */}
         </div>
     );
 }
diff --git a/features/DTP/CardContent/CardContent.module.css b/features/DTP/CardContent/CardContent.module.css
deleted file mode 100644
index 8a0279ac..00000000
--- a/features/DTP/CardContent/CardContent.module.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.popup {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    padding: 16px 8px 16px 16px;
-}
-
-.popup__extraText {
-    margin: 8px 16px 0 0;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    font-size: 16px;
-    color: #9baac3;
-}
diff --git a/features/DTP/CardContent/components/Participants/Participants.module.css b/features/DTP/CardContent/components/Participants/Participants.module.css
index 29e52226..143c420d 100644
--- a/features/DTP/CardContent/components/Participants/Participants.module.css
+++ b/features/DTP/CardContent/components/Participants/Participants.module.css
@@ -1,12 +1,7 @@
-.participants__title {
-    margin: 0;
-}
-
-.participants__filter {
-    margin-top: 6px;
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
+.participants__section {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid rgba(256, 256, 256, 0.16);
 }
 
 .participants__participants {
diff --git a/features/DTP/CardContent/components/Participants/Participants.tsx b/features/DTP/CardContent/components/Participants/Participants.tsx
index 1c8e6d76..48643750 100644
--- a/features/DTP/CardContent/components/Participants/Participants.tsx
+++ b/features/DTP/CardContent/components/Participants/Participants.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Tag } from 'ekb';
-import { Section } from 'components/Card/components/Section/Section';
 import { DTPParticipant, DTPVehicle } from 'features/DTP/dtp';
 import { healthStatusToType, HEALTH_STATUS_COLOR, Participant } from './Participant/Participant';
 import { ParticipantsProps, HealthStatusType } from './Participants.types';
@@ -38,72 +37,63 @@ export function getVehicleName(vehicle: DTPVehicle) {
 
 export function Participants({ participants, vehicles }: ParticipantsProps) {
     return (
-        <div className={styles.participants}>
-            <h3 className={styles.participants__title}>Участники</h3>
-            <div className={styles.participants__participants}>
-                <>
-                    {vehicles.map((vehicle, i) => {
-                        const driverIndex = vehicle.participants.findIndex(
-                            (participant) => participant.role === 'Водитель',
-                        );
+        <div className={styles.participants__participants}>
+            <>
+                {vehicles.map((vehicle, i) => {
+                    const driverIndex = vehicle.participants.findIndex(
+                        (participant) => participant.role === 'Водитель',
+                    );
 
-                        let driver: DTPParticipant;
-                        let driverHealthStatus: HealthStatusType;
+                    let driver: DTPParticipant;
+                    let driverHealthStatus: HealthStatusType;
 
-                        if (driverIndex !== -1) {
-                            driver = vehicle.participants[driverIndex];
-                            driverHealthStatus = healthStatusToType(driver.health_status);
-                        }
+                    if (driverIndex !== -1) {
+                        driver = vehicle.participants[driverIndex];
+                        driverHealthStatus = healthStatusToType(driver.health_status);
+                    }
 
-                        const restParticipants = vehicle.participants.filter(
-                            (participant) => participant.role !== 'Водитель',
-                        );
+                    const restParticipants = vehicle.participants.filter(
+                        (participant) => participant.role !== 'Водитель',
+                    );
 
-                        const car = getVehicleName(vehicle);
+                    const car = getVehicleName(vehicle);
 
-                        return (
-                            <div className={styles.participants__vehicle} key={i}>
-                                <div className={styles.participants__driver}>
-                                    <div className={styles.participants__carAndStatus}>
-                                        <div className={styles.participants__car}>
-                                            <div className={styles.participants__carModel}>
-                                                {car}
-                                            </div>
-                                            <div className={styles.participants__carColor}>
-                                                {vehicle.color}
-                                            </div>
+                    return (
+                        <div className={styles.participants__vehicle} key={i}>
+                            <div className={styles.participants__driver}>
+                                <div className={styles.participants__carAndStatus}>
+                                    <div className={styles.participants__car}>
+                                        <div className={styles.participants__carModel}>{car}</div>
+                                        <div className={styles.participants__carColor}>
+                                            {vehicle.color}
                                         </div>
-                                        {driver && (
-                                            <Tag
-                                                color={
-                                                    HEALTH_STATUS_COLOR[driverHealthStatus].color
-                                                }
-                                            >
-                                                {driverHealthStatus}
-                                            </Tag>
-                                        )}
                                     </div>
                                     {driver && (
-                                        <div className={styles.participants__driverInfo}>
-                                            <Participant participant={driver} noHealthStatus />
-                                        </div>
+                                        <Tag color={HEALTH_STATUS_COLOR[driverHealthStatus].color}>
+                                            {driverHealthStatus}
+                                        </Tag>
                                     )}
                                 </div>
-                                {restParticipants.map((participant, i) => (
-                                    <Section key={i}>
-                                        <Participant participant={participant} />
-                                    </Section>
-                                ))}
+                                {driver && (
+                                    <div className={styles.participants__driverInfo}>
+                                        <Participant participant={driver} noHealthStatus />
+                                    </div>
+                                )}
                             </div>
-                        );
-                    })}
-                    {participants.map((participant, i) => (
-                        <div className={styles.participants__participant} key={i}>
-                            <Participant participant={participant} />
+                            {restParticipants.map((participant, i) => (
+                                <div className={styles.participants__section} key={i}>
+                                    <Participant participant={participant} />
+                                </div>
+                            ))}
                         </div>
-                    ))}
-                </>
-            </div>
+                    );
+                })}
+                {participants.map((participant, i) => (
+                    <div className={styles.participants__participant} key={i}>
+                        <Participant participant={participant} />
+                    </div>
+                ))}
+            </>
         </div>
     );
 }
diff --git a/features/DTP/DTP.constants.ts b/features/DTP/DTP.constants.ts
index fa2bfa8e..42824815 100644
--- a/features/DTP/DTP.constants.ts
+++ b/features/DTP/DTP.constants.ts
@@ -1,12 +1,11 @@
 import { range } from 'lodash';
-import { HistogramDataWithoutValues } from 'ekb';
-import { IconType } from 'shared/UI/Icons/Icons.types';
+import { HistogramDataWithoutValues, IconType } from 'ekb';
 import { DtpParticipantType, DtpSeverityType } from './types';
 
 export type ParticipantConfig = Record<DtpParticipantType, { icon: IconType; label?: string }>;
 
 export const MIN_DTP_YEAR = 2015;
-export const CURRENT_YEAR = new Date().getFullYear();
+export const MAX_DTP_YEAR = 2023;
 
 export const DTP_PARTICIPANT_CONFIG: ParticipantConfig = {
     [DtpParticipantType.Children]: {
@@ -31,19 +30,13 @@ export const DTP_PARTICIPANT_CONFIG: ParticipantConfig = {
     },
 };
 
-export const SEVERITY_CONFIG = {
-    [DtpSeverityType.Light]: {
-        color: '#36ccaa',
-    },
-    [DtpSeverityType.Heavy]: {
-        color: '#fdcf4e',
-    },
-    [DtpSeverityType.WithDead]: {
-        color: '#ff0000',
-    },
+export const SEVERITY_CONFIG_COLOR = {
+    [DtpSeverityType.Light]: '#36ccaa',
+    [DtpSeverityType.Heavy]: '#fdcf4e',
+    [DtpSeverityType.WithDead]: '#ff0000',
 };
 
-export const DTP_YEARS_RANGE = range(MIN_DTP_YEAR, CURRENT_YEAR);
+export const DTP_YEARS_RANGE = range(MIN_DTP_YEAR, MAX_DTP_YEAR);
 export const YEARS_FILTERS_DATA: HistogramDataWithoutValues = DTP_YEARS_RANGE.map((year) => ({
     from: year,
     to: year + 1,
diff --git a/features/DTP/CardContent/CardContent.tsx b/features/DTP/DtpCardContent.tsx
similarity index 52%
rename from features/DTP/CardContent/CardContent.tsx
rename to features/DTP/DtpCardContent.tsx
index 1352db08..378699cf 100644
--- a/features/DTP/CardContent/CardContent.tsx
+++ b/features/DTP/DtpCardContent.tsx
@@ -1,15 +1,10 @@
 import React, { useMemo } from 'react';
-
-import { Section } from 'components/Card/components/Section/Section';
-import { Header } from 'components/Card/components/Header/Header';
-import { Info } from 'components/Card/components/Info/Info';
+import { Card } from 'ekb';
+import { CardActions } from 'components/Card/components/CardActions';
 import { Sources } from 'components/Card/components/Sources/Sources';
-import { InfoProps } from 'components/Card/components/Info/Info.types';
-import { SourceType } from 'types/Sources.types';
-import { SOURCES_BY_TYPE } from 'constants/sources';
-import { DTPObject } from '../dtp';
-import styles from './CardContent.module.css';
-import { Participants } from './components/Participants/Participants';
+import { state } from 'state/config';
+import { DTPObject } from './dtp';
+import { Participants } from './CardContent/components/Participants/Participants';
 
 export type DTPCardContentProps = {
     placemark: DTPObject;
@@ -46,12 +41,13 @@ export function DTPCardContent({ placemark }: DTPCardContentProps) {
     }, [placemark?.properties.datetime]);
 
     const environment = useMemo(() => {
-        const result: InfoProps['infos'] = [];
+        const result = [];
 
         if (placemark?.properties.light) {
             result.push({
-                name: 'Время суток',
-                text: placemark.properties.light,
+                type: 'value',
+                title: 'Время суток',
+                value: placemark.properties.light,
             });
         }
 
@@ -63,8 +59,9 @@ export function DTPCardContent({ placemark }: DTPCardContentProps) {
             ].join(', ');
 
             result.push({
-                name: 'Погода',
-                text: joinedConditions,
+                type: 'value',
+                title: 'Погода',
+                value: joinedConditions,
             });
         }
 
@@ -76,8 +73,9 @@ export function DTPCardContent({ placemark }: DTPCardContentProps) {
             ].join(', ');
 
             result.push({
-                name: 'Дорожные условия',
-                text: joinedConditions,
+                type: 'value',
+                title: 'Дорожные условия',
+                value: joinedConditions,
             });
         }
 
@@ -88,33 +86,40 @@ export function DTPCardContent({ placemark }: DTPCardContentProps) {
         placemark?.properties.light,
     ]);
 
-    return placemark?.properties ? (
-        <div className={styles.popup}>
-            <Header
-                coordinates={placemark?.geometry.coordinates}
-                title={title}
-                description={description}
-            />
-            {date && <p className={styles.popup__extraText}>{date}</p>}
-            {placemark?.properties.address && (
-                <address className={styles.popup__extraText}>
-                    {placemark?.properties.address}
-                </address>
-            )}
-            <Section>
-                <Info infos={environment} nameColor="#9baac3" />
-            </Section>
-            {placemark?.properties.participants_count && (
-                <Section>
-                    <Participants
-                        participants={placemark.properties.participants}
-                        vehicles={placemark.properties.vehicles}
-                    />
-                </Section>
-            )}
-            <Section>
-                <Sources sources={[SOURCES_BY_TYPE[SourceType.dtp]]} />
-            </Section>
-        </div>
-    ) : null;
+    if (!placemark?.properties) {
+        return null;
+    }
+
+    return (
+        <Card
+            actions={<CardActions coordinates={placemark?.geometry.coordinates} />}
+            title={title}
+            description={description}
+            additionalInfo={[date, placemark?.properties.address].filter(Boolean)}
+            blocks={[
+                ...environment,
+                ...(placemark?.properties?.participants_count
+                    ? [
+                          { type: 'divider' },
+                          {
+                              type: 'section',
+                              title: 'Участники',
+                              value: (
+                                  <Participants
+                                      participants={placemark.properties.participants}
+                                      vehicles={placemark.properties.vehicles}
+                                  />
+                              ),
+                          },
+                      ]
+                    : undefined),
+                { type: 'divider' },
+                {
+                    type: 'section',
+                    title: 'Источники',
+                    value: <Sources sources={Object.values(state.copyright)} />,
+                },
+            ]}
+        />
+    );
 }
diff --git a/features/DTP/DtpSource.tsx b/features/DTP/DtpSource.tsx
index d9eed3e0..16bd7759 100644
--- a/features/DTP/DtpSource.tsx
+++ b/features/DTP/DtpSource.tsx
@@ -4,7 +4,7 @@ import type { CircleLayer, HeatmapLayer } from 'react-map-gl';
 import { useSelector } from 'react-redux';
 import { activeFilterSelector, activeFilterParamsSelector } from 'state/features/selectors';
 import { FilterType } from 'types/Filters.types';
-import { SEVERITY_CONFIG } from 'features/DTP/DTP.constants';
+import { SEVERITY_CONFIG_COLOR } from 'features/DTP/DTP.constants';
 import { MapItemType } from 'types/Content.types';
 import { MAX_ZOOM, MIN_ZOOM } from 'constants/map';
 import dtp from 'public/ekb-dtp.json';
@@ -24,35 +24,36 @@ export function DtpSource() {
     if (activeFilter !== FilterType.DTP || !activeFilterParams) {
         return null;
     }
-
     const data = {
         ...dtp,
         features: dtp.features.filter((feature) => {
-            const { severity } = feature.properties;
-
-            const matchSeverity = activeFilterParams.severity.includes(severity);
+            const matchSeverity = activeFilterParams?.dtp?.dtpSeverity?.includes(
+                feature.properties.severity,
+            );
 
             const matchYear =
-                feature.properties.year >= activeFilterParams.years.from &&
-                feature.properties.year < activeFilterParams.years.to;
+                feature.properties.year >= activeFilterParams?.dtp?.range?.min &&
+                feature.properties.year < activeFilterParams?.dtp?.range?.max;
 
-            const matchParticipants = activeFilterParams.participants.some((c) =>
-                feature.properties.participant_categories.includes(c),
+            const matchParticipants = activeFilterParams?.dtp?.participants?.some(
+                (c) => feature.properties.participant_categories?.includes(c),
             );
 
             return matchSeverity && matchParticipants && matchYear;
         }),
     };
 
-    const colors = Object.entries(SEVERITY_CONFIG).map(([severity, { color }]) => [
-        ['==', ['get', 'severity'], severity],
-        color,
-    ]);
+    const colors =
+        activeFilterParams?.dtp?.dtpSeverity?.map((severity) => [
+            ['==', ['get', 'severity'], severity],
+            SEVERITY_CONFIG_COLOR[severity],
+        ]) || [];
 
-    const strokeColors = Object.entries(SEVERITY_CONFIG).map(([severity]) => [
-        ['==', ['get', 'severity'], severity],
-        '#000',
-    ]);
+    const strokeColors =
+        activeFilterParams?.dtp?.dtpSeverity?.map((severity) => [
+            ['==', ['get', 'severity'], severity],
+            '#000',
+        ]) || [];
 
     const layerStyle: CircleLayer = {
         id: DTP_LAYER_ID,
@@ -104,8 +105,8 @@ export function DtpSource() {
 
     return (
         <Source generateId id="ekb-dtp-source" type="geojson" data={data}>
-            <Layer {...layerStyle} />
-            <Layer {...heatmapStyle} />
+            {activeFilterParams?.dtp?.dtpSeverity && <Layer {...layerStyle} />}
+            {activeFilterParams?.dtp?.dtpSeverity && <Layer {...heatmapStyle} />}
         </Source>
     );
 }
diff --git a/features/DTP/Filter/DTPFilter.module.css b/features/DTP/Filter/DTPFilter.module.css
index 9beb6982..cc26de49 100644
--- a/features/DTP/Filter/DTPFilter.module.css
+++ b/features/DTP/Filter/DTPFilter.module.css
@@ -2,21 +2,3 @@
     font-size: 18px;
     margin: 11px 0 8px;
 }
-
-.DTPFilter__checkboxContent {
-    width: 100%;
-
-    &:not(:last-of-type) {
-        margin-bottom: 8px;
-    }
-}
-
-.DTPFilter__objectsCount {
-    margin-left: 8px;
-    color: #9baac3;
-}
-
-.DTPFilter__icon {
-    margin-right: 2px;
-    vertical-align: text-bottom;
-}
diff --git a/features/DTP/Filter/DTPFilter.state.ts b/features/DTP/Filter/DTPFilter.state.ts
deleted file mode 100644
index 280736ae..00000000
--- a/features/DTP/Filter/DTPFilter.state.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { DtpParticipantType, DtpSeverityType } from '../types';
-import {
-    DTPParticipantsAction,
-    DTPParticipantsState,
-    DTPSeverityAction,
-    DTPSeverityState,
-} from './DTPFilter.types';
-
-export function dtpSeverityReducer(state: DTPSeverityState, action: DTPSeverityAction) {
-    switch (action.type) {
-        case 'toggle':
-            return { ...state, [action.severityType]: !state[action.severityType] };
-        default:
-            return state;
-    }
-}
-
-export const dtpSeverityInitalState = Object.values(DtpSeverityType).reduce((acc, type) => {
-    acc[type] = true;
-
-    return acc;
-}, {} as DTPSeverityState);
-
-export function dtpParticipantReducer(state: DTPParticipantsState, action: DTPParticipantsAction) {
-    switch (action.type) {
-        case 'toggle':
-            return { ...state, [action.participantType]: !state[action.participantType] };
-        default:
-            return state;
-    }
-}
-
-export const dtpParticipantInitalState = Object.values(DtpParticipantType).reduce((acc, type) => {
-    acc[type] = true;
-
-    return acc;
-}, {} as DTPParticipantsState);
diff --git a/features/DTP/Filter/DTPFilter.tsx b/features/DTP/Filter/DTPFilter.tsx
index 93b38138..101e00f7 100644
--- a/features/DTP/Filter/DTPFilter.tsx
+++ b/features/DTP/Filter/DTPFilter.tsx
@@ -1,83 +1,32 @@
-import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
+import React, { useCallback } from 'react';
 import { useDispatch } from 'react-redux';
-import { Checkbox, ListGrid, ListGridItem, MinMax } from 'ekb';
-import { setFilter } from 'state/features/dataLayers';
-import { dtp, DTPFiltersParams } from 'features/DTP/dtp';
-import { FilterLoader } from 'components/Filters/FilterLoader';
+import { MinMax } from 'ekb';
+import { updateFilterParams } from 'state/features/dataLayers';
+import { dtp, DTP_PARTICIPANTS_ITEMS } from 'features/DTP/dtp';
+import { LayerFilter } from 'features/Filters/LayerFilter';
+import { MapFilter } from 'features/Filters/MapFilter';
 import { FilterType } from 'types/Filters.types';
 import { RangeBaseFilter } from 'components/RangeBaseFilter';
-import { DtpParticipantType, DtpSeverityType } from '../types';
-import {
-    MIN_DTP_YEAR,
-    CURRENT_YEAR,
-    DTP_PARTICIPANT_CONFIG,
-    SEVERITY_CONFIG,
-    YEARS_FILTERS_DATA,
-} from '../DTP.constants';
-import {
-    dtpParticipantInitalState,
-    dtpParticipantReducer,
-    dtpSeverityInitalState,
-    dtpSeverityReducer,
-} from './DTPFilter.state';
+import { MIN_DTP_YEAR, MAX_DTP_YEAR, YEARS_FILTERS_DATA } from '../DTP.constants';
 import styles from './DTPFilter.module.css';
 
-type ParticipantCountEntries = [DtpParticipantType, number][];
-type SeverityCountEntries = [DtpSeverityType, number][];
-
-const DEFAULT_MIN_YEAR = CURRENT_YEAR - 1;
-
 export function DTPFilter() {
     const dispatch = useDispatch();
-    const [severityState, dispatchSeverity] = useReducer(
-        dtpSeverityReducer,
-        dtpSeverityInitalState,
-    );
-    const [participantState, dispatchParticipant] = useReducer(
-        dtpParticipantReducer,
-        dtpParticipantInitalState,
-    );
-    const [yearsLoaded, setYearsLoaded] = useState(false);
-    const [participantCount, setParticipantCount] = useState<ParticipantCountEntries>(null);
-    const [severityCount, setSeverityCount] = useState<SeverityCountEntries>(null);
-    const [yearsState, setYearsState] = useState<MinMax>({
-        min: DEFAULT_MIN_YEAR,
-        max: CURRENT_YEAR,
-    });
-
-    useEffect(() => {
-        dtp.getParticipantFilters().then((participantFilters: ParticipantCountEntries) => {
-            const sortedParticipantCount = participantFilters.sort(
-                ([, countA], [, countB]) => countB - countA,
-            );
-
-            setParticipantCount(sortedParticipantCount);
-        });
-    }, []);
 
-    useEffect(() => {
-        dtp.getSeverityFilters().then((severityFilters: SeverityCountEntries) => {
-            const sortedSeverityCount = severityFilters.sort(
-                ([, countA], [, countB]) => countB - countA,
+    const onYearsChange = useCallback(
+        (range: MinMax) => {
+            dispatch(
+                updateFilterParams({
+                    activeFilter: FilterType.DTP,
+                    activeFilterParams: {
+                        dtp: { range },
+                    },
+                }),
             );
-
-            setSeverityCount(sortedSeverityCount);
-        });
-    }, []);
-
-    const onSeverityChange = useCallback(
-        (severityType: DtpSeverityType) => dispatchSeverity({ type: 'toggle', severityType }),
-        [],
+        },
+        [dispatch],
     );
 
-    const onParticipantChange = useCallback(
-        (participantType: DtpParticipantType) =>
-            dispatchParticipant({ type: 'toggle', participantType }),
-        [],
-    );
-
-    const onYearsChange = useCallback((range: MinMax) => setYearsState(range), []);
-
     const getHistogramData = useCallback(async () => {
         const dtpFilters = await dtp.getYearsFilters();
 
@@ -86,126 +35,30 @@ export function DTPFilter() {
             value: dtpFilters[idx],
         }));
 
-        setYearsLoaded(true);
-
         return histogramData;
     }, []);
 
-    useEffect(() => {
-        const filters: DTPFiltersParams = {
-            years: {
-                from: yearsState.min,
-                to: yearsState.max,
-            },
-        };
-
-        const severities = Object.entries(severityState).reduce((acc, [type, value]) => {
-            if (value) {
-                acc.push(type);
-            }
-
-            return acc;
-        }, []) as DtpSeverityType[];
-        const participants = Object.entries(participantState).reduce((acc, [type, value]) => {
-            if (value) {
-                acc.push(type);
-            }
-
-            return acc;
-        }, []) as DtpParticipantType[];
-
-        filters.severity = severities;
-        filters.participants = participants;
-
-        dispatch(
-            setFilter({
-                activeFilter: FilterType.DTP,
-                activeFilterParams: filters,
-            }),
-        );
-    }, [dispatch, severityState, participantState, yearsState.min, yearsState.max]);
-
-    const shouldShowLoader = useMemo(
-        () => !yearsLoaded || !participantCount || !severityCount,
-        [yearsLoaded, participantCount, severityCount],
-    );
-
-    const shouldShowCheckboxes = useMemo(
-        () => participantCount && severityCount,
-        [participantCount, severityCount],
-    );
-
     return (
         <>
             <RangeBaseFilter
                 defaultMin={MIN_DTP_YEAR}
-                defaultMax={CURRENT_YEAR}
+                defaultMax={MAX_DTP_YEAR}
                 getHistogramData={getHistogramData}
                 onChangeCallback={onYearsChange}
                 noLoader
             />
-            {shouldShowCheckboxes && (
-                <>
-                    <h2 className={styles.DTPFilter__sectionTitle}>Участники ДТП</h2>
-                    <ListGrid>
-                        {participantCount?.map(([type, count]) => (
-                            <ListGridItem
-                                key={`filter-${type}-participant-dtp`}
-                                subTitle={count}
-                                prefix={
-                                    <Checkbox
-                                        isSelected={participantState[type]}
-                                        toggle={() => {
-                                            onParticipantChange(type as DtpParticipantType);
-                                        }}
-                                    />
-                                }
-                            >
-                                {DTP_PARTICIPANT_CONFIG[type]?.label || type}
-                            </ListGridItem>
-                        ))}
-                    </ListGrid>
 
-                    <h2 className={styles.DTPFilter__sectionTitle}>Вред здоровью</h2>
+            <h2 className={styles.DTPFilter__sectionTitle}>Участники ДТП</h2>
 
-                    <ListGrid>
-                        {severityCount?.map(([type, count]) => (
-                            <ListGridItem
-                                key={`filter-${type}-participant-dtp`}
-                                subTitle={count}
-                                prefix={
-                                    <Checkbox
-                                        isSelected={severityState[type]}
-                                        defaultColor={SEVERITY_CONFIG[type].color}
-                                        activeColor={SEVERITY_CONFIG[type].color}
-                                        toggle={() => {
-                                            onSeverityChange(type as DtpSeverityType);
-                                        }}
-                                    />
-                                }
-                            >
-                                {DTP_PARTICIPANT_CONFIG[type]?.label || type}
-                            </ListGridItem>
-                        ))}
-                    </ListGrid>
-                    {/* {severityCount?.map(([type, count], i) => (
-                        <Checkbox
-                            id={`${type}-line-${i}`}
-                            checked={severityState[type]}
-                            color={SEVERITY_CONFIG[type].color}
-                            onClick={onSeverityChange(type)}
-                            mix={styles.DTPFilter__checkboxContent}
-                            key={`filter-${type}-severity-dtp`}
-                        >
-                            <div className={styles.DTPFilter__checkboxLabel}>
-                                {type}
-                                <span className={styles.DTPFilter__objectsCount}>{count}</span>
-                            </div>
-                        </Checkbox>
-                    ))} */}
-                </>
-            )}
-            {shouldShowLoader && <FilterLoader />}
+            <MapFilter filterType={FilterType.DTP} filterItemKey="dtpSeverity" />
+
+            <h2 className={styles.DTPFilter__sectionTitle}>Вред здоровью</h2>
+
+            <LayerFilter
+                items={DTP_PARTICIPANTS_ITEMS}
+                filterType={FilterType.DTP}
+                filterItemKey="participants"
+            />
         </>
     );
 }
diff --git a/features/DTP/Filter/DTPFilter.types.ts b/features/DTP/Filter/DTPFilter.types.ts
deleted file mode 100644
index 8c594adc..00000000
--- a/features/DTP/Filter/DTPFilter.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { DtpParticipantType, DtpSeverityType } from '../types';
-
-export interface DTPSeverityAction {
-    type: 'toggle';
-    severityType: DtpSeverityType;
-}
-export interface DTPParticipantsAction {
-    type: 'toggle';
-    participantType: DtpParticipantType;
-}
-
-export type DTPSeverityState = Record<DtpSeverityType, boolean>;
-export type DTPParticipantsState = Record<DtpParticipantType, boolean>;
diff --git a/features/DTP/dtp.ts b/features/DTP/dtp.ts
index 4d3d75f9..c4ec7c73 100644
--- a/features/DTP/dtp.ts
+++ b/features/DTP/dtp.ts
@@ -1,59 +1,44 @@
-import groupBy from 'lodash/groupBy';
-import { Range } from 'ekb';
 import { DTP_YEARS_RANGE } from 'features/DTP/DTP.constants';
 import { fetchAPI } from 'shared/helpers/fetchApi';
 
 import dtpData from 'public/ekb-dtp.json';
 
-import { DtpParticipantType, DtpSeverityType } from './types';
+import { DtpSeverityType } from './types';
 
-export const dtp = {
-    async getObject(id: string): Promise<DTPObject> {
-        return fetchAPI(`/api/dtp?id=${id}`);
-    },
-    async getSeverityFilters() {
-        const dtpBySeverity = Object.entries(
-            groupBy(dtpData.features, (item) => item.properties.severity),
-        )
-            .map(([type, items]) => [type, items.length])
-            .sort((a, b) => (b[1] as number) - (a[1] as number));
+const categories = Array.from(
+    new Set(dtpData.features.map((item) => item.properties.participant_categories).flat(2)),
+);
 
-        return Promise.resolve(dtpBySeverity);
-    },
-    async getParticipantFilters() {
-        const categories = Array.from(
-            new Set(dtpData.features.map((item) => item.properties.participant_categories).flat(2)),
-        );
+const dtpByParticipants = categories
+    .map((category) => [
+        category,
+        dtpData.features.filter((item) =>
+            item.properties.participant_categories.includes(category),
+        ),
+    ])
+    .map(([type, items]) => [type, items.length])
+    .sort((a, b) => (b[1] as number) - (a[1] as number));
 
-        const dtpByParticipants = categories
-            .map((category) => [
-                category,
-                dtpData.features.filter((item) =>
-                    item.properties.participant_categories.includes(category),
-                ),
-            ])
-            .map(([type, items]) => [type, items.length])
-            .sort((a, b) => (b[1] as number) - (a[1] as number));
+export const DTP_PARTICIPANTS_ITEMS = dtpByParticipants.map(([type, count]) => ({
+    type: String(type),
+    subTitle: String(count),
+}));
 
-        return Promise.resolve(dtpByParticipants);
+export const dtp = {
+    async getObject(id: string): Promise<DTPObject> {
+        return fetchAPI(`/api/dtp?id=${id}`);
     },
-    async getYearsFilters() {
+    getYearsFilters() {
         const years = DTP_YEARS_RANGE;
 
         const dtpByYear = years.map(
             (year) => dtpData.features.filter((item) => item.properties.year === year).length,
         );
 
-        return Promise.resolve(dtpByYear);
+        return dtpByYear;
     },
 };
 
-export interface DTPFiltersParams {
-    severity?: DtpSeverityType[];
-    participants?: DtpParticipantType[];
-    years: Range;
-}
-
 export type DTPObject = {
     properties: DTPObjectProperties;
     geometry: {
diff --git a/features/DesignCode/CardContent/CardContent.tsx b/features/DesignCode/CardContent/CardContent.tsx
deleted file mode 100644
index 7770caff..00000000
--- a/features/DesignCode/CardContent/CardContent.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { Tag } from 'ekb';
-import { Header } from 'components/Card/components/Header/Header';
-import { Section } from 'components/Card/components/Section/Section';
-import { DESIGN_MAP_HOST } from 'features/DesignCode/designCode';
-import styles from 'styles/CardContent.module.css';
-import { Sources } from 'components/Card/components/Sources/Sources';
-import { SOURCES_BY_TYPE } from 'constants/sources';
-import { SourceType } from 'types/Sources.types';
-import { DesignCodeObject } from '../designCodeObject';
-import { DESIGN_CODE_ITEMS_COLORS } from '../DesignCode.constants';
-
-export function DesignCodeCardContent({ placemark }: { placemark?: DesignCodeObject }) {
-    return placemark ? (
-        <div className={styles.popup}>
-            <Header
-                coordinates={placemark.coords}
-                title={placemark.name}
-                description={placemark.description}
-            />
-            {placemark.street && (
-                <address className={styles.popup__address}>{placemark.street}</address>
-            )}
-            <Section>
-                <Tag color={DESIGN_CODE_ITEMS_COLORS[placemark.type]}>{placemark.type}</Tag>
-            </Section>
-            <Section>
-                {placemark.images.map((image) => {
-                    const imageData = image.m || image.s;
-                    const imageSrc = `${DESIGN_MAP_HOST}${imageData.src}`;
-
-                    return (
-                        <a key={imageData.src} href={imageSrc} target="_blank" rel="noreferrer">
-                            <img
-                                src={imageSrc}
-                                width={imageData.width}
-                                height={imageData.width}
-                                className={styles.popup__image}
-                                alt={placemark.name}
-                            />
-                        </a>
-                    );
-                })}
-            </Section>
-            <Section>
-                <Sources sources={[SOURCES_BY_TYPE[SourceType.design_objects_map]]} />
-            </Section>
-        </div>
-    ) : null;
-}
diff --git a/features/DesignCode/DesignCode.constants.ts b/features/DesignCode/DesignCode.constants.ts
deleted file mode 100644
index 9dc9a1a4..00000000
--- a/features/DesignCode/DesignCode.constants.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { DesignCodeItemType } from './designCodeObject';
-
-export const DESIGN_CODE_ITEMS_COLORS = {
-    [DesignCodeItemType.AddressPlate]: '#ff640a',
-    [DesignCodeItemType.ChoPlate]: '#e63223',
-    [DesignCodeItemType.CommemorativePlaque]: '#f758b6',
-    [DesignCodeItemType.HistoricAddressPlate]: '#aa9b46',
-    [DesignCodeItemType.LogosAndIdentic]: '#00b400',
-    [DesignCodeItemType.NavigationStela]: '#ffd400',
-    [DesignCodeItemType.OKN]: '#00b4ff',
-    [DesignCodeItemType.StopFreeze]: '#55647d',
-    [DesignCodeItemType.StreetFurniture]: '#5820e4',
-    [DesignCodeItemType.TrafficLight]: '#965a14',
-    [DesignCodeItemType.Transport]: '#006d4e',
-    [DesignCodeItemType.WallPlate]: '#a00041',
-    [DesignCodeItemType.ColumnsWithArrows]: '#86e621',
-};
diff --git a/features/DesignCode/DesignCodeCard.tsx b/features/DesignCode/DesignCodeCard.tsx
new file mode 100644
index 00000000..d4b88507
--- /dev/null
+++ b/features/DesignCode/DesignCodeCard.tsx
@@ -0,0 +1,76 @@
+import { Card, Tag } from 'ekb';
+import { state } from 'state/config';
+import { DESIGN_MAP_HOST } from 'features/DesignCode/designCode';
+import { CardActions } from 'components/Card/components/CardActions';
+import { Sources } from 'components/Card/components/Sources/Sources';
+import styles from 'styles/CardContent.module.css';
+import { Image } from 'types/ObjectsBase.types';
+
+export interface DesignCodeObject {
+    id: string;
+    name: string;
+    type: string;
+    description: string;
+    coords: [lat: number, lng: number];
+    street: string;
+    images: Image[];
+    preview: Image;
+}
+
+export function DesignCodeCardContent({ placemark }: { placemark?: DesignCodeObject }) {
+    if (!placemark) {
+        return null;
+    }
+
+    const properties = state.sources['ekb-designcode-source'].properties.type.values;
+
+    return (
+        <Card
+            actions={<CardActions coordinates={placemark.coords} />}
+            title={placemark.name}
+            description={placemark.description}
+            additionalInfo={[placemark.street].filter(Boolean)}
+            blocks={[
+                {
+                    type: 'value',
+                    value: <Tag color={properties[placemark.type]?.color}>{placemark.type}</Tag>,
+                },
+                { type: 'divider' },
+                {
+                    type: 'section',
+                    value: (
+                        <>
+                            {placemark.images.map((image) => {
+                                const imageData = image.m || image.s;
+                                const imageSrc = `${DESIGN_MAP_HOST}${imageData.src}`;
+
+                                return (
+                                    <a
+                                        key={imageData.src}
+                                        href={imageSrc}
+                                        target="_blank"
+                                        rel="noreferrer"
+                                    >
+                                        <img
+                                            src={imageSrc}
+                                            width={imageData.width}
+                                            height={imageData.width}
+                                            className={styles.popup__image}
+                                            alt={placemark.name}
+                                        />
+                                    </a>
+                                );
+                            })}
+                        </>
+                    ),
+                },
+                { type: 'divider' },
+                {
+                    type: 'section',
+                    title: 'Источники',
+                    value: <Sources sources={Object.values(state.copyright)} />,
+                },
+            ]}
+        />
+    );
+}
diff --git a/features/DesignCode/DesignCodeSource.tsx b/features/DesignCode/DesignCodeSource.tsx
deleted file mode 100644
index f8afab69..00000000
--- a/features/DesignCode/DesignCodeSource.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import React, { useEffect } from 'react';
-import { useMap, Source, Layer, Marker, CircleLayer } from 'react-map-gl';
-import { useSelector } from 'react-redux';
-import classNames from 'classnames';
-import { activeFilterSelector, activeFilterParamsSelector } from 'state/features/selectors';
-import { FilterType } from 'types/Filters.types';
-import { DESIGN_CODE_ITEMS_COLORS } from 'features/DesignCode/DesignCode.constants';
-import { MapItemType } from 'types/Content.types';
-import { DESIGN_MAP_HOST } from 'features/DesignCode/designCode';
-import { useOpenMapItem } from 'features/Map/helpers/useOpenMapItem';
-import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
-import geojson from 'public/ekb-design-code.json';
-import { usePopup } from 'features/Map/providers/usePopup';
-import useMapObjectState from 'features/Map/helpers/useMapObjectState';
-import styles from './DesignCodeMarker.module.css';
-
-const DESIGN_CODE_LAYER_ID = 'design-code-point';
-
-const DESIGN_CODE_MARKER_CLICKABLE_SIZE = 22;
-const DESIGN_CODE_MARKER_IMAGE_SIZE = 40;
-
-export function DesignCodeSource() {
-    const { popupId } = usePopup();
-    const activeFilter = useSelector(activeFilterSelector);
-    const activeFilterParams = useSelector(activeFilterParamsSelector);
-
-    useMapObjectState(DESIGN_CODE_LAYER_ID);
-    useOpenMapItem(DESIGN_CODE_LAYER_ID, MapItemType.DesignCode);
-
-    if (activeFilter !== FilterType.DesignCode || !activeFilterParams) {
-        return null;
-    }
-
-    const items = geojson.features.filter((item) => activeFilterParams[item.properties.type]);
-
-    const fakeClickableMarkersLayerStyle: CircleLayer = {
-        id: DESIGN_CODE_LAYER_ID,
-        type: 'circle',
-        source: 'ekb-design-code-source',
-        paint: {
-            'circle-radius': getLayerStyle<number>({
-                initial: DESIGN_CODE_MARKER_CLICKABLE_SIZE,
-                hover: DESIGN_CODE_MARKER_CLICKABLE_SIZE * 1.2,
-                active: DESIGN_CODE_MARKER_CLICKABLE_SIZE * 1.3,
-            }),
-            'circle-opacity': 1,
-        },
-    };
-
-    return (
-        <Source type="geojson" generateId data="/ekb-design-code.json">
-            <Layer {...fakeClickableMarkersLayerStyle} />
-            {items.map((feature) => (
-                <Marker
-                    key={feature.properties.id}
-                    latitude={feature.geometry.coordinates[1]}
-                    longitude={feature.geometry.coordinates[0]}
-                >
-                    <img
-                        className={classNames(styles.marker, {
-                            [styles.marker_open]: popupId === feature.properties.id,
-                        })}
-                        style={{ color: DESIGN_CODE_ITEMS_COLORS[feature.properties.type] }}
-                        width={DESIGN_CODE_MARKER_IMAGE_SIZE}
-                        height={DESIGN_CODE_MARKER_IMAGE_SIZE}
-                        src={DESIGN_MAP_HOST + feature.properties.preview}
-                        alt={feature.properties.description}
-                    />
-                </Marker>
-            ))}
-        </Source>
-    );
-}
diff --git a/features/DesignCode/Filter/DesignCodeFilter.state.ts b/features/DesignCode/Filter/DesignCodeFilter.state.ts
deleted file mode 100644
index 55063377..00000000
--- a/features/DesignCode/Filter/DesignCodeFilter.state.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { DesignCodeItemType } from '../designCodeObject';
-import { DesignCodeFilterState, DesignCodeFilterAction } from './DesignCodeFilter.types';
-
-export function designCodeReducer(state: DesignCodeFilterState, action: DesignCodeFilterAction) {
-    switch (action.type) {
-        case 'toggle':
-            return { ...state, [action.designCodeItemType]: !state[action.designCodeItemType] };
-        default:
-            return state;
-    }
-}
-
-export const designCondeInitalState = Object.values(DesignCodeItemType).reduce((acc, type) => {
-    acc[type] = true;
-
-    return acc;
-}, {} as DesignCodeFilterState);
diff --git a/features/DesignCode/Filter/DesignCodeFilter.tsx b/features/DesignCode/Filter/DesignCodeFilter.tsx
deleted file mode 100644
index cd1edc44..00000000
--- a/features/DesignCode/Filter/DesignCodeFilter.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useCallback, useEffect, useReducer } from 'react';
-import { useDispatch } from 'react-redux';
-import { Checkbox, ListGrid, ListGridItem } from 'ekb';
-import groupBy from 'lodash/groupBy';
-import { FilterType } from 'types/Filters.types';
-import { setFilter } from 'state/features/dataLayers';
-import designCode from 'public/ekb-design-code.json';
-import { DESIGN_CODE_ITEMS_COLORS } from '../DesignCode.constants';
-import { DesignCodeItemType } from '../designCodeObject';
-import { designCodeReducer, designCondeInitalState } from './DesignCodeFilter.state';
-
-const DESIGN_CODE_ITEMS = groupBy(designCode.features, (item) => item.properties.type);
-
-export function DesignCodeFilter() {
-    const dispatch = useDispatch();
-    const [designCodeFilterState, dispatchDesignCodeAction] = useReducer(
-        designCodeReducer,
-        designCondeInitalState,
-    );
-
-    const onChange = useCallback(
-        (designCodeItemType: DesignCodeItemType) =>
-            dispatchDesignCodeAction({ type: 'toggle', designCodeItemType }),
-        [],
-    );
-
-    useEffect(() => {
-        dispatch(
-            setFilter({
-                activeFilter: FilterType.DesignCode,
-                activeFilterParams: designCodeFilterState,
-            }),
-        );
-    }, [designCodeFilterState, dispatch]);
-
-    return (
-        <ListGrid>
-            {Object.entries(DESIGN_CODE_ITEMS).map(([type, items]) => (
-                <ListGridItem
-                    key={`filter-design-code-${type}`}
-                    subTitle={items.length}
-                    prefix={
-                        <Checkbox
-                            isSelected={designCodeFilterState[type]}
-                            activeColor={DESIGN_CODE_ITEMS_COLORS[type]}
-                            toggle={() => onChange(type as DesignCodeItemType)}
-                        />
-                    }
-                >
-                    {type}
-                </ListGridItem>
-            ))}
-        </ListGrid>
-    );
-}
diff --git a/features/DesignCode/Filter/DesignCodeFilter.types.ts b/features/DesignCode/Filter/DesignCodeFilter.types.ts
deleted file mode 100644
index 2c0d0807..00000000
--- a/features/DesignCode/Filter/DesignCodeFilter.types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { DesignCodeItemType } from '../designCodeObject';
-
-export type DesignCodeFilterState = Record<DesignCodeItemType, boolean>;
-export interface DesignCodeFilterAction {
-    type: 'toggle';
-    designCodeItemType: DesignCodeItemType;
-}
diff --git a/features/DesignCode/designCode.ts b/features/DesignCode/designCode.ts
index ab00bd47..61e8fdda 100644
--- a/features/DesignCode/designCode.ts
+++ b/features/DesignCode/designCode.ts
@@ -1,23 +1,19 @@
-import groupBy from 'lodash/groupBy';
-import dtp from 'public/ekb-design-code.json';
-import { DesignCodeItemType, DesignCodeObject } from './designCodeObject';
+import { FeatureCollection } from 'geojson';
+import dc from 'public/ekb-design-code.json';
+import { groupByProperty } from 'features/Map/helpers/groupByProperty';
 
 export const DESIGN_MAP_HOST = 'https://map.ekaterinburg.design';
 
-const designByType = Object.entries(groupBy(dtp.features, (item) => item.properties.type))
-    .map(([type, items]) => [type, items.length])
-    .sort((a, b) => (b[1] as number) - (a[1] as number));
+export const DESIGN_CODE_ITEMS = groupByProperty(dc as FeatureCollection);
 
 export const designCode = {
-    getObject(id: string): Promise<DesignCodeObject> {
+    getObject(id: string): Promise<any> {
         try {
-            const result = dtp.features.find((item) => item.properties.id === id);
+            const result = dc.features.find((item) => item.properties.id === id);
 
             // @ts-ignore
             return Promise.resolve({
                 ...result.properties,
-                street: result.properties.street,
-                type: result.properties.type as DesignCodeItemType,
                 coords: [result.geometry.coordinates[0], result.geometry.coordinates[1]],
             });
         } catch (error) {
@@ -25,7 +21,4 @@ export const designCode = {
             return Promise.resolve(null);
         }
     },
-    async getObjectsCount() {
-        return designByType;
-    },
 };
diff --git a/features/DesignCode/designCodeObject.ts b/features/DesignCode/designCodeObject.ts
deleted file mode 100644
index fc8f49ca..00000000
--- a/features/DesignCode/designCodeObject.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Image } from 'types/ObjectsBase.types';
-
-export enum DesignCodeItemType {
-    LogosAndIdentic = 'Логотипы и айдентика',
-    NavigationStela = 'Навигационные стелы',
-    OKN = 'Таблички ОКН',
-    ChoPlate = 'Таблички ЧО',
-    AddressPlate = 'Обычные адресные таблички',
-    StopFreeze = 'Фризы остановок',
-    TrafficLight = 'Светофор',
-    HistoricAddressPlate = 'Исторические адресные таблички',
-    StreetFurniture = 'Уличная мебель',
-    CommemorativePlaque = 'Памятные таблички',
-    Transport = 'Транспорт',
-    WallPlate = 'Настенные таблички',
-    ColumnsWithArrows = 'Столбы со стрелками',
-}
-
-export interface DesignCodeObject {
-    id: string;
-    name: string;
-    type: DesignCodeItemType;
-    description: string;
-    coords: [lat: number, lng: number];
-    street: string;
-    images: Image[];
-    preview: Image;
-}
diff --git a/features/Facade/CardContent/Facade.module.css b/features/Facade/CardContent/Facade.module.css
deleted file mode 100644
index c8b0c5b1..00000000
--- a/features/Facade/CardContent/Facade.module.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.facade {
-    display: flex;
-    gap: 8px;
-    flex-direction: column;
-}
-
-.facade_title {
-    font-size: 16px;
-    line-height: 1.3;
-    font-weight: 400;
-    margin: 0;
-}
diff --git a/features/Facade/CardContent/Facade.tsx b/features/Facade/CardContent/Facade.tsx
deleted file mode 100644
index 4c29234e..00000000
--- a/features/Facade/CardContent/Facade.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { DownloadButton } from 'shared/UI/DownloadButton/DownloadButton';
-import styles from './Facade.module.css';
-
-type Props = {
-    facade: {
-        name: string;
-        link: string;
-    };
-};
-
-export default function Facade({ facade }: Props) {
-    return (
-        <div className={styles.facade}>
-            <h3 className={styles.facade_title}>Дизайн-код фасада</h3>
-            <DownloadButton type="primary" name={facade.name} link={facade.link} />
-        </div>
-    );
-}
diff --git a/shared/UI/DownloadButton/DownloadButton.module.css b/features/Facade/DownloadButton/DownloadButton.module.css
similarity index 100%
rename from shared/UI/DownloadButton/DownloadButton.module.css
rename to features/Facade/DownloadButton/DownloadButton.module.css
diff --git a/shared/UI/DownloadButton/DownloadButton.tsx b/features/Facade/DownloadButton/DownloadButton.tsx
similarity index 84%
rename from shared/UI/DownloadButton/DownloadButton.tsx
rename to features/Facade/DownloadButton/DownloadButton.tsx
index a2f18080..59fffc81 100644
--- a/shared/UI/DownloadButton/DownloadButton.tsx
+++ b/features/Facade/DownloadButton/DownloadButton.tsx
@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import DownloadIcon from 'shared/UI/Icons/DownloadIcon';
+import { Icon, IconType } from 'ekb';
 import styles from './DownloadButton.module.css';
 
 type Props = {
@@ -22,7 +22,7 @@ export function DownloadButton({ type, name, link }: Props) {
             rel="noreferrer"
         >
             <div className={styles.file_name}>
-                <DownloadIcon color={COLORS[type]} />
+                <Icon type={IconType.Download} color={COLORS[type]} />
                 <p>{name}</p>
             </div>
         </a>
diff --git a/features/Facade/Filter/FacadeFilter.tsx b/features/Facade/FacadeFilter.tsx
similarity index 100%
rename from features/Facade/Filter/FacadeFilter.tsx
rename to features/Facade/FacadeFilter.tsx
diff --git a/features/Facade/FacadeSource.tsx b/features/Facade/FacadeSource.tsx
index 33320348..bda64fc9 100644
--- a/features/Facade/FacadeSource.tsx
+++ b/features/Facade/FacadeSource.tsx
@@ -2,12 +2,11 @@ import { useEffect } from 'react';
 import { useMap } from 'react-map-gl';
 import { useSelector } from 'react-redux';
 import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
-import { BUILDING_LAYER_ID } from 'constants/map';
-import { DEFAULT_BULDING_COLOR_NORMAL } from 'constants/colors';
 import { activeFilterSelector } from 'state/features/selectors';
 import { FilterType } from 'types/Filters.types';
 import facades from 'public/ekb-facades.json';
 import useMapObjectState from 'features/Map/helpers/useMapObjectState';
+import { setBuildingStyleByPropertyValues } from 'features/Map/helpers/setBuildingStyle';
 
 const FACADES_IDS = Object.keys(facades);
 
@@ -17,30 +16,14 @@ function FacadeStyles() {
     useEffect(() => {
         const map = ekbMap?.current?.getMap?.();
 
-        map.setStyle({
-            ...map?.getStyle(),
-            layers: map?.getStyle().layers.map((layer) => {
-                if (layer.id === BUILDING_LAYER_ID) {
-                    return {
-                        ...layer,
-                        paint: {
-                            // @ts-ignore
-                            ...layer.paint,
-                            'fill-extrusion-color': [
-                                'match',
-                                ['get', 'osm:id'],
-                                ['literal'].concat(FACADES_IDS),
-                                getLayerStyle<string>({
-                                    initial: 'rgba(129, 255, 0, 0.75)',
-                                    hover: 'rgba(129, 255, 0, 0.90)',
-                                    active: 'rgba(129, 255, 0, 1)',
-                                }),
-                                DEFAULT_BULDING_COLOR_NORMAL,
-                            ],
-                        },
-                    };
-                }
-                return layer;
+        setBuildingStyleByPropertyValues({
+            map,
+            property: 'osm:id',
+            values: FACADES_IDS,
+            color: getLayerStyle<string>({
+                initial: 'rgba(129, 255, 0, 0.75)',
+                hover: 'rgba(129, 255, 0, 0.90)',
+                active: 'rgba(129, 255, 0, 1)',
             }),
         });
     }, [ekbMap]);
diff --git a/features/FeedbackButton/FeedbackButton.tsx b/features/FeedbackButton/FeedbackButton.tsx
index 750d4eb8..3e826149 100644
--- a/features/FeedbackButton/FeedbackButton.tsx
+++ b/features/FeedbackButton/FeedbackButton.tsx
@@ -1,6 +1,4 @@
-import { Button, ButtonSize, ButtonType } from 'ekb';
-import { Icon } from 'shared/UI/Icons';
-import { IconType } from 'shared/UI/Icons/Icons.types';
+import { Button, ButtonSize, ButtonType, Icon, IconType } from 'ekb';
 
 const getEditObjectLink = (address: string) =>
     `https://tally.so#tally-open=w2BoVe&tally-width=650&tally-overlay=1&tally-emoji-animation=none&address=${address}`;
@@ -18,7 +16,7 @@ export function FeedbackButton({ address }: Props) {
             type={ButtonType.DEFAULT}
             size={ButtonSize.MEDIUM}
             href={href}
-            prefix={<Icon color="currentColor" type={IconType.Edit} />}
+            prefix={<Icon type={IconType.Edit} />}
         >
             Дополнить или поправить
         </Button>
diff --git a/components/Filters/Filters.tsx b/features/Filters/Filters.tsx
similarity index 54%
rename from components/Filters/Filters.tsx
rename to features/Filters/Filters.tsx
index 854f1374..98cc92a5 100644
--- a/components/Filters/Filters.tsx
+++ b/features/Filters/Filters.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { Accordion, AccordionItem, Link, LinkSize } from 'ekb';
+import { MapFilter } from 'features/Filters/MapFilter';
 import { FilterConfigItem, FilterType } from 'types/Filters.types';
 
 interface Props {
@@ -36,24 +37,23 @@ export function Filters({ filters, activeFilter, onToggleClick }: Props) {
                             horizontalGap={16}
                             verticalGap={16}
                         >
-                            {component && (
-                                <>
-                                    {isActive ? component : null}
-                                    {!isVerified && (
-                                        <Notice>
-                                            Данные берутся из&nbsp;публичных источников
-                                            и&nbsp;содержат неточности.{' '}
-                                            <Link
-                                                size={LinkSize.SMALL}
-                                                href="https://tally.so#tally-open=wLzxEG&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
-                                            >
-                                                Оставьте&nbsp;фидбек
-                                            </Link>
-                                            &nbsp;— помогите улучшить карту.
-                                        </Notice>
-                                    )}
-                                </>
-                            )}
+                            <>
+                                {isActive && component ? component : null}
+                                {isActive ? <MapFilter filterType={type} /> : null}
+                                {!isVerified && component && (
+                                    <Notice>
+                                        Данные берутся из&nbsp;публичных источников и&nbsp;содержат
+                                        неточности.{' '}
+                                        <Link
+                                            size={LinkSize.SMALL}
+                                            href="https://tally.so#tally-open=wLzxEG&tally-width=650&tally-overlay=1&tally-emoji-animation=none"
+                                        >
+                                            Оставьте&nbsp;фидбек
+                                        </Link>
+                                        &nbsp;— помогите улучшить карту.
+                                    </Notice>
+                                )}
+                            </>
                         </AccordionItem>
                     );
                 },
diff --git a/features/Filters/LayerFilter.tsx b/features/Filters/LayerFilter.tsx
new file mode 100644
index 00000000..bca45920
--- /dev/null
+++ b/features/Filters/LayerFilter.tsx
@@ -0,0 +1,38 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { FilterGrid, IFilterGridItem } from 'components/Filters/FilterGrid';
+import { updateFilterParams } from 'state/features/dataLayers';
+
+interface Props {
+    filterType: string;
+    items?: IFilterGridItem[];
+    selectedByDefault?: string[];
+    filterItemKey?: string;
+}
+
+export function LayerFilter({
+    filterType,
+    items,
+    selectedByDefault = items.map((item) => item.type),
+    filterItemKey,
+}: Props) {
+    const dispatch = useDispatch();
+
+    const onChange = useCallback(
+        (selected) => {
+            dispatch(
+                updateFilterParams({
+                    activeFilter: filterType,
+                    activeFilterParams: {
+                        [filterType]: {
+                            [filterItemKey]: selected,
+                        },
+                    },
+                }),
+            );
+        },
+        [dispatch, filterItemKey, filterType],
+    );
+
+    return <FilterGrid items={items} selectedByDefault={selectedByDefault} onChange={onChange} />;
+}
diff --git a/features/Filters/MapFilter.tsx b/features/Filters/MapFilter.tsx
new file mode 100644
index 00000000..7fdb15c3
--- /dev/null
+++ b/features/Filters/MapFilter.tsx
@@ -0,0 +1,54 @@
+import React, { useEffect, useState } from 'react';
+import { FeatureCollection } from 'geojson';
+import { LayerFilter } from 'features/Filters/LayerFilter';
+import { state } from 'state/config';
+import { groupByProperty } from 'features/Map/helpers/groupByProperty';
+import { FilterLoader } from 'components/Filters/FilterLoader';
+import { fetchAPI } from 'shared/helpers/fetchApi';
+
+export function MapFilter({
+    filterType,
+    filterItemKey = filterType,
+}: {
+    filterType: string;
+    filterItemKey?: string;
+}) {
+    const [data, setData] = useState<FeatureCollection>(null);
+    const filter = state.filters[filterItemKey];
+    const source = state.sources[filter?.source];
+
+    useEffect(() => {
+        if (source?.path) {
+            fetchAPI(source.path).then(setData);
+        }
+    }, [source?.path, filter?.type]);
+
+    if (!filter?.type || !source) {
+        return null;
+    }
+
+    if (!data) {
+        return <FilterLoader />;
+    }
+
+    switch (filter.type) {
+        case 'checkboxes': {
+            const items = groupByProperty(data as FeatureCollection, filter.property).map(
+                (item) => ({
+                    type: item.type,
+                    subTitle: item.count,
+                    color: source.properties[filter.property].values?.[item.type]?.color,
+                    description:
+                        source.properties[filter.property].values?.[item.type]?.description,
+                }),
+            );
+
+            return (
+                <LayerFilter items={items} filterType={filterType} filterItemKey={filterItemKey} />
+            );
+        }
+
+        default:
+            return null;
+    }
+}
diff --git a/features/HouseAge/HouseAgeFilter.tsx b/features/HouseAge/HouseAgeFilter.tsx
deleted file mode 100644
index 86bd137d..00000000
--- a/features/HouseAge/HouseAgeFilter.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import { MinMax } from 'ekb';
-import { houseBase } from 'features/Buildings/houseBase';
-import { AGE_FILTERS_DATA, HouseSourceType } from 'features/Buildings/Houses.constants';
-import { setFilterParams } from 'state/features/dataLayers';
-import { HouseBaseFilter } from '../Buildings/Filter/HouseBaseFilter';
-
-export const EKATERINBURG_FOUNDATION_YEAR = 1723;
-
-export const CURRENT_YEAR = new Date().getFullYear();
-
-export function HouseAgeFilter() {
-    const dispatch = useDispatch();
-
-    const getHouses = useCallback(
-        async (range: MinMax) => {
-            dispatch(setFilterParams({ activeFilterParams: range }));
-        },
-        [dispatch],
-    );
-
-    const getHistogramData = useCallback(
-        async () =>
-            houseBase.getFilterValues(AGE_FILTERS_DATA, HouseSourceType.Year).then((values) =>
-                AGE_FILTERS_DATA.map((ageItemData, idx) => ({
-                    ...ageItemData,
-                    value: values[idx],
-                })),
-            ),
-        [],
-    );
-
-    return (
-        <HouseBaseFilter
-            defaultMin={EKATERINBURG_FOUNDATION_YEAR}
-            defaultMax={CURRENT_YEAR}
-            onChangeRequest={getHouses}
-            getHistogramData={getHistogramData}
-        />
-    );
-}
diff --git a/features/HouseFloor/HouseFloorFilter.tsx b/features/HouseFloor/HouseFloorFilter.tsx
deleted file mode 100644
index 521979cd..00000000
--- a/features/HouseFloor/HouseFloorFilter.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import { MinMax } from 'ekb';
-import { houseBase } from 'features/Buildings/houseBase';
-import { setFilterParams } from 'state/features/dataLayers';
-
-import { FLOOR_FILTERS_DATA, HouseSourceType } from 'features/Buildings/Houses.constants';
-import { HouseBaseFilter } from '../Buildings/Filter/HouseBaseFilter';
-
-export const MIN_FLOOR = 1;
-export const MAX_FLOOR = 52;
-
-export function HouseFloorFilter() {
-    const dispatch = useDispatch();
-
-    const getHouses = useCallback(
-        async (range: MinMax) => {
-            dispatch(setFilterParams({ activeFilterParams: range }));
-        },
-        [dispatch],
-    );
-
-    const getHistogramData = useCallback(
-        async () =>
-            houseBase.getFilterValues(FLOOR_FILTERS_DATA, HouseSourceType.Floors).then((values) =>
-                FLOOR_FILTERS_DATA.map((floorItemData, idx) => ({
-                    ...floorItemData,
-                    value: values[idx],
-                })),
-            ),
-        [],
-    );
-
-    return (
-        <HouseBaseFilter
-            defaultMin={MIN_FLOOR}
-            defaultMax={MAX_FLOOR}
-            onChangeRequest={getHouses}
-            getHistogramData={getHistogramData}
-        />
-    );
-}
diff --git a/features/HouseWearTear/HealthProgress/HealthProgress.tsx b/features/HouseWearTear/HealthProgress/HealthProgress.tsx
index a0891058..821c8261 100644
--- a/features/HouseWearTear/HealthProgress/HealthProgress.tsx
+++ b/features/HouseWearTear/HealthProgress/HealthProgress.tsx
@@ -1,19 +1,23 @@
-import { useMemo } from 'react';
-import BrokenHeart from 'shared/UI/Icons/BrokenHeart';
-import Heart from 'shared/UI/Icons/Heart';
-import { WEAR_TEAR_FILTERS_DATA } from 'features/Buildings/Houses.constants';
+import { Icon, IconType } from 'ekb';
+import { state } from 'state/config';
 import styles from './HealthProgress.module.css';
 
 type Props = {
-    percent: number;
+    percent?: number;
     isEmergency: boolean;
 };
 
 function HealthProgress({ percent, isEmergency }: Props) {
-    const healthColor = useMemo(
-        () => WEAR_TEAR_FILTERS_DATA.find(({ from, to }) => percent >= from && percent <= to).color,
-        [percent],
-    );
+    if (!percent) return null;
+
+    // @ts-ignore
+    const healthColor = state.sources['building-tile'].properties['building:health']?.values?.find(
+        ({ from, to }) => percent >= from && percent <= to,
+    ).color;
+
+    if (!healthColor) {
+        return null;
+    }
 
     return (
         <div className={styles.health_progress__track}>
@@ -26,9 +30,9 @@ function HealthProgress({ percent, isEmergency }: Props) {
             >
                 <div className={styles.health_progressbar__icon}>
                     {isEmergency ? (
-                        <BrokenHeart color={healthColor} />
+                        <Icon type={IconType.BrokenHeart} color={healthColor} />
                     ) : (
-                        <Heart color={healthColor} />
+                        <Icon type={IconType.Heart} color={healthColor} />
                     )}
                 </div>
             </div>
diff --git a/features/HouseWearTear/HouseWearTearFilter.tsx b/features/HouseWearTear/HouseWearTearFilter.tsx
deleted file mode 100644
index 6895eca2..00000000
--- a/features/HouseWearTear/HouseWearTearFilter.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { useCallback } from 'react';
-import { useDispatch } from 'react-redux';
-import { MinMax } from 'ekb';
-import { HouseBaseFilter } from 'features/Buildings/Filter/HouseBaseFilter';
-import { houseBase } from 'features/Buildings/houseBase';
-import { HouseSourceType, WEAR_TEAR_FILTERS_DATA } from 'features/Buildings/Houses.constants';
-import { setFilterParams } from 'state/features/dataLayers';
-
-export function HouseWearTearFilter() {
-    const dispatch = useDispatch();
-
-    const getHouses = useCallback(
-        async (range: MinMax) => {
-            dispatch(setFilterParams({ activeFilterParams: range }));
-        },
-        [dispatch],
-    );
-
-    const getHistogramData = useCallback(
-        async () =>
-            houseBase
-                .getFilterValues(WEAR_TEAR_FILTERS_DATA, HouseSourceType.WearAndTear)
-                .then((values) =>
-                    WEAR_TEAR_FILTERS_DATA.map((floorItemData, idx) => ({
-                        ...floorItemData,
-                        value: values[idx],
-                    })),
-                ),
-        [],
-    );
-
-    return (
-        <HouseBaseFilter
-            defaultMin={0}
-            defaultMax={100}
-            units="%"
-            onChangeRequest={getHouses}
-            getHistogramData={getHistogramData}
-        />
-    );
-}
diff --git a/features/Lines/CardContent/CardContent.tsx b/features/Lines/CardContent/CardContent.tsx
deleted file mode 100644
index 96e4e548..00000000
--- a/features/Lines/CardContent/CardContent.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { Link, LinkSize } from 'ekb';
-import { Header } from 'components/Card/components/Header/Header';
-import { Section } from 'components/Card/components/Section/Section';
-import styles from 'styles/CardContent.module.css';
-import { LineObject } from '../lineType';
-
-type TLinesCardContentProps = {
-    placemark?: LineObject;
-};
-
-export function LinesCardContent({ placemark }: TLinesCardContentProps) {
-    if (!placemark) return null;
-
-    return (
-        <div className={styles.popup}>
-            <Header
-                coordinates={placemark?.geometry.coordinates}
-                title={placemark.properties.title || placemark.properties.description}
-            />
-            {placemark.properties.description?.startsWith('http') && (
-                <Section>
-                    <Link href={placemark.properties.description} size={LinkSize.SMALL}>
-                        Подробнее об объекте
-                    </Link>
-                </Section>
-            )}
-        </div>
-    );
-}
diff --git a/features/Lines/Filter/LinesFilter.state.ts b/features/Lines/Filter/LinesFilter.state.ts
deleted file mode 100644
index 0508d6ad..00000000
--- a/features/Lines/Filter/LinesFilter.state.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { LineType } from '../lineType';
-import { LinesState, LinesAction } from './LinesFilter.types';
-
-export function linesReducer(state: LinesState, action: LinesAction) {
-    switch (action.type) {
-        case 'toggle':
-            return { ...state, [action.lineType]: !state[action.lineType] };
-        default:
-            return state;
-    }
-}
-
-export const linesInitalState = Object.values(LineType).reduce((acc, type) => {
-    acc[type] = true;
-
-    return acc;
-}, {} as LinesState);
diff --git a/features/Lines/Filter/LinesFilter.tsx b/features/Lines/Filter/LinesFilter.tsx
deleted file mode 100644
index 47a780e6..00000000
--- a/features/Lines/Filter/LinesFilter.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import { useDispatch } from 'react-redux';
-import { Checkbox, ListGrid, ListGridItem } from 'ekb';
-import { setFilter } from 'state/features/dataLayers';
-import { FilterType } from 'types/Filters.types';
-import { lines } from 'features/Lines/lines';
-import { FilterLoader } from 'components/Filters/FilterLoader';
-import { LineType } from '../lineType';
-import { LINES_CONFIG } from '../Lines.constants';
-import { linesInitalState, linesReducer } from './LinesFilter.state';
-
-type LinesCountEntries = [LineType, number][];
-
-export function LinesFilter() {
-    const dispatch = useDispatch();
-    const [linesState, dispatchLines] = useReducer(linesReducer, linesInitalState);
-    const [linesCount, setLinesCount] = useState<LinesCountEntries>(null);
-
-    useEffect(() => {
-        lines.getFilters().then((linesFilters: LinesCountEntries) => {
-            const sortedLinesCount = linesFilters.sort(([, countA], [, countB]) => countB - countA);
-
-            setLinesCount(sortedLinesCount);
-        });
-    }, []);
-
-    useEffect(() => {
-        dispatch(
-            setFilter({
-                activeFilter: FilterType.Line,
-                activeFilterParams: linesState,
-            }),
-        );
-    }, [dispatch, linesState]);
-
-    const onLinesChange = useCallback(
-        (lineType: LineType) => dispatchLines({ type: 'toggle', lineType }),
-        [],
-    );
-
-    if (!linesCount) return <FilterLoader />;
-
-    return (
-        <ListGrid>
-            {linesCount.map(([type, count]) => (
-                <ListGridItem
-                    key={`filter-${type}-line`}
-                    subTitle={count}
-                    description={LINES_CONFIG[type].description}
-                    prefix={
-                        <Checkbox
-                            isSelected={linesState[type]}
-                            activeColor={LINES_CONFIG[type].color}
-                            toggle={() => onLinesChange(type as LineType)}
-                        />
-                    }
-                >
-                    {type}
-                </ListGridItem>
-            ))}
-        </ListGrid>
-    );
-}
diff --git a/features/Lines/Filter/LinesFilter.types.ts b/features/Lines/Filter/LinesFilter.types.ts
deleted file mode 100644
index 54877233..00000000
--- a/features/Lines/Filter/LinesFilter.types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { LineType } from '../lineType';
-
-export interface LinesAction {
-    type: 'toggle';
-    lineType: LineType;
-}
-
-export type LinesState = Record<LineType, boolean>;
diff --git a/features/Lines/Lines.constants.ts b/features/Lines/Lines.constants.ts
deleted file mode 100644
index 82e96aa2..00000000
--- a/features/Lines/Lines.constants.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { LineType } from './lineType';
-
-export const LINES_CONFIG = {
-    [LineType.RedLine]: {
-        color: '#e31e24',
-        description: 'Маршрут по\u00A0историческому центру города',
-    },
-    [LineType.BlueLine]: {
-        color: '#189eda',
-        description: 'Маршрут по\u00A0местам, связанным с\u00A0царской семьей',
-    },
-    [LineType.PurpleLine]: {
-        color: '#9747ff',
-        description: 'Арт-объекты фестиваля уличного искусства «Стенограффия»',
-    },
-};
diff --git a/features/Lines/LinesCardContent.tsx b/features/Lines/LinesCardContent.tsx
new file mode 100644
index 00000000..5c28e2d6
--- /dev/null
+++ b/features/Lines/LinesCardContent.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { Card, Link, LinkSize } from 'ekb';
+import { CardActions } from 'components/Card/components/CardActions';
+
+export interface LineObject {
+    properties: {
+        id: number;
+        title?: string;
+        description: null | string;
+    };
+    geometry: {
+        id: string;
+        coordinates: [lat: number, lng: number];
+        type?: string;
+    };
+}
+
+type TLinesCardContentProps = {
+    placemark?: LineObject;
+};
+
+export function LinesCardContent({ placemark }: TLinesCardContentProps) {
+    if (!placemark) return null;
+
+    return (
+        <Card
+            actions={<CardActions coordinates={placemark?.geometry.coordinates} />}
+            title={placemark.properties.title || placemark.properties.description}
+            blocks={[
+                ...(placemark.properties.description?.startsWith('http')
+                    ? [
+                          {
+                              type: 'value' as const,
+                              value: (
+                                  <Link
+                                      href={placemark.properties.description}
+                                      size={LinkSize.SMALL}
+                                  >
+                                      Подробнее об объекте
+                                  </Link>
+                              ),
+                          },
+                      ]
+                    : undefined),
+            ]}
+        />
+    );
+}
diff --git a/features/Lines/LinesSource.tsx b/features/Lines/LinesSource.tsx
deleted file mode 100644
index f82e8047..00000000
--- a/features/Lines/LinesSource.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import React from 'react';
-import { Source, Layer } from 'react-map-gl';
-import type { CircleLayer, LineLayer } from 'react-map-gl';
-import { useSelector } from 'react-redux';
-import { activeFilterSelector, activeFilterParamsSelector } from 'state/features/selectors';
-import { FilterType } from 'types/Filters.types';
-import { LINES_CONFIG } from 'features/Lines/Lines.constants';
-import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
-import useMapObjectState from 'features/Map/helpers/useMapObjectState';
-import { useOpenMapItem } from 'features/Map/helpers/useOpenMapItem';
-import { MapItemType } from 'types/Content.types';
-
-const LINE_POINTS_LAYER_ID = 'ekb-points-layer';
-
-export function LinesSource() {
-    const activeFilter = useSelector(activeFilterSelector);
-    const activeFilterParams = useSelector(activeFilterParamsSelector);
-
-    useMapObjectState(LINE_POINTS_LAYER_ID);
-
-    useOpenMapItem(LINE_POINTS_LAYER_ID, MapItemType.LinePoint);
-
-    if (activeFilter !== FilterType.Line || !activeFilterParams) {
-        return null;
-    }
-
-    const activeItems = Object.entries(activeFilterParams)
-        .filter(([, value]) => value)
-        .map(([type]) => [type, LINES_CONFIG[type]]);
-
-    const colors = activeItems.map(([type, { color }]) => [['==', ['get', 'type'], type], color]);
-
-    const strokeColors = activeItems.map(([type]) => [['==', ['get', 'type'], type], '#000']);
-
-    const pointLayerStyle: CircleLayer = {
-        id: LINE_POINTS_LAYER_ID,
-        type: 'circle',
-        source: 'ekb-points-source',
-        paint: {
-            'circle-radius': getLayerStyle<number>({ initial: 8, hover: 10, active: 12 }),
-            // @ts-ignore
-            'circle-color': ['case'].concat(...colors).concat(['rgba(0, 0, 0, 0)']),
-            'circle-stroke-width': 1,
-            // @ts-ignore
-            'circle-stroke-color': ['case'].concat(...strokeColors).concat(['rgba(0, 0, 0, 0)']),
-        },
-    };
-
-    const linesLayerStyle: LineLayer = {
-        id: 'lines',
-        type: 'line',
-        source: 'ekb-lines-source',
-        paint: {
-            // @ts-ignore
-            'line-color': ['case'].concat(...colors).concat(['rgba(0, 0, 0, 0)']),
-            'line-width': 3,
-        },
-    };
-
-    return (
-        <>
-            <Source id="ekb-lines-source" type="geojson" data="/ekb-color-lines.json">
-                <Layer {...linesLayerStyle} />
-            </Source>
-            <Source id="ekb-points-source" type="geojson" data="/ekb-color-points.json" generateId>
-                <Layer {...pointLayerStyle} />
-            </Source>
-        </>
-    );
-}
diff --git a/features/Lines/lineType.ts b/features/Lines/lineType.ts
deleted file mode 100644
index eb5d96ad..00000000
--- a/features/Lines/lineType.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export enum LineType {
-    RedLine = 'Красная линия',
-    BlueLine = 'Синяя линия',
-    PurpleLine = 'Фиолетовая линия',
-}
-
-export interface LineObject {
-    properties: {
-        id: number;
-        title?: string;
-        description: null | string;
-    };
-    geometry: {
-        id: string;
-        coordinates: [lat: number, lng: number];
-        type?: string;
-    };
-}
diff --git a/features/Lines/lines.ts b/features/Lines/lines.ts
index 4e97720c..6767c0f5 100644
--- a/features/Lines/lines.ts
+++ b/features/Lines/lines.ts
@@ -1,16 +1,7 @@
-import groupBy from 'lodash/groupBy';
 import data from 'public/ekb-color-points.json';
 
-const linesByType = Object.entries(groupBy(data.features, (item) => item.properties.type))
-    .map(([type, items]) => [type, items.length])
-    .sort((a, b) => (b[1] as number) - (a[1] as number));
-
 export const lines = {
     async getObject(id: string): Promise<object> {
         return data.features.find((f) => String(f.properties.id) === id);
     },
-
-    async getFilters() {
-        return Promise.resolve(linesByType);
-    },
 };
diff --git a/features/Map/ClickableLayer.tsx b/features/Map/ClickableLayer.tsx
new file mode 100644
index 00000000..eef5c079
--- /dev/null
+++ b/features/Map/ClickableLayer.tsx
@@ -0,0 +1,27 @@
+import { Layer } from 'react-map-gl';
+import { IVisualisationLayer } from 'state/config';
+import { MapItemType } from 'types/Content.types';
+import { getLayerProps } from './helpers/getLayerProps';
+import useMapObjectState from './helpers/useMapObjectState';
+import { useOpenMapItem } from './helpers/useOpenMapItem';
+import { MarkersLayer } from './MarkersLayer';
+
+function ClickableLayer({ id }: { id: string }) {
+    useMapObjectState(id);
+    useOpenMapItem(id, id as MapItemType);
+
+    return null;
+}
+
+export function MapLayer(layerProps: IVisualisationLayer) {
+    return (
+        <>
+            {layerProps.openable && <ClickableLayer id={layerProps.id} />}
+            {layerProps.type === 'marker-image' ? (
+                <MarkersLayer layer={layerProps} />
+            ) : (
+                <Layer {...getLayerProps(layerProps)} />
+            )}
+        </>
+    );
+}
diff --git a/features/Map/Map.tsx b/features/Map/Map.tsx
index 965c0de3..0ad8188f 100644
--- a/features/Map/Map.tsx
+++ b/features/Map/Map.tsx
@@ -7,15 +7,15 @@ import MapGl from 'react-map-gl';
 import { MAX_ZOOM, MIN_ZOOM, CENTER_COORDS } from 'constants/map';
 
 import { BuildingSource } from 'features/Buildings/BuildingSource';
-import { DesignCodeSource } from 'features/DesignCode/DesignCodeSource';
 import { DtpSource } from 'features/DTP/DtpSource';
-import { LinesSource } from 'features/Lines/LinesSource';
 import { OknSource } from 'features/OKN/OknSource';
-import { QuarterSource } from 'features/Quarter/QuarterSource';
 import { FacadeSource } from 'features/Facade/FacadeSource';
-import { MapContext } from './providers/MapProvider';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
+import { MapSource } from 'features/Map/MapSource';
+import { state } from 'state/config';
+import { FilterType } from 'types/Filters.types';
+import { MapContext } from './providers/MapProvider';
 
 function MapLayers() {
     return (
@@ -23,9 +23,9 @@ function MapLayers() {
             <BuildingSource />
             <OknSource />
             <DtpSource />
-            <LinesSource />
-            <DesignCodeSource />
-            <QuarterSource />
+            <MapSource layer={state.layers.ekbLines} filterType={FilterType.Line} />
+            <MapSource layer={state.layers.ekbDesignCode} filterType={FilterType.DesignCode} />
+            <MapSource layer={state.layers.ekbQuarter} filterType={FilterType.Quarter} />
             <FacadeSource />
         </>
     );
diff --git a/features/Map/MapSource.tsx b/features/Map/MapSource.tsx
new file mode 100644
index 00000000..d116035d
--- /dev/null
+++ b/features/Map/MapSource.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { Source, useMap } from 'react-map-gl';
+import { useSelector } from 'react-redux';
+import { activeFilterParamsSelector, activeFilterSelector } from 'state/features/selectors';
+import { FilterType } from 'types/Filters.types';
+import { ILayer, state } from 'state/config';
+import { MapLayer } from 'features/Map/ClickableLayer';
+
+export function MapSource({ layer, filterType }: { layer: ILayer; filterType: FilterType }) {
+    const activeFilter = useSelector(activeFilterSelector);
+    const activeFilterParams = useSelector(activeFilterParamsSelector);
+
+    const { ekbMap } = useMap();
+
+    useEffect(() => {
+        const map = ekbMap?.getMap?.();
+
+        if (activeFilter !== filterType) {
+            return;
+        }
+
+        if (map) {
+            layer.filters?.forEach((filterId) => {
+                const filter = state.filters[filterId];
+                filter.filterVisualisationLayers.forEach((vlId) => {
+                    if (!map.getLayer(vlId)) {
+                        return;
+                    }
+
+                    const v = state.visualisationLayers[vlId];
+                    const values = activeFilterParams?.[filterType]?.[filterId];
+                    if (values) {
+                        map.setFilter(v.id, [
+                            'in',
+                            ['get', filter.property],
+                            ['literal', activeFilterParams?.[filterType]?.[filterId]],
+                        ]);
+                    }
+                });
+            });
+        }
+    }, [activeFilter, activeFilterParams, ekbMap, filterType, layer, layer.filters, layer.id]);
+
+    if (activeFilter !== filterType) {
+        return null;
+    }
+
+    return (
+        <>
+            {layer.visualisationLayers.map((visualId) => (
+                <Source
+                    key={visualId}
+                    id={state.visualisationLayers[visualId].source}
+                    type="geojson"
+                    /// Todo: data as json
+                    data={state.sources[state.visualisationLayers[visualId].source].path}
+                    generateId
+                >
+                    <MapLayer {...state.visualisationLayers[visualId]} />
+                </Source>
+            ))}
+        </>
+    );
+}
diff --git a/features/DesignCode/DesignCodeMarker.module.css b/features/Map/MarkersLayer.module.css
similarity index 100%
rename from features/DesignCode/DesignCodeMarker.module.css
rename to features/Map/MarkersLayer.module.css
diff --git a/features/Map/MarkersLayer.tsx b/features/Map/MarkersLayer.tsx
new file mode 100644
index 00000000..ae70de18
--- /dev/null
+++ b/features/Map/MarkersLayer.tsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Layer, Marker, CircleLayer } from 'react-map-gl';
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { FeatureCollection } from 'geojson';
+import { DESIGN_MAP_HOST } from 'features/DesignCode/designCode';
+import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
+import { activeFilterParamsSelector, activeFilterSelector } from 'state/features/selectors';
+import { FilterLoader } from 'components/Filters/FilterLoader';
+import { fetchAPI } from 'shared/helpers/fetchApi';
+import { IVisualisationLayer, state } from 'state/config';
+import { usePopup } from './providers/usePopup';
+import styles from './MarkersLayer.module.css';
+
+export function MarkersLayer({ layer }: { layer: IVisualisationLayer }) {
+    const { popupId } = usePopup();
+    const [items, setData] = useState<FeatureCollection<any>>(null);
+    const activeFilter = useSelector(activeFilterSelector);
+    const activeFilterParams = useSelector(activeFilterParamsSelector);
+    const properties = state.sources['ekb-designcode-source'].properties.type.values;
+
+    const markers = useMemo(() => {
+        const filter = state.filters?.[activeFilter];
+        const values = activeFilterParams?.[activeFilter]?.[activeFilter];
+
+        if (filter && values) {
+            return items?.features.filter((f) => values.includes(f.properties[filter.property]));
+        }
+
+        return items?.features;
+    }, [activeFilter, activeFilterParams, items?.features]);
+
+    useEffect(() => {
+        if (layer?.source) {
+            const source = state.sources[layer.source];
+            fetchAPI(source.path).then(setData);
+        }
+    }, [layer?.source, layer?.property]);
+
+    if (!layer?.type) {
+        return null;
+    }
+
+    if (!items) {
+        return <FilterLoader />;
+    }
+
+    const fakeClickableMarkersLayerStyle: CircleLayer = {
+        id: layer.id,
+        source: layer.source,
+        type: 'circle',
+        paint: {
+            'circle-opacity': 0,
+            'circle-radius': getLayerStyle<number>({
+                initial: 22,
+                hover: 22 * 1.2,
+                active: 22 * 1.3,
+            }),
+        },
+    };
+
+    return (
+        <>
+            <Layer {...fakeClickableMarkersLayerStyle} />
+            {markers.map((feature) => (
+                <Marker
+                    key={feature.properties.id}
+                    latitude={feature.geometry.coordinates[1]}
+                    longitude={feature.geometry.coordinates[0]}
+                >
+                    <img
+                        className={classNames(styles.marker, {
+                            [styles.marker_open]: popupId === feature.properties.id,
+                        })}
+                        style={{ color: properties[feature.properties.type]?.color }}
+                        width={40}
+                        height={40}
+                        src={DESIGN_MAP_HOST + feature.properties.preview}
+                        alt={feature.properties.description}
+                    />
+                </Marker>
+            ))}
+        </>
+    );
+}
diff --git a/features/Map/helpers/getLayerProps.ts b/features/Map/helpers/getLayerProps.ts
new file mode 100644
index 00000000..e681996f
--- /dev/null
+++ b/features/Map/helpers/getLayerProps.ts
@@ -0,0 +1,51 @@
+import type { CircleLayer, FillLayer, LineLayer } from 'react-map-gl';
+import { IVisualisationLayer, state } from 'state/config';
+
+export function getLayerProps(layer: IVisualisationLayer): CircleLayer | LineLayer | FillLayer {
+    const source = state.sources[layer.source];
+    const property = source.properties?.[layer.property];
+    const values = Object.entries(property?.values || {}) || [];
+
+    const colors = values.map(([value, { color }]) => [
+        ['==', ['get', layer.property], value],
+        color,
+    ]);
+
+    const props = {
+        id: layer.id,
+        type: layer.type,
+        source: layer.source,
+    };
+
+    switch (layer.type) {
+        case 'circle':
+            return {
+                ...props,
+                paint: {
+                    // @ts-ignore
+                    'circle-color': ['case'].concat(...colors).concat(['rgba(0, 0, 0, 0)']),
+                    'circle-stroke-color': '#000',
+                    ...layer.paint,
+                },
+            };
+        case 'fill':
+            // @ts-ignore
+            return {
+                ...props,
+                paint: {
+                    ...layer.paint,
+                },
+            };
+        case 'line':
+            return {
+                ...props,
+                paint: {
+                    // @ts-ignore
+                    'line-color': ['case'].concat(...colors).concat(['rgba(0, 0, 0, 0)']),
+                    ...layer.paint,
+                },
+            };
+    }
+
+    return null;
+}
diff --git a/features/Map/helpers/groupByProperty.tsx b/features/Map/helpers/groupByProperty.tsx
new file mode 100644
index 00000000..a2925e6d
--- /dev/null
+++ b/features/Map/helpers/groupByProperty.tsx
@@ -0,0 +1,8 @@
+import { FeatureCollection } from 'geojson';
+import groupBy from 'lodash/groupBy';
+
+export function groupByProperty(geojson: FeatureCollection, property: string = 'type') {
+    return Object.entries(groupBy(geojson.features, (item) => item.properties[property]))
+        .map(([type, items]) => ({ type, count: items.length }))
+        .sort((a, b) => b.count - a.count);
+}
diff --git a/features/Map/helpers/setBuildingStyle.ts b/features/Map/helpers/setBuildingStyle.ts
new file mode 100644
index 00000000..b06c9061
--- /dev/null
+++ b/features/Map/helpers/setBuildingStyle.ts
@@ -0,0 +1,122 @@
+import {
+    ColorSpecification,
+    DataDrivenPropertyValueSpecification,
+    ExpressionSpecification,
+} from 'maplibre-gl';
+import { getLayerStyle } from './getFeatureState';
+import { colorLuminance } from './colorLuminance';
+
+const BUILDING_LAYER_ID = 'building';
+
+const DEFAULT_BULDING_COLOR_NORMAL = '#0c1021';
+
+interface SetBuildingStyleProps {
+    map: mapboxgl.Map;
+    color: DataDrivenPropertyValueSpecification<ColorSpecification | ExpressionSpecification>;
+    caseCondition?: (string | string[])[];
+    layerProps?: Record<string, any>;
+}
+
+function setBuildingColor({
+    map,
+    color,
+    caseCondition = ['has', '_unknown_'],
+    layerProps,
+}: SetBuildingStyleProps) {
+    map.setStyle({
+        ...map?.getStyle(),
+        layers: map?.getStyle().layers.map((layer: any) => {
+            if (layer.id === BUILDING_LAYER_ID) {
+                return {
+                    ...layer,
+                    ...layerProps,
+                    paint: {
+                        ...layer.paint,
+                        'fill-extrusion-color': [
+                            'case',
+                            caseCondition,
+                            color,
+                            DEFAULT_BULDING_COLOR_NORMAL,
+                        ],
+                        ...layerProps?.paint,
+                    },
+                };
+            }
+            return layer;
+        }),
+    });
+}
+
+export function setBuildingStyleByPropertyValues({ map, property, values, color }) {
+    if (!values.length || !property || !map) {
+        return;
+    }
+
+    map.setStyle({
+        ...map?.getStyle(),
+        layers: map?.getStyle().layers.map((layer) => {
+            if (layer.id === BUILDING_LAYER_ID) {
+                return {
+                    ...layer,
+                    paint: {
+                        // @ts-ignore
+                        ...layer.paint,
+                        'fill-extrusion-color': [
+                            'match',
+                            ['get', property],
+                            ['literal'].concat(values),
+                            color,
+                            DEFAULT_BULDING_COLOR_NORMAL,
+                        ],
+                    },
+                };
+            }
+            return layer;
+        }),
+    });
+}
+
+export function setBuildingRangeStyle({ map, range, field, rangeData }) {
+    if (
+        !(
+            typeof range?.min === 'number' &&
+            typeof range?.max === 'number' &&
+            field &&
+            rangeData &&
+            map?.setStyle &&
+            map?.getStyle
+        )
+    ) {
+        setBuildingColor({ map, color: DEFAULT_BULDING_COLOR_NORMAL });
+        return;
+    }
+
+    const colorsInitial = rangeData
+        .map((item) => {
+            if (item.from >= range.min && item.to <= range.max) {
+                return item;
+            }
+            return { ...item, color: DEFAULT_BULDING_COLOR_NORMAL };
+        })
+        .map((item) => [item.from, item.color]);
+
+    const colorsHover = colorsInitial.map(([from, color]) => [from, colorLuminance(color, 0.4)]);
+    const colorsActive = colorsInitial.map(([from, color]) => [from, colorLuminance(color, 0.55)]);
+
+    const getColor = (style: [number, number][]): ExpressionSpecification => [
+        'interpolate',
+        ['linear'],
+        ['to-number', ['get', field]],
+        ...style.flat(2),
+    ];
+
+    setBuildingColor({
+        map,
+        color: getLayerStyle<ExpressionSpecification>({
+            initial: getColor(colorsInitial),
+            hover: getColor(colorsHover),
+            active: getColor(colorsActive),
+        }),
+        caseCondition: ['has', field],
+    });
+}
diff --git a/features/Map/helpers/useOpenMapItem.tsx b/features/Map/helpers/useOpenMapItem.tsx
index c44eb329..0bf078d3 100644
--- a/features/Map/helpers/useOpenMapItem.tsx
+++ b/features/Map/helpers/useOpenMapItem.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useMap } from 'react-map-gl';
-import { usePopup } from 'features/Map/providers/usePopup';
 import { MapItemType } from 'types/Content.types';
+import { usePopup } from '../providers/usePopup';
 
 export function useOpenMapItem(layerId: string, mapItemType: MapItemType) {
     const ekbMap = useMap();
diff --git a/features/OKN/CardContent/CardContent.module.css b/features/OKN/CardContent/CardContent.module.css
deleted file mode 100644
index 7352beca..00000000
--- a/features/OKN/CardContent/CardContent.module.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.popup {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-}
-
-.popup__content {
-    padding: 16px 8px 16px 16px;
-}
-
-.popup__address {
-    margin: 8px 16px 0 0;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
-    font-size: 16px;
-    color: #9baac3;
-}
-
-.popup__imageLink {
-    display: flex;
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-}
-
-.popup__image {
-    display: block;
-    width: 100%;
-    height: auto;
-    min-height: 100px;
-    background-color: #2e2e2e;
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    object-fit: contain;
-    object-position: top center;
-}
diff --git a/features/OKN/CardContent/CardContent.tsx b/features/OKN/CardContent/CardContent.tsx
deleted file mode 100644
index 1b34ec61..00000000
--- a/features/OKN/CardContent/CardContent.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React, { useMemo } from 'react';
-import { Sources } from 'components/Card/components/Sources/Sources';
-import { ConstructionInfo } from 'components/Card/components/ConstructionInfo/ConstructionInfo';
-import { Header } from 'components/Card/components/Header/Header';
-import { Section } from 'components/Card/components/Section/Section';
-import { FeedbackButton } from 'features/FeedbackButton/FeedbackButton';
-import { SOURCES_BY_TYPE } from 'constants/sources';
-import { SourceType } from 'types/Sources.types';
-import { OknObject } from '../oknObject';
-import { OKNInfo } from './components/OKNInfo/OKNInfo';
-import styles from './CardContent.module.css';
-
-export function OKNCardContent({ placemark }: { placemark: OknObject }) {
-    const { title, description } = useMemo(() => {
-        const indexOfComma = placemark?.properties.name?.indexOf(',') || -1;
-
-        if (indexOfComma === -1) {
-            return { title: placemark?.properties.name };
-        }
-
-        return {
-            title: placemark?.properties.name.slice(0, indexOfComma),
-            description: placemark?.properties.name.slice(indexOfComma + 1),
-        };
-    }, [placemark?.properties.name]);
-
-    return placemark?.properties ? (
-        <div className={styles.popup}>
-            {placemark?.properties.img && (
-                <a
-                    href={placemark?.properties.img.url}
-                    target="_blank"
-                    rel="noreferrer"
-                    className={styles.popup__imageLink}
-                >
-                    <img
-                        key={placemark?.properties.img.title}
-                        src={placemark?.properties.img.url}
-                        width={400}
-                        height={256}
-                        className={styles.popup__image}
-                        alt={placemark?.properties.name}
-                    />
-                </a>
-            )}
-            <div className={styles.popup__content}>
-                <Header
-                    coordinates={placemark?.geometry.coordinates}
-                    title={title}
-                    description={description}
-                />
-                {placemark?.properties.address && (
-                    <address className={styles.popup__address}>
-                        {placemark?.properties.address}
-                    </address>
-                )}
-                {placemark?.properties.date && (
-                    <Section>
-                        <ConstructionInfo date={placemark?.properties.date} />
-                    </Section>
-                )}
-                <Section>
-                    <OKNInfo
-                        number={placemark?.properties.okn_number}
-                        status={placemark?.properties.isExist}
-                    />
-                </Section>
-                <Section>
-                    <Sources sources={[SOURCES_BY_TYPE[SourceType.okn]]} />
-                </Section>
-                {placemark?.properties?.address && (
-                    <Section>
-                        <FeedbackButton address={placemark?.properties?.address} />
-                    </Section>
-                )}
-            </div>
-        </div>
-    ) : null;
-}
diff --git a/features/OKN/CardContent/components/OKNInfo/OKNInfo.tsx b/features/OKN/CardContent/components/OKNInfo/OKNInfo.tsx
index bf835e4a..f5d989f7 100644
--- a/features/OKN/CardContent/components/OKNInfo/OKNInfo.tsx
+++ b/features/OKN/CardContent/components/OKNInfo/OKNInfo.tsx
@@ -2,8 +2,7 @@ import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { Tag } from 'ekb';
 import { Info } from 'components/Card/components/Info/Info';
-import { Icon } from 'shared/UI/Icons';
-import { IconType } from 'shared/UI/Icons/Icons.types';
+import { SvgOknIcon } from 'features/OKN/SvgOknIcon';
 import styles from './OKNInfo.module.css';
 
 export type OKNInfoProps = {
@@ -45,16 +44,9 @@ export function OKNInfo({ number, status }: OKNInfoProps) {
                         [styles.oknInfo__oknLogo_lost]: isLost,
                     })}
                 >
-                    <Icon type={IconType.OKN} />
+                    <SvgOknIcon />
                 </div>
             </div>
-            {/* <div className={styles.oknInfo__file}>
-                <div className={styles.oknInfo__fileNameWrapper}>
-                    <Icon type={IconType.Pdf} color="#c8a563" />
-                    <div className={styles.oknInfo__fileName}></div>
-                </div>
-                <div className={styles.oknInfo__fileSize}>19,6 МБ</div>
-            </div> */}
         </div>
     );
 }
diff --git a/features/OKN/CardContent/index.ts b/features/OKN/CardContent/index.ts
deleted file mode 100644
index 4342f0a8..00000000
--- a/features/OKN/CardContent/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { OKNCardContent } from './CardContent';
diff --git a/features/OKN/Filter/OknFilter.state.ts b/features/OKN/Filter/OknFilter.state.ts
deleted file mode 100644
index 4efdad3f..00000000
--- a/features/OKN/Filter/OknFilter.state.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { OknAreaType, OknObjectSignificanceType } from '../oknConstants';
-
-export interface AreaAction {
-    type: 'toggle';
-    areaType: OknAreaType;
-}
-export interface ObjectsAction {
-    type: 'toggle';
-    objectsType: OknObjectSignificanceType;
-}
-
-export type AreaState = Record<OknAreaType, boolean>;
-export type ObjectsState = Record<OknObjectSignificanceType, boolean>;
-
-export function areaReducer(state: AreaState, action: AreaAction) {
-    switch (action.type) {
-        case 'toggle':
-            return { ...state, [action.areaType]: !state[action.areaType] };
-        default:
-            return state;
-    }
-}
-
-export const areaInitalState = Object.values(OknAreaType).reduce((acc, type) => {
-    acc[type] = false;
-
-    return acc;
-}, {} as AreaState);
-
-export function objectsReducer(state: ObjectsState, action: ObjectsAction) {
-    switch (action.type) {
-        case 'toggle':
-            return { ...state, [action.objectsType]: !state[action.objectsType] };
-        default:
-            return state;
-    }
-}
-
-export const objectsInitalState = Object.values(OknObjectSignificanceType).reduce((acc, type) => {
-    acc[type] = true;
-
-    return acc;
-}, {} as ObjectsState);
diff --git a/features/OKN/Filter/OknFilter.tsx b/features/OKN/Filter/OknFilter.tsx
index b538e073..1c9a7835 100644
--- a/features/OKN/Filter/OknFilter.tsx
+++ b/features/OKN/Filter/OknFilter.tsx
@@ -1,129 +1,34 @@
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { Checkbox, ListGrid, ListGridItem } from 'ekb';
-import { setFilter } from 'state/features/dataLayers';
-import { okn } from 'features/OKN/okn';
-import { FilterLoader } from 'components/Filters/FilterLoader';
-import { Section } from 'components/Card/components/Section/Section';
+import React from 'react';
+import { Divider } from 'ekb';
+import { OKN_ITEMS, ZONES_ITEMS } from 'features/OKN/okn';
 import { FilterType } from 'types/Filters.types';
-import { activeFilterParamsSelector, activeFilterSelector } from 'state/features/selectors';
-import { AREA_CONFIG, OBJECTS_CONFIG } from '../Okn.constants';
-import { OknObjectSignificanceType, OknAreaType } from '../oknConstants';
-import {
-    areaInitalState,
-    areaReducer,
-    objectsInitalState,
-    objectsReducer,
-} from './OknFilter.state';
-
-type ObjectsCountEntries = [OknObjectSignificanceType, number][];
+import { LayerFilter } from 'features/Filters/LayerFilter';
+import { AREA_CONFIG, OBJECTS_CONFIG_COLORS, ZONES_COLORS } from '../Okn.constants';
+
+const objects = OKN_ITEMS.map((item) => ({
+    type: item.type,
+    subTitle: item.count,
+    color: OBJECTS_CONFIG_COLORS[item.type],
+}));
+
+const zones = ZONES_ITEMS.map((item) => ({
+    type: item.type,
+    subTitle: item.count,
+    color: ZONES_COLORS[item.type],
+    description: AREA_CONFIG[item.type].description,
+}));
 
 export function OknFilter() {
-    const dispatch = useDispatch();
-    const activeFilter = useSelector(activeFilterSelector);
-    const activeFilterParams = useSelector(activeFilterParamsSelector);
-    const [areaState, dispatchArea] = useReducer(areaReducer, areaInitalState);
-    const [objectsState, dispatchObjects] = useReducer(objectsReducer, objectsInitalState);
-    const [objectsCount, setObjectsCount] = useState<ObjectsCountEntries>(null);
-    const [areaCount, setAreaCount] = useState<[OknAreaType, number][]>(null);
-
-    useEffect(() => {
-        okn.getObjectsCount().then((objectsCountResult: ObjectsCountEntries) => {
-            const sortedObjectsCount = objectsCountResult.sort(
-                ([, countA], [, countB]) => countB - countA,
-            );
-
-            setObjectsCount(sortedObjectsCount);
-        });
-    }, []);
-
-    useEffect(() => {
-        okn.getZonesCount().then((areaCountResult: [OknAreaType, number][]) => {
-            const sortedObjectsCount = areaCountResult.sort(
-                ([, countA], [, countB]) => countB - countA,
-            );
-
-            setAreaCount(sortedObjectsCount);
-        });
-    }, []);
-
-    const onAreaChange = useCallback(
-        (oknArea: OknAreaType) => dispatchArea({ type: 'toggle', areaType: oknArea }),
-        [],
-    );
-
-    const onObjectsChange = useCallback(
-        (oknObjectType: OknObjectSignificanceType) =>
-            dispatchObjects({ type: 'toggle', objectsType: oknObjectType }),
-        [],
-    );
-
-    useEffect(() => {
-        dispatch(
-            setFilter({
-                activeFilter: FilterType.OKN,
-                activeFilterParams: {
-                    ...Object.entries(areaState).reduce(
-                        (all, [id, value]) => ({ ...all, [id]: { value, type: 'area' } }),
-                        {},
-                    ),
-                    ...Object.entries(objectsState).reduce(
-                        (all, [id, value]) => ({ ...all, [id]: { value, type: 'objects' } }),
-                        {},
-                    ),
-                },
-            }),
-        );
-    }, [dispatch, areaState, objectsState]);
-
-    if (activeFilter !== FilterType.OKN && !activeFilterParams.filter) {
-        return null;
-    }
-
-    if (!(objectsCount && areaCount)) {
-        return <FilterLoader />;
-    }
-
     return (
         <>
-            <ListGrid>
-                {objectsCount?.map(([type, count]) => (
-                    <ListGridItem
-                        key={`filter-okn-${type}`}
-                        subTitle={count}
-                        prefix={
-                            <Checkbox
-                                isSelected={objectsState[type]}
-                                activeColor={OBJECTS_CONFIG[type].color}
-                                toggle={() => onObjectsChange(type)}
-                            />
-                        }
-                    >
-                        {type}
-                    </ListGridItem>
-                ))}
-            </ListGrid>
-
-            <Section>
-                <ListGrid>
-                    {areaCount?.map(([type, count]) => (
-                        <ListGridItem
-                            key={`filter-okn-zone-${type}`}
-                            subTitle={count}
-                            description={AREA_CONFIG[type].description}
-                            prefix={
-                                <Checkbox
-                                    isSelected={areaState[type]}
-                                    activeColor={AREA_CONFIG[type].color}
-                                    toggle={() => onAreaChange(type)}
-                                />
-                            }
-                        >
-                            {type}
-                        </ListGridItem>
-                    ))}
-                </ListGrid>
-            </Section>
+            <LayerFilter filterItemKey="objects" items={objects} filterType={FilterType.OKN} />
+            <Divider />
+            <LayerFilter
+                filterItemKey="zones"
+                items={zones}
+                filterType={FilterType.OKN}
+                selectedByDefault={[]}
+            />
         </>
     );
 }
diff --git a/features/OKN/Okn.constants.ts b/features/OKN/Okn.constants.ts
index e254db9b..78731e48 100644
--- a/features/OKN/Okn.constants.ts
+++ b/features/OKN/Okn.constants.ts
@@ -1,15 +1,9 @@
 import { OknObjectSignificanceType, OknAreaType } from './oknConstants';
 
-export const OBJECTS_CONFIG = {
-    [OknObjectSignificanceType.Federal]: {
-        color: '#e65000',
-    },
-    [OknObjectSignificanceType.Regional]: {
-        color: '#ae00ff',
-    },
-    [OknObjectSignificanceType.Municipal]: {
-        color: '#03a600',
-    },
+export const OBJECTS_CONFIG_COLORS = {
+    [OknObjectSignificanceType.Federal]: '#e65000',
+    [OknObjectSignificanceType.Regional]: '#ae00ff',
+    [OknObjectSignificanceType.Municipal]: '#03a600',
 };
 
 export const AREA_CONFIG = {
@@ -28,3 +22,9 @@ export const AREA_CONFIG = {
             'Временная зона в\u00A0100\u2013250 метров вокруг объекта, у\u00A0которого пока не\u00A0указана зона охраны',
     },
 };
+
+export const ZONES_COLORS = {
+    [OknAreaType.ObjectZone]: '#ff640f',
+    [OknAreaType.SecurityZone]: '#00b4ff',
+    [OknAreaType.ProtectZone]: '#e800b5',
+};
diff --git a/features/OKN/OknCardContent.tsx b/features/OKN/OknCardContent.tsx
new file mode 100644
index 00000000..ea88703e
--- /dev/null
+++ b/features/OKN/OknCardContent.tsx
@@ -0,0 +1,94 @@
+import React, { useMemo } from 'react';
+import { Card } from 'ekb';
+import { Sources } from 'components/Card/components/Sources/Sources';
+import { state } from 'state/config';
+import { FeedbackButton } from 'features/FeedbackButton/FeedbackButton';
+import { CardActions } from 'components/Card/components/CardActions';
+import { getYearNameByValue } from 'shared/helpers/getYearNameByValue';
+import { OknObject } from './oknObject';
+import { OKNInfo } from './CardContent/components/OKNInfo/OKNInfo';
+
+export function OKNCardContent({ placemark }: { placemark: OknObject }) {
+    const { title, description } = useMemo(() => {
+        const indexOfComma = placemark?.properties.name?.indexOf(',') || -1;
+
+        if (indexOfComma === -1) {
+            return { title: placemark?.properties.name };
+        }
+
+        return {
+            title: placemark?.properties.name.slice(0, indexOfComma),
+            description: placemark?.properties.name.slice(indexOfComma + 1),
+        };
+    }, [placemark?.properties.name]);
+
+    const constructionDateInfo = useMemo(() => {
+        const date = placemark?.properties.date;
+        const result = [
+            {
+                type: 'value' as const,
+                title: 'Когда построили',
+                value: date,
+            },
+        ];
+
+        const constructionYearMatch = date.match(/\d{4}/);
+
+        if (constructionYearMatch) {
+            const constructionYear = Number(constructionYearMatch[0]);
+            const age = new Date().getFullYear() - Number(constructionYear);
+
+            result.push({
+                type: 'value' as const,
+                title: 'Возраст здания',
+                value: `${String(age)} ${getYearNameByValue(age)}`,
+            });
+        }
+
+        return result;
+    }, [placemark?.properties.date]);
+
+    if (!placemark?.properties) {
+        return null;
+    }
+
+    return (
+        <Card
+            cover={
+                <a href={placemark?.properties.img.url} target="_blank" rel="noreferrer">
+                    <img
+                        key={placemark?.properties.img.title}
+                        src={placemark?.properties.img.url}
+                        width={400}
+                        height={256}
+                        alt={placemark?.properties.name}
+                    />
+                </a>
+            }
+            actions={<CardActions coordinates={placemark?.geometry.coordinates} />}
+            title={title}
+            description={description}
+            additionalInfo={[placemark?.properties.address].filter(Boolean)}
+            blocks={[
+                ...constructionDateInfo,
+                { type: 'divider' as const },
+                {
+                    type: 'section',
+                    value: (
+                        <OKNInfo
+                            number={placemark?.properties.okn_number}
+                            status={placemark?.properties.isExist}
+                        />
+                    ),
+                },
+                { type: 'divider' as const },
+                {
+                    type: 'section' as const,
+                    title: 'Источники',
+                    value: <Sources sources={Object.values(state.copyright)} />,
+                },
+            ]}
+            footerActions={<FeedbackButton address={placemark?.properties?.address} />}
+        />
+    );
+}
diff --git a/features/OKN/OknSource.tsx b/features/OKN/OknSource.tsx
index 79005c76..b04fc66b 100644
--- a/features/OKN/OknSource.tsx
+++ b/features/OKN/OknSource.tsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import React from 'react';
 import type { CircleLayer, FillLayer, LineLayer } from 'react-map-gl';
 import { activeFilterSelector, activeFilterParamsSelector } from 'state/features/selectors';
-import { AREA_CONFIG, OBJECTS_CONFIG } from 'features/OKN/Okn.constants';
+import { OBJECTS_CONFIG_COLORS, ZONES_COLORS } from 'features/OKN/Okn.constants';
 import { FilterType } from 'types/Filters.types';
 import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
 import { OknAreaType } from 'features/OKN/oknConstants';
@@ -11,13 +11,13 @@ import { MapItemType } from 'types/Content.types';
 import useMapObjectState from 'features/Map/helpers/useMapObjectState';
 import { useOpenMapItem } from 'features/Map/helpers/useOpenMapItem';
 
-const LAYERS = {
-    points: {
-        dataPath: '/ekb-okn.json',
-        layerId: 'ekb-okn-layer',
-        sourceId: 'ekb-okn-source',
-        zone: null,
-    },
+const OBJECTS_LAYER = {
+    dataPath: '/ekb-okn.json',
+    layerId: 'ekb-okn-layer',
+    sourceId: 'ekb-okn-source',
+};
+
+const ZONES_LAYERS = {
     protect: {
         dataPath: '/ekb-okn-protect.json',
         layerId: 'ekb-okn-protect-layer',
@@ -42,39 +42,32 @@ export function OknSource() {
     const activeFilter = useSelector(activeFilterSelector);
     const activeFilterParams = useSelector(activeFilterParamsSelector);
 
-    useMapObjectState(LAYERS.points.layerId);
-    useMapObjectState(LAYERS.protect.layerId);
-    useMapObjectState(LAYERS.security.layerId);
-    useMapObjectState(LAYERS.objects.layerId);
+    useMapObjectState(OBJECTS_LAYER.layerId);
+    useMapObjectState(ZONES_LAYERS.protect.layerId);
+    useMapObjectState(ZONES_LAYERS.security.layerId);
+    useMapObjectState(ZONES_LAYERS.objects.layerId);
 
-    useOpenMapItem(LAYERS.points.layerId, MapItemType.OKN);
+    useOpenMapItem(OBJECTS_LAYER.layerId, MapItemType.OKN);
 
     if (activeFilter !== FilterType.OKN || !activeFilterParams) {
         return null;
     }
 
-    const activeItems = Object.entries(activeFilterParams)
-        // @ts-ignore
-        .filter(([, { value, type }]) => value && type === 'objects');
-
-    if (activeItems.length === 0) {
-        return null;
-    }
-
-    const colors = activeItems.map(([category]) => [
-        ['==', ['get', 'category'], category],
-        OBJECTS_CONFIG[category].color,
-    ]);
+    const colors =
+        activeFilterParams.okn?.objects?.map((category) => [
+            ['==', ['get', 'category'], category],
+            OBJECTS_CONFIG_COLORS[category],
+        ]) || [];
 
-    const strokeColors = activeItems.map(([category]) => [
-        ['==', ['get', 'category'], category],
-        '#000',
-    ]);
+    const strokeColors =
+        activeFilterParams.okn?.objects
+            ?.map((category) => [['==', ['get', 'category'], category], '#000'])
+            .filter((item) => item[1]) || [];
 
-    const layerStyle: CircleLayer = {
-        id: LAYERS.points.layerId,
+    const OBJECT_LAYER: CircleLayer = {
+        id: OBJECTS_LAYER.layerId,
         type: 'circle',
-        source: LAYERS.points.sourceId,
+        source: OBJECTS_LAYER.sourceId,
         paint: {
             'circle-radius': getLayerStyle<number>({ initial: 10, hover: 12, active: 13 }),
             // @ts-ignore
@@ -86,11 +79,11 @@ export function OknSource() {
     };
 
     const getZoneStyle = (type: string): FillLayer => ({
-        id: LAYERS[type].layerId,
+        id: ZONES_LAYERS[type].layerId,
         type: 'fill',
-        source: LAYERS[type].sourceId,
+        source: ZONES_LAYERS[type].sourceId,
         paint: {
-            'fill-color': AREA_CONFIG[LAYERS[type].zone].color,
+            'fill-color': ZONES_COLORS[ZONES_LAYERS[type].zone],
             'fill-opacity': getLayerStyle<number>({
                 initial: 0.5,
                 hover: 0.8,
@@ -100,11 +93,11 @@ export function OknSource() {
     });
 
     const getZoneOutlineStyle = (type: string): LineLayer => ({
-        id: `${LAYERS[type].layerId}-outline`,
+        id: `${ZONES_LAYERS[type].layerId}-outline`,
         type: 'line',
-        source: LAYERS[type].sourceId,
+        source: ZONES_LAYERS[type].sourceId,
         paint: {
-            'line-color': AREA_CONFIG[LAYERS[type].zone].color,
+            'line-color': ZONES_COLORS[ZONES_LAYERS[type].zone],
             'line-width': 3,
             'line-dasharray': [2, 2],
         },
@@ -112,13 +105,13 @@ export function OknSource() {
 
     return (
         <>
-            {Object.keys(LAYERS).map(
+            {Object.keys(ZONES_LAYERS).map(
                 (layerKey, i) =>
-                    activeFilterParams[LAYERS[layerKey].zone]?.value && (
+                    activeFilterParams.okn?.zones?.includes(ZONES_LAYERS[layerKey].zone) && (
                         <Source
                             key={i}
-                            id={LAYERS[layerKey].sourceId}
-                            data={LAYERS[layerKey].dataPath}
+                            id={ZONES_LAYERS[layerKey].sourceId}
+                            data={ZONES_LAYERS[layerKey].dataPath}
                             type="geojson"
                             generateId
                         >
@@ -127,14 +120,16 @@ export function OknSource() {
                         </Source>
                     ),
             )}
-            <Source
-                id={LAYERS.points.sourceId}
-                data={LAYERS.points.dataPath}
-                type="geojson"
-                generateId
-            >
-                <Layer {...layerStyle} />
-            </Source>
+            {activeFilterParams.okn?.objects?.length && (
+                <Source
+                    id={OBJECTS_LAYER.sourceId}
+                    data={OBJECTS_LAYER.dataPath}
+                    type="geojson"
+                    generateId
+                >
+                    <Layer {...OBJECT_LAYER} />
+                </Source>
+            )}
         </>
     );
 }
diff --git a/shared/UI/Icons/OKN.tsx b/features/OKN/SvgOknIcon.tsx
similarity index 99%
rename from shared/UI/Icons/OKN.tsx
rename to features/OKN/SvgOknIcon.tsx
index a5ad5eac..3616c023 100644
--- a/shared/UI/Icons/OKN.tsx
+++ b/features/OKN/SvgOknIcon.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-export function OKN() {
+export function SvgOknIcon() {
     return (
         <svg
             width="100"
diff --git a/features/OKN/okn.ts b/features/OKN/okn.ts
index d35ede33..ce2efdcc 100644
--- a/features/OKN/okn.ts
+++ b/features/OKN/okn.ts
@@ -1,19 +1,22 @@
+import { groupBy } from 'lodash';
 import oknMeta from 'public/okn-meta.json';
 import oknObjects from 'public/ekb-okn.json';
 import { OknObject } from './oknObject';
 
+export const OKN_ITEMS = Object.entries(
+    groupBy(oknObjects.features, (item) => item.properties.category),
+)
+    .map(([type, items]) => ({ type, count: items.length }))
+    .sort((a, b) => b.count - a.count);
+
+export const ZONES_ITEMS = oknMeta.zones
+    .map(([type, count]) => ({ type: type as string, count: count as number }))
+    .sort((a, b) => b.count - a.count);
+
 export const okn = {
     getObject(id: string): Promise<OknObject> {
         return Promise.resolve(
             oknObjects.features.find((f) => String(f.properties.id) === id) as unknown as OknObject,
         );
     },
-
-    async getObjectsCount() {
-        return Promise.resolve(oknMeta.points);
-    },
-
-    async getZonesCount() {
-        return Promise.resolve(oknMeta.zones);
-    },
 };
diff --git a/features/OKN/oknObject.ts b/features/OKN/oknObject.ts
index 2bde78d0..6d6b63b1 100644
--- a/features/OKN/oknObject.ts
+++ b/features/OKN/oknObject.ts
@@ -1,30 +1,26 @@
 import { OknObjectSignificanceType } from './oknConstants';
 
 export interface OknObject {
-    properties: OknProperties;
-    geometry: OknGeometry;
-}
-
-export interface OknProperties {
-    id: number;
-    name: string;
-    address: string;
-    okn_number: string;
-    date: string;
-    type: string;
-    category: OknObjectSignificanceType;
-    img?: { url: string; title: string; preview?: string };
-    document: {
-        archive: { id: number; url: string };
-        date: string;
+    properties: {
+        id: number;
         name: string;
-        number: string;
-    }[];
-    isExist?: string;
-    comment?: string;
-}
-
-export interface OknGeometry {
-    coordinates: [lat: number, lng: number];
-    type?: string;
+        address: string;
+        okn_number: string;
+        date: string;
+        type: string;
+        category: OknObjectSignificanceType;
+        img?: { url: string; title: string; preview?: string };
+        document: {
+            archive: { id: number; url: string };
+            date: string;
+            name: string;
+            number: string;
+        }[];
+        isExist?: string;
+        comment?: string;
+    };
+    geometry: {
+        coordinates: [lat: number, lng: number];
+        type?: string;
+    };
 }
diff --git a/features/Quarter/CardContent/CardContent.module.css b/features/Quarter/CardContent/CardContent.module.css
deleted file mode 100644
index 71958db5..00000000
--- a/features/Quarter/CardContent/CardContent.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.popup {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    padding: 16px 8px 16px 16px;
-}
-
-.mainLink {
-    color: inherit;
-    font-size: inherit;
-    line-height: inherit;
-}
-
-.description {
-    margin-top: 8px;
-    position: relative;
-    svg {
-        position: relative;
-        top: 2px;
-        left: 2px;
-        path {
-            fill: #000;
-        }
-    }
-    a {
-        border-radius: 8px;
-        font-size: 16px;
-        width: 100%;
-        text-align: center;
-    }
-}
diff --git a/features/Quarter/CardContent/CardContent.tsx b/features/Quarter/CardContent/CardContent.tsx
deleted file mode 100644
index ab8a3d17..00000000
--- a/features/Quarter/CardContent/CardContent.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { Button, ButtonSize, ButtonType } from 'ekb';
-import { QuarterObject } from 'features/Quarter/quarterObject';
-import { Header } from 'components/Card/components/Header/Header';
-import { Info } from 'components/Card/components/Info/Info';
-import { Section } from 'components/Card/components/Section/Section';
-import sectionStyles from 'components/Card/components/Section/Section.module.css';
-import { Sources } from 'components/Card/components/Sources/Sources';
-import { FeedbackButton } from 'features/FeedbackButton/FeedbackButton';
-import { Icon } from 'shared/UI/Icons';
-import { IconType } from 'shared/UI/Icons/Icons.types';
-import { SOURCES_BY_TYPE } from 'constants/sources';
-import { SourceType } from 'types/Sources.types';
-import styles from './CardContent.module.css';
-
-type QuarterCardContentProps = {
-    placemark?: QuarterObject;
-};
-
-export function QuarterCardContent({ placemark }: QuarterCardContentProps) {
-    if (!placemark) return null;
-
-    return (
-        <div className={styles.popup}>
-            <Header title={placemark.quarterTitle} />
-
-            <div className={styles.description}>
-                <Button
-                    type={ButtonType.ACCENT}
-                    size={ButtonSize.SMALL}
-                    onClick={() => {}}
-                    href={placemark.url}
-                >
-                    Посмотреть телефон и почту квартального&nbsp;
-                    <Icon type={IconType.External} color="#000" />
-                </Button>
-            </div>
-
-            <Section>
-                <Info
-                    nameColor="#9baac3"
-                    infos={[
-                        {
-                            name: 'Район',
-                            text: placemark.districtTitle,
-                        },
-                    ]}
-                />
-            </Section>
-
-            <Section>
-                <Sources sources={[SOURCES_BY_TYPE[SourceType.ekb_quarter]]} />
-            </Section>
-            <Section>
-                <div className={sectionStyles.block_inline}>
-                    <FeedbackButton address={placemark?.quarterTitle} />
-                </div>
-            </Section>
-        </div>
-    );
-}
diff --git a/features/Quarter/QuarterCardContent.tsx b/features/Quarter/QuarterCardContent.tsx
new file mode 100644
index 00000000..290d7854
--- /dev/null
+++ b/features/Quarter/QuarterCardContent.tsx
@@ -0,0 +1,50 @@
+import { Card, Button, ButtonSize, ButtonType, Icon, IconType } from 'ekb';
+import { Sources } from 'components/Card/components/Sources/Sources';
+import { FeedbackButton } from 'features/FeedbackButton/FeedbackButton';
+import { state } from 'state/config';
+
+type QuarterCardContentProps = {
+    placemark?: QuarterObject;
+};
+
+interface QuarterObject {
+    districtTitle: string;
+    quarterTitle: string;
+    quarterDescription: string;
+    url: string;
+}
+
+export function QuarterCardContent({ placemark }: QuarterCardContentProps) {
+    if (!placemark) return null;
+
+    return (
+        <Card
+            title={placemark.quarterTitle}
+            blocks={[
+                {
+                    type: 'value',
+                    value: (
+                        <Button
+                            type={ButtonType.ACCENT}
+                            size={ButtonSize.MEDIUM}
+                            onClick={() => {}}
+                            href={placemark.url}
+                        >
+                            Посмотреть телефон и почту квартального
+                            <Icon type={IconType.External} />
+                        </Button>
+                    ),
+                },
+                { type: 'divider' },
+                { type: 'value', title: 'Район', value: placemark.districtTitle },
+                { type: 'divider' },
+                {
+                    type: 'section',
+                    title: 'Источники',
+                    value: <Sources sources={Object.values(state.copyright)} />,
+                },
+            ]}
+            footerActions={<FeedbackButton address={placemark?.quarterTitle} />}
+        />
+    );
+}
diff --git a/features/Quarter/Filter/QuarterFilter.tsx b/features/Quarter/QuarterFilter.tsx
similarity index 80%
rename from features/Quarter/Filter/QuarterFilter.tsx
rename to features/Quarter/QuarterFilter.tsx
index 0335da3d..4d92e371 100644
--- a/features/Quarter/Filter/QuarterFilter.tsx
+++ b/features/Quarter/QuarterFilter.tsx
@@ -1,9 +1,5 @@
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
 import { Link, LinkSize } from 'ekb';
 import styled from 'styled-components';
-import { setFilter } from 'state/features/dataLayers';
-import { FilterType } from 'types/Filters.types';
 
 const Wrapper = styled.div`
     font-size: 14px;
@@ -29,17 +25,6 @@ const Wrapper = styled.div`
 `;
 
 export function QuarterFilter() {
-    const dispatch = useDispatch();
-
-    useEffect(() => {
-        dispatch(
-            setFilter({
-                activeFilter: FilterType.Quarter,
-                activeFilterParams: {},
-            }),
-        );
-    });
-
     return (
         <Wrapper>
             <p>
diff --git a/features/Quarter/QuarterSource.tsx b/features/Quarter/QuarterSource.tsx
deleted file mode 100644
index 6a458b28..00000000
--- a/features/Quarter/QuarterSource.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import React from 'react';
-import { FillLayer, Layer, LineLayer, Source } from 'react-map-gl';
-import { useSelector } from 'react-redux';
-import { activeFilterSelector } from 'state/features/selectors';
-import { FilterType } from 'types/Filters.types';
-import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
-import { MapItemType } from 'types/Content.types';
-import useMapObjectState from 'features/Map/helpers/useMapObjectState';
-import { colorLuminance } from 'features/Map/helpers/colorLuminance';
-import { useOpenMapItem } from 'features/Map/helpers/useOpenMapItem';
-
-const QUARTER_LAYER_ID = 'ekb-quarter-inspectors-layer';
-const QUARTER_SOURCE_ID = 'ekb-quarter-inspectors-source';
-
-export function QuarterSource() {
-    const activeFilter = useSelector(activeFilterSelector);
-
-    useMapObjectState(QUARTER_LAYER_ID);
-
-    useOpenMapItem(QUARTER_LAYER_ID, MapItemType.Quarter);
-
-    const layerStyle: FillLayer = {
-        type: 'fill',
-        id: QUARTER_LAYER_ID,
-        source: QUARTER_SOURCE_ID,
-        paint: {
-            'fill-color': getLayerStyle<string>({
-                initial: '#9AADCC',
-                hover: colorLuminance('#9AADCC', 0.2),
-                active: colorLuminance('#9AADCC', 0.4),
-            }),
-            'fill-opacity': 0.6,
-        },
-    };
-
-    const layerStrokeStyle: LineLayer = {
-        id: `${QUARTER_LAYER_ID}-outline`,
-        type: 'line',
-        source: QUARTER_SOURCE_ID,
-        paint: {
-            'line-color': '#000',
-            'line-opacity': 0.5,
-            'line-width': 1.5,
-        },
-    };
-
-    if (activeFilter !== FilterType.Quarter) {
-        return null;
-    }
-
-    return (
-        <Source type="geojson" data="./ekb-quarters.json" id={QUARTER_SOURCE_ID} generateId>
-            <Layer {...layerStyle} />
-            <Layer {...layerStrokeStyle} />
-        </Source>
-    );
-}
diff --git a/features/Quarter/quarter.ts b/features/Quarter/quarter.ts
index 35c08517..4bf3e6bf 100644
--- a/features/Quarter/quarter.ts
+++ b/features/Quarter/quarter.ts
@@ -1,11 +1,9 @@
 import quarterObjects from 'public/ekb-quarters.json';
-import { QuarterObject } from './quarterObject';
 
 export const quarter = {
-    getObject(quarterId: string): Promise<QuarterObject> {
+    getObject(quarterId: string): Promise<object> {
         return Promise.resolve(
-            quarterObjects.features.find((f) => f.properties.id === quarterId)
-                .properties as unknown as QuarterObject,
+            quarterObjects.features.find((f) => f.properties.id === quarterId).properties,
         );
     },
 };
diff --git a/features/Quarter/quarterObject.ts b/features/Quarter/quarterObject.ts
deleted file mode 100644
index ed648def..00000000
--- a/features/Quarter/quarterObject.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export interface QuarterObject {
-    districtTitle: string;
-    quarterTitle: string;
-    quarterDescription: string;
-    url: string;
-}
diff --git a/package.json b/package.json
index a1c81ae0..0ae253ee 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "dependencies": {
         "@reduxjs/toolkit": "^2.0.1",
         "classnames": "^2.4.0",
-        "ekb": "1.2.0-rc.0",
+        "ekb": "1.2.0-rc.2",
+        "geojson": "^0.5.0",
         "lodash": "^4.17.21",
         "mapbox-gl": "npm:empty-npm-package@1.0.0",
         "maplibre-gl": "^3.6.2",
@@ -30,11 +31,11 @@
         "typescript": "^5.3.3"
     },
     "devDependencies": {
-        "@typescript-eslint/eslint-plugin": "^6.16.0",
-        "@typescript-eslint/parser": "^6.16.0",
         "@types/lodash": "^4.14.202",
         "@types/node": "20.10.5",
         "@types/react": "^18.2.45",
+        "@typescript-eslint/eslint-plugin": "^6.16.0",
+        "@typescript-eslint/parser": "^6.16.0",
         "eslint": "^8.56.0",
         "eslint-config-next": "14.0.4",
         "eslint-config-prettier": "^9.1.0",
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 65eaac43..07845291 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -41,13 +41,13 @@ export default function Document() {
                 <script async src="https://tally.so/widgets/embed.js" />
 
                 {/* eslint-disable-next-line react/no-danger */}
-                {process.env.YANDEX_METRIKA && (
+                {/* {process.env.YANDEX_METRIKA && (
                     <div
                         dangerouslySetInnerHTML={{
                             __html: `<script>(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");ym(${process.env.YANDEX_METRIKA}, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true });</script><noscript><div><img src="https://mc.yandex.ru/watch/${process.env.YANDEX_METRIKA}" style="position:absolute; left:-9999px;" alt="" /></div></noscript>`,
                         }}
                     />
-                )}
+                )} */}
             </body>
         </Html>
     );
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 52561d7c..1ce0578c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,11 @@ dependencies:
     specifier: ^2.4.0
     version: 2.4.0
   ekb:
-    specifier: 1.2.0-rc.0
-    version: 1.2.0-rc.0(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+    specifier: 1.2.0-rc.2
+    version: 1.2.0-rc.2(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0)
+  geojson:
+    specifier: ^0.5.0
+    version: 0.5.0
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
@@ -2799,8 +2802,8 @@ packages:
     resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
     dev: false
 
-  /ekb@1.2.0-rc.0(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-XXLD+r8FIM5qYFZlArrKBQQSAcRb0zaWwJrGKpGgfROm0n6BZaNd9HfwiwW+JtVN9gz7YzxtdOU/iCoJVFqU7Q==}
+  /ekb@1.2.0-rc.2(@types/react@18.2.45)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-ySmX0NxsrkKRf/YOPqnyfqe68lTgJe4RJBdKSZJZwmoujzC9Dq6YM92PGVe7Za5Xd92ed0Zdkwj/SPvMe0BV0Q==}
     peerDependencies:
       react: ^18.2.0
       react-dom: ^18.2.0
@@ -3410,6 +3413,11 @@ packages:
     resolution: {integrity: sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==}
     dev: false
 
+  /geojson@0.5.0:
+    resolution: {integrity: sha512-/Bx5lEn+qRF4TfQ5aLu6NH+UKtvIv7Lhc487y/c8BdludrCTpiWf9wyI0RTyqg49MFefIAvFDuEi5Dfd/zgNxQ==}
+    engines: {node: '>= 0.10'}
+    dev: false
+
   /get-east-asian-width@1.2.0:
     resolution: {integrity: sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==}
     engines: {node: '>=18'}
diff --git a/shared/UI/Icons/Auto.tsx b/shared/UI/Icons/Auto.tsx
deleted file mode 100644
index b0941bdb..00000000
--- a/shared/UI/Icons/Auto.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Auto({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            className={mix}
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M13.7444 9.58446H6.25641C5.56841 9.58446 5.02441 10.1125 5.02441 10.8165V13.7285H6.70441V12.8965H13.2964V13.7285H14.9764V10.8165C14.9764 10.1125 14.4324 9.58446 13.7444 9.58446ZM8.84841 7.52046H11.1524C12.0004 7.52046 12.6884 8.35246 13.0884 8.99246H14.9764V7.82446H13.6804C13.1524 7.07246 12.3524 6.27246 11.1524 6.27246H8.84841C7.64841 6.27246 6.84841 7.07246 6.32041 7.82446H5.02441V8.99246H6.91241C7.31241 8.35246 8.00041 7.52046 8.84841 7.52046ZM5.85641 11.2485C5.85641 10.7845 6.20841 10.4165 6.67241 10.4165C7.13641 10.4165 7.50441 10.7845 7.50441 11.2485C7.50441 11.7125 7.13641 12.0645 6.67241 12.0645C6.20841 12.0645 5.85641 11.7125 5.85641 11.2485ZM12.4964 11.2485C12.4964 10.7845 12.8484 10.4165 13.3124 10.4165C13.7764 10.4165 14.1444 10.7845 14.1444 11.2485C14.1444 11.7125 13.7764 12.0645 13.3124 12.0645C12.8484 12.0645 12.4964 11.7125 12.4964 11.2485Z"
-                fill={color}
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Bike.tsx b/shared/UI/Icons/Bike.tsx
deleted file mode 100644
index e91434b7..00000000
--- a/shared/UI/Icons/Bike.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Bike({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            className={mix}
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M11.7838 9.07183C11.1758 9.61583 10.8398 10.3998 10.8398 11.2318C10.8398 11.6958 10.9358 12.1438 11.1278 12.5438C10.9678 12.8958 10.8878 13.2958 10.8878 13.7118C10.8878 15.2958 12.1678 16.5758 13.7518 16.5758C15.3358 16.5758 16.6158 15.2958 16.6158 13.7118C16.6158 12.1278 15.3358 10.8478 13.7518 10.8478C13.4318 10.8478 13.1278 10.9118 12.8398 11.0078L13.1918 12.0638C13.3678 11.9998 13.5598 11.9678 13.7518 11.9678C14.7118 11.9678 15.4958 12.7518 15.4958 13.7118C15.4958 14.6718 14.7118 15.4558 13.7518 15.4558C12.7918 15.4558 12.0078 14.6718 12.0078 13.7118V13.5998C12.4878 13.9678 13.0958 14.1758 13.7518 14.1758V12.9118C12.8238 12.9118 12.0878 12.1598 12.0878 11.2318C12.0878 10.6878 12.3278 10.2078 12.7278 9.90383C12.9998 9.69583 13.1598 9.56783 13.1598 9.31183C13.1598 9.19983 13.1278 9.05583 13.0478 8.86383C12.5518 7.56783 11.6078 6.59183 10.3118 6.06383C10.2318 6.03183 10.1038 5.99983 10.0238 5.99983C9.73579 5.99983 9.59179 6.12783 9.47979 6.39983C8.83979 7.93583 7.81579 8.23983 6.24779 8.28783V9.47183C7.92779 9.40783 9.46379 9.02383 10.3438 7.47183C10.9838 7.85583 11.4638 8.39983 11.7838 9.07183ZM3.38379 13.7118C3.38379 15.2958 4.66379 16.5758 6.24779 16.5758C7.83179 16.5758 9.11179 15.2958 9.11179 13.7118C9.11179 13.0878 8.90379 12.4958 8.55179 12.0158C8.69579 11.2318 9.01579 10.5118 9.76779 10.5118C9.91179 10.5118 10.0558 10.5438 10.2158 10.5918L10.6478 9.40783C10.3278 9.29583 10.0398 9.23183 9.75179 9.23183C8.51979 9.23183 7.87979 10.0798 7.52779 11.1518C7.14379 10.9598 6.71179 10.8478 6.24779 10.8478C4.66379 10.8478 3.38379 12.1278 3.38379 13.7118ZM4.50379 13.7118C4.50379 12.7518 5.28779 11.9678 6.24779 11.9678C7.20779 11.9678 7.99179 12.7518 7.99179 13.7118C7.99179 14.6718 7.20779 15.4558 6.24779 15.4558C5.28779 15.4558 4.50379 14.6718 4.50379 13.7118ZM8.75979 3.42383C8.10379 3.42383 7.55979 3.96783 7.55979 4.62383C7.55979 5.29583 8.10379 5.82383 8.75979 5.82383C9.43179 5.82383 9.97579 5.29583 9.97579 4.62383C9.97579 3.96783 9.43179 3.42383 8.75979 3.42383Z"
-                fill={color}
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/BrokenHeart.tsx b/shared/UI/Icons/BrokenHeart.tsx
deleted file mode 100644
index 3c7071c8..00000000
--- a/shared/UI/Icons/BrokenHeart.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-type Props = {
-    color: string;
-};
-
-function BrokenHeart({ color }: Props) {
-    return (
-        <svg
-            width="21"
-            height="18"
-            viewBox="0 0 21 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <g clipPath="url(#clip0_10212_11063)">
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M9.73814 16.3677L9.19262 15.9088C8.91236 15.6729 8.63511 15.4399 8.35785 15.204L7.78685 14.7164C7.17089 14.1928 6.53544 13.6506 5.91499 13.1083C4.9874 12.318 4.11761 11.4673 3.31177 10.5623C2.6544 9.84233 2.11518 9.03039 1.71266 8.15447C1.2664 7.18255 1.12576 6.10667 1.30802 5.05906C1.41578 4.4228 1.65392 3.81336 2.00866 3.26599C2.36341 2.71862 2.82771 2.2442 3.37471 1.87015C4.13209 1.33318 5.02612 1.00179 5.96295 0.910748C6.19078 0.885162 6.41996 0.872195 6.64934 0.871911C7.99191 0.869948 9.2939 1.31358 10.3346 2.12762C11.1403 1.49485 12.1101 1.08417 13.1402 0.939516C13.8932 0.815231 14.665 0.843156 15.4062 1.0215C16.1489 1.19891 16.8434 1.52704 17.4429 1.98379C18.4629 2.72903 19.1471 3.8206 19.3552 5.03461C19.5745 6.34599 19.3095 7.68971 18.6059 8.83339C18.1251 9.64325 17.5467 10.3959 16.8824 11.0758C15.9526 12.0369 14.9695 12.9492 13.9375 13.8088L10.9791 16.326C10.9581 16.3432 10.9371 16.3619 10.9101 16.3806L10.3106 16.8639L9.73814 16.3677Z"
-                    fill="#1E2841"
-                />
-                <path
-                    d="M14.0683 1.7261C14.4457 1.72631 14.8216 1.77075 15.1878 1.85843C15.8061 2.00826 16.3846 2.28123 16.8858 2.65961C17.7285 3.27442 18.2938 4.17573 18.4654 5.17823C18.655 6.29238 18.43 7.43501 17.83 8.40598C17.384 9.16086 16.8451 9.86158 16.2249 10.4931C15.3162 11.434 14.3556 12.3275 13.3474 13.1699L10.38 15.6785C10.368 15.69 10.353 15.6986 10.3321 15.7159C9.86896 15.3232 9.41036 14.9406 8.95625 14.5537C8.14247 13.8603 7.32568 13.1685 6.51939 12.4665C5.62059 11.7009 4.77736 10.8772 3.9956 10.0012C3.39576 9.34484 2.90355 8.6047 2.53587 7.80617C2.1606 6.98767 2.04236 6.08186 2.19567 5.19981C2.28614 4.67572 2.48333 4.17388 2.77597 3.72296C3.06861 3.27205 3.45096 2.8809 3.90118 2.57187C4.53143 2.12346 5.27586 1.84621 6.05629 1.76925C6.78546 1.68452 7.52513 1.75624 8.2219 1.97926C8.91492 2.19914 9.5475 2.56588 10.0728 3.05229C10.1642 3.13284 10.2436 3.22202 10.3231 3.2997L10.6723 2.9962C11.3984 2.34936 12.3118 1.92908 13.292 1.79083C13.5484 1.74816 13.8081 1.7265 14.0683 1.7261ZM14.0683 3.23943e-05C13.7097 3.29819e-06 13.3518 0.0288725 12.9982 0.0863357C12.0476 0.223345 11.1389 0.554959 10.3335 1.05869C9.23792 0.372761 7.95789 0.00789979 6.64977 0.00866273C6.38434 0.00915047 6.11915 0.0240376 5.85547 0.0532528C4.76267 0.164466 3.72064 0.55378 2.83711 1.18095C2.19788 1.6208 1.65541 2.17745 1.24084 2.81897C0.826264 3.46049 0.547733 4.17426 0.421223 4.91932C0.211311 6.13096 0.373797 7.37505 0.888814 8.49947C1.32833 9.4567 1.91762 10.3439 2.63628 11.1303C3.46691 12.0622 4.3627 12.9388 5.31744 13.7539C5.93939 14.2962 6.57334 14.837 7.1878 15.3592L7.7603 15.8482C8.04056 16.0855 8.31931 16.3214 8.60106 16.5573L9.14359 17.0147L10.3081 18L11.477 17.0507C11.5098 17.0263 11.5413 17.0004 11.5715 16.973L14.5284 14.4659C15.5823 13.586 16.5863 12.6526 17.5362 11.6697C18.2487 10.942 18.8685 10.1357 19.3826 9.26757C20.1922 7.94941 20.4965 6.4012 20.2429 4.89055C19.9977 3.46098 19.1937 2.17495 17.9948 1.29458C17.2979 0.766723 16.4917 0.387659 15.6299 0.182708C15.1193 0.059748 14.5947 -0.0016173 14.0683 3.23943e-05Z"
-                    fill="#1E2841"
-                />
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M16.7583 2.83747C17.5818 3.43678 18.1352 4.3158 18.3049 5.29424C18.4903 6.38347 18.2706 7.50057 17.6844 8.45006C17.2473 9.18757 16.7206 9.87272 16.1153 10.4911C15.2268 11.4107 14.2873 12.2837 13.3008 13.1061L10.3993 15.5672L10.3768 15.5859C10.3683 15.5915 10.3603 15.5978 10.3529 15.6046L12.8032 9.90428L8.69531 5.09143L10.3439 3.46317L10.4728 3.35098L10.6736 3.16398C11.3826 2.53094 12.2753 2.11961 13.2333 1.98451C13.8519 1.88234 14.4859 1.90537 15.0947 2.05211C15.7013 2.19683 16.2686 2.46463 16.7583 2.83747Z"
-                    fill={color}
-                />
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M9.17172 2.55842L6.77382 5.09142L11.0151 10.1574L9.22268 14.6538L9.00387 14.4683L8.44486 13.9922C7.83489 13.4729 7.22343 12.9537 6.62395 12.4272C5.74424 11.6782 4.9195 10.8717 4.15561 10.0136C3.56872 9.372 3.08711 8.64834 2.72736 7.86751C2.36226 7.0676 2.24669 6.18323 2.39465 5.32156C2.48312 4.80915 2.67598 4.31851 2.9622 3.8777C3.24842 3.43689 3.62238 3.05457 4.06269 2.7526C4.67988 2.31278 5.40953 2.04141 6.17435 1.96724C6.8869 1.88453 7.60969 1.95478 8.29049 2.17293C8.59724 2.27206 8.89254 2.40124 9.17172 2.55842Z"
-                    fill={color}
-                />
-            </g>
-            <defs>
-                <clipPath id="clip0_10212_11063">
-                    <rect width="20" height="18" fill="white" transform="translate(0.332031)" />
-                </clipPath>
-            </defs>
-        </svg>
-    );
-}
-
-export default BrokenHeart;
diff --git a/shared/UI/Icons/Bycicle.tsx b/shared/UI/Icons/Bycicle.tsx
deleted file mode 100644
index b48aed3d..00000000
--- a/shared/UI/Icons/Bycicle.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Bycicle({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            className={mix}
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M11.7838 9.07183C11.1758 9.61583 10.8398 10.3998 10.8398 11.2318C10.8398 11.6958 10.9358 12.1438 11.1278 12.5438C10.9678 12.8958 10.8878 13.2958 10.8878 13.7118C10.8878 15.2958 12.1678 16.5758 13.7518 16.5758C15.3358 16.5758 16.6158 15.2958 16.6158 13.7118C16.6158 12.1278 15.3358 10.8478 13.7518 10.8478C13.4318 10.8478 13.1278 10.9118 12.8398 11.0078L13.1918 12.0638C13.3678 11.9998 13.5598 11.9678 13.7518 11.9678C14.7118 11.9678 15.4958 12.7518 15.4958 13.7118C15.4958 14.6718 14.7118 15.4558 13.7518 15.4558C12.7918 15.4558 12.0078 14.6718 12.0078 13.7118V13.5998C12.4878 13.9678 13.0958 14.1758 13.7518 14.1758V12.9118C12.8238 12.9118 12.0878 12.1598 12.0878 11.2318C12.0878 10.6878 12.3278 10.2078 12.7278 9.90383C12.9998 9.69583 13.1598 9.56783 13.1598 9.31183C13.1598 9.19983 13.1278 9.05583 13.0478 8.86383C12.5518 7.56783 11.6078 6.59183 10.3118 6.06383C10.2318 6.03183 10.1038 5.99983 10.0238 5.99983C9.73579 5.99983 9.59179 6.12783 9.47979 6.39983C8.83979 7.93583 7.81579 8.23983 6.24779 8.28783V9.47183C7.92779 9.40783 9.46379 9.02383 10.3438 7.47183C10.9838 7.85583 11.4638 8.39983 11.7838 9.07183ZM3.38379 13.7118C3.38379 15.2958 4.66379 16.5758 6.24779 16.5758C7.83179 16.5758 9.11179 15.2958 9.11179 13.7118C9.11179 13.0878 8.90379 12.4958 8.55179 12.0158C8.69579 11.2318 9.01579 10.5118 9.76779 10.5118C9.91179 10.5118 10.0558 10.5438 10.2158 10.5918L10.6478 9.40783C10.3278 9.29583 10.0398 9.23183 9.75179 9.23183C8.51979 9.23183 7.87979 10.0798 7.52779 11.1518C7.14379 10.9598 6.71179 10.8478 6.24779 10.8478C4.66379 10.8478 3.38379 12.1278 3.38379 13.7118ZM4.50379 13.7118C4.50379 12.7518 5.28779 11.9678 6.24779 11.9678C7.20779 11.9678 7.99179 12.7518 7.99179 13.7118C7.99179 14.6718 7.20779 15.4558 6.24779 15.4558C5.28779 15.4558 4.50379 14.6718 4.50379 13.7118ZM8.75979 3.42383C8.10379 3.42383 7.55979 3.96783 7.55979 4.62383C7.55979 5.29583 8.10379 5.82383 8.75979 5.82383C9.43179 5.82383 9.97579 5.29583 9.97579 4.62383C9.97579 3.96783 9.43179 3.42383 8.75979 3.42383Z"
-                fill={color}
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Children.tsx b/shared/UI/Icons/Children.tsx
deleted file mode 100644
index 824b7046..00000000
--- a/shared/UI/Icons/Children.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Children({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            className={mix}
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M11.6956 11.1145C11.4685 11.9857 11.0136 12.7808 10.3776 13.418C9.76274 14.0317 8.98676 14.4588 8.13937 14.6501C7.29198 14.8413 6.40777 14.7889 5.58891 14.4989C4.77005 14.2089 4.04996 13.693 3.51188 13.0111C2.97379 12.3291 2.63966 11.5087 2.5481 10.6449C2.45654 9.78098 2.61129 8.90884 2.99446 8.12921C3.37763 7.34957 3.97359 6.69427 4.71346 6.23902C5.45333 5.78378 6.30691 5.54718 7.17557 5.55656C8.04422 5.56594 8.8925 5.82093 9.62236 6.29205L8.74624 7.66287C8.26732 7.35241 7.70825 7.18836 7.13751 7.19082C6.64888 7.19083 6.16779 7.31132 5.73683 7.54162C5.30588 7.77191 4.93836 8.10491 4.66681 8.51114C4.39525 8.91736 4.22804 9.38427 4.17999 9.87053C4.13193 10.3568 4.20451 10.8474 4.3913 11.2989C4.57809 11.7504 4.87333 12.1489 5.25087 12.4591C5.62841 12.7693 6.0766 12.9817 6.55578 13.0773C7.03495 13.173 7.53032 13.149 7.99803 13.0075C8.46573 12.866 8.89134 12.6114 9.23716 12.2662C9.54509 11.9628 9.78147 11.5945 9.92911 11.1882C10.0767 10.7818 10.1319 10.3477 10.0906 9.91735C12.2356 9.51328 12.9002 8.81088 13.1117 6.68479C13.1088 6.52827 13.1488 6.37393 13.2274 6.23854C13.306 6.10315 13.4202 5.99186 13.5576 5.91676C13.6949 5.84166 13.8502 5.8056 14.0066 5.81251C14.163 5.81942 14.3146 5.86903 14.4448 5.95596C18.24 8.9204 17.8246 13.3727 16.6653 17.5078H15.0377C15.8987 14.5774 16.5935 10.7935 14.475 8.22555C14.0482 9.73609 13.1457 10.7104 11.722 11.1145H11.6956ZM12.2734 2.48926C12.5852 2.49075 12.8897 2.5846 13.1483 2.75895C13.4069 2.93331 13.608 3.18036 13.7263 3.46892C13.8446 3.75749 13.8748 4.07464 13.8131 4.38034C13.7513 4.68604 13.6004 4.96659 13.3793 5.1866C13.1583 5.4066 12.877 5.55619 12.571 5.61649C12.265 5.67679 11.948 5.6451 11.66 5.5254C11.372 5.40571 11.1259 5.20339 10.9528 4.94397C10.7797 4.68455 10.6873 4.37966 10.6873 4.06778C10.6878 3.85999 10.7292 3.65433 10.8092 3.46255C10.8892 3.27077 11.0061 3.09661 11.1534 2.95004C11.3007 2.80346 11.4754 2.68732 11.6675 2.60826C11.8597 2.5292 12.0656 2.48877 12.2734 2.48926V2.48926ZM15.4606 12.6552C14.2506 14.0018 13.5099 15.7045 13.3496 17.5078H11.7107C11.8814 15.3216 12.7604 13.2507 14.2144 11.6092L15.4606 12.6552V12.6552ZM4.67533 15.3364C4.89044 15.3364 5.10071 15.4002 5.27956 15.5197C5.45842 15.6392 5.59782 15.8091 5.68013 16.0078C5.76245 16.2065 5.78399 16.4252 5.74202 16.6362C5.70006 16.8472 5.59648 17.0409 5.44438 17.1931C5.29227 17.3452 5.09848 17.4487 4.88751 17.4907C4.67654 17.5327 4.45786 17.5111 4.25913 17.4288C4.06039 17.3465 3.89055 17.2071 3.77104 17.0282C3.65153 16.8494 3.58774 16.6391 3.58774 16.424C3.58724 16.281 3.61503 16.1394 3.66951 16.0072C3.72399 15.875 3.80408 15.7549 3.90517 15.6539C4.00627 15.5528 4.12636 15.4727 4.25854 15.4182C4.39072 15.3637 4.53237 15.3359 4.67533 15.3364V15.3364ZM9.56194 15.3364C9.77704 15.3364 9.98731 15.4002 10.1662 15.5197C10.345 15.6392 10.4844 15.8091 10.5667 16.0078C10.6491 16.2065 10.6706 16.4252 10.6286 16.6362C10.5867 16.8472 10.4831 17.0409 10.331 17.1931C10.1789 17.3452 9.98509 17.4487 9.77412 17.4907C9.56314 17.5327 9.34446 17.5111 9.14573 17.4288C8.947 17.3465 8.77714 17.2071 8.65763 17.0282C8.53813 16.8494 8.47435 16.6391 8.47435 16.424C8.47435 16.1356 8.58893 15.8589 8.79289 15.655C8.99686 15.451 9.27349 15.3364 9.56194 15.3364V15.3364Z"
-                fill={color}
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Copy.tsx b/shared/UI/Icons/Copy.tsx
deleted file mode 100644
index 058c796f..00000000
--- a/shared/UI/Icons/Copy.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Copy({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            width="12"
-            height="12"
-            viewBox="0 0 12 12"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={mix}
-        >
-            <mask
-                id="mask0_6184_10300"
-                style={{ maskType: 'alpha' }}
-                maskUnits="userSpaceOnUse"
-                x="0"
-                y="0"
-                width="12"
-                height="12"
-            >
-                <rect width="12" height="12" fill="#D9D9D9" />
-            </mask>
-            <g mask="url(#mask0_6184_10300)">
-                <path
-                    d="M2.76211 10.8002C2.49571 10.8002 2.26651 10.7044 2.07451 10.5128C1.88291 10.3212 1.78711 10.092 1.78711 9.8252V3.1376H2.76211V9.8252H8.26231V10.8002H2.76211ZM4.57471 8.9876C4.30791 8.9876 4.07871 8.8918 3.88711 8.7002C3.69551 8.5086 3.59971 8.2794 3.59971 8.0126V2.1752C3.59971 1.9084 3.69551 1.6792 3.88711 1.4876C4.07871 1.296 4.30791 1.2002 4.57471 1.2002H9.23731C9.51211 1.2002 9.74331 1.296 9.93091 1.4876C10.1185 1.6792 10.2123 1.9084 10.2123 2.1752V8.0126C10.2123 8.2794 10.1185 8.5086 9.93091 8.7002C9.74331 8.8918 9.51211 8.9876 9.23731 8.9876H4.57471ZM4.57471 8.0126H9.23731V2.1752H4.57471V8.0126Z"
-                    fill={color}
-                />
-            </g>
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Download.tsx b/shared/UI/Icons/Download.tsx
deleted file mode 100644
index 500292b1..00000000
--- a/shared/UI/Icons/Download.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export function Download(props) {
-    return (
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            {...props}
-        >
-            <path
-                stroke="#9BAAC3"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.333}
-                d="M8 6.667v4m0 0 2-1.334m-2 1.333L6 9.333M2 4v7.2c0 .747 0 1.12.145 1.405.128.251.332.455.583.583.285.145.658.145 1.403.145h7.738c.745 0 1.118 0 1.402-.145.252-.128.456-.332.584-.583C14 12.32 14 11.946 14 11.2V6.133c0-.747 0-1.12-.145-1.405a1.334 1.334 0 0 0-.583-.583C12.987 4 12.613 4 11.867 4H8M2 4h6M2 4a1.333 1.333 0 0 1 1.333-1.333h2.45c.326 0 .49 0 .643.036.136.034.266.087.385.16.135.083.25.198.48.429L8 4"
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/DownloadIcon.tsx b/shared/UI/Icons/DownloadIcon.tsx
deleted file mode 100644
index 9941f4a3..00000000
--- a/shared/UI/Icons/DownloadIcon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-export default function DownloadFacade({ color }: { color: string }) {
-    return (
-        <svg
-            width="12"
-            height="14"
-            viewBox="0 0 12 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M6 0V10.75M6 10.75L1.5 6.25M6 10.75L10.5 6.25M1 12.5H11"
-                stroke={color}
-                strokeWidth="1.5"
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Edit.tsx b/shared/UI/Icons/Edit.tsx
deleted file mode 100644
index 590707ad..00000000
--- a/shared/UI/Icons/Edit.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import React from 'react';
-import { IconBaseProps } from 'shared/UI/Icons/Icons.types';
-
-export function Edit({ color }: IconBaseProps) {
-    return (
-        <svg
-            width={16}
-            height={16}
-            viewBox="0 0 24 24"
-            fill={color}
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <g id="SVGRepo_bgCarrier" strokeWidth="0" />
-            <g id="SVGRepo_tracerCarrier" strokeLinecap="round" strokeLinejoin="round" />
-            <g id="SVGRepo_iconCarrier">
-                {' '}
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M20.8477 1.87868C19.6761 0.707109 17.7766 0.707105 16.605 1.87868L2.44744 16.0363C2.02864 16.4551 1.74317 16.9885 1.62702 17.5692L1.03995 20.5046C0.760062 21.904 1.9939 23.1379 3.39334 22.858L6.32868 22.2709C6.90945 22.1548 7.44285 21.8693 7.86165 21.4505L22.0192 7.29289C23.1908 6.12132 23.1908 4.22183 22.0192 3.05025L20.8477 1.87868ZM18.0192 3.29289C18.4098 2.90237 19.0429 2.90237 19.4335 3.29289L20.605 4.46447C20.9956 4.85499 20.9956 5.48815 20.605 5.87868L17.9334 8.55027L15.3477 5.96448L18.0192 3.29289ZM13.9334 7.3787L3.86165 17.4505C3.72205 17.5901 3.6269 17.7679 3.58818 17.9615L3.00111 20.8968L5.93645 20.3097C6.13004 20.271 6.30784 20.1759 6.44744 20.0363L16.5192 9.96448L13.9334 7.3787Z"
-                    fill={color}
-                />{' '}
-            </g>
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/External.tsx b/shared/UI/Icons/External.tsx
deleted file mode 100644
index 74db5453..00000000
--- a/shared/UI/Icons/External.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-export function External(props) {
-    return (
-        <svg xmlns="http://www.w3.org/2000/svg" width={16} height={16} fill="none" {...props}>
-            <path
-                fill="#9BAAC3"
-                fillRule="evenodd"
-                d="M3.25 3a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h9.5a.25.25 0 0 0 .25-.25v-4.6h1.5v4.6a1.75 1.75 0 0 1-1.75 1.75h-9.5a1.75 1.75 0 0 1-1.75-1.75v-9.5c0-.966.784-1.75 1.75-1.75h4.6V3h-4.6Zm8.69 0H9.25V1.5h5.25v5.25H13V4.06L8.53 8.53 7.47 7.47 11.94 3Z"
-                clipRule="evenodd"
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Heart.tsx b/shared/UI/Icons/Heart.tsx
deleted file mode 100644
index de75a7b2..00000000
--- a/shared/UI/Icons/Heart.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-type Props = {
-    color: string;
-};
-
-function Heart({ color }: Props) {
-    return (
-        <svg
-            width="21"
-            height="18"
-            viewBox="0 0 21 18"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <g clipPath="url(#clip0_10212_11070)">
-                <path
-                    fillRule="evenodd"
-                    clipRule="evenodd"
-                    d="M9.73822 16.3677L9.20019 15.9146C8.91844 15.6772 8.63668 15.4414 8.35793 15.204L7.79142 14.7207C7.17396 14.1943 6.53702 13.652 5.91506 13.1097C4.98782 12.3186 4.11805 11.4674 3.31184 10.5623C2.65481 9.84208 2.11563 9.0302 1.71274 8.15447C1.26635 7.18208 1.12571 6.1057 1.30809 5.05762C1.41604 4.42161 1.65427 3.81245 2.00901 3.26534C2.36374 2.71823 2.82794 2.24403 3.37479 1.87015C4.13217 1.33318 5.02619 1.00179 5.96302 0.910748C6.19085 0.885162 6.42003 0.872195 6.64942 0.871911C7.99199 0.869948 9.29397 1.31358 10.3347 2.12762C11.1404 1.49485 12.1101 1.08417 13.1402 0.939516C13.8933 0.815231 14.6651 0.843156 15.4063 1.0215C16.1463 1.19897 16.8385 1.52552 17.437 1.97947C18.4594 2.72544 19.1457 3.81852 19.3553 5.03461C19.5746 6.34599 19.3096 7.68971 18.606 8.83339C18.1252 9.6436 17.5462 10.3963 16.881 11.0758C15.9524 12.0376 14.9698 12.9499 13.9375 13.8088L10.9791 16.326L10.9117 16.3806L10.3197 16.861L9.73822 16.3677Z"
-                    fill={color}
-                />
-                <path
-                    d="M14.0689 1.7261C14.4463 1.72631 14.8222 1.77075 15.1884 1.85843C15.8067 2.00826 16.3852 2.28123 16.8864 2.65961C17.7291 3.27442 18.2944 4.17573 18.466 5.17823C18.6555 6.29238 18.4306 7.43501 17.8306 8.40598C17.3846 9.16086 16.8457 9.86158 16.2255 10.4931C15.3168 11.434 14.3562 12.3275 13.348 13.1699L10.3806 15.6785C10.3686 15.69 10.3536 15.6986 10.3326 15.7159C9.86955 15.3232 9.41095 14.9406 8.95685 14.5537C8.14306 13.8603 7.32627 13.1685 6.51998 12.4665C5.62118 11.7009 4.77795 10.8772 3.99619 10.0012C3.39635 9.34484 2.90414 8.6047 2.53646 7.80617C2.16119 6.98767 2.04296 6.08186 2.19626 5.19981C2.28673 4.67572 2.48392 4.17388 2.77656 3.72296C3.0692 3.27205 3.45155 2.8809 3.90177 2.57187C4.53202 2.12346 5.27645 1.84621 6.05688 1.76925C6.78605 1.68452 7.52572 1.75624 8.22249 1.97926C8.91551 2.19914 9.5481 2.56588 10.0734 3.05229C10.1648 3.13284 10.2442 3.22202 10.3236 3.2997L10.6728 2.9962C11.399 2.34936 12.3124 1.92908 13.2926 1.79083C13.5489 1.74816 13.8087 1.7265 14.0689 1.7261ZM14.0689 3.23943e-05C13.7103 3.29819e-06 13.3524 0.0288725 12.9988 0.0863357C12.0482 0.223345 11.1395 0.554959 10.3341 1.05869C9.23851 0.372761 7.95848 0.00789979 6.65036 0.00866273C6.38493 0.00915047 6.11974 0.0240376 5.85606 0.0532528C4.76326 0.164466 3.72123 0.55378 2.8377 1.18095C2.19832 1.62112 1.65568 2.17801 1.24087 2.81975C0.826058 3.46148 0.547217 4.17545 0.420315 4.92076C0.211696 6.13208 0.374679 7.37549 0.889405 8.49947C1.32892 9.4567 1.91821 10.3439 2.63688 11.1303C3.4675 12.0622 4.36329 12.9388 5.31803 13.7539C5.93999 14.2962 6.57393 14.837 7.18839 15.3592L7.76089 15.8482C8.03965 16.0851 8.3199 16.3214 8.60166 16.5573L9.14418 17.0147L10.3102 18L11.4791 17.0507C11.5016 17.0334 11.5376 17.0061 11.5781 16.9701L14.535 14.463C15.5892 13.5835 16.5933 12.6501 17.5428 11.6668C18.2553 10.9391 18.8751 10.1328 19.3892 9.2647C20.1959 7.94658 20.498 6.39959 20.2435 4.89055C19.9989 3.46078 19.1948 2.17455 17.9954 1.29458C17.2985 0.766723 16.4922 0.387659 15.6305 0.182708C15.1199 0.059748 14.5953 -0.0016173 14.0689 3.23943e-05Z"
-                    fill="#1E2841"
-                />
-            </g>
-            <defs>
-                <clipPath id="clip0_10212_11070">
-                    <rect width="20" height="18" fill="white" transform="translate(0.332031)" />
-                </clipPath>
-            </defs>
-        </svg>
-    );
-}
-
-export default Heart;
diff --git a/shared/UI/Icons/Icons.constants.ts b/shared/UI/Icons/Icons.constants.ts
deleted file mode 100644
index 217c5f8a..00000000
--- a/shared/UI/Icons/Icons.constants.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { Edit } from 'shared/UI/Icons/Edit';
-import { IconBaseProps, IconType } from './Icons.types';
-import { Copy } from './Copy';
-import { Link } from './Link';
-import { OKN } from './OKN';
-import { Pdf } from './Pdf';
-import { Auto } from './Auto';
-import { Pedestrian } from './Pedestrian';
-import { Bycicle } from './Bycicle';
-import { Bike } from './Bike';
-import { PublicTransport } from './PublicTransport';
-import { Children } from './Children';
-import { Download } from './Download';
-import { External } from './External';
-
-export const ICON_BY_TYPE: Record<IconType, (props: IconBaseProps) => JSX.Element> = {
-    [IconType.Copy]: Copy,
-    [IconType.Link]: Link,
-    [IconType.OKN]: OKN,
-    [IconType.Pdf]: Pdf,
-    [IconType.Auto]: Auto,
-    [IconType.Pedestrian]: Pedestrian,
-    [IconType.Bycicle]: Bycicle,
-    [IconType.Bike]: Bike,
-    [IconType.PublicTransport]: PublicTransport,
-    [IconType.Children]: Children,
-    [IconType.Edit]: Edit,
-    [IconType.Download]: Download,
-    [IconType.External]: External,
-};
diff --git a/shared/UI/Icons/Icons.types.ts b/shared/UI/Icons/Icons.types.ts
deleted file mode 100644
index 2c318bd3..00000000
--- a/shared/UI/Icons/Icons.types.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-export enum IconType {
-    Link = 'link',
-    Copy = 'copy',
-    OKN = 'okn',
-    Pdf = 'pdf',
-    Auto = 'auto',
-    Pedestrian = 'pedestrian',
-    Bycicle = 'bycicle',
-    Bike = 'bike',
-    PublicTransport = 'publicTransport',
-    Children = 'children',
-    Edit = 'edit',
-    Download = 'download',
-    External = 'external',
-}
-
-export type IconBaseProps = { color?: string; mix?: string };
diff --git a/shared/UI/Icons/Link.tsx b/shared/UI/Icons/Link.tsx
deleted file mode 100644
index 0eae3e4d..00000000
--- a/shared/UI/Icons/Link.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Link({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            width="14"
-            height="14"
-            viewBox="0 0 14 14"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={mix}
-        >
-            <path
-                d="M6.39583 9.83333H3.91667C3.10972 9.83333 2.42188 9.54896 1.85313 8.98021C1.28438 8.41146 1 7.72361 1 6.91667C1 6.10972 1.28438 5.42187 1.85313 4.85312C2.42188 4.28437 3.10972 4 3.91667 4H6.39583V4.875H3.91667C3.35278 4.875 2.87153 5.07431 2.47292 5.47292C2.07431 5.87153 1.875 6.35278 1.875 6.91667C1.875 7.48056 2.07431 7.96181 2.47292 8.36042C2.87153 8.75903 3.35278 8.95833 3.91667 8.95833H6.39583V9.83333ZM4.57292 7.35417V6.47917H9.09375V7.35417H4.57292ZM7.27083 9.83333V8.95833H9.75C10.3139 8.95833 10.7951 8.75903 11.1937 8.36042C11.5924 7.96181 11.7917 7.48056 11.7917 6.91667C11.7917 6.35278 11.5924 5.87153 11.1937 5.47292C10.7951 5.07431 10.3139 4.875 9.75 4.875H7.27083V4H9.75C10.5569 4 11.2448 4.28437 11.8135 4.85312C12.3823 5.42187 12.6667 6.10972 12.6667 6.91667C12.6667 7.72361 12.3823 8.41146 11.8135 8.98021C11.2448 9.54896 10.5569 9.83333 9.75 9.83333H7.27083Z"
-                fill={color}
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Pdf.tsx b/shared/UI/Icons/Pdf.tsx
deleted file mode 100644
index d20a5c84..00000000
--- a/shared/UI/Icons/Pdf.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Pdf({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            width="16"
-            height="16"
-            viewBox="0 0 16 16"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-            className={mix}
-        >
-            <path
-                d="M6.044 9.22764C6.47927 9.22764 6.80655 8.95927 6.80655 8.46836C6.80655 7.97745 6.47927 7.70909 6.044 7.70909H5.26182V10H5.74618V9.22764H6.044ZM5.74618 8.78255V8.15418H6.02109C6.18145 8.15418 6.30582 8.272 6.30582 8.46836C6.30582 8.66473 6.18145 8.78255 6.02109 8.78255H5.74618ZM7.94517 10C8.59317 10 8.9139 9.52218 8.9139 8.85455C8.9139 8.18691 8.59317 7.70909 7.94517 7.70909H7.18263V10H7.94517ZM7.63426 9.55491V8.15418H7.94517C8.24626 8.15418 8.41645 8.46182 8.41645 8.85455C8.41645 9.24727 8.24626 9.55491 7.94517 9.55491H7.63426ZM10.6523 9.10655V8.66145H9.82431V8.15418H10.6523L10.7178 7.70909H9.33994V10H9.82431V9.10655H10.6523Z"
-                fill={color}
-            />
-            <g clipPath="url(#clip0_6198_10391)">
-                <path
-                    d="M12.2071 4.77766L12.5607 4.4241L12.2071 4.77766ZM9.22234 1.79289L9.5759 1.43934L9.22234 1.79289ZM4.5 2H8.51524V1H4.5V2ZM4 2.5C4 2.22386 4.22386 2 4.5 2V1C3.67157 1 3 1.67157 3 2.5H4ZM4 12.5V2.5H3V12.5H4ZM4.5 13C4.22386 13 4 12.7761 4 12.5H3C3 13.3284 3.67157 14 4.5 14V13ZM11.5 13H4.5V14H11.5V13ZM12 12.5C12 12.7761 11.7761 13 11.5 13V14C12.3284 14 13 13.3284 13 12.5H12ZM12 5.48476V12.5H13V5.48476H12ZM12.5607 4.4241L9.5759 1.43934L8.86879 2.14645L11.8536 5.13121L12.5607 4.4241ZM13 5.48476C13 5.08694 12.842 4.70541 12.5607 4.4241L11.8536 5.13121C11.9473 5.22498 12 5.35216 12 5.48476H13ZM8.51524 2C8.64784 2 8.77502 2.05268 8.86879 2.14645L9.5759 1.43934C9.29459 1.15804 8.91306 1 8.51524 1V2Z"
-                    fill={color}
-                />
-                <path
-                    d="M8.5 2V4.5C8.5 5.05228 8.94772 5.5 9.5 5.5H12"
-                    stroke="#C8A563"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                />
-            </g>
-            <defs>
-                <clipPath id="clip0_6198_10391">
-                    <rect width="16" height="16" fill="white" />
-                </clipPath>
-            </defs>
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/Pedestrian.tsx b/shared/UI/Icons/Pedestrian.tsx
deleted file mode 100644
index c14ad5ab..00000000
--- a/shared/UI/Icons/Pedestrian.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function Pedestrian({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            className={mix}
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M13.0241 16.2724L13.5041 15.1204C12.3841 14.6404 11.6641 13.4884 11.2961 12.3524L10.1121 12.7364C10.5921 14.2084 11.5521 15.6324 13.0241 16.2724ZM9.55209 3.64844C8.89609 3.64844 8.36809 4.19244 8.36809 4.84844C8.36809 5.50444 8.89609 6.03244 9.55209 6.03244C10.2241 6.03244 10.7521 5.50444 10.7521 4.84844C10.7521 4.19244 10.2241 3.64844 9.55209 3.64844ZM8.97609 9.80844L8.04809 8.99244C7.68009 9.40844 7.04009 9.66444 6.49609 9.76044L6.72009 10.9924C7.53609 10.8484 8.43209 10.4484 8.97609 9.80844ZM10.5441 11.4244C10.7521 11.2644 10.8481 11.1204 10.8481 10.8964C10.8481 10.8484 10.8321 10.7204 10.8161 10.6724C10.5761 9.77644 10.4481 8.81644 10.4161 7.88844C11.6641 8.40044 12.0801 9.56844 12.0801 10.8644H13.3121C13.3121 8.48044 11.6001 6.49644 9.82409 6.49644C9.40809 6.49644 9.13609 6.76844 9.13609 7.39244C9.13609 8.40044 9.37609 10.0164 9.53609 10.6404C7.80809 12.0964 7.08809 13.9844 6.73609 16.1604L7.96809 16.3524C8.28809 14.3524 8.84809 12.6564 10.5441 11.4244Z"
-                fill={color}
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/PublicTransport.tsx b/shared/UI/Icons/PublicTransport.tsx
deleted file mode 100644
index 83ff0132..00000000
--- a/shared/UI/Icons/PublicTransport.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { IconBaseProps } from './Icons.types';
-
-export function PublicTransport({ color, mix }: IconBaseProps) {
-    return (
-        <svg
-            className={mix}
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-        >
-            <path
-                d="M16.752 8.12839H15.568V11.0244H16.752V8.12839ZM4.43205 8.12839H3.24805V11.0244H4.43205V8.12839ZM13.728 6.96039H6.27205V5.56839H13.728V6.96039ZM13.728 11.4564H6.27205V8.12839H13.728V11.4564ZM5.02405 5.64839V15.6004H6.70405V14.7684H13.296V15.6004H14.976V5.64839C14.976 4.96039 14.416 4.40039 13.728 4.40039H6.27205C5.58405 4.40039 5.02405 4.96039 5.02405 5.64839ZM5.85605 13.1204C5.85605 12.6564 6.20805 12.2884 6.67205 12.2884C7.13605 12.2884 7.50405 12.6564 7.50405 13.1204C7.50405 13.5844 7.13605 13.9364 6.67205 13.9364C6.20805 13.9364 5.85605 13.5844 5.85605 13.1204ZM12.496 13.1204C12.496 12.6564 12.848 12.2884 13.312 12.2884C13.776 12.2884 14.144 12.6564 14.144 13.1204C14.144 13.5844 13.776 13.9364 13.312 13.9364C12.848 13.9364 12.496 13.5844 12.496 13.1204Z"
-                fill={color}
-            />
-        </svg>
-    );
-}
diff --git a/shared/UI/Icons/index.tsx b/shared/UI/Icons/index.tsx
deleted file mode 100644
index 53abf79b..00000000
--- a/shared/UI/Icons/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { useMemo } from 'react';
-
-import { ICON_BY_TYPE } from './Icons.constants';
-import { IconType, IconBaseProps } from './Icons.types';
-
-type IconProps = IconBaseProps & {
-    type: IconType;
-};
-
-export function Icon({ type, ...baseProps }: IconProps) {
-    const IconComponent = useMemo(() => ICON_BY_TYPE[type], [type]);
-
-    return <IconComponent {...baseProps} />;
-}
diff --git a/shared/helpers/getYearNameByValue.ts b/shared/helpers/getYearNameByValue.ts
index 37cec0a3..f2abb40c 100644
--- a/shared/helpers/getYearNameByValue.ts
+++ b/shared/helpers/getYearNameByValue.ts
@@ -23,3 +23,9 @@ export function getYearNameByValue(year: number) {
             return 'лет';
     }
 }
+
+export function getYearStringByValue(year: string | number) {
+    const age = new Date().getFullYear() - Number(String(year)?.match(/\d{4}/)?.[0]);
+
+    return `${String(age)} ${getYearNameByValue(age)}`;
+}
diff --git a/state/config.ts b/state/config.ts
new file mode 100644
index 00000000..8926ef14
--- /dev/null
+++ b/state/config.ts
@@ -0,0 +1,505 @@
+import { CircleLayer, FillLayer, LineLayer } from 'react-map-gl';
+import { getLayerStyle } from 'features/Map/helpers/getFeatureState';
+import { colorLuminance } from 'features/Map/helpers/colorLuminance';
+import { FilterType } from 'types/Filters.types';
+
+export type SourcePropertyValues =
+    | Record<
+          string,
+          {
+              color: string;
+              description?: string;
+          }
+      >
+    | Array<{ from: number; to: number; value: number; color: string }>;
+
+export interface SourceProperty {
+    id: string;
+    type: string;
+    title?: string;
+    values?: SourcePropertyValues;
+    deps?: string;
+}
+
+interface Source {
+    id: string;
+    path?: string;
+    properties?: Record<string, SourceProperty>;
+    card?: { type: string; id?: string; deps?: string }[];
+    copyright: Copyright['id'][];
+}
+
+export interface IVisualisationLayer {
+    id: string;
+    type: string;
+    source: Source['id'];
+    paint: CircleLayer['paint'] | LineLayer['paint'] | FillLayer['paint'];
+    property?: string;
+    openable?: boolean;
+}
+
+interface Filter {
+    id: string;
+    type: string;
+    property: string;
+    source: Source['id'];
+    filterVisualisationLayers: IVisualisationLayer['id'][];
+}
+
+export interface Copyright {
+    id: string;
+    name: string;
+    link: string;
+}
+
+export interface ILayer {
+    id: string;
+    title: string;
+    filters: Filter['id'][];
+    visualisationLayers: IVisualisationLayer['id'][];
+}
+
+interface App {
+    copyright: Record<string, Copyright>;
+    sources: Record<string, Source>;
+    layers: Record<string, ILayer>;
+    filters: Record<string, Filter>;
+    visualisationLayers: Record<string, IVisualisationLayer>;
+}
+
+export const state: App = {
+    copyright: {
+        osm: {
+            id: 'osm',
+            name: 'OpenStreetMap',
+            link: 'https://www.openstreetmap.org/',
+        },
+        okn: {
+            id: 'okn',
+            name: 'Объекты культурного наследия Свердловской области',
+            link: 'https://okn.midural.ru/kategorii/obekty-kulturnogo-naslediya-sverdlovskoy-oblasti',
+        },
+        howoldthishouse: {
+            id: 'howoldthishouse',
+            name: 'Карта возраста домов',
+            link: 'https://how-old-is-this.house/',
+        },
+        domaekb: {
+            id: 'domaekb',
+            name: 'Жилые дома Екатеринбурга',
+            link: 'https://domaekb.ru',
+        },
+        mingkh: {
+            id: 'mingkh',
+            name: 'МинЖКХ',
+            link: 'https://mingkh.ru',
+        },
+        ekbDesignCode: {
+            id: 'ekbDesignCode',
+            name: 'Дизайн-код Ектеринбурга',
+            link: 'https://ekaterinburg.design',
+        },
+        dtp: {
+            id: 'dtp',
+            name: 'Карта ДТП',
+            link: 'https://dtp-stat.ru/',
+        },
+        ekbQuarter: {
+            id: 'ekbQuarter',
+            name: 'екатеринбург.рф',
+            link: 'https://екатеринбург.рф/справка/квартальные',
+        },
+        ekbDesignCodeMap: {
+            id: 'ekbDesignCodeMap',
+            name: 'Карта объектов «Дизайн-кода»',
+            link: 'https://map.ekaterinburg.design',
+        },
+    },
+    sources: {
+        'building-tile': {
+            id: 'building-tile',
+            copyright: ['osm', 'howoldthishouse', 'domaekb', 'mingkh'],
+            card: [
+                { type: 'value', id: 'building:management' },
+                { type: 'value', id: 'building:health' },
+                { type: 'value', id: 'building:series' },
+                { type: 'value', id: 'building:levels' },
+                { type: 'divider' },
+                { type: 'value', id: 'building:year' },
+                { type: 'age', id: 'building:age', deps: 'building:year' },
+            ],
+            properties: {
+                'building:year': {
+                    title: 'Когда построили',
+                    id: 'building:year',
+                    type: 'range',
+                    values: [
+                        { from: 1723, to: 1860, value: 1, color: '#ff7461' },
+                        { from: 1860, to: 1917, value: 1, color: '#ffA34e' },
+                        { from: 1917, to: 1930, value: 1, color: '#fee678' },
+                        { from: 1930, to: 1940, value: 1, color: '#85e634' },
+                        { from: 1940, to: 1955, value: 1, color: '#0f9467' },
+                        { from: 1955, to: 1991, value: 1, color: '#71b3ff' },
+                        { from: 1991, to: 2010, value: 1, color: '#c270ff' },
+                        { from: 2010, to: 2024, value: 1, color: '#f97bcf' },
+                    ],
+                },
+                'building:levels': {
+                    title: 'Количество этажей',
+                    id: 'building:levels',
+                    type: 'range',
+                    values: [
+                        { from: 1, to: 3, value: 1, color: '#006adb' },
+                        { from: 3, to: 5, value: 1, color: '#0084e2' },
+                        { from: 5, to: 9, value: 1, color: '#009ee1' },
+                        { from: 9, to: 12, value: 1, color: '#00b7d9' },
+                        { from: 12, to: 16, value: 1, color: '#00cfc5' },
+                        { from: 16, to: 21, value: 1, color: '#00e7a3' },
+                        { from: 21, to: 25, value: 1, color: '#72f674' },
+                        { from: 25, to: 31, value: 1, color: '#c0fc49' },
+                        { from: 31, to: 52, value: 1, color: '#ffea00' },
+                    ],
+                },
+                'building:health': {
+                    title: 'Износ',
+                    id: 'building:health',
+                    type: 'range',
+                    values: [
+                        { from: 0, to: 10, value: 1, color: '#006b29' },
+                        { from: 10, to: 20, value: 1, color: '#24782a' },
+                        { from: 20, to: 30, value: 1, color: '#73a426' },
+                        { from: 30, to: 40, value: 1, color: '#b6c718' },
+                        { from: 40, to: 50, value: 1, color: '#e9e005' },
+                        { from: 50, to: 60, value: 1, color: '#ffea00' },
+                        { from: 60, to: 70, value: 1, color: '#ffdc00' },
+                        { from: 70, to: 80, value: 1, color: '#ffbb00' },
+                        { from: 80, to: 90, value: 1, color: '#ff8a00' },
+                        { from: 90, to: 100, value: 1, color: '#ff0000' },
+                    ],
+                },
+                'building:facade': {
+                    id: 'building:facade',
+                    type: 'value',
+                    values: {},
+                },
+                ['osm:id']: {
+                    title: 'Osm ID',
+                    id: 'osm:id',
+                    type: 'value',
+                },
+                ['addr:street']: {
+                    title: 'Улица',
+                    id: 'addr:street',
+                    type: 'value',
+                },
+                ['addr:housenumber']: {
+                    title: 'Номер дома',
+                    id: 'addr:housenumber',
+                    type: 'value',
+                },
+                ['building:management']: {
+                    title: 'Управляющая компания',
+                    id: 'building:management',
+                    type: 'value',
+                },
+                ['building:series']: {
+                    title: 'Серия дома',
+                    id: 'building:series',
+                    type: 'value',
+                },
+                ['building:condition']: {
+                    title: 'Состояние',
+                    id: 'building:condition',
+                    type: 'value',
+                },
+                ['building:emergency']: {
+                    title: 'Аварийность',
+                    id: 'building:emergency',
+                    type: 'value',
+                },
+                'building:age': {
+                    id: 'age',
+                    title: 'Возраст здания',
+                    type: 'age',
+                    deps: 'building:year',
+                },
+            },
+        },
+        'ekb-lines-source': {
+            id: 'ekb-lines-source',
+            path: '/ekb-color-lines.json',
+            copyright: [],
+            properties: {
+                type: {
+                    id: 'type',
+                    type: 'value',
+                    values: {
+                        'Красная линия': {
+                            color: '#e31e24',
+                            description: 'Маршрут по\u00A0историческому центру города',
+                        },
+                        'Синяя линия': {
+                            color: '#189eda',
+                            description: 'Маршрут по\u00A0местам, связанным с\u00A0царской семьей',
+                        },
+                        'Фиолетовая линия': {
+                            color: '#9747ff',
+                            description: 'Арт-объекты фестиваля уличного искусства «Стенограффия»',
+                        },
+                    },
+                },
+            },
+        },
+        'ekb-points-source': {
+            id: 'ekb-lines',
+            copyright: [],
+            path: '/ekb-color-points.json',
+            properties: {
+                type: {
+                    id: 'type',
+                    type: 'value',
+                    values: {
+                        'Красная линия': {
+                            color: '#e31e24',
+                            description: 'Маршрут по\u00A0историческому центру города',
+                        },
+                        'Синяя линия': {
+                            color: '#189eda',
+                            description: 'Маршрут по\u00A0местам, связанным с\u00A0царской семьей',
+                        },
+                        'Фиолетовая линия': {
+                            color: '#9747ff',
+                            description: 'Арт-объекты фестиваля уличного искусства «Стенограффия»',
+                        },
+                    },
+                },
+            },
+        },
+        'ekb-designcode-source': {
+            id: 'ekb-designcode-source',
+            path: '/ekb-design-code.json',
+            copyright: ['ekbDesignCode'],
+            properties: {
+                type: {
+                    id: 'type',
+                    type: 'value',
+                    values: {
+                        'Обычные адресные таблички': { color: '#ff640a' },
+                        'Таблички ЧО': { color: '#e63223' },
+                        'Памятные таблички': { color: '#f758b6' },
+                        'Исторические адресные таблички': { color: '#aa9b46' },
+                        'Логотипы и айдентика': { color: '#00b400' },
+                        'Навигационные стелы': { color: '#ffd400' },
+                        'Таблички ОКН': { color: '#00b4ff' },
+                        'Фризы остановок': { color: '#55647d' },
+                        'Уличная мебель': { color: '#5820e4' },
+                        Светофор: { color: '#965a14' },
+                        Транспорт: { color: '#006d4e' },
+                        'Настенные таблички': { color: '#a00041' },
+                        'Столбы со стрелками': { color: '#86e621' },
+                    },
+                },
+            },
+        },
+        'ekb-dtp-source': {
+            id: 'ekb-dtp-source',
+            path: '/ekb-dtp.json',
+            copyright: ['dtp'],
+            properties: {
+                severity: {
+                    id: 'severity',
+                    type: 'value',
+                    values: {
+                        Легкий: { color: '#36ccaa' },
+                        Тяжёлый: { color: '#fdcf4e' },
+                        'С погибшими': { color: '#ff0000' },
+                    },
+                },
+            },
+        },
+        'ekb-facades-source': {
+            id: 'ekb-facades-source',
+            path: '/ekb-facades.json',
+            properties: {},
+            copyright: ['ekbDesignCode'],
+        },
+        'ekb-quarter-source': {
+            id: 'ekb-quarter-source',
+            path: '/ekb-quarters.json',
+            copyright: ['ekbQuarter'],
+            properties: {},
+        },
+    },
+    layers: {
+        ekbHouseAge: {
+            title: 'Возраст домов',
+            id: 'ekbHouseAge',
+            filters: [],
+            visualisationLayers: ['ekbHouseAgeLayer'],
+        },
+        ekbHouseLevels: {
+            title: 'Этажность домов',
+            id: 'ekbHouseLevels',
+            filters: [],
+            visualisationLayers: ['ekbHouseLevelsLayer'],
+        },
+        ekbHouseHealth: {
+            title: 'Степень износа домов',
+            id: 'ekbHouseHealth',
+            filters: [],
+            visualisationLayers: ['ekbHouseHealthLayer'],
+        },
+        okn: {
+            title: 'Объекты культурного наследния',
+            id: 'okn',
+            visualisationLayers: [],
+            filters: [],
+        },
+        ekbDesignCode: {
+            title: '«Дизайн-код Екатеринбурга»',
+            id: 'ekbDesignCode',
+            visualisationLayers: ['ekbDesignCodeLayer'],
+            filters: [FilterType.DesignCode],
+        },
+        dtp: {
+            title: 'ДТП',
+            id: 'dtp',
+            visualisationLayers: [],
+            filters: ['dtpSeverity', 'dtpParticipants'],
+        },
+        ekbLines: {
+            title: 'Туристические маршруты',
+            id: 'ekbLines',
+            visualisationLayers: ['ekbLinesLayer', 'ekbPointsLayer'],
+            filters: [FilterType.Line],
+        },
+        ekbQuarter: {
+            title: 'Квартальные',
+            id: 'ekbQuarter',
+            visualisationLayers: ['ekbQuarterLayer', 'ekbQuarterLayerStroke'],
+            filters: [],
+        },
+        ekbFacades: {
+            title: 'Дизайн-код фасадов',
+            id: 'ekbFacades',
+            filters: [],
+            visualisationLayers: ['ekbFacadesLayer'],
+        },
+    },
+    filters: {
+        dtpSeverity: {
+            id: 'dtpSeverity',
+            type: 'checkboxes',
+            filterVisualisationLayers: [],
+            source: 'ekb-dtp-source',
+            property: 'severity',
+        },
+        dtpParticipants: {
+            id: 'dtpSeverity',
+            type: 'checkboxes',
+            filterVisualisationLayers: [],
+            source: 'ekb-dtp-source',
+            property: 'participants', // TODO: array
+        },
+        [FilterType.Line]: {
+            id: FilterType.Line,
+            type: 'checkboxes',
+            filterVisualisationLayers: ['ekbPointsLayer', 'ekbLinesLayer'],
+            source: 'ekb-points-source',
+            property: 'type',
+        },
+        [FilterType.DesignCode]: {
+            id: FilterType.DesignCode,
+            type: 'checkboxes',
+            filterVisualisationLayers: ['ekbDesignCodeLayer'],
+            source: 'ekb-designcode-source',
+            property: 'type',
+        },
+    },
+    visualisationLayers: {
+        ekbHouseAgeLayer: {
+            id: 'ekbHouseAgeLayer',
+            type: 'building',
+            source: 'building-tile',
+            paint: {},
+            property: 'building:year',
+            openable: true,
+        },
+        ekbHouseLevelsLayer: {
+            id: 'ekbHouseLevelsLayer',
+            type: 'building',
+            source: 'building-tile',
+            paint: {},
+            property: 'building:levels',
+            openable: true,
+        },
+        ekbHouseHealthLayer: {
+            id: 'ekbHouseHealthLayer',
+            type: 'building',
+            source: 'building-tile',
+            paint: {},
+            property: 'building:health',
+            openable: true,
+        },
+        ekbLinesLayer: {
+            id: 'ekbLinesLayer',
+            type: 'line',
+            source: 'ekb-lines-source',
+            property: 'type',
+            paint: {
+                'line-width': 3,
+            },
+        },
+        ekbPointsLayer: {
+            id: 'ekbPointsLayer',
+            type: 'circle',
+            source: 'ekb-points-source',
+            property: 'type',
+            openable: true,
+            paint: {
+                'circle-stroke-width': 1,
+                'circle-radius': getLayerStyle<number>({ initial: 8, hover: 10, active: 12 }),
+            },
+        },
+        ekbQuarterLayer: {
+            id: 'ekbQuarterLayer',
+            type: 'fill',
+            source: 'ekb-quarter-source',
+            openable: true,
+            paint: {
+                'fill-color': getLayerStyle<string>({
+                    initial: '#9AADCC',
+                    hover: colorLuminance('#9AADCC', 0.2),
+                    active: colorLuminance('#9AADCC', 0.4),
+                }),
+                'fill-opacity': 0.6,
+            },
+        },
+        ekbQuarterLayerStroke: {
+            id: 'ekbQuarterLayerStroke',
+            source: 'ekb-quarter-source',
+            type: 'line',
+            openable: true,
+            paint: {
+                'line-color': '#000',
+                'line-opacity': 0.5,
+                'line-width': 1.5,
+            },
+        },
+        ekbDesignCodeLayer: {
+            id: 'ekbDesignCodeLayer',
+            type: 'marker-image',
+            source: 'ekb-designcode-source',
+            property: 'type',
+            openable: true,
+            paint: {},
+        },
+        ekbFacadesLayer: {
+            id: 'ekbHouseHealthLayer',
+            type: 'building',
+            source: 'building-tile',
+            paint: {},
+            openable: true,
+        },
+    },
+};
diff --git a/state/features/dataLayers.ts b/state/features/dataLayers.ts
index 22883ae4..07b51e87 100644
--- a/state/features/dataLayers.ts
+++ b/state/features/dataLayers.ts
@@ -1,11 +1,23 @@
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
-
 import { getFilterTypeFromHash } from 'shared/helpers/hash';
-import { SetFilterParamsPayload, SetFilterPayload, State, ToggleDataPayload } from 'state/state';
+import { State } from 'state/state';
 import { FilterType } from 'types/Filters.types';
 
+export interface SetFilterPayload {
+    activeFilter: string;
+    activeFilterParams: any;
+}
+
+export interface SetFilterParamsPayload {
+    activeFilterParams: any;
+}
+
+export interface ToggleDataPayload {
+    type: string;
+}
+
 export const initialState: State['dataLayer'] = {
-    activeFilter: (getFilterTypeFromHash() as FilterType) || Object.values(FilterType)[0],
+    activeFilter: (getFilterTypeFromHash() as string) || Object.values(FilterType)[0],
     activeFilterParams: null,
 };
 
@@ -22,6 +34,21 @@ const dataLayerSlice = createSlice({
             const { activeFilterParams } = action.payload;
             state.activeFilterParams = activeFilterParams;
         },
+        updateFilterParams(
+            state,
+            action: PayloadAction<{
+                activeFilter: string;
+                activeFilterParams: any;
+            }>,
+        ) {
+            const { activeFilterParams, activeFilter } = action.payload;
+            state.activeFilter = activeFilter;
+            state.activeFilterParams = state.activeFilterParams || {};
+            state.activeFilterParams[activeFilter] = {
+                ...state.activeFilterParams[activeFilter],
+                ...activeFilterParams[activeFilter],
+            };
+        },
         toggleData(state, action: PayloadAction<ToggleDataPayload>) {
             const { type } = action.payload;
 
@@ -31,6 +58,7 @@ const dataLayerSlice = createSlice({
     },
 });
 
-export const { toggleData, setFilter, setFilterParams } = dataLayerSlice.actions;
+export const { toggleData, setFilter, setFilterParams, updateFilterParams } =
+    dataLayerSlice.actions;
 
 export const dataLayerReducer = dataLayerSlice.reducer;
diff --git a/state/state.ts b/state/state.ts
index 9e374e92..49cf29b5 100644
--- a/state/state.ts
+++ b/state/state.ts
@@ -1,41 +1,6 @@
-import { FilterType } from 'types/Filters.types';
-import { OknAreaType } from 'features/OKN/oknConstants';
-import { LineObject, LineType } from 'features/Lines/lineType';
-
-import { MapItemType } from 'types/Content.types';
-
-export interface LinesData {
-    lines: {
-        type: LineType;
-        id: number;
-    }[];
-    points: {
-        type: LineType;
-        data: LineObject[];
-    }[];
-}
-
-export interface LinesState {
-    data: LinesData;
-    mapItemType: MapItemType;
-}
-
 export interface State {
     dataLayer: {
-        activeFilter: FilterType | OknAreaType;
+        activeFilter: string;
         activeFilterParams: any;
     };
 }
-
-export interface SetFilterPayload {
-    activeFilter: FilterType | OknAreaType;
-    activeFilterParams: any;
-}
-
-export interface SetFilterParamsPayload {
-    activeFilterParams: any;
-}
-
-export interface ToggleDataPayload {
-    type: FilterType | OknAreaType;
-}
diff --git a/types/Content.types.ts b/types/Content.types.ts
index ebb829cc..2daa62d8 100644
--- a/types/Content.types.ts
+++ b/types/Content.types.ts
@@ -1,10 +1,10 @@
 export enum MapItemType {
-    DesignCode = 'designCode',
+    DesignCode = 'ekbDesignCodeLayer',
     DTP = 'dtp',
     Houses = 'houses',
-    LinePoint = 'LinePoint',
+    LinePoint = 'ekbPointsLayer',
     OKN = 'okn',
-    Quarter = 'quarter',
+    Quarter = 'ekbQuarterLayer',
 }
 
 export type ContentConfig = Record<
diff --git a/types/Filters.types.ts b/types/Filters.types.ts
index 2a4c5a8e..b5b91d62 100644
--- a/types/Filters.types.ts
+++ b/types/Filters.types.ts
@@ -20,7 +20,7 @@ export enum FilterType {
 
 export interface FilterConfigItem {
     title: string;
-    component: ReactNode;
+    component?: ReactNode;
     source?: Source[];
     isVerified: boolean;
 }
diff --git a/types/Sources.types.ts b/types/Sources.types.ts
deleted file mode 100644
index 0c6691ee..00000000
--- a/types/Sources.types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export enum SourceType {
-    osm = 'osm',
-    okn = 'okn',
-    howoldthishouse = 'howoldthishouse',
-    domaekb = 'domaekb',
-    mingkh = 'mingkh',
-    ekaterinburgdesign = 'ekaterinburgdesign',
-    dtp = 'dtp',
-    ekb_quarter = 'ekb_quarter',
-    design_objects_map = 'design_objects_map',
-}
-
-export type SourceInfo = {
-    name: string;
-    link: string;
-    data: string;
-};
-
-export type SourcesConfig = Record<SourceType, SourceInfo>;