diff --git a/packages/ui/app/src/changelog/ChangelogContentLayout.tsx b/packages/ui/app/src/changelog/ChangelogContentLayout.tsx
index d5608ac164..a1baa3e9dc 100644
--- a/packages/ui/app/src/changelog/ChangelogContentLayout.tsx
+++ b/packages/ui/app/src/changelog/ChangelogContentLayout.tsx
@@ -1,37 +1,26 @@
-import { useAtomValue } from "jotai";
-import { ReactElement, ReactNode } from "react";
-import { SIDEBAR_ROOT_NODE_ATOM } from "../atoms";
+import clsx from "clsx";
+import { ComponentPropsWithoutRef, ReactElement, ReactNode } from "react";
 
-interface ChangelogContentLayoutProps {
+interface ChangelogContentLayoutProps extends ComponentPropsWithoutRef<"div"> {
+    as: "div" | "section" | "article";
     stickyContent?: ReactNode;
     children: ReactNode;
 }
 
-export function ChangelogContentLayout({ children, stickyContent }: ChangelogContentLayoutProps): ReactElement {
-    const fullWidth = useAtomValue(SIDEBAR_ROOT_NODE_ATOM) == null;
-    return fullWidth ? (
-        <>
-            <div className="hidden lg:block flex-initial w-64 shrink-0">
-                {stickyContent != null && (
-                    <div className="sticky top-header-offset-padded t-muted text-base mb-8">{stickyContent}</div>
-                )}
-            </div>
-            <div className="mx-auto relative max-w-content-width min-w-0 shrink flex-auto">
-                {stickyContent != null && <div className="t-muted text-base mb-8 lg:hidden">{stickyContent}</div>}
-                {children}
-            </div>
-        </>
-    ) : (
-        <>
-            <div className="relative mr-6 max-w-content-width min-w-0 shrink flex-auto">
-                {stickyContent != null && <div className="t-muted text-base mb-8 xl:hidden">{stickyContent}</div>}
+export function ChangelogContentLayout({
+    as: Component,
+    children,
+    stickyContent,
+    ...props
+}: ChangelogContentLayoutProps): ReactElement {
+    const asideContent = stickyContent != null && <div className="fern-changelog-date">{stickyContent}</div>;
+    return (
+        <Component {...props} className={clsx("fern-changelog-entry", props.className)}>
+            <aside>{asideContent}</aside>
+            <div className="fern-changelog-content">
+                {asideContent}
                 {children}
             </div>
-            {stickyContent != null && (
-                <div className="-mt-2 w-72 pl-4 text-right hidden xl:block">
-                    <span className="t-muted text-base sticky top-header-offset-padded">{stickyContent}</span>
-                </div>
-            )}
-        </>
+        </Component>
     );
 }
diff --git a/packages/ui/app/src/changelog/ChangelogPage.tsx b/packages/ui/app/src/changelog/ChangelogPage.tsx
index e51173d14c..583716d0f8 100644
--- a/packages/ui/app/src/changelog/ChangelogPage.tsx
+++ b/packages/ui/app/src/changelog/ChangelogPage.tsx
@@ -117,60 +117,58 @@ export function ChangelogPage({ content }: { content: DocsContent.ChangelogPage
     }, [chunkedEntries.length, page]);
 
     return (
-        <div className="flex justify-between px-4 md:px-6 lg:px-8">
-            <div className={clsx("w-full min-w-0", { "pt-12 lg:pt-24": fullWidth, "pt-8": !fullWidth })}>
-                <main className={clsx("mx-auto max-w-screen-lg break-words", { "lg:ml-8": !fullWidth })}>
-                    <section className="flex pb-8">
-                        <ChangelogContentLayout>
-                            <PageHeader
-                                title={content.node.title}
-                                breadcrumbs={content.breadcrumbs}
-                                subtitle={typeof overview !== "string" ? overview?.frontmatter.excerpt : undefined}
-                            />
-                            <Markdown mdx={overview} />
-                        </ChangelogContentLayout>
-                    </section>
-
-                    {entries.map((entry) => {
-                        const page = content.pages[entry.pageId];
-                        const title = typeof page !== "string" ? page?.frontmatter.title : undefined;
-                        return (
-                            <Fragment key={entry.id}>
-                                <hr />
-                                <article id={entry.date} className="flex items-stretch py-8 lg:py-16">
-                                    <ChangelogContentLayout
-                                        stickyContent={<FernLink href={toHref(entry.slug)}>{entry.title}</FernLink>}
-                                    >
-                                        <Markdown
-                                            title={
-                                                title != null ? (
-                                                    <h2>
-                                                        <FernLink href={toHref(entry.slug)} className="not-prose">
-                                                            {title}
-                                                        </FernLink>
-                                                    </h2>
-                                                ) : undefined
-                                            }
-                                            mdx={page}
-                                        />
-                                    </ChangelogContentLayout>
-                                </article>
-                            </Fragment>
-                        );
-                    })}
-
-                    {(prev != null || next != null) && (
-                        <div className="flex">
-                            <ChangelogContentLayout>
-                                <BottomNavigationButtons prev={prev} next={next} alwaysShowGrid />
+        <div
+            className={clsx("fern-changelog", {
+                "full-width": fullWidth,
+            })}
+        >
+            <main>
+                <ChangelogContentLayout as="section" className="pb-8">
+                    <PageHeader
+                        title={content.node.title}
+                        breadcrumbs={content.breadcrumbs}
+                        subtitle={typeof overview !== "string" ? overview?.frontmatter.excerpt : undefined}
+                    />
+                    <Markdown mdx={overview} />
+                </ChangelogContentLayout>
+
+                {entries.map((entry) => {
+                    const page = content.pages[entry.pageId];
+                    const title = typeof page !== "string" ? page?.frontmatter.title : undefined;
+                    return (
+                        <Fragment key={entry.id}>
+                            <hr />
+                            <ChangelogContentLayout
+                                as="article"
+                                id={entry.date}
+                                stickyContent={<FernLink href={toHref(entry.slug)}>{entry.title}</FernLink>}
+                            >
+                                <Markdown
+                                    title={
+                                        title != null ? (
+                                            <h2>
+                                                <FernLink href={toHref(entry.slug)} className="not-prose">
+                                                    {title}
+                                                </FernLink>
+                                            </h2>
+                                        ) : undefined
+                                    }
+                                    mdx={page}
+                                />
                             </ChangelogContentLayout>
-                        </div>
-                    )}
-
-                    <div className="h-48" />
-                    <BuiltWithFern className="w-fit mx-auto my-8" />
-                </main>
-            </div>
+                        </Fragment>
+                    );
+                })}
+
+                {(prev != null || next != null) && (
+                    <ChangelogContentLayout as="div">
+                        <BottomNavigationButtons prev={prev} next={next} alwaysShowGrid />
+                    </ChangelogContentLayout>
+                )}
+
+                <div className="h-48" />
+                <BuiltWithFern className="w-fit mx-auto my-8" />
+            </main>
         </div>
     );
 }
diff --git a/packages/ui/app/src/changelog/index.scss b/packages/ui/app/src/changelog/index.scss
new file mode 100644
index 0000000000..2ff70be29c
--- /dev/null
+++ b/packages/ui/app/src/changelog/index.scss
@@ -0,0 +1,65 @@
+@layer components {
+    .fern-changelog {
+        @apply flex justify-between px-4 md:px-6 lg:px-8;
+
+        > main {
+            @apply mx-auto max-w-screen-lg break-words;
+        }
+    }
+
+    .fern-changelog-entry {
+        @apply flex items-stretch;
+
+        &:is(article) {
+            @apply py-8 lg:py-16;
+        }
+    }
+
+    .fern-changelog.full-width {
+        @apply pt-12 lg:pt-24;
+
+        .fern-changelog-content {
+            @apply mx-auto relative max-w-content-width min-w-0 shrink flex-auto;
+
+            .fern-changelog-date {
+                @apply t-muted text-base mb-8 lg:hidden;
+            }
+        }
+
+        .fern-changelog-entry > aside {
+            @apply hidden lg:block flex-initial w-64 shrink-0;
+
+            .fern-changelog-date {
+                @apply sticky top-header-offset-padded t-muted text-base mb-8;
+            }
+        }
+    }
+
+    .fern-changelog:not(.full-width) {
+        @apply pt-8;
+
+        > main {
+            @apply lg:ml-8;
+        }
+
+        .fern-changelog-entry {
+            @apply flex-row-reverse;
+        }
+
+        .fern-changelog-content {
+            @apply relative mr-6 max-w-content-width min-w-0 shrink flex-auto;
+
+            .fern-changelog-date {
+                @apply t-muted text-base mb-8 xl:hidden;
+            }
+        }
+
+        .fern-changelog-entry > aside {
+            @apply -mt-2 w-72 pl-4 text-right hidden xl:block;
+
+            .fern-changelog-date {
+                @apply sticky t-muted text-base top-header-offset-padded;
+            }
+        }
+    }
+}
diff --git a/packages/ui/app/src/css/globals.scss b/packages/ui/app/src/css/globals.scss
index 2cbabdfb77..e91877db7c 100644
--- a/packages/ui/app/src/css/globals.scss
+++ b/packages/ui/app/src/css/globals.scss
@@ -10,6 +10,7 @@
 @import "../playground";
 @import "../components";
 @import "../mdx/components";
+@import "../changelog";
 @import "./utilities";
 @import "../themes";
 @import "../header";
diff --git a/packages/ui/app/src/sidebar/nodes/SidebarChangelogNode.tsx b/packages/ui/app/src/sidebar/nodes/SidebarChangelogNode.tsx
index fdecfd36c2..ffe320d3eb 100644
--- a/packages/ui/app/src/sidebar/nodes/SidebarChangelogNode.tsx
+++ b/packages/ui/app/src/sidebar/nodes/SidebarChangelogNode.tsx
@@ -25,7 +25,7 @@ export function SidebarChangelogNode({ node, depth, className }: SidebarChangelo
             className={className}
             selected={selected}
             depth={Math.max(0, depth - 1)}
-            icon={node.icon ?? <Calendar />}
+            icon={node.icon ?? <Calendar className="size-4" />}
             tooltipContent={renderChangelogTooltip(node)}
             hidden={node.hidden}
         />