diff --git a/templates/index/index.html b/templates/index/index.html
index 3e80462a..f785f169 100644
--- a/templates/index/index.html
+++ b/templates/index/index.html
@@ -90,40 +90,26 @@
         <div class="max-w-7xl mx-auto px-4">
             <h2 class="h2 font-bold text-left mb-8">Community Updates</h2>
 
-            <div id="community-news-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <div id="community-news-container" class="flex gap-4 justify-center">
                 <!-- News cards will be populated here -->
-                <div id="loading" class="col-span-full flex justify-center">
+                <div id="loading" class="flex justify-center w-full">
                     <span class="loading loading-spinner loading-lg"></span>
                 </div>
             </div>
 
-            <!-- Fallback for discourse widget -->
-            <div class="hidden">
-                <d-topics-list discourse-url="https://community.envipath.org"
-                            per-page="10"
-                            category="10"
-                            template="complete"
-                            id="discourse-topics">
-                </d-topics-list>
+            <div class="text-right mt-6">
+                <a href="https://community.envipath.org/c/announcements/10" target="_blank" class="btn btn-ghost btn-sm">
+                    Read More Announcements
+                </a>
             </div>
+
+            <!-- Discourse API integration -->
+            <script src="{% static 'js/discourse-api.js' %}"></script>
         </div>
     </section>
 
-    <!-- Partners Section -->
-    <section class="py-14 sm:py-12 from-base-200 to-base-100 bg-gradient-to-b">
-        <div class="mx-auto px-6 lg:px-8">
-            <div class="divider"><h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2></div>
-            <div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
-                <img src="{% static "/images/uoa-logo-small.png" %}" alt="The University of Auckland" class=" max-h-20 w-full object-contain lg:col-span-1" />
-                <img src="{% static "/images/logo-eawag.svg" %}" alt="Eawag" class=" max-h-12 w-full object-contain lg:col-span-1" />
-                <img src="{% static "/images/uzh-logo.svg" %}" alt="University of Zurich" class="2 max-h-16 w-full object-contain lg:col-span-1" />
-            </div>
-        </div>
-    </section>
-
-
     <!-- Mission Statement Section -->
-    <section class="py-16 bg-base-100">
+    <section class="py-16 from-base-200 to-base-100 bg-gradient-to-b">
         <div class="mx-auto px-8 md:px-12">
             <div class="flex flex-row gap-4">
                 <div class="w-1/3">
@@ -150,58 +136,81 @@
         </div>
     </section>
 
+    <!-- Partners Section -->
+    <section class="py-14 sm:py-12 bg-base-100">
+        <div class="mx-auto px-6 lg:px-8">
+            <div class="divider"><h2 class="text-center text-lg/8 font-semibold">Backed by Science</h2></div>
+            <div class="mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-3">
+                <img src="{% static "/images/uoa-logo-small.png" %}" alt="The University of Auckland" class=" max-h-20 w-full object-contain lg:col-span-1" />
+                <img src="{% static "/images/logo-eawag.svg" %}" alt="Eawag" class=" max-h-12 w-full object-contain lg:col-span-1" />
+                <img src="{% static "/images/uzh-logo.svg" %}" alt="University of Zurich" class="2 max-h-16 w-full object-contain lg:col-span-1" />
+            </div>
+        </div>
+    </section>
+
+
+
+
 </div>
 
     <script language="javascript">
         var currentPackage = "{{ meta.current_package.url }}";
 
-        // Process discourse topics into individual cards
-        function processDiscourseTopics(retryCount = 0) {
-            setTimeout(function() {
-                const topicsList = $('#discourse-topics');
-                if (topicsList.length && topicsList.find('li').length > 0) {
-                    $('#loading').hide();
+        // Discourse API integration is now handled by discourse-api.js
 
-                    topicsList.find('li').each(function(index) {
-                        if (index >= 6) return false; // Limit to 6 cards
+        // Function to render Discourse topics into cards
+        function renderDiscourseTopics(topics) {
+            const container = document.getElementById('community-news-container');
+            if (!container) return;
 
-                        const $item = $(this);
-                        const $link = $item.find('a').first();
-                        const title = $link.text().trim();
-                        const url = $link.attr('href');
-                        const excerpt = $item.find('.topic-excerpt').text().trim() || 'Click to read more...';
+            // Clear container
+            container.innerHTML = '';
 
-                        const card = `
-                            <div class="card bg-white shadow-xl hover:shadow-2xl transition-shadow duration-300">
-                                <div class="card-body">
-                                    <h3 class="card-title text-lg line-clamp-2">
-                                        <a href="${url}" target="_blank" class="hover:text-primary">
-                                            ${title}
-                                        </a>
-                                    </h3>
-                                    <p class="text-gray-600 line-clamp-3">${excerpt}</p>
-                                    <div class="card-actions justify-end mt-4">
-                                        <a href="${url}" target="_blank" class="btn btn-sm btn-primary">
-                                            Read More
-                                        </a>
+            // Create cards for each topic
+            topics.forEach(topic => {
+                const card = createDiscourseCard(topic);
+                container.insertAdjacentHTML('beforeend', card);
+            });
+        }
+
+        // Function to create HTML card for a topic
+        function createDiscourseCard(topic) {
+            const date = new Date(topic.created_at).toLocaleDateString();
+
+            return `
+                <div class="card bg-white shadow-xs hover:shadow-lg transition-shadow duration-300 h-64 w-75 flex-shrink-0">
+                    <div class="card-body flex flex-col h-full">
+                        <h3 class="card-title leading-tight font-normal tracking-tight h-12 mb-2 line-clamp-2 text-ellipsis wrap-break-word overflow-hidden">
+                            <a href="${topic.url}" target="_blank" class="hover:text-primary">
+                                ${topic.title}
+                            </a>
+                        </h3>
+                        <p class="text-sm line-clamp-4 mb-2 h-20 text-ellipsis wrap-break-word overflow-hidden">${topic.excerpt}</p>
+
+                        <div class="flex flex-row items-center justify-between">
+                            <div class="flex items-center gap-2">
+                                <div class="avatar tooltip tooltip-right" data-tip="${topic.author}">
+                                    <div class="w-8 rounded-full">
+                                        <img src="${topic.author_avatar}" alt="${topic.author}" />
                                     </div>
                                 </div>
+                                <span class="text-xs text-gray-500">${date}</span>
                             </div>
-                        `;
-
-                        $('#community-news-container').append(card);
-                    });
-                } else {
-                    // Retry if not loaded yet
-                    if (retryCount < 10) {
-                        processDiscourseTopics(retryCount + 1);
-                    } else {
-                        $('#loading').html('<p class="text-neutral">No updates found. Head over to the <a href="https://community.envipath.org" target="_blank" class="link link-primary">community</a> to see the latest discussions.</p>');
-                    }
-                }
-            }, 500);
+                            <a href="${topic.url}" target="_blank" class="btn btn-ghost text-neutral-500 rounded-full p-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                    <path d="M12 7v14"/>
+                                    <path d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"/>
+                                </svg>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            `;
         }
 
+        // Make render function globally available
+        window.renderDiscourseTopics = renderDiscourseTopics;
+
         // Toggle functionality with smooth animations
         function toggleInputMode() {
             const toggle = $('input[type="checkbox"]');
@@ -311,8 +320,7 @@
                 this.submit();
             });
 
-            // Process discourse topics into cards
-            processDiscourseTopics();
+            // Discourse topics are now loaded automatically by discourse-api.js
         });
     </script>
 {% endblock main_content %}