diff --git a/.eleventy.js b/.eleventy.js
index 476e74d..337fffd 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -47,6 +47,13 @@ eleventyConfig.addWatchTarget("content/**/*.{svg,webp,png,jpeg}");
 		return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat('yyyy-LL-dd');
 	});
 
+  eleventyConfig.addFilter("excerpt", (content) => {
+    if (!content) return "";
+    const plain = content.replace(/<[^>]+>/g, "").replace(/\s+/g, " ").trim();
+    const words = plain.split(" ").slice(0, 30);
+    return words.join(" ") + (plain.split(" ").length > 30 ? "..." : "");
+  });
+
   eleventyConfig.addFilter("groupByYear", (posts) => {
     const groupedPosts = {};
 
diff --git a/src/index.njk b/src/index.njk
index 57d0853..331b3b8 100644
--- a/src/index.njk
+++ b/src/index.njk
@@ -26,6 +26,32 @@ tags: index-page # Note: This adds a custom class to layout.njk
 
 </section><!-- End Hero -->
 
+<!-- ======= Latest News Section ======= -->
+<section id="latest-news" class="latest-news section-bg">
+  <div class="container" data-aos="fade-up">
+    <div class="section-title">
+      <h2>Latest News</h2>
+    </div>
+    <div class="row">
+      {% set recentPosts = collections.posts | reverse %}
+      {% for post in recentPosts.slice(0, 3) %}
+      <div class="col-xl-4 col-md-6 d-flex align-items-stretch{% if not loop.first %} mt-4 mt-xl-0{% endif %}" data-aos="zoom-in" data-aos-delay="{{ 100 * loop.index }}">
+        <div class="news-box d-flex flex-column">
+          <h4><a href="{{ post.url }}">{{ post.data.title }}</a></h4>
+          <p class="post-meta">
+            <time datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
+            {% if post.data.author %} &middot; {{ post.data.author }}{% endif %}
+          </p>
+          <p>{{ post.templateContent | excerpt }}</p>
+          <a href="{{ post.url }}" class="read-more mt-auto">Read more &rarr;</a>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+</section>
+<!-- End Latest News Section -->
+
 <!-- ======= Features Section ======= -->
 <section id="features" class="features section-bg about light">
   <div class="container">
diff --git a/static/css/style.css b/static/css/style.css
index 7818f46..1189a5d 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -1953,3 +1953,55 @@ h5 {
   letter-spacing: 0.05rem;
   margin-bottom: 0.6rem;
 }
+
+/* Latest News Section */
+.latest-news .news-box {
+  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
+  padding: 50px 30px;
+  transition: all ease-in-out 0.4s;
+  background: #fff;
+  height: 100%;
+}
+
+.latest-news .news-box:hover {
+  transform: translateY(-10px);
+}
+
+.latest-news .news-box h4 {
+  font-weight: 500;
+  margin-bottom: 15px;
+  font-size: 24px;
+}
+
+.latest-news .news-box h4 a {
+  color: #37517e;
+  transition: ease-in-out 0.3s;
+}
+
+.latest-news .news-box:hover h4 a {
+  color: #47b2e4;
+}
+
+.latest-news .news-box p {
+  line-height: 24px;
+  font-size: 14px;
+  margin-bottom: 0;
+}
+
+.latest-news .post-meta {
+  font-size: 14px;
+  color: #848484;
+  margin-bottom: 15px;
+}
+
+.latest-news .read-more {
+  color: #47b2e4;
+  font-weight: 600;
+  font-size: 14px;
+  display: inline-block;
+  margin-top: 15px;
+}
+
+.latest-news .read-more:hover {
+  color: #2d9fd1;
+}