diff --git a/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.scss b/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.scss
deleted file mode 100644
index 0d50138c958..00000000000
--- a/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.indicator-brief {
-    .about-this-data {
-        margin-bottom: 32px;
-
-        &__heading {
-            @include h2-bold;
-            margin: 0 0 16px;
-        }
-
-        &__indicator-title {
-            @include h5-black-caps;
-            color: $blue-50;
-            margin: 0 0 8px;
-        }
-
-        &__indicator-description {
-            @include body-2-regular;
-            margin: 0 0 16px;
-        }
-    }
-
-    .key-data {
-        @include body-3-medium;
-        border-bottom: 1px solid $blue-20;
-
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-
-        @include sm-only {
-            grid-template-columns: max-content 1fr;
-        }
-
-        &__title,
-        &__content {
-            padding: 16px 0;
-            border-top: 1px solid $blue-20;
-
-            &.empty {
-                @include sm-only {
-                    display: none;
-                }
-            }
-        }
-
-        &__title {
-            color: $blue-50;
-            padding-right: 24px;
-        }
-
-        &__content-source {
-            grid-column: 2 / -1;
-        }
-
-        a {
-            @include owid-link-90;
-            color: inherit;
-        }
-    }
-
-    .key-info {
-        background-color: $gray-10;
-        border-left: 4px solid $blue-10;
-        padding: 40px;
-        margin: 0 -40px 32px -40px;
-
-        &__title {
-            @include h5-black-caps;
-            color: $blue-50;
-            margin-top: 0;
-            margin-bottom: 16px;
-        }
-
-        &__content {
-            @include body-2-regular;
-            ul {
-                @include body-2-regular;
-                margin-bottom: 16px;
-                margin-left: 16px;
-
-                li {
-                    margin-bottom: 1em;
-
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-                }
-            }
-        }
-
-        &__learn-more {
-            @include expandable-paragraph__expand-button--full;
-            svg {
-                font-size: 0.75em;
-                margin-left: 12px;
-            }
-        }
-    }
-}
diff --git a/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.tsx b/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.tsx
deleted file mode 100644
index ab2c416a4e8..00000000000
--- a/packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from "react"
-import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
-import { ExpandableToggle } from "../ExpandableToggle/ExpandableToggle.js"
-import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
-import { dayjs } from "@ourworldindata/utils"
-import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "../SharedDataPageConstants.js"
-
-interface IndicatorBriefProps {
-    title: string
-    descriptionShort?: string
-    descriptionKey?: string[]
-    hasFaqEntries: boolean
-    descriptionFromProducer?: string
-    attributionShort?: string
-    attribution: string
-    processedAdapted: string
-    dateRange?: string
-    lastUpdated: string
-    nextUpdate?: string
-    additionalInfo?: string
-    unit?: string
-}
-
-export const IndicatorBrief = (props: IndicatorBriefProps) => {
-    const lastUpdated = dayjs(props.lastUpdated, ["YYYY", "YYYY-MM-DD"])
-    const keyDataCount = 3 + (props.nextUpdate ? 1 : 0) + (props.unit ? 1 : 0)
-    return (
-        <>
-            <div className="indicator-brief">
-                <div className="about-this-data">
-                    <h2 className="about-this-data__heading">
-                        About this data
-                    </h2>
-                    {props.descriptionShort && (
-                        <>
-                            <div className="about-this-data__indicator-title">
-                                {props.title}
-                            </div>
-                            <p className="about-this-data__indicator-description simple-markdown-text">
-                                <SimpleMarkdownText
-                                    text={props.descriptionShort}
-                                />
-                            </p>
-                        </>
-                    )}
-                    <div className="key-data">
-                        <div className="key-data__title">Source</div>
-                        <div className="key-data__content key-data__content-source">
-                            {props.attribution} – with{" "}
-                            <a
-                                href={`#${DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}`}
-                            >
-                                {props.processedAdapted}
-                            </a>{" "}
-                            by Our World In Data
-                        </div>
-                        <div className="key-data__title">Last updated</div>
-                        <div className="key-data__content">
-                            {lastUpdated.format("MMMM D, YYYY")}
-                        </div>
-                        {props.nextUpdate && (
-                            <>
-                                <div className="key-data__title">
-                                    Next expected update
-                                </div>
-                                <div className="key-data__content">
-                                    {props.nextUpdate}
-                                </div>
-                            </>
-                        )}
-                        <div className="key-data__title">Date range</div>
-                        <div className="key-data__content">
-                            {props.dateRange}
-                        </div>
-                        {props.unit && (
-                            <>
-                                <div className="key-data__title">Unit</div>
-                                <div className="key-data__content">
-                                    {props.unit}
-                                </div>
-                            </>
-                        )}
-                        {/* needed for its top-border */}
-                        {keyDataCount % 2 === 0 && (
-                            <>
-                                <div className="key-data__title empty" />
-                                <div className="key-data__content empty" />
-                            </>
-                        )}
-                    </div>
-                </div>
-                {props.descriptionKey && (
-                    <div className="key-info">
-                        <h3 className="key-info__title">
-                            What you should know about this indicator
-                        </h3>
-                        <div className="key-info__content simple-markdown-text">
-                            {props.descriptionKey.length === 1 ? (
-                                <SimpleMarkdownText
-                                    text={props.descriptionKey[0]}
-                                />
-                            ) : (
-                                <ul>
-                                    {props.descriptionKey.map((item, i) => (
-                                        <li key={i}>
-                                            <SimpleMarkdownText text={item} />{" "}
-                                        </li>
-                                    ))}
-                                </ul>
-                            )}
-                        </div>
-                        {props.hasFaqEntries && (
-                            <a className="key-info__learn-more" href="#faqs">
-                                Learn more in the FAQs
-                                <FontAwesomeIcon icon={faArrowDown} />
-                            </a>
-                        )}
-                    </div>
-                )}
-                {props.descriptionFromProducer && (
-                    <ExpandableToggle
-                        label={
-                            props.attributionShort
-                                ? `How does the producer of this data - ${props.attributionShort} - describe this data?`
-                                : "How does the producer of this data describe this data?"
-                        }
-                        content={
-                            <div className="simple-markdown-text">
-                                <SimpleMarkdownText
-                                    text={props.descriptionFromProducer}
-                                />
-                            </div>
-                        }
-                        isExpandedDefault={
-                            !(props.descriptionShort || props.descriptionKey)
-                        }
-                        isStacked={!!props.additionalInfo}
-                    />
-                )}
-                {props.additionalInfo && (
-                    <ExpandableToggle
-                        label="Additional information about this data"
-                        content={
-                            <div className="simple-markdown-text">
-                                <SimpleMarkdownText
-                                    text={props.additionalInfo}
-                                />
-                            </div>
-                        }
-                    />
-                )}
-            </div>
-        </>
-    )
-}
diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss
new file mode 100644
index 00000000000..ede10bbf7d1
--- /dev/null
+++ b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss
@@ -0,0 +1,37 @@
+.indicator-key-data {
+    @include body-3-medium;
+    border-bottom: 1px solid $blue-20;
+
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+
+    @include sm-only {
+        grid-template-columns: max-content 1fr;
+    }
+
+    &__title,
+    &__content {
+        padding: 16px 0;
+        border-top: 1px solid $blue-20;
+
+        &.empty {
+            @include sm-only {
+                display: none;
+            }
+        }
+    }
+
+    &__title {
+        color: $blue-50;
+        padding-right: 24px;
+    }
+
+    &__content-source {
+        grid-column: 2 / -1;
+    }
+
+    a {
+        @include owid-link-90;
+        color: inherit;
+    }
+}
diff --git a/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
new file mode 100644
index 00000000000..3ef9d8094f3
--- /dev/null
+++ b/packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.tsx
@@ -0,0 +1,60 @@
+import React from "react"
+import { dayjs } from "@ourworldindata/utils"
+import { DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID } from "../SharedDataPageConstants.js"
+
+interface IndicatorKeyDataProps {
+    attribution: string
+    processedAdapted: string
+    dateRange?: string
+    lastUpdated: string
+    nextUpdate?: string
+    unit?: string
+}
+
+export const IndicatorKeyData = (props: IndicatorKeyDataProps) => {
+    const lastUpdated = dayjs(props.lastUpdated, ["YYYY", "YYYY-MM-DD"])
+    const keyDataCount = 3 + (props.nextUpdate ? 1 : 0) + (props.unit ? 1 : 0)
+    return (
+        <div className="indicator-key-data">
+            <div className="indicator-key-data__title">Source</div>
+            <div className="indicator-key-data__content indicator-key-data__content-source">
+                {props.attribution} – with{" "}
+                <a href={`#${DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID}`}>
+                    {props.processedAdapted}
+                </a>{" "}
+                by Our World In Data
+            </div>
+            <div className="indicator-key-data__title">Last updated</div>
+            <div className="indicator-key-data__content">
+                {lastUpdated.format("MMMM D, YYYY")}
+            </div>
+            {props.nextUpdate && (
+                <>
+                    <div className="indicator-key-data__title">
+                        Next expected update
+                    </div>
+                    <div className="indicator-key-data__content">
+                        {props.nextUpdate}
+                    </div>
+                </>
+            )}
+            <div className="indicator-key-data__title">Date range</div>
+            <div className="indicator-key-data__content">{props.dateRange}</div>
+            {props.unit && (
+                <>
+                    <div className="indicator-key-data__title">Unit</div>
+                    <div className="indicator-key-data__content">
+                        {props.unit}
+                    </div>
+                </>
+            )}
+            {/* needed for its top-border */}
+            {keyDataCount % 2 === 0 && (
+                <>
+                    <div className="indicator-key-data__title empty" />
+                    <div className="indicator-key-data__content empty" />
+                </>
+            )}
+        </div>
+    )
+}
diff --git a/packages/@ourworldindata/components/src/IndicatorKeyDescription/IndicatorKeyDescription.scss b/packages/@ourworldindata/components/src/IndicatorKeyDescription/IndicatorKeyDescription.scss
new file mode 100644
index 00000000000..3098a57b465
--- /dev/null
+++ b/packages/@ourworldindata/components/src/IndicatorKeyDescription/IndicatorKeyDescription.scss
@@ -0,0 +1,40 @@
+.indicator-key-description {
+    .key-info {
+        background-color: $gray-10;
+        border-left: 4px solid $blue-10;
+        padding: 40px;
+        margin: 0 -40px 32px -40px;
+
+        &__title {
+            @include h5-black-caps;
+            color: $blue-50;
+            margin-top: 0;
+            margin-bottom: 16px;
+        }
+
+        &__content {
+            @include body-2-regular;
+            ul {
+                @include body-2-regular;
+                margin-bottom: 16px;
+                margin-left: 16px;
+
+                li {
+                    margin-bottom: 1em;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        }
+
+        &__learn-more {
+            @include expandable-paragraph__expand-button--full;
+            svg {
+                font-size: 0.75em;
+                margin-left: 12px;
+            }
+        }
+    }
+}
diff --git a/packages/@ourworldindata/components/src/IndicatorKeyDescription/IndicatorKeyDescription.tsx b/packages/@ourworldindata/components/src/IndicatorKeyDescription/IndicatorKeyDescription.tsx
new file mode 100644
index 00000000000..3c1c6c29987
--- /dev/null
+++ b/packages/@ourworldindata/components/src/IndicatorKeyDescription/IndicatorKeyDescription.tsx
@@ -0,0 +1,81 @@
+import React from "react"
+import { faArrowDown } from "@fortawesome/free-solid-svg-icons/faArrowDown"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome/index.js"
+import { ExpandableToggle } from "../ExpandableToggle/ExpandableToggle.js"
+import { SimpleMarkdownText } from "../SimpleMarkdownText.js"
+
+interface IndicatorKeyDescriptionProps {
+    descriptionShort?: string
+    descriptionKey?: string[]
+    descriptionFromProducer?: string
+    attributionShort?: string
+    additionalInfo?: string
+    hasFaqEntries: boolean
+}
+
+export const IndicatorKeyDescription = (
+    props: IndicatorKeyDescriptionProps
+) => {
+    return (
+        <div className="indicator-key-description">
+            {props.descriptionKey && (
+                <div className="key-info">
+                    <h3 className="key-info__title">
+                        What you should know about this indicator
+                    </h3>
+                    <div className="key-info__content simple-markdown-text">
+                        {props.descriptionKey.length === 1 ? (
+                            <SimpleMarkdownText
+                                text={props.descriptionKey[0]}
+                            />
+                        ) : (
+                            <ul>
+                                {props.descriptionKey.map((item, i) => (
+                                    <li key={i}>
+                                        <SimpleMarkdownText text={item} />{" "}
+                                    </li>
+                                ))}
+                            </ul>
+                        )}
+                    </div>
+                    {props.hasFaqEntries && (
+                        <a className="key-info__learn-more" href="#faqs">
+                            Learn more in the FAQs
+                            <FontAwesomeIcon icon={faArrowDown} />
+                        </a>
+                    )}
+                </div>
+            )}
+            {props.descriptionFromProducer && (
+                <ExpandableToggle
+                    label={
+                        props.attributionShort
+                            ? `How does the producer of this data - ${props.attributionShort} - describe this data?`
+                            : "How does the producer of this data describe this data?"
+                    }
+                    content={
+                        <div className="simple-markdown-text">
+                            <SimpleMarkdownText
+                                text={props.descriptionFromProducer}
+                            />
+                        </div>
+                    }
+                    isExpandedDefault={
+                        !(props.descriptionShort || props.descriptionKey)
+                    }
+                    isStacked={!!props.additionalInfo}
+                />
+            )}
+            {props.additionalInfo && (
+                <ExpandableToggle
+                    label="Additional information about this data"
+                    content={
+                        <div className="simple-markdown-text">
+                            <SimpleMarkdownText text={props.additionalInfo} />
+                        </div>
+                    }
+                />
+            )}
+        </div>
+    )
+}
diff --git a/packages/@ourworldindata/components/src/index.ts b/packages/@ourworldindata/components/src/index.ts
index 3ba23fb1bda..15807f8d8b8 100644
--- a/packages/@ourworldindata/components/src/index.ts
+++ b/packages/@ourworldindata/components/src/index.ts
@@ -26,10 +26,9 @@ export {
 
 export { ExpandableToggle } from "./ExpandableToggle/ExpandableToggle.js"
 
-export { IndicatorBrief } from "./IndicatorBrief/IndicatorBrief.js"
-
+export { IndicatorKeyData } from "./IndicatorKeyData/IndicatorKeyData.js"
+export { IndicatorKeyDescription } from "./IndicatorKeyDescription/IndicatorKeyDescription.js"
 export { IndicatorProcessing } from "./IndicatorProcessing/IndicatorProcessing.js"
-
 export {
     IndicatorSources,
     type OriginSubset,
diff --git a/site/DataPageContent.scss b/site/DataPageContent.scss
index 1c2f0a93327..89d88dcc5cd 100644
--- a/site/DataPageContent.scss
+++ b/site/DataPageContent.scss
@@ -124,6 +124,26 @@
         }
     }
 
+    .about-this-data {
+        margin-bottom: 32px;
+    }
+
+    .about-this-data__heading {
+        @include h2-bold;
+        margin: 0 0 16px;
+    }
+
+    .about-this-data__indicator-title {
+        @include h5-black-caps;
+        color: $blue-50;
+        margin: 0 0 8px;
+    }
+
+    .about-this-data__indicator-description {
+        @include body-2-regular;
+        margin: 0 0 16px;
+    }
+
     .related-research__title {
         @include datapage-section-title;
         @include lg-up {
diff --git a/site/DataPageV2Content.tsx b/site/DataPageV2Content.tsx
index 1c717710d20..fb2c4650b12 100644
--- a/site/DataPageV2Content.tsx
+++ b/site/DataPageV2Content.tsx
@@ -1,13 +1,15 @@
 import React, { useEffect } from "react"
 import { Grapher, GrapherInterface } from "@ourworldindata/grapher"
 import {
-    IndicatorBrief,
+    IndicatorKeyData,
+    IndicatorKeyDescription,
     CodeSnippet,
     REUSE_THIS_WORK_SECTION_ID,
     OriginSubset,
     IndicatorSources,
     DATAPAGE_SOURCES_AND_PROCESSING_SECTION_ID,
     IndicatorProcessing,
+    SimpleMarkdownText,
 } from "@ourworldindata/components"
 import ReactDOM from "react-dom"
 import { GrapherWithFallback } from "./GrapherWithFallback.js"
@@ -257,8 +259,34 @@ export const DataPageV2Content = ({
                         />
                         <div className="wrapper grid grid-cols-12">
                             <div className="col-start-3 span-cols-8 span-lg-cols-12">
-                                <IndicatorBrief
-                                    title={datapageData.title}
+                                <div className="about-this-data">
+                                    <h2 className="about-this-data__heading">
+                                        About this data
+                                    </h2>
+                                    {datapageData.descriptionShort && (
+                                        <>
+                                            <div className="about-this-data__indicator-title">
+                                                {datapageData.title}
+                                            </div>
+                                            <p className="about-this-data__indicator-description simple-markdown-text">
+                                                <SimpleMarkdownText
+                                                    text={
+                                                        datapageData.descriptionShort
+                                                    }
+                                                />
+                                            </p>
+                                        </>
+                                    )}
+                                    <IndicatorKeyData
+                                        attribution={attributionUnshortened}
+                                        processedAdapted={processedAdapted}
+                                        dateRange={dateRange ?? undefined}
+                                        lastUpdated={datapageData.lastUpdated}
+                                        nextUpdate={datapageData.nextUpdate}
+                                        unit={datapageData.unit}
+                                    />
+                                </div>
+                                <IndicatorKeyDescription
                                     descriptionShort={
                                         datapageData.descriptionShort
                                     }
@@ -270,15 +298,9 @@ export const DataPageV2Content = ({
                                     attributionShort={
                                         datapageData.attributionShort
                                     }
-                                    attribution={attributionUnshortened}
-                                    processedAdapted={processedAdapted}
-                                    dateRange={dateRange ?? undefined}
-                                    lastUpdated={datapageData.lastUpdated}
-                                    nextUpdate={datapageData.nextUpdate}
                                     additionalInfo={
                                         datapageData.source?.additionalInfo
                                     }
-                                    unit={datapageData.unit}
                                 />
                             </div>
                         </div>
diff --git a/site/owid.scss b/site/owid.scss
index e669014e73f..47d5ed7b5b5 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -27,7 +27,8 @@
 
 @import "../packages/@ourworldindata/components/src/CodeSnippet/code-snippet.scss";
 @import "../packages/@ourworldindata/components/src/ExpandableToggle/ExpandableToggle.scss";
-@import "../packages/@ourworldindata/components/src/IndicatorBrief/IndicatorBrief.scss";
+@import "../packages/@ourworldindata/components/src/IndicatorKeyData/IndicatorKeyData.scss";
+@import "../packages/@ourworldindata/components/src/IndicatorKeyDescription/IndicatorKeyDescription.scss";
 @import "../packages/@ourworldindata/components/src/IndicatorSources/IndicatorSources.scss";
 @import "../packages/@ourworldindata/components/src/IndicatorProcessing/IndicatorProcessing.scss";