diff --git a/src/routes/blog/[...params].svelte b/src/routes/blog/[...params]/+page.svelte
similarity index 51%
rename from src/routes/blog/[...params].svelte
rename to src/routes/blog/[...params]/+page.svelte
index f70bbd2..d869d49 100644
--- a/src/routes/blog/[...params].svelte
+++ b/src/routes/blog/[...params]/+page.svelte
@@ -1,39 +1,12 @@
-<script lang="ts" context="module">
-  import { parseParams } from '$lib/pagination/dropTakeParams'
-
-  /**
-   * @type {import('@sveltejs/kit').Load}
-   */
-  export async function load({ fetch, params }) {
-    const { page = 1, pageSize = 7, ...filters } = parseParams(params.params)
-    const articleResponse = await fetch(
-      `/blog/articles/${params.params ? params.params : 'index'}.json`
-    ).then((r) => r.json())
-
-    return {
-      props: {
-        posts: articleResponse.posts,
-        page: Number(page),
-        pageSize,
-        filters,
-      },
-    }
-  }
-</script>
-
 <script lang="ts">
-  import ArticleFooter from '../../components/blog/ArticleFooter.svelte'
-  import Paginator from '../../components/paginator/Paginator.svelte'
+  import ArticleFooter from '../../../components/blog/ArticleFooter.svelte'
+  import Paginator from '../../../components/paginator/Paginator.svelte'
   import { postListClass, seeAllClass } from './index.css'
-  import type { PostContent } from './content'
-  import type { PaginationResult } from '$lib/pagination/pagination'
+  import type { PageData } from './$types'
 
-  export let posts: PaginationResult<PostContent>
-  export let filters: Record<string, string>
-  export let page: number
-  export let pageSize: number
-
-  let totalPages = Math.ceil(posts.totalCount / pageSize)
+  export let data: PageData
+  let { posts, filters, page, pageSize } = data
+  $: ({ posts, filters, page, pageSize } = data)
 </script>
 
 <svelte:head>
diff --git a/src/routes/blog/[...params]/+page.ts b/src/routes/blog/[...params]/+page.ts
new file mode 100644
index 0000000..1c9a243
--- /dev/null
+++ b/src/routes/blog/[...params]/+page.ts
@@ -0,0 +1,18 @@
+import { parseParams } from '$lib/pagination/dropTakeParams'
+import type { PageLoad } from './$types'
+import type { PostContent } from './../content'
+import type { PaginationResult } from '$lib/pagination/pagination'
+
+export const load = (async ({ fetch, params }) => {
+  const { page = 1, pageSize = 7, ...filters } = parseParams(params.params)
+  const articleResponse = await fetch(
+    `/blog/articles/${params.params ? params.params : 'index'}`
+  ).then((r) => r.json())
+
+  return {
+    posts: articleResponse.posts as PaginationResult<PostContent>,
+    page: Number(page),
+    pageSize,
+    filters,
+  }
+}) satisfies PageLoad
diff --git a/src/routes/blog/index.css.ts b/src/routes/blog/[...params]/index.css.ts
similarity index 100%
rename from src/routes/blog/index.css.ts
rename to src/routes/blog/[...params]/index.css.ts