diff --git a/client/api/main-page/main-page.types.ts b/client/api/main-page/main-page.types.ts
index 01944247..ccf18d92 100644
--- a/client/api/main-page/main-page.types.ts
+++ b/client/api/main-page/main-page.types.ts
@@ -38,6 +38,7 @@ export interface Card {
         cardId: null;
         subtitle: null | string;
         subtitleColor: string;
+        dynamicId: string;
         createdAt: Date;
         updatedAt: Date;
         publishedAt: Date;
diff --git a/client/components/MainPage/Card/Card.module.css b/client/components/MainPage/Card/Card.module.css
index ec3cf778..a0abb1b6 100644
--- a/client/components/MainPage/Card/Card.module.css
+++ b/client/components/MainPage/Card/Card.module.css
@@ -12,6 +12,7 @@
     --CardButtonColor: inherit;
     --CardButtonBgrColor: transparent;
 
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
diff --git a/client/components/MainPage/Card/Card.tsx b/client/components/MainPage/Card/Card.tsx
index 07f955ff..efef1598 100644
--- a/client/components/MainPage/Card/Card.tsx
+++ b/client/components/MainPage/Card/Card.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import classNames from 'classnames/bind';
 import { CardProps } from './Card.types';
 
@@ -23,6 +22,7 @@ export function Card({
     buttonBackground,
     subtitle,
     subtitleColor,
+    dynamicContent
 }: CardProps) {
 
     return (
@@ -44,13 +44,20 @@ export function Card({
                 {title}
             </div>}
 
-            {subtitle && <div className={cn(styles.CardSubtitle)}>
-                {subtitle}
-            </div>}
+            {
+                dynamicContent
+                    ? dynamicContent
+                    : <>
 
-            {button && <div className={cn(styles.CardButton)}>
-                {button}
-            </div>}
+                        {subtitle && <div className={cn(styles.CardSubtitle)}>
+                            {subtitle}
+                        </div>}
+
+                        {button && <div className={cn(styles.CardButton)}>
+                            {button}
+                        </div>}
+                    </>
+            }
         </a>
     );
 }
diff --git a/client/components/MainPage/Card/Card.types.ts b/client/components/MainPage/Card/Card.types.ts
index c3fe86cf..5e0b3f7c 100644
--- a/client/components/MainPage/Card/Card.types.ts
+++ b/client/components/MainPage/Card/Card.types.ts
@@ -1,3 +1,5 @@
+import { ReactElement } from "react";
+
 export type CardProps = {
     title: string;
     titleColor: string;
@@ -11,5 +13,6 @@ export type CardProps = {
     subtitle: string;
     subtitleColor: string;
     invert: boolean;
+    dynamicContent: ReactElement;
     key: number;
 };
diff --git a/client/components/MainPage/Card/CardDynamic/CardTrafficJams.module.css b/client/components/MainPage/Card/CardDynamic/CardTrafficJams.module.css
new file mode 100644
index 00000000..ce4e1d91
--- /dev/null
+++ b/client/components/MainPage/Card/CardDynamic/CardTrafficJams.module.css
@@ -0,0 +1,6 @@
+.CardTrafficJams {
+    position: absolute;
+    bottom: .35em;
+    right: .45em;
+    font-size: 100px;
+}
diff --git a/client/components/MainPage/Card/CardDynamic/CardTrafficJams.tsx b/client/components/MainPage/Card/CardDynamic/CardTrafficJams.tsx
new file mode 100644
index 00000000..6a472d8b
--- /dev/null
+++ b/client/components/MainPage/Card/CardDynamic/CardTrafficJams.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames/bind';
+
+import styles from './CardTrafficJams.module.css';
+
+const cn = classNames.bind(styles);
+
+export function CardTrafficJams({ score }) {
+    return (
+        <>
+            {/* Remove card background */}
+            <style dangerouslySetInnerHTML={{
+                __html: `[class*="Card_Card"]:has([class*="CardTrafficJams"]) {background: white;}`
+            }}
+            />
+            <div className={cn(styles.CardTrafficJams)}>
+                {score}
+            </div>
+        </>
+    )
+}
diff --git a/client/components/MainPage/Card/CardDynamic/CardTransportA11y.module.css b/client/components/MainPage/Card/CardDynamic/CardTransportA11y.module.css
new file mode 100644
index 00000000..0920e62c
--- /dev/null
+++ b/client/components/MainPage/Card/CardDynamic/CardTransportA11y.module.css
@@ -0,0 +1,18 @@
+.CardTransportA11y {
+    color: rgba(255,255,255,.9);
+    font-size: 1.1em;
+}
+
+.CardTransportA11yList {
+    display: flex;
+    gap: 16px;
+}
+
+.CardTransportA11yItem {
+    font-weight: 600;
+    text-align: left;
+}
+
+.CardTransportA11yItem dd {
+    margin: 4px 0 0;
+}
diff --git a/client/components/MainPage/Card/CardDynamic/CardTransportA11y.tsx b/client/components/MainPage/Card/CardDynamic/CardTransportA11y.tsx
new file mode 100644
index 00000000..16701bca
--- /dev/null
+++ b/client/components/MainPage/Card/CardDynamic/CardTransportA11y.tsx
@@ -0,0 +1,32 @@
+import classNames from 'classnames/bind';
+
+import styles from './CardTransportA11y.module.css';
+
+const cn = classNames.bind(styles);
+
+export function CardTransportA11y({ buses, trolls, trams }) {
+    return (
+        <div className={cn(styles.CardTransportA11y)}>
+            <p>
+                Сейчас в городе ходит низкопольный транспорт:
+            </p>
+
+            <dl className={cn(styles.CardTransportA11yList)}>
+                <div className={cn(styles.CardTransportA11yItem)}>
+                    <dt>Автобусы</dt>
+                    <dd>{buses}</dd>
+                </div>
+
+                <div className={cn(styles.CardTransportA11yItem)}>
+                    <dt>Троллейбусы</dt>
+                    <dd>{trolls}</dd>
+                </div>
+
+                <div className={cn(styles.CardTransportA11yItem)}>
+                    <dt>Трамваи</dt>
+                    <dd>{trams}</dd>
+                </div>
+            </dl>
+        </div>
+    )
+}
diff --git a/client/components/MainPage/MainPage.tsx b/client/components/MainPage/MainPage.tsx
index de0c346e..a3491545 100644
--- a/client/components/MainPage/MainPage.tsx
+++ b/client/components/MainPage/MainPage.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 import classNames from 'classnames/bind';
 import { MainPageTypes } from './MainPage.types';
 import { Card } from './Card/Card';
+import { CardTrafficJams } from './Card/CardDynamic/CardTrafficJams';
+import { CardTransportA11y } from './Card/CardDynamic/CardTransportA11y';
 
 import Logo from './Logo.svg';
 
@@ -12,9 +14,15 @@ import { Marquee } from './Marquee/Marquee';
 
 const cn = classNames.bind(styles);
 
-export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeItems }: MainPageTypes) {
-    // TODO Output data to dynamic cards
-    console.log({ trafficJams, a11yTransportCounters });
+export function MainPage({ cards, cardsDynamicData, marqueeItems }: MainPageTypes) {
+    const getDynamicContent = (dynamicId) => {
+        switch (dynamicId) {
+            case 'a11y-transport':
+                return <CardTransportA11y {...cardsDynamicData.a11yTransportCounters} />
+            case 'traffic-jams':
+                return <CardTrafficJams score={cardsDynamicData.trafficJams} />
+        }
+    }
 
     return (
         <div className={cn(styles.MainPage)}>
@@ -27,8 +35,8 @@ export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeIte
                 <div className={styles.MainPageCardGrid}>
                     {cards
                         .sort((a, b) => a.attributes.priority - b.attributes.priority)
-                        .map(({ id, attributes }) => (
-                            <Card
+                        .map(({ id, attributes }) => {
+                            return <Card
                                 title={attributes.title}
                                 titleColor={attributes.titleColor}
                                 titleBackground={attributes.titleBackground}
@@ -41,9 +49,10 @@ export function MainPage({ cards, trafficJams, a11yTransportCounters, marqueeIte
                                 subtitle={attributes.subtitle}
                                 subtitleColor={attributes.subtitleColor}
                                 invert={attributes.invert}
+                                dynamicContent={getDynamicContent(attributes.dynamicId)}
                                 key={id}
                             />
-                        ))}
+                        })}
                 </div>
 
                 <Marquee items={marqueeItems.map(({ attributes: { message } }) => message)} />
diff --git a/client/components/MainPage/MainPage.types.tsx b/client/components/MainPage/MainPage.types.tsx
index 51644b16..3803e43a 100644
--- a/client/components/MainPage/MainPage.types.tsx
+++ b/client/components/MainPage/MainPage.types.tsx
@@ -7,8 +7,10 @@ import type {
 
 export type MainPageTypes = {
     cards: Card[];
-    trafficJams: number;
-    a11yTransportCounters: AccessibilityTransportCounters,
+    cardsDynamicData: {
+        trafficJams: number;
+        a11yTransportCounters: AccessibilityTransportCounters,
+    };
     notifications: Notification[];
     marqueeItems: Marquee[];
 };
diff --git a/client/pages/index.tsx b/client/pages/index.tsx
index 99978ff8..7dbbc3d6 100644
--- a/client/pages/index.tsx
+++ b/client/pages/index.tsx
@@ -19,8 +19,10 @@ export async function getStaticProps() {
     return {
         props: {
             cards: await MainPageApi.getCards() || [],
-            trafficJams: await MainPageApi.getTrafficJamsCounter() || null,
-            a11yTransportCounters: await MainPageApi.getA11yTransportCounters() || {},
+            cardsDynamicData: {
+                trafficJams: await MainPageApi.getTrafficJamsCounter() || null,
+                a11yTransportCounters: await MainPageApi.getA11yTransportCounters() || {},
+            },
             marqueeItems: await MainPageApi.getMarqueeItems() || [],
         },
         revalidate: 60,