Update

src/components/admin/pages/Home.svelte

@@ -19,27 +19,29 @@
 
 <script lang="ts">
     import {Button, Navbar, NavBrand, NavHamburger, NavLi, NavUl, Spinner} from "flowbite-svelte";
-    import {PlusSolid} from "flowbite-svelte-icons";
+    import {PlusOutline} from "flowbite-svelte-icons";
     import EventCard from "./home/EventCard.svelte";
     import CreateEventModal from "./home/CreateEventModal.svelte";
     import {eventRepo} from "@repo/event.ts";
 
-    let events = $eventRepo.listEvents();
-    let showAdd = false;
+    let events = $state($eventRepo.listEvents());
+    let showAdd = $state(false);
     let millis = Date.now();
 </script>
 
-<Navbar let:hidden let:toggle class="shadow-lg border-b">
+<Navbar   class="shadow-lg border-b">
+    {#snippet children({ hidden, toggle })}
     <NavBrand href="/">
-        <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
-          Mod-Tool
-        </span>
-    </NavBrand>
-    <NavHamburger on:click={toggle}/>
-    <NavUl {hidden}>
-        <NavLi href="#/edit">Edit Pages</NavLi>
-        <NavLi href="#/perms">Permissions</NavLi>
-    </NavUl>
+          <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">
+            Mod-Tool
+          </span>
+      </NavBrand>
+      <NavHamburger on:click={toggle}/>
+      <NavUl {hidden}>
+          <NavLi href="#/edit">Edit Pages</NavLi>
+          <NavLi href="#/perms">Permissions</NavLi>
+      </NavUl>
+  {/snippet}
 </Navbar>
 
 <CreateEventModal bind:open={showAdd} on:create={() => events = $eventRepo.listEvents()}/>
@@ -50,7 +52,7 @@
     </div>
 {:then data}
     <Button class="fixed bottom-6 right-6 !p-4 z-10 shadow-lg" on:click={() => showAdd = true}>
-        <PlusSolid/>
+        <PlusOutline/>
     </Button>
 
     <h1 class="text-3xl mt-4 ml-4">Upcoming</h1>