diff --git a/.astro/types.d.ts b/.astro/types.d.ts
index 27705ca..6cf2b5b 100644
--- a/.astro/types.d.ts
+++ b/.astro/types.d.ts
@@ -216,5 +216,5 @@ declare module 'astro:content' {
 
 	type AnyEntryMap = ContentEntryMap & DataEntryMap;
 
-	export type ContentConfig = typeof import("../src/content/config.js");
+	export type ContentConfig = typeof import("./../src/content/config.js");
 }
diff --git a/astro.config.mjs b/astro.config.mjs
index 5a267f1..803a5cf 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -10,4 +10,5 @@ export default defineConfig({
   integrations: [mdx(), icon(), tailwind({
     applyBaseStyles: false,
   }), compress()],
+  site: 'https://story-of-the-eight.vercel.app',
 })
diff --git a/src/components/SiteMeta.astro b/src/components/SiteMeta.astro
index 46cdc68..4c72640 100644
--- a/src/components/SiteMeta.astro
+++ b/src/components/SiteMeta.astro
@@ -16,7 +16,7 @@ let subtitle = 'Story of The Eight'
 <meta property="og:description" content={description} />
 <meta property="og:type" content="website" />
 <meta property="og:url" content={url} />
-<meta property="og:image" content={Astro.site ? `${Astro.site}${image}` : image} />
+<meta property="og:image" content={`${Astro.site}${image}`} />
 
 <!-- twitter card -->
 
diff --git a/src/layouts/DefaultLayout.astro b/src/layouts/DefaultLayout.astro
index 53c784a..7773989 100644
--- a/src/layouts/DefaultLayout.astro
+++ b/src/layouts/DefaultLayout.astro
@@ -9,7 +9,7 @@ const {
   title = 'Story of The Eight',
   description = 'A Collection of stories as told by Samuel C Tyler, concerning the collected lore of The Eight.',
   url,
-  image = '/eight-social-preview.png',
+  image = 'eight-social-preview.png',
   author = 'Samuel C Tyler',
 } = Astro.props
 ---
@@ -26,9 +26,7 @@ const {
     <SiteMeta
       title={title}
       description={description.substring(0, 100)}
-      url={Astro.site
-        ? `${Astro.site}/${title.toLowerCase().replaceAll(' ', '-')}`
-        : `https://story-of-the-eight.vercel.app/${title.toLowerCase().replaceAll(' ', '-')}`}
+      url={`${Astro.site}${url}`}
       image={image}
       author={author}
     />
diff --git a/src/pages/posts/[...page].astro b/src/pages/posts/[...page].astro
index 4d49362..9323949 100644
--- a/src/pages/posts/[...page].astro
+++ b/src/pages/posts/[...page].astro
@@ -5,7 +5,7 @@ import { getCollection } from "astro:content";
 
 export async function getStaticPaths({ paginate }) {
   let data = await getCollection("posts");
-  // data = data.sort((postA, postB) => postA.order > postB.order)
+  data.sort((postA, postB) => postA.data.order < postB.data.order ? -1 : 1)
 
   return paginate(data, { pageSize: 9 })
 }
@@ -34,10 +34,10 @@ const { page } = Astro.props
             <li>
               {post}
               <Card
-                img={post?.data?.image?.banner}
                 url={`/posts/${post.slug}`}
                 title={post?.data?.title}
                 footer={'posted by: ' + post?.data?.author}
+                img={`/${post?.data?.image?.banner}`}
               >
                 {post?.data?.description}
               </Card>
diff --git a/src/pages/posts/[...slug].astro b/src/pages/posts/[...slug].astro
index 90232ad..94b9f89 100644
--- a/src/pages/posts/[...slug].astro
+++ b/src/pages/posts/[...slug].astro
@@ -1,55 +1,55 @@
 ---
 import { getCollection } from 'astro:content';
 import DefaultLayout from '../../layouts/DefaultLayout.astro'
+import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
 
 export async function getStaticPaths() {
   const blogEntries = await getCollection('posts');
   return blogEntries.map(entry => ({
-    params: { slug: entry.slug }, props: { entry },
+    params: { slug: entry.slug }, props: { post: entry },
   }));
 }
 
 const { post } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await post.render();
 ---
 
-<DefaultLayout title={post.title} description={post.body} url={post.title}>
+<DefaultLayout title={post.data.title} description={post.data.description} url={`posts/${post.slug}`}>
     <div class="container">
       <div class="mt-12">
         <Breadcrumbs>
           <BreadcrumbsItem href="/" label="Home" />
           <BreadcrumbsItem href="/blog" label="Blog" />
-          <BreadcrumbsItem currentPage={true} label={post.title} />
+          <BreadcrumbsItem currentPage={true} label={post.data.title} />
         </Breadcrumbs>
       </div>
     </div>
     <section class="my-12">
       <div class="container">
-        <h1>{post.title}</h1><br />
-        <p>By userId: {post.userId}</p>
+        <h1>{post.data.title}</h1><br />
+        <p>By: {post.data.author}</p>
       </div>
     </section>
     <section class="my-12">
       <div class="container">
-        <p class="text-2xl">{post.body}</p>
+        <p class="text-2xl"><Content/></p>
       </div>
     </section>
   </DefaultLayout>
-  
+
   <style lang="scss">
     ul {
       display: grid;
       grid-template-columns: 1fr;
       grid-gap: 4rem;
-  
+
       @media (min-width: 550px) {
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 2rem;
       }
-  
+
       @media (min-width: 950px) {
         grid-template-columns: repeat(3, 1fr);
       }
     }
   </style>
-  
\ No newline at end of file
diff --git a/src/pages/posts/[post].astro b/src/pages/posts/[post].astro
deleted file mode 100644
index 2abbee0..0000000
--- a/src/pages/posts/[post].astro
+++ /dev/null
@@ -1,58 +0,0 @@
----
-import DefaultLayout from '../../layouts/DefaultLayout.astro'
-import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
-import { getCollection } from "astro:content";
-
-export async function getStaticPaths() {
-  const data = await getCollection("posts");
-
-  return data.map((post) => {
-    return {
-      params: { post: post?.title?.replaceAll(' ', '-')?.toLowerCase() },
-      props: { post },
-    }
-  })
-}
-
-const { post } = Astro.props
----
-
-<DefaultLayout title={post.title} description={post.body} url={post.title}>
-  <div class="container">
-    <div class="mt-12">
-      <Breadcrumbs>
-        <BreadcrumbsItem href="/" label="Home" />
-        <BreadcrumbsItem href="/blog" label="Blog" />
-        <BreadcrumbsItem currentPage={true} label={post.title} />
-      </Breadcrumbs>
-    </div>
-  </div>
-  <section class="my-12">
-    <div class="container">
-      <h1>{post.title}</h1><br />
-      <p>By userId: {post.userId}</p>
-    </div>
-  </section>
-  <section class="my-12">
-    <div class="container">
-      <p class="text-2xl">{post.body}</p>
-    </div>
-  </section>
-</DefaultLayout>
-
-<style lang="scss">
-  ul {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-gap: 4rem;
-
-    @media (min-width: 550px) {
-      grid-template-columns: repeat(2, 1fr);
-      grid-gap: 2rem;
-    }
-
-    @media (min-width: 950px) {
-      grid-template-columns: repeat(3, 1fr);
-    }
-  }
-</style>