diff --git a/packages/bdt-astro/src/pages/index.astro b/packages/bdt-astro/src/pages/index.astro
index df0252d6..9cad104e 100644
--- a/packages/bdt-astro/src/pages/index.astro
+++ b/packages/bdt-astro/src/pages/index.astro
@@ -1,17 +1,62 @@
 ---
-import BaseLayout from '../layouts/BaseLayout.astro'
+import BaseLayout from "../layouts/BaseLayout.astro";
+import GeneralCalendar from "@components/interactions/general.tsx";
+import Switcher from "@components/interactions/switcher.tsx";
+import { films as filmsStore } from "@components/stores/films.ts";
+import { podcasts as podcastsStore } from "@components/stores/podcasts.ts";
+import { allFormats } from "@components/stores/allFormats.ts";
+
+import getAllFilms, {
+  groupFilmsByDate,
+  aggregateFilms,
+} from "@film-fetcher/getAllFilms.ts";
+
+import getAllPodcasts, {
+  groupPodcastsByDate,
+  aggregatePodcasts,
+} from "@podcast-fetcher/getAllPodcasts.ts";
+
+const allFilms = await getAllFilms();
+const groupedFilms = groupFilmsByDate(allFilms);
+const filmData = aggregateFilms(groupedFilms);
+
+const allPodcasts = await getAllPodcasts();
+const groupedPodcasts = groupPodcastsByDate(allPodcasts);
+const podcastData = aggregatePodcasts(groupedPodcasts);
+
+const calendarData = [
+  {
+    dataName: "Podcasts",
+    grouped: groupedPodcasts,
+    aggregated: podcastData,
+    store: podcastsStore,
+  },
+  {
+    dataName: "Films",
+    grouped: groupedFilms,
+    aggregated: filmData,
+    store: filmsStore,
+  },
+];
+
+allFormats.set({
+  formatName: "Podcasts",
+  grouped: groupedPodcasts,
+  aggregated: podcastData,
+  store: podcastsStore,
+});
 ---
 
 <BaseLayout title="playground.bdt">
   <div class="stack">
     <h1>Playground</h1>
-    <div class="content">
-      <p>This mini project has evolved from a little spreadsheet/graph Gatsby experiment into a bit of an anything goes,
-        "let's have some fun and lob some code up over there".</p>
-      <p>I recently migrated it over to <a href="https://astro.build">Astro</a> in an effort to simplify things. I'm
-        hoping to bring more banality over here soon. For now, you can have a browse at what <a href="/films">films I've
-          watched recently</a> (via <a href="https://letterboxd.com/simonscarfe/">Letterboxd</a>), maybe the <a
-          href="/podcasts">podcasts that have been absorbing my time</a>.</p>
-    </div>
+    <Switcher client:load data={calendarData} />
+    <GeneralCalendar
+      client:load
+      formatName="Podcasts"
+      aggregated={podcastData}
+      grouped={groupedPodcasts}
+      store={podcastsStore}
+    />
   </div>
-</BaseLayout>
\ No newline at end of file
+</BaseLayout>
diff --git a/packages/bdt-components/src/interactions/general.tsx b/packages/bdt-components/src/interactions/general.tsx
new file mode 100644
index 00000000..8b178c27
--- /dev/null
+++ b/packages/bdt-components/src/interactions/general.tsx
@@ -0,0 +1,54 @@
+import React from "react";
+import { CalendarDatum } from "@nivo/calendar";
+import Calendar from "../visualisations/calendar";
+import { WritableAtom } from "nanostores";
+
+import { useStore } from "@nanostores/react";
+import { allFormats } from "../stores/allFormats";
+
+const GeneralCalendar = ({
+  formatName,
+  aggregated,
+  grouped,
+  responsive = true,
+  store,
+}: {
+  formatName: string;
+  aggregated: CalendarDatum[];
+  grouped: Record<string, any[]>;
+  responsive?: Boolean;
+  store: WritableAtom;
+}) => {
+  const formats = useStore(allFormats);
+  if (formats.formatName === "") {
+    allFormats.set({ formatName, aggregated, grouped, store });
+  }
+
+  const {
+    aggregated: a,
+    grouped: g,
+    store: s,
+    formatName: name,
+  } = useStore(allFormats);
+
+  return (
+    <>
+      <h2>{name}</h2>
+      <Calendar
+        data={a}
+        responsive={responsive}
+        from={a[0].day}
+        to={a[a.length - 1].day}
+        onClick={(datum) => {
+          s.set({
+            ...s.get(),
+            selected: datum.day,
+            films: g[datum.day] ? g[datum.day] : [],
+          });
+        }}
+      />
+    </>
+  );
+};
+
+export default GeneralCalendar;
diff --git a/packages/bdt-components/src/interactions/switcher.tsx b/packages/bdt-components/src/interactions/switcher.tsx
new file mode 100644
index 00000000..37df7411
--- /dev/null
+++ b/packages/bdt-components/src/interactions/switcher.tsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { allFormats } from "../stores/allFormats";
+
+const Switcher = ({ data }: { data: any[] }) => {
+  const changeFormat = (e: any): void => {
+    const selected = data.filter((item) => item.dataName === e.target.value)[0];
+    console.log(selected.store);
+    allFormats.set({
+      formatName: selected.dataName,
+      grouped: selected.grouped,
+      aggregated: selected.aggregated,
+      store: selected.store,
+    });
+  };
+  return (
+    <select
+      name="calendarSwitcher"
+      id="calendarSwitcher"
+      onChange={changeFormat}
+    >
+      {data.map((source, i) => (
+        <option key={`cal-${i}`} value={source.dataName}>
+          {source.dataName}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default Switcher;
diff --git a/packages/bdt-components/src/stores/allFormats.ts b/packages/bdt-components/src/stores/allFormats.ts
new file mode 100644
index 00000000..b2170af7
--- /dev/null
+++ b/packages/bdt-components/src/stores/allFormats.ts
@@ -0,0 +1,7 @@
+import { atom } from "nanostores";
+
+export const allFormats = atom<any>({
+  formatName: "",
+  grouped: {},
+  aggregated: [],
+});