diff --git a/frontend/src/lib/components/sidebar.svelte b/frontend/src/lib/components/sidebar.svelte
index 9fc597d..3ad7487 100644
--- a/frontend/src/lib/components/sidebar.svelte
+++ b/frontend/src/lib/components/sidebar.svelte
@@ -3,6 +3,11 @@
   import Avatar from '$lib/components/ui/avatar.svelte';
   import favorite_communities from '$lib/data/mock/favorites.json';
   import your_communities from '$lib/data/mock/your_communities.json';
+  import { createSidebarStore } from '$lib/stores/sidebar.svelte';
+
+  const sidebarStore = createSidebarStore();
+
+  $inspect(sidebarStore.state);
 </script>
 
 <div
@@ -30,31 +35,33 @@
       <span class="text-xs font-medium">Create Quiblet</span>
     </button>
   </div>
-  <div class="collapse gap-2 rounded-none">
-    <input type="checkbox" checked={true} class="peer h-max min-h-full w-full" />
-    <div
-      class="collapse-title flex h-max min-h-max items-center justify-between p-0 text-sm font-medium text-base-content/75 peer-checked:[&>coreicons-shape-chevron]:rotate-180"
-    >
-      Recent
-      <coreicons-shape-chevron class="size-4 transition-transform" variant="down"
-      ></coreicons-shape-chevron>
-    </div>
-    <div class="collapse-content flex flex-col gap-2 !p-0">
-      {#each favorite_communities as community}
-        <div class="flex items-center gap-2">
-          <a href="q/{community.name}" class="flex">
-            <Avatar src={community.avatar} />
-          </a>
-          <a href="q/{community.name}" class="text-sm font-medium">q/{community.name}</a>
-          <button class="ml-auto" aria-label="Star Community">
-            <coreicons-shape-star class="size-4" class:text-primary={community.starred}
-            ></coreicons-shape-star>
-          </button>
-        </div>
-      {/each}
+  {#if sidebarStore.state.recent}
+    <div class="collapse gap-2 overflow-visible rounded-none">
+      <input type="checkbox" checked={true} class="peer h-max min-h-full w-full" />
+      <div
+        class="collapse-title flex h-max min-h-max items-center justify-between p-0 text-sm font-medium text-base-content/75 peer-checked:[&>coreicons-shape-chevron]:rotate-180"
+      >
+        Recent
+        <coreicons-shape-chevron class="size-4 transition-transform" variant="down"
+        ></coreicons-shape-chevron>
+      </div>
+      <div class="collapse-content flex flex-col gap-2 !p-0">
+        {#each sidebarStore.state.recent as quiblet}
+          <div class="flex items-center gap-2">
+            <a href="/q/{quiblet.name}" class="flex">
+              <Avatar src={quiblet.avatar} />
+            </a>
+            <a href="/q/{quiblet.name}" class="text-sm font-medium">q/{quiblet.name}</a>
+            <button class="ml-auto" aria-label="Star Community">
+              <coreicons-shape-star class="size-4" class:text-primary={quiblet.starred}
+              ></coreicons-shape-star>
+            </button>
+          </div>
+        {/each}
+      </div>
     </div>
-  </div>
-  <div class="collapse gap-2 rounded-none">
+  {/if}
+  <div class="collapse gap-2 overflow-visible rounded-none">
     <input type="checkbox" checked={true} class="peer h-max min-h-full w-full" />
     <div
       class="collapse-title flex h-max min-h-max items-center justify-between p-0 text-sm font-medium text-base-content/75 peer-checked:[&>coreicons-shape-chevron]:rotate-180"
@@ -78,7 +85,7 @@
       {/each}
     </div>
   </div>
-  <div class="collapse gap-2 rounded-none">
+  <div class="collapse gap-2 overflow-visible rounded-none">
     <input type="checkbox" checked={true} class="peer h-max min-h-full w-full" />
     <div
       class="collapse-title flex h-max min-h-max items-center justify-between p-0 text-sm font-medium text-base-content/75 peer-checked:[&>coreicons-shape-chevron]:rotate-180"
diff --git a/frontend/src/lib/stores/sidebar.svelte.ts b/frontend/src/lib/stores/sidebar.svelte.ts
new file mode 100644
index 0000000..4bdb405
--- /dev/null
+++ b/frontend/src/lib/stores/sidebar.svelte.ts
@@ -0,0 +1,64 @@
+import { browser } from '$app/environment';
+
+type ISidebarStore = Record<string, IQuiblets>;
+
+type IQuiblets = {
+  avatar?: string | null | undefined;
+  name: string;
+  starred: boolean;
+}[];
+
+export function createSidebarStore() {
+  const stored_sidebar_store = browser ? localStorage.getItem('sidebar_store') : null;
+
+  const parsed_stored_quiblets: ISidebarStore = stored_sidebar_store
+    ? JSON.parse(stored_sidebar_store)
+    : {};
+
+  let sidebar_state = $state<ISidebarStore>(parsed_stored_quiblets);
+
+  function sync_localstorage() {
+    if (browser) {
+      localStorage.setItem('sidebar_store', JSON.stringify(sidebar_state));
+    }
+  }
+
+  function sort_quiblets(quiblets: IQuiblets) {
+    return [...quiblets].sort((a, b) => {
+      if (a.starred !== b.starred) {
+        return b.starred ? 1 : -1;
+      }
+      return a.name.localeCompare(b.name);
+    });
+  }
+
+  return {
+    get state() {
+      return sidebar_state;
+    },
+    add_quiblet(quiblet: IQuiblets[number], type: string) {
+      // initialize empty array for type
+      if (!sidebar_state[type]) {
+        sidebar_state[type] = [];
+      }
+
+      const state = sidebar_state[type];
+      if (!state) return;
+
+      const exists = state.some((q) => q.name === quiblet.name);
+      if (exists) return;
+
+      sidebar_state[type] = sort_quiblets([...state, quiblet]);
+      sync_localstorage();
+    },
+    toggle_star(name: string, type: string) {
+      if (!sidebar_state[type]) return;
+
+      sidebar_state[type] = sort_quiblets(
+        sidebar_state[type].map((q) =>
+          q.name === name ? { ...q, starred: !q.starred } : q
+        )
+      );
+    }
+  };
+}
diff --git a/frontend/src/routes/(app)/q/[name]/+page.svelte b/frontend/src/routes/(app)/q/[name]/+page.svelte
index 51b9f2a..ade94ec 100644
--- a/frontend/src/routes/(app)/q/[name]/+page.svelte
+++ b/frontend/src/routes/(app)/q/[name]/+page.svelte
@@ -6,11 +6,14 @@
   import type { PageData } from './$types';
   import { FormatDate } from '$lib/functions/date';
   import { createAuthStore } from '$lib/stores/auth.svelte';
+  import { onMount } from 'svelte';
+  import { createSidebarStore } from '$lib/stores/sidebar.svelte';
 
   const { data }: { data: PageData } = $props();
   const { quiblet, quibs, highlighted_quibs } = data;
 
-  const authStore = createAuthStore();
+  const authStore = createAuthStore(),
+    sidebarStore = createSidebarStore();
 
   const is_joined = $derived.by(() => {
     if (!authStore.state.is_authenticated) return false;
@@ -18,6 +21,17 @@
       return quiblet.members?.includes(authStore.state.profile.id);
     }
   });
+
+  onMount(() => {
+    sidebarStore.add_quiblet(
+      {
+        avatar: quiblet.avatar,
+        name: quiblet.name,
+        starred: false
+      },
+      'recent'
+    );
+  });
 </script>
 
 <svelte:head>