diff --git a/packages/frontendmu-data/data/projects.ts b/packages/frontendmu-data/data/projects.ts
index 764b5476..3015a5a7 100644
--- a/packages/frontendmu-data/data/projects.ts
+++ b/packages/frontendmu-data/data/projects.ts
@@ -2,23 +2,51 @@ interface Project {
     title: string
     icon: string
     project_url: string
+    description: string
     author_github_username: string
     categories: string[]
 }
 
-const projects: Project[] = [
+export const projects: Project[] = [
     {
         title: 'git-cz',
-        icon: '',
+        icon: 'openmoji:windows',
         project_url: 'https://github.com/k3ii/git-cz',
         author_github_username: 'k3ii',
-        categories: ['git', 'cli']
+        categories: ['git', 'cli'],
+        description: 'A simple git commitizen cli tool'
     },
     {
         title: 'zourer',
-        icon: '',
+        icon: 'game-icons:shouting',
         project_url: 'https://github.com/nicolasstrands/zourer',
         author_github_username: 'nicolasstrands',
-        categories: ['git', 'cli']
+        categories: ['dictionary', 'open-data'],
+        description: 'A dictionary of profanity words in the Mauritian Kreol language'
     },
+    {
+        title: 'Mauritius Tax Calculator',
+        icon: 'tdesign:money',
+        project_url: 'https://github.com/n-d-r-d-g/redesigned/tree/main/mauritius_tax_calculator',
+        author_github_username: 'n-d-r-d-g',
+        categories: ['taxation', 'calculator', 'mauritius'],
+        description: 'A simple tax calculator for Mauritius',
+    },
+    {
+        title: 'CSS Clock',
+        icon: 'mdi:clock-time-eight',
+        project_url: 'https://clock-css.netlify.app/',
+        author_github_username: 'MrSunshyne',
+        categories: ['css', 'clock'],
+        description: 'A simple clock made with CSS',
+    },
+    {
+        title: 'Le Pop Quiz',
+        icon: 'material-symbols-light:question-exchange-rounded',
+        project_url: 'https://lepopquiz.com/',
+        author_github_username: 'cedpoilly',
+        categories: ['quiz', 'game', 'real-time', 'ai'],
+        description: 'A real-time quiz game with AI',
+    }
+
 ]
\ No newline at end of file
diff --git a/packages/frontendmu-nuxt/components/community/GithubIssuesSection.vue b/packages/frontendmu-nuxt/components/community/GithubIssuesSection.vue
index e05d0f5f..f1c61032 100644
--- a/packages/frontendmu-nuxt/components/community/GithubIssuesSection.vue
+++ b/packages/frontendmu-nuxt/components/community/GithubIssuesSection.vue
@@ -62,7 +62,7 @@ function isTabActive(state: IssueState) {
                 </template>
             </div>
         </div>
-        <div class="grid grid-cols-2 gap-3">
+        <div class="grid md:grid-cols-2 gap-3">
             <TransitionGroup name="list">
                 <template v-for="issue in filteredIssues" :key="issue.number">
                     <div class="border dark:bg-verse-950 border-verse-400/50 p-3 rounded-md flex gap-2">
diff --git a/packages/frontendmu-nuxt/components/community/ProjectsSection.vue b/packages/frontendmu-nuxt/components/community/ProjectsSection.vue
new file mode 100644
index 00000000..7554ce27
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/community/ProjectsSection.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { projects } from '../../../frontendmu-data/data/projects'
+
+function githubProfileUrl(username: string) {
+    return `https://github.com/${username}.png`
+}
+
+const sortedProjects = projects.sort((a, b) => {
+    return a.title.localeCompare(b.title)
+})
+</script>
+
+<template>
+    <div>
+        <!-- Filter -->
+        <!-- <div class="flex mb-2">
+            <div class="flex gap-2 dark:bg-verse-800/50 p-1 rounded-md">
+                <template v-for="category in categorys" :key="category">
+                    <div class="flex items-center gap-1 rounded-md px-2 py-1 text-xs cursor-pointer font-medium"
+                        :class="isTabActive(category as ProjectCategory) && 'dark:bg-verse-900 bg-verse-200'"
+                        @click="filteredBy = (category as ProjectCategory)">
+                        <Icon :name="issueIcon(category as ProjectCategory)" :class="issueColor(category as ProjectCategory)" />
+                        {{ category }}
+                    </div>
+                </template>
+</div>
+</div> -->
+        <div class="grid md:grid-cols-3 gap-3">
+            <TransitionGroup name="list">
+                <template v-for="project in sortedProjects" :key="project.title">
+                    <div class="border dark:bg-verse-950 border-verse-400/50 p-3 rounded-md flex flex-col gap-2">
+                        <div class="flex gap-2">
+                            <div v-if="project.icon" class="flex items-center">
+                                <Icon :name="project.icon" class="text-verse-400 w-8 h-8 rounded-full" />
+                            </div>
+                            <div class="flex-1">
+                                <div class="flex gap-1.5 items-center">
+                                    <a :href="project.project_url" target="_blank"
+                                        class="text-verse-600 hover:text-verse-800 dark:hover:text-white no-underline dark:text-verse-300">
+                                        {{ project.title }}
+                                    </a>
+                                </div>
+                                <div class="text-xs text-verse-400 lowercase flex gap-2">
+                                    <div>
+                                        by {{ project.author_github_username }}
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex items-center">
+                                <NuxtImg :src="githubProfileUrl(project.author_github_username)" alt=""
+                                    class="bg-red-500 w-8 h-8 rounded-full" />
+                            </div>
+                        </div>
+                        <div class="py-2 text-sm">
+                            {{ project.description }}
+                        </div>
+
+                        <div class="flex gap-2 flex-wrap">
+                            <template v-for="category in project.categories" :key="category">
+                                <div class="text-xs bg-verse-700 rounded-md px-2">
+                                    <!-- <Icon :name="issueIcon(category as ProjectCategory)"
+                                        :class="issueColor(category as ProjectCategory)" /> -->
+                                    {{ category }}
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                </template>
+            </TransitionGroup>
+        </div>
+    </div>
+</template>
+
+<style lang="postcss">
+.list-move,
+/* apply transition to moving elements */
+.list-enter-active,
+.list-leave-active {
+    transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+}
+
+/* ensure leaving items are taken out of layout flow so that moving
+   animations can be calculated correctly. */
+.list-leave-active {
+    position: absolute;
+}
+</style>
diff --git a/packages/frontendmu-nuxt/pages/community.vue b/packages/frontendmu-nuxt/pages/community.vue
index 12a25bd4..59aa926a 100644
--- a/packages/frontendmu-nuxt/pages/community.vue
+++ b/packages/frontendmu-nuxt/pages/community.vue
@@ -3,16 +3,17 @@
         <BaseHeading :level="1">
             Community
         </BaseHeading>
-        <div class="text-verse-600 dark:text-verse-300 pt-4 pb-16 text-center md:text-left flex flex-col gap-4">
+        <div class="text-verse-600 dark:text-verse-300 pt-4 pb-16 text-center md:text-left flex flex-col gap-8">
             <div class="text-xl font-bold">
                 Featured Github Issues
             </div>
 
             <CommunityGithubIssuesSection />
 
-            <div>
+            <div class="text-xl font-bold">
                 Projects
             </div>
+            <CommunityProjectsSection />
         </div>
     </ContentBlock>
 </template>