diff --git a/packages/chronicle/src/themes/default/Page.module.css b/packages/chronicle/src/themes/default/Page.module.css
index f6a8b68..e8e78cd 100644
--- a/packages/chronicle/src/themes/default/Page.module.css
+++ b/packages/chronicle/src/themes/default/Page.module.css
@@ -125,3 +125,12 @@
 .content details > :not(summary) {
   padding: var(--rs-space-4) var(--rs-space-5);
 }
+
+.loader {
+  flex: 1;
+  margin-bottom: var(--rs-space-3);
+}
+
+.headerLoader {
+  margin-bottom: var(--rs-space-5);
+}
diff --git a/packages/chronicle/src/themes/default/Skeleton.tsx b/packages/chronicle/src/themes/default/Skeleton.tsx
index b8cde1e..b2e8072 100644
--- a/packages/chronicle/src/themes/default/Skeleton.tsx
+++ b/packages/chronicle/src/themes/default/Skeleton.tsx
@@ -6,21 +6,11 @@ export function PageSkeleton() {
   return (
     <Flex className={styles.page}>
       <article className={styles.article}>
-        <Skeleton width="40%" height="32px" />
-        <Skeleton.Provider duration={2}>
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="95%" height="16px" />
-          <Skeleton width="80%" height="16px" />
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="60%" height="16px" />
-        </Skeleton.Provider>
-        <Skeleton width="30%" height="24px" />
-        <Skeleton.Provider duration={2}>
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="90%" height="16px" />
-          <Skeleton width="100%" height="16px" />
-          <Skeleton width="70%" height="16px" />
-        </Skeleton.Provider>
+        <Skeleton width="40%" height="var(--rs-line-height-t2)" containerClassName={styles.headerLoader} />
+        <Skeleton width="60%" height="var(--rs-line-height-regular)" containerClassName={styles.headerLoader} />
+        {[...new Array(20)].map((_, i) => (
+          <Skeleton key={i} width="100%" height="var(--rs-line-height-regular)" containerClassName={styles.loader} />
+        ))}
       </article>
     </Flex>
   );