diff --git a/src/lib/components/molecules/Banner.svelte b/src/lib/components/molecules/Banner.svelte
index 148deaf..0d681f6 100644
--- a/src/lib/components/molecules/Banner.svelte
+++ b/src/lib/components/molecules/Banner.svelte
@@ -1,14 +1,14 @@
 <script lang="ts">
 	import { slide } from 'svelte/transition';
 	import { cubicInOut } from 'svelte/easing';
-	import storable from '@madkarma/svelte-storable';
+	import { PersistedState } from 'runed';
 	import type { WithChildren } from '$types';
 	import Info from 'virtual:icons/material-symbols/info-outline';
 	import Warning from 'virtual:icons/material-symbols/warning-outline';
 	import Error from 'virtual:icons/material-symbols/error-outline';
 	import Close from 'virtual:icons/material-symbols/close';
 
-	const readBannerIds = storable<string[]>('read_banner_ids', []);
+	const readBannerIds = new PersistedState<string[]>('read_banner_ids', []);
 
 	type Props = {
 		type: 'info' | 'warning' | 'error';
@@ -21,7 +21,7 @@
 		children,
 		id,
 		permanent = false,
-		closed = $bindable($readBannerIds.includes(id))
+		closed = $bindable(readBannerIds.current.includes(id))
 	}: Props = $props();
 
 	const Icon = type === 'info' ? Info : type === 'warning' ? Warning : Error;
@@ -41,7 +41,7 @@
 				type="button"
 				onclick={() => {
 					closed = true;
-					$readBannerIds = [...$readBannerIds, id];
+					readBannerIds.current = [...readBannerIds.current, id];
 				}}
 			>
 				<Close />