diff --git a/src/app/blog/[id]/Aside.tsx b/src/app/blog/[id]/Aside.tsx
new file mode 100644
index 0000000..1b9b71a
--- /dev/null
+++ b/src/app/blog/[id]/Aside.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+
+export default function BlogContentAside() {
+  return (
+    <AppShell.Aside>
+      <h1>BlogContentAside</h1>
+    </AppShell.Aside>
+  );
+}
diff --git a/src/app/blog/[id]/TableOfContents.tsx b/src/app/blog/[id]/TableOfContents.tsx
new file mode 100644
index 0000000..b8a1c87
--- /dev/null
+++ b/src/app/blog/[id]/TableOfContents.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import { TableOfContents } from "@mantine/core";
+
+export const TableOfContent = ({ children }: { children: React.ReactNode }) => {
+  return <TableOfContents>{children}</TableOfContents>;
+};
diff --git a/src/app/blog/[id]/layout.tsx b/src/app/blog/[id]/layout.tsx
new file mode 100644
index 0000000..b9962e4
--- /dev/null
+++ b/src/app/blog/[id]/layout.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { AppShell } from "@mantine/core";
+import BlogContentAside from "./Aside";
+
+export default function BlogContentLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <AppShell
+      aside={{
+        width: 300,
+        breakpoint: "md",
+        collapsed: { desktop: false, mobile: true },
+      }}
+    >
+      <BlogContentAside />
+      {children}
+    </AppShell>
+  );
+}