diff --git a/blocks/case-studies/card/case-studies-card.module.css b/blocks/case-studies/card/case-studies-card.module.css
new file mode 100644
index 00000000000..1e1c189812d
--- /dev/null
+++ b/blocks/case-studies/card/case-studies-card.module.css
@@ -0,0 +1,172 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+  border-radius: 12px;
+  background: #fff;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+  border: 1px solid rgba(0,0,0,0.12);
+  max-width: 500px;
+  box-sizing: border-box;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.badge {
+  font-size: 12px;
+  font-weight: 600;
+  padding: 6px 10px;
+  border-radius: 999px;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.badgeMultiplatform {
+  background: #eef7ff;
+  color: #1565c0;
+  border: 1px solid rgba(21,101,192,0.15);
+}
+
+.badgeServerSide {
+  background: #eef9f2;
+  color: #1b5e20;
+  border: 1px solid rgba(27,94,32,0.15);
+}
+
+.logos {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.logosDouble {}
+
+.logo {
+  height: 28px;
+  width: auto;
+  object-fit: contain;
+  max-width: 140px;
+  opacity: 0.95;
+}
+
+.logoSecond {
+  border-left: 1px solid rgba(0,0,0,0.06);
+  padding-left: 10px;
+}
+
+.media {
+  border-radius: 10px;
+  overflow: hidden;
+  background: #f6f7f9;
+}
+
+.mediaVideo {
+  position: relative;
+  padding-bottom: 56.25%;
+  height: 0;
+}
+
+.iframe {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.mediaImage {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+.description {
+  color: #1f2328;
+  font-size: 16px;
+  line-height: 1.6;
+}
+.description :global(a) {
+  color: #0b65c2;
+  text-decoration: underline;
+}
+.description :global(strong) {
+  font-weight: 700;
+}
+
+.signature {
+  margin-top: 4px;
+  margin-bottom: 24px;
+}
+.signatureLine1 {
+  font-weight: 600;
+  color: #101214;
+}
+.signatureLine2 {
+  color: #555c63;
+}
+
+.platforms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px 14px;
+  align-items: center;
+}
+
+.platform {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 999px;
+  background: #fafbfc;
+  color: #2b2f35;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.platformIcon {
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
+}
+
+.platformLabel {
+  text-transform: capitalize;
+}
+
+.actions {
+  display: flex;
+  gap: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.link {
+  color: #0b65c2;
+  text-decoration: underline;
+  font-weight: 600;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 14px;
+  border-radius: 8px;
+  border: 1px solid #0b65c2;
+  color: #0b65c2;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.15s ease;
+}
+
+.button:hover {
+  background: #0b65c2;
+  color: #fff;
+}
diff --git a/blocks/case-studies/card/case-studies-card.tsx b/blocks/case-studies/card/case-studies-card.tsx
new file mode 100644
index 00000000000..6fb83d50c8b
--- /dev/null
+++ b/blocks/case-studies/card/case-studies-card.tsx
@@ -0,0 +1,239 @@
+import React from 'react';
+import cn from 'classnames';
+import styles from './case-studies-card.module.css';
+import { AndroidIcon, AppleIcon, ServerIcon, ComputerIcon, GlobusIcon } from '@rescui/icons';
+import { CaseStudyItem, CaseStudyType, isExternalCaseStudy, CasePlatform } from '../case-studies';
+
+
+/**
+ * Resolve asset path from YAML:
+ * - http/https or path starting with "/" => return as is
+ * - otherwise => treat as a filename under /images/case-studies/
+ */
+const resolveAssetPath = (v?: string) => {
+    if (!v) return '';
+    return `/images/case-studies/${v}`;
+};
+
+/**
+ * Very small markdown -> HTML for bold (**text**) and links [text](url).
+ * Safe subset suitable for our content. Extend if needed.
+ */
+const mdToHtml = (md: string) => {
+    // escape basic HTML first
+    const esc = md
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+
+    // bold: **text**
+    const withBold = esc.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+
+    // links: [text](url)
+    const withLinks = withBold.replace(
+        /\[([^\]]+?)\]\((https?:\/\/[^\s)]+)\)/g,
+        '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>'
+    );
+
+    return withLinks;
+};
+
+const badgeText: Record<CaseStudyType, string> = {
+    'multiplatform': 'Kotlin Multiplatform',
+    'server-side': 'Server-side'
+};
+
+const badgeClass: Record<CaseStudyType, string> = {
+    'multiplatform': 'badgeMultiplatform',
+    'server-side': 'badgeServerSide'
+};
+
+// Platform icon path builder. If you keep icons in (for example) /images/platforms/*.svg,
+// they’ll be resolved automatically by key. If an icon is missing, we still render the label.
+const getPlatformIcon = (p: CasePlatform) => {
+    switch (p) {
+        case 'android':
+            return <AndroidIcon/>;
+        case 'ios':
+            return <AppleIcon/>;
+        case 'desktop':
+            return <ComputerIcon/>;
+        case 'frontend':
+            return <GlobusIcon/>;
+        case 'backend':
+            return <ServerIcon/>;
+        case 'compose-multiplatform':
+            return <img className={styles.platformIcon} src={'/images/platforms/compose-multiplatform.svg'}
+                        alt="Compose Multiplatform icon"
+                        onError={(e) => hideBrokenIcon(e.currentTarget)} />;
+        default:
+            return null;
+    }
+};
+
+type Props = {
+    item: CaseStudyItem;
+    className?: string;
+};
+
+export const CaseStudyCard: React.FC<Props> = ({ item, className }) => {
+    const logos = item.logo ?? [];
+    const logoSrc1 = resolveAssetPath(logos[0]);
+    const logoSrc2 = resolveAssetPath(logos[1]);
+
+    const hasMedia = Boolean(item.media);
+    const isYoutube = item.media?.type === 'youtube';
+    const mediaUrl = item.media?.type === 'youtube' ? item.media.url : undefined;
+    const mediaImgSrc = item.media?.type === 'image' ? resolveAssetPath(item.media.path) : undefined;
+
+    return (
+        <article className={cn(styles.card, className)}>
+            {/* Header: type badge and logos (0–2) */}
+            <header className={styles.header}>
+        <span className={cn(styles.badge, styles[badgeClass[item.type]])}>
+          {badgeText[item.type]}
+        </span>
+
+                {(logoSrc1 || logoSrc2) && (
+                    <div className={cn(styles.logos, { [styles.logosDouble]: Boolean(logoSrc1 && logoSrc2) })}>
+                        {logoSrc1 && (
+                            <img className={styles.logo} src={logoSrc1} alt="Logo" />
+                        )}
+                        {logoSrc2 && (
+                            <img className={cn(styles.logo, styles.logoSecond)} src={logoSrc2} alt="Second logo" />
+                        )}
+                    </div>
+                )}
+            </header>
+
+            {/* Media (optional): YouTube or Image */}
+            {hasMedia && (
+                <div className={styles.media}>
+                    {isYoutube && mediaUrl && (
+                        <div className={styles.mediaVideo}>
+                            <iframe
+                                className={styles.iframe}
+                                src={toYoutubeEmbedUrl(mediaUrl)}
+                                title="Case study video"
+                                frameBorder={0}
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                allowFullScreen
+                            />
+                        </div>
+                    )}
+                    {!isYoutube && mediaImgSrc && (
+                        <img className={styles.mediaImage} src={mediaImgSrc} alt="Case media" />
+                    )}
+                </div>
+            )}
+
+            <div
+                className={styles.description}
+                dangerouslySetInnerHTML={{ __html: mdToHtml(item.description) }}
+            />
+
+            {item.signature && (
+                <div className={styles.signature}>
+                    <div
+                        className={styles.signatureLine1}
+                        dangerouslySetInnerHTML={{ __html: mdToHtml(item.signature.line1) }}
+                    />
+                    <div className={styles.signatureLine2}>{item.signature.line2}</div>
+                </div>
+            )}
+
+            {/* Platforms (optional) */}
+            {item.platforms && item.platforms.length > 0 && (
+                <div className={styles.platforms} aria-label="Platforms">
+                    {item.platforms.map((p) => {
+                        const iconSrc = getPlatformIcon(p);
+                        // We render icon + label; if icon path 404s, the label remains visible
+                        return (
+                            <span key={p} className={styles.platform}>
+                                <>
+                {getPlatformIcon(p)}
+                                    </>
+                <span className={styles.platformLabel}>{humanizePlatform(p)}</span>
+              </span>
+                        );
+                    })}
+                </div>
+            )}
+            {(isExternalCaseStudy(item)) ? (
+                <div className={styles.actions}>
+                    {item.externalLink && (
+                        <a
+                            className={styles.button}
+                            href={item.externalLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            {item.externalLinkText || 'Read the full story'}
+                        </a>
+                    )}
+                </div>
+            ) : null}
+        </article>
+    );
+};
+
+/**
+ * Convert various YouTube URL shapes to embed URL.
+ * Supports:
+ * - https://youtu.be/ID
+ * - https://www.youtube.com/watch?v=ID
+ * - https://www.youtube.com/live/ID
+ * Falls back to input URL if not recognized.
+ */
+function toYoutubeEmbedUrl(url: string): string {
+    try {
+        const u = new URL(url);
+        // youtu.be/VIDEO
+        if (u.hostname.includes('youtu.be')) {
+            const id = u.pathname.replace('/', '');
+            return `https://www.youtube.com/embed/${id}`;
+        }
+        // youtube.com/watch?v=VIDEO
+        if (u.searchParams.has('v')) {
+            return `https://www.youtube.com/embed/${u.searchParams.get('v')}`;
+        }
+        // youtube.com/live/VIDEO
+        if (u.pathname.startsWith('/live/')) {
+            const id = u.pathname.replace('/live/', '').split('/')[0];
+            return `https://www.youtube.com/embed/${id}`;
+        }
+        return url;
+    } catch {
+        return url;
+    }
+}
+
+/**
+ * If a platform icon is missing (404), hide the broken <img> and keep the label visible.
+ */
+function hideBrokenIcon(img: HTMLImageElement) {
+    img.style.display = 'none';
+}
+
+/**
+ * Humanize platform name for label.
+ */
+function humanizePlatform(p: CasePlatform): string {
+    switch (p) {
+        case 'compose-multiplatform':
+            return 'Compose Multiplatform';
+        case 'frontend':
+            return 'Frontend';
+        case 'backend':
+            return 'Backend';
+        case 'ios':
+            return 'iOS';
+        default:
+            // 'android' | 'desktop'
+            return capitalize(p);
+    }
+}
+
+function capitalize(s: string) {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+}
\ No newline at end of file
diff --git a/blocks/case-studies/case-studies.ts b/blocks/case-studies/case-studies.ts
new file mode 100644
index 00000000000..64d5c500d59
--- /dev/null
+++ b/blocks/case-studies/case-studies.ts
@@ -0,0 +1,66 @@
+export type CaseStudyType = 'multiplatform' | 'server-side';
+
+export type  CaseTypeSwitch = 'all' | CaseStudyType;
+
+type CaseStudyDestination = 'internal' | 'external';
+
+export const Platforms = [
+    'android',
+    'ios',
+    'desktop',
+    'frontend',
+    'backend',
+] as const;
+
+export type CasePlatform = typeof Platforms[number] | 'compose-multiplatform';
+
+type Signature = {
+    line1: string;
+    line2: string;
+}
+
+type YoutubeMedia = {
+    type: 'youtube';
+    url: string;
+};
+
+type ImageMedia = {
+    type: 'image';
+    path: string;
+};
+
+type Media = YoutubeMedia | ImageMedia;
+
+interface CaseStudyItemBase {
+    id: string;
+    type: CaseStudyType;
+    description: string;
+    destination: CaseStudyDestination;
+    logo?: string[];
+    signature?: Signature;
+    platforms?: CasePlatform[];
+    media?: Media;
+    featuredOnMainPage?: boolean;
+    slug?: string;
+    externalLinkText?: string;
+}
+
+export interface ExternalDestinationCaseStudyItem extends CaseStudyItemBase {
+    destination: 'external';
+    // required when destination === 'external'
+    externalLink: string;
+}
+
+export interface InternalDestinationCaseStudyItem extends CaseStudyItemBase {
+    destination: 'internal';
+    // required when destination === 'internal'
+    pageContentPath: string;
+}
+
+export type CaseStudyItem =
+    | ExternalDestinationCaseStudyItem
+    | InternalDestinationCaseStudyItem;
+
+export function isExternalCaseStudy(item: CaseStudyItem): item is ExternalDestinationCaseStudyItem {
+    return item.destination === 'external';
+}
\ No newline at end of file
diff --git a/blocks/case-studies/filter/case-studies-filter.module.css b/blocks/case-studies/filter/case-studies-filter.module.css
new file mode 100644
index 00000000000..8418a794ea9
--- /dev/null
+++ b/blocks/case-studies/filter/case-studies-filter.module.css
@@ -0,0 +1,49 @@
+.wrapper {
+  padding: 32px 0;
+  color: #ffffff; /* ensure white text */
+}
+
+.title {
+  margin: 0 0 16px 0;
+  color: inherit;
+}
+
+.inner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 24px;
+}
+
+.group {
+  background: #0f0f0f;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.groupType {
+  /* will span both columns on desktop */
+}
+
+.groupTitle {
+  margin: 0 0 12px 0;
+  color: inherit;
+}
+
+.checkboxes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  align-items: center;
+}
+
+.switcherSmall {
+}
+
+@media (min-width: 768px) {
+  .inner {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  .groupType {
+    grid-column: 1 / -1;
+  }
+}
diff --git a/blocks/case-studies/filter/case-studies-filter.tsx b/blocks/case-studies/filter/case-studies-filter.tsx
new file mode 100644
index 00000000000..87e1018d9ea
--- /dev/null
+++ b/blocks/case-studies/filter/case-studies-filter.tsx
@@ -0,0 +1,172 @@
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
+import { useRouter } from 'next/router';
+import Switcher from '@rescui/switcher';
+import Checkbox from '@rescui/checkbox';
+import { createTextCn } from '@rescui/typography';
+import '@jetbrains/kotlin-web-site-ui/out/components/layout';
+import styles from './case-studies-filter.module.css';
+import { CasePlatform, CaseStudyType, CaseTypeSwitch, Platforms } from '../case-studies';
+
+
+function parseType(maybeCaseType: unknown): CaseTypeSwitch {
+    const maybeCaseTypeString = String(maybeCaseType || 'all');
+    return (maybeCaseTypeString === 'multiplatform' || maybeCaseTypeString === 'server-side') ? maybeCaseTypeString : 'all';
+}
+
+function parsePlatforms(maybePlatforms: unknown): CasePlatform[] {
+    if (!maybePlatforms) {
+        return [...Platforms];
+    }
+    const list = String(maybePlatforms).split(',').map((x) => x.trim()).filter(Boolean);
+    const set = new Set<CasePlatform>();
+    for (const i of list) {
+        if ((Platforms as readonly string[]).includes(i)) {
+            set.add(i as CasePlatform);
+        }
+    }
+    return set.size === 0 ? [...Platforms] : Array.from(set);
+}
+
+function parseCompose(v: unknown): boolean {
+    if (v === true) return true;
+    const s = String(v || 'true').toLowerCase();
+    return s === 'true' || s === '1' || s === 'yes';
+}
+
+function buildQuery(type: CaseTypeSwitch, platforms: CasePlatform[], compose: boolean) {
+    const q: Record<string, any> = {};
+    if (type && type !== 'all') q.type = type;
+    // only keep platforms if not all selected
+    const allSelected = platforms.length === Platforms.length && Platforms.every((p) => platforms.includes(p));
+    if (!allSelected && (type === 'multiplatform' || type === 'all')) {
+        q.platforms = platforms.join(',');
+    }
+    if (type === 'multiplatform' || type === 'all') q.compose = compose ? 'true' : 'false';
+    return q;
+}
+
+export const CaseStudiesFilter: React.FC = () => {
+    const router = useRouter();
+    const darkTextCn = createTextCn('dark');
+
+    // Case study type switcher
+    const typeOptions: Array<{value: CaseTypeSwitch, label: string}> = useMemo(
+        () => [
+            { value: 'all', label: 'All' },
+            { value: 'multiplatform', label: 'Kotlin Multiplatform' },
+            { value: 'server-side', label: 'Server-side' }
+        ], []
+    );
+
+    // State synchronized with URL
+    const [type, setType] = useState<CaseTypeSwitch>('all');
+    const [platforms, setPlatforms] = useState<CasePlatform[]>([...Platforms]);
+    const [compose, setCompose] = useState<boolean>(true);
+
+    // Initialize/Sync from URL
+    useEffect(() => {
+        const q = router.query;
+        const t = parseType(q.type);
+        const p = parsePlatforms(q.platforms);
+        const c = parseCompose(q.compose);
+        setType(t);
+        setPlatforms(p);
+        setCompose(c);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [router.query.type, router.query.platforms, router.query.compose]);
+
+    // Handlers update both state and URL (shallow)
+    const pushQuery = useCallback((nextType: CaseTypeSwitch, nextPlatforms: CasePlatform[], nextCompose: boolean) => {
+        const q = buildQuery(nextType, nextPlatforms, nextCompose);
+        router.replace({ pathname: router.pathname, query: q }, undefined, { shallow: true });
+    }, [router]);
+
+    const onTypeChange = useCallback((value: string) => {
+        const nextType = parseType(value);
+        // When switching to server-side, we can keep platforms/compose but they won't be shown
+        pushQuery(nextType, platforms, compose);
+    }, [platforms, compose, pushQuery]);
+
+    const togglePlatform = useCallback((id: CasePlatform) => {
+        let next = platforms.includes(id) ? platforms.filter((x) => x !== id) : [...platforms, id];
+        // If user unchecks all, reset to all selected
+        if (next.length === 0) next = [...Platforms];
+        pushQuery(type, next, compose);
+    }, [platforms, type, compose, pushQuery]);
+
+    const onComposeChange = useCallback(() => {
+        const next = !compose;
+        pushQuery(type, platforms, next);
+    }, [compose, type, platforms, pushQuery]);
+
+    // for accessibility ids
+    const typeTitleId = useId();
+    const codeSharedTitleId = useId();
+    const uiTechTitleId = useId();
+
+    const showKmpFilters = type === 'multiplatform' || type === 'all';
+
+    return (
+        <section data-testid="case-studies-filter" aria-label="Case Studies Filter" className={styles.wrapper}>
+            <div className={'ktl-layout ktl-layout--center'}>
+                <h2 className={styles.title}>
+                    <span className={darkTextCn('rs-h4')}>Filters</span>
+                </h2>
+                <div className={styles.inner}>
+                    {/* Case study type */}
+                    <div className={`${styles.group} ${styles.groupType}`} role="group" aria-labelledby={typeTitleId}
+                         data-test="filter-type">
+                        <h3 id={typeTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>Case study type</span>
+                        </h3>
+                        <div className={styles.switcherSmall}>
+                            <Switcher mode={'rock'} value={type} onChange={onTypeChange} options={typeOptions} />
+                        </div>
+                    </div>
+
+                    {showKmpFilters && (
+                        <div className={styles.group} role="group" aria-labelledby={codeSharedTitleId}
+                             data-test="filter-code-shared">
+                            <h3 id={codeSharedTitleId} className={styles.groupTitle}><span
+                                className={darkTextCn('rs-h4')}>Code shared across</span></h3>
+                            <div className={styles.checkboxes}>
+                                {Platforms.map((pid) => {
+                                    const checked = platforms.includes(pid);
+                                    const label = pid === 'ios' ? 'iOS' : pid.charAt(0).toUpperCase() + pid.slice(1);
+                                    return (
+                                        <Checkbox
+                                            key={pid}
+                                            checked={checked}
+                                            onChange={() => togglePlatform(pid)}
+                                            mode="classic"
+                                            size="m"
+                                        >
+                                            {label}
+                                        </Checkbox>
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )}
+
+                    {showKmpFilters && (
+                        <div className={styles.group} role="group" aria-labelledby={uiTechTitleId}
+                             data-test="filter-ui-technology">
+                            <h3 id={uiTechTitleId} className={styles.groupTitle}><span className={darkTextCn('rs-h4')}>UI technology</span>
+                            </h3>
+                            <div className={styles.checkboxes}>
+                                <Checkbox
+                                    checked={compose}
+                                    onChange={onComposeChange}
+                                    mode="classic"
+                                    size="m"
+                                >
+                                    Built with Compose Multiplatform
+                                </Checkbox>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </section>
+    );
+};
diff --git a/blocks/case-studies/grid/case-studies-grid.module.css b/blocks/case-studies/grid/case-studies-grid.module.css
new file mode 100644
index 00000000000..9279927c14c
--- /dev/null
+++ b/blocks/case-studies/grid/case-studies-grid.module.css
@@ -0,0 +1,22 @@
+/* Grid layout for Case Studies: two columns with responsive fallback */
+.masonry-tiles-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  column-gap: 32px;
+  row-gap: 32px;
+}
+
+/* Tile wrapper: keep visuals controlled by the card component */
+.masonry-tile {
+  position: relative;
+  display: block;
+  box-sizing: border-box;
+  min-height: 0;
+}
+
+@media (--md) {
+  .masonry-tiles-container {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/blocks/case-studies/grid/case-studies-grid.tsx b/blocks/case-studies/grid/case-studies-grid.tsx
new file mode 100644
index 00000000000..0fddac2cabd
--- /dev/null
+++ b/blocks/case-studies/grid/case-studies-grid.tsx
@@ -0,0 +1,84 @@
+import React, { useMemo } from 'react';
+import { useRouter } from 'next/router';
+
+import caseStudiesDataRaw from '../../../data/case-studies/case-studies.yml';
+import { CaseStudyCard } from '../card/case-studies-card';
+import styles from './case-studies-grid.module.css';
+import type { CaseStudyItem } from '../case-studies';
+
+const ALL_PLATFORMS = ['android', 'ios', 'desktop', 'frontend', 'backend'] as const;
+type PlatformFilter = typeof ALL_PLATFORMS[number];
+
+type TypeFilter = 'all' | 'kotlin-multiplatform' | 'server-side';
+
+function parseType(v: unknown): TypeFilter {
+  const s = String(v || 'all');
+  return (s === 'kotlin-multiplatform' || s === 'server-side') ? (s as TypeFilter) : 'all';
+}
+
+function parsePlatforms(v: unknown): PlatformFilter[] {
+  if (!v) return [...ALL_PLATFORMS];
+  const list = String(v).split(',').map((x) => x.trim()).filter(Boolean);
+  const set = new Set<PlatformFilter>();
+  for (const i of list) {
+    if ((ALL_PLATFORMS as readonly string[]).includes(i)) set.add(i as PlatformFilter);
+  }
+  return set.size === 0 ? [...ALL_PLATFORMS] : Array.from(set);
+}
+
+function parseCompose(v: unknown): boolean {
+  if (v === true) return true;
+  const s = String(v || 'true').toLowerCase();
+  return s === 'true' || s === '1' || s === 'yes';
+}
+
+export const CaseStudiesGrid: React.FC = () => {
+  const router = useRouter();
+
+  const type = parseType(router.query.type);
+  const platforms = parsePlatforms(router.query.platforms);
+  const compose = parseCompose(router.query.compose);
+
+  const items = useMemo(() => {
+    const source: CaseStudyItem[] = caseStudiesDataRaw.items as any;
+    return source.filter((it) => {
+      // Map filter type to item types
+      const isMp = it.type === 'multiplatform';
+      const isSs = it.type === 'server-side';
+
+      if (type === 'server-side') return isSs;
+      if (type === 'kotlin-multiplatform') {
+        // Only multiplatform items with filters applied
+        if (!isMp) return false;
+        // Compose filter
+        if (compose && !(it.platforms || []).includes('compose-multiplatform')) return false;
+        // Platform filter applies only to MP: must intersect
+        const intersects = (it.platforms || []).some((p: string) => (platforms as string[]).includes(p));
+        return intersects;
+      }
+      // type === 'all': include server-side as is; apply filters to MP only
+      if (isSs) return true;
+      // MP item: apply compose + platforms
+      if (compose && !(it.platforms || []).includes('compose-multiplatform')) return false;
+      const intersects = (it.platforms || []).some((p: string) => (platforms as string[]).includes(p));
+      return intersects;
+    });
+  }, [type, platforms, compose]);
+
+  return (
+    <section data-testid="case-studies-grid" aria-label="Case Studies Grid">
+      <h2>Case studies</h2>
+      <div role="list" className={styles['masonry-tiles-container']}>
+        {items.map((it) => (
+          <div
+            key={it.id}
+            role="listitem"
+            className={styles['masonry-tile']}
+          >
+            <CaseStudyCard item={{ ...it }} />
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+};
\ No newline at end of file
diff --git a/blocks/case-studies/hero/case-studies-hero.module.css b/blocks/case-studies/hero/case-studies-hero.module.css
new file mode 100644
index 00000000000..723a15317b7
--- /dev/null
+++ b/blocks/case-studies/hero/case-studies-hero.module.css
@@ -0,0 +1,24 @@
+.wrapper {
+  background: #000000;
+  color: #ffffff;
+  padding: 96px 0 72px 0;
+}
+
+.content {
+  max-width: 816px;
+}
+
+.title {
+  margin: 0;
+}
+
+.subtitle {
+  margin-top: 24px;
+  color: #ffffff;
+}
+
+@media (min-width: 768px) {
+  .subtitle {
+    margin-top: 32px;
+  }
+}
diff --git a/blocks/case-studies/hero/case-studies-hero.tsx b/blocks/case-studies/hero/case-studies-hero.tsx
new file mode 100644
index 00000000000..5860d211fea
--- /dev/null
+++ b/blocks/case-studies/hero/case-studies-hero.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import cn from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import '@jetbrains/kotlin-web-site-ui/out/components/layout';
+import styles from './case-studies-hero.module.css';
+
+export const CaseStudiesHero: React.FC = () => {
+    const textCn = useTextStyles();
+
+    return (
+        <section data-testid="case-studies-hero" aria-label="Case Studies Hero">
+            <div className={styles.wrapper}>
+                <div className={cn('ktl-layout', 'ktl-layout--center')}>
+                    <div className={styles.content}>
+                        <h1 className={cn(textCn('rs-hero'), styles.title)}>
+                            Case studies
+                        </h1>
+                        <p className={cn(textCn('rs-text-1'), styles.subtitle)}>
+                            Discover how companies of all sizes and industries apply Kotlin across client and server. From building cross-platform applications with shared logic and UI using Kotlin Multiplatform and Compose Multiplatform to developing reliable, high-performance backends with Kotlin — explore real-world strategies, integration approaches, and the benefits teams gain from using Kotlin in production.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
diff --git a/package.json b/package.json
index e705dabc63e..2887561343f 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "@rescui/colors": "^0.1.6",
     "@rescui/dropdown-menu": "^0.6.1",
     "@rescui/focus-manager": "^0.1.4",
-    "@rescui/icons": "^0.16.13",
+    "@rescui/icons": "^1.5.0",
     "@rescui/input": "^0.8.2",
     "@rescui/menu": "0.9.4",
     "@rescui/switcher": "^0.5.1",
diff --git a/pages/case-studies/index.tsx b/pages/case-studies/index.tsx
new file mode 100644
index 00000000000..f5eeae2712c
--- /dev/null
+++ b/pages/case-studies/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { ServerSideLayout } from '../../blocks/server-side/layout/server-side-layout';
+import { CaseStudiesHero } from '../../blocks/case-studies/hero/case-studies-hero';
+import { CaseStudiesFilter } from '../../blocks/case-studies/filter/case-studies-filter';
+import { CaseStudiesGrid } from '../../blocks/case-studies/grid/case-studies-grid';
+
+function Index() {
+    return (
+        <ServerSideLayout title={'Case Studies'} ogImageName={'case-studies.png'}>
+            <CaseStudiesHero />
+            <CaseStudiesFilter />
+            <CaseStudiesGrid />
+        </ServerSideLayout>
+    );
+}
+
+export default Index;
diff --git a/yarn.lock b/yarn.lock
index 5559a7b1d45..6e87a45f2f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1840,10 +1840,10 @@
     classnames "^2.2.6"
     core-js "^3.9.1"
 
-"@rescui/icons@^0.16.13":
-  version "0.16.13"
-  resolved "https://registry.yarnpkg.com/@rescui/icons/-/icons-0.16.13.tgz#e1a64bd98d83bd8815035a3aa56ec67ecaead95e"
-  integrity sha512-ik1ZE0QNFM6Kfk8hs3GSmHMvcLLTu/Pxzi5aAy4Z5uIrnKxqXf5k3AlbKZVWS/pneeKLSWhheztcjUVtjidv+g==
+"@rescui/icons@^1.5.0":
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/@rescui/icons/-/icons-1.6.0.tgz#3bf7fbda19e0690e70cb254c583bf958a4af78f2"
+  integrity sha512-O5+ElCJ4I0tx1wSy6M7IdOuTvIjJLWL/3wNJ0LANu2jfi95cVhbMrxfvZewhOimS6/QgZXqJ7aPn2iCgagrySQ==
   dependencies:
     "@babel/runtime-corejs3" "^7.26.0"
     classnames "^2.2.6"