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..b2ff135e283
--- /dev/null
+++ b/blocks/case-studies/card/case-studies-card.module.css
@@ -0,0 +1,171 @@
+.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);
+  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..28724a621e4
--- /dev/null
+++ b/blocks/case-studies/card/case-studies-card.tsx
@@ -0,0 +1,233 @@
+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 { CaseItem, CaseType, isExternalCase, 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<CaseType, string> = {
+    'multiplatform': 'Kotlin Multiplatform',
+    'server-side': 'Server-side'
+};
+
+const badgeClass: Record<CaseType, 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 = CaseItem &{
+    className?: string;
+};
+
+export const CaseStudyCard: React.FC<Props> = ({ className, ...item }) => {
+    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>
+            )}
+            {(isExternalCase(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 '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..2818fe79874
--- /dev/null
+++ b/blocks/case-studies/case-studies.ts
@@ -0,0 +1,74 @@
+export type CaseType = 'multiplatform' | 'server-side';
+
+export type  CaseTypeSwitch = 'all' | CaseType;
+
+type CaseDestination = 'internal' | 'external';
+
+export const Platforms = [
+    'android',
+    'ios',
+    'desktop',
+    'frontend',
+    'backend',
+] as const;
+
+export const PlatformNames: Record<typeof Platforms[number], string> = {
+    "android": "Android",
+    "ios": "iOS",
+    "desktop": "Desktop",
+    "frontend": "Frontend",
+    "backend": "Backend",
+}
+
+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 CaseItemBase {
+    id: string;
+    type: CaseType;
+    description: string;
+    destination: CaseDestination;
+    logo?: string[];
+    signature?: Signature;
+    platforms?: CasePlatform[];
+    media?: Media;
+    featuredOnMainPage?: boolean;
+    slug?: string;
+    externalLinkText?: string;
+}
+
+export interface ExternalDestinationCaseItem extends CaseItemBase {
+    destination: 'external';
+    // required when destination === 'external'
+    externalLink: string;
+}
+
+export interface InternalDestinationCaseItem extends CaseItemBase {
+    destination: 'internal';
+    // required when destination === 'internal'
+    pageContentPath: string;
+}
+
+export type CaseItem =
+    | ExternalDestinationCaseItem
+    | InternalDestinationCaseItem;
+
+export function isExternalCase(item: CaseItem): item is ExternalDestinationCaseItem {
+    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..a80ae7f01c1
--- /dev/null
+++ b/blocks/case-studies/filter/case-studies-filter.module.css
@@ -0,0 +1,42 @@
+.content {
+  padding: 24px 0 72px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 80px;
+  grid-template-areas:
+    "group1 group1"
+    "group2 group3";
+  @media (width <= 1000px) {
+    display: block;
+    grid-template-columns: unset;
+    grid-template-areas: unset;
+  }
+}
+
+.group:first-child {
+  grid-area: group1;
+}
+
+.group:not(:last-child) {
+  margin-bottom: 32px;
+}
+
+.groupTitle {
+  margin: 0 0 8px;
+}
+
+.checkboxes {
+  display: flex;
+  align-items: center;
+  gap: 8px 24px;
+}
+
+.checkbox {
+  display: flex;
+  align-items: center;
+
+  & span + span {
+    display: flex;
+    gap: 8px;
+  }
+}
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..7112cf5e0c1
--- /dev/null
+++ b/blocks/case-studies/filter/case-studies-filter.tsx
@@ -0,0 +1,97 @@
+import cn from 'classnames';
+import React from 'react';
+import Switcher from '@rescui/switcher';
+import Checkbox from '@rescui/checkbox';
+import { createTextCn } from '@rescui/typography';
+import styles from './case-studies-filter.module.css';
+import { CasePlatform, CaseType, CaseTypeSwitch, PlatformNames, Platforms } from '../case-studies';
+import { useQueryState } from '../../../hooks';
+import { parseCompose, parsePlatforms, parseType, serializeCompose, serializePlatforms, serializeType } from '../utils';
+
+const caseTypeOptions: Array<{ value: CaseTypeSwitch, label: string }> = [
+    { value: 'all', label: 'All' },
+    { value: 'multiplatform', label: 'Kotlin Multiplatform' },
+    { value: 'server-side', label: 'Server-side' }
+];
+
+export const CaseStudiesFilter: React.FC = () => {
+    const darkTextCn = createTextCn('dark');
+
+    // State synchronized with URL
+    const [type, setType] = useQueryState<CaseTypeSwitch>('type', parseType, serializeType);
+    const [platforms, setPlatforms] = useQueryState<CasePlatform[]>('platforms', parsePlatforms, serializePlatforms);
+    const [compose, setCompose] = useQueryState<boolean>('compose', parseCompose, serializeCompose);
+
+    const togglePlatform = (id: CasePlatform) => {
+        let nextPlatforms = platforms.includes(id)
+            ? platforms.filter((x) => x !== id)
+            : [...platforms, id];
+        if (nextPlatforms.length === 0) {
+            // If user unchecks all, reset to all selected
+            nextPlatforms = [...Platforms];
+        }
+        setPlatforms(nextPlatforms);
+    };
+
+    const toggleCompose = () => {
+        const nextCompose = !compose;
+        setCompose(nextCompose, () => setType('multiplatform'));
+    };
+
+    const showKmpFilters = type === 'multiplatform' || type === 'all';
+
+    return (
+        <section className="ktl-layout ktl-layout--center" data-testid="case-studies-filter"
+                 aria-label="Case Studies Filter">
+            <div className={styles.content}>
+                <div className={styles.group} role="group" aria-labelledby="case-study-type-title"
+                     data-test="filter-type">
+                    <h3 id="case-study-type-title" className={cn(styles.groupTitle, darkTextCn('rs-h4'))}>Case study
+                        type</h3>
+                    <Switcher mode={'rock'} value={type} onChange={setType} options={caseTypeOptions} />
+                </div>
+
+                {showKmpFilters && (
+                    <div className={styles.group} role="group" aria-labelledby="code-shared-across-titile"
+                         data-test="filter-code-shared">
+                        <h3 id="code-shared-across-titile"
+                            className={cn(styles.groupTitle, darkTextCn('rs-h4'))}>Code shared across</h3>
+                        <div className={styles.checkboxes}>
+                            {Platforms.map((platformId) =>
+                                <Checkbox
+                                    key={platformId}
+                                    checked={platforms.includes(platformId)}
+                                    onChange={() => togglePlatform(platformId)}
+                                    mode="classic"
+                                    size="m"
+                                >
+                                    {PlatformNames[platformId]}
+                                </Checkbox>
+                            )}
+                        </div>
+                    </div>
+                )}
+
+                {showKmpFilters && (
+                    <div className={styles.group} role="group" aria-labelledby="ui-technology-title"
+                         data-test="filter-ui-technology">
+                        <h3 id="ui-technology-title"
+                            className={cn(styles.groupTitle, darkTextCn('rs-h4'))}>UI&nbsp;technology</h3>
+                        <div className={styles.checkboxes}>
+                            <Checkbox
+                                className={styles.checkbox}
+                                checked={compose}
+                                onChange={toggleCompose}
+                                mode="classic"
+                                size="m"
+                            >
+                                Built with Compose Multiplatform <img
+                                src="/images/case-studies/compose-multiplatform.svg" alt="" />
+                            </Checkbox>
+                        </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..5b9159d257c
--- /dev/null
+++ b/blocks/case-studies/grid/case-studies-grid.module.css
@@ -0,0 +1,17 @@
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: auto;
+  gap: 32px;
+
+  @media (width < 809px) {
+    grid-template-columns: 1fr;
+  }
+}
+
+.tile {
+  /*position: relative;*/
+  /*display: block;*/
+  /*box-sizing: border-box;*/
+  /*min-height: 0;*/
+}
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..cb2bc3fdfc0
--- /dev/null
+++ b/blocks/case-studies/grid/case-studies-grid.tsx
@@ -0,0 +1,59 @@
+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 { CaseItem } from '../case-studies';
+import { parseCompose, parsePlatforms, parseType } from '../utils';
+import styles from './case-studies-grid.module.css';
+
+export const CaseStudiesGrid: React.FC = () => {
+    const router = useRouter();
+
+    const type = parseType(router.query.type);
+    const platforms = useMemo(() => parsePlatforms(router.query.platforms), [router.query.platforms]);
+    const compose = parseCompose(router.query.compose);
+
+    const items = useMemo(() => {
+        const source: CaseItem[] = caseStudiesDataRaw.items;
+        return source.filter((caseItem) => {
+            const isMultiplatformCase = caseItem.type === 'multiplatform';
+            const isServerSideCase = caseItem.type === 'server-side';
+
+            if (type === 'server-side') {
+                return isServerSideCase;
+            }
+            if (type === 'multiplatform') {
+                // Only multiplatform items with filters applied
+                if (!isMultiplatformCase) {
+                    return false;
+                }
+                // Compose filter
+                if (compose && !(caseItem.platforms || []).includes('compose-multiplatform')) {
+                    return false;
+                }
+                // Platform filter applies only to MP: must intersect
+                const intersects = (caseItem.platforms || []).some((p: string) => (platforms as string[]).includes(p));
+                return intersects;
+            }
+            // type === 'all': include server-side as is; apply filters to MP only
+            if (isServerSideCase) {
+                return true;
+            }
+            // MP item: apply "compose" + "platforms"
+            if (compose && !(caseItem.platforms || []).includes('compose-multiplatform')) return false;
+            const intersects = (caseItem.platforms || []).some((p: string) => (platforms as string[]).includes(p));
+            return intersects;
+        });
+    }, [type, platforms, compose]);
+
+    return (
+        <section className="ktl-layout ktl-layout--center" data-testid="case-studies-grid"
+                 aria-label="Case Studies Grid">
+            <div role="list" className={styles.grid}>
+                {items.map((item) =>
+                    <CaseStudyCard key={item.id } {...item} />
+                )}
+            </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..af351096918
--- /dev/null
+++ b/blocks/case-studies/hero/case-studies-hero.module.css
@@ -0,0 +1,20 @@
+.content {
+  padding: 96px 0 24px;
+  max-width: 850px;
+}
+
+.title {
+  margin: 0;
+}
+
+.subtitle {
+  margin-top: 24px;
+  margin-bottom: 0;
+  color: #fff;
+}
+
+@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..c7ba6847622
--- /dev/null
+++ b/blocks/case-studies/hero/case-studies-hero.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import cn from 'classnames';
+import { useTextStyles } from '@rescui/typography';
+import styles from './case-studies-hero.module.css';
+
+export const CaseStudiesHero: React.FC = () => {
+    const textCn = useTextStyles();
+    return (
+        <section className="ktl-layout ktl-layout--center" data-testid="case-studies-hero" aria-label="Case Studies Hero">
+            <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>
+        </section>
+    );
+};
diff --git a/blocks/case-studies/utils.ts b/blocks/case-studies/utils.ts
new file mode 100644
index 00000000000..5adcf870e65
--- /dev/null
+++ b/blocks/case-studies/utils.ts
@@ -0,0 +1,26 @@
+import { CasePlatform, CaseTypeSwitch, Platforms } from './case-studies';
+import { parseBoolean, parseEnum, parseStringArray } from '../../utils';
+
+export function parseType(v: unknown): CaseTypeSwitch {
+    return parseEnum(v, ['all', 'multiplatform', 'server-side'], 'all');
+}
+
+export function serializeType(v: CaseTypeSwitch): string | undefined {
+    return v === 'all' ? undefined : v;
+}
+
+export function parsePlatforms(v: unknown): CasePlatform[] {
+    return parseStringArray(v, [...Platforms], [...Platforms]);
+}
+
+export function serializePlatforms(v: CasePlatform[]): string | undefined {
+    return v.length === Platforms.length ? undefined : v.join(',');
+}
+
+export function parseCompose(v: unknown): boolean {
+    return parseBoolean(v, false);
+}
+
+export function serializeCompose(v: boolean): string | undefined {
+    return v ? 'true' : undefined;
+}
\ No newline at end of file
diff --git a/hooks/index.ts b/hooks/index.ts
new file mode 100644
index 00000000000..26cb82820e6
--- /dev/null
+++ b/hooks/index.ts
@@ -0,0 +1 @@
+export { useQueryState } from './useQueryState';
\ No newline at end of file
diff --git a/hooks/useQueryState.ts b/hooks/useQueryState.ts
new file mode 100644
index 00000000000..ef5dc2cb3c4
--- /dev/null
+++ b/hooks/useQueryState.ts
@@ -0,0 +1,39 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState, useCallback } from 'react';
+
+/* Two-way synchronization between React state and URL query parameter.
+ * @param key - Query parameter name
+ * @param parser - Parse from URL string to type T
+ * @param serializer - Serialize from type T to URL string
+*/
+export function useQueryState<T>(
+    key: string,
+    parse: (value: unknown) => T,
+    serialize: (value: T) => string | undefined
+) {
+    const router = useRouter();
+    const [state, setState] = useState<T>(() => parse(router.query[key]));
+
+    useEffect(() => {
+        setState(parse(router.query[key]));
+    }, [router.query[key], parse]);
+
+    const updateState = useCallback((value: T, onComplete?: () => void) => {
+        const currentParams = new URLSearchParams(window.location.search);
+        const query: Record<string, string> = {};
+        currentParams.forEach((value, key) => {
+            query[key] = value;
+        });
+
+        const serializedValue = serialize(value);
+        if (serializedValue === undefined) {
+            delete query[key];
+        } else {
+            query[key] = serializedValue;
+        }
+
+        router.replace({ pathname: router.pathname, query }, undefined, { shallow: true }).then(onComplete);
+    }, [router, key, serialize]);
+
+    return [state, updateState] as const;
+}
\ No newline at end of file
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/public/images/case-studies/compose-multiplatform.svg b/public/images/case-studies/compose-multiplatform.svg
new file mode 100644
index 00000000000..c4f2dc1ce3e
--- /dev/null
+++ b/public/images/case-studies/compose-multiplatform.svg
@@ -0,0 +1,17 @@
+<svg width="21" height="24" viewBox="0 0 21 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.6854 6V18L10.5004 24L0.31543 18V6L10.5004 0L20.6854 6Z" fill="#6075F2"/>
+<path d="M14.49 9.64286V14.3571L10.5 16.7143V24L20.685 18V6L14.49 9.64286Z" fill="#6B57FF"/>
+<path d="M10.5004 16.7143L6.51043 14.3571V9.64286L0.31543 6V18L10.5004 24V16.7143Z" fill="url(#paint0_radial_80_13869)"/>
+<path d="M6.51043 9.64286L10.5004 7.28571L14.4904 9.64286L20.6854 6L10.5004 0L0.31543 6L6.51043 9.64286Z" fill="url(#paint1_linear_80_13869)"/>
+<path d="M10.4999 7.28613L14.5009 9.64328V14.3576L10.4999 16.7147L6.49885 14.3576V9.64328L10.4999 7.28613Z" fill="black"/>
+<defs>
+<radialGradient id="paint0_radial_80_13869" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(6.77528 6.18908) scale(17.6952 18.0565)">
+<stop stop-color="#5383EC"/>
+<stop offset="0.86699" stop-color="#7F52FF"/>
+</radialGradient>
+<linearGradient id="paint1_linear_80_13869" x1="15.6126" y1="0.161416" x2="4.35891" y2="12.6466" gradientUnits="userSpaceOnUse">
+<stop stop-color="#33C3FF"/>
+<stop offset="0.87843" stop-color="#5383EC"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/utils/index.ts b/utils/index.ts
new file mode 100644
index 00000000000..e1b85882e0f
--- /dev/null
+++ b/utils/index.ts
@@ -0,0 +1 @@
+export * from './queryParser';
\ No newline at end of file
diff --git a/utils/queryParser.ts b/utils/queryParser.ts
new file mode 100644
index 00000000000..c019d069e44
--- /dev/null
+++ b/utils/queryParser.ts
@@ -0,0 +1,37 @@
+export function parseEnum<T extends string>(
+    value: unknown,
+    allowedValues: readonly T[],
+    defaultValue: T
+): T {
+    const str = String(value || defaultValue);
+    return allowedValues.includes(str as T) ? (str as T) : defaultValue;
+}
+
+export function parseStringArray<T extends string>(
+    value: unknown,
+    allowedValues: readonly T[],
+    defaultValue: T[]
+): T[] {
+    if (!value) {
+        return defaultValue;
+    }
+
+    const list = String(value).split(',').map((x) => x.trim()).filter(Boolean);
+    const set = new Set<T>();
+
+    for (const item of list) {
+        if (allowedValues.includes(item as T)) {
+            set.add(item as T);
+        }
+    }
+
+    return set.size === 0 ? defaultValue : Array.from(set);
+}
+
+export function parseBoolean(value: unknown, defaultValue: boolean = true): boolean {
+    if (value === true || value === false) {
+        return value;
+    }
+    const s = String(value || String(defaultValue)).toLowerCase();
+    return s === 'true' || s === '1' || s === 'yes';
+}
\ No newline at end of file
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"