diff --git a/src/App.tsx b/src/App.tsx
index e3ba1ca..af69cfd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,37 @@
 import * as React from "react";
-import ListGroup from "./components/ListGroup.tsx";
+import BlogEntryCard from "./components/BlogEntryCard.tsx";
 
 export default function App() {
+  // A mock of what the data from the getBlogEntries JSON return would look like
+  const blogEntries = [
+    {
+      blogImage:
+        "https://git.cspark.dev/avatars/1c230bfe7494b1a62932d94ed8558dc61189437b1b6e0cecdb0c45c3d899bea4?size=512",
+      blogTitle: "Test Blog Entry 1",
+      blogDatePosted: "12/04/2024 4PM", // In reality this would probably be an actual correct format/standardised timestamp
+      blogDescription: "This is a first blog entry test", // If no description, we'd want to get a small snippet of the intro of the blog
+    },
+    {
+      blogImage:
+        "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
+      blogTitle: "Test Blog Entry 2",
+      blogDatePosted: "8/04/2024 6PM", // In reality this would probably be an actual correct format/standardised timestamp
+      blogDescription: "This is a test blog entry number 2", // If no description, we'd want to get a small snippet of the intro of the blog
+    },
+  ];
+
   return (
     <main>
-      <ListGroup></ListGroup>
+      {blogEntries.map((item, index) => (
+        <BlogEntryCard
+          key={index}
+          blogImage={item["blogImage"]}
+          blogTitle={item["blogTitle"]}
+          blogDatePosted={item["blogDatePosted"]}
+          blogDescription={item["blogDescription"]}
+          className="col"
+        ></BlogEntryCard>
+      ))}
     </main>
   );
 }
diff --git a/src/components/BlogEntryCard.tsx b/src/components/BlogEntryCard.tsx
new file mode 100644
index 0000000..8b48c46
--- /dev/null
+++ b/src/components/BlogEntryCard.tsx
@@ -0,0 +1,28 @@
+import * as React from "react";
+
+interface Props {
+  blogImage: string; // This needs a placeholder/default variable
+  blogTitle: string;
+  blogDatePosted: string;
+  blogDescription: string;
+}
+
+export default function BlogEntryCard({
+  blogImage,
+  blogTitle,
+  blogDatePosted,
+  blogDescription,
+}: Props) {
+  return (
+    <>
+      <a href="#" className="card" style={{ width: "18rem" }}>
+        <img src={blogImage} className="card-img-top" alt="..."></img>
+        <div className="card-body">
+          <h4 className="card-title">{blogTitle}</h4>
+          <p className="card-title">{blogDatePosted}</p>
+          <p className="card-text">{blogDescription}</p>
+        </div>
+      </a>
+    </>
+  );
+}
diff --git a/src/components/ListGroup.tsx b/src/components/ListGroup.tsx
deleted file mode 100644
index ab81e1c..0000000
--- a/src/components/ListGroup.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import * as React from "react";
-
-export default function ListGroup() {
-  return <h1>List Group</h1>;
-}