diff --git a/src/components/Mainpage.tsx b/src/components/Mainpage.tsx
index 1a22673..5d5070f 100644
--- a/src/components/Mainpage.tsx
+++ b/src/components/Mainpage.tsx
@@ -1,21 +1,14 @@
-import Willray from "../assets/Will.png";
-import Mikelat from "../assets/Mike.png";
-import Chrisf from "../assets/Chris.png";
-import { PostPreview } from "./PostPreview";
-
-const postOneImage =
-  "https://bucket.material-tailwind.com/magic-ai/06b38f84f9669f766048c469ce861b81880378273a11ae9badaedfc32868ef44.jpg";
-const postTwoImage =
-  "https://bucket.material-tailwind.com/magic-ai/e7aa235a7bc5f504db1c66e27ece08f8118b1da6b21c013500391afcd572cf7d.jpg";
-const postThreeImage =
-  "https://bucket.material-tailwind.com/magic-ai/dc74a867f21afc734166a6d37c08beaba4ff040664ba8ccce918e054264ad68d.jpg";
+// import { PostPreview } from "./PostPreview";
+import { data } from "../content/content";
+import { Post } from "./Post";
 
 export function Mainpage() {
   return (
     <main className="container m-0 flex h-[calc(100vh_-_12.5rem)] flex-col overflow-scroll bg-white p-4">
-      <PostPreview postImage={postOneImage} authorImage={Willray} />
-      <PostPreview postImage={postTwoImage} authorImage={Mikelat} />
-      <PostPreview postImage={postThreeImage} authorImage={Chrisf} />
+      {/* {data.map((post) => {
+        return <PostPreview post={post} />;
+      })} */}
+      <Post post={data[0]} />
     </main>
   );
 }
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
new file mode 100644
index 0000000..2f862bb
--- /dev/null
+++ b/src/components/Post.tsx
@@ -0,0 +1,16 @@
+import type { PostData } from "../content/content";
+
+type PostProps = { post: PostData };
+
+export function Post({ post }: PostProps) {
+  return (
+    <main className="text-black">
+      <h2 className="p-2 text-xl">{post.author}</h2>
+      <h2 className="p-2">{new Date().toLocaleDateString()}</h2>
+      <h2 className="p-2">{post.title}</h2>
+      <em className="p-3 text-indigo-700">{post.content}</em>
+      <h1 className="text p-4 text-5xl">What is Lorem Ipsum?</h1>
+      {post.content}
+    </main>
+  );
+}
diff --git a/src/components/PostPreview.tsx b/src/components/PostPreview.tsx
index a1df61d..9cf93c7 100644
--- a/src/components/PostPreview.tsx
+++ b/src/components/PostPreview.tsx
@@ -1,10 +1,12 @@
-export function PostPreview({
-  postImage,
-  authorImage,
-}: {
-  postImage: string;
-  authorImage: string;
-}) {
+import { type PostData } from "../content/content";
+
+type PostPreviewProps = {
+  post: PostData;
+};
+
+export function PostPreview(props: PostPreviewProps) {
+  const { postImage, authorImage, content, title, author, publishedDate } =
+    props.post;
   return (
     <div className="flex flex-col text-gray-700">
       <div className="relative m-0 overflow-hidden rounded-xl bg-white bg-clip-border text-gray-700 shadow-lg">
@@ -22,12 +24,10 @@ export function PostPreview({
           href="#"
           className="text-blue-gray-900 mb-2 block font-sans text-xl font-semibold normal-case leading-snug tracking-normal antialiased transition-colors hover:text-gray-700"
         >
-          Revolutionizing Our Production Process
+          {title}
         </a>
         <p className="mb-8 block font-sans text-base font-normal leading-relaxed !text-gray-500 text-inherit antialiased">
-          Learn how our recent investment in new technology has revolutionized
-          our production process, leading to improved efficiency and product
-          quality.
+          {content}
         </p>
         <div className="flex items-center gap-4">
           <img
@@ -35,9 +35,11 @@ export function PostPreview({
             className="relative inline-block h-12 w-12 !rounded-full object-cover object-center"
           />
           <div>
-            <p className="text-blue-gray-900 mb-0.5 block font-sans text-base font-light leading-relaxed antialiased"></p>
+            <p className="text-blue-gray-900 mb-0.5 block font-sans text-base font-light leading-relaxed antialiased">
+              {author}
+            </p>
             <p className="block font-sans text-sm font-normal leading-normal text-gray-700 antialiased">
-              2022-08-15
+              {publishedDate.toDateString()}
             </p>
           </div>
         </div>
diff --git a/src/content/content.ts b/src/content/content.ts
new file mode 100644
index 0000000..7f029e5
--- /dev/null
+++ b/src/content/content.ts
@@ -0,0 +1,49 @@
+import Willray from "../assets/Will.png";
+import Mikelat from "../assets/Mike.png";
+import Chrisf from "../assets/Chris.png";
+
+export type PostData = {
+  postImage: string;
+  authorImage: string;
+  content: string;
+  title: string;
+  author: string;
+  publishedDate: Date;
+};
+
+const postOneImage =
+  "https://bucket.material-tailwind.com/magic-ai/06b38f84f9669f766048c469ce861b81880378273a11ae9badaedfc32868ef44.jpg";
+const postTwoImage =
+  "https://bucket.material-tailwind.com/magic-ai/e7aa235a7bc5f504db1c66e27ece08f8118b1da6b21c013500391afcd572cf7d.jpg";
+const postThreeImage =
+  "https://bucket.material-tailwind.com/magic-ai/dc74a867f21afc734166a6d37c08beaba4ff040664ba8ccce918e054264ad68d.jpg";
+
+export const data: PostData[] = [
+  {
+    postImage: postOneImage,
+    authorImage: Willray,
+    content:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    title: "First post",
+    author: "William Ray",
+    publishedDate: new Date(),
+  },
+  {
+    postImage: postTwoImage,
+    authorImage: Mikelat,
+    content:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    title: "Second post",
+    author: "Mike Latimore",
+    publishedDate: new Date(),
+  },
+  {
+    postImage: postThreeImage,
+    authorImage: Chrisf,
+    content:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+    title: "Third post",
+    author: "Chris Forti",
+    publishedDate: new Date(),
+  },
+];