diff --git a/src/lib/PostHelpers.svelte b/src/lib/PostHelpers.svelte
index 1b69ec7..0122d5a 100644
--- a/src/lib/PostHelpers.svelte
+++ b/src/lib/PostHelpers.svelte
@@ -1,16 +1,74 @@
 <script module lang="ts">
-	let posts = import.meta.glob("/src/routes/posts/*.md", { eager: true });
-	type Post = {
+	let posts = import.meta.glob("/src/routes/posts/**/*.md", {
+		eager: true,
+	});
+	export type Post = {
 		title: string;
 		description: string;
+		path: string;
 		catagory: string;
 		date: Date;
 		updated: Date;
-		tags: [string];
+		tags: string[];
 	};
-	export function getPosts(): Promise<Array<Post>> {
+	export { PostCard };
+	export function getPosts(): Post[] {
+		console.log(posts);
+		let postsNew: Post[] = new Array();
 		Object.entries(posts).map(([path, module]) => {
-			console.log(path, module.metadata);
+			const metadata = module.metadata;
+			let date = new Date(metadata.date);
+			let updated = new Date(metadata.updated);
+			let tags = metadata.tags.split(" ");
+			let trimedPath = path.replace("/src/routes/", "");
+			let post: Post = {
+				title: metadata.title,
+				description: metadata.description,
+				date: date,
+				path: trimedPath,
+				updated: updated,
+				catagory: metadata.catagory,
+				tags: tags,
+			};
+			postsNew.push(post);
 		});
+		console.log(postsNew);
+		return postsNew;
 	}
 </script>
+
+{#snippet PostCard(post: Post)}
+	<a href={post.path}>
+		<div class="card_body">
+			<div>
+				<!-- // Left -->
+				<p>meow Left</p>
+				<p>{post.title}</p>
+			</div>
+			<div>
+				<!-- // Right -->
+				<p>meow Right</p>
+			</div>
+		</div>
+	</a>
+{/snippet}
+
+<style>
+	.card_body {
+		display: flex;
+		flex-direction: row;
+		height: 200px;
+		width: 200px;
+		justify-content: space-between;
+	}
+	.card_left {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+	}
+	.card_right {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+	}
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 08ba759..d26423e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,11 +4,9 @@
 	import { SidebarRight } from "$lib/sidebar/sidebar_right.svelte";
 	import { WebButtons } from "$lib/web_buttons/webButtons.svelte";
 	import { NavBar } from "$lib/nav.svelte";
-	import PostHelpers, { getPosts } from "$lib/PostHelpers.svelte";
 	let { children } = $props();
 
 	export const prerender = true;
-	getPosts();
 </script>
 
 <svelte:head>
diff --git a/src/routes/posts/+page.md b/src/routes/posts/+page.md
deleted file mode 100644
index 7a8ea82..0000000
--- a/src/routes/posts/+page.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: meow
----
-
-meow
diff --git a/src/routes/posts/+page.svelte b/src/routes/posts/+page.svelte
new file mode 100644
index 0000000..620141f
--- /dev/null
+++ b/src/routes/posts/+page.svelte
@@ -0,0 +1,9 @@
+<script lang="ts">
+	import { getPosts, PostCard } from "src/lib/PostHelpers.svelte";
+
+	const posts = getPosts();
+</script>
+
+{#each posts as post}
+	{@render PostCard(post)}
+{/each}
diff --git a/src/routes/posts/meow/+page.md b/src/routes/posts/meow/+page.md
new file mode 100644
index 0000000..9ad46f9
--- /dev/null
+++ b/src/routes/posts/meow/+page.md
@@ -0,0 +1,9 @@
+---
+title: hi
+date: 1995-12-17T03:24:00
+updated: 1995-12-17T03:24:00
+description: meow
+catagory: main
+tags: moew meow meow
+---
+Test post, this tests the frontmatter processing