diff --git a/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
index d559d35..1d64133 100644
--- a/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
+++ b/modules/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
 	import '$appcss';
-	import { getAllPosts } from '@api';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
 	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import { onMount } from 'svelte';
+	import { postsStore } from '$libs/stores';
 
 	let courses: AirtablePost[] = [];
 
-	onMount(async () => {
-		courses = await getAllPosts('course');
-	});
+	postsStore.subscribeByTag('course', (posts) => (courses = posts));
 </script>
 
 <PanelHeader title="Essential Workshops" ctaLabel="View all" ctaLink="/" />
diff --git a/modules/gui/src/components/FeaturedCourses/FeaturedCourses.svelte b/modules/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
index 7e76fe8..68ffc6e 100644
--- a/modules/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
+++ b/modules/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
 	import '$appcss';
-	import { onMount } from 'svelte';
+	import { postsStore } from '$libs/stores';
 	import type { Course } from '$libs/types';
 
 	import Gallery from '@tea/ui/Gallery/Gallery.svelte';
-	import { getFeaturedCourses } from '@api';
 
 	let courses: Course[] = [];
 
-	onMount(async () => {
-		if (!courses.length) {
-			courses = await getFeaturedCourses();
-		}
+	postsStore.subscribeByTag('featured_course', (posts) => {
+		courses = posts.map((post) => {
+			return {
+				title: post.title,
+				sub_title: post.sub_title,
+				banner_image_url: post.thumb_image_url,
+				link: post.link
+			} as Course;
+		});
 	});
 </script>
 
diff --git a/modules/gui/src/components/News/News.svelte b/modules/gui/src/components/News/News.svelte
index 800aa9f..7b24eed 100644
--- a/modules/gui/src/components/News/News.svelte
+++ b/modules/gui/src/components/News/News.svelte
@@ -1,17 +1,14 @@
 <script lang="ts">
 	import '$appcss';
-	import { getAllPosts } from '@api';
+	import { postsStore } from '$libs/stores';
 	import type { AirtablePost } from '@tea/ui/types';
 	import Posts from '@tea/ui/Posts/Posts.svelte';
 	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
 	import Preloader from '@tea/ui/Preloader/Preloader.svelte';
-	import { onMount } from 'svelte';
 
 	let news: AirtablePost[] = [];
 
-	onMount(async () => {
-		news = await getAllPosts('news');
-	});
+	postsStore.subscribeByTag('news', (posts) => (news = posts));
 </script>
 
 <PanelHeader title="Open-source News" ctaLabel="Read more articles >" ctaLink="/" />
diff --git a/modules/gui/src/libs/stores.ts b/modules/gui/src/libs/stores.ts
index 4a23a6b..acedd96 100644
--- a/modules/gui/src/libs/stores.ts
+++ b/modules/gui/src/libs/stores.ts
@@ -113,6 +113,12 @@ function initPosts() {
 			const res = postsIndex.search(term, { limit });
 			const matchingPosts: AirtablePost[] = res.map((v) => v.item);
 			return matchingPosts;
+		},
+		subscribeByTag: (tag: string, cb: (posts: AirtablePost[]) => void) => {
+			subscribe((newPosts: AirtablePost[]) => {
+				const filteredPosts = newPosts.filter((post) => post.tags.includes(tag));
+				cb(filteredPosts);
+			});
 		}
 	};
 }