diff --git a/bun.lock b/bun.lock
index 731b6be5..b743f63e 100644
--- a/bun.lock
+++ b/bun.lock
@@ -29,6 +29,7 @@
         "@opentelemetry/resources": "^2.6.1",
         "@opentelemetry/sdk-metrics": "^2.6.1",
         "@opentelemetry/semantic-conventions": "^1.40.0",
+        "@radix-ui/react-icons": "^1.3.2",
         "@raystack/apsara": "1.0.0-rc.4",
         "@shikijs/rehype": "^4.0.2",
         "@vitejs/plugin-react": "^6.0.1",
diff --git a/packages/chronicle/package.json b/packages/chronicle/package.json
index e881beb2..e13ac3bd 100644
--- a/packages/chronicle/package.json
+++ b/packages/chronicle/package.json
@@ -46,6 +46,7 @@
     "@opentelemetry/resources": "^2.6.1",
     "@opentelemetry/sdk-metrics": "^2.6.1",
     "@opentelemetry/semantic-conventions": "^1.40.0",
+    "@radix-ui/react-icons": "^1.3.2",
     "@raystack/apsara": "1.0.0-rc.4",
     "@shikijs/rehype": "^4.0.2",
     "@vitejs/plugin-react": "^6.0.1",
diff --git a/packages/chronicle/src/themes/paper/Page.module.css b/packages/chronicle/src/themes/paper/Page.module.css
index bfce05d3..ff5d0edb 100644
--- a/packages/chronicle/src/themes/paper/Page.module.css
+++ b/packages/chronicle/src/themes/paper/Page.module.css
@@ -1,6 +1,6 @@
 .main {
   flex: 1;
-  width: 90%;
+  width: 100%;
   max-width: calc(1024px + var(--rs-space-17));
   margin: 0 auto;
   padding-top: var(--rs-space-12);
@@ -137,8 +137,8 @@
   box-shadow:
     0 1px 3px rgba(0, 0, 0, 0.08),
     0 4px 12px rgba(0, 0, 0, 0.04);
-  margin-bottom: var(--rs-space-9);
   min-height: calc(100vh - var(--rs-space-12));
+  margin: 0 var(--rs-space-7) var(--rs-space-9) var(--rs-space-7);
 }
 
 .content h1,
@@ -225,5 +225,10 @@
 }
 
 .loader {
+    flex: 1;
     margin-bottom: var(--rs-space-3)
 }
+
+.navbarLoaderWrapper {
+    width: 30%;
+}
diff --git a/packages/chronicle/src/themes/paper/Page.tsx b/packages/chronicle/src/themes/paper/Page.tsx
index 447c754f..c5b0f7da 100644
--- a/packages/chronicle/src/themes/paper/Page.tsx
+++ b/packages/chronicle/src/themes/paper/Page.tsx
@@ -1,12 +1,14 @@
 import {
-  ArrowLeftIcon,
-  ArrowRightIcon,
-  AdjustmentsHorizontalIcon,
   EyeIcon,
   SunIcon,
   MoonIcon,
-  XMarkIcon,
 } from '@heroicons/react/24/outline';
+import {
+  ArrowLeftIcon,
+  ArrowRightIcon,
+  MixerHorizontalIcon,
+  Cross2Icon
+} from '@radix-ui/react-icons'
 import { IconButton, useTheme } from '@raystack/apsara';
 import { useEffect, useMemo, useState } from 'react';
 import { Link as RouterLink, useLocation } from 'react-router';
@@ -83,12 +85,12 @@ export function Page({ page, tree }: ThemePageProps) {
                   </IconButton>
                 )}
                 <IconButton size={2} onClick={() => setSettingsOpen(false)} aria-label='Close settings'>
-                  <XMarkIcon width={14} height={14} />
+                  <Cross2Icon width={14} height={14} />
                 </IconButton>
               </>
             ) : (
               <IconButton size={2} onClick={() => setSettingsOpen(true)} aria-label='Open settings'>
-                <AdjustmentsHorizontalIcon width={14} height={14} />
+                <MixerHorizontalIcon width={14} height={14} />
               </IconButton>
             )}
           </div>
diff --git a/packages/chronicle/src/themes/paper/Skeleton.tsx b/packages/chronicle/src/themes/paper/Skeleton.tsx
index bf715ce5..e4af3190 100644
--- a/packages/chronicle/src/themes/paper/Skeleton.tsx
+++ b/packages/chronicle/src/themes/paper/Skeleton.tsx
@@ -1,9 +1,18 @@
 import { Skeleton } from '@raystack/apsara';
 import styles from './Page.module.css';
+import { cx } from 'class-variance-authority';
 
 export function PageSkeleton() {
   return (
     <main className={styles.main}>
+      <div className={styles.navbar}>
+        <div className={cx(styles.navLeft, styles.navbarLoaderWrapper)}>
+          <Skeleton highlightColor="var(--rs-color-foreground-base-emphasis)" containerClassName={styles.loader}/>
+        </div>
+        <div className={cx(styles.navRight, styles.navbarLoaderWrapper)}>
+          <Skeleton highlightColor="var(--rs-color-foreground-base-emphasis)" containerClassName={styles.loader}/>
+        </div>
+      </div>
     <div className={styles.content}>
         <header className={styles.articleHeader}>
           <Skeleton width="50%" height="16px" containerClassName={styles.headerLoader}/>