diff --git a/app/layout.tsx b/app/layout.tsx
index 062aac5..94eab21 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,7 +4,9 @@ import { ThemeProvider } from '@wrksz/themes/next'
 import { Providers } from './providers'
 import './globals.css'
 import 'katex/dist/katex.min.css'
-import { useMDXComponents } from '@/mdx-components'
+import { Header } from '@/components/layout/Header'
+import { Footer } from '@/components/layout/Footer'
+import { ScrollProgress } from '@/components/ui/ScrollProgress'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -40,7 +42,10 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           enableSystem
           disableTransitionOnChange
         >
-          <Providers>{children}</Providers>
+            <ScrollProgress />
+            <Header />
+            {children}
+            <Footer />
         </ThemeProvider>
       </body>
     </html>
diff --git a/app/posts/[slug]/page.tsx b/app/posts/[slug]/page.tsx
index 69eff1d..aacd516 100644
--- a/app/posts/[slug]/page.tsx
+++ b/app/posts/[slug]/page.tsx
@@ -2,6 +2,8 @@ import { notFound } from 'next/navigation'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { getPosts, getPost, getReadingTime } from '@/lib/posts'
 import { TableOfContents } from '@/components/blog/TableOfContents'
+import { ScrollToTop } from '@/components/ui/ScrollToTop'
+import { ReadingProgress } from '@/components/ui/ReadingProgress'
 
 export async function generateStaticParams() {
   const posts = await getPosts()
@@ -25,26 +27,30 @@ export default async function PostPage({ params }: { params: Promise<{ slug: str
   if (!post) notFound()
 
   return (
-    <div className="max-w-4xl mx-auto px-6 py-16">
-      <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
-        <article>
-          <header className="mb-12">
-            <time className="font-mono text-sm text-ink-soft">{post.date}</time>
-            <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink">
-              {post.title}
-            </h1>
-            <p className="font-mono text-xs text-ink-soft">
-              {getReadingTime(post.title)} min read
-            </p>
-          </header>
-          <div className="prose prose-lg max-w-none">
-            <MDXRemote source={post.source} />
-          </div>
-        </article>
-        <aside className="hidden lg:block">
-          <TableOfContents />
-        </aside>
+    <>
+      <ScrollToTop />
+      <ReadingProgress />
+      <div className="max-w-4xl mx-auto px-6 py-16">
+        <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
+          <article>
+            <header className="mb-12">
+              <time className="font-mono text-sm text-ink-soft">{post.date}</time>
+              <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink">
+                {post.title}
+              </h1>
+              <p className="font-mono text-xs text-ink-soft">
+                {getReadingTime(post.title)} min read
+              </p>
+            </header>
+            <div className="prose prose-lg max-w-none">
+              <MDXRemote source={post.source} />
+            </div>
+          </article>
+          <aside className="hidden lg:block">
+            <TableOfContents />
+          </aside>
+        </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/components/blog/PostCard.tsx b/components/blog/PostCard.tsx
index 86fc122..381dd35 100644
--- a/components/blog/PostCard.tsx
+++ b/components/blog/PostCard.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { motion } from "motion/react";
 import type { PostMeta } from "@/lib/posts";