diff --git a/astro/src/components/RichText.astro b/astro/src/components/RichText.astro
index 4d5f9ec..d54e1a5 100644
--- a/astro/src/components/RichText.astro
+++ b/astro/src/components/RichText.astro
@@ -9,7 +9,7 @@ const contentArray = getContentArray(content);
   {
     contentArray.map((value) => {
       if (typeof value === "string") {
-        return <div set:html={value} />;
+        return <article set:html={value} />;
       } else {
         return (
           <Image
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
index 34b0538..11af0d3 100644
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@@ -1,11 +1,8 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import type { Post } from "../types";
+import { getPosts } from "../utils/payload";
 
-const posts: Post[] = (
-  await (await fetch("http://payload:3001/api/posts")).json()
-).docs;
-posts.forEach((post) => console.log(post.title));
+const posts = await getPosts();
 ---
 
 <Layout title="Welcome to Astroad">
diff --git a/astro/src/pages/posts/[id].astro b/astro/src/pages/posts/[id].astro
index 23e342c..d834169 100644
--- a/astro/src/pages/posts/[id].astro
+++ b/astro/src/pages/posts/[id].astro
@@ -1,26 +1,31 @@
 ---
 import Layout from "../../layouts/Layout.astro";
-import type { Post } from "../../types";
-
 import RichText from "../../components/RichText.astro";
+import type { Post } from "../../types";
+import { getPost, getPosts } from "../../utils/payload";
+
 export async function getStaticPaths() {
-  const paths = (
-    await (await fetch("http://payload:3001/api/posts")).json()
-  ).docs.map((post: Post) => ({
+  const posts = await getPosts();
+  const paths = posts.map((post: Post) => ({
     params: { id: post.id },
   }));
   return paths;
 }
+
 const { id } = Astro.params;
-const post = (await (
-  await fetch(`http://payload:3001/api/posts/${id}`)
-).json()) as Post;
+const post = id && (await getPost(id));
 ---
 
-<Layout title={post.title!}>
-  <div class="max-w-3xl mx-auto space-y-3 my-3">
-    <a href="/">BACK</a>
-    <h1>{post.title}</h1>
-    {post.content && <RichText content={post.content} />}
-  </div>
-</Layout>
+{
+  post ? (
+    <Layout title={post.title!}>
+      <div class="max-w-3xl mx-auto space-y-3 my-3">
+        <a href="/">BACK</a>
+        <h1>{post.title}</h1>
+        {post.content && <RichText content={post.content} />}
+      </div>
+    </Layout>
+  ) : (
+    <div>404</div>
+  )
+}
diff --git a/astro/src/utils/helpers.ts b/astro/src/utils/helpers.ts
index 650638c..391d90f 100644
--- a/astro/src/utils/helpers.ts
+++ b/astro/src/utils/helpers.ts
@@ -1,8 +1,4 @@
-import {
-  payloadSlateToDomConfig,
-  SlateToDomConfig,
-  slateToHtml,
-} from "slate-serializers";
+import { payloadSlateToDomConfig, slateToHtml } from "slate-serializers";
 import { Element } from "domhandler";
 
 export const getContentArray = (content: any) => {
diff --git a/astro/src/utils/payload.ts b/astro/src/utils/payload.ts
new file mode 100644
index 0000000..57efda9
--- /dev/null
+++ b/astro/src/utils/payload.ts
@@ -0,0 +1,7 @@
+import type { Post } from "../types";
+
+export const getPosts = async () =>
+  (await (await fetch("http://payload:3001/api/posts")).json()).docs as Post[];
+
+export const getPost = async (id: string) =>
+  (await (await fetch(`http://payload:3001/api/posts/${id}`)).json()) as Post;
diff --git a/payload/src/collections/Posts.ts b/payload/src/collections/Posts.ts
index 8efa59f..835c5c9 100644
--- a/payload/src/collections/Posts.ts
+++ b/payload/src/collections/Posts.ts
@@ -23,6 +23,8 @@ const Posts: CollectionConfig = {
       name: "content",
       type: "richText",
       admin: {
+        elements: ["h2", "h3", "h4", "link", "ol", "ul", "upload"],
+        leaves: ["bold", "italic", "underline"],
         upload: {
           collections: {
             media: {