diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index c97210c..186a14e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,11 +27,20 @@
 		});
 	}
 
+	import { initNotion } from "sveltekit-notion-blog";
+
+	export const prerender = true;
+
+	initNotion({
+			databaseId: import.meta.env.PUBLIC_NOTION_DATABASE_ID,
+			notionToken: import.meta.env.PUBLIC_NOTION_TOKEN,
+	});
+
 	let routes = [
 		{ url: '/', label: 'Home' },
 		{ url: '/projects', label: 'Projects' },
-		{ url: '/tools', label: 'Tools' }
-		// { url: '/blog', label: 'Blog' }
+		{ url: '/tools', label: 'Tools' },
+		{ url: '/blog', label: 'Blog' },
 	];
 
 	let progress = 0;
diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
new file mode 100644
index 0000000..dadfd97
--- /dev/null
+++ b/src/routes/blog/+page.server.ts
@@ -0,0 +1,3 @@
+import type { PageServerLoad } from './$types';
+import { getAllPosts } from "sveltekit-notion-blog";
+export const load: PageServerLoad = () => getAllPosts();
\ No newline at end of file
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 1e2881b..6ec5455 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -1,7 +1,16 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { PostsList } from "sveltekit-notion-blog";
+	export let data: PageData;
+</script>
+
 <svelte:head>
 	<title>hellob.art &mdash; blog</title>
 </svelte:head>
 
 <main class="container mx-auto px-4 py-8 text-left">
 	<h2 class="text-3xl font-bold mb-8">Blog posts</h2>
+	<div class="max-w-4xl m-auto">
+		<PostsList {data} />
+	</div>
 </main>
diff --git a/src/routes/blog/[slug]/$types.d.ts b/src/routes/blog/[slug]/$types.d.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes/blog/[slug]/+page.server.ts b/src/routes/blog/[slug]/+page.server.ts
new file mode 100644
index 0000000..7667c28
--- /dev/null
+++ b/src/routes/blog/[slug]/+page.server.ts
@@ -0,0 +1,4 @@
+import type { ServerLoadEvent } from '@sveltejs/kit';
+import { getBlogPageBySlug } from 'sveltekit-notion-blog';
+
+export const load = (event: ServerLoadEvent) => getBlogPageBySlug(event);
\ No newline at end of file
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 0f65c0d..3251c75 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -1,11 +1,8 @@
-<script>
-	/** @type {import('./$types').PageData} */
-	export let data;
+<script lang="ts">
+	import { BlogPost } from 'sveltekit-notion-blog';
+	import type { PageData } from './$types';
+	
+	export let data: PageData;
 </script>
 
-<svelte:head>
-	<title>hellob.art &mdash; {data.title}</title>
-</svelte:head>
-
-<!-- <h1>{data.title}</h1>
-<div>{@html data.content}</div> -->
+<BlogPost {data} />
\ No newline at end of file