diff --git a/src/lib/PostPreview.svelte b/src/lib/PostPreview.svelte
deleted file mode 100644
index 95894d2..0000000
--- a/src/lib/PostPreview.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-    export let data;
-
-</script>
-
-<h2>{data.post.title}</h2>
-<p>data.</p>
\ No newline at end of file
diff --git a/src/lib/queries.js b/src/lib/queries.js
new file mode 100644
index 0000000..f3d219d
--- /dev/null
+++ b/src/lib/queries.js
@@ -0,0 +1,33 @@
+/**
+ * Example of how you could re-use GROQ queries across different contexts with Javascript.
+ * As your schema evolves, this pattern will be useful to keep your data in sync across all surfaces.
+ */
+export function getPostsQuery(extraFilter) {
+    return /* groq */ `*[
+      _type == "post" &&
+      publishedAt < now()
+      ${extraFilter ? `&& ${extraFilter}` : ''}
+    ] | order(publishedAt desc) {
+        title,
+        slug,
+        coverImage,
+        _createdAt,
+        _updatedAt,
+        body,
+    }`
+  }
+
+  
+  // Insert the return component calling `getContent()` below
+  /**
+   * You can also re-use parts of projections as fragments.
+   * In this case, we're defining that, to render an author card, we need their name, slug & image.
+   */
+  export const POST_CARD_FRAGMENT = `
+  title,
+  slug,
+  coverImage,
+  _createdAt,
+  _updatedAt,
+  body,
+  `
\ No newline at end of file
diff --git a/src/utils/sanity/client.js b/src/lib/sanity/client.js
similarity index 100%
rename from src/utils/sanity/client.js
rename to src/lib/sanity/client.js
diff --git a/src/routes/learnings/+page.js b/src/routes/learnings/+page.js
new file mode 100644
index 0000000..08a8a50
--- /dev/null
+++ b/src/routes/learnings/+page.js
@@ -0,0 +1,23 @@
+import { client } from '$lib/sanity/client.js'
+import { POST_CARD_FRAGMENT, getPostsQuery } from '$lib/queries.js'
+
+// Fetch all valid posts & authors to display in the homepage
+export async function load() {
+  const data = await client.fetch(/* groq */ `{
+		"posts": ${getPostsQuery()},
+		"post": *[_type == "post"] {
+			${POST_CARD_FRAGMENT}
+		}
+  }`)
+
+  if (data) {
+    return {
+      status: 200,
+      body: data
+    }
+  }
+
+  return {
+    status: 404
+  }
+}
\ No newline at end of file
diff --git a/src/routes/learnings/+page.svelte b/src/routes/learnings/+page.svelte
index f33d5e5..c0bad22 100644
--- a/src/routes/learnings/+page.svelte
+++ b/src/routes/learnings/+page.svelte
@@ -1,28 +1,5 @@
 <script>
-    import { client } from '/src/utils/sanity/client.js'
-    
-    // Fetch content with GROQ
-    async function getContent() {
-      const CONTENT_QUERY = `*[_type == "project"] {
-      ...,
-      coverImage {
-        ...,
-        asset->
-      },
-      duration {
-        ...
-      },
-      tags[],
-      body
-    }
-    `
-      const content = await client.fetch(CONTENT_QUERY)
-      return content
-    }
-    const posts = getContent();
-    // Log content to console
-    getContent().then(content => console.log(content))
-    
-    // Insert the return component calling `getContent()` below
+    export let data;
+
 </script>
-<p>{posts.title}</p>
\ No newline at end of file
+<p>{data.posts}</p>
\ No newline at end of file