diff --git a/src/pages/index.js b/src/pages/index.js
index 267563bc..3248dc4f 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -6,6 +6,7 @@ import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
 
+const recentPosts = require("../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json");
 const features = [
   {
     title: <>Document Structure</>,
@@ -75,6 +76,21 @@ const features = [
       </>
     ),
   },
+  {
+    title: <>Recent Blog Posts</>,
+    imageUrl: "",
+    description: (
+      <>
+        <ul>
+          {recentPosts.items.slice(0, 5).map((item, index) => (
+            <li key={index}>
+              <a href={`${item.permalink}`}>{item.title}</a>{" "}
+            </li>
+          ))}
+        </ul>
+      </>
+    )
+  },
   {
     title: <>Upcoming Events</>,
     imageUrl: "",
@@ -83,7 +99,7 @@ const features = [
         <iframe
           title="Upcoming Events Calendar"
           src="https://calendar.google.com/calendar/embed?height=400&amp;wkst=2&amp;bgcolor=%23ffffff&amp;ctz=America%2FLos_Angeles&amp;src=cDA3bjk4Z28xMW9uYW1kMDhkMGttcTZqaHNAZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ&amp;color=%23039BE5&amp;title=Release%20Schedule&amp;mode=AGENDA&amp;showPrint=0&amp;showTabs=0&amp;showCalendars=0&amp;showTz=0&amp;showNav=0&amp;showDate=0&amp;showTitle=0"
-          style={{ borderWidth: 0, margin: "auto", display: "block" }}
+          style={{ borderWidth: 0, margin: "auto" }}
           width="300"
           height="200"
           frameBorder="0"
@@ -97,7 +113,7 @@ const features = [
 function Feature({ imageUrl, title, description }) {
   const imgUrl = useBaseUrl(imageUrl);
   return (
-    <div className={clsx("col col--4", styles.feature)}>
+    <div className={clsx("col col--3", styles.feature)}>
       {imgUrl && (
         <div className="text--center">
           <img className={styles.featureImage} src={imgUrl} alt={title} />