From 4a525706907fbcc02d40f6b5106e881657e2ef15 Mon Sep 17 00:00:00 2001
From: Stephen Gruzin <stephengrzn@gmail.com>
Date: Sat, 11 Jul 2026 02:22:09 -0700
Subject: [PATCH 1/6] Working on adding expired override options

---
 .vscode/settings.json                         |  3 +
 .../dynamicUrls/DynamicURLEditor.svelte       | 58 ++++++++++++++++++-
 frontend/src/lib/utils.ts                     |  2 +
 .../dashboard/dynamic-urls/data.remote.ts     | 12 +++-
 4 files changed, 71 insertions(+), 4 deletions(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..4452e03
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.definitionLinkOpensInPeek": false
+}
diff --git a/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte b/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
index 950d1f7..d5f7f74 100644
--- a/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
+++ b/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
@@ -12,6 +12,7 @@
     import { Button } from "@/components/ui/button";
     import { Badge } from "@/components/ui/badge";
     import { toast } from "svelte-sonner";
+	import { Temporal } from "temporal-polyfill";
 
     async function deleteIt() {
         const loading = toast.loading("Deleting Dynamic URL");
@@ -33,6 +34,30 @@
 
     let { url, saveRequired = $bindable() }: { url: DynamicURLModel, saveRequired: boolean } = $props();
 
+    const overrideExpiresTimes = [
+        { value: "never", label: "Never" },
+        { value: "15min", label: "In 15 minutes" },
+        { value: "30min", label: "In 30 minutes" },
+        { value: "1hour", label: "In 1 hour" },
+        { value: "2hour", label: "In 2 hours" },
+        { value: "4hour", label: "In 4 hours" },
+        { value: "8hour", label: "In 8 hours" },
+        { value: "16hour", label: "In 16 hours" }
+    ] as const;
+
+    let selectedOverrideExpireTime: (typeof overrideExpiresTimes)[number]['value'] | "set" = $derived(url.overrideExpireInStr);
+    let selectedOverrideExpireTimeToDate = $derived({
+        never: 0,
+        "15min": 15,
+        "30min": 30,
+        "1hour": 60,
+        "2hour": 120,
+        "4hour": 240,
+        "8hour": 480,
+        "16hour": 960,
+        "set": 0
+    }[selectedOverrideExpireTime]);
+
     let confirmDelete = $state(false);
     let totalHits = $derived(url.refs.reduce((sum, ref) => sum + ref.hits, 0));
     let maxHits = $derived(Math.max(...url.refs.map((r) => r.hits), 1));
@@ -53,12 +78,14 @@
         const overrideURLChanged = overrideURL !== url.overrideRedirectTo;
         const enableWeeklyScheduleChanged = enableWeeklySchedule !== url.enableWeekSheet;
         const weekSheetChanged = weekSheet !== url.weekSheet;
+        const overrideExpiresInChanged = (selectedOverrideExpireTime === "never" ? "" : Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate}).toString()) !== url.overrideExpiresIn;
 
         saveRequired = defaultRedirectURLChanged ||
             currentTzChanged ||
             disableURLChanged ||
             enableOverrideChanged ||
             ( enableOverride && overrideURLChanged ) ||
+            ( enableOverride && overrideExpiresInChanged ) ||
             enableWeeklyScheduleChanged ||
             weekSheetChanged;
     });
@@ -74,7 +101,8 @@
                 enableWeekSheet: enableWeeklySchedule,
                 overrideRedirectTo: overrideURL,
                 enableOverrideRedirect: enableOverride,
-                disableURL
+                disableURL,
+                overrideExpiresIn: selectedOverrideExpireTime === "never" ? "" : Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate}).toString({ timeZoneName: 'never' }).replace('T', ' ')
             });
             toast.dismiss(loading);
             if (response.error) {
@@ -118,7 +146,7 @@
                 <Label for={`tz-${url.id}`}>Timezone</Label>
                 <Select.Root type="single" bind:value={currentTz} >
                     <Select.Trigger id={`tz-${url.id}`}>
-                    {currentTz}
+                        {currentTz}
                     </Select.Trigger>
                     <Select.Content>
                     {#each TIMEZONES as tz (`aTZ${tz}`)}
@@ -176,6 +204,32 @@
                         bind:value={overrideURL}
                         placeholder="https://zoom.us/j/special-event"
                     />
+                    <Label class="flex flex-col items-start mt-5">
+                        Override expires in:
+                        <div class="flex items-center gap-2">
+                            <Select.Root type="single" name="favoriteFruit" bind:value={selectedOverrideExpireTime}>
+                                <Select.Trigger class="w-45">
+                                    {overrideExpiresTimes.filter((a) => a["value"] === selectedOverrideExpireTime)[0]?.label}
+                                </Select.Trigger>
+                                <Select.Content>
+                                    <Select.Group>
+                                        {#each overrideExpiresTimes as expireTime (expireTime.value)}
+                                            <Select.Item
+                                                value={expireTime.value}
+                                                label={expireTime.label}
+                                            >
+                                                {expireTime.label}
+                                            </Select.Item>
+                                        {/each}
+                                    </Select.Group>
+                                </Select.Content>
+                            </Select.Root>
+                            {#if selectedOverrideExpireTime !== "never"}
+                                {@const estTime = Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate})}
+                                <p>Est. expire time {estTime.hour.toString().padStart(2, "0")}:{estTime.minute.toString().padStart(2, "0")}</p>
+                            {/if}
+                        </div>
+                    </Label>
                 </div>
             {/if}
         </div>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index e5bb433..7267faf 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -383,6 +383,8 @@ export interface DynamicURLModel extends RecordModel {
 	refs: URLRefHits[],
 	created: string,
 	updated: string,
+	overrideExpiresIn: string
+	overrideExpireInStr: "never" | "15min" | "30min" | "1hour" | "2hour" | "4hour" | "8hour" | "16hour" | "set"
 }
 
 export const TIMEZONES = [
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
index 76ca62f..b5b7732 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
@@ -94,7 +94,8 @@ export const createDynamicURLCommand = command(CreateDynamicURLSchema, async (ne
             "timeZone": newURLData.timeZone,
             "weekSheet": [[],[],[],[],[],[],[]],
             "refs": [],
-            "owner": locals.user.id
+            "owner": locals.user.id,
+            "overrideExpireInStr": "never"
         };
 
         await locals.pb.collection('dynamic_url').create(data, {
@@ -129,6 +130,7 @@ const UpdateDynamicURLSchema = v.object({
     }))),
     enableWeekSheet: v.boolean(),
     enableOverrideRedirect: v.boolean(),
+    overrideExpiresIn: v.string(),
     disableURL: v.boolean(),
     overrideRedirectTo: v.nullish(v.union([v.pipe(v.string(), v.url()), v.pipe(v.string(), v.maxLength(0))])),
 });
@@ -185,13 +187,19 @@ export const updateDynamicURLCommand = command(UpdateDynamicURLSchema, async (up
             "weekSheet": updatedURLData.weekSheet,
             "enableWeekSheet": updatedURLData.enableWeekSheet,
             "enableOverrideRedirect": updatedURLData.enableOverrideRedirect,
-            "disableURL": updatedURLData.disableURL,
+            "disableURL": updatedURLData.disableURL
         };
 
         if (updatedURLData.enableOverrideRedirect && updatedURLData.overrideRedirectTo && updatedURLData.overrideRedirectTo.length > 0) {
             data["overrideRedirectTo"] = updatedURLData.overrideRedirectTo;
         }
 
+        if (updatedURLData.enableOverrideRedirect) {
+            data["overrideExpiresIn"] = updatedURLData.overrideExpiresIn;
+        }
+
+        console.log(data);
+
         await locals.pb.collection('dynamic_url').update(dynamicURL.id, data, {
             headers: {
                 "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!

From 5bbec9f61280126f74ee92d88602cd57a217f5dd Mon Sep 17 00:00:00 2001
From: Stephen Gruzin <stephengrzn@gmail.com>
Date: Wed, 15 Jul 2026 01:12:33 -0700
Subject: [PATCH 2/6] Made it possible to expire the override toggle in the
 dynamic url page

---
 .../dynamicUrls/DynamicURLEditor.svelte       | 16 ++++---
 .../(mainWebsite)/dashboard/backend.remote.ts | 43 +++++++++++++++++++
 .../dashboard/dynamic-urls/data.remote.ts     |  3 +-
 frontend/src/routes/go/[slug]/+server.ts      |  3 +-
 4 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte b/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
index d5f7f74..5bd51dc 100644
--- a/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
+++ b/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { deleteDynamicURLCommand, updateDynamicURLCommand } from "../../../routes/(mainWebsite)/dashboard/dynamic-urls/data.remote";
-    import { cn, TIMEZONES, type DynamicURLModel } from "@/utils.js";
+    import { cn, timeWhen, TIMEZONES, type DynamicURLModel } from "@/utils.js";
     import * as Select from "$lib/components/ui/select/index.js";
     import { Switch } from "$lib/components/ui/switch/index.js";
     import * as Table from "$lib/components/ui/table/index.js";
@@ -11,8 +11,8 @@
     import * as Card from "@/components/ui/card/index";
     import { Button } from "@/components/ui/button";
     import { Badge } from "@/components/ui/badge";
-    import { toast } from "svelte-sonner";
 	import { Temporal } from "temporal-polyfill";
+    import { toast } from "svelte-sonner";
 
     async function deleteIt() {
         const loading = toast.loading("Deleting Dynamic URL");
@@ -78,7 +78,7 @@
         const overrideURLChanged = overrideURL !== url.overrideRedirectTo;
         const enableWeeklyScheduleChanged = enableWeeklySchedule !== url.enableWeekSheet;
         const weekSheetChanged = weekSheet !== url.weekSheet;
-        const overrideExpiresInChanged = (selectedOverrideExpireTime === "never" ? "" : Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate}).toString()) !== url.overrideExpiresIn;
+        const overrideExpiresInChanged = selectedOverrideExpireTime !== url.overrideExpireInStr;
 
         saveRequired = defaultRedirectURLChanged ||
             currentTzChanged ||
@@ -102,7 +102,7 @@
                 overrideRedirectTo: overrideURL,
                 enableOverrideRedirect: enableOverride,
                 disableURL,
-                overrideExpiresIn: selectedOverrideExpireTime === "never" ? "" : Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate}).toString({ timeZoneName: 'never' }).replace('T', ' ')
+                overrideExpiresIn: selectedOverrideExpireTime === "never" ? "" :  selectedOverrideExpireTime === "set" ? url.overrideExpiresIn : Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate}).toString({ timeZoneName: 'never' }).replace('T', ' ')
             });
             toast.dismiss(loading);
             if (response.error) {
@@ -209,7 +209,11 @@
                         <div class="flex items-center gap-2">
                             <Select.Root type="single" name="favoriteFruit" bind:value={selectedOverrideExpireTime}>
                                 <Select.Trigger class="w-45">
-                                    {overrideExpiresTimes.filter((a) => a["value"] === selectedOverrideExpireTime)[0]?.label}
+                                    {#if selectedOverrideExpireTime === "set"}
+                                        {timeWhen(url.overrideExpiresIn)}
+                                    {:else}
+                                        {overrideExpiresTimes.filter((a) => a["value"] === selectedOverrideExpireTime)[0]?.label}
+                                    {/if}
                                 </Select.Trigger>
                                 <Select.Content>
                                     <Select.Group>
@@ -224,7 +228,7 @@
                                     </Select.Group>
                                 </Select.Content>
                             </Select.Root>
-                            {#if selectedOverrideExpireTime !== "never"}
+                            {#if selectedOverrideExpireTime !== "never" && selectedOverrideExpireTime !== "set"}
                                 {@const estTime = Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate})}
                                 <p>Est. expire time {estTime.hour.toString().padStart(2, "0")}:{estTime.minute.toString().padStart(2, "0")}</p>
                             {/if}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
index 5d5cfce..d9931dd 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
@@ -207,5 +207,48 @@ export const getMyDynamicURLS = query(async () => {
         console.log("Failed to dynamic urls.", err);
     }
 
+    let somethingChanged = false;
+    const batch = locals.pb.createBatch();
+    const now = (new Date()).getTime();
+    for (let i = 0; i<dynamic_urls.length;i++) {
+        const url = dynamic_urls[i];
+        if (!url) continue;
+        if (url.overrideExpireInStr !== "set") continue;
+        if((new Date(url.overrideExpiresIn)).getTime() > now) continue;
+        batch.collection('dynamic_url').update(url.id, {
+            "overrideExpiresIn": "",
+            "overrideExpireInStr": "never",
+            "enableOverrideRedirect": false
+        }, {
+            headers: {
+                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
+            }
+        });
+        somethingChanged = true;
+    }
+
+    if (somethingChanged) {
+        try {
+            const result = await batch.send({
+                headers: {
+                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
+                }
+            });
+            console.log({bod: result[0]?.body});
+        } catch (err) {
+            console.log("Error updating dynamic url override expire date resets,", err);
+        }
+        try {
+            dynamic_urls = await locals.pb.collection('dynamic_url').getFullList({
+                filter: `owner="${locals.user.id}"`,
+                headers: {
+                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
+                }
+            });
+        } catch (err) {
+            console.log("Failed to dynamic urls.", err);
+        }
+    }
+
     return dynamic_urls;
 });
\ No newline at end of file
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
index b5b7732..a54baca 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
@@ -196,10 +196,9 @@ export const updateDynamicURLCommand = command(UpdateDynamicURLSchema, async (up
 
         if (updatedURLData.enableOverrideRedirect) {
             data["overrideExpiresIn"] = updatedURLData.overrideExpiresIn;
+            data["overrideExpireInStr"] = "set";
         }
 
-        console.log(data);
-
         await locals.pb.collection('dynamic_url').update(dynamicURL.id, data, {
             headers: {
                 "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
diff --git a/frontend/src/routes/go/[slug]/+server.ts b/frontend/src/routes/go/[slug]/+server.ts
index 79417d2..4b1b957 100644
--- a/frontend/src/routes/go/[slug]/+server.ts
+++ b/frontend/src/routes/go/[slug]/+server.ts
@@ -71,9 +71,10 @@ export async function GET({ params, locals, url }) {
     }
 
     let linkToRedirect = record.defaultRedirectTo;
+    const overrideExpired = record.overrideExpireInStr === "set" ? (new Date(record.overrideExpiresIn)).getTime() < (new Date()).getTime() : false;
 
     // If the dynamic_url owner enabled the override switch, we dont need to worry about anything else and just return the override URL
-    if (record.enableOverrideRedirect) {
+    if (record.enableOverrideRedirect && !overrideExpired) {
         linkToRedirect = record.overrideRedirectTo;
     } else if (record.enableWeekSheet) {
         let today = Temporal.Now.zonedDateTimeISO(record.timeZone);

From 264ef13506bb48b591d2cb65d5a0997738539836 Mon Sep 17 00:00:00 2001
From: Stephen Gruzin <stephengrzn@gmail.com>
Date: Tue, 21 Jul 2026 20:09:43 -0700
Subject: [PATCH 3/6] Added custom path urls in the calendar section

---
 frontend/src/lib/cal.utils.ts                 |  1 +
 .../dashboard/calendar/CalGeneralInfo.svelte  | 20 ++++++-----
 .../dashboard/calendars/+page.svelte          | 16 +++++++--
 .../dashboard/calendars/[slug]/+page.svelte   | 21 ++++++++----
 .../calendars/calendarActions.remote.ts       | 34 +++++++++++++++++++
 .../src/routes/cal/[slug]/+page.server.ts     |  2 +-
 .../routes/cal/[slug]/login/+page.server.ts   |  4 +--
 7 files changed, 78 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/cal.utils.ts b/frontend/src/lib/cal.utils.ts
index 37ff1d2..8bfe8a8 100644
--- a/frontend/src/lib/cal.utils.ts
+++ b/frontend/src/lib/cal.utils.ts
@@ -49,6 +49,7 @@ export const defaultCalendarFilters: CalendarFilters = {
 }
 
 export interface CalendarDBModel extends RecordModel {
+	publicId: string,
 	name: string,
 	password: string,
 	passwordEnabled: boolean,
diff --git a/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte b/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte
index 78b0028..fb4eb51 100644
--- a/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte
@@ -7,24 +7,26 @@
 
     let {
         changed = $bindable(),
-        calId,
+        calPublicId,
         calendarName,
         calendarDescription
     }: {
         changed: boolean,
-        calId: string,
+        calPublicId: string,
         calendarName: string,
         calendarDescription: string
     } = $props();
 
+    let calPublicIdBindable = $derived(calPublicId);
     let calendarNameBindable = $derived(calendarName);
     let calendarDescriptionBindable = $derived(calendarDescription);
 
     $effect(() => {
+        const calPublicIdChanged = calPublicId !== calPublicIdBindable;
         const calendarNameChanged = calendarName !== calendarNameBindable;
         const calendarDescriptionChanged = calendarDescription !== calendarDescriptionBindable;
 
-        changed = calendarNameChanged || calendarDescriptionChanged;
+        changed = calPublicIdChanged || calendarNameChanged || calendarDescriptionChanged;
     });
 </script>
 
@@ -35,16 +37,18 @@
     </Card.Header>
     <Card.Content class="space-y-4">
         <div class="space-y-2">
-            {#if calId.length > 0}
-                <input {...updateCalendarForm.fields.id.as("hidden", calId)} />
+            {#if calPublicIdBindable.length > 0}
+                <input {...updateCalendarForm.fields.publicId.as("hidden", calPublicIdBindable)} />
             {/if}
-            <Label for="calendar-id">Calendar ID</Label>
+            <Label for="calendar-id">Calendar URL Path</Label>
             <Input
                 id="calendar-id"
-                value={calId}
-                disabled
+                bind:value={calPublicIdBindable}
                 class="font-mono text-sm"
             />
+            {#each updateCalendarForm.fields.publicId.issues() as issue}
+                <p class="text-sm text-red-500">{issue.message}</p>
+            {/each}
         </div>
 
         <div class="space-y-2">
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte
index 79fd4bf..03aad41 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte
@@ -24,15 +24,17 @@
 
     let newCalendarDialogOpen = $state(false);
     let newCalendarDescription = $state("");
+    let newCalendarPublicId = $state("");
     let newCalendarName = $state("");
     let newCalendarPasswordEnabled = $state(false);
     let newCalendarPassword = $state("");
     let creatingCalendar = $state(false);
 
     async function handleCreateCalendar() {
-        if (newCalendarName && newCalendarDescription) {
+        if (newCalendarPublicId && newCalendarName && newCalendarDescription) {
             creatingCalendar = true;
             const response = await createCalendarCommand({
+                publicId: newCalendarPublicId,
                 name: newCalendarName,
                 description: newCalendarDescription,
                 enablePassword: newCalendarPasswordEnabled,
@@ -45,6 +47,7 @@
                 toast.success(response.msg);
                 newCalendarDialogOpen = false;
                 newCalendarDescription = "";
+                newCalendarPublicId = "";
                 newCalendarName = "";
                 newCalendarPasswordEnabled = false;
                 newCalendarPassword = "";
@@ -110,6 +113,15 @@
                 </Dialog.Header>
 
                 <div class="space-y-4 py-4">
+                    <div class="space-y-2">
+                        <Label for="name">Calendar URL path</Label>
+                        <Input
+                        id="publicId"
+                        placeholder="e.g., publishedevents"
+                        bind:value={newCalendarPublicId}
+                        />
+                    </div>
+
                     <div class="space-y-2">
                         <Label for="name">Calendar Name</Label>
                         <Input
@@ -193,7 +205,7 @@
                                     </div>
                                 {/if}
                             </Card.Title>
-                            <Card.Description class="text-sm mt-1">/cal/{calendar.id}</Card.Description>
+                            <Card.Description class="text-sm mt-1">/cal/{calendar.publicId}</Card.Description>
                         </div>
                     </div>
 
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte
index bf95647..e2808eb 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte
@@ -93,19 +93,26 @@
             let savingChanges = toast.loading("Saving Changes.", { duration: Number.POSITIVE_INFINITY });
             try {
                 await submit();
-                form.reset();
-
-                clearFileInput(document.getElementById("imageUploaderCalendar"));
-                uploadNewAvatar = null;
                 toast.dismiss(savingChanges);
 
-                toast.success("Saved Changes");
+                if (!updateCalendarForm.fields.allIssues()) {
+                    form.reset();
+
+                    clearFileInput(document.getElementById("imageUploaderCalendar"));
+                    uploadNewAvatar = null;
+                    toast.success("Saved Changes");
+                } else {
+                    toast.error("Something went wrong!");
+                }
             } catch (err) {
                 console.log(err);
                 toast.dismiss(savingChanges);
                 toast.error("An error occured.");
             }
         })} class="lg:col-span-2 space-y-6" enctype="multipart/form-data">
+            {#if selectedCalendar.id.length > 0}
+                <input {...updateCalendarForm.fields.id.as("hidden", selectedCalendar.id)} />
+            {/if}
             <Button type="submit" id="updateCalendarButton1" class="sr-only">Update Calendar</Button>
             <CalAvatar
                 bind:changed={avatarChanged}
@@ -115,7 +122,7 @@
 
             <CalGeneralInfo
                 bind:changed={generalInfoChanged}
-                calId={selectedCalendar.id}
+                calPublicId={selectedCalendar.publicId}
                 calendarName={selectedCalendar.name}
                 calendarDescription={selectedCalendar.description}
             />
@@ -136,7 +143,7 @@
 
         <!-- This is the sticky side options section. -->
         <div class="space-y-6 stickySidebar h-fit">
-            <CalShare calId={selectedCalendar.id} />
+            <CalShare calId={selectedCalendar.publicId} />
 
             <CalStatistics
                 visits={selectedCalendar.visits}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
index c78bb75..c43cd96 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
@@ -7,7 +7,24 @@ import * as v from "valibot";
 
 config();
 
+async function calPublicIdInUse(locals: App.Locals, pubID: string) {
+    try {
+        await locals.pb.collection('calendars').getFirstListItem(`publicId="${pubID}"`, {
+            headers: {
+                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
+            }
+        });
+        return true;
+    } catch (err) {
+        return false;
+    }
+}
+
 const CreateCalendarSchema = v.object({
+    publicId: v.pipe(
+        v.string(),
+        v.regex(/^[a-zA-Z0-9]+$/, 'No spaces or special characters allowed.')
+    ),
     name: v.pipe(v.string(), v.nonEmpty("A name for the calendar is required.")),
     description: v.pipe(v.string(), v.nonEmpty("A description for the calendar is required.")),
     enablePassword: v.boolean(),
@@ -33,8 +50,16 @@ export const createCalendarCommand = command(CreateCalendarSchema, async (newCal
         }
     }
 
+    if (await calPublicIdInUse(locals, newCalendar.publicId)) {
+        return {
+            error: true,
+            msg: "Calendar URL path already taken."
+        }
+    }
+
     try {
         let data: Partial<CalendarDBModel> = {
+            "publicId": newCalendar.publicId,
             "name": newCalendar.name,
             "description": newCalendar.description,
             "passwordEnabled": newCalendar.enablePassword,
@@ -70,6 +95,10 @@ export const createCalendarCommand = command(CreateCalendarSchema, async (newCal
 
 const UpdateCalendarSchema = v.object({
     id: v.string(),
+    publicId: v.pipe(
+        v.string(),
+        v.regex(/^[a-zA-Z0-9]+$/, 'No spaces or special characters allowed.')
+    ),
     name: v.string(),
     description: v.string(),
     enablePassword: v.optional(v.boolean(), false),
@@ -110,8 +139,13 @@ export const updateCalendarForm = form(UpdateCalendarSchema, async (updatedCalen
 
     const calendar = await getCalendarById(updatedCalendar.id);
 
+    if (calendar.publicId !== updatedCalendar.publicId && await calPublicIdInUse(locals, updatedCalendar.publicId)) {
+        return invalid(issue.publicId("Calendar URL path already taken."));
+    }
+
     try {
         let data: Partial<CalendarDBModel> = {
+            "publicId": updatedCalendar.publicId,
             "name": updatedCalendar.name,
             "description": updatedCalendar.description,
             "passwordEnabled": updatedCalendar.enablePassword,
diff --git a/frontend/src/routes/cal/[slug]/+page.server.ts b/frontend/src/routes/cal/[slug]/+page.server.ts
index 98e2221..81c85b4 100644
--- a/frontend/src/routes/cal/[slug]/+page.server.ts
+++ b/frontend/src/routes/cal/[slug]/+page.server.ts
@@ -7,7 +7,7 @@ config();
 export async function load({ params, locals, cookies }) {
     let calendar: CalendarDBModel;
     try {
-        calendar = await locals.pb.collection('calendars').getOne(params.slug, {
+        calendar = await locals.pb.collection('calendars').getFirstListItem(`publicId="${params.slug}"`, {
             headers: {
                 "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
             }
diff --git a/frontend/src/routes/cal/[slug]/login/+page.server.ts b/frontend/src/routes/cal/[slug]/login/+page.server.ts
index 81ca4cf..a0b41aa 100644
--- a/frontend/src/routes/cal/[slug]/login/+page.server.ts
+++ b/frontend/src/routes/cal/[slug]/login/+page.server.ts
@@ -7,7 +7,7 @@ config();
 export async function load({ locals, params }) {
     let calendar: CalendarDBModel;
     try {
-        calendar = await locals.pb.collection('calendars').getFirstListItem(`id="${params.slug}"`, {
+        calendar = await locals.pb.collection('calendars').getFirstListItem(`publicId="${params.slug}"`, {
             headers: {
                 "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
             }
@@ -35,7 +35,7 @@ export const actions = {
 
         let calendar: CalendarDBModel;
         try {
-            calendar = await locals.pb.collection('calendars').getFirstListItem(`id="${params.slug}"`, {
+            calendar = await locals.pb.collection('calendars').getFirstListItem(`publicId="${params.slug}"`, {
                 headers: {
                     "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
                 }

From 1842a601a981357b8d23c3d006d652bf8728d682 Mon Sep 17 00:00:00 2001
From: Stephen Gruzin <stephengrzn@gmail.com>
Date: Tue, 21 Jul 2026 20:12:59 -0700
Subject: [PATCH 4/6] Added prettier

---
 frontend/.prettierignore                    |   9 ++
 frontend/.vscode/extensions.json            |   3 +-
 frontend/bun.lock                           |   9 ++
 frontend/package.json                       |   7 +-
 frontend/prettier.config.js                 |  13 ++
 frontend/src/routes/cal/[slug]/+page.svelte | 142 +++++++++++---------
 6 files changed, 121 insertions(+), 62 deletions(-)
 create mode 100644 frontend/.prettierignore
 create mode 100644 frontend/prettier.config.js

diff --git a/frontend/.prettierignore b/frontend/.prettierignore
new file mode 100644
index 0000000..7d74fe2
--- /dev/null
+++ b/frontend/.prettierignore
@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json
index 5449017..cdab7df 100644
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -1,6 +1,7 @@
 {
 	"recommendations": [
 		"svelte.svelte-vscode",
-		"bradlc.vscode-tailwindcss"
+		"bradlc.vscode-tailwindcss",
+		"esbenp.prettier-vscode"
 	]
 }
diff --git a/frontend/bun.lock b/frontend/bun.lock
index 37ee54a..e1322e8 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -25,6 +25,9 @@
         "clsx": "^2.1.1",
         "embla-carousel-autoplay": "^8.6.0",
         "embla-carousel-svelte": "^8.6.0",
+        "prettier": "^3.8.3",
+        "prettier-plugin-svelte": "^4.1.0",
+        "prettier-plugin-tailwindcss": "^0.8.0",
         "runed": "^0.37.1",
         "shadcn-svelte": "^1.2.7",
         "svelte": "^5.54.0",
@@ -423,6 +426,12 @@
 
     "postcss": ["postcss@8.5.8", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-OW/rX8O/jXnm82Ey1k44pObPtdblfiuWnrd8X7GJ7emImCOstunGbXUpp7HdBrFQX6rJzn3sPT397Wp5aCwCHg=="],
 
+    "prettier": ["prettier@3.9.6", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-OpN0zzVdiaiAhxpuuj5efpIS4sY9j7bY6uR5mnj5yPzGkdkjNKSJeUThPb60Jw29QuAZgA4o+/iB49kFiaBX6g=="],
+
+    "prettier-plugin-svelte": ["prettier-plugin-svelte@4.1.1", "", { "peerDependencies": { "prettier": "^3.0.0", "svelte": "^5.0.0" } }, "sha512-wXvbXMjSvb4C9ENWTHXyd+ihakKCsJ6rJhLP6/8HFNj4GkZr48jqL9PoKsl2sk7SyCZRTnJ7O2TTowUpOxP/KA=="],
+
+    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.8.1", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-svelte"] }, "sha512-iaFMYqDsE4ffdDkn5qup0j5f2aCEBFZrdrZnvu9QKTlWx/iGPeQ4HHu7b7fCPMxeo9nwQBiOAh2nSypdFYWJkw=="],
+
     "qs": ["qs@6.15.0", "", { "dependencies": { "side-channel": "^1.1.0" } }, "sha512-mAZTtNCeetKMH+pSjrb76NAM8V9a05I9aBZOHztWy/UqcJdQYNsf59vrRKWnojAT9Y+GbIvoTBC++CPHqpDBhQ=="],
 
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
diff --git a/frontend/package.json b/frontend/package.json
index fd052ff..892700e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,9 @@
 		"prepare": "svelte-kit sync || echo ''",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"stripe-dev": "stripe listen --forward-to localhost:5173/api/webhook/stripe"
+		"stripe-dev": "stripe listen --forward-to localhost:5173/api/webhook/stripe",
+		"lint": "prettier --check .",
+		"format": "prettier --write ."
 	},
 	"devDependencies": {
 		"@fontsource-variable/inter": "^5.2.8",
@@ -24,6 +26,9 @@
 		"clsx": "^2.1.1",
 		"embla-carousel-autoplay": "^8.6.0",
 		"embla-carousel-svelte": "^8.6.0",
+		"prettier": "^3.8.3",
+		"prettier-plugin-svelte": "^4.1.0",
+		"prettier-plugin-tailwindcss": "^0.8.0",
 		"runed": "^0.37.1",
 		"shadcn-svelte": "^1.2.7",
 		"svelte": "^5.54.0",
diff --git a/frontend/prettier.config.js b/frontend/prettier.config.js
new file mode 100644
index 0000000..6782675
--- /dev/null
+++ b/frontend/prettier.config.js
@@ -0,0 +1,13 @@
+/** @type {import("prettier").Config} */
+const config = {
+	useTabs: true,
+	tabWidth: 4,
+	singleQuote: true,
+	trailingComma: 'none',
+	printWidth: 100,
+	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
+	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
+	tailwindStylesheet: './src/routes/layout.css'
+};
+
+export default config;
diff --git a/frontend/src/routes/cal/[slug]/+page.svelte b/frontend/src/routes/cal/[slug]/+page.svelte
index 68dd7a1..87738da 100644
--- a/frontend/src/routes/cal/[slug]/+page.svelte
+++ b/frontend/src/routes/cal/[slug]/+page.svelte
@@ -1,77 +1,99 @@
 <script lang="ts">
-    import { CircleQuestionMark, Fullscreen } from '@lucide/svelte';
-    import * as Popover from "$lib/components/ui/popover/index.js";
-    import { getEventsForCalendar } from './eventFetch.remote.js';
-    import { Slider } from "$lib/components/ui/slider/index.js";
-    import Button from '@/components/ui/button/button.svelte';
-    import { Switch } from '@/components/ui/switch/index.js';
-    import TimeZoneSelector from '@/TimeZoneSelector.svelte';
-    import { Label } from '@/components/ui/label/index.js';
-    import { toggleFullScreen } from '@/utils.js';
-    import { Temporal } from 'temporal-polyfill';
-    import Calendar from '@/Calendar.svelte';
-    import { PersistedState } from "runed";
-    import { onMount } from 'svelte';
+	import { CircleQuestionMark, Fullscreen } from "@lucide/svelte";
+	import * as Popover from "$lib/components/ui/popover/index.js";
+	import { getEventsForCalendar } from "./eventFetch.remote.js";
+	import { Slider } from "$lib/components/ui/slider/index.js";
+	import Button from "@/components/ui/button/button.svelte";
+	import { Switch } from "@/components/ui/switch/index.js";
+	import TimeZoneSelector from "@/TimeZoneSelector.svelte";
+	import { Label } from "@/components/ui/label/index.js";
+	import { toggleFullScreen } from "@/utils.js";
+	import { Temporal } from "temporal-polyfill";
+	import Calendar from "@/Calendar.svelte";
+	import { PersistedState } from "runed";
+	import { onMount } from "svelte";
 
-    let { data } = $props();
+	let { data } = $props();
 
-    let invisibleTooltip = $state(false);
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    // svelte-ignore state_referenced_locally
-    let persistedFontScale = new PersistedState(`CalendarFontScale${data.id}`, 1);
-    let fontScale = $derived(persistedFontScale.current);
+	let invisibleTooltip = $state(false);
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	// svelte-ignore state_referenced_locally
+	let persistedFontScale = new PersistedState(`CalendarFontScale${data.id}`, 1);
+	let fontScale = $derived(persistedFontScale.current);
 
-    let events = $derived(await getEventsForCalendar(data.id));
+	let events = $derived(await getEventsForCalendar(data.id));
 
-    onMount(() => {
-        document.body.classList.add("dark");
-    });
+	onMount(() => {
+		document.body.classList.add("dark");
+	});
 </script>
 
 <svelte:head>
-    <title>{data.name}</title>
-    <link rel="shortcut icon" href={data.logoLink} type="image/x-icon">
+	<title>{data.name}</title>
+	<link rel="shortcut icon" href={data.logoLink} type="image/x-icon" />
 </svelte:head>
 
 <div id="cal-root" class="dark min-h-screen w-full bg-background relative">
-    <Calendar calId={data.id} events={events} displaySettings={data.displaySettings} timeZone={timeZone} filters={data.filters} {fontScale} />
-    <Popover.Root>
-        <Popover.Trigger class="absolute bottom-1 right-1 z-50 {invisibleTooltip ? "opacity-0" : "text-muted-foreground bg-foreground"} rounded p-2" style={invisibleTooltip ? "border:none;" : "border: 1px solid #333333"}>
-            <CircleQuestionMark />
-        </Popover.Trigger>
-        <Popover.Content class="text-muted-foreground bg-foreground rounded p-2 flex flex-col gap-3" style="border: 1px solid #333333">
-            <TimeZoneSelector bind:timeZone />
-            <div class="dark flex items-center gap-2 justify-between">
-                <Label for="useinvis" class="dark text-sm">Hide tooltip (you can still click it)</Label>
-                <Switch class="dark" id="useinvis" bind:checked={invisibleTooltip} />
-            </div>
-            <p>Font scale: {fontScale}x</p>
-            <Slider type="single" bind:value={persistedFontScale.current} max={2} min={0.25} step={0.05} title="Change font scale" />
-            <Button onclick={toggleFullScreen} title="Fullscreen"><Fullscreen /></Button>
-        </Popover.Content>
-    </Popover.Root>
+	<Calendar
+		calId={data.id}
+		{events}
+		displaySettings={data.displaySettings}
+		{timeZone}
+		filters={data.filters}
+		{fontScale}
+	/>
+	<Popover.Root>
+		<Popover.Trigger
+			class="absolute bottom-1 right-1 z-50 {invisibleTooltip
+				? 'opacity-0'
+				: 'text-muted-foreground bg-foreground'} rounded p-2"
+			style={invisibleTooltip ? "border:none;" : "border: 1px solid #333333"}
+		>
+			<CircleQuestionMark />
+		</Popover.Trigger>
+		<Popover.Content
+			class="text-muted-foreground bg-foreground rounded p-2 flex flex-col gap-3"
+			style="border: 1px solid #333333"
+		>
+			<TimeZoneSelector bind:timeZone />
+			<div class="dark flex items-center gap-2 justify-between">
+				<Label for="useinvis" class="dark text-sm">Hide tooltip (you can still click it)</Label>
+				<Switch class="dark" id="useinvis" bind:checked={invisibleTooltip} />
+			</div>
+			<p>Font scale: {fontScale}x</p>
+			<Slider
+				type="single"
+				bind:value={persistedFontScale.current}
+				max={2}
+				min={0.25}
+				step={0.05}
+				title="Change font scale"
+			/>
+			<Button onclick={toggleFullScreen} title="Fullscreen"><Fullscreen /></Button>
+		</Popover.Content>
+	</Popover.Root>
 </div>
 
 <style>
-    /* Target the overall scrollbar */
-    :global(::-webkit-scrollbar) {
-        width: 0; /* Adjust width as desired */
-        height: 5px; /* Adjust height for horizontal scrollbars */
-    }
+	/* Target the overall scrollbar */
+	:global(::-webkit-scrollbar) {
+		width: 0; /* Adjust width as desired */
+		height: 5px; /* Adjust height for horizontal scrollbars */
+	}
 
-    /* Target the scrollbar track (the background area) */
-    :global(::-webkit-scrollbar-track) {
-        background: black;
-    }
+	/* Target the scrollbar track (the background area) */
+	:global(::-webkit-scrollbar-track) {
+		background: black;
+	}
 
-    /* Target the scrollbar thumb (the draggable part) */
-    :global(::-webkit-scrollbar-thumb) {
-        background-color: #888; /* A subtle gray for the thumb */
-        border-radius: 4px; /* Rounded corners for the thumb */
-    }
+	/* Target the scrollbar thumb (the draggable part) */
+	:global(::-webkit-scrollbar-thumb) {
+		background-color: #888; /* A subtle gray for the thumb */
+		border-radius: 4px; /* Rounded corners for the thumb */
+	}
 
-    /* Style the thumb on hover */
-    :global(::-webkit-scrollbar-thumb:hover) {
-        background-color: #555; /* Darker gray on hover */
-    }
-</style>
\ No newline at end of file
+	/* Style the thumb on hover */
+	:global(::-webkit-scrollbar-thumb:hover) {
+		background-color: #555; /* Darker gray on hover */
+	}
+</style>

From 0dd31b658f39e99f8727313137c1ad733a54838d Mon Sep 17 00:00:00 2001
From: Stephen Gruzin <stephengrzn@gmail.com>
Date: Tue, 21 Jul 2026 20:16:37 -0700
Subject: [PATCH 5/6] Formatted everything with the new prettier rules

---
 frontend/.prettierrc                          |  26 +-
 frontend/.vscode/extensions.json              |   6 +-
 frontend/prettier.config.js                   |   8 +-
 frontend/src/app.d.ts                         |   6 +-
 frontend/src/app.html                         |   9 +-
 frontend/src/cal.css                          | 246 +++----
 frontend/src/hooks.server.ts                  |  55 +-
 frontend/src/lib/ACalToAdd.svelte             |  49 +-
 frontend/src/lib/AnIncludedCalendar.svelte    | 149 ++--
 frontend/src/lib/Calendar.svelte              | 154 ++--
 frontend/src/lib/Day.svelte                   |  77 +-
 frontend/src/lib/DynamicFeedAvatar.svelte     |   8 +-
 frontend/src/lib/Event.svelte                 | 270 ++++---
 frontend/src/lib/EventResources.svelte        |  97 ++-
 frontend/src/lib/EventTimes.svelte            |  35 +-
 frontend/src/lib/EverythingSearch.svelte      | 345 +++++----
 frontend/src/lib/IncludedCalendars.svelte     | 290 ++++----
 frontend/src/lib/ModeToggler.svelte           |  18 +-
 frontend/src/lib/NoCalendarAvatar.svelte      |   8 +-
 frontend/src/lib/NoEventListAvatar.svelte     |   8 +-
 frontend/src/lib/NoImageFeedAvatar.svelte     |   8 +-
 frontend/src/lib/PrettyDate.svelte            |  13 +-
 frontend/src/lib/Time.svelte                  |  47 +-
 frontend/src/lib/TimeZoneSelector.svelte      |  87 ++-
 frontend/src/lib/cal.utils.ts                 |  70 +-
 .../calendar/monthView/MonthCalView.svelte    |  81 +-
 .../calendar/monthView/MonthCalViewDay.svelte | 100 +--
 .../monthView/MonthCalViewDayEvent.svelte     |  63 +-
 .../lib/calendar/weekView/WeekCalView.svelte  |  81 +-
 .../calendar/weekView/WeekCalViewDay.svelte   | 100 +--
 .../weekView/WeekCalViewDayEvent.svelte       |  98 ++-
 .../src/lib/components/ui/avatar/index.ts     |   2 +-
 .../src/lib/components/ui/badge/badge.svelte  |  11 +-
 .../lib/components/ui/button/button.svelte    |  10 +-
 .../src/lib/components/ui/button/index.ts     |   4 +-
 .../ui/calendar/calendar-caption.svelte       |   2 +-
 .../components/ui/calendar/calendar.svelte    |   2 +-
 .../src/lib/components/ui/calendar/index.ts   |   2 +-
 .../src/lib/components/ui/card/card.svelte    |   2 +-
 frontend/src/lib/components/ui/card/index.ts  |   2 +-
 .../ui/carousel/carousel-content.svelte       |   4 +-
 .../components/ui/carousel/carousel.svelte    |   4 +-
 .../src/lib/components/ui/carousel/context.ts |   2 +-
 .../src/lib/components/ui/carousel/index.ts   |   2 +-
 .../src/lib/components/ui/checkbox/index.ts   |   2 +-
 .../lib/components/ui/collapsible/index.ts    |   2 +-
 .../src/lib/components/ui/dialog/index.ts     |   2 +-
 .../src/lib/components/ui/drawer/index.ts     |   2 +-
 .../lib/components/ui/dropdown-menu/index.ts  |   2 +-
 .../components/ui/empty/empty-media.svelte    |   8 +-
 frontend/src/lib/components/ui/empty/index.ts |   2 +-
 .../ui/field/field-separator.svelte           |   5 +-
 .../src/lib/components/ui/field/field.svelte  |  12 +-
 frontend/src/lib/components/ui/field/index.ts |   2 +-
 frontend/src/lib/components/ui/input/index.ts |   2 +-
 frontend/src/lib/components/ui/item/index.ts  |   2 +-
 .../lib/components/ui/item/item-group.svelte  |   5 +-
 .../lib/components/ui/item/item-media.svelte  |   9 +-
 .../lib/components/ui/item/item-title.svelte  |   5 +-
 .../src/lib/components/ui/item/item.svelte    |  12 +-
 frontend/src/lib/components/ui/kbd/index.ts   |   2 +-
 frontend/src/lib/components/ui/label/index.ts |   2 +-
 .../src/lib/components/ui/popover/index.ts    |   2 +-
 .../lib/components/ui/range-calendar/index.ts |   2 +-
 .../range-calendar-caption.svelte             |   2 +-
 .../ui/range-calendar/range-calendar.svelte   |   2 +-
 .../src/lib/components/ui/select/index.ts     |   2 +-
 .../src/lib/components/ui/separator/index.ts  |   2 +-
 frontend/src/lib/components/ui/sheet/index.ts |   2 +-
 .../components/ui/sheet/sheet-content.svelte  |  12 +-
 .../components/ui/sidebar/context.svelte.ts   |   4 +-
 .../src/lib/components/ui/sidebar/index.ts    |   2 +-
 .../ui/sidebar/sidebar-group-action.svelte    |   2 +-
 .../ui/sidebar/sidebar-group-label.svelte     |   2 +-
 .../ui/sidebar/sidebar-menu-action.svelte     |   2 +-
 .../ui/sidebar/sidebar-menu-button.svelte     |  16 +-
 .../ui/sidebar/sidebar-menu-sub-button.svelte |   2 +-
 .../ui/sidebar/sidebar-provider.svelte        |   4 +-
 .../lib/components/ui/sidebar/sidebar.svelte  |   5 +-
 .../src/lib/components/ui/skeleton/index.ts   |   2 +-
 .../src/lib/components/ui/slider/index.ts     |   2 +-
 .../lib/components/ui/slider/slider.svelte    |   4 +-
 .../src/lib/components/ui/switch/index.ts     |   2 +-
 frontend/src/lib/components/ui/table/index.ts |   2 +-
 frontend/src/lib/components/ui/tabs/index.ts  |   2 +-
 .../lib/components/ui/tabs/tabs-list.svelte   |   6 +-
 .../src/lib/components/ui/textarea/index.ts   |   2 +-
 .../components/ui/textarea/textarea.svelte    |   3 +-
 .../src/lib/components/ui/tooltip/index.ts    |   2 +-
 .../src/lib/dashboard/DashboardHeader.svelte  |  66 +-
 .../dashboard/DashboardIsNavigating.svelte    |  36 +-
 .../src/lib/dashboard/DashboardSidebar.svelte | 461 ++++++------
 .../lib/dashboard/calendar/CalAvatar.svelte   | 194 ++---
 .../calendar/CalDisplaySettings.svelte        | 296 ++++----
 .../dashboard/calendar/CalEventPreview.svelte | 162 ++--
 .../calendar/CalFilterSettings.svelte         | 502 ++++++++-----
 .../dashboard/calendar/CalGeneralInfo.svelte  | 136 ++--
 .../dashboard/calendar/CalQuickActions.svelte |  90 +--
 .../calendar/CalSecuritySettings.svelte       | 153 ++--
 .../lib/dashboard/calendar/CalShare.svelte    |  64 +-
 .../dashboard/calendar/CalStatistics.svelte   |  74 +-
 .../lib/dashboard/dynamicUrls/ADaySlot.svelte | 169 ++---
 .../dynamicUrls/DynamicURLEditor.svelte       | 694 +++++++++---------
 .../dynamicUrls/SingleDynamicURL.svelte       | 205 +++---
 .../dynamicUrls/WeekSheetDaySlot.svelte       | 163 ++--
 .../dynamicUrls/WeekSheetGrid.svelte          | 134 ++--
 .../dashboard/eventList/EListAvatar.svelte    | 196 ++---
 .../eventList/EListCopyIframe.svelte          | 165 +++--
 .../eventList/EListDisplaySettings.svelte     | 268 ++++---
 .../eventList/EListFilterSettings.svelte      | 138 ++--
 .../eventList/EListGeneralInfo.svelte         | 121 ++-
 .../dashboard/eventList/EListPreview.svelte   |  85 ++-
 .../eventList/EListQuickActions.svelte        |  90 +--
 .../lib/dashboard/eventList/EListShare.svelte |  72 +-
 .../eventList/EListStatistics.svelte          |  74 +-
 .../dashboard/homePage/DynamicUrlItem.svelte  |  50 +-
 .../lib/dashboard/homePage/FeatureCard.svelte |  82 ++-
 .../dashboard/homePage/FeatureSummary.svelte  | 272 +++----
 .../homePage/IntegrationStatus.svelte         | 222 +++---
 .../lib/dashboard/homePage/MetricCards.svelte | 194 ++---
 .../dashboard/homePage/QuickActions.svelte    | 106 +--
 .../dashboard/homePage/RecentActivity.svelte  | 195 ++---
 .../dashboard/homePage/UpcomingEvents.svelte  | 175 +++--
 .../lib/dashboard/homePage/ViewItem.svelte    | 108 ++-
 .../imageFeed/IFeedAdditionalImages.svelte    |  47 +-
 .../dashboard/imageFeed/IFeedAvatar.svelte    | 194 ++---
 .../imageFeed/IFeedCopyIframe.svelte          | 127 ++--
 .../imageFeed/IFeedDisplaySettings.svelte     | 218 +++---
 .../imageFeed/IFeedFilterSettings.svelte      | 138 ++--
 .../imageFeed/IFeedGeneralInfo.svelte         | 121 ++-
 .../imageFeed/IFeedIncludedCalendars.svelte   |  49 +-
 .../imageFeed/IFeedPreviewCard.svelte         | 122 +--
 .../imageFeed/IFeedQuickActions.svelte        |  92 +--
 .../lib/dashboard/imageFeed/IFeedShare.svelte |  72 +-
 .../imageFeed/IFeedStatistics.svelte          |  74 +-
 .../integrations/AddIntegrationDialog.svelte  | 119 +--
 .../dashboard/integrations/BreezeIcon.svelte  |   4 +-
 .../integrations/IntegrationIcon.svelte       |  72 +-
 .../integrations/IntegrationInfoDialog.svelte | 173 ++---
 .../dashboard/integrations/StatusBadge.svelte |  68 +-
 .../lib/dashboard/integrations/XIcon.svelte   |   8 +-
 frontend/src/lib/event.utils.ts               | 203 ++---
 frontend/src/lib/eventList/EventCard.svelte   | 342 ++++-----
 .../lib/ifeedslug/CreateCustomEvent.svelte    | 317 ++++----
 .../src/lib/ifeedslug/CustomImages.svelte     | 220 +++---
 .../lib/ifeedslug/UpdateCustomEvent.svelte    | 348 +++++----
 .../src/lib/landingPage/AlphaWarning.svelte   |  16 +-
 frontend/src/lib/landingPage/CTA.svelte       |  66 +-
 frontend/src/lib/landingPage/Features.svelte  |  92 +--
 frontend/src/lib/landingPage/Header.svelte    |  68 +-
 frontend/src/lib/landingPage/Hero.svelte      | 187 ++---
 frontend/src/lib/landingPage/Stats.svelte     |  36 +-
 .../authComponents/LoginForm.svelte           | 139 ++--
 .../authComponents/SignupForm.svelte          | 183 ++---
 frontend/src/lib/utils.ts                     | 519 +++++++------
 frontend/src/lib/valibotSchemaHelpers.ts      |  10 +-
 .../routes/(mainWebsite)/+layout.server.ts    |  52 +-
 .../src/routes/(mainWebsite)/+page.server.ts  |   4 +-
 .../src/routes/(mainWebsite)/+page.svelte     |  44 +-
 .../(mainWebsite)/dashboard/+error.svelte     |  67 +-
 .../(mainWebsite)/dashboard/+layout.server.ts |  24 +-
 .../(mainWebsite)/dashboard/+layout.svelte    |  33 +-
 .../(mainWebsite)/dashboard/+page.server.ts   |   4 +-
 .../(mainWebsite)/dashboard/+page.svelte      | 116 ++-
 .../(mainWebsite)/dashboard/backend.remote.ts | 414 ++++++-----
 .../dashboard/calendars/+page.server.ts       |   4 +-
 .../dashboard/calendars/+page.svelte          | 473 ++++++------
 .../calendars/[slug]/+page.server.ts          |  12 +-
 .../dashboard/calendars/[slug]/+page.svelte   | 330 +++++----
 .../calendars/calendarActions.remote.ts       | 421 ++++++-----
 .../dashboard/dynamic-urls/+page.server.ts    |  16 +-
 .../dashboard/dynamic-urls/+page.svelte       | 405 +++++-----
 .../dashboard/dynamic-urls/data.remote.ts     | 532 +++++++-------
 .../dashboard/event-lists/+page.server.ts     |   4 +-
 .../dashboard/event-lists/+page.svelte        | 417 +++++------
 .../event-lists/[slug]/+page.server.ts        |  14 +-
 .../dashboard/event-lists/[slug]/+page.svelte | 301 ++++----
 .../event-lists/eventListActions.remote.ts    | 303 ++++----
 .../(mainWebsite)/dashboard/events.remote.ts  | 175 ++---
 .../dashboard/image-feeds/+page.server.ts     |   4 +-
 .../dashboard/image-feeds/+page.svelte        | 416 ++++++-----
 .../IFeedCustomImageActions.remote.ts         | 469 ++++++------
 .../IFeedIncludeCalActions.remote.ts          | 192 ++---
 .../image-feeds/[slug]/+page.server.ts        |  12 +-
 .../dashboard/image-feeds/[slug]/+page.svelte | 321 ++++----
 .../image-feeds/imageFeedActions.remote.ts    | 301 ++++----
 .../dashboard/integrations.remote.ts          | 152 ++--
 .../routes/(mainWebsite)/login/+page.svelte   |  28 +-
 .../(mainWebsite)/login/login.remote.ts       |  36 +-
 .../routes/(mainWebsite)/privacy/+page.svelte | 376 +++++-----
 .../routes/(mainWebsite)/signup/+page.svelte  |  28 +-
 .../(mainWebsite)/signup/signup.remote.ts     | 293 ++++----
 .../routes/(mainWebsite)/terms/+page.svelte   | 251 +++----
 frontend/src/routes/+layout.svelte            |   4 +-
 frontend/src/routes/api/go/[slug]/+server.ts  | 216 +++---
 .../src/routes/api/webhook/stripe/+server.ts  | 180 ++---
 frontend/src/routes/cal/[slug]/+error.svelte  |  68 +-
 frontend/src/routes/cal/[slug]/+layout.svelte |   2 +-
 .../src/routes/cal/[slug]/+page.server.ts     |  78 +-
 .../routes/cal/[slug]/eventFetch.remote.ts    | 150 ++--
 .../routes/cal/[slug]/login/+page.server.ts   | 104 +--
 .../src/routes/cal/[slug]/login/+page.svelte  | 143 ++--
 .../src/routes/cal/[slug]/logout/+server.ts   |  21 +-
 frontend/src/routes/elist/+error.svelte       |  68 +-
 .../src/routes/elist/[slug]/+page.server.ts   |   6 +-
 frontend/src/routes/elist/[slug]/+page.svelte | 181 ++---
 frontend/src/routes/elist/elistData.remote.ts |  26 +-
 .../routes/elist/elistEventFetch.remote.ts    |   8 +-
 .../src/routes/elistPreview/+error.svelte     |  68 +-
 .../elistPreview/[slug]/+page.server.ts       |   8 +-
 .../routes/elistPreview/[slug]/+page.svelte   | 201 ++---
 frontend/src/routes/go/[slug]/+server.ts      | 221 +++---
 frontend/src/routes/google_oath/+server.ts    | 343 ++++-----
 frontend/src/routes/ifeed/+error.svelte       |  68 +-
 .../src/routes/ifeed/[slug]/+page.server.ts   | 250 ++++---
 frontend/src/routes/ifeed/[slug]/+page.svelte | 364 +++++----
 .../src/routes/ifeedPreview/+error.svelte     |  68 +-
 .../ifeedPreview/[slug]/+page.server.ts       | 221 +++---
 .../routes/ifeedPreview/[slug]/+page.svelte   | 464 ++++++------
 frontend/src/routes/layout.css                |   6 +-
 frontend/src/routes/logout/+server.ts         |  28 +-
 frontend/src/routes/oath/+server.ts           | 348 ++++-----
 frontend/svelte.config.js                     |   6 +-
 frontend/tsconfig.json                        |   2 +-
 frontend/vite.config.ts                       |  16 +-
 225 files changed, 13046 insertions(+), 11422 deletions(-)

diff --git a/frontend/.prettierrc b/frontend/.prettierrc
index 5ad9d2e..ef82cc3 100644
--- a/frontend/.prettierrc
+++ b/frontend/.prettierrc
@@ -1,15 +1,15 @@
 {
-  "useTabs": true,
-  "singleQuote": false,
-  "trailingComma": "none",
-  "printWidth": 100,
-  "plugins": ["prettier-plugin-svelte"],
-  "overrides": [
-    {
-      "files": "*.svelte",
-      "options": {
-        "parser": "svelte"
-      }
-    }
-  ]
+	"useTabs": true,
+	"singleQuote": false,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }
diff --git a/frontend/.vscode/extensions.json b/frontend/.vscode/extensions.json
index cdab7df..11efe25 100644
--- a/frontend/.vscode/extensions.json
+++ b/frontend/.vscode/extensions.json
@@ -1,7 +1,3 @@
 {
-	"recommendations": [
-		"svelte.svelte-vscode",
-		"bradlc.vscode-tailwindcss",
-		"esbenp.prettier-vscode"
-	]
+	"recommendations": ["svelte.svelte-vscode", "bradlc.vscode-tailwindcss", "esbenp.prettier-vscode"]
 }
diff --git a/frontend/prettier.config.js b/frontend/prettier.config.js
index 6782675..5dc395d 100644
--- a/frontend/prettier.config.js
+++ b/frontend/prettier.config.js
@@ -3,11 +3,11 @@ const config = {
 	useTabs: true,
 	tabWidth: 4,
 	singleQuote: true,
-	trailingComma: 'none',
+	trailingComma: "none",
 	printWidth: 100,
-	plugins: ['prettier-plugin-svelte', 'prettier-plugin-tailwindcss'],
-	overrides: [{ files: '*.svelte', options: { parser: 'svelte' } }],
-	tailwindStylesheet: './src/routes/layout.css'
+	plugins: ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	overrides: [{ files: "*.svelte", options: { parser: "svelte" } }],
+	tailwindStylesheet: "./src/routes/layout.css"
 };
 
 export default config;
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
index 1f16ac4..8eb8b69 100644
--- a/frontend/src/app.d.ts
+++ b/frontend/src/app.d.ts
@@ -2,7 +2,7 @@ import type { UserModel } from "@/utils";
 import type PocketBase from "pocketbase";
 
 type AuthModel = {
-    [key: string]: any;
+	[key: string]: any;
 } | null;
 
 // See https://svelte.dev/docs/kit/types#app.d.ts
@@ -11,8 +11,8 @@ declare global {
 	namespace App {
 		// interface Error {}
 		interface Locals {
-			pb: PocketBase,
-			user?: UserModel | undefined
+			pb: PocketBase;
+			user?: UserModel | undefined;
 		}
 		// interface PageData {}
 		// interface PageState {}
diff --git a/frontend/src/app.html b/frontend/src/app.html
index 0e9cc73..534acd7 100644
--- a/frontend/src/app.html
+++ b/frontend/src/app.html
@@ -3,9 +3,12 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<link rel="preconnect" href="https://fonts.googleapis.com">
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap" rel="stylesheet">
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap"
+			rel="stylesheet"
+		/>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover" class="font-sans antialiased bg-background">
diff --git a/frontend/src/cal.css b/frontend/src/cal.css
index 384df77..e3b2150 100644
--- a/frontend/src/cal.css
+++ b/frontend/src/cal.css
@@ -4,142 +4,142 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: oklch(18.22% 0.00002 271.152);
-  --foreground: oklch(0.24 0 0);;
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+	--background: oklch(18.22% 0.00002 271.152);
+	--foreground: oklch(0.24 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--destructive-foreground: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--radius: 0.625rem;
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.145 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.145 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --ring: oklch(0.439 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.145 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.145 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.985 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.396 0.141 25.723);
+	--destructive-foreground: oklch(0.637 0.237 25.331);
+	--border: oklch(0.269 0 0);
+	--input: oklch(0.269 0 0);
+	--ring: oklch(0.439 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(0.269 0 0);
+	--sidebar-ring: oklch(0.439 0 0);
 }
 
 @theme inline {
-  --font-sans: "Geist", "Geist Fallback";
-  --font-mono: "Geist Mono", "Geist Mono Fallback";
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+	--font-sans: "Geist", "Geist Fallback";
+	--font-mono: "Geist Mono", "Geist Mono Fallback";
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
 }
 
 @layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
 }
 
 @layer utilities {
-  ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
+	::-webkit-scrollbar {
+		width: 8px;
+		height: 8px;
+	}
 
-  ::-webkit-scrollbar-track {
-    background: #0a0a0a;
-  }
+	::-webkit-scrollbar-track {
+		background: #0a0a0a;
+	}
 
-  ::-webkit-scrollbar-thumb {
-    background: #333;
-    border-radius: 4px;
-  }
+	::-webkit-scrollbar-thumb {
+		background: #333;
+		border-radius: 4px;
+	}
 
-  ::-webkit-scrollbar-thumb:hover {
-    background: #444;
-  }
+	::-webkit-scrollbar-thumb:hover {
+		background: #444;
+	}
 }
diff --git a/frontend/src/hooks.server.ts b/frontend/src/hooks.server.ts
index db50bd4..ff4ba70 100644
--- a/frontend/src/hooks.server.ts
+++ b/frontend/src/hooks.server.ts
@@ -4,30 +4,31 @@ import type { UserModel } from "@/utils";
 
 config();
 
-export async function handle ({ event, resolve }) {
-    event.locals.pb = new PocketBase(process.env["PB_URL"]);
-    // event.locals.pb.authStore.save(process.env.POCKETBASE_TOKEN!, null);
-    event.locals.pb.authStore.clear();
-
-    const authCookie = event.cookies.get("pb_auth");
-
-    if (authCookie) {
-        try {
-            event.locals.pb.authStore.loadFromCookie(authCookie);
-            
-            event.locals.pb.authStore.isValid && await event.locals.pb.collection('users').authRefresh();
-
-            if (event.locals.pb.authStore.isValid) {
-                event.locals.user = structuredClone(event.locals.pb.authStore.record) as UserModel;
-            } else {
-                event.locals.user = undefined;
-            }
-        } catch (_) {
-            event.locals.pb.authStore.clear();
-        }
-    }
-
-    const response = await resolve(event);
-
-    return response;
-}
\ No newline at end of file
+export async function handle({ event, resolve }) {
+	event.locals.pb = new PocketBase(process.env["PB_URL"]);
+	// event.locals.pb.authStore.save(process.env.POCKETBASE_TOKEN!, null);
+	event.locals.pb.authStore.clear();
+
+	const authCookie = event.cookies.get("pb_auth");
+
+	if (authCookie) {
+		try {
+			event.locals.pb.authStore.loadFromCookie(authCookie);
+
+			event.locals.pb.authStore.isValid &&
+				(await event.locals.pb.collection("users").authRefresh());
+
+			if (event.locals.pb.authStore.isValid) {
+				event.locals.user = structuredClone(event.locals.pb.authStore.record) as UserModel;
+			} else {
+				event.locals.user = undefined;
+			}
+		} catch (_) {
+			event.locals.pb.authStore.clear();
+		}
+	}
+
+	const response = await resolve(event);
+
+	return response;
+}
diff --git a/frontend/src/lib/ACalToAdd.svelte b/frontend/src/lib/ACalToAdd.svelte
index 9d3bdcf..41fb0f3 100644
--- a/frontend/src/lib/ACalToAdd.svelte
+++ b/frontend/src/lib/ACalToAdd.svelte
@@ -1,28 +1,31 @@
 <script lang="ts">
-    import type { CalendarDBModel } from "./cal.utils";
+	import type { CalendarDBModel } from "./cal.utils";
 
-    let {
-        calendar,
-        addToCalsToAdd
-    }: {
-        calendar: CalendarDBModel,
-        addToCalsToAdd: (event: Event, calId: string) => unknown
-    } = $props();
+	let {
+		calendar,
+		addToCalsToAdd
+	}: {
+		calendar: CalendarDBModel;
+		addToCalsToAdd: (event: Event, calId: string) => unknown;
+	} = $props();
 
-    let checked = $state(false);
+	let checked = $state(false);
 </script>
 
-<div class="w-full border rounded {checked ? "border-green-400" : ""}">
-    <input
-        type="checkbox"
-        name="caltoadd{calendar.id}"
-        id="caltoadd{calendar.id}"
-        class="sr-only"
-        bind:checked={checked}
-        onchange={(event) => addToCalsToAdd(event, calendar.id)}
-    />
-    <label for="caltoadd{calendar.id}" class="w-full h-full p-2 flex items-center gap-2 cursor-pointer">
-        <div class="dot w-3 h-3 {checked ? "bg-green-600" : "bg-accent"} rounded-xl"></div>
-        {calendar.name}
-    </label>
-</div>
\ No newline at end of file
+<div class="w-full border rounded {checked ? 'border-green-400' : ''}">
+	<input
+		type="checkbox"
+		name="caltoadd{calendar.id}"
+		id="caltoadd{calendar.id}"
+		class="sr-only"
+		bind:checked
+		onchange={(event) => addToCalsToAdd(event, calendar.id)}
+	/>
+	<label
+		for="caltoadd{calendar.id}"
+		class="w-full h-full p-2 flex items-center gap-2 cursor-pointer"
+	>
+		<div class="dot w-3 h-3 {checked ? 'bg-green-600' : 'bg-accent'} rounded-xl"></div>
+		{calendar.name}
+	</label>
+</div>
diff --git a/frontend/src/lib/AnIncludedCalendar.svelte b/frontend/src/lib/AnIncludedCalendar.svelte
index b3e794c..18e2701 100644
--- a/frontend/src/lib/AnIncludedCalendar.svelte
+++ b/frontend/src/lib/AnIncludedCalendar.svelte
@@ -1,75 +1,88 @@
 <script lang="ts">
-    import { Shield, CalendarDays, TriangleAlert, X } from "@lucide/svelte";
-    import * as Tooltip from "$lib/components/ui/tooltip/index.js";
-    import { type CalendarDBModel } from "@/cal.utils";
-    import { Button } from "@/components/ui/button";
+	import { Shield, CalendarDays, TriangleAlert, X } from "@lucide/svelte";
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import { type CalendarDBModel } from "@/cal.utils";
+	import { Button } from "@/components/ui/button";
 
-    let { 
-        calendarId,
-        calendars,
-        pb_url,
-        removeAdditionalCalendar
-    }: {
-        pb_url: string,
-        calendarId: string,
-        calendars: CalendarDBModel[],
-        removeAdditionalCalendar: (id: string) => unknown
-    } = $props();
+	let {
+		calendarId,
+		calendars,
+		pb_url,
+		removeAdditionalCalendar
+	}: {
+		pb_url: string;
+		calendarId: string;
+		calendars: CalendarDBModel[];
+		removeAdditionalCalendar: (id: string) => unknown;
+	} = $props();
 
-    let actualCalendar = $derived(calendars.find((cal) => cal.id === calendarId))
+	let actualCalendar = $derived(calendars.find((cal) => cal.id === calendarId));
 </script>
 
 {#if actualCalendar}
-    <div class="flex items-center gap-4 rounded-lg border border-border p-4">
-        {#if actualCalendar.logo}
-            <div class="relative group">
-                <img
-                    src="{pb_url}/api/files/{actualCalendar.collectionId}/{actualCalendar.id}/{actualCalendar.logo}"
-                    alt="IFeed Avatar"
-                    class="w-10 h-10 rounded-lg object-cover border-2 border-border overflow-hidden"
-                />
-            </div>
-        {:else}
-            <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10">
-                <CalendarDays class="h-5 w-5 text-violet-500" />
-            </div>
-        {/if}
-        
-        <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2">
-                <a href="/dashboard/calendars/{calendarId}"><h4 class="font-medium truncate underline">{actualCalendar.name}</h4></a>
-                {#if !actualCalendar.filters.hideUnpublished}
-                    <div class="flex items-center gap-1 text-xs text-muted-foreground">
-                        <span>•</span>
-                        <Tooltip.Provider>
-                            <Tooltip.Root>
-                                <Tooltip.Trigger>
-                                    <TriangleAlert class="h-4 w-4 text-yellow-600" />
-                                </Tooltip.Trigger>
-                                <Tooltip.Content>This calendar can expose unpublished events. To change this, edit the filter settings of this calendar.</Tooltip.Content>
-                            </Tooltip.Root>
-                        </Tooltip.Provider>
-                    </div>
-                {/if}
-                {#if actualCalendar.passwordEnabled}
-                    <div class="flex items-center gap-1 text-xs text-muted-foreground">
-                        <span>•</span>
-                        <Tooltip.Provider>
-                            <Tooltip.Root>
-                                <Tooltip.Trigger>
-                                    <Shield class="h-4 w-4 text-yellow-600" />
-                                </Tooltip.Trigger>
-                                <Tooltip.Content>This calendar is password protected, but wont require a password in this image feed. If you dont want this calendar exposed without a password block, remove this calendar immediently!</Tooltip.Content>
-                            </Tooltip.Root>
-                        </Tooltip.Provider>
-                    </div>
-                {/if}
-            </div>
-            <p class="text-sm text-muted-foreground">
-                {actualCalendar.visits} visits
-            </p>
-        </div>
+	<div class="flex items-center gap-4 rounded-lg border border-border p-4">
+		{#if actualCalendar.logo}
+			<div class="relative group">
+				<img
+					src="{pb_url}/api/files/{actualCalendar.collectionId}/{actualCalendar.id}/{actualCalendar.logo}"
+					alt="IFeed Avatar"
+					class="w-10 h-10 rounded-lg object-cover border-2 border-border overflow-hidden"
+				/>
+			</div>
+		{:else}
+			<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-violet-500/10">
+				<CalendarDays class="h-5 w-5 text-violet-500" />
+			</div>
+		{/if}
 
-        <Button variant="outline" title="Remove Calendar" onclick={() => removeAdditionalCalendar(calendarId)}><X /></Button>
-    </div>
-{/if}
\ No newline at end of file
+		<div class="flex-1 min-w-0">
+			<div class="flex items-center gap-2">
+				<a href="/dashboard/calendars/{calendarId}"
+					><h4 class="font-medium truncate underline">{actualCalendar.name}</h4></a
+				>
+				{#if !actualCalendar.filters.hideUnpublished}
+					<div class="flex items-center gap-1 text-xs text-muted-foreground">
+						<span>•</span>
+						<Tooltip.Provider>
+							<Tooltip.Root>
+								<Tooltip.Trigger>
+									<TriangleAlert class="h-4 w-4 text-yellow-600" />
+								</Tooltip.Trigger>
+								<Tooltip.Content
+									>This calendar can expose unpublished events. To change this, edit the filter
+									settings of this calendar.</Tooltip.Content
+								>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+					</div>
+				{/if}
+				{#if actualCalendar.passwordEnabled}
+					<div class="flex items-center gap-1 text-xs text-muted-foreground">
+						<span>•</span>
+						<Tooltip.Provider>
+							<Tooltip.Root>
+								<Tooltip.Trigger>
+									<Shield class="h-4 w-4 text-yellow-600" />
+								</Tooltip.Trigger>
+								<Tooltip.Content
+									>This calendar is password protected, but wont require a password in this image
+									feed. If you dont want this calendar exposed without a password block, remove this
+									calendar immediently!</Tooltip.Content
+								>
+							</Tooltip.Root>
+						</Tooltip.Provider>
+					</div>
+				{/if}
+			</div>
+			<p class="text-sm text-muted-foreground">
+				{actualCalendar.visits} visits
+			</p>
+		</div>
+
+		<Button
+			variant="outline"
+			title="Remove Calendar"
+			onclick={() => removeAdditionalCalendar(calendarId)}><X /></Button
+		>
+	</div>
+{/if}
diff --git a/frontend/src/lib/Calendar.svelte b/frontend/src/lib/Calendar.svelte
index 17fddf0..25915aa 100644
--- a/frontend/src/lib/Calendar.svelte
+++ b/frontend/src/lib/Calendar.svelte
@@ -1,74 +1,110 @@
 <script lang="ts">
-    import { getEventsForCalendar } from "../routes/cal/[slug]/eventFetch.remote";
-    import type { CalendarCustomizations, CalendarFilters } from "./cal.utils";
-    import MonthCalView from "./calendar/monthView/MonthCalView.svelte";
-    import WeekCalView from "./calendar/weekView/WeekCalView.svelte";
-    import type { EventDBModelExpanded } from "./event.utils";
-    import { Temporal } from 'temporal-polyfill';
-    import { onMount } from "svelte";
-    import Day from "./Day.svelte";
+	import { getEventsForCalendar } from "../routes/cal/[slug]/eventFetch.remote";
+	import type { CalendarCustomizations, CalendarFilters } from "./cal.utils";
+	import MonthCalView from "./calendar/monthView/MonthCalView.svelte";
+	import WeekCalView from "./calendar/weekView/WeekCalView.svelte";
+	import type { EventDBModelExpanded } from "./event.utils";
+	import { Temporal } from "temporal-polyfill";
+	import { onMount } from "svelte";
+	import Day from "./Day.svelte";
 
-    let {
-        calId,
-        events,
-        displaySettings,
-        timeZone,
-        filters,
-        autoUpdate = true,
-        fontScale = 1
-    }: {
-        events: EventDBModelExpanded[],
-        displaySettings: CalendarCustomizations,
-        timeZone: Temporal.TimeZoneLike,
-        filters: CalendarFilters,
-        autoUpdate?: boolean,
-        fontScale?: number
-        calId: string
-    } = $props();
+	let {
+		calId,
+		events,
+		displaySettings,
+		timeZone,
+		filters,
+		autoUpdate = true,
+		fontScale = 1
+	}: {
+		events: EventDBModelExpanded[];
+		displaySettings: CalendarCustomizations;
+		timeZone: Temporal.TimeZoneLike;
+		filters: CalendarFilters;
+		autoUpdate?: boolean;
+		fontScale?: number;
+		calId: string;
+	} = $props();
 
-    let calendarCustomizations: CalendarCustomizations = $derived(displaySettings);
+	let calendarCustomizations: CalendarCustomizations = $derived(displaySettings);
 
-    let today = $derived(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
+	let today = $derived(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
 
-    let tomorrow = $derived(Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 1 }).startOfDay());
-    let thirdDay = $derived(Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 2 }).startOfDay());
-    let currentTimeZone = $derived(timeZone);
+	let tomorrow = $derived(Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 1 }).startOfDay());
+	let thirdDay = $derived(Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 2 }).startOfDay());
+	let currentTimeZone = $derived(timeZone);
 
-    function updatePage() {
-        console.log("Updating Page.");
-        today = Temporal.Now.zonedDateTimeISO(timeZone).startOfDay();
-        tomorrow = Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 1 }).startOfDay();
-        thirdDay = Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 2 }).startOfDay();
+	function updatePage() {
+		console.log("Updating Page.");
+		today = Temporal.Now.zonedDateTimeISO(timeZone).startOfDay();
+		tomorrow = Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 1 }).startOfDay();
+		thirdDay = Temporal.Now.zonedDateTimeISO(timeZone).add({ days: 2 }).startOfDay();
 
-        getEventsForCalendar(calId).refresh();
-    }
+		getEventsForCalendar(calId).refresh();
+	}
 
-    $effect(() => {
-        if (currentTimeZone !== timeZone) {
-            updatePage();
-            currentTimeZone = timeZone;
-        }
-    });
+	$effect(() => {
+		if (currentTimeZone !== timeZone) {
+			updatePage();
+			currentTimeZone = timeZone;
+		}
+	});
 
-    onMount(() => {
-        const updater = autoUpdate ? setInterval(updatePage, 20000) : undefined;
+	onMount(() => {
+		const updater = autoUpdate ? setInterval(updatePage, 20000) : undefined;
 
-        return () => {
-            clearInterval(updater);
-        }
-    });
+		return () => {
+			clearInterval(updater);
+		};
+	});
 </script>
 
 {#if calendarCustomizations.viewType === "month"}
-    <MonthCalView {events} currentDate={today} timeZone={currentTimeZone} {calendarCustomizations} {fontScale} />
+	<MonthCalView
+		{events}
+		currentDate={today}
+		timeZone={currentTimeZone}
+		{calendarCustomizations}
+		{fontScale}
+	/>
 {:else if calendarCustomizations.viewType === "week"}
-    <WeekCalView {events} currentDate={today} timeZone={currentTimeZone} {calendarCustomizations} {fontScale} />
+	<WeekCalView
+		{events}
+		currentDate={today}
+		timeZone={currentTimeZone}
+		{calendarCustomizations}
+		{fontScale}
+	/>
 {:else}
-    <div class="dark mx-auto p-6">
-        <div class="dark grid grid-cols-1 gap-6 lg:grid-cols-3">
-            <Day dayNumber={1} events={events} {timeZone} {calendarCustomizations} {filters} {fontScale} day={today} />
-            <Day dayNumber={2} events={events} {timeZone} {calendarCustomizations} {filters} {fontScale} day={tomorrow} />
-            <Day dayNumber={3} events={events} {timeZone} {calendarCustomizations} {filters} {fontScale} day={thirdDay} />
-        </div>
-    </div>
-{/if}
\ No newline at end of file
+	<div class="dark mx-auto p-6">
+		<div class="dark grid grid-cols-1 gap-6 lg:grid-cols-3">
+			<Day
+				dayNumber={1}
+				{events}
+				{timeZone}
+				{calendarCustomizations}
+				{filters}
+				{fontScale}
+				day={today}
+			/>
+			<Day
+				dayNumber={2}
+				{events}
+				{timeZone}
+				{calendarCustomizations}
+				{filters}
+				{fontScale}
+				day={tomorrow}
+			/>
+			<Day
+				dayNumber={3}
+				{events}
+				{timeZone}
+				{calendarCustomizations}
+				{filters}
+				{fontScale}
+				day={thirdDay}
+			/>
+		</div>
+	</div>
+{/if}
diff --git a/frontend/src/lib/Day.svelte b/frontend/src/lib/Day.svelte
index ef0e466..763ac11 100644
--- a/frontend/src/lib/Day.svelte
+++ b/frontend/src/lib/Day.svelte
@@ -1,36 +1,55 @@
 <script lang="ts">
-    import { type CalendarCustomizations, type CalendarFilters } from "./cal.utils";
-    import { dateRangeOverlaps, LONGDAYTOSTRING, MONTHTOSTRING } from "./utils";
-    import { type EventDBModelExpanded } from "./event.utils";
-    import { Temporal } from "temporal-polyfill";
-    import Event from "./Event.svelte";
+	import { type CalendarCustomizations, type CalendarFilters } from "./cal.utils";
+	import { dateRangeOverlaps, LONGDAYTOSTRING, MONTHTOSTRING } from "./utils";
+	import { type EventDBModelExpanded } from "./event.utils";
+	import { Temporal } from "temporal-polyfill";
+	import Event from "./Event.svelte";
 
-    let { events, day, dayNumber, calendarCustomizations, timeZone, filters, fontScale }: { events: EventDBModelExpanded[], day: Temporal.ZonedDateTime, dayNumber: number, calendarCustomizations: CalendarCustomizations, timeZone: Temporal.TimeZoneLike, filters: CalendarFilters, fontScale: number } = $props();
+	let {
+		events,
+		day,
+		dayNumber,
+		calendarCustomizations,
+		timeZone,
+		filters,
+		fontScale
+	}: {
+		events: EventDBModelExpanded[];
+		day: Temporal.ZonedDateTime;
+		dayNumber: number;
+		calendarCustomizations: CalendarCustomizations;
+		timeZone: Temporal.TimeZoneLike;
+		filters: CalendarFilters;
+		fontScale: number;
+	} = $props();
 
-    let nextDay = $derived(day.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
+	let nextDay = $derived(day.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
 </script>
 
 <div class="dark flex flex-col gap-4">
-    <div class="dark flex flex-col gap-1">
-        <div class="dark font-medium text-muted-foreground" style="font-size: {fontScale * 14}px;">
-            {#if dayNumber === 1}
-                Today
-            {:else if dayNumber === 2}
-                Tomorrow
-            {:else if dayNumber === 3}
-                Day after Tomorrow
-            {/if}
-        </div>
-        <div class="dark font-semibold text-accent" style="font-size: {fontScale * 20}px;">{LONGDAYTOSTRING[day.dayOfWeek]}, {MONTHTOSTRING[day.month]} {day.day}</div>
-    </div>
+	<div class="dark flex flex-col gap-1">
+		<div class="dark font-medium text-muted-foreground" style="font-size: {fontScale * 14}px;">
+			{#if dayNumber === 1}
+				Today
+			{:else if dayNumber === 2}
+				Tomorrow
+			{:else if dayNumber === 3}
+				Day after Tomorrow
+			{/if}
+		</div>
+		<div class="dark font-semibold text-accent" style="font-size: {fontScale * 20}px;">
+			{LONGDAYTOSTRING[day.dayOfWeek]}, {MONTHTOSTRING[day.month]}
+			{day.day}
+		</div>
+	</div>
 
-    <div class="dark flex flex-col gap-4">
-        {#each events as event (`eventListDat${day.toString()}${event.id}`)}
-            {#if !(!event.featured && filters.onlyShowFeatured) && !(!event.visibleInChurchCenter && filters.hideUnpublished)}
-                {#if dateRangeOverlaps(day.toInstant().epochMilliseconds, nextDay.toInstant().epochMilliseconds, (new Date(event.startTime)).valueOf(), (new Date(event.endTime)).valueOf())}
-                    <Event {calendarCustomizations} {event} {timeZone} currentDay={day} {fontScale} />
-                {/if}
-            {/if}
-        {/each}
-    </div>
-</div>
\ No newline at end of file
+	<div class="dark flex flex-col gap-4">
+		{#each events as event (`eventListDat${day.toString()}${event.id}`)}
+			{#if !(!event.featured && filters.onlyShowFeatured) && !(!event.visibleInChurchCenter && filters.hideUnpublished)}
+				{#if dateRangeOverlaps(day.toInstant().epochMilliseconds, nextDay.toInstant().epochMilliseconds, new Date(event.startTime).valueOf(), new Date(event.endTime).valueOf())}
+					<Event {calendarCustomizations} {event} {timeZone} currentDay={day} {fontScale} />
+				{/if}
+			{/if}
+		{/each}
+	</div>
+</div>
diff --git a/frontend/src/lib/DynamicFeedAvatar.svelte b/frontend/src/lib/DynamicFeedAvatar.svelte
index d6a035f..e0ddd94 100644
--- a/frontend/src/lib/DynamicFeedAvatar.svelte
+++ b/frontend/src/lib/DynamicFeedAvatar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { Link2 } from "@lucide/svelte";
+	import { Link2 } from "@lucide/svelte";
 
-    let { small = false }: { small?: boolean } = $props();
+	let { small = false }: { small?: boolean } = $props();
 </script>
 
 <div class="w-full h-full rounded-lg flex items-center justify-center bg-pink-500/10">
-    <Link2 class="{small ? "h-4 w-4" : "h-7 w-7"} text-pink-400" />
-</div>
\ No newline at end of file
+	<Link2 class="{small ? 'h-4 w-4' : 'h-7 w-7'} text-pink-400" />
+</div>
diff --git a/frontend/src/lib/Event.svelte b/frontend/src/lib/Event.svelte
index 7d71b4b..e887b43 100644
--- a/frontend/src/lib/Event.svelte
+++ b/frontend/src/lib/Event.svelte
@@ -1,103 +1,173 @@
 <script lang="ts">
-    import { CalendarPlus, ClipboardClock, Clock, MapPin } from "@lucide/svelte";
-    import { type CalendarCustomizations } from "./cal.utils";
-    import { type EventDBModelExpanded } from "./event.utils";
-    import EventResources from "./EventResources.svelte";
-    import EventTimes from "./EventTimes.svelte";
-    import { Temporal } from "temporal-polyfill";
-    import { MONTHTOSTRING } from "./utils";
-    import Time from "./Time.svelte";
-
-    let { event, currentDay, calendarCustomizations, timeZone, fontScale }: { event: EventDBModelExpanded, currentDay: Temporal.ZonedDateTime, calendarCustomizations: CalendarCustomizations, timeZone: Temporal.TimeZoneLike, fontScale: number } = $props();
-
-    const start = $derived(Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone));
-    const end = $derived(Temporal.Instant.from(event.endTime).toZonedDateTimeISO(timeZone));
-
-    const hours = $derived(start.until(end, { largestUnit: "hours" }).total({ unit: "hours" }));
-
-    // const EVENT_DAY_NUMBER = $derived(currentDay.getDate() - start.getDate() + 1);
-
-    const EVENT_DAY_NUMBER = $derived(Math.ceil(Math.abs((currentDay ? currentDay.toInstant().epochMilliseconds : 0) - start.startOfDay().toInstant().epochMilliseconds) / (1000 * 60 * 60 * 24)+1));
-    const MULTI_DAY_EVENT = $derived(hours === 24 ? start.hour !== 0 : hours > 24);
-
-    function getContrastYIQ(hexColor: string) {
-        // Remove '#' if present
-        hexColor = hexColor.replace(/^#/, '');
-
-        // Parse r, g, b values
-        const r = parseInt(hexColor.substr(0, 2), 16);
-        const g = parseInt(hexColor.substr(2, 2), 16);
-        const b = parseInt(hexColor.substr(4, 2), 16);
-
-        // YIQ formula
-        const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-
-        // Return black or white text
-        return yiq >= 128 ? '#000000' : '#FFFFFF';
-    }
+	import { CalendarPlus, ClipboardClock, Clock, MapPin } from "@lucide/svelte";
+	import { type CalendarCustomizations } from "./cal.utils";
+	import { type EventDBModelExpanded } from "./event.utils";
+	import EventResources from "./EventResources.svelte";
+	import EventTimes from "./EventTimes.svelte";
+	import { Temporal } from "temporal-polyfill";
+	import { MONTHTOSTRING } from "./utils";
+	import Time from "./Time.svelte";
+
+	let {
+		event,
+		currentDay,
+		calendarCustomizations,
+		timeZone,
+		fontScale
+	}: {
+		event: EventDBModelExpanded;
+		currentDay: Temporal.ZonedDateTime;
+		calendarCustomizations: CalendarCustomizations;
+		timeZone: Temporal.TimeZoneLike;
+		fontScale: number;
+	} = $props();
+
+	const start = $derived(Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone));
+	const end = $derived(Temporal.Instant.from(event.endTime).toZonedDateTimeISO(timeZone));
+
+	const hours = $derived(start.until(end, { largestUnit: "hours" }).total({ unit: "hours" }));
+
+	// const EVENT_DAY_NUMBER = $derived(currentDay.getDate() - start.getDate() + 1);
+
+	const EVENT_DAY_NUMBER = $derived(
+		Math.ceil(
+			Math.abs(
+				(currentDay ? currentDay.toInstant().epochMilliseconds : 0) -
+					start.startOfDay().toInstant().epochMilliseconds
+			) /
+				(1000 * 60 * 60 * 24) +
+				1
+		)
+	);
+	const MULTI_DAY_EVENT = $derived(hours === 24 ? start.hour !== 0 : hours > 24);
+
+	function getContrastYIQ(hexColor: string) {
+		// Remove '#' if present
+		hexColor = hexColor.replace(/^#/, "");
+
+		// Parse r, g, b values
+		const r = parseInt(hexColor.substr(0, 2), 16);
+		const g = parseInt(hexColor.substr(2, 2), 16);
+		const b = parseInt(hexColor.substr(4, 2), 16);
+
+		// YIQ formula
+		const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+
+		// Return black or white text
+		return yiq >= 128 ? "#000000" : "#FFFFFF";
+	}
 </script>
 
-<div class="dark rounded-lg bg-foreground p-4 flex flex-col gap-2" style="border: 1px solid #333333">
-    <div class="dark flex items-start justify-between">
-        <h3 class="dark font-semibold text-white pr-2" style="font-size: {fontScale * 18}px;">{event.name}</h3>
-        <p class="dark text-gray-400" style="white-space: nowrap;font-size: {fontScale * 14}px;">{#if EVENT_DAY_NUMBER !== 1}{MONTHTOSTRING[start.month]} {start.day}, {/if} <Time date={start} useAMPM={calendarCustomizations.useAMPM} /></p>
-    </div>
-
-    {#if event.description && calendarCustomizations.showDescription}
-        <p class="text-gray-300 leading-relaxed" style="font-size: {fontScale * 14}px;">{event.description}</p>
-    {/if}
-    
-    <div class="flex items-center gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
-        <Clock class="h-4 w-4" />
-        {#if MULTI_DAY_EVENT}
-            <span class="text-gray-300">{MONTHTOSTRING[start.month]} {start.day}, <Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {MONTHTOSTRING[end.month]} {end.day}, <Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span>
-        {:else}
-            <span class="text-gray-300"><Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {#if hours === 24 && start.hour === 0}{MONTHTOSTRING[end.month]} {end.day}, {/if} <Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span>
-        {/if}
-    </div>
-
-    {#if MULTI_DAY_EVENT}
-        <div class="flex items-center gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
-            <CalendarPlus class="h-4 w-4" />
-            <span class="text-gray-300">Multi-day event - Day {EVENT_DAY_NUMBER}</span>
-        </div>
-    {/if}
-
-    <EventResources resources={event.expand.resources} showResourcePathname={calendarCustomizations.showResourcePathname} showRooms={calendarCustomizations.showRooms} showResources={calendarCustomizations.showResources} {fontScale} />
-
-    {#if event.times && event.times.length > 1}
-        <div class="mb-3 flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
-            <ClipboardClock class="h-4 w-4 mt-0.5 shrink-0" />
-            <div>
-                <div class="text-gray-400">Time Schedule:</div>
-                <div class="text-gray-300">
-                    {#each event.times as time, index (`anEventTime${time.name}${event.id}`)}
-                        <EventTimes {timeZone} today={currentDay} useAMPM={calendarCustomizations.useAMPM} {time} multiDayEvent={MULTI_DAY_EVENT} />{#if index+1 < event.times.length},<br>{/if}
-                    {/each}
-                </div>
-            </div>
-        </div>
-    {/if}
-
-    {#if event.location && calendarCustomizations.showLocation}
-        <div class="flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
-            <MapPin class="h-4 w-4 mt-0.5 shrink-0" />
-            <p>
-                <span class="text-gray-400">Location:</span>
-                <span class="text-gray-300">{#if calendarCustomizations.onlyShowLocationTitle}{event.location.split(" - ")[0]}{:else}{event.location}{/if}</span>
-            </p>
-        </div>
-    {/if}
-
-    {#if event.expand.tags}
-        <div class="flex h-fit gap-2">
-            {#each event.expand.tags as tag (`taglist${tag.tag_id}${event.id}`)}
-                <div style="background-color: #ffffff;word-wrap:break-word;white-space: nowrap;text-overflow: ellipsis;" class="rounded">
-                    <span class="rounded px-2 py-1 font-medium" style="font-size: {fontScale * 12}px;background-color: {tag.color}cc;border: 1px solid {tag.color};color: {getContrastYIQ(tag.color)};">
-                        {tag.name}
-                    </span>
-                </div>
-            {/each}
-        </div>
-    {/if}
-</div>
\ No newline at end of file
+<div
+	class="dark rounded-lg bg-foreground p-4 flex flex-col gap-2"
+	style="border: 1px solid #333333"
+>
+	<div class="dark flex items-start justify-between">
+		<h3 class="dark font-semibold text-white pr-2" style="font-size: {fontScale * 18}px;">
+			{event.name}
+		</h3>
+		<p class="dark text-gray-400" style="white-space: nowrap;font-size: {fontScale * 14}px;">
+			{#if EVENT_DAY_NUMBER !== 1}{MONTHTOSTRING[start.month]} {start.day},
+			{/if}
+			<Time date={start} useAMPM={calendarCustomizations.useAMPM} />
+		</p>
+	</div>
+
+	{#if event.description && calendarCustomizations.showDescription}
+		<p class="text-gray-300 leading-relaxed" style="font-size: {fontScale * 14}px;">
+			{event.description}
+		</p>
+	{/if}
+
+	<div class="flex items-center gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
+		<Clock class="h-4 w-4" />
+		{#if MULTI_DAY_EVENT}
+			<span class="text-gray-300"
+				>{MONTHTOSTRING[start.month]}
+				{start.day}, <Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {MONTHTOSTRING[
+					end.month
+				]}
+				{end.day}, <Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span
+			>
+		{:else}
+			<span class="text-gray-300"
+				><Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {#if hours === 24 && start.hour === 0}{MONTHTOSTRING[
+						end.month
+					]}
+					{end.day},
+				{/if}
+				<Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span
+			>
+		{/if}
+	</div>
+
+	{#if MULTI_DAY_EVENT}
+		<div class="flex items-center gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
+			<CalendarPlus class="h-4 w-4" />
+			<span class="text-gray-300">Multi-day event - Day {EVENT_DAY_NUMBER}</span>
+		</div>
+	{/if}
+
+	<EventResources
+		resources={event.expand.resources}
+		showResourcePathname={calendarCustomizations.showResourcePathname}
+		showRooms={calendarCustomizations.showRooms}
+		showResources={calendarCustomizations.showResources}
+		{fontScale}
+	/>
+
+	{#if event.times && event.times.length > 1}
+		<div class="mb-3 flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
+			<ClipboardClock class="h-4 w-4 mt-0.5 shrink-0" />
+			<div>
+				<div class="text-gray-400">Time Schedule:</div>
+				<div class="text-gray-300">
+					{#each event.times as time, index (`anEventTime${time.name}${event.id}`)}
+						<EventTimes
+							{timeZone}
+							today={currentDay}
+							useAMPM={calendarCustomizations.useAMPM}
+							{time}
+							multiDayEvent={MULTI_DAY_EVENT}
+						/>{#if index + 1 < event.times.length},<br />{/if}
+					{/each}
+				</div>
+			</div>
+		</div>
+	{/if}
+
+	{#if event.location && calendarCustomizations.showLocation}
+		<div class="flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
+			<MapPin class="h-4 w-4 mt-0.5 shrink-0" />
+			<p>
+				<span class="text-gray-400">Location:</span>
+				<span class="text-gray-300"
+					>{#if calendarCustomizations.onlyShowLocationTitle}{event.location.split(
+							" - "
+						)[0]}{:else}{event.location}{/if}</span
+				>
+			</p>
+		</div>
+	{/if}
+
+	{#if event.expand.tags}
+		<div class="flex h-fit gap-2">
+			{#each event.expand.tags as tag (`taglist${tag.tag_id}${event.id}`)}
+				<div
+					style="background-color: #ffffff;word-wrap:break-word;white-space: nowrap;text-overflow: ellipsis;"
+					class="rounded"
+				>
+					<span
+						class="rounded px-2 py-1 font-medium"
+						style="font-size: {fontScale *
+							12}px;background-color: {tag.color}cc;border: 1px solid {tag.color};color: {getContrastYIQ(
+							tag.color
+						)};"
+					>
+						{tag.name}
+					</span>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/EventResources.svelte b/frontend/src/lib/EventResources.svelte
index f0a2f30..e84ef31 100644
--- a/frontend/src/lib/EventResources.svelte
+++ b/frontend/src/lib/EventResources.svelte
@@ -1,48 +1,69 @@
 <script lang="ts">
-    import type { EventDBModelExpanded } from "./event.utils";
-    import { Package,  Warehouse } from "@lucide/svelte";
+	import type { EventDBModelExpanded } from "./event.utils";
+	import { Package, Warehouse } from "@lucide/svelte";
 
-    let { resources, showResourcePathname, showResources, showRooms, fontScale }: { resources: EventDBModelExpanded["expand"]["resources"], showResourcePathname: boolean, showResources: boolean, showRooms: boolean, fontScale: number } = $props();
+	let {
+		resources,
+		showResourcePathname,
+		showResources,
+		showRooms,
+		fontScale
+	}: {
+		resources: EventDBModelExpanded["expand"]["resources"];
+		showResourcePathname: boolean;
+		showResources: boolean;
+		showRooms: boolean;
+		fontScale: number;
+	} = $props();
 
-    let res: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
-    let rooms: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
+	let res: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
+	let rooms: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
 
-    $effect(() => {
-        if (resources && resources !== null) {
-            try {
-                res = resources.filter((resource) => resource.kind === "Resource");
-                rooms = resources.filter((resource) => resource.kind === "Room");
-            } catch(err) {
-                console.log(err);
-            }
-        }
-    });
+	$effect(() => {
+		if (resources && resources !== null) {
+			try {
+				res = resources.filter((resource) => resource.kind === "Resource");
+				rooms = resources.filter((resource) => resource.kind === "Room");
+			} catch (err) {
+				console.log(err);
+			}
+		}
+	});
 </script>
 
 {#if rooms.length > 0 && showRooms}
-    <div class="flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
-        <Warehouse class="h-4 w-4 mt-0.5 shrink-0" />
-        <p>
-            <span class="text-gray-400">Room{#if rooms.length > 1}s{/if}:</span>
-            <span class="text-gray-300">
-                {#each rooms as room, index}
-                    {#if room.path_name}{room.path_name}\\{/if} {room.name}{#if index+1 < rooms.length}, {/if}
-                {/each}
-            </span>
-        </p>
-    </div>
+	<div class="flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
+		<Warehouse class="h-4 w-4 mt-0.5 shrink-0" />
+		<p>
+			<span class="text-gray-400"
+				>Room{#if rooms.length > 1}s{/if}:</span
+			>
+			<span class="text-gray-300">
+				{#each rooms as room, index}
+					{#if room.path_name}{room.path_name}\\{/if}
+					{room.name}{#if index + 1 < rooms.length},
+					{/if}
+				{/each}
+			</span>
+		</p>
+	</div>
 {/if}
 
 {#if res.length > 0 && showResources}
-    <div class="flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
-        <Package class="h-4 w-4 mt-0.5 shrink-0" />
-        <p>
-            <span class="text-gray-400">Resource{#if res.length > 1}s{/if}:</span>
-            <span class="text-gray-300">
-                {#each res as resource, index}
-                    {resource.name}{#if resource.path_name && showResourcePathname}<span class="pl-1">({resource.path_name.trimEnd()})</span>{/if}{#if index+1 < res.length}<span class="pr-1">, </span> {/if}
-                {/each}
-            </span> 
-        </p>
-    </div>
-{/if}
\ No newline at end of file
+	<div class="flex items-start gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
+		<Package class="h-4 w-4 mt-0.5 shrink-0" />
+		<p>
+			<span class="text-gray-400"
+				>Resource{#if res.length > 1}s{/if}:</span
+			>
+			<span class="text-gray-300">
+				{#each res as resource, index}
+					{resource.name}{#if resource.path_name && showResourcePathname}<span class="pl-1"
+							>({resource.path_name.trimEnd()})</span
+						>{/if}{#if index + 1 < res.length}<span class="pr-1">, </span>
+					{/if}
+				{/each}
+			</span>
+		</p>
+	</div>
+{/if}
diff --git a/frontend/src/lib/EventTimes.svelte b/frontend/src/lib/EventTimes.svelte
index affb51e..70920bf 100644
--- a/frontend/src/lib/EventTimes.svelte
+++ b/frontend/src/lib/EventTimes.svelte
@@ -1,13 +1,32 @@
 <script lang="ts">
-    import type { EventTimesType } from "./event.utils";
-    import { Temporal } from "temporal-polyfill";
-    import { MONTHTOSTRING } from "./utils";
-    import Time from "./Time.svelte";
+	import type { EventTimesType } from "./event.utils";
+	import { Temporal } from "temporal-polyfill";
+	import { MONTHTOSTRING } from "./utils";
+	import Time from "./Time.svelte";
 
-    let { time, useAMPM, multiDayEvent, today, timeZone }: { time: EventTimesType, useAMPM: boolean, multiDayEvent: boolean, today: Temporal.ZonedDateTime, timeZone: Temporal.TimeZoneLike } = $props();
+	let {
+		time,
+		useAMPM,
+		multiDayEvent,
+		today,
+		timeZone
+	}: {
+		time: EventTimesType;
+		useAMPM: boolean;
+		multiDayEvent: boolean;
+		today: Temporal.ZonedDateTime;
+		timeZone: Temporal.TimeZoneLike;
+	} = $props();
 
-    let start = $derived(Temporal.Instant.from(time.startTime).toZonedDateTimeISO(timeZone));
-    let end = $derived(Temporal.Instant.from(time.endTime).toZonedDateTimeISO(timeZone));
+	let start = $derived(Temporal.Instant.from(time.startTime).toZonedDateTimeISO(timeZone));
+	let end = $derived(Temporal.Instant.from(time.endTime).toZonedDateTimeISO(timeZone));
 </script>
 
-{time.name}: {#if multiDayEvent && start.day !== today.day}{MONTHTOSTRING[start.month]} {start.day}, {/if} <Time date={start} {useAMPM} /> - {#if multiDayEvent && end.day !== today.day}{MONTHTOSTRING[end.month]} {end.day}, {/if} <Time date={end} {useAMPM} />
+{time.name}: {#if multiDayEvent && start.day !== today.day}{MONTHTOSTRING[start.month]} {start.day},
+{/if}
+<Time date={start} {useAMPM} /> - {#if multiDayEvent && end.day !== today.day}{MONTHTOSTRING[
+		end.month
+	]}
+	{end.day},
+{/if}
+<Time date={end} {useAMPM} />
diff --git a/frontend/src/lib/EverythingSearch.svelte b/frontend/src/lib/EverythingSearch.svelte
index 4e0d27f..f84c81c 100644
--- a/frontend/src/lib/EverythingSearch.svelte
+++ b/frontend/src/lib/EverythingSearch.svelte
@@ -1,171 +1,192 @@
 <script lang="ts">
-    import type { EventListDBModel, ImageFeedDBModel } from "./utils";
-    import Badge from "./components/ui/badge/badge.svelte";
-    import * as Kbd from "$lib/components/ui/kbd/index.js";
-    import type { CalendarDBModel } from "./cal.utils";
-    import { Input } from "@/components/ui/input";
-    import {  Search, } from "@lucide/svelte";
-    import { goto } from "$app/navigation";
-
-    let { 
-        calendars,
-        imageFeeds,
-        eventLists
-    }: {
-        calendars: CalendarDBModel[],
-        imageFeeds: ImageFeedDBModel[],
-        eventLists: EventListDBModel[],
-    } = $props();
-
-    let everythingInput: HTMLInputElement | null = $state(null);
-    let everythingInputFocused = $state(false);
-
-    type FilteredTermsList = ({type: "calendar", data: CalendarDBModel } | { type: "image-feed", data: ImageFeedDBModel } | {type: "event-list", data: EventListDBModel })
-
-    let filteredTerms: FilteredTermsList[] = $state([]);
-    let arrowDownIndex = $state(-1);
-
-    function searchInputChanged(event: Event) {
-        //@ts-ignore
-        const searchTerm = event.target.value.toLowerCase();
-        if (!searchTerm) {
-            filteredTerms = [];
-            return
-        }
-
-        let newFilteredTerms: FilteredTermsList[] = [];
-
-        for (let i=0;i<calendars.length;i++) {
-            const cal = calendars[i];
-            if (!cal) continue
-
-            if (cal.id.toLowerCase().includes(searchTerm) ||
-            cal.name.toLowerCase().includes(searchTerm) ||
-            cal.description.toLowerCase().includes(searchTerm) ||
-            "calendar".includes(searchTerm)) {
-                newFilteredTerms.push({ type: "calendar", data: cal });
-            }
-        }
-
-        for (let i=0;i<imageFeeds.length;i++) {
-            const feed = imageFeeds[i];
-            if (!feed) continue
-
-            if (feed.id.toLowerCase().includes(searchTerm) ||
-            feed.name.toLowerCase().includes(searchTerm) ||
-            feed.description.toLowerCase().includes(searchTerm) ||
-            "image feed".includes(searchTerm)) {
-                newFilteredTerms.push({ type: "image-feed", data: feed });
-            }
-        }
-
-        for (let i=0;i<eventLists.length;i++) {
-            const list = eventLists[i];
-            if (!list) continue
-
-            if (list.id.toLowerCase().includes(searchTerm) ||
-            list.name.toLowerCase().includes(searchTerm) ||
-            list.description.toLowerCase().includes(searchTerm) ||
-            "event list".includes(searchTerm)) {
-                newFilteredTerms.push({ type: "event-list", data: list });
-            }
-        }
-
-        filteredTerms = newFilteredTerms;
-        arrowDownIndex = -1;
-    }
-
-    function resetSearch() {
-        if (everythingInput) {
-            everythingInput.value = "";
-            filteredTerms = [];
-            arrowDownIndex = -1;
-        }
-    }
-
-    function keyDown(event: KeyboardEvent) {
-        if (event.key === "/" && event.ctrlKey && everythingInput && !everythingInputFocused) {
-            event.preventDefault();
-            arrowDownIndex = -1;
-            everythingInput.focus();
-        }
-
-        if (everythingInputFocused && filteredTerms.length > 0) {
-            if (event.key === "ArrowUp") {
-                if (arrowDownIndex === -1 || arrowDownIndex === 1) {
-                    arrowDownIndex = filteredTerms.length;
-                } else {
-                    arrowDownIndex -= 1;
-                }
-            } else if (event.key === "ArrowDown") {
-                if (arrowDownIndex === filteredTerms.length || arrowDownIndex === -1) {
-                    arrowDownIndex = 1;
-                } else {
-                    arrowDownIndex += 1;
-                }
-            }
-        }
-
-        if (event.key === "Enter" && arrowDownIndex !== -1) {
-            const selectedTerm = filteredTerms[arrowDownIndex - 1];
-            if (selectedTerm) {
-                goto(`/dashboard/${selectedTerm.type === "calendar" ? "calendars" : selectedTerm.type === "event-list" ? "event-lists" : "image-feeds"}/${selectedTerm.data.id}`);
-            }
-            resetSearch();
-        }
-    }
+	import type { EventListDBModel, ImageFeedDBModel } from "./utils";
+	import Badge from "./components/ui/badge/badge.svelte";
+	import * as Kbd from "$lib/components/ui/kbd/index.js";
+	import type { CalendarDBModel } from "./cal.utils";
+	import { Input } from "@/components/ui/input";
+	import { Search } from "@lucide/svelte";
+	import { goto } from "$app/navigation";
+
+	let {
+		calendars,
+		imageFeeds,
+		eventLists
+	}: {
+		calendars: CalendarDBModel[];
+		imageFeeds: ImageFeedDBModel[];
+		eventLists: EventListDBModel[];
+	} = $props();
+
+	let everythingInput: HTMLInputElement | null = $state(null);
+	let everythingInputFocused = $state(false);
+
+	type FilteredTermsList =
+		| { type: "calendar"; data: CalendarDBModel }
+		| { type: "image-feed"; data: ImageFeedDBModel }
+		| { type: "event-list"; data: EventListDBModel };
+
+	let filteredTerms: FilteredTermsList[] = $state([]);
+	let arrowDownIndex = $state(-1);
+
+	function searchInputChanged(event: Event) {
+		//@ts-ignore
+		const searchTerm = event.target.value.toLowerCase();
+		if (!searchTerm) {
+			filteredTerms = [];
+			return;
+		}
+
+		let newFilteredTerms: FilteredTermsList[] = [];
+
+		for (let i = 0; i < calendars.length; i++) {
+			const cal = calendars[i];
+			if (!cal) continue;
+
+			if (
+				cal.id.toLowerCase().includes(searchTerm) ||
+				cal.name.toLowerCase().includes(searchTerm) ||
+				cal.description.toLowerCase().includes(searchTerm) ||
+				"calendar".includes(searchTerm)
+			) {
+				newFilteredTerms.push({ type: "calendar", data: cal });
+			}
+		}
+
+		for (let i = 0; i < imageFeeds.length; i++) {
+			const feed = imageFeeds[i];
+			if (!feed) continue;
+
+			if (
+				feed.id.toLowerCase().includes(searchTerm) ||
+				feed.name.toLowerCase().includes(searchTerm) ||
+				feed.description.toLowerCase().includes(searchTerm) ||
+				"image feed".includes(searchTerm)
+			) {
+				newFilteredTerms.push({ type: "image-feed", data: feed });
+			}
+		}
+
+		for (let i = 0; i < eventLists.length; i++) {
+			const list = eventLists[i];
+			if (!list) continue;
+
+			if (
+				list.id.toLowerCase().includes(searchTerm) ||
+				list.name.toLowerCase().includes(searchTerm) ||
+				list.description.toLowerCase().includes(searchTerm) ||
+				"event list".includes(searchTerm)
+			) {
+				newFilteredTerms.push({ type: "event-list", data: list });
+			}
+		}
+
+		filteredTerms = newFilteredTerms;
+		arrowDownIndex = -1;
+	}
+
+	function resetSearch() {
+		if (everythingInput) {
+			everythingInput.value = "";
+			filteredTerms = [];
+			arrowDownIndex = -1;
+		}
+	}
+
+	function keyDown(event: KeyboardEvent) {
+		if (event.key === "/" && event.ctrlKey && everythingInput && !everythingInputFocused) {
+			event.preventDefault();
+			arrowDownIndex = -1;
+			everythingInput.focus();
+		}
+
+		if (everythingInputFocused && filteredTerms.length > 0) {
+			if (event.key === "ArrowUp") {
+				if (arrowDownIndex === -1 || arrowDownIndex === 1) {
+					arrowDownIndex = filteredTerms.length;
+				} else {
+					arrowDownIndex -= 1;
+				}
+			} else if (event.key === "ArrowDown") {
+				if (arrowDownIndex === filteredTerms.length || arrowDownIndex === -1) {
+					arrowDownIndex = 1;
+				} else {
+					arrowDownIndex += 1;
+				}
+			}
+		}
+
+		if (event.key === "Enter" && arrowDownIndex !== -1) {
+			const selectedTerm = filteredTerms[arrowDownIndex - 1];
+			if (selectedTerm) {
+				goto(
+					`/dashboard/${selectedTerm.type === "calendar" ? "calendars" : selectedTerm.type === "event-list" ? "event-lists" : "image-feeds"}/${selectedTerm.data.id}`
+				);
+			}
+			resetSearch();
+		}
+	}
 </script>
 
 <svelte:window onkeydown={keyDown} />
 
 <div class="relative w-full max-w-md">
-    <Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-    <div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
-        <Kbd.Group>
-            <Kbd.Root>⌘</Kbd.Root>
-            <span>+</span>
-            <Kbd.Root>/</Kbd.Root>
-        </Kbd.Group>
-    </div>
-    <Input
-        bind:ref={everythingInput}
-        onfocusin={() => everythingInputFocused=true}
-        onfocusout={() => setTimeout(() => everythingInputFocused=false, 200)}
-        oninput={searchInputChanged}
-        placeholder="Search calendars, image feeds..."
-        class="pl-9 pr-9 bg-background"
-    />
-
-    {#if everythingInputFocused && filteredTerms.length > 0}
-        <div class="border shadow-lg bg-card absolute left-0 -bottom-1 translate-y-full w-full max-w-md rounded-lg p-1 z-50 isolate everythingSearcher">
-            {#each filteredTerms as term, index (`filteredSearchTerms${term.data.id}`)}
-                <a
-                    onclick={resetSearch}
-                    href="/dashboard/{term.type === "calendar" ? "calendars" : term.type === "event-list" ? "event-lists" : "image-feeds"}/{term.data.id}"
-                    class="w-full px-4 py-3 hover:bg-accent/50 transition-colors text-left flex flex-col gap-1 rounded-md {arrowDownIndex - 1 === index ? "bg-accent/70" : ""}"
-                >
-                    <div class="flex items-center justify-between">
-                        <span class="font-medium text-foreground underline">{term.data.name}</span>
-                        {#if term.type === "calendar"}
-                            <Badge variant="outline">Calendar</Badge>
-                        {:else if term.type === "event-list"}
-                            <Badge variant="outline">Event List</Badge>
-                        {:else}
-                            <Badge variant="outline">Image Feed</Badge>
-                        {/if}
-                    </div>
-                    <p class="text-sm text-muted-foreground line-clamp-1">{term.data.description}</p>
-                </a>
-            {/each}
-        </div>
-    {/if}
+	<Search class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+	<div class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+		<Kbd.Group>
+			<Kbd.Root>⌘</Kbd.Root>
+			<span>+</span>
+			<Kbd.Root>/</Kbd.Root>
+		</Kbd.Group>
+	</div>
+	<Input
+		bind:ref={everythingInput}
+		onfocusin={() => (everythingInputFocused = true)}
+		onfocusout={() => setTimeout(() => (everythingInputFocused = false), 200)}
+		oninput={searchInputChanged}
+		placeholder="Search calendars, image feeds..."
+		class="pl-9 pr-9 bg-background"
+	/>
+
+	{#if everythingInputFocused && filteredTerms.length > 0}
+		<div
+			class="border shadow-lg bg-card absolute left-0 -bottom-1 translate-y-full w-full max-w-md rounded-lg p-1 z-50 isolate everythingSearcher"
+		>
+			{#each filteredTerms as term, index (`filteredSearchTerms${term.data.id}`)}
+				<a
+					onclick={resetSearch}
+					href="/dashboard/{term.type === 'calendar'
+						? 'calendars'
+						: term.type === 'event-list'
+							? 'event-lists'
+							: 'image-feeds'}/{term.data.id}"
+					class="w-full px-4 py-3 hover:bg-accent/50 transition-colors text-left flex flex-col gap-1 rounded-md {arrowDownIndex -
+						1 ===
+					index
+						? 'bg-accent/70'
+						: ''}"
+				>
+					<div class="flex items-center justify-between">
+						<span class="font-medium text-foreground underline">{term.data.name}</span>
+						{#if term.type === "calendar"}
+							<Badge variant="outline">Calendar</Badge>
+						{:else if term.type === "event-list"}
+							<Badge variant="outline">Event List</Badge>
+						{:else}
+							<Badge variant="outline">Image Feed</Badge>
+						{/if}
+					</div>
+					<p class="text-sm text-muted-foreground line-clamp-1">{term.data.description}</p>
+				</a>
+			{/each}
+		</div>
+	{/if}
 </div>
 
 <style>
-    @media (max-width: 500px) {
-        .everythingSearcher {
-            min-width: calc(100vw - 20px) !important;
-            left: -58px;
-        }
-    }
-</style>
\ No newline at end of file
+	@media (max-width: 500px) {
+		.everythingSearcher {
+			min-width: calc(100vw - 20px) !important;
+			left: -58px;
+		}
+	}
+</style>
diff --git a/frontend/src/lib/IncludedCalendars.svelte b/frontend/src/lib/IncludedCalendars.svelte
index 54f0d8c..9d58c77 100644
--- a/frontend/src/lib/IncludedCalendars.svelte
+++ b/frontend/src/lib/IncludedCalendars.svelte
@@ -1,150 +1,172 @@
 <script lang="ts">
-    import { removeIncludedCalendarsToIFeed, updateIncludedCalendarsToIFeed } from "../routes/(mainWebsite)/dashboard/image-feeds/IFeedIncludeCalActions.remote";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import AnIncludedCalendar from "./AnIncludedCalendar.svelte";
-    import * as Empty from "$lib/components/ui/empty/index.js";
-    import { type CalendarDBModel } from "@/cal.utils";
-    import { Button } from "@/components/ui/button";
-    import { CalendarDays } from "@lucide/svelte";
-    import ACalToAdd from "./ACalToAdd.svelte";
-    import { toast } from "svelte-sonner";
+	import {
+		removeIncludedCalendarsToIFeed,
+		updateIncludedCalendarsToIFeed
+	} from "../routes/(mainWebsite)/dashboard/image-feeds/IFeedIncludeCalActions.remote";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import AnIncludedCalendar from "./AnIncludedCalendar.svelte";
+	import * as Empty from "$lib/components/ui/empty/index.js";
+	import { type CalendarDBModel } from "@/cal.utils";
+	import { Button } from "@/components/ui/button";
+	import { CalendarDays } from "@lucide/svelte";
+	import ACalToAdd from "./ACalToAdd.svelte";
+	import { toast } from "svelte-sonner";
 
-    let { 
-        includedCalendars,
-        pb_url,
-        calendars,
-        iFeedId
-    }: {
-        iFeedId: string,
-        includedCalendars: string[],
-        pb_url: string
-        calendars: CalendarDBModel[]
-    } = $props();
+	let {
+		includedCalendars,
+		pb_url,
+		calendars,
+		iFeedId
+	}: {
+		iFeedId: string;
+		includedCalendars: string[];
+		pb_url: string;
+		calendars: CalendarDBModel[];
+	} = $props();
 
-    let includeACalendarPopup = $state(false);
-    let calsToAdd: string[] = $state([]);
+	let includeACalendarPopup = $state(false);
+	let calsToAdd: string[] = $state([]);
 
-    async function includeCalendar() {
-        if (calsToAdd.length === 0) {
-            toast.error("You didnt select any calendar.");
-            return
-        }
+	async function includeCalendar() {
+		if (calsToAdd.length === 0) {
+			toast.error("You didnt select any calendar.");
+			return;
+		}
 
-        const updatingIncludedCalendars = toast.loading("Updating List", { duration: Number.POSITIVE_INFINITY });
-        const result = await updateIncludedCalendarsToIFeed({
-            currentFeedID: iFeedId,
-            calIds: calsToAdd
-        });
-        toast.dismiss(updatingIncludedCalendars);
-        includeACalendarPopup = false;
+		const updatingIncludedCalendars = toast.loading("Updating List", {
+			duration: Number.POSITIVE_INFINITY
+		});
+		const result = await updateIncludedCalendarsToIFeed({
+			currentFeedID: iFeedId,
+			calIds: calsToAdd
+		});
+		toast.dismiss(updatingIncludedCalendars);
+		includeACalendarPopup = false;
 
-        if (result.error) {
-            toast.error(result.msg);
-        } else {
-            toast.success(result.msg);
-        }
-    }
+		if (result.error) {
+			toast.error(result.msg);
+		} else {
+			toast.success(result.msg);
+		}
+	}
 
-    async function removeCal(calId: string) {
-        const removingCalToast = toast.loading("Removing included calendar", { duration: Number.POSITIVE_INFINITY });
-        const res = await removeIncludedCalendarsToIFeed({
-            currentFeedID: iFeedId,
-            calId
-        });
-        toast.dismiss(removingCalToast);
+	async function removeCal(calId: string) {
+		const removingCalToast = toast.loading("Removing included calendar", {
+			duration: Number.POSITIVE_INFINITY
+		});
+		const res = await removeIncludedCalendarsToIFeed({
+			currentFeedID: iFeedId,
+			calId
+		});
+		toast.dismiss(removingCalToast);
 
-        if (res.error) {
-            toast.error(res.msg);
-        } else {
-            toast.success(res.msg);
-        }
-    }
+		if (res.error) {
+			toast.error(res.msg);
+		} else {
+			toast.success(res.msg);
+		}
+	}
 
-    $effect(() => {
-        if (!includeACalendarPopup) {
-            calsToAdd = [];
-        }
-    });
+	$effect(() => {
+		if (!includeACalendarPopup) {
+			calsToAdd = [];
+		}
+	});
 
-    function addToCalsToAdd(event: Event, calId: string) {
-        //@ts-ignore
-        if (event.target?.checked) {
-            calsToAdd.push(calId);
-        } else {
-            calsToAdd = calsToAdd.filter((cal) => cal !==calId);
-        }
-    }
+	function addToCalsToAdd(event: Event, calId: string) {
+		//@ts-ignore
+		if (event.target?.checked) {
+			calsToAdd.push(calId);
+		} else {
+			calsToAdd = calsToAdd.filter((cal) => cal !== calId);
+		}
+	}
 </script>
 
-
 <div class="space-y-3">
-    {#if includedCalendars.length > 0}
-        {#each includedCalendars as calendar (`includedcals${calendar}`)}
-            <AnIncludedCalendar {calendars} calendarId={calendar} pb_url={pb_url} removeAdditionalCalendar={removeCal} />
-        {/each}
-        <div class="w-full flex items-center justify-center mt-2">
-            <Button variant="outline" class="w-full" onclick={() => includeACalendarPopup = true}>Include Calendar</Button>
-        </div>
-    {:else}
-        <Empty.Root>
-            <Empty.Header>
-                <Empty.Media variant="icon">
-                <CalendarDays />
-                </Empty.Media>
-                <Empty.Title>No Included Calendars</Empty.Title>
-                <Empty.Description>
-                    You haven't included a calendar yet. If you haven't created any calendars, create one and then include it here.
-                </Empty.Description>
-            </Empty.Header>
-            <Empty.Content>
-                <div class="flex gap-2">
-                    <Button onclick={() => includeACalendarPopup = true}>Include Calendar</Button>
-                    <Button href="/dashboard/calendars?new=1" variant="outline">Create A Calendar</Button>
-                </div>
-            </Empty.Content>
-        </Empty.Root>
-    {/if}
+	{#if includedCalendars.length > 0}
+		{#each includedCalendars as calendar (`includedcals${calendar}`)}
+			<AnIncludedCalendar
+				{calendars}
+				calendarId={calendar}
+				{pb_url}
+				removeAdditionalCalendar={removeCal}
+			/>
+		{/each}
+		<div class="w-full flex items-center justify-center mt-2">
+			<Button variant="outline" class="w-full" onclick={() => (includeACalendarPopup = true)}
+				>Include Calendar</Button
+			>
+		</div>
+	{:else}
+		<Empty.Root>
+			<Empty.Header>
+				<Empty.Media variant="icon">
+					<CalendarDays />
+				</Empty.Media>
+				<Empty.Title>No Included Calendars</Empty.Title>
+				<Empty.Description>
+					You haven't included a calendar yet. If you haven't created any calendars, create one and
+					then include it here.
+				</Empty.Description>
+			</Empty.Header>
+			<Empty.Content>
+				<div class="flex gap-2">
+					<Button onclick={() => (includeACalendarPopup = true)}>Include Calendar</Button>
+					<Button href="/dashboard/calendars?new=1" variant="outline">Create A Calendar</Button>
+				</div>
+			</Empty.Content>
+		</Empty.Root>
+	{/if}
 </div>
 
 <Dialog.Root bind:open={includeACalendarPopup}>
-    <Dialog.Content class="sm:max-w-125 max-h-screen overflow-y-auto" style="max-height: calc(100vh - 50px);">
-        <Dialog.Header>
-            <Dialog.Title>Incude Calendar</Dialog.Title>
-            <Dialog.Description>KEEP IN MIND that a password protected calendar will be public and will not require a password. Also, any calendar that has access to UNPUBLISHED events also will be public.
-            </Dialog.Description>
-        </Dialog.Header>
-        <div class="grid gap-4 py-4">
-            {#if includedCalendars.length === calendars.length}
-                <Empty.Root>
-                    <Empty.Header>
-                        <Empty.Media variant="icon">
-                        <CalendarDays />
-                        </Empty.Media>
-                        <Empty.Title>No {#if calendars.length !== 0}Extra{/if} Calendars</Empty.Title>
-                        <Empty.Description>
-                            {#if calendars.length === 0}
-                                You haven't created any calendars yet, create one and then include it here.
-                            {:else}
-                                You already included all you current calendars, create a new one and then include it here.
-                            {/if}
-                        </Empty.Description>
-                    </Empty.Header>
-                    <Empty.Content>
-                        <div class="flex gap-2">
-                            <Button href="/dashboard/calendars?new=1">Create A Calendar</Button>
-                        </div>
-                    </Empty.Content>
-                </Empty.Root>
-            {:else}
-                {#each calendars as calendar (`acalendartoadd${calendar.id}`)}
-                    {#if !includedCalendars.includes(calendar.id)}
-                        <ACalToAdd {calendar} {addToCalsToAdd} />
-                    {/if}
-                {/each}
-            {/if}
-        </div>
-        <Dialog.Footer>
-            <Button onclick={includeCalendar}>Add</Button>
-        </Dialog.Footer>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+	<Dialog.Content
+		class="sm:max-w-125 max-h-screen overflow-y-auto"
+		style="max-height: calc(100vh - 50px);"
+	>
+		<Dialog.Header>
+			<Dialog.Title>Incude Calendar</Dialog.Title>
+			<Dialog.Description
+				>KEEP IN MIND that a password protected calendar will be public and will not require a
+				password. Also, any calendar that has access to UNPUBLISHED events also will be public.
+			</Dialog.Description>
+		</Dialog.Header>
+		<div class="grid gap-4 py-4">
+			{#if includedCalendars.length === calendars.length}
+				<Empty.Root>
+					<Empty.Header>
+						<Empty.Media variant="icon">
+							<CalendarDays />
+						</Empty.Media>
+						<Empty.Title
+							>No {#if calendars.length !== 0}Extra{/if} Calendars</Empty.Title
+						>
+						<Empty.Description>
+							{#if calendars.length === 0}
+								You haven't created any calendars yet, create one and then include it here.
+							{:else}
+								You already included all you current calendars, create a new one and then include it
+								here.
+							{/if}
+						</Empty.Description>
+					</Empty.Header>
+					<Empty.Content>
+						<div class="flex gap-2">
+							<Button href="/dashboard/calendars?new=1">Create A Calendar</Button>
+						</div>
+					</Empty.Content>
+				</Empty.Root>
+			{:else}
+				{#each calendars as calendar (`acalendartoadd${calendar.id}`)}
+					{#if !includedCalendars.includes(calendar.id)}
+						<ACalToAdd {calendar} {addToCalsToAdd} />
+					{/if}
+				{/each}
+			{/if}
+		</div>
+		<Dialog.Footer>
+			<Button onclick={includeCalendar}>Add</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/ModeToggler.svelte b/frontend/src/lib/ModeToggler.svelte
index 3867037..90c9b26 100644
--- a/frontend/src/lib/ModeToggler.svelte
+++ b/frontend/src/lib/ModeToggler.svelte
@@ -1,11 +1,15 @@
 <script>
-    import { Button } from "$lib/components/ui/button/index.js";
-    import { SunIcon, MoonIcon } from "@lucide/svelte";
-    import { toggleMode  } from "mode-watcher";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { SunIcon, MoonIcon } from "@lucide/svelte";
+	import { toggleMode } from "mode-watcher";
 </script>
 
 <Button onclick={toggleMode} variant="outline" size="icon">
-    <SunIcon class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0" />
-    <MoonIcon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100" />
-    <span class="sr-only">Toggle theme</span>
-</Button>
\ No newline at end of file
+	<SunIcon
+		class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 !transition-all dark:-rotate-90 dark:scale-0"
+	/>
+	<MoonIcon
+		class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 !transition-all dark:rotate-0 dark:scale-100"
+	/>
+	<span class="sr-only">Toggle theme</span>
+</Button>
diff --git a/frontend/src/lib/NoCalendarAvatar.svelte b/frontend/src/lib/NoCalendarAvatar.svelte
index 1bc79e1..13bae0d 100644
--- a/frontend/src/lib/NoCalendarAvatar.svelte
+++ b/frontend/src/lib/NoCalendarAvatar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { CalendarDays } from "@lucide/svelte";
+	import { CalendarDays } from "@lucide/svelte";
 
-    let { small = false }: { small?: boolean } = $props();
+	let { small = false }: { small?: boolean } = $props();
 </script>
 
 <div class="w-full h-full rounded-lg flex items-center justify-center bg-violet-500/10">
-    <CalendarDays class="{small ? "h-4 w-4" : "h-7 w-7"} text-violet-500" />
-</div>
\ No newline at end of file
+	<CalendarDays class="{small ? 'h-4 w-4' : 'h-7 w-7'} text-violet-500" />
+</div>
diff --git a/frontend/src/lib/NoEventListAvatar.svelte b/frontend/src/lib/NoEventListAvatar.svelte
index 8d46faf..fca3a02 100644
--- a/frontend/src/lib/NoEventListAvatar.svelte
+++ b/frontend/src/lib/NoEventListAvatar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { LayoutList } from "@lucide/svelte";
+	import { LayoutList } from "@lucide/svelte";
 
-    let { small = false }: { small?: boolean } = $props();
+	let { small = false }: { small?: boolean } = $props();
 </script>
 
 <div class="w-full h-full rounded-lg flex items-center justify-center bg-emerald-500/10">
-    <LayoutList class="{small ? "h-4 w-4" : "h-7 w-7"} text-emerald-500" />
-</div>
\ No newline at end of file
+	<LayoutList class="{small ? 'h-4 w-4' : 'h-7 w-7'} text-emerald-500" />
+</div>
diff --git a/frontend/src/lib/NoImageFeedAvatar.svelte b/frontend/src/lib/NoImageFeedAvatar.svelte
index 6d4329e..ea1516d 100644
--- a/frontend/src/lib/NoImageFeedAvatar.svelte
+++ b/frontend/src/lib/NoImageFeedAvatar.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { ImageIcon } from "@lucide/svelte";
+	import { ImageIcon } from "@lucide/svelte";
 
-    let { small = false }: { small?: boolean } = $props();
+	let { small = false }: { small?: boolean } = $props();
 </script>
 
 <div class="w-full h-full rounded-lg flex items-center justify-center bg-amber-500/10">
-    <ImageIcon class="{small ? "h-4 w-4" : "h-7 w-7"} text-amber-500" />
-</div>
\ No newline at end of file
+	<ImageIcon class="{small ? 'h-4 w-4' : 'h-7 w-7'} text-amber-500" />
+</div>
diff --git a/frontend/src/lib/PrettyDate.svelte b/frontend/src/lib/PrettyDate.svelte
index 4552080..7384675 100644
--- a/frontend/src/lib/PrettyDate.svelte
+++ b/frontend/src/lib/PrettyDate.svelte
@@ -1,9 +1,12 @@
 <script lang="ts">
-    import type { Temporal } from "temporal-polyfill";
-    import { MONTHTOSTRING } from "./utils";
-    import Time from "./Time.svelte";
+	import type { Temporal } from "temporal-polyfill";
+	import { MONTHTOSTRING } from "./utils";
+	import Time from "./Time.svelte";
 
-    let { date }: { date: Temporal.ZonedDateTime } = $props();
+	let { date }: { date: Temporal.ZonedDateTime } = $props();
 </script>
 
-{MONTHTOSTRING[date.month]} {date.day} {date.year} <Time {date} useAMPM />
\ No newline at end of file
+{MONTHTOSTRING[date.month]}
+{date.day}
+{date.year}
+<Time {date} useAMPM />
diff --git a/frontend/src/lib/Time.svelte b/frontend/src/lib/Time.svelte
index d18578d..80d858f 100644
--- a/frontend/src/lib/Time.svelte
+++ b/frontend/src/lib/Time.svelte
@@ -1,29 +1,30 @@
 <script lang="ts">
-    import { Temporal } from "temporal-polyfill";
+	import { Temporal } from "temporal-polyfill";
 
-    let { date, useAMPM }: { date: Temporal.ZonedDateTime, useAMPM: boolean } = $props();
+	let { date, useAMPM }: { date: Temporal.ZonedDateTime; useAMPM: boolean } = $props();
 
-    let hour = $state("");
-    let minute = $state("");
-    let isAM = $state(true);
+	let hour = $state("");
+	let minute = $state("");
+	let isAM = $state(true);
 
-    $effect(() => {
-        if (useAMPM) {
-            let tempHour = date.hour;
-            if (tempHour > 12) {
-                hour = String(date.hour - 12);
-            } else {
-                hour = String(date.hour);
-            }
-            if (tempHour < 1) {
-                hour = "12"
-            }
-            isAM = tempHour < 12 || tempHour === 24;
-        } else {
-            hour = String(date.hour).padStart(2, "0");
-        }
-        minute = String(date.minute).padStart(2, "0");
-    });
+	$effect(() => {
+		if (useAMPM) {
+			let tempHour = date.hour;
+			if (tempHour > 12) {
+				hour = String(date.hour - 12);
+			} else {
+				hour = String(date.hour);
+			}
+			if (tempHour < 1) {
+				hour = "12";
+			}
+			isAM = tempHour < 12 || tempHour === 24;
+		} else {
+			hour = String(date.hour).padStart(2, "0");
+		}
+		minute = String(date.minute).padStart(2, "0");
+	});
 </script>
 
-{hour}:{minute} {#if useAMPM}{#if isAM}AM{:else}PM{/if}{/if}
\ No newline at end of file
+{hour}:{minute}
+{#if useAMPM}{#if isAM}AM{:else}PM{/if}{/if}
diff --git a/frontend/src/lib/TimeZoneSelector.svelte b/frontend/src/lib/TimeZoneSelector.svelte
index d3c9c2d..7766df8 100644
--- a/frontend/src/lib/TimeZoneSelector.svelte
+++ b/frontend/src/lib/TimeZoneSelector.svelte
@@ -1,50 +1,49 @@
 <script lang="ts">
-    import * as Select from "$lib/components/ui/select/index.js";
+	import * as Select from "$lib/components/ui/select/index.js";
 
-    let { timeZone = $bindable() }: { timeZone: string } = $props();
+	let { timeZone = $bindable() }: { timeZone: string } = $props();
 
-    let timezones = $state([
-        "UTC",
-        "America/New_York",
-        "America/Chicago",
-        "America/Denver",
-        "America/Los_Angeles",
-        "America/Phoenix",
-        "America/Anchorage",
-        "Pacific/Honolulu",
-        "Europe/London",
-        "Europe/Paris",
-        "Europe/Berlin",
-        "Europe/Moscow",
-        "Asia/Tokyo",
-        "Asia/Seoul",
-        "Asia/Shanghai",
-        "Asia/Kolkata",
-        "Asia/Dubai",
-        "Australia/Sydney",
-        "Australia/Perth",
-        "America/Sao_Paulo",
-        "Africa/Johannesburg"
-    ]);
+	let timezones = $state([
+		"UTC",
+		"America/New_York",
+		"America/Chicago",
+		"America/Denver",
+		"America/Los_Angeles",
+		"America/Phoenix",
+		"America/Anchorage",
+		"Pacific/Honolulu",
+		"Europe/London",
+		"Europe/Paris",
+		"Europe/Berlin",
+		"Europe/Moscow",
+		"Asia/Tokyo",
+		"Asia/Seoul",
+		"Asia/Shanghai",
+		"Asia/Kolkata",
+		"Asia/Dubai",
+		"Australia/Sydney",
+		"Australia/Perth",
+		"America/Sao_Paulo",
+		"Africa/Johannesburg"
+	]);
 
-    const triggerContent = $derived(timezones.find((azone) => azone === timeZone) ?? "Select a timezone");
+	const triggerContent = $derived(
+		timezones.find((azone) => azone === timeZone) ?? "Select a timezone"
+	);
 </script>
- 
+
 <Select.Root type="single" name="selectTimezone" bind:value={timeZone}>
-    <Select.Trigger class="w-full dark">
-        {triggerContent}
-    </Select.Trigger>
-    <Select.Content>
-        <Select.Group>
-            <Select.Label>Timezones</Select.Label>
-            {#each timezones as timezone (timezone)}
-                <Select.Item
-                    value={timezone}
-                    label={timezone}
-                >
-                    {timezone}
-                </Select.Item>
-            {/each}
-        </Select.Group>
-    </Select.Content>
-</Select.Root>
\ No newline at end of file
+	<Select.Trigger class="w-full dark">
+		{triggerContent}
+	</Select.Trigger>
+	<Select.Content>
+		<Select.Group>
+			<Select.Label>Timezones</Select.Label>
+			{#each timezones as timezone (timezone)}
+				<Select.Item value={timezone} label={timezone}>
+					{timezone}
+				</Select.Item>
+			{/each}
+		</Select.Group>
+	</Select.Content>
+</Select.Root>
diff --git a/frontend/src/lib/cal.utils.ts b/frontend/src/lib/cal.utils.ts
index 8bfe8a8..f8c167f 100644
--- a/frontend/src/lib/cal.utils.ts
+++ b/frontend/src/lib/cal.utils.ts
@@ -1,15 +1,15 @@
 import type { RecordModel } from "pocketbase";
 
 export type CalendarCustomizations = {
-	viewType: "3day" | "week" | "month",
-	useAMPM: boolean,
-    showResourcePathname: boolean,
-	onlyShowLocationTitle: boolean,
-	showLocation: boolean,
-	showResources: boolean,
-	showRooms: boolean,
-	showDescription: boolean
-}
+	viewType: "3day" | "week" | "month";
+	useAMPM: boolean;
+	showResourcePathname: boolean;
+	onlyShowLocationTitle: boolean;
+	showLocation: boolean;
+	showResources: boolean;
+	showRooms: boolean;
+	showDescription: boolean;
+};
 
 export const defaultCalendarCustomizations: CalendarCustomizations = {
 	viewType: "3day",
@@ -20,19 +20,19 @@ export const defaultCalendarCustomizations: CalendarCustomizations = {
 	showResources: true,
 	showRooms: true,
 	showDescription: false
-}
+};
 
 export type CalendarFilters = {
-	onlyShowFeatured: boolean,
-	hideUnpublished: boolean,
-	resourceFilterType: "allow" | "block"
-	allowResources: string[],
-	blockResources: string[],
-	enableResourceFiltering: boolean,
-	tagFilterType: "allow" | "block",
-	allowTags: string[],
-	blockTags: string[],
-	enableTagFiltering: boolean
+	onlyShowFeatured: boolean;
+	hideUnpublished: boolean;
+	resourceFilterType: "allow" | "block";
+	allowResources: string[];
+	blockResources: string[];
+	enableResourceFiltering: boolean;
+	tagFilterType: "allow" | "block";
+	allowTags: string[];
+	blockTags: string[];
+	enableTagFiltering: boolean;
 };
 
 export const defaultCalendarFilters: CalendarFilters = {
@@ -46,20 +46,20 @@ export const defaultCalendarFilters: CalendarFilters = {
 	allowTags: [],
 	blockTags: [],
 	enableTagFiltering: false
-}
+};
 
 export interface CalendarDBModel extends RecordModel {
-	publicId: string,
-	name: string,
-	password: string,
-	passwordEnabled: boolean,
-	owner: string,
-	logo: string | File,
-	visits: number,
-	filters: CalendarFilters,
-	description: string,
-	passwordScreenMessage: string,
-	displaySettings: CalendarCustomizations,
-	created: string,
-	updated: string
-}
\ No newline at end of file
+	publicId: string;
+	name: string;
+	password: string;
+	passwordEnabled: boolean;
+	owner: string;
+	logo: string | File;
+	visits: number;
+	filters: CalendarFilters;
+	description: string;
+	passwordScreenMessage: string;
+	displaySettings: CalendarCustomizations;
+	created: string;
+	updated: string;
+}
diff --git a/frontend/src/lib/calendar/monthView/MonthCalView.svelte b/frontend/src/lib/calendar/monthView/MonthCalView.svelte
index b8f41a9..5ce1fde 100644
--- a/frontend/src/lib/calendar/monthView/MonthCalView.svelte
+++ b/frontend/src/lib/calendar/monthView/MonthCalView.svelte
@@ -1,41 +1,52 @@
 <script lang="ts">
-    import { type CalendarCustomizations } from "../../cal.utils";
-    import MonthCalViewDay from "./MonthCalViewDay.svelte";
-    import { type EventDBModel } from "../../event.utils";
-    import { getDaysInMonth } from "../../utils";
-    import { Temporal } from "temporal-polyfill";
+	import { type CalendarCustomizations } from "../../cal.utils";
+	import MonthCalViewDay from "./MonthCalViewDay.svelte";
+	import { type EventDBModel } from "../../event.utils";
+	import { getDaysInMonth } from "../../utils";
+	import { Temporal } from "temporal-polyfill";
 
-    let {
-        events,
-        currentDate,
-        timeZone,
-        calendarCustomizations,
-        fontScale
-    }: {
-        fontScale: number,
-        events: EventDBModel[],
-        currentDate: Temporal.ZonedDateTime,
-        timeZone: Temporal.TimeZoneLike,
-        calendarCustomizations: CalendarCustomizations
-    } = $props();
-    
-    let days = $derived(getDaysInMonth(currentDate))
+	let {
+		events,
+		currentDate,
+		timeZone,
+		calendarCustomizations,
+		fontScale
+	}: {
+		fontScale: number;
+		events: EventDBModel[];
+		currentDate: Temporal.ZonedDateTime;
+		timeZone: Temporal.TimeZoneLike;
+		calendarCustomizations: CalendarCustomizations;
+	} = $props();
+
+	let days = $derived(getDaysInMonth(currentDate));
 </script>
 
 <div class="dark h-full">
-    <div class="overflow-hidden h-screen">
-        <div class="grid grid-cols-7 dark bg-foreground">
-            {#each ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as day (`aweekday${day}`)}
-                <div class="text-center py-2 dark font-semibold text-white border-b border-[#333333]" style="font-size: {fontScale * 12}px;">
-                    {day}
-                </div>
-            {/each}
-        </div>
+	<div class="overflow-hidden h-screen">
+		<div class="grid grid-cols-7 dark bg-foreground">
+			{#each ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"] as day (`aweekday${day}`)}
+				<div
+					class="text-center py-2 dark font-semibold text-white border-b border-[#333333]"
+					style="font-size: {fontScale * 12}px;"
+				>
+					{day}
+				</div>
+			{/each}
+		</div>
 
-        <div class="grid grid-cols-7 h-full">
-            {#each days as day, index (`adayinmonth${index}`)}
-                <MonthCalViewDay {index} {events} {day} {currentDate} {timeZone} {calendarCustomizations} {fontScale} />
-            {/each}
-        </div>
-    </div>
-</div>
\ No newline at end of file
+		<div class="grid grid-cols-7 h-full">
+			{#each days as day, index (`adayinmonth${index}`)}
+				<MonthCalViewDay
+					{index}
+					{events}
+					{day}
+					{currentDate}
+					{timeZone}
+					{calendarCustomizations}
+					{fontScale}
+				/>
+			{/each}
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte b/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte
index 805cbd9..f0cab4c 100644
--- a/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte
+++ b/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte
@@ -1,56 +1,62 @@
 <script lang="ts">
-    import MonthCalViewDayEvent from "./MonthCalViewDayEvent.svelte";
-    import { cn, getEventsForDate, isSameDay } from "../../utils";
-    import { type CalendarCustomizations } from "../../cal.utils";
-    import { type EventDBModel } from "../../event.utils";
-    import { Temporal } from "temporal-polyfill";
+	import MonthCalViewDayEvent from "./MonthCalViewDayEvent.svelte";
+	import { cn, getEventsForDate, isSameDay } from "../../utils";
+	import { type CalendarCustomizations } from "../../cal.utils";
+	import { type EventDBModel } from "../../event.utils";
+	import { Temporal } from "temporal-polyfill";
 
-    let {
-        index,
-        events,
-        day,
-        timeZone,
-        calendarCustomizations,
-        currentDate,
-        fontScale
-    }: {
-        index: number,
-        events: EventDBModel[],
-        day: Temporal.ZonedDateTime,
-        timeZone: Temporal.TimeZoneLike,
-        calendarCustomizations: CalendarCustomizations,
-        currentDate: Temporal.ZonedDateTime,
-        fontScale: number
-    } = $props();
+	let {
+		index,
+		events,
+		day,
+		timeZone,
+		calendarCustomizations,
+		currentDate,
+		fontScale
+	}: {
+		index: number;
+		events: EventDBModel[];
+		day: Temporal.ZonedDateTime;
+		timeZone: Temporal.TimeZoneLike;
+		calendarCustomizations: CalendarCustomizations;
+		currentDate: Temporal.ZonedDateTime;
+		fontScale: number;
+	} = $props();
 
-    let nextDay = $derived(day.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
+	let nextDay = $derived(day.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
 
-    let dayEvents = $derived(getEventsForDate(events, day, nextDay))
-    let isToday = $derived(isSameDay(day, currentDate))
-    let currentMonth = $derived(currentDate.month)
-    let isCurrentMonth = $derived(day.month === currentMonth)
+	let dayEvents = $derived(getEventsForDate(events, day, nextDay));
+	let isToday = $derived(isSameDay(day, currentDate));
+	let currentMonth = $derived(currentDate.month);
+	let isCurrentMonth = $derived(day.month === currentMonth);
 </script>
 
 <div
-    class={cn(
-        "min-h-20 p-1 border-b border-r relative border-[#333333]",
-        !isCurrentMonth && "bg-muted/30 opacity-[.40]",
-        index % 7 === 6 && "border-r-0"
-    )}
+	class={cn(
+		"min-h-20 p-1 border-b border-r relative border-[#333333]",
+		!isCurrentMonth && "bg-muted/30 opacity-[.40]",
+		index % 7 === 6 && "border-r-0"
+	)}
 >
-    <div
-    class={cn(
-        "text-xs font-medium mb-1 size-6 flex items-center justify-center rounded-full text-primary-foreground",
-        isToday && "bg-secondary text-black",
-        !isCurrentMonth && "text-muted-foreground"
-    )}
-    >
-    {day.day}
-    </div>
+	<div
+		class={cn(
+			"text-xs font-medium mb-1 size-6 flex items-center justify-center rounded-full text-primary-foreground",
+			isToday && "bg-secondary text-black",
+			!isCurrentMonth && "text-muted-foreground"
+		)}
+	>
+		{day.day}
+	</div>
 
-    <div class="space-y-0.5">
-        {#each dayEvents as event (`aneventfortheday${event.id}`)}
-            <MonthCalViewDayEvent {event} {timeZone} {calendarCustomizations} currentDay={day} {fontScale} />
-        {/each}
-    </div>
-</div>
\ No newline at end of file
+	<div class="space-y-0.5">
+		{#each dayEvents as event (`aneventfortheday${event.id}`)}
+			<MonthCalViewDayEvent
+				{event}
+				{timeZone}
+				{calendarCustomizations}
+				currentDay={day}
+				{fontScale}
+			/>
+		{/each}
+	</div>
+</div>
diff --git a/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte b/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte
index 80903c1..d7693df 100644
--- a/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte
+++ b/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte
@@ -1,29 +1,50 @@
 <script lang="ts">
-    import type { CalendarCustomizations } from "@/cal.utils";
-    import type { EventDBModel } from "@/event.utils";
-    import { Temporal } from "temporal-polyfill";
-    import Time from "@/Time.svelte";
+	import type { CalendarCustomizations } from "@/cal.utils";
+	import type { EventDBModel } from "@/event.utils";
+	import { Temporal } from "temporal-polyfill";
+	import Time from "@/Time.svelte";
 
-    let { event, timeZone, calendarCustomizations, currentDay, fontScale }: { event: EventDBModel, timeZone: Temporal.TimeZoneLike, calendarCustomizations: CalendarCustomizations, currentDay: Temporal.ZonedDateTime, fontScale: number } = $props();
+	let {
+		event,
+		timeZone,
+		calendarCustomizations,
+		currentDay,
+		fontScale
+	}: {
+		event: EventDBModel;
+		timeZone: Temporal.TimeZoneLike;
+		calendarCustomizations: CalendarCustomizations;
+		currentDay: Temporal.ZonedDateTime;
+		fontScale: number;
+	} = $props();
 
-    const start = $derived(Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone));
+	const start = $derived(Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone));
 
-    const EVENT_DAY_NUMBER = $derived(Math.ceil(Math.abs((currentDay ? currentDay.toInstant().epochMilliseconds : 0) - start.startOfDay().toInstant().epochMilliseconds) / (1000 * 60 * 60 * 24)+1));
+	const EVENT_DAY_NUMBER = $derived(
+		Math.ceil(
+			Math.abs(
+				(currentDay ? currentDay.toInstant().epochMilliseconds : 0) -
+					start.startOfDay().toInstant().epochMilliseconds
+			) /
+				(1000 * 60 * 60 * 24) +
+				1
+		)
+	);
 </script>
 
 <div
-    class="px-1 py-0.5 truncate border border-[#333333] dark rounded-md bg-foreground text-white flex justify-between gap-1"
-    style="font-size: {fontScale * 12}px;"
-    title={event.name}
+	class="px-1 py-0.5 truncate border border-[#333333] dark rounded-md bg-foreground text-white flex justify-between gap-1"
+	style="font-size: {fontScale * 12}px;"
+	title={event.name}
 >
-    <span class="overflow-hidden whitespace-nowrap text-ellipsis">
-        {event.name}
-    </span>
-    <span class="text-muted-foreground">
-        {#if EVENT_DAY_NUMBER !== 1}
-            Day {EVENT_DAY_NUMBER}
-        {:else}
-            <Time date={start} useAMPM={calendarCustomizations.useAMPM} />
-        {/if}
-    </span>
-</div>
\ No newline at end of file
+	<span class="overflow-hidden whitespace-nowrap text-ellipsis">
+		{event.name}
+	</span>
+	<span class="text-muted-foreground">
+		{#if EVENT_DAY_NUMBER !== 1}
+			Day {EVENT_DAY_NUMBER}
+		{:else}
+			<Time date={start} useAMPM={calendarCustomizations.useAMPM} />
+		{/if}
+	</span>
+</div>
diff --git a/frontend/src/lib/calendar/weekView/WeekCalView.svelte b/frontend/src/lib/calendar/weekView/WeekCalView.svelte
index 3a51dfc..056681d 100644
--- a/frontend/src/lib/calendar/weekView/WeekCalView.svelte
+++ b/frontend/src/lib/calendar/weekView/WeekCalView.svelte
@@ -1,41 +1,52 @@
 <script lang="ts">
-    import { type CalendarCustomizations } from "../../cal.utils";
-    import { type EventDBModel } from "../../event.utils";
-    import WeekCalViewDay from "./WeekCalViewDay.svelte";
-    import { Temporal } from "temporal-polyfill";
-    import { getDayRange } from "../../utils";
+	import { type CalendarCustomizations } from "../../cal.utils";
+	import { type EventDBModel } from "../../event.utils";
+	import WeekCalViewDay from "./WeekCalViewDay.svelte";
+	import { Temporal } from "temporal-polyfill";
+	import { getDayRange } from "../../utils";
 
-    let {
-        events,
-        currentDate,
-        timeZone,
-        calendarCustomizations,
-        fontScale
-    }: {
-        events: EventDBModel[],
-        currentDate: Temporal.ZonedDateTime,
-        timeZone: Temporal.TimeZoneLike,
-        calendarCustomizations: CalendarCustomizations,
-        fontScale: number
-    } = $props();
-    
-    let days = $derived(getDayRange(currentDate, 7))
+	let {
+		events,
+		currentDate,
+		timeZone,
+		calendarCustomizations,
+		fontScale
+	}: {
+		events: EventDBModel[];
+		currentDate: Temporal.ZonedDateTime;
+		timeZone: Temporal.TimeZoneLike;
+		calendarCustomizations: CalendarCustomizations;
+		fontScale: number;
+	} = $props();
+
+	let days = $derived(getDayRange(currentDate, 7));
 </script>
 
 <div class="dark h-full">
-    <div class="overflow-hidden h-screen">
-        <div class="grid grid-cols-7 dark bg-foreground">
-            {#each days as day (`aweekday${day.dayOfWeek}`)}
-                <div class="text-center py-2 text-muted-foreground dark font-semibold border-b border-[#333333]" style="font-size: {fontScale * 12}px;">
-                    {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][day.dayOfWeek]}
-                </div>
-            {/each}
-        </div>
+	<div class="overflow-hidden h-screen">
+		<div class="grid grid-cols-7 dark bg-foreground">
+			{#each days as day (`aweekday${day.dayOfWeek}`)}
+				<div
+					class="text-center py-2 text-muted-foreground dark font-semibold border-b border-[#333333]"
+					style="font-size: {fontScale * 12}px;"
+				>
+					{["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"][day.dayOfWeek]}
+				</div>
+			{/each}
+		</div>
 
-        <div class="grid grid-cols-7 h-full">
-            {#each days as day, index (`adayinmonth${index}`)}
-                <WeekCalViewDay {index} {events} {day} {currentDate} {timeZone} {calendarCustomizations} {fontScale} />
-            {/each}
-        </div>
-    </div>
-</div>
\ No newline at end of file
+		<div class="grid grid-cols-7 h-full">
+			{#each days as day, index (`adayinmonth${index}`)}
+				<WeekCalViewDay
+					{index}
+					{events}
+					{day}
+					{currentDate}
+					{timeZone}
+					{calendarCustomizations}
+					{fontScale}
+				/>
+			{/each}
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte b/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte
index 1144b93..f66090f 100644
--- a/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte
+++ b/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte
@@ -1,56 +1,62 @@
 <script lang="ts">
-    import WeekCalViewDayEvent from "./WeekCalViewDayEvent.svelte";
-    import { type CalendarCustomizations } from "../../cal.utils";
-    import { cn, getEventsForDate, isSameDay } from "../../utils";
-    import { type EventDBModel } from "../../event.utils";
-    import { Temporal } from "temporal-polyfill";
+	import WeekCalViewDayEvent from "./WeekCalViewDayEvent.svelte";
+	import { type CalendarCustomizations } from "../../cal.utils";
+	import { cn, getEventsForDate, isSameDay } from "../../utils";
+	import { type EventDBModel } from "../../event.utils";
+	import { Temporal } from "temporal-polyfill";
 
-    let {
-        index,
-        events,
-        day,
-        timeZone,
-        calendarCustomizations,
-        currentDate,
-        fontScale
-    }: {
-        index: number,
-        events: EventDBModel[],
-        day: Temporal.ZonedDateTime,
-        timeZone: Temporal.TimeZoneLike,
-        calendarCustomizations: CalendarCustomizations,
-        currentDate: Temporal.ZonedDateTime,
-        fontScale: number
-    } = $props();
+	let {
+		index,
+		events,
+		day,
+		timeZone,
+		calendarCustomizations,
+		currentDate,
+		fontScale
+	}: {
+		index: number;
+		events: EventDBModel[];
+		day: Temporal.ZonedDateTime;
+		timeZone: Temporal.TimeZoneLike;
+		calendarCustomizations: CalendarCustomizations;
+		currentDate: Temporal.ZonedDateTime;
+		fontScale: number;
+	} = $props();
 
-    let nextDay = $derived(day.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
+	let nextDay = $derived(day.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
 
-    let dayEvents = $derived(getEventsForDate(events, day, nextDay))
-    let isToday = $derived(isSameDay(day, currentDate))
-    let currentMonth = $derived(currentDate.month)
-    let isCurrentMonth = $derived(day.month === currentMonth)
+	let dayEvents = $derived(getEventsForDate(events, day, nextDay));
+	let isToday = $derived(isSameDay(day, currentDate));
+	let currentMonth = $derived(currentDate.month);
+	let isCurrentMonth = $derived(day.month === currentMonth);
 </script>
 
 <div
-    class={cn(
-        "min-h-20 p-1 border-b border-r relative border-[#333333]",
-        !isCurrentMonth && "bg-muted/30 opacity-[.40]",
-        index % 7 === 6 && "border-r-0"
-    )}
+	class={cn(
+		"min-h-20 p-1 border-b border-r relative border-[#333333]",
+		!isCurrentMonth && "bg-muted/30 opacity-[.40]",
+		index % 7 === 6 && "border-r-0"
+	)}
 >
-    <div
-    class={cn(
-        "text-xs font-medium mb-1 size-6 flex items-center justify-center rounded-full text-primary-foreground",
-        isToday && "bg-secondary text-black",
-        !isCurrentMonth && "text-muted-foreground"
-    )}
-    >
-    {day.day}
-    </div>
+	<div
+		class={cn(
+			"text-xs font-medium mb-1 size-6 flex items-center justify-center rounded-full text-primary-foreground",
+			isToday && "bg-secondary text-black",
+			!isCurrentMonth && "text-muted-foreground"
+		)}
+	>
+		{day.day}
+	</div>
 
-    <div class="space-y-1">
-        {#each dayEvents as event (`aneventfortheday${event.id}`)}
-            <WeekCalViewDayEvent {calendarCustomizations} {event} {timeZone} currentDay={day} {fontScale} />
-        {/each}
-    </div>
-</div>
\ No newline at end of file
+	<div class="space-y-1">
+		{#each dayEvents as event (`aneventfortheday${event.id}`)}
+			<WeekCalViewDayEvent
+				{calendarCustomizations}
+				{event}
+				{timeZone}
+				currentDay={day}
+				{fontScale}
+			/>
+		{/each}
+	</div>
+</div>
diff --git a/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte b/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte
index 2d57d26..207054f 100644
--- a/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte
+++ b/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte
@@ -1,40 +1,76 @@
 <script lang="ts">
-    import { type CalendarCustomizations } from "@/cal.utils";
-    import { CalendarPlus, Clock, } from "@lucide/svelte";
-    import { type EventDBModel } from "@/event.utils";
-    import { Temporal } from "temporal-polyfill";
-    import { MONTHTOSTRING } from "@/utils";
-    import Time from "@/Time.svelte";
+	import { type CalendarCustomizations } from "@/cal.utils";
+	import { CalendarPlus, Clock } from "@lucide/svelte";
+	import { type EventDBModel } from "@/event.utils";
+	import { Temporal } from "temporal-polyfill";
+	import { MONTHTOSTRING } from "@/utils";
+	import Time from "@/Time.svelte";
 
-    let { event, currentDay, calendarCustomizations, timeZone, fontScale }: { event: EventDBModel, currentDay: Temporal.ZonedDateTime, calendarCustomizations: CalendarCustomizations, timeZone: Temporal.TimeZoneLike, fontScale: number } = $props();
+	let {
+		event,
+		currentDay,
+		calendarCustomizations,
+		timeZone,
+		fontScale
+	}: {
+		event: EventDBModel;
+		currentDay: Temporal.ZonedDateTime;
+		calendarCustomizations: CalendarCustomizations;
+		timeZone: Temporal.TimeZoneLike;
+		fontScale: number;
+	} = $props();
 
-    const start = $derived(Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone));
-    const end = $derived(Temporal.Instant.from(event.endTime).toZonedDateTimeISO(timeZone));
+	const start = $derived(Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone));
+	const end = $derived(Temporal.Instant.from(event.endTime).toZonedDateTimeISO(timeZone));
 
-    const hours = $derived(start.until(end, { largestUnit: "hours" }).total({ unit: "hours" }));
+	const hours = $derived(start.until(end, { largestUnit: "hours" }).total({ unit: "hours" }));
 
-    const EVENT_DAY_NUMBER = $derived(Math.ceil(Math.abs((currentDay ? currentDay.toInstant().epochMilliseconds : 0) - start.startOfDay().toInstant().epochMilliseconds) / (1000 * 60 * 60 * 24)+1));
-    const MULTI_DAY_EVENT = $derived(hours === 24 ? start.hour !== 0 : hours > 24);
+	const EVENT_DAY_NUMBER = $derived(
+		Math.ceil(
+			Math.abs(
+				(currentDay ? currentDay.toInstant().epochMilliseconds : 0) -
+					start.startOfDay().toInstant().epochMilliseconds
+			) /
+				(1000 * 60 * 60 * 24) +
+				1
+		)
+	);
+	const MULTI_DAY_EVENT = $derived(hours === 24 ? start.hour !== 0 : hours > 24);
 </script>
 
 <div class="dark rounded bg-foreground p-2 flex flex-col gap-2" style="border: 1px solid #333333">
-    <div class="dark flex items-start justify-between">
-        <h3 class="dark font-semibold text-white pr-2" style="font-size: {fontScale * 16}px;">{event.name}</h3>
-    </div>
-    
-    <div class="flex items-center gap-2 text-sm text-gray-400">
-        <Clock class="h-4 w-4" />
-        {#if MULTI_DAY_EVENT}
-            <span style="font-size: {fontScale * 14}px;" class="text-gray-300">{MONTHTOSTRING[start.month]} {start.day}, <Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {MONTHTOSTRING[end.month]} {end.day}, <Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span>
-        {:else}
-            <span style="font-size: {fontScale * 14}px;" class="text-gray-300"><Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {#if hours === 24 && start.hour === 0}{MONTHTOSTRING[end.month]} {end.day}, {/if} <Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span>
-        {/if}
-    </div>
+	<div class="dark flex items-start justify-between">
+		<h3 class="dark font-semibold text-white pr-2" style="font-size: {fontScale * 16}px;">
+			{event.name}
+		</h3>
+	</div>
 
-    {#if MULTI_DAY_EVENT}
-        <div class="flex items-center gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
-            <CalendarPlus class="h-4 w-4" />
-            <span class="text-gray-300">Multi-day event - Day {EVENT_DAY_NUMBER}</span>
-        </div>
-    {/if}
-</div>
\ No newline at end of file
+	<div class="flex items-center gap-2 text-sm text-gray-400">
+		<Clock class="h-4 w-4" />
+		{#if MULTI_DAY_EVENT}
+			<span style="font-size: {fontScale * 14}px;" class="text-gray-300"
+				>{MONTHTOSTRING[start.month]}
+				{start.day}, <Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {MONTHTOSTRING[
+					end.month
+				]}
+				{end.day}, <Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span
+			>
+		{:else}
+			<span style="font-size: {fontScale * 14}px;" class="text-gray-300"
+				><Time date={start} useAMPM={calendarCustomizations.useAMPM} /> - {#if hours === 24 && start.hour === 0}{MONTHTOSTRING[
+						end.month
+					]}
+					{end.day},
+				{/if}
+				<Time date={end} useAMPM={calendarCustomizations.useAMPM} /></span
+			>
+		{/if}
+	</div>
+
+	{#if MULTI_DAY_EVENT}
+		<div class="flex items-center gap-2 text-gray-400" style="font-size: {fontScale * 14}px;">
+			<CalendarPlus class="h-4 w-4" />
+			<span class="text-gray-300">Multi-day event - Day {EVENT_DAY_NUMBER}</span>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/components/ui/avatar/index.ts b/frontend/src/lib/components/ui/avatar/index.ts
index d06457b..b08c780 100644
--- a/frontend/src/lib/components/ui/avatar/index.ts
+++ b/frontend/src/lib/components/ui/avatar/index.ts
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Avatar,
 	Image as AvatarImage,
-	Fallback as AvatarFallback,
+	Fallback as AvatarFallback
 };
diff --git a/frontend/src/lib/components/ui/badge/badge.svelte b/frontend/src/lib/components/ui/badge/badge.svelte
index bfaa9c5..33233da 100644
--- a/frontend/src/lib/components/ui/badge/badge.svelte
+++ b/frontend/src/lib/components/ui/badge/badge.svelte
@@ -5,18 +5,17 @@
 		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 text-xs font-medium transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
 		variants: {
 			variant: {
-				default:
-					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
 				secondary:
 					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
 				destructive:
 					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
-				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
-			},
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-		},
+			variant: "default"
+		}
 	});
 
 	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
diff --git a/frontend/src/lib/components/ui/button/button.svelte b/frontend/src/lib/components/ui/button/button.svelte
index 2105474..b9a587c 100644
--- a/frontend/src/lib/components/ui/button/button.svelte
+++ b/frontend/src/lib/components/ui/button/button.svelte
@@ -14,7 +14,7 @@
 					"bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border",
 				secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
 				ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-				link: "text-primary underline-offset-4 hover:underline",
+				link: "text-primary underline-offset-4 hover:underline"
 			},
 			size: {
 				default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -22,13 +22,13 @@
 				lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
 				icon: "size-9",
 				"icon-sm": "size-8",
-				"icon-lg": "size-10",
-			},
+				"icon-lg": "size-10"
+			}
 		},
 		defaultVariants: {
 			variant: "default",
-			size: "default",
-		},
+			size: "default"
+		}
 	});
 
 	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
diff --git a/frontend/src/lib/components/ui/button/index.ts b/frontend/src/lib/components/ui/button/index.ts
index fb585d7..068bfa2 100644
--- a/frontend/src/lib/components/ui/button/index.ts
+++ b/frontend/src/lib/components/ui/button/index.ts
@@ -2,7 +2,7 @@ import Root, {
 	type ButtonProps,
 	type ButtonSize,
 	type ButtonVariant,
-	buttonVariants,
+	buttonVariants
 } from "./button.svelte";
 
 export {
@@ -13,5 +13,5 @@ export {
 	buttonVariants,
 	type ButtonProps,
 	type ButtonSize,
-	type ButtonVariant,
+	type ButtonVariant
 };
diff --git a/frontend/src/lib/components/ui/calendar/calendar-caption.svelte b/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
index 5c93037..d545234 100644
--- a/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar-caption.svelte
@@ -14,7 +14,7 @@
 		month,
 		locale,
 		placeholder = $bindable(),
-		monthIndex = 0,
+		monthIndex = 0
 	}: {
 		captionLayout: ComponentProps<typeof Calendar>["captionLayout"];
 		months: ComponentProps<typeof CalendarMonthSelect>["months"];
diff --git a/frontend/src/lib/components/ui/calendar/calendar.svelte b/frontend/src/lib/components/ui/calendar/calendar.svelte
index 29b6fff..0c8ee1c 100644
--- a/frontend/src/lib/components/ui/calendar/calendar.svelte
+++ b/frontend/src/lib/components/ui/calendar/calendar.svelte
@@ -97,7 +97,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 											{#if day}
 												{@render day({
 													day: date,
-													outsideMonth: !isEqualMonth(date, month.value),
+													outsideMonth: !isEqualMonth(date, month.value)
 												})}
 											{:else}
 												<Calendar.Day />
diff --git a/frontend/src/lib/components/ui/calendar/index.ts b/frontend/src/lib/components/ui/calendar/index.ts
index f3a16d2..e6f7726 100644
--- a/frontend/src/lib/components/ui/calendar/index.ts
+++ b/frontend/src/lib/components/ui/calendar/index.ts
@@ -36,5 +36,5 @@ export {
 	MonthSelect,
 	Caption,
 	//
-	Root as Calendar,
+	Root as Calendar
 };
diff --git a/frontend/src/lib/components/ui/card/card.svelte b/frontend/src/lib/components/ui/card/card.svelte
index 67b820b..2ccde86 100644
--- a/frontend/src/lib/components/ui/card/card.svelte
+++ b/frontend/src/lib/components/ui/card/card.svelte
@@ -26,4 +26,4 @@
 	div {
 		max-width: calc(100vw - 8px) !important;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/lib/components/ui/card/index.ts b/frontend/src/lib/components/ui/card/index.ts
index 4d3fce4..10daffb 100644
--- a/frontend/src/lib/components/ui/card/index.ts
+++ b/frontend/src/lib/components/ui/card/index.ts
@@ -21,5 +21,5 @@ export {
 	Footer as CardFooter,
 	Header as CardHeader,
 	Title as CardTitle,
-	Action as CardAction,
+	Action as CardAction
 };
diff --git a/frontend/src/lib/components/ui/carousel/carousel-content.svelte b/frontend/src/lib/components/ui/carousel/carousel-content.svelte
index 6b169be..e315003 100644
--- a/frontend/src/lib/components/ui/carousel/carousel-content.svelte
+++ b/frontend/src/lib/components/ui/carousel/carousel-content.svelte
@@ -22,9 +22,9 @@
 			container: "[data-embla-container]",
 			slides: "[data-embla-slide]",
 			...emblaCtx.options,
-			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
+			axis: emblaCtx.orientation === "horizontal" ? "x" : "y"
 		},
-		plugins: emblaCtx.plugins,
+		plugins: emblaCtx.plugins
 	}}
 	onemblaInit={emblaCtx.onInit}
 >
diff --git a/frontend/src/lib/components/ui/carousel/carousel.svelte b/frontend/src/lib/components/ui/carousel/carousel.svelte
index 9f781e5..4f581d7 100644
--- a/frontend/src/lib/components/ui/carousel/carousel.svelte
+++ b/frontend/src/lib/components/ui/carousel/carousel.svelte
@@ -3,7 +3,7 @@
 		type CarouselAPI,
 		type CarouselProps,
 		type EmblaContext,
-		setEmblaContext,
+		setEmblaContext
 	} from "./context.js";
 	import { cn, type WithElementRef } from "$lib/utils.js";
 
@@ -34,7 +34,7 @@
 		onInit,
 		scrollSnaps: [],
 		selectedIndex: 0,
-		scrollTo,
+		scrollTo
 	});
 
 	setEmblaContext(carouselState);
diff --git a/frontend/src/lib/components/ui/carousel/context.ts b/frontend/src/lib/components/ui/carousel/context.ts
index a5fd74f..a02fff7 100644
--- a/frontend/src/lib/components/ui/carousel/context.ts
+++ b/frontend/src/lib/components/ui/carousel/context.ts
@@ -1,7 +1,7 @@
 import type { WithElementRef } from "$lib/utils.js";
 import type {
 	EmblaCarouselSvelteType,
-	default as emblaCarouselSvelte,
+	default as emblaCarouselSvelte
 } from "embla-carousel-svelte";
 import { getContext, hasContext, setContext } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
diff --git a/frontend/src/lib/components/ui/carousel/index.ts b/frontend/src/lib/components/ui/carousel/index.ts
index 957fc74..9aaf431 100644
--- a/frontend/src/lib/components/ui/carousel/index.ts
+++ b/frontend/src/lib/components/ui/carousel/index.ts
@@ -15,5 +15,5 @@ export {
 	Content as CarouselContent,
 	Item as CarouselItem,
 	Previous as CarouselPrevious,
-	Next as CarouselNext,
+	Next as CarouselNext
 };
diff --git a/frontend/src/lib/components/ui/checkbox/index.ts b/frontend/src/lib/components/ui/checkbox/index.ts
index 6d92d94..5fba5a4 100644
--- a/frontend/src/lib/components/ui/checkbox/index.ts
+++ b/frontend/src/lib/components/ui/checkbox/index.ts
@@ -2,5 +2,5 @@ import Root from "./checkbox.svelte";
 export {
 	Root,
 	//
-	Root as Checkbox,
+	Root as Checkbox
 };
diff --git a/frontend/src/lib/components/ui/collapsible/index.ts b/frontend/src/lib/components/ui/collapsible/index.ts
index 169b479..d5db2aa 100644
--- a/frontend/src/lib/components/ui/collapsible/index.ts
+++ b/frontend/src/lib/components/ui/collapsible/index.ts
@@ -9,5 +9,5 @@ export {
 	//
 	Root as Collapsible,
 	Content as CollapsibleContent,
-	Trigger as CollapsibleTrigger,
+	Trigger as CollapsibleTrigger
 };
diff --git a/frontend/src/lib/components/ui/dialog/index.ts b/frontend/src/lib/components/ui/dialog/index.ts
index dce1d9d..790315c 100644
--- a/frontend/src/lib/components/ui/dialog/index.ts
+++ b/frontend/src/lib/components/ui/dialog/index.ts
@@ -33,5 +33,5 @@ export {
 	Overlay as DialogOverlay,
 	Content as DialogContent,
 	Description as DialogDescription,
-	Close as DialogClose,
+	Close as DialogClose
 };
diff --git a/frontend/src/lib/components/ui/drawer/index.ts b/frontend/src/lib/components/ui/drawer/index.ts
index cfbdb8b..6dce95d 100644
--- a/frontend/src/lib/components/ui/drawer/index.ts
+++ b/frontend/src/lib/components/ui/drawer/index.ts
@@ -37,5 +37,5 @@ export {
 	Title as DrawerTitle,
 	Trigger as DrawerTrigger,
 	Portal as DrawerPortal,
-	Close as DrawerClose,
+	Close as DrawerClose
 };
diff --git a/frontend/src/lib/components/ui/dropdown-menu/index.ts b/frontend/src/lib/components/ui/dropdown-menu/index.ts
index 1cf9f70..342f314 100644
--- a/frontend/src/lib/components/ui/dropdown-menu/index.ts
+++ b/frontend/src/lib/components/ui/dropdown-menu/index.ts
@@ -45,5 +45,5 @@ export {
 	Sub,
 	SubContent,
 	SubTrigger,
-	Trigger,
+	Trigger
 };
diff --git a/frontend/src/lib/components/ui/empty/empty-media.svelte b/frontend/src/lib/components/ui/empty/empty-media.svelte
index 0b4e45d..323be1e 100644
--- a/frontend/src/lib/components/ui/empty/empty-media.svelte
+++ b/frontend/src/lib/components/ui/empty/empty-media.svelte
@@ -6,12 +6,12 @@
 		variants: {
 			variant: {
 				default: "bg-transparent",
-				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
-			},
+				icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-		},
+			variant: "default"
+		}
 	});
 
 	export type EmptyMediaVariant = VariantProps<typeof emptyMediaVariants>["variant"];
diff --git a/frontend/src/lib/components/ui/empty/index.ts b/frontend/src/lib/components/ui/empty/index.ts
index ae4c106..ee84b29 100644
--- a/frontend/src/lib/components/ui/empty/index.ts
+++ b/frontend/src/lib/components/ui/empty/index.ts
@@ -18,5 +18,5 @@ export {
 	Media as EmptyMedia,
 	Title as EmptyTitle,
 	Description as EmptyDescription,
-	Content as EmptyContent,
+	Content as EmptyContent
 };
diff --git a/frontend/src/lib/components/ui/field/field-separator.svelte b/frontend/src/lib/components/ui/field/field-separator.svelte
index 12bcb77..e06410a 100644
--- a/frontend/src/lib/components/ui/field/field-separator.svelte
+++ b/frontend/src/lib/components/ui/field/field-separator.svelte
@@ -20,10 +20,7 @@
 	bind:this={ref}
 	data-slot="field-separator"
 	data-content={hasContent}
-	class={cn(
-		"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
-		className
-	)}
+	class={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)}
 	{...restProps}
 >
 	<Separator class="absolute inset-0 top-1/2" />
diff --git a/frontend/src/lib/components/ui/field/field.svelte b/frontend/src/lib/components/ui/field/field.svelte
index 3284203..0daefca 100644
--- a/frontend/src/lib/components/ui/field/field.svelte
+++ b/frontend/src/lib/components/ui/field/field.svelte
@@ -9,18 +9,18 @@
 				horizontal: [
 					"flex-row items-center",
 					"[&>[data-slot=field-label]]:flex-auto",
-					"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+					"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
 				],
 				responsive: [
 					"flex-col @md/field-group:flex-row @md/field-group:items-center [&>*]:w-full @md/field-group:[&>*]:w-auto [&>.sr-only]:w-auto",
 					"@md/field-group:[&>[data-slot=field-label]]:flex-auto",
-					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
-				],
-			},
+					"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+				]
+			}
 		},
 		defaultVariants: {
-			orientation: "vertical",
-		},
+			orientation: "vertical"
+		}
 	});
 
 	export type FieldOrientation = VariantProps<typeof fieldVariants>["orientation"];
diff --git a/frontend/src/lib/components/ui/field/index.ts b/frontend/src/lib/components/ui/field/index.ts
index a644a95..39fbe1e 100644
--- a/frontend/src/lib/components/ui/field/index.ts
+++ b/frontend/src/lib/components/ui/field/index.ts
@@ -29,5 +29,5 @@ export {
 	Title as FieldTitle,
 	Description as FieldDescription,
 	Separator as FieldSeparator,
-	Error as FieldError,
+	Error as FieldError
 };
diff --git a/frontend/src/lib/components/ui/input/index.ts b/frontend/src/lib/components/ui/input/index.ts
index f47b6d3..c9ffe28 100644
--- a/frontend/src/lib/components/ui/input/index.ts
+++ b/frontend/src/lib/components/ui/input/index.ts
@@ -3,5 +3,5 @@ import Root from "./input.svelte";
 export {
 	Root,
 	//
-	Root as Input,
+	Root as Input
 };
diff --git a/frontend/src/lib/components/ui/item/index.ts b/frontend/src/lib/components/ui/item/index.ts
index 168bc3e..f3a812e 100644
--- a/frontend/src/lib/components/ui/item/index.ts
+++ b/frontend/src/lib/components/ui/item/index.ts
@@ -30,5 +30,5 @@ export {
 	Title as ItemTitle,
 	Description as ItemDescription,
 	Actions as ItemActions,
-	Media as ItemMedia,
+	Media as ItemMedia
 };
diff --git a/frontend/src/lib/components/ui/item/item-group.svelte b/frontend/src/lib/components/ui/item/item-group.svelte
index 3e58e36..c8f1841 100644
--- a/frontend/src/lib/components/ui/item/item-group.svelte
+++ b/frontend/src/lib/components/ui/item/item-group.svelte
@@ -14,7 +14,10 @@
 	bind:this={ref}
 	role="list"
 	data-slot="item-group"
-	class={cn("gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col", className)}
+	class={cn(
+		"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item-media.svelte b/frontend/src/lib/components/ui/item/item-media.svelte
index 45def5a..74e2695 100644
--- a/frontend/src/lib/components/ui/item/item-media.svelte
+++ b/frontend/src/lib/components/ui/item/item-media.svelte
@@ -7,12 +7,13 @@
 			variant: {
 				default: "bg-transparent",
 				icon: "[&_svg:not([class*='size-'])]:size-4",
-				image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover",
-			},
+				image:
+					"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+			}
 		},
 		defaultVariants: {
-			variant: "default",
-		},
+			variant: "default"
+		}
 	});
 
 	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
diff --git a/frontend/src/lib/components/ui/item/item-title.svelte b/frontend/src/lib/components/ui/item/item-title.svelte
index c9a0f9b..fc805af 100644
--- a/frontend/src/lib/components/ui/item/item-title.svelte
+++ b/frontend/src/lib/components/ui/item/item-title.svelte
@@ -13,7 +13,10 @@
 <div
 	bind:this={ref}
 	data-slot="item-title"
-	class={cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className)}
+	class={cn(
+		"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}
diff --git a/frontend/src/lib/components/ui/item/item.svelte b/frontend/src/lib/components/ui/item/item.svelte
index 8eff328..2a10b8a 100644
--- a/frontend/src/lib/components/ui/item/item.svelte
+++ b/frontend/src/lib/components/ui/item/item.svelte
@@ -7,18 +7,18 @@
 			variant: {
 				default: "border-transparent",
 				outline: "border-border",
-				muted: "bg-muted/50 border-transparent",
+				muted: "bg-muted/50 border-transparent"
 			},
 			size: {
 				default: "gap-3.5 px-4 py-3.5",
 				sm: "gap-2.5 px-3 py-2.5",
-				xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
-			},
+				xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+			}
 		},
 		defaultVariants: {
 			variant: "default",
-			size: "default",
-		},
+			size: "default"
+		}
 	});
 
 	export type ItemSize = VariantProps<typeof itemVariants>["size"];
@@ -48,7 +48,7 @@
 		"data-slot": "item",
 		"data-variant": variant,
 		"data-size": size,
-		...restProps,
+		...restProps
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/kbd/index.ts b/frontend/src/lib/components/ui/kbd/index.ts
index 6aa7f07..c622e9a 100644
--- a/frontend/src/lib/components/ui/kbd/index.ts
+++ b/frontend/src/lib/components/ui/kbd/index.ts
@@ -6,5 +6,5 @@ export {
 	Group,
 	//
 	Root as Kbd,
-	Group as KbdGroup,
+	Group as KbdGroup
 };
diff --git a/frontend/src/lib/components/ui/label/index.ts b/frontend/src/lib/components/ui/label/index.ts
index 8bfca0b..2c3128c 100644
--- a/frontend/src/lib/components/ui/label/index.ts
+++ b/frontend/src/lib/components/ui/label/index.ts
@@ -3,5 +3,5 @@ import Root from "./label.svelte";
 export {
 	Root,
 	//
-	Root as Label,
+	Root as Label
 };
diff --git a/frontend/src/lib/components/ui/popover/index.ts b/frontend/src/lib/components/ui/popover/index.ts
index 9f30922..1a8a309 100644
--- a/frontend/src/lib/components/ui/popover/index.ts
+++ b/frontend/src/lib/components/ui/popover/index.ts
@@ -13,5 +13,5 @@ export {
 	Root as Popover,
 	Content as PopoverContent,
 	Trigger as PopoverTrigger,
-	Close as PopoverClose,
+	Close as PopoverClose
 };
diff --git a/frontend/src/lib/components/ui/range-calendar/index.ts b/frontend/src/lib/components/ui/range-calendar/index.ts
index d2d258b..aea5e57 100644
--- a/frontend/src/lib/components/ui/range-calendar/index.ts
+++ b/frontend/src/lib/components/ui/range-calendar/index.ts
@@ -36,5 +36,5 @@ export {
 	Nav,
 	Month,
 	//
-	Root as RangeCalendar,
+	Root as RangeCalendar
 };
diff --git a/frontend/src/lib/components/ui/range-calendar/range-calendar-caption.svelte b/frontend/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
index 944654d..bb7c7bc 100644
--- a/frontend/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
+++ b/frontend/src/lib/components/ui/range-calendar/range-calendar-caption.svelte
@@ -14,7 +14,7 @@
 		month,
 		locale,
 		placeholder = $bindable(),
-		monthIndex = 0,
+		monthIndex = 0
 	}: {
 		captionLayout: ComponentProps<typeof RangeCalendar>["captionLayout"];
 		months: ComponentProps<typeof RangeCalendarMonthSelect>["months"];
diff --git a/frontend/src/lib/components/ui/range-calendar/range-calendar.svelte b/frontend/src/lib/components/ui/range-calendar/range-calendar.svelte
index 4d917a6..573874b 100644
--- a/frontend/src/lib/components/ui/range-calendar/range-calendar.svelte
+++ b/frontend/src/lib/components/ui/range-calendar/range-calendar.svelte
@@ -94,7 +94,7 @@
 											{#if day}
 												{@render day({
 													day: date,
-													outsideMonth: !isEqualMonth(date, month.value),
+													outsideMonth: !isEqualMonth(date, month.value)
 												})}
 											{:else}
 												<RangeCalendar.Day />
diff --git a/frontend/src/lib/components/ui/select/index.ts b/frontend/src/lib/components/ui/select/index.ts
index 9e8d3e9..ace6bf9 100644
--- a/frontend/src/lib/components/ui/select/index.ts
+++ b/frontend/src/lib/components/ui/select/index.ts
@@ -33,5 +33,5 @@ export {
 	Separator as SelectSeparator,
 	ScrollDownButton as SelectScrollDownButton,
 	ScrollUpButton as SelectScrollUpButton,
-	GroupHeading as SelectGroupHeading,
+	GroupHeading as SelectGroupHeading
 };
diff --git a/frontend/src/lib/components/ui/separator/index.ts b/frontend/src/lib/components/ui/separator/index.ts
index 82442d2..dbfb139 100644
--- a/frontend/src/lib/components/ui/separator/index.ts
+++ b/frontend/src/lib/components/ui/separator/index.ts
@@ -3,5 +3,5 @@ import Root from "./separator.svelte";
 export {
 	Root,
 	//
-	Root as Separator,
+	Root as Separator
 };
diff --git a/frontend/src/lib/components/ui/sheet/index.ts b/frontend/src/lib/components/ui/sheet/index.ts
index 01d40c8..29e0d0c 100644
--- a/frontend/src/lib/components/ui/sheet/index.ts
+++ b/frontend/src/lib/components/ui/sheet/index.ts
@@ -32,5 +32,5 @@ export {
 	Header as SheetHeader,
 	Footer as SheetFooter,
 	Title as SheetTitle,
-	Description as SheetDescription,
+	Description as SheetDescription
 };
diff --git a/frontend/src/lib/components/ui/sheet/sheet-content.svelte b/frontend/src/lib/components/ui/sheet/sheet-content.svelte
index 856922e..aaa91e7 100644
--- a/frontend/src/lib/components/ui/sheet/sheet-content.svelte
+++ b/frontend/src/lib/components/ui/sheet/sheet-content.svelte
@@ -5,14 +5,16 @@
 		variants: {
 			side: {
 				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+				bottom:
+					"data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
 				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-				right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-			},
+				right:
+					"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
+			}
 		},
 		defaultVariants: {
-			side: "right",
-		},
+			side: "right"
+		}
 	});
 
 	export type Side = VariantProps<typeof sheetVariants>["side"];
diff --git a/frontend/src/lib/components/ui/sidebar/context.svelte.ts b/frontend/src/lib/components/ui/sidebar/context.svelte.ts
index 15248ad..6f9b4a9 100644
--- a/frontend/src/lib/components/ui/sidebar/context.svelte.ts
+++ b/frontend/src/lib/components/ui/sidebar/context.svelte.ts
@@ -53,9 +53,7 @@ class SidebarState {
 	};
 
 	toggle = () => {
-		return this.#isMobile.current
-			? (this.openMobile = !this.openMobile)
-			: this.setOpen(!this.open);
+		return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);
 	};
 }
 
diff --git a/frontend/src/lib/components/ui/sidebar/index.ts b/frontend/src/lib/components/ui/sidebar/index.ts
index 318a341..5c2e6b8 100644
--- a/frontend/src/lib/components/ui/sidebar/index.ts
+++ b/frontend/src/lib/components/ui/sidebar/index.ts
@@ -71,5 +71,5 @@ export {
 	Separator as SidebarSeparator,
 	Trigger as SidebarTrigger,
 	Trigger,
-	useSidebar,
+	useSidebar
 };
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte
index fb84e4a..d9579fd 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-group-action.svelte
@@ -23,7 +23,7 @@
 		),
 		"data-slot": "sidebar-group-action",
 		"data-sidebar": "group-action",
-		...restProps,
+		...restProps
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte
index e292945..2b6287a 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-group-label.svelte
@@ -21,7 +21,7 @@
 		),
 		"data-slot": "sidebar-group-label",
 		"data-sidebar": "group-label",
-		...restProps,
+		...restProps
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
index fa3fb0c..fb386c3 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-menu-action.svelte
@@ -30,7 +30,7 @@
 		),
 		"data-slot": "sidebar-menu-action",
 		"data-sidebar": "menu-action",
-		...restProps,
+		...restProps
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
index 4bef683..57e2fa2 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-menu-button.svelte
@@ -7,23 +7,21 @@
 			variant: {
 				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
 				outline:
-					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+					"bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
 			},
 			size: {
 				default: "h-8 text-sm",
 				sm: "h-7 text-xs",
-				lg: "group-data-[collapsible=icon]:p-0! h-12 text-sm",
-			},
+				lg: "group-data-[collapsible=icon]:p-0! h-12 text-sm"
+			}
 		},
 		defaultVariants: {
 			variant: "default",
-			size: "default",
-		},
+			size: "default"
+		}
 	});
 
-	export type SidebarMenuButtonVariant = VariantProps<
-		typeof sidebarMenuButtonVariants
-	>["variant"];
+	export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>["variant"];
 	export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>["size"];
 </script>
 
@@ -63,7 +61,7 @@
 		"data-sidebar": "menu-button",
 		"data-size": size,
 		"data-active": isActive,
-		...restProps,
+		...restProps
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
index 987f104..d221310 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-menu-sub-button.svelte
@@ -30,7 +30,7 @@
 		"data-sidebar": "menu-sub-button",
 		"data-size": size,
 		"data-active": isActive,
-		...restProps,
+		...restProps
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte b/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte
index 5b0d0aa..ff9ffca 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar-provider.svelte
@@ -6,7 +6,7 @@
 		SIDEBAR_COOKIE_MAX_AGE,
 		SIDEBAR_COOKIE_NAME,
 		SIDEBAR_WIDTH,
-		SIDEBAR_WIDTH_ICON,
+		SIDEBAR_WIDTH_ICON
 	} from "./constants.js";
 	import { setSidebar } from "./context.svelte.js";
 
@@ -31,7 +31,7 @@
 
 			// This sets the cookie to keep the sidebar state.
 			document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
-		},
+		}
 	});
 </script>
 
diff --git a/frontend/src/lib/components/ui/sidebar/sidebar.svelte b/frontend/src/lib/components/ui/sidebar/sidebar.svelte
index 3e9eba9..a4ce730 100644
--- a/frontend/src/lib/components/ui/sidebar/sidebar.svelte
+++ b/frontend/src/lib/components/ui/sidebar/sidebar.svelte
@@ -34,10 +34,7 @@
 		{@render children?.()}
 	</div>
 {:else if sidebar.isMobile}
-	<Sheet.Root
-		bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)}
-		{...restProps}
-	>
+	<Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
 		<Sheet.Content
 			data-sidebar="sidebar"
 			data-slot="sidebar"
diff --git a/frontend/src/lib/components/ui/skeleton/index.ts b/frontend/src/lib/components/ui/skeleton/index.ts
index 186db21..2be5c50 100644
--- a/frontend/src/lib/components/ui/skeleton/index.ts
+++ b/frontend/src/lib/components/ui/skeleton/index.ts
@@ -3,5 +3,5 @@ import Root from "./skeleton.svelte";
 export {
 	Root,
 	//
-	Root as Skeleton,
+	Root as Skeleton
 };
diff --git a/frontend/src/lib/components/ui/slider/index.ts b/frontend/src/lib/components/ui/slider/index.ts
index 820f209..3844186 100644
--- a/frontend/src/lib/components/ui/slider/index.ts
+++ b/frontend/src/lib/components/ui/slider/index.ts
@@ -3,5 +3,5 @@ import Root from "./slider.svelte";
 export {
 	Root,
 	//
-	Root as Slider,
+	Root as Slider
 };
diff --git a/frontend/src/lib/components/ui/slider/slider.svelte b/frontend/src/lib/components/ui/slider/slider.svelte
index 53f2b6e..8389b33 100644
--- a/frontend/src/lib/components/ui/slider/slider.svelte
+++ b/frontend/src/lib/components/ui/slider/slider.svelte
@@ -36,9 +36,7 @@ get along, so we shut typescript up by casting `value` to `never`.
 		>
 			<SliderPrimitive.Range
 				data-slot="slider-range"
-				class={cn(
-					"bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full"
-				)}
+				class={cn("bg-primary absolute select-none data-horizontal:h-full data-vertical:w-full")}
 			/>
 		</span>
 		{#each thumbItems as thumb (thumb.index)}
diff --git a/frontend/src/lib/components/ui/switch/index.ts b/frontend/src/lib/components/ui/switch/index.ts
index f5533db..f0e5fb7 100644
--- a/frontend/src/lib/components/ui/switch/index.ts
+++ b/frontend/src/lib/components/ui/switch/index.ts
@@ -3,5 +3,5 @@ import Root from "./switch.svelte";
 export {
 	Root,
 	//
-	Root as Switch,
+	Root as Switch
 };
diff --git a/frontend/src/lib/components/ui/table/index.ts b/frontend/src/lib/components/ui/table/index.ts
index 14695c8..450c9b3 100644
--- a/frontend/src/lib/components/ui/table/index.ts
+++ b/frontend/src/lib/components/ui/table/index.ts
@@ -24,5 +24,5 @@ export {
 	Footer as TableFooter,
 	Head as TableHead,
 	Header as TableHeader,
-	Row as TableRow,
+	Row as TableRow
 };
diff --git a/frontend/src/lib/components/ui/tabs/index.ts b/frontend/src/lib/components/ui/tabs/index.ts
index 12d4327..56fe91c 100644
--- a/frontend/src/lib/components/ui/tabs/index.ts
+++ b/frontend/src/lib/components/ui/tabs/index.ts
@@ -12,5 +12,5 @@ export {
 	Root as Tabs,
 	Content as TabsContent,
 	List as TabsList,
-	Trigger as TabsTrigger,
+	Trigger as TabsTrigger
 };
diff --git a/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
index 08932b6..48d14b0 100644
--- a/frontend/src/lib/components/ui/tabs/tabs-list.svelte
+++ b/frontend/src/lib/components/ui/tabs/tabs-list.svelte
@@ -2,11 +2,7 @@
 	import { Tabs as TabsPrimitive } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
-	let {
-		ref = $bindable(null),
-		class: className,
-		...restProps
-	}: TabsPrimitive.ListProps = $props();
+	let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ListProps = $props();
 </script>
 
 <TabsPrimitive.List
diff --git a/frontend/src/lib/components/ui/textarea/index.ts b/frontend/src/lib/components/ui/textarea/index.ts
index ace797a..99752e9 100644
--- a/frontend/src/lib/components/ui/textarea/index.ts
+++ b/frontend/src/lib/components/ui/textarea/index.ts
@@ -3,5 +3,5 @@ import Root from "./textarea.svelte";
 export {
 	Root,
 	//
-	Root as Textarea,
+	Root as Textarea
 };
diff --git a/frontend/src/lib/components/ui/textarea/textarea.svelte b/frontend/src/lib/components/ui/textarea/textarea.svelte
index 7fcef1a..8942ba8 100644
--- a/frontend/src/lib/components/ui/textarea/textarea.svelte
+++ b/frontend/src/lib/components/ui/textarea/textarea.svelte
@@ -19,5 +19,4 @@
 		className
 	)}
 	bind:value
-	{...restProps}
-></textarea>
+	{...restProps}></textarea>
diff --git a/frontend/src/lib/components/ui/tooltip/index.ts b/frontend/src/lib/components/ui/tooltip/index.ts
index 313a7f0..f8dc9df 100644
--- a/frontend/src/lib/components/ui/tooltip/index.ts
+++ b/frontend/src/lib/components/ui/tooltip/index.ts
@@ -17,5 +17,5 @@ export {
 	Content as TooltipContent,
 	Trigger as TooltipTrigger,
 	Provider as TooltipProvider,
-	Portal as TooltipPortal,
+	Portal as TooltipPortal
 };
diff --git a/frontend/src/lib/dashboard/DashboardHeader.svelte b/frontend/src/lib/dashboard/DashboardHeader.svelte
index 05cf750..38284ad 100644
--- a/frontend/src/lib/dashboard/DashboardHeader.svelte
+++ b/frontend/src/lib/dashboard/DashboardHeader.svelte
@@ -1,40 +1,48 @@
 <script lang="ts">
-    import { type EventListDBModel, type ImageFeedDBModel } from "@/utils";
-    import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-    import EverythingSearch from "@/EverythingSearch.svelte";
-    import { type CalendarDBModel } from "@/cal.utils";
-    import { Button } from "@/components/ui/button";
-    import { Bell, Settings } from "@lucide/svelte";
+	import { type EventListDBModel, type ImageFeedDBModel } from "@/utils";
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import EverythingSearch from "@/EverythingSearch.svelte";
+	import { type CalendarDBModel } from "@/cal.utils";
+	import { Button } from "@/components/ui/button";
+	import { Bell, Settings } from "@lucide/svelte";
 
-    let { calendars, imageFeeds, eventLists }: { calendars: CalendarDBModel[], imageFeeds: ImageFeedDBModel[], eventLists: EventListDBModel[] } = $props();
+	let {
+		calendars,
+		imageFeeds,
+		eventLists
+	}: {
+		calendars: CalendarDBModel[];
+		imageFeeds: ImageFeedDBModel[];
+		eventLists: EventListDBModel[];
+	} = $props();
 </script>
 
 <header class="h-16 border-b border-border bg-card">
-    <div class="flex h-full items-center gap-4 px-4">
-        <div class="flex-1 relative flex items-center gap-4">
-            <Sidebar.Trigger class="w-9 h-9" />
-            <EverythingSearch {calendars} {imageFeeds} {eventLists} />
-        </div>
+	<div class="flex h-full items-center gap-4 px-4">
+		<div class="flex-1 relative flex items-center gap-4">
+			<Sidebar.Trigger class="w-9 h-9" />
+			<EverythingSearch {calendars} {imageFeeds} {eventLists} />
+		</div>
 
-        <div class="flex items-center gap-2">
-            <Button variant="ghost" size="icon" class="relative hover:bg-primary buttonHover">
-                <Bell class="h-5 w-5" />
-                <span class="absolute top-1.5 right-2 h-2 w-2 rounded-full bg-ring"></span>
-            </Button>
+		<div class="flex items-center gap-2">
+			<Button variant="ghost" size="icon" class="relative hover:bg-primary buttonHover">
+				<Bell class="h-5 w-5" />
+				<span class="absolute top-1.5 right-2 h-2 w-2 rounded-full bg-ring"></span>
+			</Button>
 
-            <Button variant="ghost" class="hover:bg-primary" size="icon">
-                <Settings class="h-5 w-5" />
-            </Button>
-        </div>
-    </div>
+			<Button variant="ghost" class="hover:bg-primary" size="icon">
+				<Settings class="h-5 w-5" />
+			</Button>
+		</div>
+	</div>
 </header>
 
 <style>
-    :global(.buttonHover:hover span) {
-        background-color: rgb(61, 152, 212);
-    }
+	:global(.buttonHover:hover span) {
+		background-color: rgb(61, 152, 212);
+	}
 
-    header {
-        max-width: 100vw;
-    }
-</style>
\ No newline at end of file
+	header {
+		max-width: 100vw;
+	}
+</style>
diff --git a/frontend/src/lib/dashboard/DashboardIsNavigating.svelte b/frontend/src/lib/dashboard/DashboardIsNavigating.svelte
index 0bc6ed2..f2d55a5 100644
--- a/frontend/src/lib/dashboard/DashboardIsNavigating.svelte
+++ b/frontend/src/lib/dashboard/DashboardIsNavigating.svelte
@@ -1,22 +1,22 @@
 <div class="absolute top-0 left-0 w-full h-1">
-    <div class="progress-bar-indicator"></div>
+	<div class="progress-bar-indicator"></div>
 </div>
 
 <style>
-    .progress-bar-indicator {
-  height: 100%;
-  width: 100%;
-   /* this will do the magic */
-  -webkit-mask:linear-gradient(#fff 0 0);
-          mask:linear-gradient(#fff 0 0);
-}
-.progress-bar-indicator::before {
-  content:"";
-  position:absolute;
-  top:0;
-  left:0;
-  right:0;
-  bottom:0;
-  background-image: linear-gradient(to right, red, blue); /* your gradient here */
-}
-</style>
\ No newline at end of file
+	.progress-bar-indicator {
+		height: 100%;
+		width: 100%;
+		/* this will do the magic */
+		-webkit-mask: linear-gradient(#fff 0 0);
+		mask: linear-gradient(#fff 0 0);
+	}
+	.progress-bar-indicator::before {
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background-image: linear-gradient(to right, red, blue); /* your gradient here */
+	}
+</style>
diff --git a/frontend/src/lib/dashboard/DashboardSidebar.svelte b/frontend/src/lib/dashboard/DashboardSidebar.svelte
index e27e189..4951ca2 100644
--- a/frontend/src/lib/dashboard/DashboardSidebar.svelte
+++ b/frontend/src/lib/dashboard/DashboardSidebar.svelte
@@ -1,226 +1,273 @@
 <script lang="ts">
-    import { Calendar, Home, GalleryHorizontalEnd, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, LayoutList, Gift, Link2, Flag, RefreshCw, Plus } from "@lucide/svelte";
-    import { getMyIntegrations } from "../../routes/(mainWebsite)/dashboard/backend.remote";
-    import { capitalizeFirstLetter, type IntegrationModel, type UserModel } from "@/utils";
-    import IntegrationInfoDialog from "./integrations/IntegrationInfoDialog.svelte";
-    import AddIntegrationDialog from "./integrations/AddIntegrationDialog.svelte";
-    import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
-    import { useSidebar } from "$lib/components/ui/sidebar/index.js";
-    import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-    import * as Avatar from "$lib/components/ui/avatar/index.js";
-    import StatusBadge from "./integrations/StatusBadge.svelte";
-    import BreezeIcon from "./integrations/BreezeIcon.svelte";
-    import XIcon from "./integrations/XIcon.svelte";
+	import {
+		Calendar,
+		Home,
+		GalleryHorizontalEnd,
+		ChevronsUpDownIcon,
+		CreditCardIcon,
+		LogOutIcon,
+		LayoutList,
+		Gift,
+		Link2,
+		Flag,
+		RefreshCw,
+		Plus
+	} from "@lucide/svelte";
+	import { getMyIntegrations } from "../../routes/(mainWebsite)/dashboard/backend.remote";
+	import { capitalizeFirstLetter, type IntegrationModel, type UserModel } from "@/utils";
+	import IntegrationInfoDialog from "./integrations/IntegrationInfoDialog.svelte";
+	import AddIntegrationDialog from "./integrations/AddIntegrationDialog.svelte";
+	import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
+	import { useSidebar } from "$lib/components/ui/sidebar/index.js";
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import * as Avatar from "$lib/components/ui/avatar/index.js";
+	import StatusBadge from "./integrations/StatusBadge.svelte";
+	import BreezeIcon from "./integrations/BreezeIcon.svelte";
+	import XIcon from "./integrations/XIcon.svelte";
 
-    let { 
-        user,
-        pathname,
-        userAvatar,
-        stripeCustomerPortal,
-        stripeSubscriptionUrl,
-        stripeTrialSubscriptionUrl
-    }: {
-        user: UserModel,
-        pathname: string,
-        userAvatar: string,
-        stripeCustomerPortal: string,
-        stripeSubscriptionUrl: string,
-        stripeTrialSubscriptionUrl: string
-    } = $props();
+	let {
+		user,
+		pathname,
+		userAvatar,
+		stripeCustomerPortal,
+		stripeSubscriptionUrl,
+		stripeTrialSubscriptionUrl
+	}: {
+		user: UserModel;
+		pathname: string;
+		userAvatar: string;
+		stripeCustomerPortal: string;
+		stripeSubscriptionUrl: string;
+		stripeTrialSubscriptionUrl: string;
+	} = $props();
 
-    const sidebar = useSidebar();
-    
-    const navigation = [
-      { title: "Home", icon: Home, url: "/dashboard" },
-      { title: "Calendars", icon: Calendar, url: "/dashboard/calendars"  },
-      { title: "Image Feeds", icon: GalleryHorizontalEnd, url: "/dashboard/image-feeds" },
-      { title: "Event Lists", icon: LayoutList, url: "/dashboard/event-lists" },
-      { title: "Dynamic URLs", url: "/dashboard/dynamic-urls", icon: Link2 },
-    ];
+	const sidebar = useSidebar();
 
-    let userAccountDropdownOpen = $state(false);
-    let addIntegrationDropdownOpen = $state(false);
-    let selectedIntegration: IntegrationModel | null = $state(null);
+	const navigation = [
+		{ title: "Home", icon: Home, url: "/dashboard" },
+		{ title: "Calendars", icon: Calendar, url: "/dashboard/calendars" },
+		{ title: "Image Feeds", icon: GalleryHorizontalEnd, url: "/dashboard/image-feeds" },
+		{ title: "Event Lists", icon: LayoutList, url: "/dashboard/event-lists" },
+		{ title: "Dynamic URLs", url: "/dashboard/dynamic-urls", icon: Link2 }
+	];
+
+	let userAccountDropdownOpen = $state(false);
+	let addIntegrationDropdownOpen = $state(false);
+	let selectedIntegration: IntegrationModel | null = $state(null);
 </script>
 
 <Sidebar.Root collapsible="icon" class="bg-card">
-    <Sidebar.Header>
-        <Sidebar.Menu>
-            <Sidebar.MenuItem>
-                <Sidebar.MenuButton
-                    size="lg"
-                    class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                >
-                    <div class="text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg bg-ring">
-                        <Calendar class="size-4" />
-                    </div>
-                    <div class="grid flex-1 text-left text-sm leading-tight">
-                        <span class="truncate font-medium">
-                            InfoSections
-                        </span>
-                        <span class="truncate text-xs">
-                            {#if user.accessLevel === "none"}Free{:else}{capitalizeFirstLetter(user.accessLevel)}{/if} Plan
-                        </span>
-                    </div>
-                </Sidebar.MenuButton>
-            </Sidebar.MenuItem>
-        </Sidebar.Menu>
-    </Sidebar.Header>
+	<Sidebar.Header>
+		<Sidebar.Menu>
+			<Sidebar.MenuItem>
+				<Sidebar.MenuButton
+					size="lg"
+					class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+				>
+					<div
+						class="text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg bg-ring"
+					>
+						<Calendar class="size-4" />
+					</div>
+					<div class="grid flex-1 text-left text-sm leading-tight">
+						<span class="truncate font-medium"> InfoSections </span>
+						<span class="truncate text-xs">
+							{#if user.accessLevel === "none"}Free{:else}{capitalizeFirstLetter(
+									user.accessLevel
+								)}{/if} Plan
+						</span>
+					</div>
+				</Sidebar.MenuButton>
+			</Sidebar.MenuItem>
+		</Sidebar.Menu>
+	</Sidebar.Header>
 
-    <Sidebar.Content>
-        <Sidebar.Group>
-            <Sidebar.GroupLabel>Dashboard</Sidebar.GroupLabel>
-            <Sidebar.Menu>
-                {#each navigation as item (item.title)}
-                    <Sidebar.MenuButton tooltipContent={item.title} class={pathname === item.url || (pathname.includes("/dashboard/calendars") && item.url === "/dashboard/calendars") || (pathname.includes("/dashboard/image-feeds") && item.url === "/dashboard/image-feeds") || (pathname.includes("/dashboard/event-lists") && item.url === "/dashboard/event-lists") ? "bg-ring/10 text-ring hover:text-ring hover:bg-ring/10" : "text-muted-foreground hover:bg-ring/10 hover:text-foreground"} onclick={() => {
-                        if (sidebar.openMobile) {
-                            sidebar.setOpenMobile(false);
-                        }
-                    }}>
-                        {#snippet child({ props })}
-                            <a href={item.url} {...props}>
-                                {#if item.icon}
-                                    <item.icon />
-                                {/if}
-                                <span>{item.title}</span>
-                            </a>
-                        {/snippet}
-                    </Sidebar.MenuButton>
-                {/each}
-            </Sidebar.Menu>
-        </Sidebar.Group>
+	<Sidebar.Content>
+		<Sidebar.Group>
+			<Sidebar.GroupLabel>Dashboard</Sidebar.GroupLabel>
+			<Sidebar.Menu>
+				{#each navigation as item (item.title)}
+					<Sidebar.MenuButton
+						tooltipContent={item.title}
+						class={pathname === item.url ||
+						(pathname.includes("/dashboard/calendars") && item.url === "/dashboard/calendars") ||
+						(pathname.includes("/dashboard/image-feeds") &&
+							item.url === "/dashboard/image-feeds") ||
+						(pathname.includes("/dashboard/event-lists") && item.url === "/dashboard/event-lists")
+							? "bg-ring/10 text-ring hover:text-ring hover:bg-ring/10"
+							: "text-muted-foreground hover:bg-ring/10 hover:text-foreground"}
+						onclick={() => {
+							if (sidebar.openMobile) {
+								sidebar.setOpenMobile(false);
+							}
+						}}
+					>
+						{#snippet child({ props })}
+							<a href={item.url} {...props}>
+								{#if item.icon}
+									<item.icon />
+								{/if}
+								<span>{item.title}</span>
+							</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				{/each}
+			</Sidebar.Menu>
+		</Sidebar.Group>
 
-        {#if sidebar.open || sidebar.isMobile}
-            <Sidebar.Group>
-                <Sidebar.GroupLabel>Integrations</Sidebar.GroupLabel>
-                <Sidebar.GroupAction title="Add Integration" onclick={() => {
-                    addIntegrationDropdownOpen = true;
-                    if (sidebar.openMobile) {
-                        sidebar.setOpenMobile(false);
-                    }
-                }}>
-                    <Plus />
-                    <span class="sr-only">Add Project</span>
-                </Sidebar.GroupAction>
-                <Sidebar.Menu>
-                    {#each await getMyIntegrations() as integration (`anintegration${integration.id}`)}
-                        <Sidebar.MenuButton tooltipContent={integration.prettyName} class="text-muted-foreground hover:bg-ring/10 hover:text-foreground" onclick={() => {
-                            if (sidebar.openMobile) {
-                                sidebar.setOpenMobile(false);
-                            }
-                            selectedIntegration = integration;
-                        }}>
-                            {#if integration.service === "planningcenter"}
-                                <Flag />
-                            {:else if integration.service === "breeze"}
-                                <BreezeIcon />
-                            {:else if integration.service === "twitter"}
-                                <XIcon />
-                            {:else}
-                                <RefreshCw />
-                            {/if}
-                            <span class="flex-1 truncate">{integration.prettyName}</span>
-                            <StatusBadge status={integration.status} />
-                        </Sidebar.MenuButton>
-                    {/each}
-                </Sidebar.Menu>
-            </Sidebar.Group>
-        {/if}
-    </Sidebar.Content>
+		{#if sidebar.open || sidebar.isMobile}
+			<Sidebar.Group>
+				<Sidebar.GroupLabel>Integrations</Sidebar.GroupLabel>
+				<Sidebar.GroupAction
+					title="Add Integration"
+					onclick={() => {
+						addIntegrationDropdownOpen = true;
+						if (sidebar.openMobile) {
+							sidebar.setOpenMobile(false);
+						}
+					}}
+				>
+					<Plus />
+					<span class="sr-only">Add Project</span>
+				</Sidebar.GroupAction>
+				<Sidebar.Menu>
+					{#each await getMyIntegrations() as integration (`anintegration${integration.id}`)}
+						<Sidebar.MenuButton
+							tooltipContent={integration.prettyName}
+							class="text-muted-foreground hover:bg-ring/10 hover:text-foreground"
+							onclick={() => {
+								if (sidebar.openMobile) {
+									sidebar.setOpenMobile(false);
+								}
+								selectedIntegration = integration;
+							}}
+						>
+							{#if integration.service === "planningcenter"}
+								<Flag />
+							{:else if integration.service === "breeze"}
+								<BreezeIcon />
+							{:else if integration.service === "twitter"}
+								<XIcon />
+							{:else}
+								<RefreshCw />
+							{/if}
+							<span class="flex-1 truncate">{integration.prettyName}</span>
+							<StatusBadge status={integration.status} />
+						</Sidebar.MenuButton>
+					{/each}
+				</Sidebar.Menu>
+			</Sidebar.Group>
+		{/if}
+	</Sidebar.Content>
 
-    <Sidebar.Footer>
-        <Sidebar.Menu>
-            <Sidebar.MenuItem>
-                <DropdownMenu.Root bind:open={userAccountDropdownOpen}>
-                    <DropdownMenu.Trigger>
-                        {#snippet child({ props })}
-                            <Sidebar.MenuButton
-                                size="lg"
-                                class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
-                                {...props}
-                            >
-                                <Avatar.Root class="size-8 rounded-lg">
-                                    <Avatar.Image src={userAvatar} alt={user.name} />
-                                    <Avatar.Fallback class="rounded-lg">{user.name.split(" ").map((n) => n[0] ? n[0].toUpperCase() : "").join("")}</Avatar.Fallback>
-                                </Avatar.Root>
+	<Sidebar.Footer>
+		<Sidebar.Menu>
+			<Sidebar.MenuItem>
+				<DropdownMenu.Root bind:open={userAccountDropdownOpen}>
+					<DropdownMenu.Trigger>
+						{#snippet child({ props })}
+							<Sidebar.MenuButton
+								size="lg"
+								class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+								{...props}
+							>
+								<Avatar.Root class="size-8 rounded-lg">
+									<Avatar.Image src={userAvatar} alt={user.name} />
+									<Avatar.Fallback class="rounded-lg"
+										>{user.name
+											.split(" ")
+											.map((n) => (n[0] ? n[0].toUpperCase() : ""))
+											.join("")}</Avatar.Fallback
+									>
+								</Avatar.Root>
 
-                                <div class="grid flex-1 text-left text-sm leading-tight">
-                                    <span class="truncate font-medium">{user.name}</span>
-                                    <span class="truncate text-xs">{user.email}</span>
-                                </div>
-                                <ChevronsUpDownIcon class="ml-auto size-4" />
-                            </Sidebar.MenuButton>
-                        {/snippet}
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content
-                        class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
-                        side={sidebar.isMobile ? "bottom" : "right"}
-                        align="end"
-                        sideOffset={4}
-                    >
-                        <DropdownMenu.Label class="p-0 font-normal">
-                            <div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
-                                <Avatar.Root class="size-8 rounded-lg">
-                                    <Avatar.Image src={userAvatar} alt={user.name} />
-                                    <Avatar.Fallback class="rounded-lg">{user.name.split(" ").map((n) => n[0] ? n[0].toUpperCase() : "").join("")}</Avatar.Fallback>
-                                </Avatar.Root>
+								<div class="grid flex-1 text-left text-sm leading-tight">
+									<span class="truncate font-medium">{user.name}</span>
+									<span class="truncate text-xs">{user.email}</span>
+								</div>
+								<ChevronsUpDownIcon class="ml-auto size-4" />
+							</Sidebar.MenuButton>
+						{/snippet}
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content
+						class="w-(--bits-dropdown-menu-anchor-width) min-w-56 rounded-lg"
+						side={sidebar.isMobile ? "bottom" : "right"}
+						align="end"
+						sideOffset={4}
+					>
+						<DropdownMenu.Label class="p-0 font-normal">
+							<div class="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+								<Avatar.Root class="size-8 rounded-lg">
+									<Avatar.Image src={userAvatar} alt={user.name} />
+									<Avatar.Fallback class="rounded-lg"
+										>{user.name
+											.split(" ")
+											.map((n) => (n[0] ? n[0].toUpperCase() : ""))
+											.join("")}</Avatar.Fallback
+									>
+								</Avatar.Root>
 
-                                <div class="grid flex-1 text-left text-sm leading-tight">
-                                    <span class="truncate font-medium">{user.name}</span>
-                                    <span class="truncate text-xs">{user.email}</span>
-                                </div>
-                            </div>
-                        </DropdownMenu.Label>
+								<div class="grid flex-1 text-left text-sm leading-tight">
+									<span class="truncate font-medium">{user.name}</span>
+									<span class="truncate text-xs">{user.email}</span>
+								</div>
+							</div>
+						</DropdownMenu.Label>
 
-                        <DropdownMenu.Separator />
+						<DropdownMenu.Separator />
 
-                        <DropdownMenu.Group>
-                            {#if user.accessLevel !== "none"}
-                                <DropdownMenu.Item>
-                                    {#snippet child({ props })}
-                                        <a class="w-full h-full" href="{stripeCustomerPortal}?prefilled_email={user.email}" target="_blank" {...props}>
-                                            <CreditCardIcon class="data-highlighted:text-primary" />
-                                            Billing
-                                        </a>
-                                    {/snippet}
-                                </DropdownMenu.Item>
-                            {:else}
-                                <DropdownMenu.Item>
-                                    {#snippet child({ props })}
-                                        <a class="w-full h-full" href={stripeSubscriptionUrl} {...props}>
-                                            <CreditCardIcon class="data-highlighted:text-primary" />
-                                            Setup Payments
-                                        </a>
-                                    {/snippet}
-                                </DropdownMenu.Item>
-                                <DropdownMenu.Item>
-                                    {#snippet child({ props })}
-                                        <a class="w-full h-full" href={stripeTrialSubscriptionUrl} {...props}>
-                                            <Gift class="data-highlighted:text-primary" />
-                                            Free Trial
-                                        </a>
-                                    {/snippet}
-                                </DropdownMenu.Item>
-                            {/if}
-                        </DropdownMenu.Group>
+						<DropdownMenu.Group>
+							{#if user.accessLevel !== "none"}
+								<DropdownMenu.Item>
+									{#snippet child({ props })}
+										<a
+											class="w-full h-full"
+											href="{stripeCustomerPortal}?prefilled_email={user.email}"
+											target="_blank"
+											{...props}
+										>
+											<CreditCardIcon class="data-highlighted:text-primary" />
+											Billing
+										</a>
+									{/snippet}
+								</DropdownMenu.Item>
+							{:else}
+								<DropdownMenu.Item>
+									{#snippet child({ props })}
+										<a class="w-full h-full" href={stripeSubscriptionUrl} {...props}>
+											<CreditCardIcon class="data-highlighted:text-primary" />
+											Setup Payments
+										</a>
+									{/snippet}
+								</DropdownMenu.Item>
+								<DropdownMenu.Item>
+									{#snippet child({ props })}
+										<a class="w-full h-full" href={stripeTrialSubscriptionUrl} {...props}>
+											<Gift class="data-highlighted:text-primary" />
+											Free Trial
+										</a>
+									{/snippet}
+								</DropdownMenu.Item>
+							{/if}
+						</DropdownMenu.Group>
 
-                        <DropdownMenu.Separator />
+						<DropdownMenu.Separator />
 
-                        <DropdownMenu.Item>
-                            {#snippet child({ props })}
-                                <a class="w-full h-full" href="/logout" {...props}>
-                                    <LogOutIcon class="data-highlighted:text-primary" />
-                                    Log out
-                                </a>
-                            {/snippet}
-                        </DropdownMenu.Item>
-                    </DropdownMenu.Content>
-                </DropdownMenu.Root>
-            </Sidebar.MenuItem>
-        </Sidebar.Menu>
-    </Sidebar.Footer>
-    <Sidebar.Rail />
+						<DropdownMenu.Item>
+							{#snippet child({ props })}
+								<a class="w-full h-full" href="/logout" {...props}>
+									<LogOutIcon class="data-highlighted:text-primary" />
+									Log out
+								</a>
+							{/snippet}
+						</DropdownMenu.Item>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+			</Sidebar.MenuItem>
+		</Sidebar.Menu>
+	</Sidebar.Footer>
+	<Sidebar.Rail />
 </Sidebar.Root>
 
 <AddIntegrationDialog bind:open={addIntegrationDropdownOpen} />
-<IntegrationInfoDialog bind:integration={selectedIntegration} />
\ No newline at end of file
+<IntegrationInfoDialog bind:integration={selectedIntegration} />
diff --git a/frontend/src/lib/dashboard/calendar/CalAvatar.svelte b/frontend/src/lib/dashboard/calendar/CalAvatar.svelte
index 46963b9..f73fbd2 100644
--- a/frontend/src/lib/dashboard/calendar/CalAvatar.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalAvatar.svelte
@@ -1,107 +1,111 @@
 <script lang="ts">
-    import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
-    import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
-    import { type RemoteFormField } from "@sveltejs/kit";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { Upload, X } from "@lucide/svelte";
-    import { clearFileInput } from "@/utils";
+	import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
+	import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
+	import { type RemoteFormField } from "@sveltejs/kit";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { Upload, X } from "@lucide/svelte";
+	import { clearFileInput } from "@/utils";
 
-    let {
-        changed = $bindable(),
-        avatarLink,
-        uploadNewAvatar = $bindable()
-    }: {
-        changed: boolean,
-        avatarLink: string,
-        uploadNewAvatar: File | null
-    } = $props();
+	let {
+		changed = $bindable(),
+		avatarLink,
+		uploadNewAvatar = $bindable()
+	}: {
+		changed: boolean;
+		avatarLink: string;
+		uploadNewAvatar: File | null;
+	} = $props();
 
-    let avatarLinkBindable = $derived(avatarLink);
+	let avatarLinkBindable = $derived(avatarLink);
 
-    let uploadNewAvatarLink = $derived(uploadNewAvatar ? URL.createObjectURL(uploadNewAvatar) : null);
+	let uploadNewAvatarLink = $derived(uploadNewAvatar ? URL.createObjectURL(uploadNewAvatar) : null);
 
-    function handleRemoveAvatar() {
-        clearFileInput(document.getElementById("imageUploaderCalendar"));
-        uploadNewAvatar = null;
-        avatarLinkBindable = "";
-    }
+	function handleRemoveAvatar() {
+		clearFileInput(document.getElementById("imageUploaderCalendar"));
+		uploadNewAvatar = null;
+		avatarLinkBindable = "";
+	}
 
-    function handleAvatarChange(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
-        //@ts-ignore
-        const files = event.target.files as File[];
-        if (files.length === 0) return;
-        if (!files[0]) return;
-        
-        uploadNewAvatar = files[0];
-        avatarLinkBindable = "";
-    }
+	function handleAvatarChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		//@ts-ignore
+		const files = event.target.files as File[];
+		if (files.length === 0) return;
+		if (!files[0]) return;
 
-    $effect(() => {
-        const avatarLinkChanged = avatarLinkBindable !== avatarLink;
-        const uploadNewAvatarChanged = uploadNewAvatar !== null;
+		uploadNewAvatar = files[0];
+		avatarLinkBindable = "";
+	}
 
-        changed = avatarLinkChanged || uploadNewAvatarChanged;
-    });
+	$effect(() => {
+		const avatarLinkChanged = avatarLinkBindable !== avatarLink;
+		const uploadNewAvatarChanged = uploadNewAvatar !== null;
+
+		changed = avatarLinkChanged || uploadNewAvatarChanged;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Calendar Avatar</Card.Title>
-        <Card.Description>Upload an image to represent your calendar</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="flex items-start gap-6">
-            <div class="relative">
-                {#if avatarLinkBindable.length > 0 || uploadNewAvatar}
-                    {#if avatarLinkBindable.length > 0}
-                        <input {...updateCalendarForm.fields.avatarLink.as("hidden", avatarLinkBindable)} />
-                    {/if}
+	<Card.Header>
+		<Card.Title>Calendar Avatar</Card.Title>
+		<Card.Description>Upload an image to represent your calendar</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="flex items-start gap-6">
+			<div class="relative">
+				{#if avatarLinkBindable.length > 0 || uploadNewAvatar}
+					{#if avatarLinkBindable.length > 0}
+						<input {...updateCalendarForm.fields.avatarLink.as("hidden", avatarLinkBindable)} />
+					{/if}
 
-                    <div class="relative group">
-                        <img
-                            src={uploadNewAvatar !== null ? uploadNewAvatarLink : avatarLink}
-                            alt="Calendar avatar"
-                            class="w-24 h-24 rounded-lg object-cover border-2 border-border"
-                        />
-                        <button
-                            onclick={handleRemoveAvatar}
-                            class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
-                    </div>
-                {:else}
-                    <div class="w-24 h-24">
-                        <NoCalendarAvatar />
-                    </div>
-                {/if}
-            </div>
-            <div class="flex-1 space-y-3">
-                <div>
-                    <p class="text-sm text-foreground font-medium">Upload a custom avatar</p>
-                    <p class="text-sm text-muted-foreground mt-1">JPG, PNG or GIF. Max size 2MB. Recommended 400x400px.</p>
-                </div>
-                <div class="flex gap-2">
-                    <Button variant="outline" class="relative bg-transparent">
-                        <Upload class="h-4 w-4 mr-2" />
-                        Upload Image
-                        <input
-                            {...(updateCalendarForm.fields.newAvatar as unknown as RemoteFormField<File>).as("file")}
-                            id="imageUploaderCalendar"
-                            type="file"
-                            accept="image/*"
-                            onchange={handleAvatarChange}
-                            class="absolute inset-0 opacity-0 cursor-pointer"
-                        />
-                    </Button>
-                    {#if uploadNewAvatar}
-                        <Button variant="outline" onclick={handleRemoveAvatar} class="bg-transparent">
-                            Remove
-                        </Button>
-                    {/if}
-                </div>
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+					<div class="relative group">
+						<img
+							src={uploadNewAvatar !== null ? uploadNewAvatarLink : avatarLink}
+							alt="Calendar avatar"
+							class="w-24 h-24 rounded-lg object-cover border-2 border-border"
+						/>
+						<button
+							onclick={handleRemoveAvatar}
+							class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+						>
+							<X class="h-4 w-4" />
+						</button>
+					</div>
+				{:else}
+					<div class="w-24 h-24">
+						<NoCalendarAvatar />
+					</div>
+				{/if}
+			</div>
+			<div class="flex-1 space-y-3">
+				<div>
+					<p class="text-sm text-foreground font-medium">Upload a custom avatar</p>
+					<p class="text-sm text-muted-foreground mt-1">
+						JPG, PNG or GIF. Max size 2MB. Recommended 400x400px.
+					</p>
+				</div>
+				<div class="flex gap-2">
+					<Button variant="outline" class="relative bg-transparent">
+						<Upload class="h-4 w-4 mr-2" />
+						Upload Image
+						<input
+							{...(updateCalendarForm.fields.newAvatar as unknown as RemoteFormField<File>).as(
+								"file"
+							)}
+							id="imageUploaderCalendar"
+							type="file"
+							accept="image/*"
+							onchange={handleAvatarChange}
+							class="absolute inset-0 opacity-0 cursor-pointer"
+						/>
+					</Button>
+					{#if uploadNewAvatar}
+						<Button variant="outline" onclick={handleRemoveAvatar} class="bg-transparent">
+							Remove
+						</Button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte b/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte
index a9eb3d2..3f0f222 100644
--- a/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte
@@ -1,143 +1,183 @@
 <script lang="ts">
-    import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
-    import type { CalendarCustomizations } from "@/cal.utils";
-    import * as Tabs from "$lib/components/ui/tabs/index.js";
-    import * as Card from "@/components/ui/card/index";
-    import { Label } from "@/components/ui/label";
-    import { Switch } from "@/components/ui/switch";
+	import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
+	import type { CalendarCustomizations } from "@/cal.utils";
+	import * as Tabs from "$lib/components/ui/tabs/index.js";
+	import * as Card from "@/components/ui/card/index";
+	import { Label } from "@/components/ui/label";
+	import { Switch } from "@/components/ui/switch";
 
-    let {
-        displaySettings,
-        displaySettingsPreview = $bindable(),
-        changed = $bindable()
-    }: {
-        displaySettings: CalendarCustomizations,
-        displaySettingsPreview: CalendarCustomizations,
-        changed: boolean
-    } = $props();
+	let {
+		displaySettings,
+		displaySettingsPreview = $bindable(),
+		changed = $bindable()
+	}: {
+		displaySettings: CalendarCustomizations;
+		displaySettingsPreview: CalendarCustomizations;
+		changed: boolean;
+	} = $props();
 
-    // svelte-ignore state_referenced_locally
-    let displaySettingsBindable = $state(displaySettings);
-    $effect(() => {displaySettingsBindable = displaySettings});
+	// svelte-ignore state_referenced_locally
+	let displaySettingsBindable = $state(displaySettings);
+	$effect(() => {
+		displaySettingsBindable = displaySettings;
+	});
 
-    $effect(() => {
-        changed = JSON.stringify(displaySettingsBindable) !== JSON.stringify(displaySettings);
-    });
+	$effect(() => {
+		changed = JSON.stringify(displaySettingsBindable) !== JSON.stringify(displaySettings);
+	});
 
-    $effect(() => {
-        displaySettingsPreview = displaySettingsBindable;
-    });
+	$effect(() => {
+		displaySettingsPreview = displaySettingsBindable;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Display Settings</Card.Title>
-        <Card.Description>Customize how event information is displayed</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="grid grid-cols-1 gap-6">
-            <div class="flex items-center justify-between flex-col space-y-2">
-                <Label for="showDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">View Type</span>
-                    <span class="text-sm text-muted-foreground">You can choose a 3 day, week, or a month view option. The smaller the view, more information can be displayed.</span>
-                </Label>
-                <input {...updateCalendarForm.fields.displaySettings.viewType.as("hidden", displaySettingsBindable.viewType)} />
-                <Tabs.Root bind:value={displaySettingsBindable.viewType} class="w-full">
-                    <Tabs.List class="w-full">
-                        <Tabs.Trigger value="3day">3 Day</Tabs.Trigger>
-                        <Tabs.Trigger value="week">7 Day</Tabs.Trigger>
-                        <Tabs.Trigger value="month">Month</Tabs.Trigger>
-                    </Tabs.List>
-                </Tabs.Root>
-            </div>
+	<Card.Header>
+		<Card.Title>Display Settings</Card.Title>
+		<Card.Description>Customize how event information is displayed</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid grid-cols-1 gap-6">
+			<div class="flex items-center justify-between flex-col space-y-2">
+				<Label for="showDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">View Type</span>
+					<span class="text-sm text-muted-foreground"
+						>You can choose a 3 day, week, or a month view option. The smaller the view, more
+						information can be displayed.</span
+					>
+				</Label>
+				<input
+					{...updateCalendarForm.fields.displaySettings.viewType.as(
+						"hidden",
+						displaySettingsBindable.viewType
+					)}
+				/>
+				<Tabs.Root bind:value={displaySettingsBindable.viewType} class="w-full">
+					<Tabs.List class="w-full">
+						<Tabs.Trigger value="3day">3 Day</Tabs.Trigger>
+						<Tabs.Trigger value="week">7 Day</Tabs.Trigger>
+						<Tabs.Trigger value="month">Month</Tabs.Trigger>
+					</Tabs.List>
+				</Tabs.Root>
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="showDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Show Description</span>
-                    <span class="text-sm text-muted-foreground">If a description of an event was set, you can choose if you want to display that info.</span>
-                </Label>
-                <input {...updateCalendarForm.fields.displaySettings.showDescription.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showDescription} type="checkbox" />
-                <Switch
-                    id="showDescription"
-                    bind:checked={displaySettingsBindable.showDescription}
-                />
-            </div>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="showDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Show Description</span>
+					<span class="text-sm text-muted-foreground"
+						>If a description of an event was set, you can choose if you want to display that info.</span
+					>
+				</Label>
+				<input
+					{...updateCalendarForm.fields.displaySettings.showDescription.as("checkbox")}
+					class="sr-only"
+					bind:checked={displaySettingsBindable.showDescription}
+					type="checkbox"
+				/>
+				<Switch id="showDescription" bind:checked={displaySettingsBindable.showDescription} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="useAMPM" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Use AM/PM Format</span>
-                    <span class="text-sm text-muted-foreground">Display times in 12-hour format</span>
-                </Label>
-                <input {...updateCalendarForm.fields.displaySettings.useAMPM.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.useAMPM} type="checkbox" />
-                <Switch
-                    id="useAMPM"
-                    bind:checked={displaySettingsBindable.useAMPM}
-                />
-            </div>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="useAMPM" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Use AM/PM Format</span>
+					<span class="text-sm text-muted-foreground">Display times in 12-hour format</span>
+				</Label>
+				<input
+					{...updateCalendarForm.fields.displaySettings.useAMPM.as("checkbox")}
+					class="sr-only"
+					bind:checked={displaySettingsBindable.useAMPM}
+					type="checkbox"
+				/>
+				<Switch id="useAMPM" bind:checked={displaySettingsBindable.useAMPM} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="showResources" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Show Resources</span>
-                    <span class="text-sm text-muted-foreground">Display the resources that the event needs.</span>
-                </Label>
-                <input {...updateCalendarForm.fields.displaySettings.showResources.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showResources} type="checkbox" />
-                <Switch
-                    id="showResources"
-                    bind:checked={displaySettingsBindable.showResources}
-                />
-            </div>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="showResources" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Show Resources</span>
+					<span class="text-sm text-muted-foreground"
+						>Display the resources that the event needs.</span
+					>
+				</Label>
+				<input
+					{...updateCalendarForm.fields.displaySettings.showResources.as("checkbox")}
+					class="sr-only"
+					bind:checked={displaySettingsBindable.showResources}
+					type="checkbox"
+				/>
+				<Switch id="showResources" bind:checked={displaySettingsBindable.showResources} />
+			</div>
 
-            {#if displaySettingsBindable.showResources}
-                <div class="flex items-center justify-between space-x-2 ml-5">
-                    <Label for="showResourcePathname" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Show Resource Pathname</span>
-                        <span class="text-sm text-muted-foreground">Display full resource paths</span>
-                    </Label>
-                    <input {...updateCalendarForm.fields.displaySettings.showResourcePathname.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showResourcePathname} type="checkbox" />
-                    <Switch
-                        id="showResourcePathname"
-                        bind:checked={displaySettingsBindable.showResourcePathname}
-                    />
-                </div>
-            {/if}
+			{#if displaySettingsBindable.showResources}
+				<div class="flex items-center justify-between space-x-2 ml-5">
+					<Label
+						for="showResourcePathname"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Show Resource Pathname</span>
+						<span class="text-sm text-muted-foreground">Display full resource paths</span>
+					</Label>
+					<input
+						{...updateCalendarForm.fields.displaySettings.showResourcePathname.as("checkbox")}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showResourcePathname}
+						type="checkbox"
+					/>
+					<Switch
+						id="showResourcePathname"
+						bind:checked={displaySettingsBindable.showResourcePathname}
+					/>
+				</div>
+			{/if}
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="showRooms" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Show Rooms</span>
-                    <span class="text-sm text-muted-foreground">Display the rooms that the event needs.</span>
-                </Label>
-                <input {...updateCalendarForm.fields.displaySettings.showRooms.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showRooms} type="checkbox" />
-                <Switch
-                    id="showRooms"
-                    bind:checked={displaySettingsBindable.showRooms}
-                />
-            </div>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="showRooms" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Show Rooms</span>
+					<span class="text-sm text-muted-foreground">Display the rooms that the event needs.</span>
+				</Label>
+				<input
+					{...updateCalendarForm.fields.displaySettings.showRooms.as("checkbox")}
+					class="sr-only"
+					bind:checked={displaySettingsBindable.showRooms}
+					type="checkbox"
+				/>
+				<Switch id="showRooms" bind:checked={displaySettingsBindable.showRooms} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="showLocation" class="flex flex-col space-y-1 items-start cursor-pointer">
-                    <span class="font-medium">Show Location</span>
-                    <span class="text-sm text-muted-foreground">Display location information in events</span>
-                </Label>
-                <input {...updateCalendarForm.fields.displaySettings.showLocation.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showLocation} type="checkbox" />
-                <Switch
-                    id="showLocation"
-                    bind:checked={displaySettingsBindable.showLocation}
-                />
-            </div>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="showLocation" class="flex flex-col space-y-1 items-start cursor-pointer">
+					<span class="font-medium">Show Location</span>
+					<span class="text-sm text-muted-foreground">Display location information in events</span>
+				</Label>
+				<input
+					{...updateCalendarForm.fields.displaySettings.showLocation.as("checkbox")}
+					class="sr-only"
+					bind:checked={displaySettingsBindable.showLocation}
+					type="checkbox"
+				/>
+				<Switch id="showLocation" bind:checked={displaySettingsBindable.showLocation} />
+			</div>
 
-            {#if displaySettingsBindable.showLocation}
-                <div class="flex items-center justify-between space-x-2 ml-5">
-                    <Label for="onlyShowLocationTitle" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Only Show Location Title</span>
-                        <span class="text-sm text-muted-foreground">Hide detailed location information</span>
-                    </Label>
-                    <input {...updateCalendarForm.fields.displaySettings.onlyShowLocationTitle.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.onlyShowLocationTitle} type="checkbox" />
-                    <Switch
-                        id="onlyShowLocationTitle"
-                        bind:checked={displaySettingsBindable.onlyShowLocationTitle}
-                    />
-                </div>
-            {/if}
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+			{#if displaySettingsBindable.showLocation}
+				<div class="flex items-center justify-between space-x-2 ml-5">
+					<Label
+						for="onlyShowLocationTitle"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Only Show Location Title</span>
+						<span class="text-sm text-muted-foreground">Hide detailed location information</span>
+					</Label>
+					<input
+						{...updateCalendarForm.fields.displaySettings.onlyShowLocationTitle.as("checkbox")}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.onlyShowLocationTitle}
+						type="checkbox"
+					/>
+					<Switch
+						id="onlyShowLocationTitle"
+						bind:checked={displaySettingsBindable.onlyShowLocationTitle}
+					/>
+				</div>
+			{/if}
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte b/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte
index e784a1c..a55d8cc 100644
--- a/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte
@@ -1,81 +1,89 @@
 <script lang="ts">
-    import type { CalendarCustomizations } from "@/cal.utils";
-    import { Temporal } from "temporal-polyfill";
-    import Event from "@/Event.svelte";
+	import type { CalendarCustomizations } from "@/cal.utils";
+	import { Temporal } from "temporal-polyfill";
+	import Event from "@/Event.svelte";
 
-    let {
-        displaySettings,
-        nowDate
-    }: {
-        displaySettings: CalendarCustomizations,
-        nowDate: Temporal.ZonedDateTime
-    } = $props();
+	let {
+		displaySettings,
+		nowDate
+	}: {
+		displaySettings: CalendarCustomizations;
+		nowDate: Temporal.ZonedDateTime;
+	} = $props();
 </script>
 
-<Event calendarCustomizations={displaySettings} event={{
-    recurrence: "",
-    service: "planningcenter",
-    id: "blankEvent",
-    recEventId: "blankRecEvent",
-    name: "Event Info Preview",
-    location: "Home - 1234 Main Street, Vancouver WA",
-    registrationURL: "",
-    imageURL: "",
-    visibleInChurchCenter: true,
-    featured: true,
-    description: "This is a short description of this event.",
-    times: [],
-    resources: [],
-    tags: [],
-    expand: {
-        resources: [{
-            resource_id: "res1",
-            kind: "Room",
-            name: "Kitchen",
-            path_name: "",
-            description: "",
-            quantity: 1,
-            id: "res1",
-            collectionId: "",
-            collectionName: ""
-        },
-        {
-            resource_id: "res2",
-            kind: "Room",
-            name: "Santuary",
-            path_name: "",
-            description: "",
-            quantity: 1,
-            id: "res2",
-            collectionId: "",
-            collectionName: ""
-        },
-        {
-            resource_id: "res3",
-            kind: "Resource",
-            name: "Projector",
-            path_name: "Santuary",
-            description: "",
-            quantity: 1,
-            id: "res3",
-            collectionId: "",
-            collectionName: ""
-        },
-        {
-            resource_id: "res4",
-            kind: "Resource",
-            name: "Sound System",
-            path_name: "Santuary",
-            description: "",
-            quantity: 1,
-            id: "res4",
-            collectionId: "",
-            collectionName: ""
-        }],
-        tags: [],
-    },
-    startTime: nowDate.toString(),
-    endTime: nowDate.toString(),
-    collectionId: "",
-    collectionName: ""
-}} currentDay={nowDate} timeZone={Temporal.Now.timeZoneId()} fontScale={1} />
\ No newline at end of file
+<Event
+	calendarCustomizations={displaySettings}
+	event={{
+		recurrence: "",
+		service: "planningcenter",
+		id: "blankEvent",
+		recEventId: "blankRecEvent",
+		name: "Event Info Preview",
+		location: "Home - 1234 Main Street, Vancouver WA",
+		registrationURL: "",
+		imageURL: "",
+		visibleInChurchCenter: true,
+		featured: true,
+		description: "This is a short description of this event.",
+		times: [],
+		resources: [],
+		tags: [],
+		expand: {
+			resources: [
+				{
+					resource_id: "res1",
+					kind: "Room",
+					name: "Kitchen",
+					path_name: "",
+					description: "",
+					quantity: 1,
+					id: "res1",
+					collectionId: "",
+					collectionName: ""
+				},
+				{
+					resource_id: "res2",
+					kind: "Room",
+					name: "Santuary",
+					path_name: "",
+					description: "",
+					quantity: 1,
+					id: "res2",
+					collectionId: "",
+					collectionName: ""
+				},
+				{
+					resource_id: "res3",
+					kind: "Resource",
+					name: "Projector",
+					path_name: "Santuary",
+					description: "",
+					quantity: 1,
+					id: "res3",
+					collectionId: "",
+					collectionName: ""
+				},
+				{
+					resource_id: "res4",
+					kind: "Resource",
+					name: "Sound System",
+					path_name: "Santuary",
+					description: "",
+					quantity: 1,
+					id: "res4",
+					collectionId: "",
+					collectionName: ""
+				}
+			],
+			tags: []
+		},
+		startTime: nowDate.toString(),
+		endTime: nowDate.toString(),
+		collectionId: "",
+		collectionName: ""
+	}}
+	currentDay={nowDate}
+	timeZone={Temporal.Now.timeZoneId()}
+	fontScale={1}
+/>
diff --git a/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte b/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte
index 08a9626..12a9c07 100644
--- a/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte
@@ -1,205 +1,331 @@
 <script lang="ts">
-    import { getMyEventResourcesPrivate, getMyEventTagsPrivate } from "../../../routes/(mainWebsite)/dashboard/events.remote";
-    import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
-    import * as Tabs from "$lib/components/ui/tabs/index.js";
-    import * as Item from "$lib/components/ui/item/index.js";
-    import * as Card from "@/components/ui/card/index";
-    import type { CalendarFilters } from "@/cal.utils";
-    import { Switch } from "@/components/ui/switch";
-    import { Label } from "@/components/ui/label";
+	import {
+		getMyEventResourcesPrivate,
+		getMyEventTagsPrivate
+	} from "../../../routes/(mainWebsite)/dashboard/events.remote";
+	import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
+	import * as Tabs from "$lib/components/ui/tabs/index.js";
+	import * as Item from "$lib/components/ui/item/index.js";
+	import * as Card from "@/components/ui/card/index";
+	import type { CalendarFilters } from "@/cal.utils";
+	import { Switch } from "@/components/ui/switch";
+	import { Label } from "@/components/ui/label";
 
-    let {
-        filters,
-        changed = $bindable()
-    }: {
-        filters: CalendarFilters,
-        changed: boolean
-    } = $props();
+	let {
+		filters,
+		changed = $bindable()
+	}: {
+		filters: CalendarFilters;
+		changed: boolean;
+	} = $props();
 
-    let myResources = $derived(await getMyEventResourcesPrivate());
-    let myTags = $derived(await getMyEventTagsPrivate());
+	let myResources = $derived(await getMyEventResourcesPrivate());
+	let myTags = $derived(await getMyEventTagsPrivate());
 
-    // svelte-ignore state_referenced_locally
-    let filtersBindable = $state(filters);
-    $effect(() => {filtersBindable = filters});
+	// svelte-ignore state_referenced_locally
+	let filtersBindable = $state(filters);
+	$effect(() => {
+		filtersBindable = filters;
+	});
 
-    $effect(() => {
-        changed = JSON.stringify(filtersBindable) !== JSON.stringify(filters);
-    });
+	$effect(() => {
+		changed = JSON.stringify(filtersBindable) !== JSON.stringify(filters);
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Filter Settings</Card.Title>
-        <Card.Description>Choose what kind of events you want to show in the feed.</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="grid grid-cols-1 gap-6">
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="onlyShowFeatured" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Only Featured Events</span>
-                    <span class="text-sm text-muted-foreground">Show only the events that are set to featured.</span>
-                </Label>
+	<Card.Header>
+		<Card.Title>Filter Settings</Card.Title>
+		<Card.Description>Choose what kind of events you want to show in the feed.</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid grid-cols-1 gap-6">
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="onlyShowFeatured" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Only Featured Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Show only the events that are set to featured.</span
+					>
+				</Label>
 
-                <input {...updateCalendarForm.fields.filters.onlyShowFeatured.as("checkbox")} class="sr-only" bind:checked={filtersBindable.onlyShowFeatured} type="checkbox" />
-                <Switch
-                    id="onlyShowFeatured"
-                    bind:checked={filtersBindable.onlyShowFeatured}
-                />
-            </div>
+				<input
+					{...updateCalendarForm.fields.filters.onlyShowFeatured.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.onlyShowFeatured}
+					type="checkbox"
+				/>
+				<Switch id="onlyShowFeatured" bind:checked={filtersBindable.onlyShowFeatured} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="hideUnpublished" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Hide Unpublished Events</span>
-                    <span class="text-sm text-muted-foreground">Hide the events that are not visible in the church center.</span>
-                </Label>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="hideUnpublished" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Hide Unpublished Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Hide the events that are not visible in the church center.</span
+					>
+				</Label>
 
-                <input {...updateCalendarForm.fields.filters.hideUnpublished.as("checkbox")} class="sr-only" bind:checked={filtersBindable.hideUnpublished} type="checkbox" />
-                <Switch
-                    id="hideUnpublished"
-                    bind:checked={filtersBindable.hideUnpublished}
-                />
-            </div>
+				<input
+					{...updateCalendarForm.fields.filters.hideUnpublished.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.hideUnpublished}
+					type="checkbox"
+				/>
+				<Switch id="hideUnpublished" bind:checked={filtersBindable.hideUnpublished} />
+			</div>
 
-            <div>
-                <div class="flex items-center justify-between">
-                    <Label class="flex flex-col items-start space-y-1 cursor-pointer" for="enableResourceFiltering">
-                        <span class="font-medium">Enable Resource Filtering</span>
-                        <span class="text-sm text-muted-foreground">Most events contain information regarding the resources that are required. You can allow or block events based on its resource requirements.</span>
-                    </Label>
+			<div>
+				<div class="flex items-center justify-between">
+					<Label
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+						for="enableResourceFiltering"
+					>
+						<span class="font-medium">Enable Resource Filtering</span>
+						<span class="text-sm text-muted-foreground"
+							>Most events contain information regarding the resources that are required. You can
+							allow or block events based on its resource requirements.</span
+						>
+					</Label>
 
-                    <input {...updateCalendarForm.fields.filters.enableResourceFiltering.as("checkbox")} class="sr-only" bind:checked={filtersBindable.enableResourceFiltering} type="checkbox" />
-                    <Switch
-                        id="enableResourceFiltering"
-                        bind:checked={filtersBindable.enableResourceFiltering}
-                    />
-                </div>
+					<input
+						{...updateCalendarForm.fields.filters.enableResourceFiltering.as("checkbox")}
+						class="sr-only"
+						bind:checked={filtersBindable.enableResourceFiltering}
+						type="checkbox"
+					/>
+					<Switch
+						id="enableResourceFiltering"
+						bind:checked={filtersBindable.enableResourceFiltering}
+					/>
+				</div>
 
-                <div>
-                    <input {...updateCalendarForm.fields.filters.resourceFilterType.as("hidden", filtersBindable.resourceFilterType)} />
-                    <Tabs.Root bind:value={filtersBindable.resourceFilterType} class="w-full mt-2">
-                        <Tabs.List class="w-full rounded-b-none">
-                            <Tabs.Trigger value="allow" disabled={!filtersBindable.enableResourceFiltering}>Allow Events</Tabs.Trigger>
-                            <Tabs.Trigger value="block" disabled={!filtersBindable.enableResourceFiltering}>Block Events</Tabs.Trigger>
-                        </Tabs.List>
-                    </Tabs.Root>
-                    <div class="w-full bg-muted rounded-b-md p-2 {filtersBindable.resourceFilterType === "block" ? "hidden" : "mt-0.5"}">
-                        <Label class="flex flex-col items-start space-y-0.5">
-                            <span class="text-sm text-muted-foreground">Allow events that contain this resource.{#if filtersBindable.allowResources.length === 0}<br><span class="text-red-500">*If no resource is selected, then all events will go through and no filtering will happen.</span>{/if}</span>
-                        </Label>
-                        <div class="space-y-2 mt-2">
-                            {#each myResources as resource (`allowAResource${resource.id}`)}
-                                <div class="flex items-center gap-3">
-                                    <Label for="allowResource{resource.id}" class="w-full {!filtersBindable.enableResourceFiltering ? "opacity-50" : ""}">
-                                        <Item.Root variant="outline">
-                                            <Item.Content>
-                                                <Item.Title>{resource.name}{#if resource.path_name}<span class="-ml-1">({resource.path_name.trimEnd()})</span>{/if}</Item.Title>
-                                                {#if resource.description}
-                                                    <Item.Description>{resource.description}</Item.Description>
-                                                {/if}
-                                            </Item.Content>
-                                            <Item.Actions>
-                                                <input disabled={!filtersBindable.enableResourceFiltering} id="allowResource{resource.id}" {...updateCalendarForm.fields.filters.allowResources.as("checkbox", resource.id)} bind:group={filtersBindable.allowResources} />
-                                            </Item.Actions>
-                                        </Item.Root>
-                                    </Label>
-                                </div>
-                            {/each}
-                        </div>
-                    </div>
-                    <div class="w-full bg-muted rounded-b-md p-2 {filtersBindable.resourceFilterType === "allow" ? "hidden" : "mt-0.5"}">
-                        <Label class="flex flex-col items-start space-y-0.5">
-                            <span class="text-sm text-muted-foreground">Block events that contain this resource.</span>
-                        </Label>
-                        <div class="space-y-2 mt-2">
-                            {#each myResources as resource (`blockAResource${resource.id}`)}
-                                <div class="flex items-center gap-3">
-                                    <Label for="blockResource{resource.id}" class="w-full {!filtersBindable.enableResourceFiltering ? "opacity-50" : ""}">
-                                        <Item.Root variant="outline">
-                                            <Item.Content>
-                                                <Item.Title>{resource.name}{#if resource.path_name}<span class="-ml-1">({resource.path_name.trimEnd()})</span>{/if}</Item.Title>
-                                                {#if resource.description}
-                                                    <Item.Description>{resource.description}</Item.Description>
-                                                {/if}
-                                            </Item.Content>
-                                            <Item.Actions>
-                                                <input disabled={!filtersBindable.enableResourceFiltering} id="blockResource{resource.id}" {...updateCalendarForm.fields.filters.blockResources.as("checkbox", resource.id)} bind:group={filtersBindable.blockResources} />
-                                            </Item.Actions>
-                                        </Item.Root>
-                                    </Label>
-                                </div>
-                            {/each}
-                        </div>
-                    </div>
-                </div>
-            </div>
+				<div>
+					<input
+						{...updateCalendarForm.fields.filters.resourceFilterType.as(
+							"hidden",
+							filtersBindable.resourceFilterType
+						)}
+					/>
+					<Tabs.Root bind:value={filtersBindable.resourceFilterType} class="w-full mt-2">
+						<Tabs.List class="w-full rounded-b-none">
+							<Tabs.Trigger value="allow" disabled={!filtersBindable.enableResourceFiltering}
+								>Allow Events</Tabs.Trigger
+							>
+							<Tabs.Trigger value="block" disabled={!filtersBindable.enableResourceFiltering}
+								>Block Events</Tabs.Trigger
+							>
+						</Tabs.List>
+					</Tabs.Root>
+					<div
+						class="w-full bg-muted rounded-b-md p-2 {filtersBindable.resourceFilterType === 'block'
+							? 'hidden'
+							: 'mt-0.5'}"
+					>
+						<Label class="flex flex-col items-start space-y-0.5">
+							<span class="text-sm text-muted-foreground"
+								>Allow events that contain this resource.{#if filtersBindable.allowResources.length === 0}<br
+									/><span class="text-red-500"
+										>*If no resource is selected, then all events will go through and no filtering
+										will happen.</span
+									>{/if}</span
+							>
+						</Label>
+						<div class="space-y-2 mt-2">
+							{#each myResources as resource (`allowAResource${resource.id}`)}
+								<div class="flex items-center gap-3">
+									<Label
+										for="allowResource{resource.id}"
+										class="w-full {!filtersBindable.enableResourceFiltering ? 'opacity-50' : ''}"
+									>
+										<Item.Root variant="outline">
+											<Item.Content>
+												<Item.Title
+													>{resource.name}{#if resource.path_name}<span class="-ml-1"
+															>({resource.path_name.trimEnd()})</span
+														>{/if}</Item.Title
+												>
+												{#if resource.description}
+													<Item.Description>{resource.description}</Item.Description>
+												{/if}
+											</Item.Content>
+											<Item.Actions>
+												<input
+													disabled={!filtersBindable.enableResourceFiltering}
+													id="allowResource{resource.id}"
+													{...updateCalendarForm.fields.filters.allowResources.as(
+														"checkbox",
+														resource.id
+													)}
+													bind:group={filtersBindable.allowResources}
+												/>
+											</Item.Actions>
+										</Item.Root>
+									</Label>
+								</div>
+							{/each}
+						</div>
+					</div>
+					<div
+						class="w-full bg-muted rounded-b-md p-2 {filtersBindable.resourceFilterType === 'allow'
+							? 'hidden'
+							: 'mt-0.5'}"
+					>
+						<Label class="flex flex-col items-start space-y-0.5">
+							<span class="text-sm text-muted-foreground"
+								>Block events that contain this resource.</span
+							>
+						</Label>
+						<div class="space-y-2 mt-2">
+							{#each myResources as resource (`blockAResource${resource.id}`)}
+								<div class="flex items-center gap-3">
+									<Label
+										for="blockResource{resource.id}"
+										class="w-full {!filtersBindable.enableResourceFiltering ? 'opacity-50' : ''}"
+									>
+										<Item.Root variant="outline">
+											<Item.Content>
+												<Item.Title
+													>{resource.name}{#if resource.path_name}<span class="-ml-1"
+															>({resource.path_name.trimEnd()})</span
+														>{/if}</Item.Title
+												>
+												{#if resource.description}
+													<Item.Description>{resource.description}</Item.Description>
+												{/if}
+											</Item.Content>
+											<Item.Actions>
+												<input
+													disabled={!filtersBindable.enableResourceFiltering}
+													id="blockResource{resource.id}"
+													{...updateCalendarForm.fields.filters.blockResources.as(
+														"checkbox",
+														resource.id
+													)}
+													bind:group={filtersBindable.blockResources}
+												/>
+											</Item.Actions>
+										</Item.Root>
+									</Label>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</div>
 
-            <div>
-                <div class="flex items-center justify-between">
-                    <Label class="flex flex-col items-start space-y-1 cursor-pointer" for="enableTagFiltering">
-                        <span class="font-medium">Enable Tag Filtering</span>
-                        <span class="text-sm text-muted-foreground">Most events contain information regarding the tags that are required. You can allow or block events based on its tag requirements.</span>
-                    </Label>
+			<div>
+				<div class="flex items-center justify-between">
+					<Label
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+						for="enableTagFiltering"
+					>
+						<span class="font-medium">Enable Tag Filtering</span>
+						<span class="text-sm text-muted-foreground"
+							>Most events contain information regarding the tags that are required. You can allow
+							or block events based on its tag requirements.</span
+						>
+					</Label>
 
-                    <input {...updateCalendarForm.fields.filters.enableTagFiltering.as("checkbox")} class="sr-only" bind:checked={filtersBindable.enableTagFiltering} type="checkbox" />
-                    <Switch
-                        id="enableTagFiltering"
-                        bind:checked={filtersBindable.enableTagFiltering}
-                    />
-                </div>
+					<input
+						{...updateCalendarForm.fields.filters.enableTagFiltering.as("checkbox")}
+						class="sr-only"
+						bind:checked={filtersBindable.enableTagFiltering}
+						type="checkbox"
+					/>
+					<Switch id="enableTagFiltering" bind:checked={filtersBindable.enableTagFiltering} />
+				</div>
 
-                <div>
-                    <input {...updateCalendarForm.fields.filters.tagFilterType.as("hidden", filtersBindable.tagFilterType)} />
-                    <Tabs.Root bind:value={filtersBindable.tagFilterType} class="w-full mt-2">
-                        <Tabs.List class="w-full rounded-b-none">
-                            <Tabs.Trigger value="allow" disabled={!filtersBindable.enableTagFiltering}>Allow Events</Tabs.Trigger>
-                            <Tabs.Trigger value="block" disabled={!filtersBindable.enableTagFiltering}>Block Events</Tabs.Trigger>
-                        </Tabs.List>
-                    </Tabs.Root>
-                    <div class="w-full bg-muted rounded-b-md p-2 {filtersBindable.tagFilterType === "block" ? "hidden" : "mt-0.5"}">
-                        <Label class="flex flex-col items-start space-y-0.5">
-                            <span class="text-sm text-muted-foreground">Allow events that contain this tag.{#if filtersBindable.allowTags.length === 0}<br><span class="text-red-500">*If no tag is selected, then all events will go through and no filtering will happen.</span>{/if}</span>
-                        </Label>
-                        <div class="space-y-2 mt-2">
-                            {#each myTags as tag (`allowATag${tag.id}`)}
-                                <div class="flex items-center gap-3">
-                                    <Label for="allowTag{tag.id}" class="w-full {!filtersBindable.enableTagFiltering ? "opacity-50" : ""}">
-                                        <Item.Root variant="outline">
-                                            <Item.Content>
-                                                <Item.Title>{tag.name}</Item.Title>
-                                            </Item.Content>
-                                            <Item.Actions>
-                                                <input disabled={!filtersBindable.enableTagFiltering} id="allowTag{tag.id}" {...updateCalendarForm.fields.filters.allowTags.as("checkbox", tag.id)} bind:group={filtersBindable.allowTags} />
-                                            </Item.Actions>
-                                        </Item.Root>
-                                    </Label>
-                                </div>
-                            {/each}
-                        </div>
-                    </div>
-                    <div class="w-full bg-muted rounded-b-md p-2 {filtersBindable.tagFilterType === "allow" ? "hidden" : "mt-0.5"}">
-                        <Label class="flex flex-col items-start space-y-0.5">
-                            <span class="text-sm text-muted-foreground">Block events that contain this tag.</span>
-                        </Label>
-                        <div class="space-y-2 mt-2">
-                            {#each myTags as tag (`blockATag${tag.id}`)}
-                                <div class="flex items-center gap-3">
-                                    <Label for="blockTag{tag.id}" class="w-full {!filtersBindable.enableTagFiltering ? "opacity-50" : ""}">
-                                        <Item.Root variant="outline">
-                                            <Item.Content>
-                                                <Item.Title>{tag.name}</Item.Title>
-                                            </Item.Content>
-                                            <Item.Actions>
-                                                <input disabled={!filtersBindable.enableTagFiltering} id="blockTag{tag.id}" {...updateCalendarForm.fields.filters.blockTags.as("checkbox", tag.id)} bind:group={filtersBindable.blockTags} />
-                                            </Item.Actions>
-                                        </Item.Root>
-                                    </Label>
-                                </div>
-                            {/each}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+				<div>
+					<input
+						{...updateCalendarForm.fields.filters.tagFilterType.as(
+							"hidden",
+							filtersBindable.tagFilterType
+						)}
+					/>
+					<Tabs.Root bind:value={filtersBindable.tagFilterType} class="w-full mt-2">
+						<Tabs.List class="w-full rounded-b-none">
+							<Tabs.Trigger value="allow" disabled={!filtersBindable.enableTagFiltering}
+								>Allow Events</Tabs.Trigger
+							>
+							<Tabs.Trigger value="block" disabled={!filtersBindable.enableTagFiltering}
+								>Block Events</Tabs.Trigger
+							>
+						</Tabs.List>
+					</Tabs.Root>
+					<div
+						class="w-full bg-muted rounded-b-md p-2 {filtersBindable.tagFilterType === 'block'
+							? 'hidden'
+							: 'mt-0.5'}"
+					>
+						<Label class="flex flex-col items-start space-y-0.5">
+							<span class="text-sm text-muted-foreground"
+								>Allow events that contain this tag.{#if filtersBindable.allowTags.length === 0}<br
+									/><span class="text-red-500"
+										>*If no tag is selected, then all events will go through and no filtering will
+										happen.</span
+									>{/if}</span
+							>
+						</Label>
+						<div class="space-y-2 mt-2">
+							{#each myTags as tag (`allowATag${tag.id}`)}
+								<div class="flex items-center gap-3">
+									<Label
+										for="allowTag{tag.id}"
+										class="w-full {!filtersBindable.enableTagFiltering ? 'opacity-50' : ''}"
+									>
+										<Item.Root variant="outline">
+											<Item.Content>
+												<Item.Title>{tag.name}</Item.Title>
+											</Item.Content>
+											<Item.Actions>
+												<input
+													disabled={!filtersBindable.enableTagFiltering}
+													id="allowTag{tag.id}"
+													{...updateCalendarForm.fields.filters.allowTags.as("checkbox", tag.id)}
+													bind:group={filtersBindable.allowTags}
+												/>
+											</Item.Actions>
+										</Item.Root>
+									</Label>
+								</div>
+							{/each}
+						</div>
+					</div>
+					<div
+						class="w-full bg-muted rounded-b-md p-2 {filtersBindable.tagFilterType === 'allow'
+							? 'hidden'
+							: 'mt-0.5'}"
+					>
+						<Label class="flex flex-col items-start space-y-0.5">
+							<span class="text-sm text-muted-foreground">Block events that contain this tag.</span>
+						</Label>
+						<div class="space-y-2 mt-2">
+							{#each myTags as tag (`blockATag${tag.id}`)}
+								<div class="flex items-center gap-3">
+									<Label
+										for="blockTag{tag.id}"
+										class="w-full {!filtersBindable.enableTagFiltering ? 'opacity-50' : ''}"
+									>
+										<Item.Root variant="outline">
+											<Item.Content>
+												<Item.Title>{tag.name}</Item.Title>
+											</Item.Content>
+											<Item.Actions>
+												<input
+													disabled={!filtersBindable.enableTagFiltering}
+													id="blockTag{tag.id}"
+													{...updateCalendarForm.fields.filters.blockTags.as("checkbox", tag.id)}
+													bind:group={filtersBindable.blockTags}
+												/>
+											</Item.Actions>
+										</Item.Root>
+									</Label>
+								</div>
+							{/each}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte b/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte
index fb4eb51..d5a3711 100644
--- a/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalGeneralInfo.svelte
@@ -1,79 +1,77 @@
 <script lang="ts">
-    import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
-    import { Textarea } from "@/components/ui/textarea";
-    import * as Card from "@/components/ui/card/index";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
+	import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
+	import { Textarea } from "@/components/ui/textarea";
+	import * as Card from "@/components/ui/card/index";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
 
-    let {
-        changed = $bindable(),
-        calPublicId,
-        calendarName,
-        calendarDescription
-    }: {
-        changed: boolean,
-        calPublicId: string,
-        calendarName: string,
-        calendarDescription: string
-    } = $props();
+	let {
+		changed = $bindable(),
+		calPublicId,
+		calendarName,
+		calendarDescription
+	}: {
+		changed: boolean;
+		calPublicId: string;
+		calendarName: string;
+		calendarDescription: string;
+	} = $props();
 
-    let calPublicIdBindable = $derived(calPublicId);
-    let calendarNameBindable = $derived(calendarName);
-    let calendarDescriptionBindable = $derived(calendarDescription);
+	let calPublicIdBindable = $derived(calPublicId);
+	let calendarNameBindable = $derived(calendarName);
+	let calendarDescriptionBindable = $derived(calendarDescription);
 
-    $effect(() => {
-        const calPublicIdChanged = calPublicId !== calPublicIdBindable;
-        const calendarNameChanged = calendarName !== calendarNameBindable;
-        const calendarDescriptionChanged = calendarDescription !== calendarDescriptionBindable;
+	$effect(() => {
+		const calPublicIdChanged = calPublicId !== calPublicIdBindable;
+		const calendarNameChanged = calendarName !== calendarNameBindable;
+		const calendarDescriptionChanged = calendarDescription !== calendarDescriptionBindable;
 
-        changed = calPublicIdChanged || calendarNameChanged || calendarDescriptionChanged;
-    });
+		changed = calPublicIdChanged || calendarNameChanged || calendarDescriptionChanged;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>General Information</Card.Title>
-        <Card.Description>Basic details about your calendar</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-4">
-        <div class="space-y-2">
-            {#if calPublicIdBindable.length > 0}
-                <input {...updateCalendarForm.fields.publicId.as("hidden", calPublicIdBindable)} />
-            {/if}
-            <Label for="calendar-id">Calendar URL Path</Label>
-            <Input
-                id="calendar-id"
-                bind:value={calPublicIdBindable}
-                class="font-mono text-sm"
-            />
-            {#each updateCalendarForm.fields.publicId.issues() as issue}
-                <p class="text-sm text-red-500">{issue.message}</p>
-            {/each}
-        </div>
+	<Card.Header>
+		<Card.Title>General Information</Card.Title>
+		<Card.Description>Basic details about your calendar</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-4">
+		<div class="space-y-2">
+			{#if calPublicIdBindable.length > 0}
+				<input {...updateCalendarForm.fields.publicId.as("hidden", calPublicIdBindable)} />
+			{/if}
+			<Label for="calendar-id">Calendar URL Path</Label>
+			<Input id="calendar-id" bind:value={calPublicIdBindable} class="font-mono text-sm" />
+			{#each updateCalendarForm.fields.publicId.issues() as issue}
+				<p class="text-sm text-red-500">{issue.message}</p>
+			{/each}
+		</div>
 
-        <div class="space-y-2">
-            {#if calendarNameBindable.length > 0}
-                <input {...updateCalendarForm.fields.name.as("hidden", calendarNameBindable)} />
-            {/if}
-            <Label for="calendar-name">Calendar Name</Label>
-            <Input
-                id="calendar-name"
-                bind:value={calendarNameBindable}
-                placeholder="Enter calendar name"
-            />
-        </div>
+		<div class="space-y-2">
+			{#if calendarNameBindable.length > 0}
+				<input {...updateCalendarForm.fields.name.as("hidden", calendarNameBindable)} />
+			{/if}
+			<Label for="calendar-name">Calendar Name</Label>
+			<Input
+				id="calendar-name"
+				bind:value={calendarNameBindable}
+				placeholder="Enter calendar name"
+			/>
+		</div>
 
-        <div class="space-y-2">
-            {#if calendarDescriptionBindable.length > 0}
-                <input {...updateCalendarForm.fields.description.as("hidden", calendarDescriptionBindable)} />
-            {/if}
-            <Label for="calendar-description">Description</Label>
-            <Textarea
-                bind:value={calendarDescriptionBindable}
-                placeholder="Enter calendar description"
-                rows={3}
-                id="calendar-description"
-            />
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+		<div class="space-y-2">
+			{#if calendarDescriptionBindable.length > 0}
+				<input
+					{...updateCalendarForm.fields.description.as("hidden", calendarDescriptionBindable)}
+				/>
+			{/if}
+			<Label for="calendar-description">Description</Label>
+			<Textarea
+				bind:value={calendarDescriptionBindable}
+				placeholder="Enter calendar description"
+				rows={3}
+				id="calendar-description"
+			/>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/calendar/CalQuickActions.svelte b/frontend/src/lib/dashboard/calendar/CalQuickActions.svelte
index d8c7f44..2c2cc4b 100644
--- a/frontend/src/lib/dashboard/calendar/CalQuickActions.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalQuickActions.svelte
@@ -1,48 +1,54 @@
 <script lang="ts">
-    import { deleteCalendarCommand } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import * as Card from "@/components/ui/card/index";
-    import { cn } from "@/utils";
-    import { toast } from "svelte-sonner";
-    import { goto } from "$app/navigation";
+	import { deleteCalendarCommand } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import * as Card from "@/components/ui/card/index";
+	import { cn } from "@/utils";
+	import { toast } from "svelte-sonner";
+	import { goto } from "$app/navigation";
 
-    let { calId }: { calId: string } = $props();
+	let { calId }: { calId: string } = $props();
 
-    async function deleteCal() {
-        let savingChanges = toast.loading("Removing Calendar.", { duration: Number.POSITIVE_INFINITY });
-        const response = await deleteCalendarCommand(calId);
-        toast.dismiss(savingChanges);
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-            goto("/dashboard/calendars");
-        }
-    }
+	async function deleteCal() {
+		let savingChanges = toast.loading("Removing Calendar.", { duration: Number.POSITIVE_INFINITY });
+		const response = await deleteCalendarCommand(calId);
+		toast.dismiss(savingChanges);
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+			goto("/dashboard/calendars");
+		}
+	}
 </script>
 
 <Card.Root>
-    <Card.Header>
-    <Card.Title>Quick Actions</Card.Title>
-    </Card.Header>
-    <Card.Content class="space-y-2">
-        <!-- Delete Calendar Dialog -->
-        <Dialog.Root>
-            <Dialog.Trigger class={cn(buttonVariants({ variant: "outline" }), "w-full justify-start text-destructive hover:bg-red-500 bg-transparent")}>
-                Delete Calendar
-            </Dialog.Trigger>
-            <Dialog.Content>
-                <Dialog.Header>
-                    <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-                    <Dialog.Description>
-                        This action cannot be undone. This will permanently delete this calendar from our servers. All links or image feeds relying on this calendar will not work.
-                    </Dialog.Description>
-                    <Dialog.Footer>
-                        <Button variant="destructive" onclick={deleteCal}>Confirm Delete</Button>
-                    </Dialog.Footer>
-                </Dialog.Header>
-            </Dialog.Content>
-        </Dialog.Root>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Quick Actions</Card.Title>
+	</Card.Header>
+	<Card.Content class="space-y-2">
+		<!-- Delete Calendar Dialog -->
+		<Dialog.Root>
+			<Dialog.Trigger
+				class={cn(
+					buttonVariants({ variant: "outline" }),
+					"w-full justify-start text-destructive hover:bg-red-500 bg-transparent"
+				)}
+			>
+				Delete Calendar
+			</Dialog.Trigger>
+			<Dialog.Content>
+				<Dialog.Header>
+					<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
+					<Dialog.Description>
+						This action cannot be undone. This will permanently delete this calendar from our
+						servers. All links or image feeds relying on this calendar will not work.
+					</Dialog.Description>
+					<Dialog.Footer>
+						<Button variant="destructive" onclick={deleteCal}>Confirm Delete</Button>
+					</Dialog.Footer>
+				</Dialog.Header>
+			</Dialog.Content>
+		</Dialog.Root>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/calendar/CalSecuritySettings.svelte b/frontend/src/lib/dashboard/calendar/CalSecuritySettings.svelte
index f6d8ca6..60176cd 100644
--- a/frontend/src/lib/dashboard/calendar/CalSecuritySettings.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalSecuritySettings.svelte
@@ -1,83 +1,96 @@
 <script lang="ts">
-    import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
-    import { Textarea } from "@/components/ui/textarea";
-    import * as Card from "@/components/ui/card/index";
-    import { Switch } from "@/components/ui/switch";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
+	import { updateCalendarForm } from "../../../routes/(mainWebsite)/dashboard/calendars/calendarActions.remote";
+	import { Textarea } from "@/components/ui/textarea";
+	import * as Card from "@/components/ui/card/index";
+	import { Switch } from "@/components/ui/switch";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
 
-    let {
-        changed = $bindable(),
-        enablePassword,
-        newPassword,
-        passwordScreenMessage
-    }: {
-        changed: boolean,
-        enablePassword: boolean,
-        newPassword: string,
-        passwordScreenMessage: string
-    } = $props();
+	let {
+		changed = $bindable(),
+		enablePassword,
+		newPassword,
+		passwordScreenMessage
+	}: {
+		changed: boolean;
+		enablePassword: boolean;
+		newPassword: string;
+		passwordScreenMessage: string;
+	} = $props();
 
-    let enablePasswordBindable = $derived(enablePassword);
-    let newPasswordBindable = $derived(newPassword);
-    let passwordScreenMessageBindable = $derived(passwordScreenMessage);
+	let enablePasswordBindable = $derived(enablePassword);
+	let newPasswordBindable = $derived(newPassword);
+	let passwordScreenMessageBindable = $derived(passwordScreenMessage);
 
-    $effect(() => {
-        const enablePasswordChanged = enablePasswordBindable !== enablePassword;
-        const newPasswordChanged = newPassword !== newPasswordBindable;
-        const passwordScreenMessageChanged = passwordScreenMessage !== passwordScreenMessageBindable;
+	$effect(() => {
+		const enablePasswordChanged = enablePasswordBindable !== enablePassword;
+		const newPasswordChanged = newPassword !== newPasswordBindable;
+		const passwordScreenMessageChanged = passwordScreenMessage !== passwordScreenMessageBindable;
 
-        changed = enablePasswordChanged || ( enablePassword && newPasswordChanged ) || ( enablePassword && passwordScreenMessageChanged );
-    });
+		changed =
+			enablePasswordChanged ||
+			(enablePassword && newPasswordChanged) ||
+			(enablePassword && passwordScreenMessageChanged);
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Security Settings</Card.Title>
-        <Card.Description>Control access to your calendar</Card.Description>
-    </Card.Header>
+	<Card.Header>
+		<Card.Title>Security Settings</Card.Title>
+		<Card.Description>Control access to your calendar</Card.Description>
+	</Card.Header>
 
-    <Card.Content class="space-y-4">
-        <div class="flex items-center justify-between">
-            <div class="space-y-0.5">
-                <Label for="password-protection" class="text-base">
-                    Password Protection
-                </Label>
-                <p class="text-sm text-muted-foreground">Require a password to access this calendar</p>
-            </div>
-            <input {...updateCalendarForm.fields.enablePassword.as("checkbox")} class="sr-only" bind:checked={enablePasswordBindable} type="checkbox" />
-            <Switch
-                id="password-protection"
-                bind:checked={enablePasswordBindable}
-            />
-        </div>
+	<Card.Content class="space-y-4">
+		<div class="flex items-center justify-between">
+			<div class="space-y-0.5">
+				<Label for="password-protection" class="text-base">Password Protection</Label>
+				<p class="text-sm text-muted-foreground">Require a password to access this calendar</p>
+			</div>
+			<input
+				{...updateCalendarForm.fields.enablePassword.as("checkbox")}
+				class="sr-only"
+				bind:checked={enablePasswordBindable}
+				type="checkbox"
+			/>
+			<Switch id="password-protection" bind:checked={enablePasswordBindable} />
+		</div>
 
-        {#if enablePasswordBindable}
-            <div class="space-y-2 pt-2">
-                {#if newPasswordBindable.length > 0}
-                    <input {...updateCalendarForm.fields.newPassword.as("hidden", newPasswordBindable)} />
-                {/if}
-                <Label for="password">Calendar Password</Label>
-                <Input id="password" bind:value={newPasswordBindable} type="password" placeholder="Enter password" />
-            </div>
-            <div class="space-y-2">
-                {#if passwordScreenMessageBindable.length > 0}
-                    <input {...updateCalendarForm.fields.passwordScreenMessage.as("hidden", passwordScreenMessageBindable)} />
-                {/if}
-                <Label for="passwordScreenMessage">Password Screen Message</Label>
-                <Textarea
-                    id="passwordScreenMessage"
-                    bind:value={passwordScreenMessageBindable}
-                    placeholder="Enter Password Screen Message"
-                    rows={3}
-                />
-            </div>
-        {/if}
-    </Card.Content>
+		{#if enablePasswordBindable}
+			<div class="space-y-2 pt-2">
+				{#if newPasswordBindable.length > 0}
+					<input {...updateCalendarForm.fields.newPassword.as("hidden", newPasswordBindable)} />
+				{/if}
+				<Label for="password">Calendar Password</Label>
+				<Input
+					id="password"
+					bind:value={newPasswordBindable}
+					type="password"
+					placeholder="Enter password"
+				/>
+			</div>
+			<div class="space-y-2">
+				{#if passwordScreenMessageBindable.length > 0}
+					<input
+						{...updateCalendarForm.fields.passwordScreenMessage.as(
+							"hidden",
+							passwordScreenMessageBindable
+						)}
+					/>
+				{/if}
+				<Label for="passwordScreenMessage">Password Screen Message</Label>
+				<Textarea
+					id="passwordScreenMessage"
+					bind:value={passwordScreenMessageBindable}
+					placeholder="Enter Password Screen Message"
+					rows={3}
+				/>
+			</div>
+		{/if}
+	</Card.Content>
 </Card.Root>
 
 <style>
-    input[type="checkbox"] {
-        accent-color: #000000;
-    }
-</style>
\ No newline at end of file
+	input[type="checkbox"] {
+		accent-color: #000000;
+	}
+</style>
diff --git a/frontend/src/lib/dashboard/calendar/CalShare.svelte b/frontend/src/lib/dashboard/calendar/CalShare.svelte
index 53787f1..ce2e4d6 100644
--- a/frontend/src/lib/dashboard/calendar/CalShare.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalShare.svelte
@@ -1,40 +1,40 @@
 <script lang="ts">
-    import { Copy, Link2, SquareArrowOutUpRight } from "@lucide/svelte";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { toast } from "svelte-sonner";
+	import { Copy, Link2, SquareArrowOutUpRight } from "@lucide/svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { toast } from "svelte-sonner";
 
-    let { calId }: { calId: string } = $props();
+	let { calId }: { calId: string } = $props();
 
-    function handleCopyLink() {
-        const link = `${window.location.origin}/cal/${calId}`;
+	function handleCopyLink() {
+		const link = `${window.location.origin}/cal/${calId}`;
 
-        navigator.clipboard.writeText(link);
+		navigator.clipboard.writeText(link);
 
-        toast.info("Copied", {
-            description: link,
-            descriptionClass: "underline"
-        })
-    }
+		toast.info("Copied", {
+			description: link,
+			descriptionClass: "underline"
+		});
+	}
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Link</Card.Title>
-        <Card.Description>Share this calendar with others</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-3">
-        <div class="flex items-center gap-2 p-3 bg-muted rounded-lg">
-            <Link2 class="h-4 w-4 text-muted-foreground shrink-0" />
-            <span class="text-sm font-mono truncate">/cal/{calId}</span>
-        </div>
-        <Button onclick={handleCopyLink} class="w-full gap-2 bg-transparent" variant="outline">
-            <Copy class="h-4 w-4" />
-            Copy Link
-        </Button>
-        <Button class="w-full gap-2" href="/cal/{calId}" target="_blank">
-            <SquareArrowOutUpRight class="h-4 w-4" />
-            Goto Page
-        </Button>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Link</Card.Title>
+		<Card.Description>Share this calendar with others</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-3">
+		<div class="flex items-center gap-2 p-3 bg-muted rounded-lg">
+			<Link2 class="h-4 w-4 text-muted-foreground shrink-0" />
+			<span class="text-sm font-mono truncate">/cal/{calId}</span>
+		</div>
+		<Button onclick={handleCopyLink} class="w-full gap-2 bg-transparent" variant="outline">
+			<Copy class="h-4 w-4" />
+			Copy Link
+		</Button>
+		<Button class="w-full gap-2" href="/cal/{calId}" target="_blank">
+			<SquareArrowOutUpRight class="h-4 w-4" />
+			Goto Page
+		</Button>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/calendar/CalStatistics.svelte b/frontend/src/lib/dashboard/calendar/CalStatistics.svelte
index ea7739d..ba9eca7 100644
--- a/frontend/src/lib/dashboard/calendar/CalStatistics.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalStatistics.svelte
@@ -1,40 +1,44 @@
 <script lang="ts">
-    import * as Card from "@/components/ui/card/index";
-    import { Temporal } from "temporal-polyfill";
-    import PrettyDate from "@/PrettyDate.svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Temporal } from "temporal-polyfill";
+	import PrettyDate from "@/PrettyDate.svelte";
 
-    let {
-        visits,
-        created,
-        updated,
-        timeZone
-    }: {
-        visits: number,
-        created: string,
-        updated: string,
-        timeZone: string
-    } = $props();
+	let {
+		visits,
+		created,
+		updated,
+		timeZone
+	}: {
+		visits: number;
+		created: string;
+		updated: string;
+		timeZone: string;
+	} = $props();
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Statistics</Card.Title>
-        <Card.Description>Calendar performance</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-4">
-        <div class="space-y-2">
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Visits</span>
-                <span class="font-semibold text-foreground">{visits}</span>
-            </div>
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Created</span>
-                <span class="font-semibold text-foreground"><PrettyDate date={Temporal.Instant.from(created).toZonedDateTimeISO(timeZone)} /></span>
-            </div>
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Updated</span>
-                <span class="font-semibold text-foreground"><PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} /></span>
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Statistics</Card.Title>
+		<Card.Description>Calendar performance</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-4">
+		<div class="space-y-2">
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Visits</span>
+				<span class="font-semibold text-foreground">{visits}</span>
+			</div>
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Created</span>
+				<span class="font-semibold text-foreground"
+					><PrettyDate date={Temporal.Instant.from(created).toZonedDateTimeISO(timeZone)} /></span
+				>
+			</div>
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Updated</span>
+				<span class="font-semibold text-foreground"
+					><PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} /></span
+				>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/dynamicUrls/ADaySlot.svelte b/frontend/src/lib/dashboard/dynamicUrls/ADaySlot.svelte
index 1c97cff..54d2712 100644
--- a/frontend/src/lib/dashboard/dynamicUrls/ADaySlot.svelte
+++ b/frontend/src/lib/dashboard/dynamicUrls/ADaySlot.svelte
@@ -1,92 +1,97 @@
 <script lang="ts">
-    import { cn, type WeekSheetTimeSlot } from "@/utils";
-    import { GripVertical } from "@lucide/svelte";
+	import { cn, type WeekSheetTimeSlot } from "@/utils";
+	import { GripVertical } from "@lucide/svelte";
 
-    let {
-        resizePreview,
-        dayIndex,
-        slotIndex,
-        slot,
-        minuteToY,
-        selectedSlot,
-        handleBlockClick,
-        handleResizeStart,
-        formatTime
-    }: {
-        resizePreview: {
-            dayIndex: number,
-            slotIndex: number,
-            startMinute: number,
-            endMinute: number
-        } | null,
-        dayIndex: number,
-        slotIndex: number,
-        slot: WeekSheetTimeSlot,
-        minuteToY: (minute: number) => number,
-        selectedSlot: { dayIndex: number; slotIndex: number } | null,
-        handleBlockClick: (e: MouseEvent, dayIndex: number, slotIndex: number) => unknown,
-        handleResizeStart: (
-            e: MouseEvent,
-            dayIndex: number,
-            slotIndex: number,
-            edge: "top" | "bottom"
-        ) => unknown,
-        formatTime: (minute: number) => string
-    } = $props();
+	let {
+		resizePreview,
+		dayIndex,
+		slotIndex,
+		slot,
+		minuteToY,
+		selectedSlot,
+		handleBlockClick,
+		handleResizeStart,
+		formatTime
+	}: {
+		resizePreview: {
+			dayIndex: number;
+			slotIndex: number;
+			startMinute: number;
+			endMinute: number;
+		} | null;
+		dayIndex: number;
+		slotIndex: number;
+		slot: WeekSheetTimeSlot;
+		minuteToY: (minute: number) => number;
+		selectedSlot: { dayIndex: number; slotIndex: number } | null;
+		handleBlockClick: (e: MouseEvent, dayIndex: number, slotIndex: number) => unknown;
+		handleResizeStart: (
+			e: MouseEvent,
+			dayIndex: number,
+			slotIndex: number,
+			edge: "top" | "bottom"
+		) => unknown;
+		formatTime: (minute: number) => string;
+	} = $props();
 
-    const isResizing = $derived(resizePreview?.dayIndex === dayIndex && resizePreview?.slotIndex === slotIndex);
-    const start = $derived(isResizing && resizePreview ? resizePreview.startMinute : slot.startMinute);
-    const end = $derived(isResizing && resizePreview ? resizePreview.endMinute : slot.endMinute);
-    const top = $derived(minuteToY(start));
-    const height = $derived(minuteToY(end) - top);
-    const isSelected = $derived(selectedSlot?.dayIndex === dayIndex && selectedSlot?.slotIndex === slotIndex);
+	const isResizing = $derived(
+		resizePreview?.dayIndex === dayIndex && resizePreview?.slotIndex === slotIndex
+	);
+	const start = $derived(
+		isResizing && resizePreview ? resizePreview.startMinute : slot.startMinute
+	);
+	const end = $derived(isResizing && resizePreview ? resizePreview.endMinute : slot.endMinute);
+	const top = $derived(minuteToY(start));
+	const height = $derived(minuteToY(end) - top);
+	const isSelected = $derived(
+		selectedSlot?.dayIndex === dayIndex && selectedSlot?.slotIndex === slotIndex
+	);
 </script>
 
 <div
-    data-block
-    class={cn(
-        "absolute left-0.5 right-0.5 rounded-md overflow-hidden cursor-pointer transition-shadow group",
-        "bg-ring/20 border border-ring/40",
-        isSelected && "ring-2 ring-ring shadow-lg z-20",
-        isResizing && "opacity-80",
-    )}
-    style="top:{top}px;height:{Math.max(height, 16)}px"
-    onclick={(e) => handleBlockClick(e, dayIndex, slotIndex)}
-    role="none"
-    >
-    
-    <div
-        role="none"
-        class="absolute top-0 left-0 right-0 h-2 cursor-ns-resize flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
-        onmousedown={(e) => handleResizeStart(e, dayIndex, slotIndex, "top")}
-    >
-        <GripVertical class="h-2.5 w-2.5 text-primary rotate-90" />
-    </div>
+	data-block
+	class={cn(
+		"absolute left-0.5 right-0.5 rounded-md overflow-hidden cursor-pointer transition-shadow group",
+		"bg-ring/20 border border-ring/40",
+		isSelected && "ring-2 ring-ring shadow-lg z-20",
+		isResizing && "opacity-80"
+	)}
+	style="top:{top}px;height:{Math.max(height, 16)}px"
+	onclick={(e) => handleBlockClick(e, dayIndex, slotIndex)}
+	role="none"
+>
+	<div
+		role="none"
+		class="absolute top-0 left-0 right-0 h-2 cursor-ns-resize flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
+		onmousedown={(e) => handleResizeStart(e, dayIndex, slotIndex, "top")}
+	>
+		<GripVertical class="h-2.5 w-2.5 text-primary rotate-90" />
+	</div>
 
-    <div class="px-1 py-0.5 h-full flex flex-col justify-center">
-        <p class="text-[9px] font-medium text-primary leading-tight">
-            {formatTime(start)}
-        </p>
+	<div class="px-1 py-0.5 h-full flex flex-col justify-center">
+		<p class="text-[9px] font-medium text-primary leading-tight">
+			{formatTime(start)}
+		</p>
 
-        {#if height > 30}
-            <p class="text-[8px] text-primary/70 truncate leading-tight mt-0.5">
-                {slot.link}
-                <!-- {slot.link ? new URL(slot.link).hostname : "No URL"} -->
-            </p>
-        {/if}
+		{#if height > 30}
+			<p class="text-[8px] text-primary/70 truncate leading-tight mt-0.5">
+				{slot.link}
+				<!-- {slot.link ? new URL(slot.link).hostname : "No URL"} -->
+			</p>
+		{/if}
 
-        {#if height > 45}
-            <p class="text-[9px] text-primary/60 leading-tight">
-                {formatTime(end)}
-            </p>
-        {/if}
-    </div>
+		{#if height > 45}
+			<p class="text-[9px] text-primary/60 leading-tight">
+				{formatTime(end)}
+			</p>
+		{/if}
+	</div>
 
-    <div
-        role="none"
-        class="absolute bottom-0 left-0 right-0 h-2 cursor-ns-resize flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
-        onmousedown={(e) => handleResizeStart(e, dayIndex, slotIndex, "bottom")}
-    >
-        <GripVertical class="h-2.5 w-2.5 text-primary rotate-90" />
-    </div>
-</div>
\ No newline at end of file
+	<div
+		role="none"
+		class="absolute bottom-0 left-0 right-0 h-2 cursor-ns-resize flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
+		onmousedown={(e) => handleResizeStart(e, dayIndex, slotIndex, "bottom")}
+	>
+		<GripVertical class="h-2.5 w-2.5 text-primary rotate-90" />
+	</div>
+</div>
diff --git a/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte b/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
index 5bd51dc..593ceeb 100644
--- a/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
+++ b/frontend/src/lib/dashboard/dynamicUrls/DynamicURLEditor.svelte
@@ -1,356 +1,376 @@
 <script lang="ts">
-    import { deleteDynamicURLCommand, updateDynamicURLCommand } from "../../../routes/(mainWebsite)/dashboard/dynamic-urls/data.remote";
-    import { cn, timeWhen, TIMEZONES, type DynamicURLModel } from "@/utils.js";
-    import * as Select from "$lib/components/ui/select/index.js";
-    import { Switch } from "$lib/components/ui/switch/index.js";
-    import * as Table from "$lib/components/ui/table/index.js";
-    import { Label } from "$lib/components/ui/label/index.js";
-    import { Input } from "$lib/components/ui/input/index.js";
-    import { AlertTriangle, Trash2 } from "@lucide/svelte";
-    import WeekSheetGrid from "./WeekSheetGrid.svelte";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { Badge } from "@/components/ui/badge";
+	import {
+		deleteDynamicURLCommand,
+		updateDynamicURLCommand
+	} from "../../../routes/(mainWebsite)/dashboard/dynamic-urls/data.remote";
+	import { cn, timeWhen, TIMEZONES, type DynamicURLModel } from "@/utils.js";
+	import * as Select from "$lib/components/ui/select/index.js";
+	import { Switch } from "$lib/components/ui/switch/index.js";
+	import * as Table from "$lib/components/ui/table/index.js";
+	import { Label } from "$lib/components/ui/label/index.js";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { AlertTriangle, Trash2 } from "@lucide/svelte";
+	import WeekSheetGrid from "./WeekSheetGrid.svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { Badge } from "@/components/ui/badge";
 	import { Temporal } from "temporal-polyfill";
-    import { toast } from "svelte-sonner";
+	import { toast } from "svelte-sonner";
 
-    async function deleteIt() {
-        const loading = toast.loading("Deleting Dynamic URL");
-        try {
-            const response = await deleteDynamicURLCommand({
-                id: url.id
-            });
-            toast.dismiss(loading);
-            if (response.error) {
-                toast.error(response.msg);
-            } else {
-                toast.success(response.msg);
-            }
-        } catch(err) {
-            console.log(err);
-            toast.error("An error has occured.");
-        }
-    }
+	async function deleteIt() {
+		const loading = toast.loading("Deleting Dynamic URL");
+		try {
+			const response = await deleteDynamicURLCommand({
+				id: url.id
+			});
+			toast.dismiss(loading);
+			if (response.error) {
+				toast.error(response.msg);
+			} else {
+				toast.success(response.msg);
+			}
+		} catch (err) {
+			console.log(err);
+			toast.error("An error has occured.");
+		}
+	}
 
-    let { url, saveRequired = $bindable() }: { url: DynamicURLModel, saveRequired: boolean } = $props();
+	let { url, saveRequired = $bindable() }: { url: DynamicURLModel; saveRequired: boolean } =
+		$props();
 
-    const overrideExpiresTimes = [
-        { value: "never", label: "Never" },
-        { value: "15min", label: "In 15 minutes" },
-        { value: "30min", label: "In 30 minutes" },
-        { value: "1hour", label: "In 1 hour" },
-        { value: "2hour", label: "In 2 hours" },
-        { value: "4hour", label: "In 4 hours" },
-        { value: "8hour", label: "In 8 hours" },
-        { value: "16hour", label: "In 16 hours" }
-    ] as const;
+	const overrideExpiresTimes = [
+		{ value: "never", label: "Never" },
+		{ value: "15min", label: "In 15 minutes" },
+		{ value: "30min", label: "In 30 minutes" },
+		{ value: "1hour", label: "In 1 hour" },
+		{ value: "2hour", label: "In 2 hours" },
+		{ value: "4hour", label: "In 4 hours" },
+		{ value: "8hour", label: "In 8 hours" },
+		{ value: "16hour", label: "In 16 hours" }
+	] as const;
 
-    let selectedOverrideExpireTime: (typeof overrideExpiresTimes)[number]['value'] | "set" = $derived(url.overrideExpireInStr);
-    let selectedOverrideExpireTimeToDate = $derived({
-        never: 0,
-        "15min": 15,
-        "30min": 30,
-        "1hour": 60,
-        "2hour": 120,
-        "4hour": 240,
-        "8hour": 480,
-        "16hour": 960,
-        "set": 0
-    }[selectedOverrideExpireTime]);
+	let selectedOverrideExpireTime: (typeof overrideExpiresTimes)[number]["value"] | "set" = $derived(
+		url.overrideExpireInStr
+	);
+	let selectedOverrideExpireTimeToDate = $derived(
+		{
+			never: 0,
+			"15min": 15,
+			"30min": 30,
+			"1hour": 60,
+			"2hour": 120,
+			"4hour": 240,
+			"8hour": 480,
+			"16hour": 960,
+			set: 0
+		}[selectedOverrideExpireTime]
+	);
 
-    let confirmDelete = $state(false);
-    let totalHits = $derived(url.refs.reduce((sum, ref) => sum + ref.hits, 0));
-    let maxHits = $derived(Math.max(...url.refs.map((r) => r.hits), 1));
+	let confirmDelete = $state(false);
+	let totalHits = $derived(url.refs.reduce((sum, ref) => sum + ref.hits, 0));
+	let maxHits = $derived(Math.max(...url.refs.map((r) => r.hits), 1));
 
-    let defaultRedirectURL = $derived(url.defaultRedirectTo);
-    let currentTz = $derived(url.timeZone.toString());
-    let disableURL = $derived(url.disableURL);
-    let enableOverride = $derived(url.enableOverrideRedirect);
-    let overrideURL = $derived(url.overrideRedirectTo);
-    let enableWeeklySchedule = $derived(url.enableWeekSheet);
-    let weekSheet = $derived(url.weekSheet);
+	let defaultRedirectURL = $derived(url.defaultRedirectTo);
+	let currentTz = $derived(url.timeZone.toString());
+	let disableURL = $derived(url.disableURL);
+	let enableOverride = $derived(url.enableOverrideRedirect);
+	let overrideURL = $derived(url.overrideRedirectTo);
+	let enableWeeklySchedule = $derived(url.enableWeekSheet);
+	let weekSheet = $derived(url.weekSheet);
 
-    $effect(() => {
-        const defaultRedirectURLChanged = defaultRedirectURL !== url.defaultRedirectTo;
-        const currentTzChanged = currentTz !== url.timeZone.toString();
-        const disableURLChanged = disableURL !== url.disableURL;
-        const enableOverrideChanged = enableOverride !== url.enableOverrideRedirect;
-        const overrideURLChanged = overrideURL !== url.overrideRedirectTo;
-        const enableWeeklyScheduleChanged = enableWeeklySchedule !== url.enableWeekSheet;
-        const weekSheetChanged = weekSheet !== url.weekSheet;
-        const overrideExpiresInChanged = selectedOverrideExpireTime !== url.overrideExpireInStr;
+	$effect(() => {
+		const defaultRedirectURLChanged = defaultRedirectURL !== url.defaultRedirectTo;
+		const currentTzChanged = currentTz !== url.timeZone.toString();
+		const disableURLChanged = disableURL !== url.disableURL;
+		const enableOverrideChanged = enableOverride !== url.enableOverrideRedirect;
+		const overrideURLChanged = overrideURL !== url.overrideRedirectTo;
+		const enableWeeklyScheduleChanged = enableWeeklySchedule !== url.enableWeekSheet;
+		const weekSheetChanged = weekSheet !== url.weekSheet;
+		const overrideExpiresInChanged = selectedOverrideExpireTime !== url.overrideExpireInStr;
 
-        saveRequired = defaultRedirectURLChanged ||
-            currentTzChanged ||
-            disableURLChanged ||
-            enableOverrideChanged ||
-            ( enableOverride && overrideURLChanged ) ||
-            ( enableOverride && overrideExpiresInChanged ) ||
-            enableWeeklyScheduleChanged ||
-            weekSheetChanged;
-    });
+		saveRequired =
+			defaultRedirectURLChanged ||
+			currentTzChanged ||
+			disableURLChanged ||
+			enableOverrideChanged ||
+			(enableOverride && overrideURLChanged) ||
+			(enableOverride && overrideExpiresInChanged) ||
+			enableWeeklyScheduleChanged ||
+			weekSheetChanged;
+	});
 
-    async function update() {
-        const loading = toast.loading("Updating Dynamic URL");
-        try {
-            const response = await updateDynamicURLCommand({
-                id: url.id,
-                defaultRedirectTo: defaultRedirectURL,
-                timeZone: currentTz,
-                weekSheet,
-                enableWeekSheet: enableWeeklySchedule,
-                overrideRedirectTo: overrideURL,
-                enableOverrideRedirect: enableOverride,
-                disableURL,
-                overrideExpiresIn: selectedOverrideExpireTime === "never" ? "" :  selectedOverrideExpireTime === "set" ? url.overrideExpiresIn : Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate}).toString({ timeZoneName: 'never' }).replace('T', ' ')
-            });
-            toast.dismiss(loading);
-            if (response.error) {
-                toast.error(response.msg);
-            } else {
-                toast.success(response.msg);
-            }
-        } catch (err) {
-            toast.dismiss(loading);
-            console.log(err);
-            toast.error("An error has occured.");
-        }
-    }
+	async function update() {
+		const loading = toast.loading("Updating Dynamic URL");
+		try {
+			const response = await updateDynamicURLCommand({
+				id: url.id,
+				defaultRedirectTo: defaultRedirectURL,
+				timeZone: currentTz,
+				weekSheet,
+				enableWeekSheet: enableWeeklySchedule,
+				overrideRedirectTo: overrideURL,
+				enableOverrideRedirect: enableOverride,
+				disableURL,
+				overrideExpiresIn:
+					selectedOverrideExpireTime === "never"
+						? ""
+						: selectedOverrideExpireTime === "set"
+							? url.overrideExpiresIn
+							: Temporal.Now.zonedDateTimeISO(currentTz)
+									.add({ minutes: selectedOverrideExpireTimeToDate })
+									.toString({ timeZoneName: "never" })
+									.replace("T", " ")
+			});
+			toast.dismiss(loading);
+			if (response.error) {
+				toast.error(response.msg);
+			} else {
+				toast.success(response.msg);
+			}
+		} catch (err) {
+			toast.dismiss(loading);
+			console.log(err);
+			toast.error("An error has occured.");
+		}
+	}
 </script>
 
 <div class="p-4 lg:p-6 space-y-8 relative">
-    {#if saveRequired}
-        <Card.Root class="sticky top-1 z-40 rounded border-red-500">
-            <Card.Header>
-                <Card.Title>Save Changes?</Card.Title>
-                <Card.Description>All the changes you made are not yet saved.</Card.Description>
-                <Card.Action>
-                    <Button onclick={update}>Save</Button>
-                </Card.Action>
-            </Card.Header>
-        </Card.Root>
-    {/if}
-    <section class="space-y-4">
-        <h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">General Settings</h3>
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <div class="space-y-2">
-                <Label for={`default-${url.id}`}>Default Redirect URL</Label>
-                <Input
-                    id={`default-${url.id}`}
-                    bind:value={defaultRedirectURL}
-                    placeholder="https://example.com/fallback"
-                />
-                <p class="text-xs text-muted-foreground">Where visitors go when no schedule or override matches.</p>
-            </div>
-            <div class="space-y-2">
-                <Label for={`tz-${url.id}`}>Timezone</Label>
-                <Select.Root type="single" bind:value={currentTz} >
-                    <Select.Trigger id={`tz-${url.id}`}>
-                        {currentTz}
-                    </Select.Trigger>
-                    <Select.Content>
-                    {#each TIMEZONES as tz (`aTZ${tz}`)}
-                        <Select.Item value={tz}>
-                            {tz.replace(/_/g, " ")}
-                        </Select.Item>
-                    {/each}
-                    </Select.Content>
-                </Select.Root>
-                <p class="text-xs text-muted-foreground">Schedule times are evaluated in this timezone.</p>
-            </div>
-        </div>
+	{#if saveRequired}
+		<Card.Root class="sticky top-1 z-40 rounded border-red-500">
+			<Card.Header>
+				<Card.Title>Save Changes?</Card.Title>
+				<Card.Description>All the changes you made are not yet saved.</Card.Description>
+				<Card.Action>
+					<Button onclick={update}>Save</Button>
+				</Card.Action>
+			</Card.Header>
+		</Card.Root>
+	{/if}
+	<section class="space-y-4">
+		<h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">General Settings</h3>
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+			<div class="space-y-2">
+				<Label for={`default-${url.id}`}>Default Redirect URL</Label>
+				<Input
+					id={`default-${url.id}`}
+					bind:value={defaultRedirectURL}
+					placeholder="https://example.com/fallback"
+				/>
+				<p class="text-xs text-muted-foreground">
+					Where visitors go when no schedule or override matches.
+				</p>
+			</div>
+			<div class="space-y-2">
+				<Label for={`tz-${url.id}`}>Timezone</Label>
+				<Select.Root type="single" bind:value={currentTz}>
+					<Select.Trigger id={`tz-${url.id}`}>
+						{currentTz}
+					</Select.Trigger>
+					<Select.Content>
+						{#each TIMEZONES as tz (`aTZ${tz}`)}
+							<Select.Item value={tz}>
+								{tz.replace(/_/g, " ")}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+				<p class="text-xs text-muted-foreground">Schedule times are evaluated in this timezone.</p>
+			</div>
+		</div>
 
-        <div class="flex items-center justify-between rounded-lg border border-border p-4">
-            <div class="space-y-0.5">
-                <Label for={`disable-${url.id}`} class="font-medium">
-                    Disable URL
-                </Label>
-                <p class="text-xs text-muted-foreground">
-                    When disabled, visitors will see a 404 page instead of being redirected.
-                </p>
-            </div>
-            <Switch
-                id={`disable-${url.id}`}
-                checked={url.disableURL}
-                onCheckedChange={(checked) => disableURL = checked}
-            />
-        </div>
-    </section>
+		<div class="flex items-center justify-between rounded-lg border border-border p-4">
+			<div class="space-y-0.5">
+				<Label for={`disable-${url.id}`} class="font-medium">Disable URL</Label>
+				<p class="text-xs text-muted-foreground">
+					When disabled, visitors will see a 404 page instead of being redirected.
+				</p>
+			</div>
+			<Switch
+				id={`disable-${url.id}`}
+				checked={url.disableURL}
+				onCheckedChange={(checked) => (disableURL = checked)}
+			/>
+		</div>
+	</section>
 
-    <section class="space-y-4">
-        <h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">Override Redirect</h3>
-        <div class="rounded-lg border border-border p-4 space-y-4">
-            <div class="flex items-center justify-between">
-                <div class="space-y-0.5">
-                    <Label for={`override-toggle-${url.id}`} class="font-medium">
-                        Enable Override
-                    </Label>
-                    <p class="text-xs text-muted-foreground">
-                        When enabled, all visitors are sent to the override URL regardless of schedule.
-                    </p>
-                </div>
-                <Switch
-                    id={`override-toggle-${url.id}`}
-                    checked={url.enableOverrideRedirect}
-                    onCheckedChange={(checked) => enableOverride = checked}
-                />
-            </div>
-            {#if enableOverride}
-                <div class="space-y-2">
-                    <Label for={`override-url-${url.id}`}>Override URL</Label>
-                    <Input
-                        required
-                        id={`override-url-${url.id}`}
-                        bind:value={overrideURL}
-                        placeholder="https://zoom.us/j/special-event"
-                    />
-                    <Label class="flex flex-col items-start mt-5">
-                        Override expires in:
-                        <div class="flex items-center gap-2">
-                            <Select.Root type="single" name="favoriteFruit" bind:value={selectedOverrideExpireTime}>
-                                <Select.Trigger class="w-45">
-                                    {#if selectedOverrideExpireTime === "set"}
-                                        {timeWhen(url.overrideExpiresIn)}
-                                    {:else}
-                                        {overrideExpiresTimes.filter((a) => a["value"] === selectedOverrideExpireTime)[0]?.label}
-                                    {/if}
-                                </Select.Trigger>
-                                <Select.Content>
-                                    <Select.Group>
-                                        {#each overrideExpiresTimes as expireTime (expireTime.value)}
-                                            <Select.Item
-                                                value={expireTime.value}
-                                                label={expireTime.label}
-                                            >
-                                                {expireTime.label}
-                                            </Select.Item>
-                                        {/each}
-                                    </Select.Group>
-                                </Select.Content>
-                            </Select.Root>
-                            {#if selectedOverrideExpireTime !== "never" && selectedOverrideExpireTime !== "set"}
-                                {@const estTime = Temporal.Now.zonedDateTimeISO(currentTz).add({minutes: selectedOverrideExpireTimeToDate})}
-                                <p>Est. expire time {estTime.hour.toString().padStart(2, "0")}:{estTime.minute.toString().padStart(2, "0")}</p>
-                            {/if}
-                        </div>
-                    </Label>
-                </div>
-            {/if}
-        </div>
-    </section>
+	<section class="space-y-4">
+		<h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">
+			Override Redirect
+		</h3>
+		<div class="rounded-lg border border-border p-4 space-y-4">
+			<div class="flex items-center justify-between">
+				<div class="space-y-0.5">
+					<Label for={`override-toggle-${url.id}`} class="font-medium">Enable Override</Label>
+					<p class="text-xs text-muted-foreground">
+						When enabled, all visitors are sent to the override URL regardless of schedule.
+					</p>
+				</div>
+				<Switch
+					id={`override-toggle-${url.id}`}
+					checked={url.enableOverrideRedirect}
+					onCheckedChange={(checked) => (enableOverride = checked)}
+				/>
+			</div>
+			{#if enableOverride}
+				<div class="space-y-2">
+					<Label for={`override-url-${url.id}`}>Override URL</Label>
+					<Input
+						required
+						id={`override-url-${url.id}`}
+						bind:value={overrideURL}
+						placeholder="https://zoom.us/j/special-event"
+					/>
+					<Label class="flex flex-col items-start mt-5">
+						Override expires in:
+						<div class="flex items-center gap-2">
+							<Select.Root
+								type="single"
+								name="favoriteFruit"
+								bind:value={selectedOverrideExpireTime}
+							>
+								<Select.Trigger class="w-45">
+									{#if selectedOverrideExpireTime === "set"}
+										{timeWhen(url.overrideExpiresIn)}
+									{:else}
+										{overrideExpiresTimes.filter(
+											(a) => a["value"] === selectedOverrideExpireTime
+										)[0]?.label}
+									{/if}
+								</Select.Trigger>
+								<Select.Content>
+									<Select.Group>
+										{#each overrideExpiresTimes as expireTime (expireTime.value)}
+											<Select.Item value={expireTime.value} label={expireTime.label}>
+												{expireTime.label}
+											</Select.Item>
+										{/each}
+									</Select.Group>
+								</Select.Content>
+							</Select.Root>
+							{#if selectedOverrideExpireTime !== "never" && selectedOverrideExpireTime !== "set"}
+								{@const estTime = Temporal.Now.zonedDateTimeISO(currentTz).add({
+									minutes: selectedOverrideExpireTimeToDate
+								})}
+								<p>
+									Est. expire time {estTime.hour.toString().padStart(2, "0")}:{estTime.minute
+										.toString()
+										.padStart(2, "0")}
+								</p>
+							{/if}
+						</div>
+					</Label>
+				</div>
+			{/if}
+		</div>
+	</section>
 
-    <section class="space-y-4">
-        <h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">Weekly Schedule</h3>
-        <div class="rounded-lg border border-border p-4 space-y-4">
-            <div class="flex items-center justify-between">
-                <div class="space-y-0.5">
-                    <Label for={`week-toggle-${url.id}`} class="font-medium">
-                        Enable Weekly Schedule
-                    </Label>
-                    <p class="text-xs text-muted-foreground">
-                        Redirect to different URLs based on day and time of the week.
-                    </p>
-                </div>
-                <Switch
-                    id={`week-toggle-${url.id}`}
-                    checked={url.enableWeekSheet}
-                    onCheckedChange={(checked) => enableWeeklySchedule = checked}
-                />
-            </div>
-            {#if enableWeeklySchedule}
-                <WeekSheetGrid
-                    weekSheet={weekSheet}
-                    onchange={(newWeekSheet) => {
-                        weekSheet = newWeekSheet;
-                    }}
-                />
-            {/if}
-        </div>
-    </section>
+	<section class="space-y-4">
+		<h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">Weekly Schedule</h3>
+		<div class="rounded-lg border border-border p-4 space-y-4">
+			<div class="flex items-center justify-between">
+				<div class="space-y-0.5">
+					<Label for={`week-toggle-${url.id}`} class="font-medium">Enable Weekly Schedule</Label>
+					<p class="text-xs text-muted-foreground">
+						Redirect to different URLs based on day and time of the week.
+					</p>
+				</div>
+				<Switch
+					id={`week-toggle-${url.id}`}
+					checked={url.enableWeekSheet}
+					onCheckedChange={(checked) => (enableWeeklySchedule = checked)}
+				/>
+			</div>
+			{#if enableWeeklySchedule}
+				<WeekSheetGrid
+					{weekSheet}
+					onchange={(newWeekSheet) => {
+						weekSheet = newWeekSheet;
+					}}
+				/>
+			{/if}
+		</div>
+	</section>
 
-    {#if url.refs.length > 0}
-        <section class="space-y-4">
-            <h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">
-                Referral Tracking
-            </h3>
-            <div class="rounded-lg border border-border overflow-hidden">
-                <Table.Root>
-                    <Table.Header>
-                        <Table.Row>
-                            <Table.Head>Source</Table.Head>
-                            <Table.Head class="w-24 text-right">Hits</Table.Head>
-                            <Table.Head class="hidden sm:table-cell">Distribution</Table.Head>
-                        </Table.Row>
-                    </Table.Header>
-                    <Table.Body>
-                        {#each url.refs.sort((a, b) => b.hits - a.hits) as ref (`aref${ref.name}`)}
-                            <Table.Row>
-                                <Table.Cell>
-                                    <Badge variant="outline" class="font-mono text-xs">
-                                        ?ref={ref.name}
-                                    </Badge>
-                                </Table.Cell>
-                                <Table.Cell class="text-right font-medium tabular-nums">
-                                    {ref.hits.toLocaleString()}
-                                </Table.Cell>
-                                <Table.Cell class="hidden sm:table-cell">
-                                    <div class="flex items-center gap-2">
-                                        <div class="flex-1 h-2 rounded-full bg-secondary overflow-hidden">
-                                            <div
-                                                class="h-full rounded-full bg-primary transition-all"
-                                                style="width: {(ref.hits / maxHits) * 100}%;"
-                                            ></div>
-                                        </div>
-                                        <span class="text-xs text-muted-foreground w-10 text-right tabular-nums">
-                                            {totalHits > 0 ? Math.round((ref.hits / totalHits) * 100) : 0}%
-                                        </span>
-                                    </div>
-                                </Table.Cell>
-                            </Table.Row>
-                        {/each}
-                    </Table.Body>
-                </Table.Root>
-            </div>
-        </section>
-    {/if}
+	{#if url.refs.length > 0}
+		<section class="space-y-4">
+			<h3 class="text-sm font-semibold text-foreground uppercase tracking-wider">
+				Referral Tracking
+			</h3>
+			<div class="rounded-lg border border-border overflow-hidden">
+				<Table.Root>
+					<Table.Header>
+						<Table.Row>
+							<Table.Head>Source</Table.Head>
+							<Table.Head class="w-24 text-right">Hits</Table.Head>
+							<Table.Head class="hidden sm:table-cell">Distribution</Table.Head>
+						</Table.Row>
+					</Table.Header>
+					<Table.Body>
+						{#each url.refs.sort((a, b) => b.hits - a.hits) as ref (`aref${ref.name}`)}
+							<Table.Row>
+								<Table.Cell>
+									<Badge variant="outline" class="font-mono text-xs">
+										?ref={ref.name}
+									</Badge>
+								</Table.Cell>
+								<Table.Cell class="text-right font-medium tabular-nums">
+									{ref.hits.toLocaleString()}
+								</Table.Cell>
+								<Table.Cell class="hidden sm:table-cell">
+									<div class="flex items-center gap-2">
+										<div class="flex-1 h-2 rounded-full bg-secondary overflow-hidden">
+											<div
+												class="h-full rounded-full bg-primary transition-all"
+												style="width: {(ref.hits / maxHits) * 100}%;"
+											></div>
+										</div>
+										<span class="text-xs text-muted-foreground w-10 text-right tabular-nums">
+											{totalHits > 0 ? Math.round((ref.hits / totalHits) * 100) : 0}%
+										</span>
+									</div>
+								</Table.Cell>
+							</Table.Row>
+						{/each}
+					</Table.Body>
+				</Table.Root>
+			</div>
+		</section>
+	{/if}
 
-    <section class="space-y-4">
-        <h3 class="text-sm font-semibold text-destructive uppercase tracking-wider">
-            Danger Zone
-        </h3>
-        <div
-            class={cn(
-            "rounded-lg border p-4 flex items-center justify-between",
-            confirmDelete ? "border-destructive/50 bg-destructive/5" : "border-border",
-            )}
-        >
-            <div class="space-y-0.5">
-                <p class="text-sm font-medium text-foreground">Delete this Dynamic URL</p>
-                <p class="text-xs text-muted-foreground">
-                    This action cannot be undone. All referral tracking data will be lost.
-                </p>
-            </div>
-            {#if confirmDelete}
-                <div class="flex items-center gap-2 shrink-0">
-                    <Button variant="ghost" size="sm" onclick={() => confirmDelete = false}>
-                        Cancel
-                    </Button>
-                    <Button variant="destructive" size="sm" onclick={deleteIt} class="gap-1.5">
-                        <AlertTriangle class="h-3.5 w-3.5" />
-                        Confirm Delete
-                    </Button>
-                </div>
-            {:else}
-                <Button
-                    variant="destructive"
-                    size="sm"
-                    onclick={() => confirmDelete = true}
-                    class="gap-1.5 shrink-0"
-                >
-                    <Trash2 class="h-3.5 w-3.5" />
-                    Delete
-                </Button>
-            {/if}
-        </div>
-    </section>
-</div>
\ No newline at end of file
+	<section class="space-y-4">
+		<h3 class="text-sm font-semibold text-destructive uppercase tracking-wider">Danger Zone</h3>
+		<div
+			class={cn(
+				"rounded-lg border p-4 flex items-center justify-between",
+				confirmDelete ? "border-destructive/50 bg-destructive/5" : "border-border"
+			)}
+		>
+			<div class="space-y-0.5">
+				<p class="text-sm font-medium text-foreground">Delete this Dynamic URL</p>
+				<p class="text-xs text-muted-foreground">
+					This action cannot be undone. All referral tracking data will be lost.
+				</p>
+			</div>
+			{#if confirmDelete}
+				<div class="flex items-center gap-2 shrink-0">
+					<Button variant="ghost" size="sm" onclick={() => (confirmDelete = false)}>Cancel</Button>
+					<Button variant="destructive" size="sm" onclick={deleteIt} class="gap-1.5">
+						<AlertTriangle class="h-3.5 w-3.5" />
+						Confirm Delete
+					</Button>
+				</div>
+			{:else}
+				<Button
+					variant="destructive"
+					size="sm"
+					onclick={() => (confirmDelete = true)}
+					class="gap-1.5 shrink-0"
+				>
+					<Trash2 class="h-3.5 w-3.5" />
+					Delete
+				</Button>
+			{/if}
+		</div>
+	</section>
+</div>
diff --git a/frontend/src/lib/dashboard/dynamicUrls/SingleDynamicURL.svelte b/frontend/src/lib/dashboard/dynamicUrls/SingleDynamicURL.svelte
index 8756ead..0e5b698 100644
--- a/frontend/src/lib/dashboard/dynamicUrls/SingleDynamicURL.svelte
+++ b/frontend/src/lib/dashboard/dynamicUrls/SingleDynamicURL.svelte
@@ -1,109 +1,126 @@
 <script lang="ts">
-    import { BarChart3, ChevronDown, ExternalLink, Globe, Link2, ShieldAlert, ShieldOff, TriangleAlert } from "@lucide/svelte";
-    import * as Collapsible from "$lib/components/ui/collapsible/index.js";
-    import DynamicURLEditor from "./DynamicURLEditor.svelte";
-    import { buttonVariants } from "@/components/ui/button";
-    import { cn, type DynamicURLModel } from "@/utils.js";
-    import * as Card from "@/components/ui/card/index";
-    import { Badge } from "@/components/ui/badge";
+	import {
+		BarChart3,
+		ChevronDown,
+		ExternalLink,
+		Globe,
+		Link2,
+		ShieldAlert,
+		ShieldOff,
+		TriangleAlert
+	} from "@lucide/svelte";
+	import * as Collapsible from "$lib/components/ui/collapsible/index.js";
+	import DynamicURLEditor from "./DynamicURLEditor.svelte";
+	import { buttonVariants } from "@/components/ui/button";
+	import { cn, type DynamicURLModel } from "@/utils.js";
+	import * as Card from "@/components/ui/card/index";
+	import { Badge } from "@/components/ui/badge";
 
-    let { openId = $bindable(), url, websiteURL }: { openId: string | null, url: DynamicURLModel, websiteURL: string } = $props();
+	let {
+		openId = $bindable(),
+		url,
+		websiteURL
+	}: { openId: string | null; url: DynamicURLModel; websiteURL: string } = $props();
 
-    function getStatusInfo(url: DynamicURLModel) {
-        if (url.disableURL) return { label: "Disabled", variant: "destructive" as const, icon: ShieldOff }
-        if (url.enableOverrideRedirect) return { label: "Override Active", variant: "secondary" as const, icon: ShieldAlert }
-        if (url.enableWeekSheet) return { label: "Scheduled", variant: "default" as const, icon: Globe }
-        return { label: "Default Only", variant: "outline" as const, icon: Globe }
-    }
+	function getStatusInfo(url: DynamicURLModel) {
+		if (url.disableURL)
+			return { label: "Disabled", variant: "destructive" as const, icon: ShieldOff };
+		if (url.enableOverrideRedirect)
+			return { label: "Override Active", variant: "secondary" as const, icon: ShieldAlert };
+		if (url.enableWeekSheet)
+			return { label: "Scheduled", variant: "default" as const, icon: Globe };
+		return { label: "Default Only", variant: "outline" as const, icon: Globe };
+	}
 
-    function getTotalHits(url: DynamicURLModel) {
-        return url.refs.reduce((sum, ref) => sum + ref.hits, 0)
-    }
+	function getTotalHits(url: DynamicURLModel) {
+		return url.refs.reduce((sum, ref) => sum + ref.hits, 0);
+	}
 
-    function getTimeSlotCount(url: DynamicURLModel) {
-        return url.weekSheet.reduce((sum, day) => sum + day.length, 0)
-    }
+	function getTimeSlotCount(url: DynamicURLModel) {
+		return url.weekSheet.reduce((sum, day) => sum + day.length, 0);
+	}
 
-    let status = $derived(getStatusInfo(url));
-    let totalHits = $derived(getTotalHits(url));
-    let slotCount = $derived(getTimeSlotCount(url));
-    let isOpen = $derived(openId === url.id);
+	let status = $derived(getStatusInfo(url));
+	let totalHits = $derived(getTotalHits(url));
+	let slotCount = $derived(getTimeSlotCount(url));
+	let isOpen = $derived(openId === url.id);
 
-    let saveRequired = $state(false);
-    let saveRequiredClosed = $state(false);
+	let saveRequired = $state(false);
+	let saveRequiredClosed = $state(false);
 
-    $effect(() => {
-        if (!saveRequired) saveRequiredClosed = false;
-    });
+	$effect(() => {
+		if (!saveRequired) saveRequiredClosed = false;
+	});
 </script>
 
 <Collapsible.Root
-    open={isOpen}
-    onOpenChange={(open) => {
-        openId = (open ? url.id : null);
-        saveRequiredClosed = saveRequired ? true : false;
-    }}
+	open={isOpen}
+	onOpenChange={(open) => {
+		openId = open ? url.id : null;
+		saveRequiredClosed = saveRequired ? true : false;
+	}}
 >
-    <Card.Root
-        class={cn(
-            "transition-colors p-0 gap-0",
-            isOpen && "ring-1 ring-primary/30",
-            url.disableURL && "opacity-60",
-            saveRequired && "outline-4 outline-ring/50",
-            saveRequiredClosed && "outline-red-500/50"
-        )}
-    >
-        <Collapsible.Trigger class={buttonVariants({ variant: "ghost", class: "h-full" })}>
-            <div id="aDynamicURL{url.id}" class="w-full flex items-center gap-4 p-4 text-left">
-                <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                    <Link2 class="h-5 w-5 text-primary" />
-                </div>
+	<Card.Root
+		class={cn(
+			"transition-colors p-0 gap-0",
+			isOpen && "ring-1 ring-primary/30",
+			url.disableURL && "opacity-60",
+			saveRequired && "outline-4 outline-ring/50",
+			saveRequiredClosed && "outline-red-500/50"
+		)}
+	>
+		<Collapsible.Trigger class={buttonVariants({ variant: "ghost", class: "h-full" })}>
+			<div id="aDynamicURL{url.id}" class="w-full flex items-center gap-4 p-4 text-left">
+				<div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+					<Link2 class="h-5 w-5 text-primary" />
+				</div>
 
-                <div class="flex-1 min-w-0">
-                    <div class="flex items-center gap-2">
-                        <span class="font-medium text-foreground truncate">
-                            /{url.id.replace("url_", "")}
-                        </span>
-                        <Badge variant={status.variant} class="text-xs shrink-0">
-                            <status.icon class="h-3 w-3 mr-1" />
-                            {status.label}
-                        </Badge>
-                        {#if saveRequiredClosed}
-                            <Badge variant="destructive" class="text-xs shrink-0">
-                                <TriangleAlert class="h-3 w-3 mr-1" />
-                                Unsaved Changes
-                            </Badge>
-                        {/if}
-                    </div>
-                    <p class="text-xs text-muted-foreground mt-0.5 truncate flex items-center gap-1">
-                        <ExternalLink class="h-3 w-3" />
-                        {websiteURL}/go/{url.id}
-                    </p>
-                </div>
+				<div class="flex-1 min-w-0">
+					<div class="flex items-center gap-2">
+						<span class="font-medium text-foreground truncate">
+							/{url.id.replace("url_", "")}
+						</span>
+						<Badge variant={status.variant} class="text-xs shrink-0">
+							<status.icon class="h-3 w-3 mr-1" />
+							{status.label}
+						</Badge>
+						{#if saveRequiredClosed}
+							<Badge variant="destructive" class="text-xs shrink-0">
+								<TriangleAlert class="h-3 w-3 mr-1" />
+								Unsaved Changes
+							</Badge>
+						{/if}
+					</div>
+					<p class="text-xs text-muted-foreground mt-0.5 truncate flex items-center gap-1">
+						<ExternalLink class="h-3 w-3" />
+						{websiteURL}/go/{url.id}
+					</p>
+				</div>
 
-                <div class="hidden md:flex items-center gap-6 text-sm text-muted-foreground shrink-0">
-                    <div class="flex items-center gap-1.5" title="Total hits">
-                        <BarChart3 class="h-4 w-4" />
-                        <span>{totalHits.toLocaleString()}</span>
-                    </div>
-                    <div class="text-xs">
-                        {slotCount} {slotCount === 1 ? "slot" : "slots"}
-                    </div>
-                    <div class="text-xs">{url.timeZone.toString().split("/")[1]?.replace(/_/g, " ")}</div>
-                </div>
-                <ChevronDown
-                    class={cn(
-                        "h-4 w-4 text-muted-foreground transition-transform shrink-0",
-                        isOpen && "rotate-180",
-                    )}
-                />
-            </div>
-        </Collapsible.Trigger>
+				<div class="hidden md:flex items-center gap-6 text-sm text-muted-foreground shrink-0">
+					<div class="flex items-center gap-1.5" title="Total hits">
+						<BarChart3 class="h-4 w-4" />
+						<span>{totalHits.toLocaleString()}</span>
+					</div>
+					<div class="text-xs">
+						{slotCount}
+						{slotCount === 1 ? "slot" : "slots"}
+					</div>
+					<div class="text-xs">{url.timeZone.toString().split("/")[1]?.replace(/_/g, " ")}</div>
+				</div>
+				<ChevronDown
+					class={cn(
+						"h-4 w-4 text-muted-foreground transition-transform shrink-0",
+						isOpen && "rotate-180"
+					)}
+				/>
+			</div>
+		</Collapsible.Trigger>
 
-        <Collapsible.Content>
-            <div class="border-t border-border">
-                <DynamicURLEditor url={url} bind:saveRequired />
-            </div>
-        </Collapsible.Content>
-    </Card.Root>
-</Collapsible.Root>
\ No newline at end of file
+		<Collapsible.Content>
+			<div class="border-t border-border">
+				<DynamicURLEditor {url} bind:saveRequired />
+			</div>
+		</Collapsible.Content>
+	</Card.Root>
+</Collapsible.Root>
diff --git a/frontend/src/lib/dashboard/dynamicUrls/WeekSheetDaySlot.svelte b/frontend/src/lib/dashboard/dynamicUrls/WeekSheetDaySlot.svelte
index 230d442..fe0ce01 100644
--- a/frontend/src/lib/dashboard/dynamicUrls/WeekSheetDaySlot.svelte
+++ b/frontend/src/lib/dashboard/dynamicUrls/WeekSheetDaySlot.svelte
@@ -1,92 +1,89 @@
 <script lang="ts">
-    import type { WeekSheetTimeSlot } from "@/utils";
-    import ADaySlot from "./ADaySlot.svelte";
+	import type { WeekSheetTimeSlot } from "@/utils";
+	import ADaySlot from "./ADaySlot.svelte";
 
-    let {
-        dayIndex,
-        weekSheet,
-        handleDayMouseDown,
-        handleBlockClick,
-        handleResizeStart,
-        GRID_HEIGHT,
-        HOUR_HEIGHT,
-        previewBlock,
-        resizePreview,
-        formatTime,
-        selectedSlot,
-        minuteToY
-    }: {
-        dayIndex: number,
-        weekSheet: WeekSheetTimeSlot[][],
-        handleDayMouseDown: (e: any, dayIndex: number) => unknown,
-        handleBlockClick: (e: MouseEvent, dayIndex: number, slotIndex: number) => unknown,
-        handleResizeStart: (
-            e: MouseEvent,
-            dayIndex: number,
-            slotIndex: number,
-            edge: "top" | "bottom"
-        ) => unknown,
-        GRID_HEIGHT: number,
-        HOUR_HEIGHT: number,
-        previewBlock: {
-            dayIndex: number,
-            top: number,
-            height: number,
-            startMinute: number,
-            endMinute: number
-        } | null,
-        resizePreview: {
-            dayIndex: number,
-            slotIndex: number,
-            startMinute: number,
-            endMinute: number
-        } | null,
-        formatTime: (minute: number) => string,
-        selectedSlot: { dayIndex: number; slotIndex: number } | null,
-        minuteToY: (minute: number) => number,
-    } = $props();
+	let {
+		dayIndex,
+		weekSheet,
+		handleDayMouseDown,
+		handleBlockClick,
+		handleResizeStart,
+		GRID_HEIGHT,
+		HOUR_HEIGHT,
+		previewBlock,
+		resizePreview,
+		formatTime,
+		selectedSlot,
+		minuteToY
+	}: {
+		dayIndex: number;
+		weekSheet: WeekSheetTimeSlot[][];
+		handleDayMouseDown: (e: any, dayIndex: number) => unknown;
+		handleBlockClick: (e: MouseEvent, dayIndex: number, slotIndex: number) => unknown;
+		handleResizeStart: (
+			e: MouseEvent,
+			dayIndex: number,
+			slotIndex: number,
+			edge: "top" | "bottom"
+		) => unknown;
+		GRID_HEIGHT: number;
+		HOUR_HEIGHT: number;
+		previewBlock: {
+			dayIndex: number;
+			top: number;
+			height: number;
+			startMinute: number;
+			endMinute: number;
+		} | null;
+		resizePreview: {
+			dayIndex: number;
+			slotIndex: number;
+			startMinute: number;
+			endMinute: number;
+		} | null;
+		formatTime: (minute: number) => string;
+		selectedSlot: { dayIndex: number; slotIndex: number } | null;
+		minuteToY: (minute: number) => number;
+	} = $props();
 
-    let daySlots = $derived(weekSheet[dayIndex]);
+	let daySlots = $derived(weekSheet[dayIndex]);
 </script>
 
 <div
-    data-day={dayIndex}
-    class="relative border-l border-border cursor-crosshair select-none"
-    style="height: {GRID_HEIGHT}px;"
-    onmousedown={(e) => handleDayMouseDown(e, dayIndex)}
-    role="none"
+	data-day={dayIndex}
+	class="relative border-l border-border cursor-crosshair select-none"
+	style="height: {GRID_HEIGHT}px;"
+	onmousedown={(e) => handleDayMouseDown(e, dayIndex)}
+	role="none"
 >
-    {#each { length: 24 }, i}
-        <div
-            class="absolute w-full border-t border-border/40"
-            style="top: {i * HOUR_HEIGHT}px"
-        ></div>
-    {/each}
+	{#each { length: 24 }, i}
+		<div class="absolute w-full border-t border-border/40" style="top: {i * HOUR_HEIGHT}px"></div>
+	{/each}
 
-    {#each daySlots as slot, slotIndex (`aSlot${slotIndex}`)}
-        <ADaySlot
-            {slot}
-            {dayIndex}
-            {slotIndex}
-            {minuteToY}
-            {formatTime}
-            {selectedSlot}
-            {resizePreview}
-            {handleBlockClick}
-            {handleResizeStart}
-        />
-    {/each}
+	{#each daySlots as slot, slotIndex (`aSlot${slotIndex}`)}
+		<ADaySlot
+			{slot}
+			{dayIndex}
+			{slotIndex}
+			{minuteToY}
+			{formatTime}
+			{selectedSlot}
+			{resizePreview}
+			{handleBlockClick}
+			{handleResizeStart}
+		/>
+	{/each}
 
-    {#if previewBlock && previewBlock.dayIndex === dayIndex && previewBlock.height > 0}
-        <div
-            class="absolute left-0.5 right-0.5 rounded-md bg-primary/15 border-2 border-dashed border-primary/50 pointer-events-none z-10"
-            style="top: {previewBlock.top}px;height:{previewBlock.height}px"
-        >
-            <div class="px-1 py-0.5">
-            <p class="text-[9px] font-medium text-primary">
-                {formatTime(previewBlock.startMinute)} - {formatTime(previewBlock.endMinute)}
-            </p>
-            </div>
-        </div>
-    {/if}
-</div>
\ No newline at end of file
+	{#if previewBlock && previewBlock.dayIndex === dayIndex && previewBlock.height > 0}
+		<div
+			class="absolute left-0.5 right-0.5 rounded-md bg-primary/15 border-2 border-dashed border-primary/50 pointer-events-none z-10"
+			style="top: {previewBlock.top}px;height:{previewBlock.height}px"
+		>
+			<div class="px-1 py-0.5">
+				<p class="text-[9px] font-medium text-primary">
+					{formatTime(previewBlock.startMinute)} - {formatTime(previewBlock.endMinute)}
+				</p>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/frontend/src/lib/dashboard/dynamicUrls/WeekSheetGrid.svelte b/frontend/src/lib/dashboard/dynamicUrls/WeekSheetGrid.svelte
index 6f18462..83370e4 100644
--- a/frontend/src/lib/dashboard/dynamicUrls/WeekSheetGrid.svelte
+++ b/frontend/src/lib/dashboard/dynamicUrls/WeekSheetGrid.svelte
@@ -7,43 +7,56 @@
 	import { Input } from "@/components/ui/input";
 	import WeekSheetDaySlot from "./WeekSheetDaySlot.svelte";
 
-	const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
-	const TOTAL_MINUTES = 1440
-	const SNAP_INTERVAL = 15
-	const HOUR_HEIGHT = 48 // px per hour
-	const GRID_HEIGHT = 24 * HOUR_HEIGHT // total grid height
-
-	let { weekSheet = $bindable(), onchange }: { weekSheet: WeekSheetTimeSlot[][], onchange: (newWeekSheet: WeekSheetTimeSlot[][]) => unknown } = $props();
+	const DAY_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+	const TOTAL_MINUTES = 1440;
+	const SNAP_INTERVAL = 15;
+	const HOUR_HEIGHT = 48; // px per hour
+	const GRID_HEIGHT = 24 * HOUR_HEIGHT; // total grid height
+
+	let {
+		weekSheet = $bindable(),
+		onchange
+	}: {
+		weekSheet: WeekSheetTimeSlot[][];
+		onchange: (newWeekSheet: WeekSheetTimeSlot[][]) => unknown;
+	} = $props();
 
 	function minuteToY(minute: number) {
-		return (minute / TOTAL_MINUTES) * GRID_HEIGHT
+		return (minute / TOTAL_MINUTES) * GRID_HEIGHT;
 	}
 
 	function yToMinute(y: number) {
-		const raw = (y / GRID_HEIGHT) * TOTAL_MINUTES
-		return Math.max(0, Math.min(TOTAL_MINUTES, Math.round(raw / SNAP_INTERVAL) * SNAP_INTERVAL))
+		const raw = (y / GRID_HEIGHT) * TOTAL_MINUTES;
+		return Math.max(0, Math.min(TOTAL_MINUTES, Math.round(raw / SNAP_INTERVAL) * SNAP_INTERVAL));
 	}
 
 	function formatTime(minute: number) {
-		const h = Math.floor(minute / 60)
-		const m = minute % 60
-		const period = h >= 12 ? "PM" : "AM"
-		const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h
-		return `${h12}:${m.toString().padStart(2, "0")} ${period}`
+		const h = Math.floor(minute / 60);
+		const m = minute % 60;
+		const period = h >= 12 ? "PM" : "AM";
+		const h12 = h === 0 ? 12 : h > 12 ? h - 12 : h;
+		return `${h12}:${m.toString().padStart(2, "0")} ${period}`;
 	}
 
 	type DragState =
-	| { type: "creating"; dayIndex: number; startMinute: number; currentMinute: number }
-	| { type: "resizing"; dayIndex: number; slotIndex: number; edge: "top" | "bottom"; startMinute: number; currentMinute: number }
-	| null
+		| { type: "creating"; dayIndex: number; startMinute: number; currentMinute: number }
+		| {
+				type: "resizing";
+				dayIndex: number;
+				slotIndex: number;
+				edge: "top" | "bottom";
+				startMinute: number;
+				currentMinute: number;
+		  }
+		| null;
 
 	type EditingSlot = {
-		dayIndex: number
-		slotIndex: number | "new"
-		link: string
-		startMinute: number
-		endMinute: number
-	} | null
+		dayIndex: number;
+		slotIndex: number | "new";
+		link: string;
+		startMinute: number;
+		endMinute: number;
+	} | null;
 
 	let gridRef: HTMLDivElement | null = $state(null);
 	let dragState: DragState | null = $state(null);
@@ -71,9 +84,7 @@
 		const y = getRelativeY(e, dayEl);
 		const minute = yToMinute(y);
 
-		dragState = dragState
-		? { ...dragState, currentMinute: minute }
-		: null;
+		dragState = dragState ? { ...dragState, currentMinute: minute } : null;
 	}
 
 	function handleMouseUp() {
@@ -165,7 +176,7 @@
 		const slot = weekSheet[dayIndex] ? weekSheet[dayIndex][slotIndex] : undefined;
 		if (slot) {
 			const startMinute = edge === "top" ? slot.startMinute : slot.endMinute;
-	
+
 			dragState = {
 				type: "resizing",
 				dayIndex,
@@ -210,11 +221,11 @@
 	}
 
 	let previewBlock: {
-		dayIndex: number,
-		top: number,
-		height: number,
-		startMinute: number,
-		endMinute: number
+		dayIndex: number;
+		top: number;
+		height: number;
+		startMinute: number;
+		endMinute: number;
 	} | null = $state(null);
 
 	$effect(() => {
@@ -225,17 +236,17 @@
 				height: minuteToY(Math.abs(dragState.currentMinute - dragState.startMinute)),
 				startMinute: Math.min(dragState.startMinute, dragState.currentMinute),
 				endMinute: Math.max(dragState.startMinute, dragState.currentMinute)
-			}
+			};
 		} else {
 			previewBlock = null;
 		}
 	});
 
 	let resizePreview: {
-		dayIndex: number,
-		slotIndex: number,
-		startMinute: number,
-		endMinute: number
+		dayIndex: number;
+		slotIndex: number;
+		startMinute: number;
+		endMinute: number;
 	} | null = $state(null);
 
 	$effect(() => {
@@ -245,13 +256,13 @@
 			if (slot) {
 				let start = slot.startMinute;
 				let end = slot.endMinute;
-	
+
 				if (dragState.edge === "top") {
 					start = Math.min(dragState.currentMinute, end - SNAP_INTERVAL);
 				} else {
 					end = Math.max(dragState.currentMinute, start + SNAP_INTERVAL);
 				}
-	
+
 				resizePreview = {
 					dayIndex: dragState.dayIndex,
 					slotIndex: dragState.slotIndex,
@@ -270,20 +281,28 @@
 		Click and drag on the grid to create time blocks. Click a block to edit or delete it.
 	</p>
 
-	<div class="rounded-lg border border-border bg-card max-h-[500px] overflow-y-scroll
-            [&::-webkit-scrollbar]:w-2 
-            [&::-webkit-scrollbar-track]:bg-gray-100 
-            [&::-webkit-scrollbar-thumb]:bg-gray-300 
-            hover:[&::-webkit-scrollbar-thumb]:bg-gray-400">
+	<div
+		class="rounded-lg border border-border bg-card max-h-[500px] overflow-y-scroll
+            [&::-webkit-scrollbar]:w-2
+            [&::-webkit-scrollbar-track]:bg-gray-100
+            [&::-webkit-scrollbar-thumb]:bg-gray-300
+            hover:[&::-webkit-scrollbar-thumb]:bg-gray-400"
+	>
 		<div class="grid border-b border-border" style="grid-template-columns: 56px repeat(7, 1fr);">
 			<div class="p-2"></div>
 			{#each DAY_LABELS as day (`aDay${day}`)}
-				<div class="p-2 text-xs font-semibold text-center text-foreground border-l border-border">{day}</div>
+				<div class="p-2 text-xs font-semibold text-center text-foreground border-l border-border">
+					{day}
+				</div>
 			{/each}
 		</div>
 
 		<div class="overflow-y-auto">
-			<div bind:this={gridRef} class="grid relative" style="grid-template-columns: 56px repeat(7, 1fr)">
+			<div
+				bind:this={gridRef}
+				class="grid relative"
+				style="grid-template-columns: 56px repeat(7, 1fr)"
+			>
 				<div class="relative" style="height: {GRID_HEIGHT}px;">
 					{#each { length: 24 } as _, i (`hourHeight${i}`)}
 						<div
@@ -297,7 +316,7 @@
 
 				{#each DAY_LABELS as _, dayIndex (`adayindex${dayIndex}`)}
 					<WeekSheetDaySlot
-						dayIndex={dayIndex}
+						{dayIndex}
 						{weekSheet}
 						{handleDayMouseDown}
 						{handleBlockClick}
@@ -318,7 +337,8 @@
 	{#if editingSlot && editingSlot.slotIndex === "new"}
 		<div class="rounded-lg border border-primary/30 bg-primary/5 p-3 space-y-3">
 			<p class="text-xs font-medium text-foreground">
-				New block: {DAY_LABELS[editingSlot.dayIndex]} {formatTime(editingSlot.startMinute)} - {formatTime(editingSlot.endMinute)}
+				New block: {DAY_LABELS[editingSlot.dayIndex]}
+				{formatTime(editingSlot.startMinute)} - {formatTime(editingSlot.endMinute)}
 			</p>
 
 			<div class="flex items-center gap-2">
@@ -328,15 +348,15 @@
 					class="flex-1 text-sm"
 					autofocus
 					onkeydown={(e) => {
-						if (e.key === "Enter") handleSaveNewSlot()
-						if (e.key === "Escape") editingSlot=null
+						if (e.key === "Enter") handleSaveNewSlot();
+						if (e.key === "Escape") editingSlot = null;
 					}}
 				/>
 				<Button size="sm" onclick={handleSaveNewSlot} class="gap-1 shrink-0">
 					<Check class="h-3.5 w-3.5" />
 					Add
 				</Button>
-				<Button size="sm" variant="ghost" onclick={() => editingSlot = null} class="shrink-0">
+				<Button size="sm" variant="ghost" onclick={() => (editingSlot = null)} class="shrink-0">
 					<X class="h-3.5 w-3.5" />
 				</Button>
 			</div>
@@ -357,8 +377,8 @@
 					<Button
 						size="sm"
 						onclick={() => {
-							if(selectedSlot) {
-								handleDeleteSlot(selectedSlot.dayIndex, selectedSlot.slotIndex)
+							if (selectedSlot) {
+								handleDeleteSlot(selectedSlot.dayIndex, selectedSlot.slotIndex);
 							}
 						}}
 						class="gap-1 text-destructive-foreground hover:text-destructive-foreground hover:bg-destructive/10 h-7"
@@ -371,7 +391,7 @@
 					value={currentSlot.link}
 					oninput={(e) => {
 						if (selectedSlot) {
-							currentSlot.link = e.currentTarget.value;;
+							currentSlot.link = e.currentTarget.value;
 							weekSheet = weekSheet;
 							onchange(weekSheet);
 						}
@@ -379,10 +399,10 @@
 					placeholder="https://example.com/redirect-url"
 					class="text-sm"
 				/>
-				<Button size="sm" variant="outline" onclick={() => selectedSlot = null} class="text-xs">
+				<Button size="sm" variant="outline" onclick={() => (selectedSlot = null)} class="text-xs">
 					Done
 				</Button>
 			</div>
 		{/if}
 	{/if}
-</div>
\ No newline at end of file
+</div>
diff --git a/frontend/src/lib/dashboard/eventList/EListAvatar.svelte b/frontend/src/lib/dashboard/eventList/EListAvatar.svelte
index 2eedbc4..e908bce 100644
--- a/frontend/src/lib/dashboard/eventList/EListAvatar.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListAvatar.svelte
@@ -1,107 +1,113 @@
 <script lang="ts">
-    import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
-    import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
-    import { type RemoteFormField } from "@sveltejs/kit";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { Upload, X } from "@lucide/svelte";
-    import { clearFileInput } from "@/utils";
+	import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
+	import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
+	import { type RemoteFormField } from "@sveltejs/kit";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { Upload, X } from "@lucide/svelte";
+	import { clearFileInput } from "@/utils";
 
-    let {
-        changed = $bindable(),
-        avatarLink,
-        uploadNewAvatar = $bindable()
-    }: {
-        changed: boolean,
-        avatarLink: string,
-        uploadNewAvatar: File | null
-    } = $props();
+	let {
+		changed = $bindable(),
+		avatarLink,
+		uploadNewAvatar = $bindable()
+	}: {
+		changed: boolean;
+		avatarLink: string;
+		uploadNewAvatar: File | null;
+	} = $props();
 
-    let avatarLinkBindable = $derived(avatarLink);
+	let avatarLinkBindable = $derived(avatarLink);
 
-    let uploadNewAvatarLink = $derived(uploadNewAvatar ? URL.createObjectURL(uploadNewAvatar) : null);
+	let uploadNewAvatarLink = $derived(uploadNewAvatar ? URL.createObjectURL(uploadNewAvatar) : null);
 
-    function handleRemoveAvatar() {
-        clearFileInput(document.getElementById("imageUploaderEventList"));
-        uploadNewAvatar = null;
-        avatarLinkBindable = "";
-    }
+	function handleRemoveAvatar() {
+		clearFileInput(document.getElementById("imageUploaderEventList"));
+		uploadNewAvatar = null;
+		avatarLinkBindable = "";
+	}
 
-    function handleAvatarChange(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
-        //@ts-ignore
-        const files = event.target.files as File[];
-        if (files.length === 0) return;
-        if (files[0]) {
-            uploadNewAvatar = files[0];
-            avatarLinkBindable = "";
-        }
-    }
+	function handleAvatarChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		//@ts-ignore
+		const files = event.target.files as File[];
+		if (files.length === 0) return;
+		if (files[0]) {
+			uploadNewAvatar = files[0];
+			avatarLinkBindable = "";
+		}
+	}
 
-    $effect(() => {
-        const avatarLinkChanged = avatarLinkBindable !== avatarLink;
-        const uploadNewAvatarChanged = uploadNewAvatar !== null;
+	$effect(() => {
+		const avatarLinkChanged = avatarLinkBindable !== avatarLink;
+		const uploadNewAvatarChanged = uploadNewAvatar !== null;
 
-        changed = avatarLinkChanged || uploadNewAvatarChanged;
-    });
+		changed = avatarLinkChanged || uploadNewAvatarChanged;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>List Avatar</Card.Title>
-        <Card.Description>Upload an image to represent your event list</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="flex items-start gap-6">
-            <div class="relative">
-                {#if avatarLinkBindable.length > 0 || uploadNewAvatar}
-                    {#if avatarLinkBindable.length > 0}
-                        <input {...updateEventListForm.fields["avatarLink"]?.as("hidden", avatarLinkBindable)} />
-                    {/if}
+	<Card.Header>
+		<Card.Title>List Avatar</Card.Title>
+		<Card.Description>Upload an image to represent your event list</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="flex items-start gap-6">
+			<div class="relative">
+				{#if avatarLinkBindable.length > 0 || uploadNewAvatar}
+					{#if avatarLinkBindable.length > 0}
+						<input
+							{...updateEventListForm.fields["avatarLink"]?.as("hidden", avatarLinkBindable)}
+						/>
+					{/if}
 
-                    <div class="relative group">
-                        <img
-                            src={uploadNewAvatar !== null ? uploadNewAvatarLink : avatarLink}
-                            alt="IFeed avatar"
-                            class="w-24 h-24 rounded-lg object-cover border-2 border-border"
-                        />
-                        <button
-                            onclick={handleRemoveAvatar}
-                            class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
-                    </div>
-                {:else}
-                    <div class="w-24 h-24">
-                        <NoImageFeedAvatar />
-                    </div>
-                {/if}
-            </div>
-            <div class="flex-1 space-y-3">
-                <div>
-                    <p class="text-sm text-foreground font-medium">Upload a custom avatar</p>
-                    <p class="text-sm text-muted-foreground mt-1">JPG, PNG or GIF. Max size 2MB. Recommended 400x400px.</p>
-                </div>
-                <div class="flex gap-2">
-                    <Button variant="outline" class="relative bg-transparent">
-                        <Upload class="h-4 w-4 mr-2" />
-                        Upload Image
-                        <input
-                            {...(updateEventListForm.fields.newAvatar as unknown as RemoteFormField<File>).as("file")}
-                            id="imageUploaderEventList"
-                            type="file"
-                            accept="image/*"
-                            onchange={handleAvatarChange}
-                            class="absolute inset-0 opacity-0 cursor-pointer"
-                        />
-                    </Button>
-                    {#if uploadNewAvatar}
-                        <Button variant="outline" onclick={handleRemoveAvatar} class="bg-transparent">
-                            Remove
-                        </Button>
-                    {/if}
-                </div>
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+					<div class="relative group">
+						<img
+							src={uploadNewAvatar !== null ? uploadNewAvatarLink : avatarLink}
+							alt="IFeed avatar"
+							class="w-24 h-24 rounded-lg object-cover border-2 border-border"
+						/>
+						<button
+							onclick={handleRemoveAvatar}
+							class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+						>
+							<X class="h-4 w-4" />
+						</button>
+					</div>
+				{:else}
+					<div class="w-24 h-24">
+						<NoImageFeedAvatar />
+					</div>
+				{/if}
+			</div>
+			<div class="flex-1 space-y-3">
+				<div>
+					<p class="text-sm text-foreground font-medium">Upload a custom avatar</p>
+					<p class="text-sm text-muted-foreground mt-1">
+						JPG, PNG or GIF. Max size 2MB. Recommended 400x400px.
+					</p>
+				</div>
+				<div class="flex gap-2">
+					<Button variant="outline" class="relative bg-transparent">
+						<Upload class="h-4 w-4 mr-2" />
+						Upload Image
+						<input
+							{...(updateEventListForm.fields.newAvatar as unknown as RemoteFormField<File>).as(
+								"file"
+							)}
+							id="imageUploaderEventList"
+							type="file"
+							accept="image/*"
+							onchange={handleAvatarChange}
+							class="absolute inset-0 opacity-0 cursor-pointer"
+						/>
+					</Button>
+					{#if uploadNewAvatar}
+						<Button variant="outline" onclick={handleRemoveAvatar} class="bg-transparent">
+							Remove
+						</Button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListCopyIframe.svelte b/frontend/src/lib/dashboard/eventList/EListCopyIframe.svelte
index e9e51ef..7fc0ebc 100644
--- a/frontend/src/lib/dashboard/eventList/EListCopyIframe.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListCopyIframe.svelte
@@ -1,87 +1,100 @@
 <script lang="ts">
-    import { AlertTriangle, Check, Code, Copy, OctagonAlert } from "@lucide/svelte";
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import { cn, generateIframeCode } from "@/utils";
-    import { Label } from "@/components/ui/label";
-    import { toast } from "svelte-sonner";
+	import { AlertTriangle, Check, Code, Copy, OctagonAlert } from "@lucide/svelte";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import { cn, generateIframeCode } from "@/utils";
+	import { Label } from "@/components/ui/label";
+	import { toast } from "svelte-sonner";
 
-    let {
-        listId,
-        listName,
-        infosectionsLink
-    }: {
-        listId: string,
-        listName: string,
-        infosectionsLink: string
-    } = $props();
+	let {
+		listId,
+		listName,
+		infosectionsLink
+	}: {
+		listId: string;
+		listName: string;
+		infosectionsLink: string;
+	} = $props();
 
-    let iframeCopied = $state(false);
-    let iframeDialogOpen = $state(false);
+	let iframeCopied = $state(false);
+	let iframeDialogOpen = $state(false);
 
-    function copyIframeCode() {
-        const link = generateIframeCode(`${infosectionsLink}/elist/${listId}`, `Infosections List | ${listName}`, listId, infosectionsLink);
-        navigator.clipboard.writeText(link);
-        iframeCopied = true;
-        setTimeout(() => iframeCopied = false, 5000);
+	function copyIframeCode() {
+		const link = generateIframeCode(
+			`${infosectionsLink}/elist/${listId}`,
+			`Infosections List | ${listName}`,
+			listId,
+			infosectionsLink
+		);
+		navigator.clipboard.writeText(link);
+		iframeCopied = true;
+		setTimeout(() => (iframeCopied = false), 5000);
 
-        toast.info("Copied", {
-            description: "Paste it in your html."
-        })
-    }
+		toast.info("Copied", {
+			description: "Paste it in your html."
+		});
+	}
 </script>
 
 <Dialog.Root bind:open={iframeDialogOpen}>
-    <Dialog.Trigger class={cn(buttonVariants({ variant: "outline" }), "w-full gap-2 bg-transparent")}>
-        <Code class="h-4 w-4 mr-2" />
-        Copy Iframe
-    </Dialog.Trigger>
-    <Dialog.Content class="sm:max-w-lg max-h-full overflow-y-auto">
-        <Dialog.Header>
-            <Dialog.Title>Embed Event List</Dialog.Title>
-            <Dialog.Description>
-                Customize and copy the iframe code to embed this list on your website.
-            </Dialog.Description>
-        </Dialog.Header>
-        
-        <div class="flex gap-3 p-3 rounded-md bg-amber-500/10 border border-amber-500/20">
-            <AlertTriangle class="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />
-            <div class="text-sm">
-                <p class="font-medium text-amber-500">Script tag required</p>
-                <p class="text-muted-foreground mt-1">
-                    The script tag is required because it automatically adjusts the height of the iframe when content inside changes. If you dont want to include the script tag. Enable scrolling in the iframe to ensure users can see everything.
-                </p>
-            </div>
-        </div>
+	<Dialog.Trigger class={cn(buttonVariants({ variant: "outline" }), "w-full gap-2 bg-transparent")}>
+		<Code class="h-4 w-4 mr-2" />
+		Copy Iframe
+	</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-lg max-h-full overflow-y-auto">
+		<Dialog.Header>
+			<Dialog.Title>Embed Event List</Dialog.Title>
+			<Dialog.Description>
+				Customize and copy the iframe code to embed this list on your website.
+			</Dialog.Description>
+		</Dialog.Header>
 
-        <div class="flex gap-3 p-3 rounded-md bg-red-500/10 border border-red-500/20">
-            <OctagonAlert class="h-5 w-5 text-red-500 shrink-0 mt-0.5" />
-            <div class="text-sm">
-                <p class="font-medium text-red-500">Do not change iframe id</p>
-                <p class="text-muted-foreground mt-1">
-                    The iframe id is used to watch iframe resize events and change the height of the iframe.
-                </p>
-            </div>
-        </div>
+		<div class="flex gap-3 p-3 rounded-md bg-amber-500/10 border border-amber-500/20">
+			<AlertTriangle class="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />
+			<div class="text-sm">
+				<p class="font-medium text-amber-500">Script tag required</p>
+				<p class="text-muted-foreground mt-1">
+					The script tag is required because it automatically adjusts the height of the iframe when
+					content inside changes. If you dont want to include the script tag. Enable scrolling in
+					the iframe to ensure users can see everything.
+				</p>
+			</div>
+		</div>
 
-        <div class="space-y-2">
-            <Label>Generated Code</Label>
-            <div class="relative">
-                <pre class="p-3 rounded-md bg-muted text-xs font-mono overflow-x-auto max-h-80 whitespace-pre-wrap break-all">{generateIframeCode(`${infosectionsLink}/elist/${listId}`, `Infosections List | ${listName}`, listId, infosectionsLink)}</pre>
-            </div>
-        </div>
+		<div class="flex gap-3 p-3 rounded-md bg-red-500/10 border border-red-500/20">
+			<OctagonAlert class="h-5 w-5 text-red-500 shrink-0 mt-0.5" />
+			<div class="text-sm">
+				<p class="font-medium text-red-500">Do not change iframe id</p>
+				<p class="text-muted-foreground mt-1">
+					The iframe id is used to watch iframe resize events and change the height of the iframe.
+				</p>
+			</div>
+		</div>
 
-        <Dialog.Footer>
-            <Button variant="outline" onclick={() => iframeDialogOpen = false}>Cancel</Button>
-            <Button onclick={copyIframeCode}>
-                {#if iframeCopied}
-                    <Check class="h-4 w-4 mr-2" />
-                    Copied!
-                {:else}
-                    <Copy class="h-4 w-4 mr-2" />
-                    Copy Code
-                {/if}
-            </Button>
-        </Dialog.Footer>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+		<div class="space-y-2">
+			<Label>Generated Code</Label>
+			<div class="relative">
+				<pre
+					class="p-3 rounded-md bg-muted text-xs font-mono overflow-x-auto max-h-80 whitespace-pre-wrap break-all">{generateIframeCode(
+						`${infosectionsLink}/elist/${listId}`,
+						`Infosections List | ${listName}`,
+						listId,
+						infosectionsLink
+					)}</pre>
+			</div>
+		</div>
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (iframeDialogOpen = false)}>Cancel</Button>
+			<Button onclick={copyIframeCode}>
+				{#if iframeCopied}
+					<Check class="h-4 w-4 mr-2" />
+					Copied!
+				{:else}
+					<Copy class="h-4 w-4 mr-2" />
+					Copy Code
+				{/if}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListDisplaySettings.svelte b/frontend/src/lib/dashboard/eventList/EListDisplaySettings.svelte
index da68379..3d4bc85 100644
--- a/frontend/src/lib/dashboard/eventList/EListDisplaySettings.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListDisplaySettings.svelte
@@ -1,115 +1,177 @@
 <script lang="ts">
-    import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
-    import * as Tabs from "$lib/components/ui/tabs/index.js";
-    import type { ImageListCustomizations } from "@/utils";
-    import * as Card from "@/components/ui/card/index";
-    import { Switch } from "@/components/ui/switch";
-    import { Label } from "@/components/ui/label";
+	import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
+	import * as Tabs from "$lib/components/ui/tabs/index.js";
+	import type { ImageListCustomizations } from "@/utils";
+	import * as Card from "@/components/ui/card/index";
+	import { Switch } from "@/components/ui/switch";
+	import { Label } from "@/components/ui/label";
 
-    let {
-        displaySettings,
-        displaySettingsPreview = $bindable(),
-        changed = $bindable()
-    }: {
-        displaySettings: ImageListCustomizations,
-        displaySettingsPreview: ImageListCustomizations,
-        changed: boolean
-    } = $props();
+	let {
+		displaySettings,
+		displaySettingsPreview = $bindable(),
+		changed = $bindable()
+	}: {
+		displaySettings: ImageListCustomizations;
+		displaySettingsPreview: ImageListCustomizations;
+		changed: boolean;
+	} = $props();
 
-    // svelte-ignore state_referenced_locally
-    let displaySettingsBindable = $state(displaySettings);
-    $effect(() => {displaySettingsBindable = displaySettings});
+	// svelte-ignore state_referenced_locally
+	let displaySettingsBindable = $state(displaySettings);
+	$effect(() => {
+		displaySettingsBindable = displaySettings;
+	});
 
-    $effect(() => {
-        changed = JSON.stringify(displaySettingsBindable) !== JSON.stringify(displaySettings);
-    });
+	$effect(() => {
+		changed = JSON.stringify(displaySettingsBindable) !== JSON.stringify(displaySettings);
+	});
 
-    $effect(() => {
-        displaySettingsPreview = displaySettingsBindable;
-    });
+	$effect(() => {
+		displaySettingsPreview = displaySettingsBindable;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Display Settings</Card.Title>
-        <Card.Description>Customize how event information is displayed</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="grid grid-cols-1 gap-6">
-            {#if updateEventListForm.fields["displaySettings"]}
-                <div class="flex justify-between flex-col space-y-2">
-                    <Label for="showDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Display Style</span>
-                        <span class="text-sm text-muted-foreground">You can choose a minimal or expanded option.</span>
-                    </Label>
-                    <input {...updateEventListForm.fields["displaySettings"]["displayStyle"].as("hidden", displaySettingsBindable.displayStyle)} />
-                    <Tabs.Root bind:value={displaySettingsBindable.displayStyle} class="w-full">
-                        <Tabs.List class="w-full">
-                            <Tabs.Trigger value="minimal">Minimal</Tabs.Trigger>
-                            <Tabs.Trigger value="expanded">Expanded</Tabs.Trigger>
-                        </Tabs.List>
-                    </Tabs.Root>
-                </div>
-                <div class="flex items-center justify-between space-x-2">
-                    <Label for="showUpcomingEventsTextAndDesc" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Display List Header</span>
-                        <span class="text-sm text-muted-foreground">Display the "Upcoming Events" text and the description below.</span>
-                    </Label>
-                    <input {...updateEventListForm.fields["displaySettings"]["showUpcomingEventsTextAndDesc"]?.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showUpcomingEventsTextAndDesc} type="checkbox" />
-                    <Switch
-                        id="showUpcomingEventsTextAndDesc"
-                        bind:checked={displaySettingsBindable.showUpcomingEventsTextAndDesc}
-                    />
-                </div>
+	<Card.Header>
+		<Card.Title>Display Settings</Card.Title>
+		<Card.Description>Customize how event information is displayed</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid grid-cols-1 gap-6">
+			{#if updateEventListForm.fields["displaySettings"]}
+				<div class="flex justify-between flex-col space-y-2">
+					<Label for="showDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
+						<span class="font-medium">Display Style</span>
+						<span class="text-sm text-muted-foreground"
+							>You can choose a minimal or expanded option.</span
+						>
+					</Label>
+					<input
+						{...updateEventListForm.fields["displaySettings"]["displayStyle"].as(
+							"hidden",
+							displaySettingsBindable.displayStyle
+						)}
+					/>
+					<Tabs.Root bind:value={displaySettingsBindable.displayStyle} class="w-full">
+						<Tabs.List class="w-full">
+							<Tabs.Trigger value="minimal">Minimal</Tabs.Trigger>
+							<Tabs.Trigger value="expanded">Expanded</Tabs.Trigger>
+						</Tabs.List>
+					</Tabs.Root>
+				</div>
+				<div class="flex items-center justify-between space-x-2">
+					<Label
+						for="showUpcomingEventsTextAndDesc"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Display List Header</span>
+						<span class="text-sm text-muted-foreground"
+							>Display the "Upcoming Events" text and the description below.</span
+						>
+					</Label>
+					<input
+						{...updateEventListForm.fields["displaySettings"]["showUpcomingEventsTextAndDesc"]?.as(
+							"checkbox"
+						)}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showUpcomingEventsTextAndDesc}
+						type="checkbox"
+					/>
+					<Switch
+						id="showUpcomingEventsTextAndDesc"
+						bind:checked={displaySettingsBindable.showUpcomingEventsTextAndDesc}
+					/>
+				</div>
 
-                <div class="flex items-center justify-between space-x-2">
-                    <Label for="showEventName" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Event Name</span>
-                        <span class="text-sm text-muted-foreground">Show the official event name with the image.</span>
-                    </Label>
-                    <input {...updateEventListForm.fields["displaySettings"]["showEventName"]?.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showEventName} type="checkbox" />
-                    <Switch
-                        id="showEventName"
-                        bind:checked={displaySettingsBindable.showEventName}
-                    />
-                </div>
+				<div class="flex items-center justify-between space-x-2">
+					<Label for="showEventName" class="flex flex-col items-start space-y-1 cursor-pointer">
+						<span class="font-medium">Event Name</span>
+						<span class="text-sm text-muted-foreground"
+							>Show the official event name with the image.</span
+						>
+					</Label>
+					<input
+						{...updateEventListForm.fields["displaySettings"]["showEventName"]?.as("checkbox")}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showEventName}
+						type="checkbox"
+					/>
+					<Switch id="showEventName" bind:checked={displaySettingsBindable.showEventName} />
+				</div>
 
-                <div class="flex items-center justify-between space-x-2">
-                    <Label for="showEventDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Event Description</span>
-                        <span class="text-sm text-muted-foreground">Show the official event description IF one was applied for an event.</span>
-                    </Label>
-                    <input {...updateEventListForm.fields["displaySettings"]["showEventDescription"]?.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showEventDescription} type="checkbox" />
-                    <Switch
-                        id="showEventDescription"
-                        bind:checked={displaySettingsBindable.showEventDescription}
-                    />
-                </div>
+				<div class="flex items-center justify-between space-x-2">
+					<Label
+						for="showEventDescription"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Event Description</span>
+						<span class="text-sm text-muted-foreground"
+							>Show the official event description IF one was applied for an event.</span
+						>
+					</Label>
+					<input
+						{...updateEventListForm.fields["displaySettings"]["showEventDescription"]?.as(
+							"checkbox"
+						)}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showEventDescription}
+						type="checkbox"
+					/>
+					<Switch
+						id="showEventDescription"
+						bind:checked={displaySettingsBindable.showEventDescription}
+					/>
+				</div>
 
-                <div class="flex items-center justify-between space-x-2">
-                    <Label for="showEventRegistration" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Register Button</span>
-                        <span class="text-sm text-muted-foreground">If an event has a registration URL set, that link can be shown to the user.</span>
-                    </Label>
-                    <input {...updateEventListForm.fields["displaySettings"]["showEventRegistration"]?.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showEventRegistration} type="checkbox" />
-                    <Switch
-                        id="showEventRegistration"
-                        bind:checked={displaySettingsBindable.showEventRegistration}
-                    />
-                </div>
+				<div class="flex items-center justify-between space-x-2">
+					<Label
+						for="showEventRegistration"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Register Button</span>
+						<span class="text-sm text-muted-foreground"
+							>If an event has a registration URL set, that link can be shown to the user.</span
+						>
+					</Label>
+					<input
+						{...updateEventListForm.fields["displaySettings"]["showEventRegistration"]?.as(
+							"checkbox"
+						)}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showEventRegistration}
+						type="checkbox"
+					/>
+					<Switch
+						id="showEventRegistration"
+						bind:checked={displaySettingsBindable.showEventRegistration}
+					/>
+				</div>
 
-                <div class="flex items-center justify-between space-x-2">
-                    <Label for="setTransparentBackground" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Transparent Background</span>
-                        <span class="text-sm text-muted-foreground">Sets the background of the iframe window to transparent. But remember to set your iframe arguments to enable transparency.</span>
-                    </Label>
-                    <input {...updateEventListForm.fields["displaySettings"]["setTransparentBackground"]?.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.setTransparentBackground} type="checkbox" />
-                    <Switch
-                        id="setTransparentBackground"
-                        bind:checked={displaySettingsBindable.setTransparentBackground}
-                    />
-                </div>
-            {/if}
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+				<div class="flex items-center justify-between space-x-2">
+					<Label
+						for="setTransparentBackground"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Transparent Background</span>
+						<span class="text-sm text-muted-foreground"
+							>Sets the background of the iframe window to transparent. But remember to set your
+							iframe arguments to enable transparency.</span
+						>
+					</Label>
+					<input
+						{...updateEventListForm.fields["displaySettings"]["setTransparentBackground"]?.as(
+							"checkbox"
+						)}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.setTransparentBackground}
+						type="checkbox"
+					/>
+					<Switch
+						id="setTransparentBackground"
+						bind:checked={displaySettingsBindable.setTransparentBackground}
+					/>
+				</div>
+			{/if}
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListFilterSettings.svelte b/frontend/src/lib/dashboard/eventList/EListFilterSettings.svelte
index 5731ebc..631daf2 100644
--- a/frontend/src/lib/dashboard/eventList/EListFilterSettings.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListFilterSettings.svelte
@@ -1,72 +1,90 @@
 <script lang="ts">
-    import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
-    import * as Card from "@/components/ui/card/index";
-    import { Switch } from "@/components/ui/switch";
-    import type { ImageFeedFilters } from "@/utils";
-    import { Label } from "@/components/ui/label";
+	import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
+	import * as Card from "@/components/ui/card/index";
+	import { Switch } from "@/components/ui/switch";
+	import type { ImageFeedFilters } from "@/utils";
+	import { Label } from "@/components/ui/label";
 
-    let {
-        filters,
-        changed = $bindable()
-    }: {
-        filters: ImageFeedFilters,
-        changed: boolean
-    } = $props();
+	let {
+		filters,
+		changed = $bindable()
+	}: {
+		filters: ImageFeedFilters;
+		changed: boolean;
+	} = $props();
 
-    // svelte-ignore state_referenced_locally
-    let filtersBindable = $state(filters);
-    $effect(() => {filtersBindable = filters});
+	// svelte-ignore state_referenced_locally
+	let filtersBindable = $state(filters);
+	$effect(() => {
+		filtersBindable = filters;
+	});
 
-    $effect(() => {
-        changed = JSON.stringify(filtersBindable) !== JSON.stringify(filters);
-    });
+	$effect(() => {
+		changed = JSON.stringify(filtersBindable) !== JSON.stringify(filters);
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Filter Settings</Card.Title>
-        <Card.Description>Choose what kind of events you want to show in the list (Changes not reflected in EList preview!)</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="grid grid-cols-1 gap-6">
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="onlyShowFeatured" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Only Featured Events</span>
-                    <span class="text-sm text-muted-foreground">Show only the events that are set to featured.</span>
-                </Label>
+	<Card.Header>
+		<Card.Title>Filter Settings</Card.Title>
+		<Card.Description
+			>Choose what kind of events you want to show in the list (Changes not reflected in EList
+			preview!)</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid grid-cols-1 gap-6">
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="onlyShowFeatured" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Only Featured Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Show only the events that are set to featured.</span
+					>
+				</Label>
 
-                <input {...updateEventListForm.fields.filters.onlyShowFeatured.as("checkbox")} class="sr-only" bind:checked={filtersBindable.onlyShowFeatured} type="checkbox" />
-                <Switch
-                    id="onlyShowFeatured"
-                    bind:checked={filtersBindable.onlyShowFeatured}
-                />
-            </div>
+				<input
+					{...updateEventListForm.fields.filters.onlyShowFeatured.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.onlyShowFeatured}
+					type="checkbox"
+				/>
+				<Switch id="onlyShowFeatured" bind:checked={filtersBindable.onlyShowFeatured} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="hideUnpublished" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Hide Unpublished Events</span>
-                    <span class="text-sm text-muted-foreground">Hide the events that are not visible in the church center.</span>
-                </Label>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="hideUnpublished" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Hide Unpublished Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Hide the events that are not visible in the church center.</span
+					>
+				</Label>
 
-                <input {...updateEventListForm.fields.filters.hideUnpublished.as("checkbox")} class="sr-only" bind:checked={filtersBindable.hideUnpublished} type="checkbox" />
-                <Switch
-                    id="hideUnpublished"
-                    bind:checked={filtersBindable.hideUnpublished}
-                />
-            </div>
+				<input
+					{...updateEventListForm.fields.filters.hideUnpublished.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.hideUnpublished}
+					type="checkbox"
+				/>
+				<Switch id="hideUnpublished" bind:checked={filtersBindable.hideUnpublished} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="hideRecurringEvents" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Hide Recurring Events</span>
-                    <span class="text-sm text-muted-foreground">Hide events that are recurring but show only the first instance of the event in the feed.</span>
-                </Label>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="hideRecurringEvents" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Hide Recurring Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Hide events that are recurring but show only the first instance of the event in the
+						feed.</span
+					>
+				</Label>
 
-                <input {...updateEventListForm.fields.filters.hideRecurringEvents.as("checkbox")} class="sr-only" bind:checked={filtersBindable.hideRecurringEvents} type="checkbox" />
-                <Switch
-                    id="hideRecurringEvents"
-                    bind:checked={filtersBindable.hideRecurringEvents}
-                />
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+				<input
+					{...updateEventListForm.fields.filters.hideRecurringEvents.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.hideRecurringEvents}
+					type="checkbox"
+				/>
+				<Switch id="hideRecurringEvents" bind:checked={filtersBindable.hideRecurringEvents} />
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListGeneralInfo.svelte b/frontend/src/lib/dashboard/eventList/EListGeneralInfo.svelte
index 037979f..c2b51a5 100644
--- a/frontend/src/lib/dashboard/eventList/EListGeneralInfo.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListGeneralInfo.svelte
@@ -1,75 +1,66 @@
 <script lang="ts">
-    import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
-    import { Textarea } from "@/components/ui/textarea";
-    import * as Card from "@/components/ui/card/index";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
+	import { updateEventListForm } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
+	import { Textarea } from "@/components/ui/textarea";
+	import * as Card from "@/components/ui/card/index";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
 
-    let {
-        changed = $bindable(),
-        listId,
-        listName,
-        listDescription
-    }: {
-        changed: boolean,
-        listId: string,
-        listName: string,
-        listDescription: string
-    } = $props();
+	let {
+		changed = $bindable(),
+		listId,
+		listName,
+		listDescription
+	}: {
+		changed: boolean;
+		listId: string;
+		listName: string;
+		listDescription: string;
+	} = $props();
 
-    let listNameBindable = $derived(listName);
-    let listDescriptionBindable = $derived(listDescription);
+	let listNameBindable = $derived(listName);
+	let listDescriptionBindable = $derived(listDescription);
 
-    $effect(() => {
-        const listNameChanged = listName !== listNameBindable;
-        const listDescriptionChanged = listDescription !== listDescriptionBindable;
+	$effect(() => {
+		const listNameChanged = listName !== listNameBindable;
+		const listDescriptionChanged = listDescription !== listDescriptionBindable;
 
-        changed = listNameChanged || listDescriptionChanged;
-    });
+		changed = listNameChanged || listDescriptionChanged;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>General Information</Card.Title>
-        <Card.Description>Basic details about your event list</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-4">
-        <div class="space-y-2">
-            {#if listId.length > 0}
-                <input {...updateEventListForm.fields.id.as("hidden", listId)} />
-            {/if}
-            <Label for="list-id">List ID</Label>
-            <Input
-                id="list-id"
-                value={listId}
-                disabled
-                class="font-mono text-sm"
-            />
-        </div>
+	<Card.Header>
+		<Card.Title>General Information</Card.Title>
+		<Card.Description>Basic details about your event list</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-4">
+		<div class="space-y-2">
+			{#if listId.length > 0}
+				<input {...updateEventListForm.fields.id.as("hidden", listId)} />
+			{/if}
+			<Label for="list-id">List ID</Label>
+			<Input id="list-id" value={listId} disabled class="font-mono text-sm" />
+		</div>
 
-        <div class="space-y-2">
-            {#if listNameBindable.length > 0}
-                <input {...updateEventListForm.fields.name.as("hidden", listNameBindable)} />
-            {/if}
-            <Label for="list-name">Feed Name</Label>
-            <Input
-                id="list-name"
-                bind:value={listNameBindable}
-                placeholder="Enter list name"
-            />
-        </div>
+		<div class="space-y-2">
+			{#if listNameBindable.length > 0}
+				<input {...updateEventListForm.fields.name.as("hidden", listNameBindable)} />
+			{/if}
+			<Label for="list-name">Feed Name</Label>
+			<Input id="list-name" bind:value={listNameBindable} placeholder="Enter list name" />
+		</div>
 
-        <div class="space-y-2">
-            {#if listDescriptionBindable.length > 0}
-                <input {...updateEventListForm.fields.description.as("hidden", listDescriptionBindable)} />
-            {/if}
-            <Label for="list-description">Description</Label>
-            <Textarea
-                bind:value={listDescriptionBindable}
-                placeholder="Enter list description"
-                rows={3}
-                id="list-description"
-            />
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+		<div class="space-y-2">
+			{#if listDescriptionBindable.length > 0}
+				<input {...updateEventListForm.fields.description.as("hidden", listDescriptionBindable)} />
+			{/if}
+			<Label for="list-description">Description</Label>
+			<Textarea
+				bind:value={listDescriptionBindable}
+				placeholder="Enter list description"
+				rows={3}
+				id="list-description"
+			/>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListPreview.svelte b/frontend/src/lib/dashboard/eventList/EListPreview.svelte
index 48ebeba..4dea977 100644
--- a/frontend/src/lib/dashboard/eventList/EListPreview.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListPreview.svelte
@@ -1,50 +1,55 @@
 <script lang="ts">
-    import type { ImageListCustomizations } from "@/utils";
-    import * as Card from "@/components/ui/card/index";
-    import { browser } from "$app/environment";
+	import type { ImageListCustomizations } from "@/utils";
+	import * as Card from "@/components/ui/card/index";
+	import { browser } from "$app/environment";
 
-    let {
-        displaySettings,
-        listId
-    }: {
-        displaySettings: ImageListCustomizations,
-        listId: string,
-    } = $props();
+	let {
+		displaySettings,
+		listId
+	}: {
+		displaySettings: ImageListCustomizations;
+		listId: string;
+	} = $props();
 
-    let previewIFrame: HTMLIFrameElement | undefined = $state();
+	let previewIFrame: HTMLIFrameElement | undefined = $state();
 
-    $effect(() => {
-        if (displaySettings && previewIFrame && previewIFrame.contentWindow) {
-            previewIFrame.contentWindow.postMessage({ call: 'displaySettings', value: JSON.stringify(displaySettings) });
-        }
-    });
+	$effect(() => {
+		if (displaySettings && previewIFrame && previewIFrame.contentWindow) {
+			previewIFrame.contentWindow.postMessage({
+				call: "displaySettings",
+				value: JSON.stringify(displaySettings)
+			});
+		}
+	});
 </script>
 
 <svelte:head>
-    {#if browser}
-        <script async src="/resizeObserver.js"></script>
-    {/if}
+	{#if browser}
+		<script async src="/resizeObserver.js"></script>
+	{/if}
 </svelte:head>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Elist Preview</Card.Title>
-        <Card.Description>See the current changes in this preview before saving the settings.</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="w-full">
-            <iframe     
-                bind:this={previewIFrame}
-                style="background: none transparent; border: none;display:block;"
-                allowtransparency
-                width="100%"
-                height="100%"
-                src="/elistPreview/{listId}"
-                scrolling="no"
-                title="Event List Preview"
-                id="iframe{listId}"
-                frameborder="0"
-            ></iframe>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Elist Preview</Card.Title>
+		<Card.Description
+			>See the current changes in this preview before saving the settings.</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<div class="w-full">
+			<iframe
+				bind:this={previewIFrame}
+				style="background: none transparent; border: none;display:block;"
+				allowtransparency
+				width="100%"
+				height="100%"
+				src="/elistPreview/{listId}"
+				scrolling="no"
+				title="Event List Preview"
+				id="iframe{listId}"
+				frameborder="0"
+			></iframe>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListQuickActions.svelte b/frontend/src/lib/dashboard/eventList/EListQuickActions.svelte
index 7069682..0d06f7a 100644
--- a/frontend/src/lib/dashboard/eventList/EListQuickActions.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListQuickActions.svelte
@@ -1,48 +1,54 @@
 <script lang="ts">
-    import { deleteEventListCommand } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import * as Card from "@/components/ui/card/index";
-    import { goto } from "$app/navigation";
-    import { toast } from "svelte-sonner";
-    import { cn } from "@/utils";
+	import { deleteEventListCommand } from "../../../routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import * as Card from "@/components/ui/card/index";
+	import { goto } from "$app/navigation";
+	import { toast } from "svelte-sonner";
+	import { cn } from "@/utils";
 
-    let { listId }: { listId: string } = $props();
+	let { listId }: { listId: string } = $props();
 
-    async function deleteList() {
-        let deleting = toast.loading("Removing Event list.", { duration: Number.POSITIVE_INFINITY });
-        const response = await deleteEventListCommand(listId);
-        toast.dismiss(deleting);
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-            goto("/dashboard/event-lists");
-        }
-    }
+	async function deleteList() {
+		let deleting = toast.loading("Removing Event list.", { duration: Number.POSITIVE_INFINITY });
+		const response = await deleteEventListCommand(listId);
+		toast.dismiss(deleting);
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+			goto("/dashboard/event-lists");
+		}
+	}
 </script>
 
 <Card.Root>
-    <Card.Header>
-    <Card.Title>Quick Actions</Card.Title>
-    </Card.Header>
-    <Card.Content class="space-y-2">
-        <!-- Delete List Dialog -->
-        <Dialog.Root>
-            <Dialog.Trigger class={cn(buttonVariants({ variant: "outline" }), "w-full justify-start text-destructive hover:bg-red-500 bg-transparent")}>
-                Delete List
-            </Dialog.Trigger>
-            <Dialog.Content>
-                <Dialog.Header>
-                    <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-                    <Dialog.Description>
-                        This action cannot be undone. This will permanently delete this event list from our servers. All links relying on this list will not work.
-                    </Dialog.Description>
-                    <Dialog.Footer>
-                        <Button variant="destructive" onclick={deleteList}>Confirm Delete</Button>
-                    </Dialog.Footer>
-                </Dialog.Header>
-            </Dialog.Content>
-        </Dialog.Root>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Quick Actions</Card.Title>
+	</Card.Header>
+	<Card.Content class="space-y-2">
+		<!-- Delete List Dialog -->
+		<Dialog.Root>
+			<Dialog.Trigger
+				class={cn(
+					buttonVariants({ variant: "outline" }),
+					"w-full justify-start text-destructive hover:bg-red-500 bg-transparent"
+				)}
+			>
+				Delete List
+			</Dialog.Trigger>
+			<Dialog.Content>
+				<Dialog.Header>
+					<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
+					<Dialog.Description>
+						This action cannot be undone. This will permanently delete this event list from our
+						servers. All links relying on this list will not work.
+					</Dialog.Description>
+					<Dialog.Footer>
+						<Button variant="destructive" onclick={deleteList}>Confirm Delete</Button>
+					</Dialog.Footer>
+				</Dialog.Header>
+			</Dialog.Content>
+		</Dialog.Root>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListShare.svelte b/frontend/src/lib/dashboard/eventList/EListShare.svelte
index 374099c..9e932ff 100644
--- a/frontend/src/lib/dashboard/eventList/EListShare.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListShare.svelte
@@ -1,42 +1,46 @@
 <script lang="ts">
-    import { Copy, Link2, SquareArrowOutUpRight } from "@lucide/svelte";
-    import EListCopyIframe from "./EListCopyIframe.svelte";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { toast } from "svelte-sonner";
-    import { page } from "$app/stores";
+	import { Copy, Link2, SquareArrowOutUpRight } from "@lucide/svelte";
+	import EListCopyIframe from "./EListCopyIframe.svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { toast } from "svelte-sonner";
+	import { page } from "$app/stores";
 
-    let { listId, listName }: { listId: string, listName: string } = $props();
+	let { listId, listName }: { listId: string; listName: string } = $props();
 
-    function handleCopyLink() {
-        const link = `${window.location.origin}/elist/${listId}`;
+	function handleCopyLink() {
+		const link = `${window.location.origin}/elist/${listId}`;
 
-        navigator.clipboard.writeText(link);
+		navigator.clipboard.writeText(link);
 
-        toast.info("Copied", {
-            description: link,
-            descriptionClass: "underline"
-        })
-    }
+		toast.info("Copied", {
+			description: link,
+			descriptionClass: "underline"
+		});
+	}
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Link</Card.Title>
-        <Card.Description>Share this list with others</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-3">
-        <div class="flex justify-between items-center gap-2 p-3 bg-muted rounded-lg">
-            <Link2 class="h-4 w-4 text-muted-foreground shrink-0" />
-            <span class="text-sm font-mono truncate w-full">/elist/{listId}</span>
-            <button onclick={handleCopyLink} class="hover:bg-accent transition-colors duration-300 ease-in-out p-1 rounded" title="Copy Link">
-                <Copy class="h-4 w-4 text-muted-foreground shrink-0" />
-            </button>
-        </div>
-        <EListCopyIframe {listId} {listName} infosectionsLink={$page.url.origin}/>
-        <Button class="w-full gap-2" href="/elist/{listId}" target="_blank">
-            <SquareArrowOutUpRight class="h-4 w-4" />
-            Goto Page
-        </Button>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Link</Card.Title>
+		<Card.Description>Share this list with others</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-3">
+		<div class="flex justify-between items-center gap-2 p-3 bg-muted rounded-lg">
+			<Link2 class="h-4 w-4 text-muted-foreground shrink-0" />
+			<span class="text-sm font-mono truncate w-full">/elist/{listId}</span>
+			<button
+				onclick={handleCopyLink}
+				class="hover:bg-accent transition-colors duration-300 ease-in-out p-1 rounded"
+				title="Copy Link"
+			>
+				<Copy class="h-4 w-4 text-muted-foreground shrink-0" />
+			</button>
+		</div>
+		<EListCopyIframe {listId} {listName} infosectionsLink={$page.url.origin} />
+		<Button class="w-full gap-2" href="/elist/{listId}" target="_blank">
+			<SquareArrowOutUpRight class="h-4 w-4" />
+			Goto Page
+		</Button>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/eventList/EListStatistics.svelte b/frontend/src/lib/dashboard/eventList/EListStatistics.svelte
index a5a49b8..b8250e2 100644
--- a/frontend/src/lib/dashboard/eventList/EListStatistics.svelte
+++ b/frontend/src/lib/dashboard/eventList/EListStatistics.svelte
@@ -1,40 +1,44 @@
 <script lang="ts">
-    import * as Card from "@/components/ui/card/index";
-    import { Temporal } from "temporal-polyfill";
-    import PrettyDate from "@/PrettyDate.svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Temporal } from "temporal-polyfill";
+	import PrettyDate from "@/PrettyDate.svelte";
 
-    let {
-        visits,
-        created,
-        updated,
-        timeZone
-    }: {
-        visits: number,
-        created: string,
-        updated: string,
-        timeZone: string
-    } = $props();
+	let {
+		visits,
+		created,
+		updated,
+		timeZone
+	}: {
+		visits: number;
+		created: string;
+		updated: string;
+		timeZone: string;
+	} = $props();
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Statistics</Card.Title>
-        <Card.Description>Event List performance</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-4">
-        <div class="space-y-2">
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Visits</span>
-                <span class="font-semibold text-foreground">{visits}</span>
-            </div>
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Created</span>
-                <span class="font-semibold text-foreground"><PrettyDate date={Temporal.Instant.from(created).toZonedDateTimeISO(timeZone)} /></span>
-            </div>
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Updated</span>
-                <span class="font-semibold text-foreground"><PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} /></span>
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Statistics</Card.Title>
+		<Card.Description>Event List performance</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-4">
+		<div class="space-y-2">
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Visits</span>
+				<span class="font-semibold text-foreground">{visits}</span>
+			</div>
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Created</span>
+				<span class="font-semibold text-foreground"
+					><PrettyDate date={Temporal.Instant.from(created).toZonedDateTimeISO(timeZone)} /></span
+				>
+			</div>
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Updated</span>
+				<span class="font-semibold text-foreground"
+					><PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} /></span
+				>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/homePage/DynamicUrlItem.svelte b/frontend/src/lib/dashboard/homePage/DynamicUrlItem.svelte
index eba44d4..678bee3 100644
--- a/frontend/src/lib/dashboard/homePage/DynamicUrlItem.svelte
+++ b/frontend/src/lib/dashboard/homePage/DynamicUrlItem.svelte
@@ -1,29 +1,29 @@
 <script lang="ts">
-    import { Badge } from "@/components/ui/badge";
-    import { Link2 } from "@lucide/svelte";
-    
-    let {
-        name,
-        redirect,
-        hits,
-    }: {
-        name: string;
-        redirect: number;
-        hits: number;
-    } = $props();
+	import { Badge } from "@/components/ui/badge";
+	import { Link2 } from "@lucide/svelte";
+
+	let {
+		name,
+		redirect,
+		hits
+	}: {
+		name: string;
+		redirect: number;
+		hits: number;
+	} = $props();
 </script>
 
 <div class="flex items-center justify-between py-2.5 border-b border-border/50 last:border-0">
-    <div class="flex items-center gap-3 min-w-0 flex-1">
-    <div class="h-8 w-8 rounded-md bg-secondary flex items-center justify-center shrink-0">
-        <Link2 class="h-4 w-4 text-pink-400" />
-    </div>
-    <div class="min-w-0 flex-1">
-        <p class="text-sm font-medium text-foreground">{name}</p>
-        <p class="text-xs text-muted-foreground truncate">{redirect}</p>
-    </div>
-    </div>
-    <Badge variant="secondary" class="text-xs shrink-0">
-        {hits} hits
-    </Badge>
-</div>
\ No newline at end of file
+	<div class="flex items-center gap-3 min-w-0 flex-1">
+		<div class="h-8 w-8 rounded-md bg-secondary flex items-center justify-center shrink-0">
+			<Link2 class="h-4 w-4 text-pink-400" />
+		</div>
+		<div class="min-w-0 flex-1">
+			<p class="text-sm font-medium text-foreground">{name}</p>
+			<p class="text-xs text-muted-foreground truncate">{redirect}</p>
+		</div>
+	</div>
+	<Badge variant="secondary" class="text-xs shrink-0">
+		{hits} hits
+	</Badge>
+</div>
diff --git a/frontend/src/lib/dashboard/homePage/FeatureCard.svelte b/frontend/src/lib/dashboard/homePage/FeatureCard.svelte
index c18909a..32f0a6a 100644
--- a/frontend/src/lib/dashboard/homePage/FeatureCard.svelte
+++ b/frontend/src/lib/dashboard/homePage/FeatureCard.svelte
@@ -1,42 +1,50 @@
 <script lang="ts">
-    import { ArrowUpRight, type IconProps } from "@lucide/svelte";
-    import * as Card from "@/components/ui/card/index";
-    import type { Component, Snippet } from "svelte";
-    import { Button } from "@/components/ui/button";
-    import { cn } from "@/utils";
-    
-    let { title, description, icon: Icon, accent, bgAccent, href, children, class: className }: {
-        title: string
-        description: string
-        icon: Component<IconProps, {}, "">
-        accent: string
-        bgAccent: string
-        href: string
-        children: Snippet
-        class?: string
-    } = $props();
+	import { ArrowUpRight, type IconProps } from "@lucide/svelte";
+	import * as Card from "@/components/ui/card/index";
+	import type { Component, Snippet } from "svelte";
+	import { Button } from "@/components/ui/button";
+	import { cn } from "@/utils";
 
+	let {
+		title,
+		description,
+		icon: Icon,
+		accent,
+		bgAccent,
+		href,
+		children,
+		class: className
+	}: {
+		title: string;
+		description: string;
+		icon: Component<IconProps, {}, "">;
+		accent: string;
+		bgAccent: string;
+		href: string;
+		children: Snippet;
+		class?: string;
+	} = $props();
 </script>
 
 <Card.Root class={cn("border-border/50 bg-card overflow-hidden", className)}>
-    <Card.Header class="pb-3">
-        <div class="flex items-start justify-between">
-            <div class="flex items-center gap-3">
-            <div class={cn("rounded-lg p-2", bgAccent)}>
-                <Icon class={cn("h-5 w-5", accent)} />
-            </div>
-            <div>
-                <Card.Title class="text-base font-semibold text-foreground">{title}</Card.Title>
-                <Card.Description class="text-xs">{description}</Card.Description>
-            </div>
-            </div>
-            <Button variant="ghost" size="sm" class="h-8 w-8 p-0">
-            <a href={href}>
-                <ArrowUpRight class="h-4 w-4" />
-                <span class="sr-only">View all {title}</span>
-            </a>
-            </Button>
-        </div>
-    </Card.Header>
-    <Card.Content class="pt-0">{@render children()}</Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header class="pb-3">
+		<div class="flex items-start justify-between">
+			<div class="flex items-center gap-3">
+				<div class={cn("rounded-lg p-2", bgAccent)}>
+					<Icon class={cn("h-5 w-5", accent)} />
+				</div>
+				<div>
+					<Card.Title class="text-base font-semibold text-foreground">{title}</Card.Title>
+					<Card.Description class="text-xs">{description}</Card.Description>
+				</div>
+			</div>
+			<Button variant="ghost" size="sm" class="h-8 w-8 p-0">
+				<a {href}>
+					<ArrowUpRight class="h-4 w-4" />
+					<span class="sr-only">View all {title}</span>
+				</a>
+			</Button>
+		</div>
+	</Card.Header>
+	<Card.Content class="pt-0">{@render children()}</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte b/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte
index 95977eb..bda33cd 100644
--- a/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte
+++ b/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte
@@ -1,136 +1,152 @@
 <script lang="ts">
-    import { type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
-    import { CalendarDays, LayoutList, Image, Link2 } from "@lucide/svelte";
-    import DynamicUrlItem from "./DynamicUrlItem.svelte";
-    import { type CalendarDBModel } from "@/cal.utils";
-    import { Button } from "@/components/ui/button";
-    import FeatureCard from "./FeatureCard.svelte";
-    import ViewItem from "./ViewItem.svelte";
-
-    const {
-        myCalendars,
-        myImageFeeds,
-        myEventLists,
-        myDynamicURLs,
-        timeZone,
-        pb_url
-    }: {
-        myCalendars: CalendarDBModel[],
-        myImageFeeds: ImageFeedDBModel[],
-        myEventLists: EventListDBModel[],
-        myDynamicURLs: DynamicURLModel[],
-        timeZone: string,
-        pb_url: string
-    } = $props();
+	import { type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
+	import { CalendarDays, LayoutList, Image, Link2 } from "@lucide/svelte";
+	import DynamicUrlItem from "./DynamicUrlItem.svelte";
+	import { type CalendarDBModel } from "@/cal.utils";
+	import { Button } from "@/components/ui/button";
+	import FeatureCard from "./FeatureCard.svelte";
+	import ViewItem from "./ViewItem.svelte";
 
+	const {
+		myCalendars,
+		myImageFeeds,
+		myEventLists,
+		myDynamicURLs,
+		timeZone,
+		pb_url
+	}: {
+		myCalendars: CalendarDBModel[];
+		myImageFeeds: ImageFeedDBModel[];
+		myEventLists: EventListDBModel[];
+		myDynamicURLs: DynamicURLModel[];
+		timeZone: string;
+		pb_url: string;
+	} = $props();
 </script>
 
 <section class="space-y-4">
-    <div class="flex items-center justify-between">
-        <h3 class="text-lg font-semibold text-foreground">Your Features</h3>
-    </div>
-    
-    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-        <FeatureCard
-            title="Calendars"
-            description="Display events on customizable calendars"
-            icon={CalendarDays}
-            accent="text-violet-400"
-            bgAccent="bg-violet-500/10"
-            href="/dashboard/calendars"
-            class="lg:row-span-2"
-        >
-            <div class="space-y-1">
-                {#each myCalendars as calendar (`mycal${calendar.id}`)}
-                    <ViewItem
-                        id={calendar.id}
-                        {timeZone}
-                        logo={calendar.logo ? `${pb_url}/api/files/${calendar.collectionId}/${calendar.id}/${calendar.logo}` : null}
-                        name={calendar.name}
-                        visits={calendar.visits}
-                        updated={calendar.updated}
-                        type="calendars"
-                    />
-                {/each}
-            </div>
-            <Button variant="outline" size="sm" class="w-full mt-4 border-border/50 hover:bg-secondary" href="/dashboard/calendars?new=1">
-                Create New Calendar
-            </Button>
-        </FeatureCard>
+	<div class="flex items-center justify-between">
+		<h3 class="text-lg font-semibold text-foreground">Your Features</h3>
+	</div>
+
+	<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+		<FeatureCard
+			title="Calendars"
+			description="Display events on customizable calendars"
+			icon={CalendarDays}
+			accent="text-violet-400"
+			bgAccent="bg-violet-500/10"
+			href="/dashboard/calendars"
+			class="lg:row-span-2"
+		>
+			<div class="space-y-1">
+				{#each myCalendars as calendar (`mycal${calendar.id}`)}
+					<ViewItem
+						id={calendar.id}
+						{timeZone}
+						logo={calendar.logo
+							? `${pb_url}/api/files/${calendar.collectionId}/${calendar.id}/${calendar.logo}`
+							: null}
+						name={calendar.name}
+						visits={calendar.visits}
+						updated={calendar.updated}
+						type="calendars"
+					/>
+				{/each}
+			</div>
+			<Button
+				variant="outline"
+				size="sm"
+				class="w-full mt-4 border-border/50 hover:bg-secondary"
+				href="/dashboard/calendars?new=1"
+			>
+				Create New Calendar
+			</Button>
+		</FeatureCard>
 
-        <FeatureCard
-            title="Event Lists"
-            description="Curated lists of upcoming events"
-            icon={LayoutList}
-            accent="text-emerald-400"
-            bgAccent="bg-emerald-500/10"
-            href="/dashboard/event-lists"
-        >
-            <div class="space-y-1">
-                {#each myEventLists as list (`alist${list.id}`)}
-                    <ViewItem
-                        id={list.id}
-                        {timeZone}
-                        logo={list.logo ? `${pb_url}/api/files/${list.collectionId}/${list.id}/${list.logo}` : null}
-                        name={list.name}
-                        visits={list.visits}
-                        updated={list.updated}
-                        type="event-lists"
-                    />
-                {/each}
-            </div>
-            <Button variant="outline" size="sm" class="w-full mt-4 border-border/50 hover:bg-secondary" href="/dashboard/event-lists?new=1">
-                Create New List
-            </Button>
-        </FeatureCard>
+		<FeatureCard
+			title="Event Lists"
+			description="Curated lists of upcoming events"
+			icon={LayoutList}
+			accent="text-emerald-400"
+			bgAccent="bg-emerald-500/10"
+			href="/dashboard/event-lists"
+		>
+			<div class="space-y-1">
+				{#each myEventLists as list (`alist${list.id}`)}
+					<ViewItem
+						id={list.id}
+						{timeZone}
+						logo={list.logo
+							? `${pb_url}/api/files/${list.collectionId}/${list.id}/${list.logo}`
+							: null}
+						name={list.name}
+						visits={list.visits}
+						updated={list.updated}
+						type="event-lists"
+					/>
+				{/each}
+			</div>
+			<Button
+				variant="outline"
+				size="sm"
+				class="w-full mt-4 border-border/50 hover:bg-secondary"
+				href="/dashboard/event-lists?new=1"
+			>
+				Create New List
+			</Button>
+		</FeatureCard>
 
-        <FeatureCard
-            title="Image Feeds"
-            description="Slideshow carousels for displays"
-            icon={Image}
-            accent="text-amber-400"
-            bgAccent="bg-amber-500/10"
-            href="/dashboard/image-feeds"
-        >
-            <div class="space-y-1">
-                {#each myImageFeeds as feed (`afeed${feed.id}`)}
-                    <ViewItem
-                        id={feed.id}
-                        {timeZone}
-                        logo={feed.logo ? `${pb_url}/api/files/${feed.collectionId}/${feed.id}/${feed.logo}` : null}
-                        name={feed.name}
-                        visits={feed.visits}
-                        updated={feed.updated}
-                        type="image-feeds"
-                    />
-                {/each}
-            </div>
-            <Button variant="outline" size="sm" class="w-full mt-4 border-border/50 hover:bg-secondary">
-                Create New Feed
-            </Button>
-        </FeatureCard>
+		<FeatureCard
+			title="Image Feeds"
+			description="Slideshow carousels for displays"
+			icon={Image}
+			accent="text-amber-400"
+			bgAccent="bg-amber-500/10"
+			href="/dashboard/image-feeds"
+		>
+			<div class="space-y-1">
+				{#each myImageFeeds as feed (`afeed${feed.id}`)}
+					<ViewItem
+						id={feed.id}
+						{timeZone}
+						logo={feed.logo
+							? `${pb_url}/api/files/${feed.collectionId}/${feed.id}/${feed.logo}`
+							: null}
+						name={feed.name}
+						visits={feed.visits}
+						updated={feed.updated}
+						type="image-feeds"
+					/>
+				{/each}
+			</div>
+			<Button variant="outline" size="sm" class="w-full mt-4 border-border/50 hover:bg-secondary">
+				Create New Feed
+			</Button>
+		</FeatureCard>
 
-        <FeatureCard
-            title="Dynamic URLs"
-            description="Smart redirects with scheduling"
-            icon={Link2}
-            accent="text-pink-400"
-            bgAccent="bg-pink-500/10"
-            href="/dashboard/dynamic-urls"
-            class="md:col-span-2"
-        >
-            <div class="grid gap-0 sm:grid-cols-3">
-                {#each myDynamicURLs as url (`adurl${url.id}`)}
-                    <DynamicUrlItem
-                        name={url.id}
-                        redirect={307}
-                        hits={100}
-                    />
-                {/each}
-            </div>
-            <Button variant="outline" size="sm" class="w-full mt-4 border-border/50 hover:bg-secondary" href="/dashboard/dynamic-urls?new=1">
-                Create New Dynamic URL
-            </Button>
-        </FeatureCard>
-    </div>
-</section>
\ No newline at end of file
+		<FeatureCard
+			title="Dynamic URLs"
+			description="Smart redirects with scheduling"
+			icon={Link2}
+			accent="text-pink-400"
+			bgAccent="bg-pink-500/10"
+			href="/dashboard/dynamic-urls"
+			class="md:col-span-2"
+		>
+			<div class="grid gap-0 sm:grid-cols-3">
+				{#each myDynamicURLs as url (`adurl${url.id}`)}
+					<DynamicUrlItem name={url.id} redirect={307} hits={100} />
+				{/each}
+			</div>
+			<Button
+				variant="outline"
+				size="sm"
+				class="w-full mt-4 border-border/50 hover:bg-secondary"
+				href="/dashboard/dynamic-urls?new=1"
+			>
+				Create New Dynamic URL
+			</Button>
+		</FeatureCard>
+	</div>
+</section>
diff --git a/frontend/src/lib/dashboard/homePage/IntegrationStatus.svelte b/frontend/src/lib/dashboard/homePage/IntegrationStatus.svelte
index 98bc0f8..b91c252 100644
--- a/frontend/src/lib/dashboard/homePage/IntegrationStatus.svelte
+++ b/frontend/src/lib/dashboard/homePage/IntegrationStatus.svelte
@@ -1,119 +1,129 @@
 <script lang="ts">
-    import { updateSpecificUserEvents } from "../../../routes/(mainWebsite)/dashboard/events.remote";
-    import { AlertCircle, CheckCircle2, Cloud, RefreshCw } from "@lucide/svelte";
-    import { timeAgo, timeWhen, type IntegrationModel } from "@/utils";
-    import { type EventDBModelPrivate } from "@/event.utils";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { toast } from "svelte-sonner";
+	import { updateSpecificUserEvents } from "../../../routes/(mainWebsite)/dashboard/events.remote";
+	import { AlertCircle, CheckCircle2, Cloud, RefreshCw } from "@lucide/svelte";
+	import { timeAgo, timeWhen, type IntegrationModel } from "@/utils";
+	import { type EventDBModelPrivate } from "@/event.utils";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { toast } from "svelte-sonner";
 
-    let { myIntegrations, allUserEvents }: { myIntegrations: IntegrationModel[], allUserEvents: EventDBModelPrivate[] } = $props();
+	let {
+		myIntegrations,
+		allUserEvents
+	}: { myIntegrations: IntegrationModel[]; allUserEvents: EventDBModelPrivate[] } = $props();
 
-    let connectedCount = $derived(myIntegrations.filter(i => i.status === "connected").length);
-    let totalEvents = $derived(allUserEvents.length);
-    let mostRecentSync = $derived(myIntegrations.length > 0 
-    ? myIntegrations.reduce((latest, i) => {
-        const date = new Date(i.lastEventsFetch)
-        return date > latest ? date : latest
-      }, new Date(0))
-    : new Date())
+	let connectedCount = $derived(myIntegrations.filter((i) => i.status === "connected").length);
+	let totalEvents = $derived(allUserEvents.length);
+	let mostRecentSync = $derived(
+		myIntegrations.length > 0
+			? myIntegrations.reduce((latest, i) => {
+					const date = new Date(i.lastEventsFetch);
+					return date > latest ? date : latest;
+				}, new Date(0))
+			: new Date()
+	);
 
-    let nextSync = $derived(timeWhen((new Date(mostRecentSync)).setHours(mostRecentSync.getHours() + 1)))
+	let nextSync = $derived(
+		timeWhen(new Date(mostRecentSync).setHours(mostRecentSync.getHours() + 1))
+	);
 
-    const serviceColors: Record<string, string> = {
-        planningcenter: "text-blue-400",
-        breeze: "text-sky-400",
-        google: "text-red-400",
-        outlook: "text-blue-500",
-        ical: "text-orange-400",
-    }
+	const serviceColors: Record<string, string> = {
+		planningcenter: "text-blue-400",
+		breeze: "text-sky-400",
+		google: "text-red-400",
+		outlook: "text-blue-500",
+		ical: "text-orange-400"
+	};
 
-    let isSyncing = $state(false);
-    async function handleSyncAll() {
-        isSyncing = true;
-        const response = await updateSpecificUserEvents();
-        isSyncing = false;
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-        }
-    }
+	let isSyncing = $state(false);
+	async function handleSyncAll() {
+		isSyncing = true;
+		const response = await updateSpecificUserEvents();
+		isSyncing = false;
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+		}
+	}
 </script>
 
 <Card.Root class="border-border/50 bg-card">
-    <Card.Header class={myIntegrations.length > 0 ? 'pb-3' : ''}>
-        <Card.Title class="text-base font-semibold text-foreground">Sync Status</Card.Title>
-        <Card.Description class="text-xs">
-            {connectedCount} integration{connectedCount !== 1 ? "s" : ""} connected
-        </Card.Description>
-    </Card.Header>
-    {#if myIntegrations.length > 0}
-        <Card.Content class="space-y-4">
-            <div class="space-y-2">
-                {#each myIntegrations as integration (`anIntegrationStatus${integration.id}`)}
-                    {@const isConnected = integration.status === "connected"}
-                    {@const isError = integration.status === "error"}
-                    {@const isSyncingIntegration = integration.status === "syncing"}
+	<Card.Header class={myIntegrations.length > 0 ? "pb-3" : ""}>
+		<Card.Title class="text-base font-semibold text-foreground">Sync Status</Card.Title>
+		<Card.Description class="text-xs">
+			{connectedCount} integration{connectedCount !== 1 ? "s" : ""} connected
+		</Card.Description>
+	</Card.Header>
+	{#if myIntegrations.length > 0}
+		<Card.Content class="space-y-4">
+			<div class="space-y-2">
+				{#each myIntegrations as integration (`anIntegrationStatus${integration.id}`)}
+					{@const isConnected = integration.status === "connected"}
+					{@const isError = integration.status === "error"}
+					{@const isSyncingIntegration = integration.status === "syncing"}
 
-                    <div class="flex items-center justify-between p-2.5 rounded-lg bg-secondary/50">
-                        <div class="flex items-center gap-2.5">
-                            {#if isConnected}
-                                <CheckCircle2 class="h-4 w-4 text-emerald-400" />
-                            {:else if isError}
-                                <AlertCircle class="h-4 w-4 text-destructive" />
-                            {:else if isSyncingIntegration}
-                                <RefreshCw class="h-4 w-4 text-amber-400 animate-spin" />
-                            {:else}
-                                <Cloud class={`h-4 w-4 ${serviceColors[integration.service]}`} />
-                            {/if}
-                            <div>
-                                <p class="text-sm font-medium text-foreground">
-                                    {integration.prettyName}
-                                </p>
-                                <p class="text-xs text-muted-foreground">
-                                    {allUserEvents.filter((event) => event.service === integration.service).length} events &middot; {timeAgo(new Date(integration.lastEventsFetch))}
-                                </p>
-                            </div>
-                        </div>
+					<div class="flex items-center justify-between p-2.5 rounded-lg bg-secondary/50">
+						<div class="flex items-center gap-2.5">
+							{#if isConnected}
+								<CheckCircle2 class="h-4 w-4 text-emerald-400" />
+							{:else if isError}
+								<AlertCircle class="h-4 w-4 text-destructive" />
+							{:else if isSyncingIntegration}
+								<RefreshCw class="h-4 w-4 text-amber-400 animate-spin" />
+							{:else}
+								<Cloud class={`h-4 w-4 ${serviceColors[integration.service]}`} />
+							{/if}
+							<div>
+								<p class="text-sm font-medium text-foreground">
+									{integration.prettyName}
+								</p>
+								<p class="text-xs text-muted-foreground">
+									{allUserEvents.filter((event) => event.service === integration.service).length} events
+									&middot; {timeAgo(new Date(integration.lastEventsFetch))}
+								</p>
+							</div>
+						</div>
 
-                        <div class="text-xs px-2 py-0.5 rounded-full {
-                            isConnected ? "bg-emerald-400/10 text-emerald-400" :
-                            isError ? "bg-destructive/10 text-destructive" :
-                            "bg-amber-400/10 text-amber-400"
-                        }">
-                            {#if isConnected}
-                                Synced
-                            {:else if isError}
-                                Error
-                            {:else}
-                                Syncing
-                            {/if}
-                        </div>
-                    </div>
-                {/each}
-            </div>
+						<div
+							class="text-xs px-2 py-0.5 rounded-full {isConnected
+								? 'bg-emerald-400/10 text-emerald-400'
+								: isError
+									? 'bg-destructive/10 text-destructive'
+									: 'bg-amber-400/10 text-amber-400'}"
+						>
+							{#if isConnected}
+								Synced
+							{:else if isError}
+								Error
+							{:else}
+								Syncing
+							{/if}
+						</div>
+					</div>
+				{/each}
+			</div>
 
-            <div class="grid grid-cols-2 gap-3">
-                <div class="p-3 rounded-lg bg-secondary/50 text-center">
-                    <p class="text-xs text-muted-foreground">Total events</p>
-                    <p class="text-lg font-semibold text-foreground">{totalEvents}</p>
-                </div>
-                <div class="p-3 rounded-lg bg-secondary/50 text-center">
-                    <p class="text-xs text-muted-foreground">Next sync</p>
-                    <p class="text-lg font-semibold text-foreground">{nextSync}</p>
-                </div>
-            </div>
+			<div class="grid grid-cols-2 gap-3">
+				<div class="p-3 rounded-lg bg-secondary/50 text-center">
+					<p class="text-xs text-muted-foreground">Total events</p>
+					<p class="text-lg font-semibold text-foreground">{totalEvents}</p>
+				</div>
+				<div class="p-3 rounded-lg bg-secondary/50 text-center">
+					<p class="text-xs text-muted-foreground">Next sync</p>
+					<p class="text-lg font-semibold text-foreground">{nextSync}</p>
+				</div>
+			</div>
 
-            <Button
-                variant="outline"
-                class="w-full border-border/50 hover:bg-secondary"
-                onclick={handleSyncAll}
-                disabled={isSyncing}
-            >
-                <RefreshCw class="h-4 w-4 mr-2 {isSyncing ? "animate-spin" : ""}" />
-                {isSyncing ? "Syncing all..." : "Sync All"}
-            </Button>
-        </Card.Content>
-    {/if}
-</Card.Root>
\ No newline at end of file
+			<Button
+				variant="outline"
+				class="w-full border-border/50 hover:bg-secondary"
+				onclick={handleSyncAll}
+				disabled={isSyncing}
+			>
+				<RefreshCw class="h-4 w-4 mr-2 {isSyncing ? 'animate-spin' : ''}" />
+				{isSyncing ? "Syncing all..." : "Sync All"}
+			</Button>
+		</Card.Content>
+	{/if}
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/homePage/MetricCards.svelte b/frontend/src/lib/dashboard/homePage/MetricCards.svelte
index c6f85ba..0283f1e 100644
--- a/frontend/src/lib/dashboard/homePage/MetricCards.svelte
+++ b/frontend/src/lib/dashboard/homePage/MetricCards.svelte
@@ -1,102 +1,106 @@
 <script lang="ts">
-    import { cn, type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
-    import { Calendar, CalendarDays, LayoutList, Image, Link2, Eye } from "@lucide/svelte";
-    import { type EventDBModelPrivate } from "@/event.utils";
-    import { type CalendarDBModel } from "@/cal.utils";
-    import * as Card from "@/components/ui/card/index";
+	import { cn, type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
+	import { Calendar, CalendarDays, LayoutList, Image, Link2, Eye } from "@lucide/svelte";
+	import { type EventDBModelPrivate } from "@/event.utils";
+	import { type CalendarDBModel } from "@/cal.utils";
+	import * as Card from "@/components/ui/card/index";
 
-    const {
-        myCalendars,
-        myImageFeeds,
-        myEventLists,
-        myDynamicURLs,
-        allUserEvents
-    }: {
-        myCalendars: CalendarDBModel[],
-        myImageFeeds: ImageFeedDBModel[],
-        myEventLists: EventListDBModel[],
-        myDynamicURLs: DynamicURLModel[],
-        allUserEvents: EventDBModelPrivate[]
-    } = $props();
+	const {
+		myCalendars,
+		myImageFeeds,
+		myEventLists,
+		myDynamicURLs,
+		allUserEvents
+	}: {
+		myCalendars: CalendarDBModel[];
+		myImageFeeds: ImageFeedDBModel[];
+		myEventLists: EventListDBModel[];
+		myDynamicURLs: DynamicURLModel[];
+		allUserEvents: EventDBModelPrivate[];
+	} = $props();
 
-    const totalVisits = $derived(
-        myCalendars.map((cal) => cal.visits).reduce((a,b) => a+b, 0) +
-        myImageFeeds.map((feed) => feed.visits).reduce((a,b) => a+b, 0) +
-        myEventLists.map((elist) => elist.visits).reduce((a,b) => a+b, 0) +
-        myDynamicURLs.map((dURL) => dURL.refs.map((aref) => aref.hits).reduce((a,b) => a+b, 0)).reduce((a,b) => a+b, 0)
-    );
+	const totalVisits = $derived(
+		myCalendars.map((cal) => cal.visits).reduce((a, b) => a + b, 0) +
+			myImageFeeds.map((feed) => feed.visits).reduce((a, b) => a + b, 0) +
+			myEventLists.map((elist) => elist.visits).reduce((a, b) => a + b, 0) +
+			myDynamicURLs
+				.map((dURL) => dURL.refs.map((aref) => aref.hits).reduce((a, b) => a + b, 0))
+				.reduce((a, b) => a + b, 0)
+	);
 
-    const metricConfig = $derived([
-        {
-            key: "eventAmount" as const,
-            name: "Events Synced",
-            description: "From Your Integrations",
-            icon: Calendar,
-            accent: "text-blue-500",
-            bgAccent: "bg-blue-500/10",
-            value: allUserEvents.length
-        },
-        {
-            key: "calendarsAmount" as const,
-            name: "Calendars",
-            description: "Created",
-            icon: CalendarDays,
-            accent: "text-violet-500",
-            bgAccent: "bg-violet-500/10",
-            value: myCalendars.length
-        },
-        {
-            key: "eventListAmount" as const,
-            name: "Event Lists",
-            description: "Created",
-            icon: LayoutList,
-            accent: "text-emerald-500",
-            bgAccent: "bg-emerald-500/10",
-            value: myEventLists.length
-        },
-        {
-            key: "imageFeedsAmount" as const,
-            name: "Image Feeds",
-            description: "Created",
-            icon: Image,
-            accent: "text-amber-500",
-            bgAccent: "bg-amber-500/10",
-            value: myImageFeeds.length
-        },
-        {
-            key: "dynamicUrlsAmount" as const,
-            name: "Dynamic URLs",
-            description: "Created",
-            icon: Link2,
-            accent: "text-pink-400",
-            bgAccent: "bg-pink-500/10",
-            value: myDynamicURLs.length
-        },
-        {
-            key: "totalVisits" as const,
-            name: "Total Visits",
-            description: "All Time",
-            icon: Eye,
-            accent: "text-cyan-400",
-            bgAccent: "bg-cyan-500/10",
-            value: totalVisits
-        },
-    ]);
+	const metricConfig = $derived([
+		{
+			key: "eventAmount" as const,
+			name: "Events Synced",
+			description: "From Your Integrations",
+			icon: Calendar,
+			accent: "text-blue-500",
+			bgAccent: "bg-blue-500/10",
+			value: allUserEvents.length
+		},
+		{
+			key: "calendarsAmount" as const,
+			name: "Calendars",
+			description: "Created",
+			icon: CalendarDays,
+			accent: "text-violet-500",
+			bgAccent: "bg-violet-500/10",
+			value: myCalendars.length
+		},
+		{
+			key: "eventListAmount" as const,
+			name: "Event Lists",
+			description: "Created",
+			icon: LayoutList,
+			accent: "text-emerald-500",
+			bgAccent: "bg-emerald-500/10",
+			value: myEventLists.length
+		},
+		{
+			key: "imageFeedsAmount" as const,
+			name: "Image Feeds",
+			description: "Created",
+			icon: Image,
+			accent: "text-amber-500",
+			bgAccent: "bg-amber-500/10",
+			value: myImageFeeds.length
+		},
+		{
+			key: "dynamicUrlsAmount" as const,
+			name: "Dynamic URLs",
+			description: "Created",
+			icon: Link2,
+			accent: "text-pink-400",
+			bgAccent: "bg-pink-500/10",
+			value: myDynamicURLs.length
+		},
+		{
+			key: "totalVisits" as const,
+			name: "Total Visits",
+			description: "All Time",
+			icon: Eye,
+			accent: "text-cyan-400",
+			bgAccent: "bg-cyan-500/10",
+			value: totalVisits
+		}
+	]);
 </script>
 
 <div class="grid gap-4 grid-cols-2 md:grid-cols-3 lg:grid-cols-6">
-    {#each metricConfig as config (`ametriccard${config.key}`)}
-        <Card.Root class="relative overflow-hidden border-border/50 bg-card hover:bg-card/80 transition-colors">
-            <Card.Content class="p-4">
-                <div class={cn("absolute top-3 right-3 rounded-lg p-2", config.bgAccent)}>
-                    <config.icon class={cn("h-4 w-4", config.accent)} />
-                </div>
-                <div class="space-y-1 pr-10">
-                    <p class="text-2xl font-bold text-foreground">{config.value}</p>
-                    <p class="text-sm font-medium text-foreground">{config.name}</p>
-                    <p class="text-xs text-muted-foreground">{config.description}</p>
-                </div>
-            </Card.Content>
-        </Card.Root>
-    {/each}
-</div>
\ No newline at end of file
+	{#each metricConfig as config (`ametriccard${config.key}`)}
+		<Card.Root
+			class="relative overflow-hidden border-border/50 bg-card hover:bg-card/80 transition-colors"
+		>
+			<Card.Content class="p-4">
+				<div class={cn("absolute top-3 right-3 rounded-lg p-2", config.bgAccent)}>
+					<config.icon class={cn("h-4 w-4", config.accent)} />
+				</div>
+				<div class="space-y-1 pr-10">
+					<p class="text-2xl font-bold text-foreground">{config.value}</p>
+					<p class="text-sm font-medium text-foreground">{config.name}</p>
+					<p class="text-xs text-muted-foreground">{config.description}</p>
+				</div>
+			</Card.Content>
+		</Card.Root>
+	{/each}
+</div>
diff --git a/frontend/src/lib/dashboard/homePage/QuickActions.svelte b/frontend/src/lib/dashboard/homePage/QuickActions.svelte
index c4ac078..267e14b 100644
--- a/frontend/src/lib/dashboard/homePage/QuickActions.svelte
+++ b/frontend/src/lib/dashboard/homePage/QuickActions.svelte
@@ -1,58 +1,58 @@
 <script lang="ts">
-    import { LayoutList, Link2, CalendarDays, ImageIcon } from "@lucide/svelte";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
+	import { LayoutList, Link2, CalendarDays, ImageIcon } from "@lucide/svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
 
-    const actions = [
-        {
-            name: "New Calendar",
-            description: "Create calendar view",
-            icon: CalendarDays,
-            href: "/dashboard/calendars?new=1",
-            accent: "text-violet-500",
-        },
-        {
-            name: "New Event List",
-            description: "Create list view",
-            icon: LayoutList,
-            href: "/dashboard/event-lists?new=1",
-            accent: "text-emerald-500",
-        },
-        {
-            name: "New Image Feed",
-            description: "Create carousel",
-            icon: ImageIcon,
-            href: "/dashboard/image-feeds?new=1",
-            accent: "text-amber-500",
-        },
-        {
-            name: "New Dynamic URL",
-            description: "Create smart link",
-            icon: Link2,
-            href: "/dashboard/dynamic-urls?new=1",
-            accent: "text-pink-400",
-        },
-    ];
+	const actions = [
+		{
+			name: "New Calendar",
+			description: "Create calendar view",
+			icon: CalendarDays,
+			href: "/dashboard/calendars?new=1",
+			accent: "text-violet-500"
+		},
+		{
+			name: "New Event List",
+			description: "Create list view",
+			icon: LayoutList,
+			href: "/dashboard/event-lists?new=1",
+			accent: "text-emerald-500"
+		},
+		{
+			name: "New Image Feed",
+			description: "Create carousel",
+			icon: ImageIcon,
+			href: "/dashboard/image-feeds?new=1",
+			accent: "text-amber-500"
+		},
+		{
+			name: "New Dynamic URL",
+			description: "Create smart link",
+			icon: Link2,
+			href: "/dashboard/dynamic-urls?new=1",
+			accent: "text-pink-400"
+		}
+	];
 </script>
 
 <Card.Root class="border-border/50 bg-card">
-    <Card.Header class="pb-3">
-        <Card.Title class="text-base font-semibold text-foreground">Quick Actions</Card.Title>
-        <Card.Description class="text-xs">Create new views</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-2">
-        {#each actions as action (`anAction${action.name}`)}
-            <Button
-                href={action.href}
-                variant="ghost"
-                class="w-full justify-start h-auto py-2.5 px-3 hover:bg-secondary"
-            >
-                <action.icon class={`h-4 w-4 mr-3 ${action.accent}`} />
-                <div class="text-left">
-                    <span class="block text-sm font-medium text-foreground">{action.name}</span>
-                    <span class="block text-xs text-muted-foreground">{action.description}</span>
-                </div>
-            </Button>
-        {/each}
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header class="pb-3">
+		<Card.Title class="text-base font-semibold text-foreground">Quick Actions</Card.Title>
+		<Card.Description class="text-xs">Create new views</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-2">
+		{#each actions as action (`anAction${action.name}`)}
+			<Button
+				href={action.href}
+				variant="ghost"
+				class="w-full justify-start h-auto py-2.5 px-3 hover:bg-secondary"
+			>
+				<action.icon class={`h-4 w-4 mr-3 ${action.accent}`} />
+				<div class="text-left">
+					<span class="block text-sm font-medium text-foreground">{action.name}</span>
+					<span class="block text-xs text-muted-foreground">{action.description}</span>
+				</div>
+			</Button>
+		{/each}
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/homePage/RecentActivity.svelte b/frontend/src/lib/dashboard/homePage/RecentActivity.svelte
index a92b410..4e32476 100644
--- a/frontend/src/lib/dashboard/homePage/RecentActivity.svelte
+++ b/frontend/src/lib/dashboard/homePage/RecentActivity.svelte
@@ -1,96 +1,125 @@
 <script lang="ts">
-    import { timeAgo, type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
-    import NoEventListAvatar from "@/NoEventListAvatar.svelte";
-    import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
-    import DynamicFeedAvatar from "@/DynamicFeedAvatar.svelte";
-    import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
-    import { type CalendarDBModel } from "@/cal.utils";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { ArrowUpRight } from "@lucide/svelte";
+	import {
+		timeAgo,
+		type DynamicURLModel,
+		type EventListDBModel,
+		type ImageFeedDBModel
+	} from "@/utils";
+	import NoEventListAvatar from "@/NoEventListAvatar.svelte";
+	import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
+	import DynamicFeedAvatar from "@/DynamicFeedAvatar.svelte";
+	import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
+	import { type CalendarDBModel } from "@/cal.utils";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { ArrowUpRight } from "@lucide/svelte";
 
-    const {
-        myCalendars,
-        myImageFeeds,
-        myEventLists,
-        myDynamicURLs,
-        pb_url
-    }: {
-        myCalendars: CalendarDBModel[],
-        myImageFeeds: ImageFeedDBModel[],
-        myEventLists: EventListDBModel[],
-        myDynamicURLs: DynamicURLModel[],
-        pb_url: string
-    } = $props();
+	const {
+		myCalendars,
+		myImageFeeds,
+		myEventLists,
+		myDynamicURLs,
+		pb_url
+	}: {
+		myCalendars: CalendarDBModel[];
+		myImageFeeds: ImageFeedDBModel[];
+		myEventLists: EventListDBModel[];
+		myDynamicURLs: DynamicURLModel[];
+		pb_url: string;
+	} = $props();
 
-    type ActivityType = {
-        type: "calendars" | "image-feeds" | "event-lists" | "dynamic-urls"
-    }
+	type ActivityType = {
+		type: "calendars" | "image-feeds" | "event-lists" | "dynamic-urls";
+	};
 
-    const recentActivity = $derived([
-        ...myCalendars.map((cal) => {return {...cal, type: "calendars"}}) as (CalendarDBModel & ActivityType)[],
-        ...myImageFeeds.map((feed) => {return {...feed, type: "image-feeds"}}) as (ImageFeedDBModel & ActivityType)[],
-        ...myEventLists.map((list) => {return {...list, type: "event-lists"}}) as (EventListDBModel & ActivityType)[],
-        ...myDynamicURLs.map((url) => {return {...url, type: "dynamic-urls"}}) as (DynamicURLModel & ActivityType)[]
-    ].sort((a, b) => Date.parse(b.updated) - Date.parse(a.updated)).slice(0, 10));
+	const recentActivity = $derived(
+		[
+			...(myCalendars.map((cal) => {
+				return { ...cal, type: "calendars" };
+			}) as (CalendarDBModel & ActivityType)[]),
+			...(myImageFeeds.map((feed) => {
+				return { ...feed, type: "image-feeds" };
+			}) as (ImageFeedDBModel & ActivityType)[]),
+			...(myEventLists.map((list) => {
+				return { ...list, type: "event-lists" };
+			}) as (EventListDBModel & ActivityType)[]),
+			...(myDynamicURLs.map((url) => {
+				return { ...url, type: "dynamic-urls" };
+			}) as (DynamicURLModel & ActivityType)[])
+		]
+			.sort((a, b) => Date.parse(b.updated) - Date.parse(a.updated))
+			.slice(0, 10)
+	);
 
-    const typeConfig = {
-        calendars: { icon: NoCalendarAvatar, naming: "name", bgColor: "bg-violet-500/10" },
-        "event-lists": { icon: NoEventListAvatar, naming: "name", bgColor: "bg-emerald-500/10" },
-        "image-feeds": { icon: NoImageFeedAvatar, naming: "name", bgColor: "bg-amber-500/10" },
-        "dynamic-urls": { icon: DynamicFeedAvatar, naming: "id", bgColor: "bg-pink-500/10" },
-    }
+	const typeConfig = {
+		calendars: { icon: NoCalendarAvatar, naming: "name", bgColor: "bg-violet-500/10" },
+		"event-lists": { icon: NoEventListAvatar, naming: "name", bgColor: "bg-emerald-500/10" },
+		"image-feeds": { icon: NoImageFeedAvatar, naming: "name", bgColor: "bg-amber-500/10" },
+		"dynamic-urls": { icon: DynamicFeedAvatar, naming: "id", bgColor: "bg-pink-500/10" }
+	};
 </script>
 
 <Card.Root class="border-border/50 bg-card">
-    <Card.Header class="pb-3">
-        <div class="flex items-center justify-between">
-            <div>
-                <Card.Title class="text-base font-semibold text-foreground">Recent Activity</Card.Title>
-                <Card.Description class="text-xs">Latest updates across your views</Card.Description>
-            </div>
-            <!-- <Button variant="ghost" size="sm" class="h-8 text-xs" href="/dashboard/analytics">
+	<Card.Header class="pb-3">
+		<div class="flex items-center justify-between">
+			<div>
+				<Card.Title class="text-base font-semibold text-foreground">Recent Activity</Card.Title>
+				<Card.Description class="text-xs">Latest updates across your views</Card.Description>
+			</div>
+			<!-- <Button variant="ghost" size="sm" class="h-8 text-xs" href="/dashboard/analytics">
                 View All
                 <ArrowUpRight class="h-3 w-3 ml-1" />
             </Button> -->
-        </div>
-    </Card.Header>
-    <Card.Content>
-        <div class="space-y-1">
-            {#each recentActivity as activity (`aRecentActivity${activity.id}`)}
-                {@const config = typeConfig[activity.type]}
-                <div class="flex items-center justify-between py-2.5 border-b border-border/50 last:border-0">
-                    <div class="flex items-center gap-3 min-w-0">
-                        <div class="h-8 w-8 rounded-md {config.bgColor} flex items-center justify-center shrink-0">
-                            {#if activity.logo !== null && activity.logo !== undefined && activity.logo.length > 0}
-                                <img
-                                    src="{pb_url}/api/files/{activity.collectionId}/{activity.id}/{activity.logo}"
-                                    alt="{activity.name} logo"
-                                    class="w-8 h-8 rounded-lg object-cover overflow-hidden"
-                                />
-                            {:else}
-                                <config.icon small />
-                            {/if}
-                        </div>
-                        <div class="min-w-0">
-                            <p class="text-sm font-medium text-foreground truncate">
-                                {#if config.naming === "id"}/go/{/if}{activity[config.naming]}
-                            </p>
-                            <p class="text-xs text-muted-foreground">
-                                {timeAgo(activity.updated)}
-                            </p>
-                        </div>
-                    </div>
-                    <div class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0">
-                        <Button variant="ghost" size="sm" class="h-8 text-xs" href="/dashboard/{activity.type}{config.naming !== "id" ? `/${activity.id}` : `?expanded=${activity.id}`}" title="View Details">
-                            <ArrowUpRight class="h-3 w-3" />
-                        </Button>
-                        <!-- <Eye class="h-3.5 w-3.5" />
+		</div>
+	</Card.Header>
+	<Card.Content>
+		<div class="space-y-1">
+			{#each recentActivity as activity (`aRecentActivity${activity.id}`)}
+				{@const config = typeConfig[activity.type]}
+				<div
+					class="flex items-center justify-between py-2.5 border-b border-border/50 last:border-0"
+				>
+					<div class="flex items-center gap-3 min-w-0">
+						<div
+							class="h-8 w-8 rounded-md {config.bgColor} flex items-center justify-center shrink-0"
+						>
+							{#if activity.logo !== null && activity.logo !== undefined && activity.logo.length > 0}
+								<img
+									src="{pb_url}/api/files/{activity.collectionId}/{activity.id}/{activity.logo}"
+									alt="{activity.name} logo"
+									class="w-8 h-8 rounded-lg object-cover overflow-hidden"
+								/>
+							{:else}
+								<config.icon small />
+							{/if}
+						</div>
+						<div class="min-w-0">
+							<p class="text-sm font-medium text-foreground truncate">
+								{#if config.naming === "id"}/go/{/if}{activity[config.naming]}
+							</p>
+							<p class="text-xs text-muted-foreground">
+								{timeAgo(activity.updated)}
+							</p>
+						</div>
+					</div>
+					<div class="flex items-center gap-1.5 text-sm text-muted-foreground shrink-0">
+						<Button
+							variant="ghost"
+							size="sm"
+							class="h-8 text-xs"
+							href="/dashboard/{activity.type}{config.naming !== 'id'
+								? `/${activity.id}`
+								: `?expanded=${activity.id}`}"
+							title="View Details"
+						>
+							<ArrowUpRight class="h-3 w-3" />
+						</Button>
+						<!-- <Eye class="h-3.5 w-3.5" />
                         <span class="font-medium text-foreground">{activity.visits}</span>
                         <span class="text-xs">{activity.action === "clicked" ? "clicks" : "views"}</span> -->
-                    </div>
-                </div>
-            {/each}
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+					</div>
+				</div>
+			{/each}
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte b/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte
index 3c72b98..abaf1ed 100644
--- a/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte
+++ b/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte
@@ -1,87 +1,104 @@
 <script lang="ts">
-    import { getAllUserEvents } from "../../../routes/(mainWebsite)/dashboard/events.remote";
-    import { Calendar, Clock, MapPin } from "@lucide/svelte";
-    import * as Card from "@/components/ui/card/index";
-    import { Badge } from "@/components/ui/badge";
-    import { Temporal } from "temporal-polyfill";
-    import { dateRangeOverlaps } from "@/utils";
-    import Time from "@/Time.svelte";
+	import { getAllUserEvents } from "../../../routes/(mainWebsite)/dashboard/events.remote";
+	import { Calendar, Clock, MapPin } from "@lucide/svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Badge } from "@/components/ui/badge";
+	import { Temporal } from "temporal-polyfill";
+	import { dateRangeOverlaps } from "@/utils";
+	import Time from "@/Time.svelte";
 
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
-    let nextDay = $derived(today.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
+	let nextDay = $derived(today.add({ hours: 23, minutes: 59, seconds: 59, milliseconds: 1 }));
 
-    let todaysEvents = $derived((await getAllUserEvents()).filter((event) => {
-        return dateRangeOverlaps(today.toInstant().epochMilliseconds, nextDay.toInstant().epochMilliseconds, (new Date(event.startTime)).valueOf(), (new Date(event.endTime)).valueOf())
-    }));
+	let todaysEvents = $derived(
+		(await getAllUserEvents()).filter((event) => {
+			return dateRangeOverlaps(
+				today.toInstant().epochMilliseconds,
+				nextDay.toInstant().epochMilliseconds,
+				new Date(event.startTime).valueOf(),
+				new Date(event.endTime).valueOf()
+			);
+		})
+	);
 </script>
 
 <Card.Root class="border-border/50 bg-card">
-    <Card.Header class="pb-3">
-        <div class="flex items-center justify-between">
-            <div>
-                <Card.Title class="text-base font-semibold text-foreground">{"Today's Events"}</Card.Title>
-                <Card.Description class="text-xs">Fetched from Your Integrations</Card.Description>
-            </div>
-                <Badge variant="secondary" class="text-xs">
-                {todaysEvents.length} event{#if todaysEvents.length !== 1}s{/if}
-            </Badge>
-        </div>
-    </Card.Header>
-    <Card.Content>
-        {#if todaysEvents.length > 0}
-            <div class="space-y-3">
-                {#each todaysEvents as event (`atodayevent${event.id}`)}
-                    <div class="flex items-start gap-4 p-3 rounded-lg bg-secondary/50 hover:bg-secondary transition-colors">
-                        <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
-                            <Calendar class="h-5 w-5 text-primary" />
-                        </div>
-                        <div class="flex-1 min-w-0">
-                            <div class="flex items-start justify-between gap-2">
-                                <div>
-                                    <h4 class="text-sm font-medium text-foreground">{event.name}</h4>
-                                    {#if event.location}
-                                        <p class="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
-                                            <MapPin class="h-3 w-3" />
-                                            {event.location}
-                                        </p>
-                                    {/if}
-                                </div>
-                                {#if event.expand.tags}
-                                    <div class="flex gap-0.5">
-                                        {#each event.expand.tags as tag (`aneventtag${tag.name}`)}
-                                            <Badge
-                                                variant="outline"
-                                                class="text-[10px] shrink-0"
-                                                style="border-color: {tag.color}; color: {tag.color}"
-                                            >
-                                                {tag.name}
-                                            </Badge>
-                                        {/each}
-                                    </div>
-                                {/if}
-                            </div>
-                            <p class="text-xs text-muted-foreground flex items-center gap-1 mt-2">
-                                <Clock class="h-3 w-3" />
-                                <Time date={Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone)} useAMPM /> -
-                                <Time date={Temporal.Instant.from(event.endTime).toZonedDateTimeISO(timeZone)} useAMPM />
-                            </p>
-                        </div>
-                    </div>
-                {/each}
-            </div>
-        {:else}
-            <div class="flex flex-col items-center justify-center py-8 text-center">
-                <div class="h-12 w-12 rounded-full bg-secondary flex items-center justify-center mb-3">
-                    <Calendar class="h-6 w-6 text-muted-foreground" />
-                </div>
+	<Card.Header class="pb-3">
+		<div class="flex items-center justify-between">
+			<div>
+				<Card.Title class="text-base font-semibold text-foreground">{"Today's Events"}</Card.Title>
+				<Card.Description class="text-xs">Fetched from Your Integrations</Card.Description>
+			</div>
+			<Badge variant="secondary" class="text-xs">
+				{todaysEvents.length} event{#if todaysEvents.length !== 1}s{/if}
+			</Badge>
+		</div>
+	</Card.Header>
+	<Card.Content>
+		{#if todaysEvents.length > 0}
+			<div class="space-y-3">
+				{#each todaysEvents as event (`atodayevent${event.id}`)}
+					<div
+						class="flex items-start gap-4 p-3 rounded-lg bg-secondary/50 hover:bg-secondary transition-colors"
+					>
+						<div
+							class="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10"
+						>
+							<Calendar class="h-5 w-5 text-primary" />
+						</div>
+						<div class="flex-1 min-w-0">
+							<div class="flex items-start justify-between gap-2">
+								<div>
+									<h4 class="text-sm font-medium text-foreground">{event.name}</h4>
+									{#if event.location}
+										<p class="text-xs text-muted-foreground flex items-center gap-1 mt-0.5">
+											<MapPin class="h-3 w-3" />
+											{event.location}
+										</p>
+									{/if}
+								</div>
+								{#if event.expand.tags}
+									<div class="flex gap-0.5">
+										{#each event.expand.tags as tag (`aneventtag${tag.name}`)}
+											<Badge
+												variant="outline"
+												class="text-[10px] shrink-0"
+												style="border-color: {tag.color}; color: {tag.color}"
+											>
+												{tag.name}
+											</Badge>
+										{/each}
+									</div>
+								{/if}
+							</div>
+							<p class="text-xs text-muted-foreground flex items-center gap-1 mt-2">
+								<Clock class="h-3 w-3" />
+								<Time
+									date={Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone)}
+									useAMPM
+								/> -
+								<Time
+									date={Temporal.Instant.from(event.endTime).toZonedDateTimeISO(timeZone)}
+									useAMPM
+								/>
+							</p>
+						</div>
+					</div>
+				{/each}
+			</div>
+		{:else}
+			<div class="flex flex-col items-center justify-center py-8 text-center">
+				<div class="h-12 w-12 rounded-full bg-secondary flex items-center justify-center mb-3">
+					<Calendar class="h-6 w-6 text-muted-foreground" />
+				</div>
 
-                <h4 class="text-sm font-medium text-foreground">No Events Today</h4>
+				<h4 class="text-sm font-medium text-foreground">No Events Today</h4>
 
-                <p class="text-xs text-muted-foreground mt-1 max-w-xs">
-                    You haven't created any events for today. Go to your integrations and create an event.
-                </p>
-            </div>
-        {/if}
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+				<p class="text-xs text-muted-foreground mt-1 max-w-xs">
+					You haven't created any events for today. Go to your integrations and create an event.
+				</p>
+			</div>
+		{/if}
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/homePage/ViewItem.svelte b/frontend/src/lib/dashboard/homePage/ViewItem.svelte
index c8c4883..5359978 100644
--- a/frontend/src/lib/dashboard/homePage/ViewItem.svelte
+++ b/frontend/src/lib/dashboard/homePage/ViewItem.svelte
@@ -1,59 +1,57 @@
 <script lang="ts">
-    import { CalendarDays, LayoutList, Image, Eye, Clock } from "@lucide/svelte";
-    import { Temporal } from "temporal-polyfill";
-    import PrettyDate from "@/PrettyDate.svelte";
-    
-    
-    let {
-        id,
-        logo = null,
-        name,
-        visits,
-        updated,
-        type,
-        timeZone
-    }: {
-        id: string;
-        logo?: string | null;
-        name: string;
-        visits: number;
-        updated: string;
-        type: "calendars" | "image-feeds" | "event-lists",
-        timeZone: string
-    } = $props();
+	import { CalendarDays, LayoutList, Image, Eye, Clock } from "@lucide/svelte";
+	import { Temporal } from "temporal-polyfill";
+	import PrettyDate from "@/PrettyDate.svelte";
+
+	let {
+		id,
+		logo = null,
+		name,
+		visits,
+		updated,
+		type,
+		timeZone
+	}: {
+		id: string;
+		logo?: string | null;
+		name: string;
+		visits: number;
+		updated: string;
+		type: "calendars" | "image-feeds" | "event-lists";
+		timeZone: string;
+	} = $props();
 </script>
 
 <div class="flex items-center justify-between py-2.5 border-b border-border/50 last:border-0">
-    <div class="flex items-center gap-3 min-w-0">
-    <div class="h-8 w-8 rounded-md bg-secondary flex items-center justify-center shrink-0">
-        {#if logo !== null && logo !== undefined}
-            <img
-                src={logo}
-                alt="{name} logo"
-                class="w-8 h-8 rounded-lg object-cover overflow-hidden"
-            />
-        {:else}
-            {#if type === "calendars"}
-                <CalendarDays class="h-4 w-4 text-violet-400" />
-            {:else if type === "event-lists"}
-                <LayoutList class="h-4 w-4 text-emerald-400" />
-            {:else if type === "image-feeds"}
-                <Image class="h-4 w-4 text-amber-400" />
-            {/if}
-        {/if}
-    </div>
-    <div class="min-w-0">
-        <a href="/dashboard/{type}/{id}" class="text-sm font-medium text-foreground truncate underline">{name}</a>
-        <div class="flex items-center gap-2 text-xs text-muted-foreground">
-        <span class="flex items-center gap-1">
-            <Eye class="h-3 w-3" />
-            {visits}
-        </span>
-        <span class="flex items-center gap-1">
-            <Clock class="h-3 w-3" />
-            <PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} />
-        </span>
-        </div>
-    </div>
-    </div>
-</div>
\ No newline at end of file
+	<div class="flex items-center gap-3 min-w-0">
+		<div class="h-8 w-8 rounded-md bg-secondary flex items-center justify-center shrink-0">
+			{#if logo !== null && logo !== undefined}
+				<img src={logo} alt="{name} logo" class="w-8 h-8 rounded-lg object-cover overflow-hidden" />
+			{:else}
+				{#if type === "calendars"}
+					<CalendarDays class="h-4 w-4 text-violet-400" />
+				{:else if type === "event-lists"}
+					<LayoutList class="h-4 w-4 text-emerald-400" />
+				{:else if type === "image-feeds"}
+					<Image class="h-4 w-4 text-amber-400" />
+				{/if}
+			{/if}
+		</div>
+		<div class="min-w-0">
+			<a
+				href="/dashboard/{type}/{id}"
+				class="text-sm font-medium text-foreground truncate underline">{name}</a
+			>
+			<div class="flex items-center gap-2 text-xs text-muted-foreground">
+				<span class="flex items-center gap-1">
+					<Eye class="h-3 w-3" />
+					{visits}
+				</span>
+				<span class="flex items-center gap-1">
+					<Clock class="h-3 w-3" />
+					<PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} />
+				</span>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedAdditionalImages.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedAdditionalImages.svelte
index 86955af..95c3a8f 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedAdditionalImages.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedAdditionalImages.svelte
@@ -1,23 +1,34 @@
 <script lang="ts">
-    import { getCustomImagesForIFeed, getMyImageFeeds } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
-    import CustomImages from "@/ifeedslug/CustomImages.svelte";
-    import * as Card from "@/components/ui/card/index";
+	import {
+		getCustomImagesForIFeed,
+		getMyImageFeeds
+	} from "../../../routes/(mainWebsite)/dashboard/backend.remote";
+	import CustomImages from "@/ifeedslug/CustomImages.svelte";
+	import * as Card from "@/components/ui/card/index";
 
-    let {
-        feedId,
-        pb_url
-    }: {
-        feedId: string,
-        pb_url: string
-    } = $props();
+	let {
+		feedId,
+		pb_url
+	}: {
+		feedId: string;
+		pb_url: string;
+	} = $props();
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Additional Images</Card.Title>
-        <Card.Description>Add any extra pics that are not in planning center, but you want in the image feed. (Changes not reflected in Ifeed preview!)</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <CustomImages customImages={await getCustomImagesForIFeed(feedId)} apiServer={pb_url} imageFeeds={await getMyImageFeeds()} currentFeedID={feedId} />
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Additional Images</Card.Title>
+		<Card.Description
+			>Add any extra pics that are not in planning center, but you want in the image feed. (Changes
+			not reflected in Ifeed preview!)</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<CustomImages
+			customImages={await getCustomImagesForIFeed(feedId)}
+			apiServer={pb_url}
+			imageFeeds={await getMyImageFeeds()}
+			currentFeedID={feedId}
+		/>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedAvatar.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedAvatar.svelte
index a62d846..c794df4 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedAvatar.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedAvatar.svelte
@@ -1,107 +1,111 @@
 <script lang="ts">
-    import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
-    import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
-    import { type RemoteFormField } from "@sveltejs/kit";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { Upload, X } from "@lucide/svelte";
-    import { clearFileInput } from "@/utils";
+	import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
+	import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
+	import { type RemoteFormField } from "@sveltejs/kit";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { Upload, X } from "@lucide/svelte";
+	import { clearFileInput } from "@/utils";
 
-    let {
-        changed = $bindable(),
-        avatarLink,
-        uploadNewAvatar = $bindable()
-    }: {
-        changed: boolean,
-        avatarLink: string,
-        uploadNewAvatar: File | null
-    } = $props();
+	let {
+		changed = $bindable(),
+		avatarLink,
+		uploadNewAvatar = $bindable()
+	}: {
+		changed: boolean;
+		avatarLink: string;
+		uploadNewAvatar: File | null;
+	} = $props();
 
-    let avatarLinkBindable = $derived(avatarLink);
+	let avatarLinkBindable = $derived(avatarLink);
 
-    let uploadNewAvatarLink = $derived(uploadNewAvatar ? URL.createObjectURL(uploadNewAvatar) : null);
+	let uploadNewAvatarLink = $derived(uploadNewAvatar ? URL.createObjectURL(uploadNewAvatar) : null);
 
-    function handleRemoveAvatar() {
-        clearFileInput(document.getElementById("imageUploaderImageFeed"));
-        uploadNewAvatar = null;
-        avatarLinkBindable = "";
-    }
+	function handleRemoveAvatar() {
+		clearFileInput(document.getElementById("imageUploaderImageFeed"));
+		uploadNewAvatar = null;
+		avatarLinkBindable = "";
+	}
 
-    function handleAvatarChange(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
-        //@ts-ignore
-        const files = event.target.files as File[];
-        if (files.length === 0) return;
-        if (!files[0]) return;
-        
-        uploadNewAvatar = files[0];
-        avatarLinkBindable = "";
-    }
+	function handleAvatarChange(event: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		//@ts-ignore
+		const files = event.target.files as File[];
+		if (files.length === 0) return;
+		if (!files[0]) return;
 
-    $effect(() => {
-        const avatarLinkChanged = avatarLinkBindable !== avatarLink;
-        const uploadNewAvatarChanged = uploadNewAvatar !== null;
+		uploadNewAvatar = files[0];
+		avatarLinkBindable = "";
+	}
 
-        changed = avatarLinkChanged || uploadNewAvatarChanged;
-    });
+	$effect(() => {
+		const avatarLinkChanged = avatarLinkBindable !== avatarLink;
+		const uploadNewAvatarChanged = uploadNewAvatar !== null;
+
+		changed = avatarLinkChanged || uploadNewAvatarChanged;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Feed Avatar</Card.Title>
-        <Card.Description>Upload an image to represent your image feed</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="flex items-start gap-6">
-            <div class="relative">
-                {#if avatarLinkBindable.length > 0 || uploadNewAvatar}
-                    {#if avatarLinkBindable.length > 0}
-                        <input {...updateImageFeedForm.fields.avatarLink.as("hidden", avatarLinkBindable)} />
-                    {/if}
+	<Card.Header>
+		<Card.Title>Feed Avatar</Card.Title>
+		<Card.Description>Upload an image to represent your image feed</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="flex items-start gap-6">
+			<div class="relative">
+				{#if avatarLinkBindable.length > 0 || uploadNewAvatar}
+					{#if avatarLinkBindable.length > 0}
+						<input {...updateImageFeedForm.fields.avatarLink.as("hidden", avatarLinkBindable)} />
+					{/if}
 
-                    <div class="relative group">
-                        <img
-                            src={uploadNewAvatar !== null ? uploadNewAvatarLink : avatarLink}
-                            alt="IFeed avatar"
-                            class="w-24 h-24 rounded-lg object-cover border-2 border-border"
-                        />
-                        <button
-                            onclick={handleRemoveAvatar}
-                            class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
-                    </div>
-                {:else}
-                    <div class="w-24 h-24">
-                        <NoImageFeedAvatar />
-                    </div>
-                {/if}
-            </div>
-            <div class="flex-1 space-y-3">
-                <div>
-                    <p class="text-sm text-foreground font-medium">Upload a custom avatar</p>
-                    <p class="text-sm text-muted-foreground mt-1">JPG, PNG or GIF. Max size 2MB. Recommended 400x400px.</p>
-                </div>
-                <div class="flex gap-2">
-                    <Button variant="outline" class="relative bg-transparent">
-                        <Upload class="h-4 w-4 mr-2" />
-                        Upload Image
-                        <input
-                            {...(updateImageFeedForm.fields.newAvatar as unknown as RemoteFormField<File>).as("file")}
-                            id="imageUploaderImageFeed"
-                            type="file"
-                            accept="image/*"
-                            onchange={handleAvatarChange}
-                            class="absolute inset-0 opacity-0 cursor-pointer"
-                        />
-                    </Button>
-                    {#if uploadNewAvatar}
-                        <Button variant="outline" onclick={handleRemoveAvatar} class="bg-transparent">
-                            Remove
-                        </Button>
-                    {/if}
-                </div>
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+					<div class="relative group">
+						<img
+							src={uploadNewAvatar !== null ? uploadNewAvatarLink : avatarLink}
+							alt="IFeed avatar"
+							class="w-24 h-24 rounded-lg object-cover border-2 border-border"
+						/>
+						<button
+							onclick={handleRemoveAvatar}
+							class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+						>
+							<X class="h-4 w-4" />
+						</button>
+					</div>
+				{:else}
+					<div class="w-24 h-24">
+						<NoImageFeedAvatar />
+					</div>
+				{/if}
+			</div>
+			<div class="flex-1 space-y-3">
+				<div>
+					<p class="text-sm text-foreground font-medium">Upload a custom avatar</p>
+					<p class="text-sm text-muted-foreground mt-1">
+						JPG, PNG or GIF. Max size 2MB. Recommended 400x400px.
+					</p>
+				</div>
+				<div class="flex gap-2">
+					<Button variant="outline" class="relative bg-transparent">
+						<Upload class="h-4 w-4 mr-2" />
+						Upload Image
+						<input
+							{...(updateImageFeedForm.fields.newAvatar as unknown as RemoteFormField<File>).as(
+								"file"
+							)}
+							id="imageUploaderImageFeed"
+							type="file"
+							accept="image/*"
+							onchange={handleAvatarChange}
+							class="absolute inset-0 opacity-0 cursor-pointer"
+						/>
+					</Button>
+					{#if uploadNewAvatar}
+						<Button variant="outline" onclick={handleRemoveAvatar} class="bg-transparent">
+							Remove
+						</Button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedCopyIframe.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedCopyIframe.svelte
index 5f12e33..750051f 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedCopyIframe.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedCopyIframe.svelte
@@ -1,67 +1,80 @@
 <script lang="ts">
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import { Check, Code, Copy } from "@lucide/svelte";
-    import { cn, generateIframeCode } from "@/utils";
-    import { Label } from "@/components/ui/label";
-    import { toast } from "svelte-sonner";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import { Check, Code, Copy } from "@lucide/svelte";
+	import { cn, generateIframeCode } from "@/utils";
+	import { Label } from "@/components/ui/label";
+	import { toast } from "svelte-sonner";
 
-    let {
-        feedId,
-        feedName,
-        infosectionsLink
-    }: {
-        feedId: string,
-        feedName: string,
-        infosectionsLink: string
-    } = $props();
+	let {
+		feedId,
+		feedName,
+		infosectionsLink
+	}: {
+		feedId: string;
+		feedName: string;
+		infosectionsLink: string;
+	} = $props();
 
-    let iframeCopied = $state(false);
-    let iframeDialogOpen = $state(false);
+	let iframeCopied = $state(false);
+	let iframeDialogOpen = $state(false);
 
-    function copyIframeCode() {
-        const link = generateIframeCode(`${infosectionsLink}/ifeed/${feedId}`, `Infosections Feed | ${feedName}`, feedId, infosectionsLink, true);
-        navigator.clipboard.writeText(link);
-        iframeCopied = true;
-        setTimeout(() => iframeCopied = false, 5000);
+	function copyIframeCode() {
+		const link = generateIframeCode(
+			`${infosectionsLink}/ifeed/${feedId}`,
+			`Infosections Feed | ${feedName}`,
+			feedId,
+			infosectionsLink,
+			true
+		);
+		navigator.clipboard.writeText(link);
+		iframeCopied = true;
+		setTimeout(() => (iframeCopied = false), 5000);
 
-        toast.info("Copied", {
-            description: "Paste it in your html."
-        })
-    }
+		toast.info("Copied", {
+			description: "Paste it in your html."
+		});
+	}
 </script>
 
 <Dialog.Root bind:open={iframeDialogOpen}>
-    <Dialog.Trigger class={cn(buttonVariants({ variant: "outline" }), "w-full gap-2 bg-transparent")}>
-        <Code class="h-4 w-4 mr-2" />
-        Copy Iframe
-    </Dialog.Trigger>
-    <Dialog.Content class="sm:max-w-lg max-h-full overflow-y-auto">
-        <Dialog.Header>
-            <Dialog.Title>Embed Image Feed</Dialog.Title>
-            <Dialog.Description>
-                Customize and copy the iframe code to embed this feed on your website.
-            </Dialog.Description>
-        </Dialog.Header>
+	<Dialog.Trigger class={cn(buttonVariants({ variant: "outline" }), "w-full gap-2 bg-transparent")}>
+		<Code class="h-4 w-4 mr-2" />
+		Copy Iframe
+	</Dialog.Trigger>
+	<Dialog.Content class="sm:max-w-lg max-h-full overflow-y-auto">
+		<Dialog.Header>
+			<Dialog.Title>Embed Image Feed</Dialog.Title>
+			<Dialog.Description>
+				Customize and copy the iframe code to embed this feed on your website.
+			</Dialog.Description>
+		</Dialog.Header>
 
-        <div class="space-y-2">
-            <Label>Generated Code</Label>
-            <div class="relative">
-                <pre class="p-3 rounded-md bg-muted text-xs font-mono overflow-x-auto max-h-80 whitespace-pre-wrap break-all">{generateIframeCode(`${infosectionsLink}/ifeed/${feedId}`, `Infosections Feed | ${feedName}`, feedId, infosectionsLink, true)}</pre>
-            </div>
-        </div>
+		<div class="space-y-2">
+			<Label>Generated Code</Label>
+			<div class="relative">
+				<pre
+					class="p-3 rounded-md bg-muted text-xs font-mono overflow-x-auto max-h-80 whitespace-pre-wrap break-all">{generateIframeCode(
+						`${infosectionsLink}/ifeed/${feedId}`,
+						`Infosections Feed | ${feedName}`,
+						feedId,
+						infosectionsLink,
+						true
+					)}</pre>
+			</div>
+		</div>
 
-        <Dialog.Footer>
-            <Button variant="outline" onclick={() => iframeDialogOpen = false}>Cancel</Button>
-            <Button onclick={copyIframeCode}>
-                {#if iframeCopied}
-                    <Check class="h-4 w-4 mr-2" />
-                    Copied!
-                {:else}
-                    <Copy class="h-4 w-4 mr-2" />
-                    Copy Code
-                {/if}
-            </Button>
-        </Dialog.Footer>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (iframeDialogOpen = false)}>Cancel</Button>
+			<Button onclick={copyIframeCode}>
+				{#if iframeCopied}
+					<Check class="h-4 w-4 mr-2" />
+					Copied!
+				{:else}
+					<Copy class="h-4 w-4 mr-2" />
+					Copy Code
+				{/if}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedDisplaySettings.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedDisplaySettings.svelte
index 5291947..7a512c9 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedDisplaySettings.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedDisplaySettings.svelte
@@ -1,101 +1,137 @@
 <script lang="ts">
-    import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
-    import type { ImageFeedCustomizations } from "@/utils";
-    import * as Card from "@/components/ui/card/index";
-    import { Switch } from "@/components/ui/switch";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
+	import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
+	import type { ImageFeedCustomizations } from "@/utils";
+	import * as Card from "@/components/ui/card/index";
+	import { Switch } from "@/components/ui/switch";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
 
-    let {
-        displaySettings,
-        displaySettingsPreview = $bindable(),
-        changed = $bindable()
-    }: {
-        displaySettings: ImageFeedCustomizations,
-        displaySettingsPreview: ImageFeedCustomizations,
-        changed: boolean
-    } = $props();
+	let {
+		displaySettings,
+		displaySettingsPreview = $bindable(),
+		changed = $bindable()
+	}: {
+		displaySettings: ImageFeedCustomizations;
+		displaySettingsPreview: ImageFeedCustomizations;
+		changed: boolean;
+	} = $props();
 
-    // svelte-ignore state_referenced_locally
-    let displaySettingsBindable = $state(displaySettings);
-    $effect(() => {displaySettingsBindable = displaySettings});
+	// svelte-ignore state_referenced_locally
+	let displaySettingsBindable = $state(displaySettings);
+	$effect(() => {
+		displaySettingsBindable = displaySettings;
+	});
 
-    $effect(() => {
-        changed = JSON.stringify(displaySettingsBindable) !== JSON.stringify(displaySettings);
-    });
+	$effect(() => {
+		changed = JSON.stringify(displaySettingsBindable) !== JSON.stringify(displaySettings);
+	});
 
-    $effect(() => {
-        displaySettingsPreview = displaySettingsBindable;
-    });
+	$effect(() => {
+		displaySettingsPreview = displaySettingsBindable;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Display Settings</Card.Title>
-        <Card.Description>Customize how event information is displayed</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="grid grid-cols-1 gap-6">
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="showEventExtraInfo" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Display Extra Event Information</span>
-                    <span class="text-sm text-muted-foreground">If a description of an event was set, you can choose if you want to display that info.</span>
-                </Label>
-                <input {...updateImageFeedForm.fields.displaySettings.showEventExtraInfo.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showEventExtraInfo} type="checkbox" />
-                <Switch
-                    id="showEventExtraInfo"
-                    bind:checked={displaySettingsBindable.showEventExtraInfo}
-                />
-            </div>
+	<Card.Header>
+		<Card.Title>Display Settings</Card.Title>
+		<Card.Description>Customize how event information is displayed</Card.Description>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid grid-cols-1 gap-6">
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="showEventExtraInfo" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Display Extra Event Information</span>
+					<span class="text-sm text-muted-foreground"
+						>If a description of an event was set, you can choose if you want to display that info.</span
+					>
+				</Label>
+				<input
+					{...updateImageFeedForm.fields.displaySettings.showEventExtraInfo.as("checkbox")}
+					class="sr-only"
+					bind:checked={displaySettingsBindable.showEventExtraInfo}
+					type="checkbox"
+				/>
+				<Switch id="showEventExtraInfo" bind:checked={displaySettingsBindable.showEventExtraInfo} />
+			</div>
 
-            {#if displaySettingsBindable.showEventExtraInfo}
-                <div class="flex items-center justify-between space-x-2 ml-5">
-                    <Label for="showEventName" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Event Name</span>
-                        <span class="text-sm text-muted-foreground">Show the official event name with the image.</span>
-                    </Label>
-                    <input {...updateImageFeedForm.fields.displaySettings.showEventName.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showEventName} type="checkbox" />
-                    <Switch
-                        id="showEventName"
-                        bind:checked={displaySettingsBindable.showEventName}
-                    />
-                </div>
-                <div class="flex items-center justify-between space-x-2 ml-5">
-                    <Label for="showEventDescription" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Event Description</span>
-                        <span class="text-sm text-muted-foreground">Show the official event description IF one was applied for an event.</span>
-                    </Label>
-                    <input {...updateImageFeedForm.fields.displaySettings.showEventDescription.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showEventDescription} type="checkbox" />
-                    <Switch
-                        id="showEventDescription"
-                        bind:checked={displaySettingsBindable.showEventDescription}
-                    />
-                </div>
-                <div class="flex items-center justify-between space-x-2 ml-5">
-                    <Label for="showEventRegistration" class="flex flex-col items-start space-y-1 cursor-pointer">
-                        <span class="font-medium">Register Button</span>
-                        <span class="text-sm text-muted-foreground">If an event has a registration URL set, that link can be shown to the user.</span>
-                    </Label>
-                    <input {...updateImageFeedForm.fields.displaySettings.showEventRegistration.as("checkbox")} class="sr-only" bind:checked={displaySettingsBindable.showEventRegistration} type="checkbox" />
-                    <Switch
-                        id="showEventRegistration"
-                        bind:checked={displaySettingsBindable.showEventRegistration}
-                    />
-                </div>
-            {/if}
+			{#if displaySettingsBindable.showEventExtraInfo}
+				<div class="flex items-center justify-between space-x-2 ml-5">
+					<Label for="showEventName" class="flex flex-col items-start space-y-1 cursor-pointer">
+						<span class="font-medium">Event Name</span>
+						<span class="text-sm text-muted-foreground"
+							>Show the official event name with the image.</span
+						>
+					</Label>
+					<input
+						{...updateImageFeedForm.fields.displaySettings.showEventName.as("checkbox")}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showEventName}
+						type="checkbox"
+					/>
+					<Switch id="showEventName" bind:checked={displaySettingsBindable.showEventName} />
+				</div>
+				<div class="flex items-center justify-between space-x-2 ml-5">
+					<Label
+						for="showEventDescription"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Event Description</span>
+						<span class="text-sm text-muted-foreground"
+							>Show the official event description IF one was applied for an event.</span
+						>
+					</Label>
+					<input
+						{...updateImageFeedForm.fields.displaySettings.showEventDescription.as("checkbox")}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showEventDescription}
+						type="checkbox"
+					/>
+					<Switch
+						id="showEventDescription"
+						bind:checked={displaySettingsBindable.showEventDescription}
+					/>
+				</div>
+				<div class="flex items-center justify-between space-x-2 ml-5">
+					<Label
+						for="showEventRegistration"
+						class="flex flex-col items-start space-y-1 cursor-pointer"
+					>
+						<span class="font-medium">Register Button</span>
+						<span class="text-sm text-muted-foreground"
+							>If an event has a registration URL set, that link can be shown to the user.</span
+						>
+					</Label>
+					<input
+						{...updateImageFeedForm.fields.displaySettings.showEventRegistration.as("checkbox")}
+						class="sr-only"
+						bind:checked={displaySettingsBindable.showEventRegistration}
+						type="checkbox"
+					/>
+					<Switch
+						id="showEventRegistration"
+						bind:checked={displaySettingsBindable.showEventRegistration}
+					/>
+				</div>
+			{/if}
 
-            <div class="space-y-2">
-                <input class="sr-only" {...updateImageFeedForm.fields.displaySettings.feedDurationMS.as("number")} bind:value={displaySettingsBindable.feedDurationMS} />
-                <Label for="feedDurationMS" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Slideshow Duration</span>
-                    <span class="text-sm text-muted-foreground">How long you want to show each slide in milliseconds.</span>
-                </Label>
-                <Input
-                    id="feedDurationMS"
-                    type="number"
-                    bind:value={displaySettingsBindable.feedDurationMS}
-                />
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+			<div class="space-y-2">
+				<input
+					class="sr-only"
+					{...updateImageFeedForm.fields.displaySettings.feedDurationMS.as("number")}
+					bind:value={displaySettingsBindable.feedDurationMS}
+				/>
+				<Label for="feedDurationMS" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Slideshow Duration</span>
+					<span class="text-sm text-muted-foreground"
+						>How long you want to show each slide in milliseconds.</span
+					>
+				</Label>
+				<Input
+					id="feedDurationMS"
+					type="number"
+					bind:value={displaySettingsBindable.feedDurationMS}
+				/>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedFilterSettings.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedFilterSettings.svelte
index a843963..089cb08 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedFilterSettings.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedFilterSettings.svelte
@@ -1,72 +1,90 @@
 <script lang="ts">
-    import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
-    import * as Card from "@/components/ui/card/index";
-    import { Switch } from "@/components/ui/switch";
-    import type { ImageFeedFilters } from "@/utils";
-    import { Label } from "@/components/ui/label";
+	import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
+	import * as Card from "@/components/ui/card/index";
+	import { Switch } from "@/components/ui/switch";
+	import type { ImageFeedFilters } from "@/utils";
+	import { Label } from "@/components/ui/label";
 
-    let {
-        filters,
-        changed = $bindable()
-    }: {
-        filters: ImageFeedFilters,
-        changed: boolean
-    } = $props();
+	let {
+		filters,
+		changed = $bindable()
+	}: {
+		filters: ImageFeedFilters;
+		changed: boolean;
+	} = $props();
 
-    // svelte-ignore state_referenced_locally
-    let filtersBindable = $state(filters);
-    $effect(() => {filtersBindable = filters});
+	// svelte-ignore state_referenced_locally
+	let filtersBindable = $state(filters);
+	$effect(() => {
+		filtersBindable = filters;
+	});
 
-    $effect(() => {
-        changed = JSON.stringify(filtersBindable) !== JSON.stringify(filters);
-    });
+	$effect(() => {
+		changed = JSON.stringify(filtersBindable) !== JSON.stringify(filters);
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Filter Settings</Card.Title>
-        <Card.Description>Choose what kind of events you want to show in the feed (Changes not reflected in Ifeed preview!)</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="grid grid-cols-1 gap-6">
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="onlyShowFeatured" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Only Featured Events</span>
-                    <span class="text-sm text-muted-foreground">Show only the events that are set to featured.</span>
-                </Label>
+	<Card.Header>
+		<Card.Title>Filter Settings</Card.Title>
+		<Card.Description
+			>Choose what kind of events you want to show in the feed (Changes not reflected in Ifeed
+			preview!)</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<div class="grid grid-cols-1 gap-6">
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="onlyShowFeatured" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Only Featured Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Show only the events that are set to featured.</span
+					>
+				</Label>
 
-                <input {...updateImageFeedForm.fields.filters.onlyShowFeatured.as("checkbox")} class="sr-only" bind:checked={filtersBindable.onlyShowFeatured} type="checkbox" />
-                <Switch
-                    id="onlyShowFeatured"
-                    bind:checked={filtersBindable.onlyShowFeatured}
-                />
-            </div>
+				<input
+					{...updateImageFeedForm.fields.filters.onlyShowFeatured.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.onlyShowFeatured}
+					type="checkbox"
+				/>
+				<Switch id="onlyShowFeatured" bind:checked={filtersBindable.onlyShowFeatured} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="hideUnpublished" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Hide Unpublished Events</span>
-                    <span class="text-sm text-muted-foreground">Hide the events that are not visible in the church center.</span>
-                </Label>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="hideUnpublished" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Hide Unpublished Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Hide the events that are not visible in the church center.</span
+					>
+				</Label>
 
-                <input {...updateImageFeedForm.fields.filters.hideUnpublished.as("checkbox")} class="sr-only" bind:checked={filtersBindable.hideUnpublished} type="checkbox" />
-                <Switch
-                    id="hideUnpublished"
-                    bind:checked={filtersBindable.hideUnpublished}
-                />
-            </div>
+				<input
+					{...updateImageFeedForm.fields.filters.hideUnpublished.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.hideUnpublished}
+					type="checkbox"
+				/>
+				<Switch id="hideUnpublished" bind:checked={filtersBindable.hideUnpublished} />
+			</div>
 
-            <div class="flex items-center justify-between space-x-2">
-                <Label for="hideRecurringEvents" class="flex flex-col items-start space-y-1 cursor-pointer">
-                    <span class="font-medium">Hide Recurring Events</span>
-                    <span class="text-sm text-muted-foreground">Hide events that are recurring but show only the first instance of the event in the feed.</span>
-                </Label>
+			<div class="flex items-center justify-between space-x-2">
+				<Label for="hideRecurringEvents" class="flex flex-col items-start space-y-1 cursor-pointer">
+					<span class="font-medium">Hide Recurring Events</span>
+					<span class="text-sm text-muted-foreground"
+						>Hide events that are recurring but show only the first instance of the event in the
+						feed.</span
+					>
+				</Label>
 
-                <input {...updateImageFeedForm.fields.filters.hideRecurringEvents.as("checkbox")} class="sr-only" bind:checked={filtersBindable.hideRecurringEvents} type="checkbox" />
-                <Switch
-                    id="hideRecurringEvents"
-                    bind:checked={filtersBindable.hideRecurringEvents}
-                />
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+				<input
+					{...updateImageFeedForm.fields.filters.hideRecurringEvents.as("checkbox")}
+					class="sr-only"
+					bind:checked={filtersBindable.hideRecurringEvents}
+					type="checkbox"
+				/>
+				<Switch id="hideRecurringEvents" bind:checked={filtersBindable.hideRecurringEvents} />
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedGeneralInfo.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedGeneralInfo.svelte
index f79bd13..13efa1c 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedGeneralInfo.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedGeneralInfo.svelte
@@ -1,75 +1,66 @@
 <script lang="ts">
-    import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
-    import { Textarea } from "@/components/ui/textarea";
-    import * as Card from "@/components/ui/card/index";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
+	import { updateImageFeedForm } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
+	import { Textarea } from "@/components/ui/textarea";
+	import * as Card from "@/components/ui/card/index";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
 
-    let {
-        changed = $bindable(),
-        feedId,
-        feedName,
-        feedDescription
-    }: {
-        changed: boolean,
-        feedId: string,
-        feedName: string,
-        feedDescription: string
-    } = $props();
+	let {
+		changed = $bindable(),
+		feedId,
+		feedName,
+		feedDescription
+	}: {
+		changed: boolean;
+		feedId: string;
+		feedName: string;
+		feedDescription: string;
+	} = $props();
 
-    let feedNameBindable = $derived(feedName);
-    let feedDescriptionBindable = $derived(feedDescription);
+	let feedNameBindable = $derived(feedName);
+	let feedDescriptionBindable = $derived(feedDescription);
 
-    $effect(() => {
-        const feedNameChanged = feedName !== feedNameBindable;
-        const feedDescriptionChanged = feedDescription !== feedDescriptionBindable;
+	$effect(() => {
+		const feedNameChanged = feedName !== feedNameBindable;
+		const feedDescriptionChanged = feedDescription !== feedDescriptionBindable;
 
-        changed = feedNameChanged || feedDescriptionChanged;
-    });
+		changed = feedNameChanged || feedDescriptionChanged;
+	});
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>General Information</Card.Title>
-        <Card.Description>Basic details about your image feed</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-4">
-        <div class="space-y-2">
-            {#if feedId.length > 0}
-                <input {...updateImageFeedForm.fields.id.as("hidden", feedId)} />
-            {/if}
-            <Label for="feed-id">Feed ID</Label>
-            <Input
-                id="feed-id"
-                value={feedId}
-                disabled
-                class="font-mono text-sm"
-            />
-        </div>
+	<Card.Header>
+		<Card.Title>General Information</Card.Title>
+		<Card.Description>Basic details about your image feed</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-4">
+		<div class="space-y-2">
+			{#if feedId.length > 0}
+				<input {...updateImageFeedForm.fields.id.as("hidden", feedId)} />
+			{/if}
+			<Label for="feed-id">Feed ID</Label>
+			<Input id="feed-id" value={feedId} disabled class="font-mono text-sm" />
+		</div>
 
-        <div class="space-y-2">
-            {#if feedNameBindable.length > 0}
-                <input {...updateImageFeedForm.fields.name.as("hidden", feedNameBindable)} />
-            {/if}
-            <Label for="feed-name">Feed Name</Label>
-            <Input
-                id="feed-name"
-                bind:value={feedNameBindable}
-                placeholder="Enter feed name"
-            />
-        </div>
+		<div class="space-y-2">
+			{#if feedNameBindable.length > 0}
+				<input {...updateImageFeedForm.fields.name.as("hidden", feedNameBindable)} />
+			{/if}
+			<Label for="feed-name">Feed Name</Label>
+			<Input id="feed-name" bind:value={feedNameBindable} placeholder="Enter feed name" />
+		</div>
 
-        <div class="space-y-2">
-            {#if feedDescriptionBindable.length > 0}
-                <input {...updateImageFeedForm.fields.description.as("hidden", feedDescriptionBindable)} />
-            {/if}
-            <Label for="feed-description">Description</Label>
-            <Textarea
-                bind:value={feedDescriptionBindable}
-                placeholder="Enter feed description"
-                rows={3}
-                id="feed-description"
-            />
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+		<div class="space-y-2">
+			{#if feedDescriptionBindable.length > 0}
+				<input {...updateImageFeedForm.fields.description.as("hidden", feedDescriptionBindable)} />
+			{/if}
+			<Label for="feed-description">Description</Label>
+			<Textarea
+				bind:value={feedDescriptionBindable}
+				placeholder="Enter feed description"
+				rows={3}
+				id="feed-description"
+			/>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedIncludedCalendars.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedIncludedCalendars.svelte
index fa4dd00..277708a 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedIncludedCalendars.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedIncludedCalendars.svelte
@@ -1,25 +1,34 @@
 <script lang="ts">
-    import { getMyCalendars } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
-    import IncludedCalendars from "@/IncludedCalendars.svelte";
-    import * as Card from "@/components/ui/card/index";
+	import { getMyCalendars } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
+	import IncludedCalendars from "@/IncludedCalendars.svelte";
+	import * as Card from "@/components/ui/card/index";
 
-    let {
-        feedId,
-        pb_url,
-        additionalCalendars
-    }: {
-        feedId: string,
-        pb_url: string,
-        additionalCalendars: string[]
-    } = $props();
+	let {
+		feedId,
+		pb_url,
+		additionalCalendars
+	}: {
+		feedId: string;
+		pb_url: string;
+		additionalCalendars: string[];
+	} = $props();
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Included Calendars</Card.Title>
-        <Card.Description>You can also include 1 or more calendars that you have created in the <span><a class="underline" href="/dashboard/calendars">calendars page!</a></span> (Changes not reflected in Ifeed preview!)</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <IncludedCalendars iFeedId={feedId} pb_url={pb_url} includedCalendars={additionalCalendars} calendars={await getMyCalendars()} />
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Included Calendars</Card.Title>
+		<Card.Description
+			>You can also include 1 or more calendars that you have created in the <span
+				><a class="underline" href="/dashboard/calendars">calendars page!</a></span
+			> (Changes not reflected in Ifeed preview!)</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<IncludedCalendars
+			iFeedId={feedId}
+			{pb_url}
+			includedCalendars={additionalCalendars}
+			calendars={await getMyCalendars()}
+		/>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedPreviewCard.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedPreviewCard.svelte
index 757f562..5485837 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedPreviewCard.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedPreviewCard.svelte
@@ -1,66 +1,76 @@
 <script lang="ts">
-    import type { ImageFeedCustomizations } from "@/utils";
-    import * as Card from "@/components/ui/card/index";
-    import { Switch } from "@/components/ui/switch";
-    import { Label } from "@/components/ui/label";
-    import { browser } from "$app/environment";
+	import type { ImageFeedCustomizations } from "@/utils";
+	import * as Card from "@/components/ui/card/index";
+	import { Switch } from "@/components/ui/switch";
+	import { Label } from "@/components/ui/label";
+	import { browser } from "$app/environment";
 
-    let {
-        displaySettings,
-        feedId
-    }: {
-        displaySettings: ImageFeedCustomizations,
-        feedId: string
-    } = $props();
+	let {
+		displaySettings,
+		feedId
+	}: {
+		displaySettings: ImageFeedCustomizations;
+		feedId: string;
+	} = $props();
 
-    let previewIFrame: HTMLIFrameElement | undefined = $state();
+	let previewIFrame: HTMLIFrameElement | undefined = $state();
 
-    $effect(() => {
-        if (displaySettings && previewIFrame && previewIFrame.contentWindow) {
-            previewIFrame.contentWindow.postMessage({ call: 'displaySettings', value: JSON.stringify(displaySettings) });
-        }
-    });
+	$effect(() => {
+		if (displaySettings && previewIFrame && previewIFrame.contentWindow) {
+			previewIFrame.contentWindow.postMessage({
+				call: "displaySettings",
+				value: JSON.stringify(displaySettings)
+			});
+		}
+	});
 </script>
 
 <svelte:head>
-    {#if browser}
-        <script async src="/resizeObserver.js"></script>
-    {/if}
+	{#if browser}
+		<script async src="/resizeObserver.js"></script>
+	{/if}
 </svelte:head>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Ifeed Preview Grid</Card.Title>
-        <Card.Description>See the current changes in this preview before saving the settings.</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="w-full">
-            <iframe     
-                bind:this={previewIFrame}
-                style="background: none transparent; border: none;display:block;"
-                allowtransparency
-                width="100%"
-                height="100%"
-                src="/ifeedPreview/{feedId}"
-                scrolling="no"
-                title="Image Feed Preview"
-                id="iframe{feedId}"
-                frameborder="0"
-            ></iframe>
-        </div>
-        <div class="flex items-center justify-between space-x-2 mt-5">
-            <Label for="showDebugger" class="flex flex-col items-start space-y-1 cursor-pointer">
-                <span class="font-medium">Debugger</span>
-                <span class="text-sm text-muted-foreground">Show extra information in the ifeed preview.</span>
-            </Label>
-            <Switch
-                id="showDebugger"
-                onCheckedChange={(checked) => {
-                    if (displaySettings && previewIFrame && previewIFrame.contentWindow) {
-                        previewIFrame.contentWindow.postMessage({ call: 'toggleDebug', value: checked ? "1" : "0" });
-                    }
-                }}
-            />
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Ifeed Preview Grid</Card.Title>
+		<Card.Description
+			>See the current changes in this preview before saving the settings.</Card.Description
+		>
+	</Card.Header>
+	<Card.Content>
+		<div class="w-full">
+			<iframe
+				bind:this={previewIFrame}
+				style="background: none transparent; border: none;display:block;"
+				allowtransparency
+				width="100%"
+				height="100%"
+				src="/ifeedPreview/{feedId}"
+				scrolling="no"
+				title="Image Feed Preview"
+				id="iframe{feedId}"
+				frameborder="0"
+			></iframe>
+		</div>
+		<div class="flex items-center justify-between space-x-2 mt-5">
+			<Label for="showDebugger" class="flex flex-col items-start space-y-1 cursor-pointer">
+				<span class="font-medium">Debugger</span>
+				<span class="text-sm text-muted-foreground"
+					>Show extra information in the ifeed preview.</span
+				>
+			</Label>
+			<Switch
+				id="showDebugger"
+				onCheckedChange={(checked) => {
+					if (displaySettings && previewIFrame && previewIFrame.contentWindow) {
+						previewIFrame.contentWindow.postMessage({
+							call: "toggleDebug",
+							value: checked ? "1" : "0"
+						});
+					}
+				}}
+			/>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedQuickActions.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedQuickActions.svelte
index 0fb6c3d..9d67309 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedQuickActions.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedQuickActions.svelte
@@ -1,48 +1,56 @@
 <script lang="ts">
-    import { deleteImageFeedCommand } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import * as Card from "@/components/ui/card/index";
-    import { goto } from "$app/navigation";
-    import { toast } from "svelte-sonner";
-    import { cn } from "@/utils";
+	import { deleteImageFeedCommand } from "../../../routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import * as Card from "@/components/ui/card/index";
+	import { goto } from "$app/navigation";
+	import { toast } from "svelte-sonner";
+	import { cn } from "@/utils";
 
-    let { feedId }: { feedId: string } = $props();
+	let { feedId }: { feedId: string } = $props();
 
-    async function deleteFeed() {
-        let savingChanges = toast.loading("Removing Image Feed.", { duration: Number.POSITIVE_INFINITY });
-        const response = await deleteImageFeedCommand(feedId);
-        toast.dismiss(savingChanges);
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-            goto("/dashboard/image-feeds");
-        }
-    }
+	async function deleteFeed() {
+		let savingChanges = toast.loading("Removing Image Feed.", {
+			duration: Number.POSITIVE_INFINITY
+		});
+		const response = await deleteImageFeedCommand(feedId);
+		toast.dismiss(savingChanges);
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+			goto("/dashboard/image-feeds");
+		}
+	}
 </script>
 
 <Card.Root>
-    <Card.Header>
-    <Card.Title>Quick Actions</Card.Title>
-    </Card.Header>
-    <Card.Content class="space-y-2">
-        <!-- Delete Feed Dialog -->
-        <Dialog.Root>
-            <Dialog.Trigger class={cn(buttonVariants({ variant: "outline" }), "w-full justify-start text-destructive hover:bg-red-500 bg-transparent")}>
-                Delete Feed
-            </Dialog.Trigger>
-            <Dialog.Content>
-                <Dialog.Header>
-                    <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-                    <Dialog.Description>
-                        This action cannot be undone. This will permanently delete this image feed from our servers. All links relying on this feed will not work.
-                    </Dialog.Description>
-                    <Dialog.Footer>
-                        <Button variant="destructive" onclick={deleteFeed}>Confirm Delete</Button>
-                    </Dialog.Footer>
-                </Dialog.Header>
-            </Dialog.Content>
-        </Dialog.Root>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Quick Actions</Card.Title>
+	</Card.Header>
+	<Card.Content class="space-y-2">
+		<!-- Delete Feed Dialog -->
+		<Dialog.Root>
+			<Dialog.Trigger
+				class={cn(
+					buttonVariants({ variant: "outline" }),
+					"w-full justify-start text-destructive hover:bg-red-500 bg-transparent"
+				)}
+			>
+				Delete Feed
+			</Dialog.Trigger>
+			<Dialog.Content>
+				<Dialog.Header>
+					<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
+					<Dialog.Description>
+						This action cannot be undone. This will permanently delete this image feed from our
+						servers. All links relying on this feed will not work.
+					</Dialog.Description>
+					<Dialog.Footer>
+						<Button variant="destructive" onclick={deleteFeed}>Confirm Delete</Button>
+					</Dialog.Footer>
+				</Dialog.Header>
+			</Dialog.Content>
+		</Dialog.Root>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedShare.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedShare.svelte
index 01b2565..19cd4e6 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedShare.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedShare.svelte
@@ -1,42 +1,46 @@
 <script lang="ts">
-    import { Copy, Link2, SquareArrowOutUpRight } from "@lucide/svelte";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { toast } from "svelte-sonner";
-    import IFeedCopyIframe from "./IFeedCopyIframe.svelte";
-    import { page } from "$app/stores";
+	import { Copy, Link2, SquareArrowOutUpRight } from "@lucide/svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { toast } from "svelte-sonner";
+	import IFeedCopyIframe from "./IFeedCopyIframe.svelte";
+	import { page } from "$app/stores";
 
-    let { feedId, feedName }: { feedId: string, feedName: string } = $props();
+	let { feedId, feedName }: { feedId: string; feedName: string } = $props();
 
-    function handleCopyLink() {
-        const link = `${window.location.origin}/ifeed/${feedId}`;
+	function handleCopyLink() {
+		const link = `${window.location.origin}/ifeed/${feedId}`;
 
-        navigator.clipboard.writeText(link);
+		navigator.clipboard.writeText(link);
 
-        toast.info("Copied", {
-            description: link,
-            descriptionClass: "underline"
-        })
-    }
+		toast.info("Copied", {
+			description: link,
+			descriptionClass: "underline"
+		});
+	}
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Link</Card.Title>
-        <Card.Description>Share this feed with others</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-3">
-        <div class="flex justify-between items-center gap-2 p-3 bg-muted rounded-lg">
-            <Link2 class="h-4 w-4 text-muted-foreground shrink-0" />
-            <span class="text-sm font-mono truncate w-full">/ifeed/{feedId}</span>
-            <button onclick={handleCopyLink} class="hover:bg-accent transition-colors duration-300 ease-in-out p-1 rounded" title="Copy Link">
-                <Copy class="h-4 w-4 text-muted-foreground shrink-0" />
-            </button>
-        </div>
-        <IFeedCopyIframe {feedId} {feedName} infosectionsLink={$page.url.origin}/>
-        <Button class="w-full gap-2" href="/ifeed/{feedId}" target="_blank">
-            <SquareArrowOutUpRight class="h-4 w-4" />
-            Goto Page
-        </Button>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Link</Card.Title>
+		<Card.Description>Share this feed with others</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-3">
+		<div class="flex justify-between items-center gap-2 p-3 bg-muted rounded-lg">
+			<Link2 class="h-4 w-4 text-muted-foreground shrink-0" />
+			<span class="text-sm font-mono truncate w-full">/ifeed/{feedId}</span>
+			<button
+				onclick={handleCopyLink}
+				class="hover:bg-accent transition-colors duration-300 ease-in-out p-1 rounded"
+				title="Copy Link"
+			>
+				<Copy class="h-4 w-4 text-muted-foreground shrink-0" />
+			</button>
+		</div>
+		<IFeedCopyIframe {feedId} {feedName} infosectionsLink={$page.url.origin} />
+		<Button class="w-full gap-2" href="/ifeed/{feedId}" target="_blank">
+			<SquareArrowOutUpRight class="h-4 w-4" />
+			Goto Page
+		</Button>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/imageFeed/IFeedStatistics.svelte b/frontend/src/lib/dashboard/imageFeed/IFeedStatistics.svelte
index ed5f429..dd2c979 100644
--- a/frontend/src/lib/dashboard/imageFeed/IFeedStatistics.svelte
+++ b/frontend/src/lib/dashboard/imageFeed/IFeedStatistics.svelte
@@ -1,40 +1,44 @@
 <script lang="ts">
-    import * as Card from "@/components/ui/card/index";
-    import { Temporal } from "temporal-polyfill";
-    import PrettyDate from "@/PrettyDate.svelte";
+	import * as Card from "@/components/ui/card/index";
+	import { Temporal } from "temporal-polyfill";
+	import PrettyDate from "@/PrettyDate.svelte";
 
-    let {
-        visits,
-        created,
-        updated,
-        timeZone
-    }: {
-        visits: number,
-        created: string,
-        updated: string,
-        timeZone: string
-    } = $props();
+	let {
+		visits,
+		created,
+		updated,
+		timeZone
+	}: {
+		visits: number;
+		created: string;
+		updated: string;
+		timeZone: string;
+	} = $props();
 </script>
 
 <Card.Root>
-    <Card.Header>
-        <Card.Title>Statistics</Card.Title>
-        <Card.Description>Image Feed performance</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-4">
-        <div class="space-y-2">
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Visits</span>
-                <span class="font-semibold text-foreground">{visits}</span>
-            </div>
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Created</span>
-                <span class="font-semibold text-foreground"><PrettyDate date={Temporal.Instant.from(created).toZonedDateTimeISO(timeZone)} /></span>
-            </div>
-            <div class="flex items-center justify-between text-sm">
-                <span class="text-muted-foreground">Updated</span>
-                <span class="font-semibold text-foreground"><PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} /></span>
-            </div>
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
+	<Card.Header>
+		<Card.Title>Statistics</Card.Title>
+		<Card.Description>Image Feed performance</Card.Description>
+	</Card.Header>
+	<Card.Content class="space-y-4">
+		<div class="space-y-2">
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Visits</span>
+				<span class="font-semibold text-foreground">{visits}</span>
+			</div>
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Created</span>
+				<span class="font-semibold text-foreground"
+					><PrettyDate date={Temporal.Instant.from(created).toZonedDateTimeISO(timeZone)} /></span
+				>
+			</div>
+			<div class="flex items-center justify-between text-sm">
+				<span class="text-muted-foreground">Updated</span>
+				<span class="font-semibold text-foreground"
+					><PrettyDate date={Temporal.Instant.from(updated).toZonedDateTimeISO(timeZone)} /></span
+				>
+			</div>
+		</div>
+	</Card.Content>
+</Card.Root>
diff --git a/frontend/src/lib/dashboard/integrations/AddIntegrationDialog.svelte b/frontend/src/lib/dashboard/integrations/AddIntegrationDialog.svelte
index f6b6355..9bf9ea8 100644
--- a/frontend/src/lib/dashboard/integrations/AddIntegrationDialog.svelte
+++ b/frontend/src/lib/dashboard/integrations/AddIntegrationDialog.svelte
@@ -1,61 +1,68 @@
 <script lang="ts">
-    import { addAnIntegration } from "../../../routes/(mainWebsite)/dashboard/integrations.remote";
-    import { getMyIntegrations } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import IntegrationIcon from "./IntegrationIcon.svelte";
-    import { availableIntegrations, cn } from "@/utils";
-    import { Badge } from "@/components/ui/badge";
-    import { toast } from "svelte-sonner";
+	import { addAnIntegration } from "../../../routes/(mainWebsite)/dashboard/integrations.remote";
+	import { getMyIntegrations } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import IntegrationIcon from "./IntegrationIcon.svelte";
+	import { availableIntegrations, cn } from "@/utils";
+	import { Badge } from "@/components/ui/badge";
+	import { toast } from "svelte-sonner";
 
-    let { open = $bindable() }: { open: boolean } = $props();
+	let { open = $bindable() }: { open: boolean } = $props();
 </script>
 
-<Dialog.Root bind:open={open}>
-    <Dialog.Content class="sm:max-w-md">
-    <Dialog.Header>
-        <Dialog.Title>Add Integration</Dialog.Title>
-        <Dialog.Description>Connect a new service to sync events automatically.</Dialog.Description>
-    </Dialog.Header>
+<Dialog.Root bind:open>
+	<Dialog.Content class="sm:max-w-md">
+		<Dialog.Header>
+			<Dialog.Title>Add Integration</Dialog.Title>
+			<Dialog.Description>Connect a new service to sync events automatically.</Dialog.Description>
+		</Dialog.Header>
 
-    <div class="grid gap-3 py-4">
-        {#each availableIntegrations as integration (`anavailableintegration${integration.id}`)}
-            {@const isConnected = (await getMyIntegrations()).filter((int) => int.service === integration.id).length > 0}
-            <form {...addAnIntegration.for(`anavailableintegration${integration.id}`).enhance(async ({ submit }) => {
-                let loading = toast.loading("Adding Integration", { duration: Number.POSITIVE_INFINITY });
-                await submit();
-                toast.dismiss(loading);
-            })}>
-                <input {...addAnIntegration.fields.provider.as("hidden", integration.id)} />
-                <button
-                    disabled={isConnected || integration.comingSoon}
-                    onclick={() => {
-                        open = false;
-                    }}
-                    type="submit"
-                    class={cn(
-                        "flex items-start gap-3 rounded-lg border p-3 text-left transition-colors",
-                        isConnected || integration.comingSoon
-                        ? "opacity-50 cursor-not-allowed bg-muted/50"
-                        : "hover:bg-accent hover:border-accent-foreground/20 cursor-pointer"
-                    )}
-                >
-                    <IntegrationIcon icon={integration.icon} class="h-10 w-10 shrink-0" />
-                    <div class="flex-1 min-w-0">
-                        <div class="flex items-center gap-2">
-                            <span class="font-medium text-sm">{integration.name}</span>
-                            {#if isConnected}
-                                <Badge variant="secondary" class="text-[10px]">Connected</Badge>
-                            {:else if integration.comingSoon}
-                                <Badge variant="secondary" class="text-[10px]">Coming Soon</Badge>
-                            {/if}
-                        </div>
-                        <p class="text-xs text-muted-foreground mt-0.5 line-clamp-2">
-                            {integration.description}
-                        </p>
-                    </div>
-                </button>
-            </form>
-        {/each}
-    </div>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+		<div class="grid gap-3 py-4">
+			{#each availableIntegrations as integration (`anavailableintegration${integration.id}`)}
+				{@const isConnected =
+					(await getMyIntegrations()).filter((int) => int.service === integration.id).length > 0}
+				<form
+					{...addAnIntegration
+						.for(`anavailableintegration${integration.id}`)
+						.enhance(async ({ submit }) => {
+							let loading = toast.loading("Adding Integration", {
+								duration: Number.POSITIVE_INFINITY
+							});
+							await submit();
+							toast.dismiss(loading);
+						})}
+				>
+					<input {...addAnIntegration.fields.provider.as("hidden", integration.id)} />
+					<button
+						disabled={isConnected || integration.comingSoon}
+						onclick={() => {
+							open = false;
+						}}
+						type="submit"
+						class={cn(
+							"flex items-start gap-3 rounded-lg border p-3 text-left transition-colors",
+							isConnected || integration.comingSoon
+								? "opacity-50 cursor-not-allowed bg-muted/50"
+								: "hover:bg-accent hover:border-accent-foreground/20 cursor-pointer"
+						)}
+					>
+						<IntegrationIcon icon={integration.icon} class="h-10 w-10 shrink-0" />
+						<div class="flex-1 min-w-0">
+							<div class="flex items-center gap-2">
+								<span class="font-medium text-sm">{integration.name}</span>
+								{#if isConnected}
+									<Badge variant="secondary" class="text-[10px]">Connected</Badge>
+								{:else if integration.comingSoon}
+									<Badge variant="secondary" class="text-[10px]">Coming Soon</Badge>
+								{/if}
+							</div>
+							<p class="text-xs text-muted-foreground mt-0.5 line-clamp-2">
+								{integration.description}
+							</p>
+						</div>
+					</button>
+				</form>
+			{/each}
+		</div>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/dashboard/integrations/BreezeIcon.svelte b/frontend/src/lib/dashboard/integrations/BreezeIcon.svelte
index e488c3f..04ec597 100644
--- a/frontend/src/lib/dashboard/integrations/BreezeIcon.svelte
+++ b/frontend/src/lib/dashboard/integrations/BreezeIcon.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import icon from "$lib/assets/breeze.png";
+	import icon from "$lib/assets/breeze.png";
 </script>
 
-<img src={icon} alt="Breeze Icon" class="w-4 h-4">
\ No newline at end of file
+<img src={icon} alt="Breeze Icon" class="w-4 h-4" />
diff --git a/frontend/src/lib/dashboard/integrations/IntegrationIcon.svelte b/frontend/src/lib/dashboard/integrations/IntegrationIcon.svelte
index 9650a22..a36eb31 100644
--- a/frontend/src/lib/dashboard/integrations/IntegrationIcon.svelte
+++ b/frontend/src/lib/dashboard/integrations/IntegrationIcon.svelte
@@ -1,40 +1,48 @@
 <script lang="ts">
-    import { cn, type IntegrationModel } from "@/utils";
-    import { Flag } from "@lucide/svelte";
-    import type { ClassValue } from "svelte/elements";
+	import { cn, type IntegrationModel } from "@/utils";
+	import { Flag } from "@lucide/svelte";
+	import type { ClassValue } from "svelte/elements";
 
-    let { class: className = "", icon }: { icon: IntegrationModel["service"], class?: ClassValue } = $props();
+	let { class: className = "", icon }: { icon: IntegrationModel["service"]; class?: ClassValue } =
+		$props();
 
-    const iconColors: Record<string, string> = {
-        planningcenter: "bg-blue-500",
-        breeze: "bg-teal-500",
-        google: "bg-red-500",
-        twitter: "bg-black",
-    }
+	const iconColors: Record<string, string> = {
+		planningcenter: "bg-blue-500",
+		breeze: "bg-teal-500",
+		google: "bg-red-500",
+		twitter: "bg-black"
+	};
 
-    const iconLetters: Record<string, string> = {
-        planningcenter: "PC",
-        breeze: "B",
-        google: "G",
-        twitter: "O",
-    }
+	const iconLetters: Record<string, string> = {
+		planningcenter: "PC",
+		breeze: "B",
+		google: "G",
+		twitter: "O"
+	};
 </script>
 
 <div
-    class={cn(
-    "flex items-center justify-center rounded-md text-white font-semibold text-xs",
-    iconColors[icon] || "bg-muted",
-    className
-    )}
+	class={cn(
+		"flex items-center justify-center rounded-md text-white font-semibold text-xs",
+		iconColors[icon] || "bg-muted",
+		className
+	)}
 >
-    {#if icon === "planningcenter"}
-        <Flag class="w-4 h-4" />
-    {:else if icon === "twitter"}
-        <svg role="img" viewBox="0 0 24 24" class="w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg">
-            <title>X</title>
-            <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/>
-        </svg>
-    {:else}
-        {iconLetters[icon] || "?"}
-    {/if}
-</div>
\ No newline at end of file
+	{#if icon === "planningcenter"}
+		<Flag class="w-4 h-4" />
+	{:else if icon === "twitter"}
+		<svg
+			role="img"
+			viewBox="0 0 24 24"
+			class="w-4 h-4 fill-white"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<title>X</title>
+			<path
+				d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"
+			/>
+		</svg>
+	{:else}
+		{iconLetters[icon] || "?"}
+	{/if}
+</div>
diff --git a/frontend/src/lib/dashboard/integrations/IntegrationInfoDialog.svelte b/frontend/src/lib/dashboard/integrations/IntegrationInfoDialog.svelte
index 60c5ffe..a498b41 100644
--- a/frontend/src/lib/dashboard/integrations/IntegrationInfoDialog.svelte
+++ b/frontend/src/lib/dashboard/integrations/IntegrationInfoDialog.svelte
@@ -1,91 +1,100 @@
 <script lang="ts">
-    import { removeAnIntegration } from "../../../routes/(mainWebsite)/dashboard/integrations.remote";
-    import { getMyIntegrations } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
-    import { refreshingEvents, timeWhen, type IntegrationModel } from "@/utils";
-    import * as Dialog from "$lib/components/ui/dialog/index.js";
-    import { Loader2, RefreshCw, Trash2 } from "@lucide/svelte";
-    import IntegrationIcon from "./IntegrationIcon.svelte";
-    import { Button } from "@/components/ui/button";
-    import StatusBadge from "./StatusBadge.svelte";
-    import { toast } from "svelte-sonner";
+	import { removeAnIntegration } from "../../../routes/(mainWebsite)/dashboard/integrations.remote";
+	import { getMyIntegrations } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
+	import { refreshingEvents, timeWhen, type IntegrationModel } from "@/utils";
+	import * as Dialog from "$lib/components/ui/dialog/index.js";
+	import { Loader2, RefreshCw, Trash2 } from "@lucide/svelte";
+	import IntegrationIcon from "./IntegrationIcon.svelte";
+	import { Button } from "@/components/ui/button";
+	import StatusBadge from "./StatusBadge.svelte";
+	import { toast } from "svelte-sonner";
 
-    let { integration = $bindable() }: { integration: IntegrationModel | null } = $props();
+	let { integration = $bindable() }: { integration: IntegrationModel | null } = $props();
 
-    async function handleSync() {
-        if (integration?.service === "planningcenter") {
-            await refreshingEvents();
-            const myIntegrations = (await getMyIntegrations()).filter((int) => int.service === "planningcenter")
-            integration = myIntegrations.length > 0 ? myIntegrations[0] ? myIntegrations[0] : null : null;
-        }
-    }
+	async function handleSync() {
+		if (integration?.service === "planningcenter") {
+			await refreshingEvents();
+			const myIntegrations = (await getMyIntegrations()).filter(
+				(int) => int.service === "planningcenter"
+			);
+			integration =
+				myIntegrations.length > 0 ? (myIntegrations[0] ? myIntegrations[0] : null) : null;
+		}
+	}
 
-    let syncing = $state(false);
+	let syncing = $state(false);
 </script>
 
-<Dialog.Root open={integration !== null} onOpenChange={(open) => {
-    if (!open) integration = null;
-}}>
-    {#if integration}
-        <Dialog.Content class="sm:max-w-md">
-            <Dialog.Header>
-                <div class="flex items-center gap-3">
-                    <IntegrationIcon icon={integration.service} class="h-10 w-10" />
-                    <div>
-                        <Dialog.Title>{integration.prettyName}</Dialog.Title>
-                        <Dialog.Description class="mt-0.5">Manage your {integration.prettyName} integration</Dialog.Description>
-                    </div>
-                </div>
-            </Dialog.Header>
+<Dialog.Root
+	open={integration !== null}
+	onOpenChange={(open) => {
+		if (!open) integration = null;
+	}}
+>
+	{#if integration}
+		<Dialog.Content class="sm:max-w-md">
+			<Dialog.Header>
+				<div class="flex items-center gap-3">
+					<IntegrationIcon icon={integration.service} class="h-10 w-10" />
+					<div>
+						<Dialog.Title>{integration.prettyName}</Dialog.Title>
+						<Dialog.Description class="mt-0.5"
+							>Manage your {integration.prettyName} integration</Dialog.Description
+						>
+					</div>
+				</div>
+			</Dialog.Header>
 
-            <div class="space-y-4 py-4">
-                <div class="flex items-center justify-between">
-                    <span class="text-sm text-muted-foreground">Status</span>
-                    <StatusBadge status={integration.status} />
-                </div>
+			<div class="space-y-4 py-4">
+				<div class="flex items-center justify-between">
+					<span class="text-sm text-muted-foreground">Status</span>
+					<StatusBadge status={integration.status} />
+				</div>
 
-                {#if integration.service === "planningcenter"}
-                    <div class="flex items-center justify-between">
-                        <span class="text-sm text-muted-foreground">Next sync event</span>
-                        <span class="text-sm">{timeWhen((new Date(integration.lastEventsFetch)).setHours((new Date(integration.lastEventsFetch)).getHours() + 1))}</span>
-                    </div>
-                {/if}
-            </div>
+				{#if integration.service === "planningcenter"}
+					<div class="flex items-center justify-between">
+						<span class="text-sm text-muted-foreground">Next sync event</span>
+						<span class="text-sm"
+							>{timeWhen(
+								new Date(integration.lastEventsFetch).setHours(
+									new Date(integration.lastEventsFetch).getHours() + 1
+								)
+							)}</span
+						>
+					</div>
+				{/if}
+			</div>
 
-            <Dialog.Footer class="flex-col gap-2 sm:flex-col">
-                {#if integration.service === "planningcenter"}
-                    <div class="flex gap-2 w-full">
-                        <Button
-                            variant="outline"
-                            class="flex-1"
-                            onclick={handleSync}
-                            disabled={syncing}
-                        >
-                            {#if syncing}
-                                <Loader2 class="mr-2 h-4 w-4 animate-spin" />
-                            {:else}
-                                <RefreshCw class="mr-2 h-4 w-4" />
-                            {/if}
-                            Sync Now
-                        </Button>
-                    </div>
-                {/if}
-                <form {...removeAnIntegration.enhance(async ({ submit }) => {
-                    let loading = toast.loading("Removing Integration.", { duration: Number.POSITIVE_INFINITY });
-                    await submit();
-                    integration = null;
-                    toast.dismiss(loading);
-                })}>
-                    <input {...removeAnIntegration.fields.id.as("hidden", integration.id)} />
-                    <Button
-                        variant="destructive"
-                        class="w-full"
-                        type="submit"
-                    >
-                        <Trash2 class="mr-2 h-4 w-4" />
-                        Remove Integration
-                    </Button>
-                </form>
-            </Dialog.Footer>
-        </Dialog.Content>
-    {/if}
-</Dialog.Root>
\ No newline at end of file
+			<Dialog.Footer class="flex-col gap-2 sm:flex-col">
+				{#if integration.service === "planningcenter"}
+					<div class="flex gap-2 w-full">
+						<Button variant="outline" class="flex-1" onclick={handleSync} disabled={syncing}>
+							{#if syncing}
+								<Loader2 class="mr-2 h-4 w-4 animate-spin" />
+							{:else}
+								<RefreshCw class="mr-2 h-4 w-4" />
+							{/if}
+							Sync Now
+						</Button>
+					</div>
+				{/if}
+				<form
+					{...removeAnIntegration.enhance(async ({ submit }) => {
+						let loading = toast.loading("Removing Integration.", {
+							duration: Number.POSITIVE_INFINITY
+						});
+						await submit();
+						integration = null;
+						toast.dismiss(loading);
+					})}
+				>
+					<input {...removeAnIntegration.fields.id.as("hidden", integration.id)} />
+					<Button variant="destructive" class="w-full" type="submit">
+						<Trash2 class="mr-2 h-4 w-4" />
+						Remove Integration
+					</Button>
+				</form>
+			</Dialog.Footer>
+		</Dialog.Content>
+	{/if}
+</Dialog.Root>
diff --git a/frontend/src/lib/dashboard/integrations/StatusBadge.svelte b/frontend/src/lib/dashboard/integrations/StatusBadge.svelte
index e9b325e..f0f2a18 100644
--- a/frontend/src/lib/dashboard/integrations/StatusBadge.svelte
+++ b/frontend/src/lib/dashboard/integrations/StatusBadge.svelte
@@ -1,30 +1,52 @@
 <script lang="ts">
-    import { Badge } from "@/components/ui/badge";
-    import { cn, type IntegrationModel } from "@/utils";
-    import { AlertCircle, CheckCircle2, Cloud, Loader2, type IconProps } from "@lucide/svelte";
-    import type { Component } from "svelte";
-    import type { ClassValue } from "svelte/elements";
+	import { Badge } from "@/components/ui/badge";
+	import { cn, type IntegrationModel } from "@/utils";
+	import { AlertCircle, CheckCircle2, Cloud, Loader2, type IconProps } from "@lucide/svelte";
+	import type { Component } from "svelte";
+	import type { ClassValue } from "svelte/elements";
 
-    let { status }: { status: IntegrationModel["status"] } = $props();
+	let { status }: { status: IntegrationModel["status"] } = $props();
 
-    const statusConfig: {[key: string]: {
-        label: string,
-        variant: "default" | "secondary" | "destructive" | "outline",
-        icon: Component<IconProps, {}, "">,
-        className: ClassValue
-    }} = {
-        connected: { label: "Synced", variant: "default" as const, icon: CheckCircle2, className: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20" },
-        syncing: { label: "Syncing", variant: "secondary" as const, icon: Loader2, className: "bg-blue-500/10 text-blue-500 border-blue-500/20" },
-        error: { label: "Error", variant: "destructive" as const, icon: AlertCircle, className: "bg-red-500/10 text-red-500 border-red-500/20" },
-        disconnected: { label: "Disconnected", variant: "outline" as const, icon: Cloud, className: "bg-muted text-muted-foreground" },
-    }
+	const statusConfig: {
+		[key: string]: {
+			label: string;
+			variant: "default" | "secondary" | "destructive" | "outline";
+			icon: Component<IconProps, {}, "">;
+			className: ClassValue;
+		};
+	} = {
+		connected: {
+			label: "Synced",
+			variant: "default" as const,
+			icon: CheckCircle2,
+			className: "bg-emerald-500/10 text-emerald-500 border-emerald-500/20"
+		},
+		syncing: {
+			label: "Syncing",
+			variant: "secondary" as const,
+			icon: Loader2,
+			className: "bg-blue-500/10 text-blue-500 border-blue-500/20"
+		},
+		error: {
+			label: "Error",
+			variant: "destructive" as const,
+			icon: AlertCircle,
+			className: "bg-red-500/10 text-red-500 border-red-500/20"
+		},
+		disconnected: {
+			label: "Disconnected",
+			variant: "outline" as const,
+			icon: Cloud,
+			className: "bg-muted text-muted-foreground"
+		}
+	};
 
-    let config = $derived(statusConfig[status]);
+	let config = $derived(statusConfig[status]);
 </script>
 
 {#if config}
-    <Badge variant={config.variant} class={cn("text-[10px] px-1.5 py-0 h-5 gap-1", config.className)}>
-        <config.icon class={cn("h-3 w-3", status === "syncing" && "animate-spin")} />
-        {config.label}
-    </Badge>
-{/if}
\ No newline at end of file
+	<Badge variant={config.variant} class={cn("text-[10px] px-1.5 py-0 h-5 gap-1", config.className)}>
+		<config.icon class={cn("h-3 w-3", status === "syncing" && "animate-spin")} />
+		{config.label}
+	</Badge>
+{/if}
diff --git a/frontend/src/lib/dashboard/integrations/XIcon.svelte b/frontend/src/lib/dashboard/integrations/XIcon.svelte
index 5fa95fd..fb38d78 100644
--- a/frontend/src/lib/dashboard/integrations/XIcon.svelte
+++ b/frontend/src/lib/dashboard/integrations/XIcon.svelte
@@ -1,4 +1,6 @@
 <svg role="img" viewBox="0 0 24 24" class="w-4 h-4 p-0.5" xmlns="http://www.w3.org/2000/svg">
-    <title>X</title>
-    <path d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"/>
-</svg>
\ No newline at end of file
+	<title>X</title>
+	<path
+		d="M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z"
+	/>
+</svg>
diff --git a/frontend/src/lib/event.utils.ts b/frontend/src/lib/event.utils.ts
index 0f643b5..097c738 100644
--- a/frontend/src/lib/event.utils.ts
+++ b/frontend/src/lib/event.utils.ts
@@ -2,156 +2,161 @@ import type { RecordModel } from "pocketbase";
 import type { CalendarFilters } from "./cal.utils";
 
 export type EventTimesType = {
-	name: string,
-	startTime: string,
-	endTime: string
-}
+	name: string;
+	startTime: string;
+	endTime: string;
+};
 
 export interface EventResourcesDBModel extends RecordModel {
-	resource_id: string
-	kind: "Room" | "Resource",
-	name: string,
-	path_name: string,
-	description: string,
-	quantity: number
+	resource_id: string;
+	kind: "Room" | "Resource";
+	name: string;
+	path_name: string;
+	description: string;
+	quantity: number;
 }
 
 export interface EventResourcesDBModelPrivate extends EventResourcesDBModel {
-	id: string,
-	owner: string
+	id: string;
+	owner: string;
 }
 
 export interface EventTagsDBModel extends RecordModel {
-	tag_id: string,
-	color: string,
-	name: string
+	tag_id: string;
+	color: string;
+	name: string;
 }
 
 export interface EventTagsDBModelPrivate extends EventTagsDBModel {
-	id: string,
-	owner: string
+	id: string;
+	owner: string;
 }
 
 export interface EventDBModel extends RecordModel {
-	recEventId: string,
-	name: string,
-	description: string,
-	imageURL: string,
-	registrationURL: string,
-	location: string,
-	times: EventTimesType[] | null,
-	startTime: string,
-	endTime: string,
-	featured: boolean,
-	visibleInChurchCenter: boolean
-	recurrence: string,
-	service: "planningcenter",
-	resources: string[] | null
-	tags: string[] | null,
+	recEventId: string;
+	name: string;
+	description: string;
+	imageURL: string;
+	registrationURL: string;
+	location: string;
+	times: EventTimesType[] | null;
+	startTime: string;
+	endTime: string;
+	featured: boolean;
+	visibleInChurchCenter: boolean;
+	recurrence: string;
+	service: "planningcenter";
+	resources: string[] | null;
+	tags: string[] | null;
 }
 
 export interface EventDBModelExpanded extends EventDBModel {
 	expand: {
-		tags: EventTagsDBModel[] | null,
-		resources: EventResourcesDBModel[] | null
-	}
+		tags: EventTagsDBModel[] | null;
+		resources: EventResourcesDBModel[] | null;
+	};
 }
 
 export interface EventDBModelPrivate extends EventDBModel {
-	owner: string
+	owner: string;
 }
 
 export interface EventDBModelPrivateExpanded extends EventDBModelPrivate {
 	expand: {
-		tags: EventTagsDBModelPrivate[] | null,
-		resources: EventResourcesDBModelPrivate[] | null
-	}
+		tags: EventTagsDBModelPrivate[] | null;
+		resources: EventResourcesDBModelPrivate[] | null;
+	};
 }
 
-export const eventFieldRequirementsPublic = "id,recEventId,name,description,imageURL,registrationURL,location,times,startTime,endTime,featured,visibleInChurchCenter,created,updated,resources,tags";
+export const eventFieldRequirementsPublic =
+	"id,recEventId,name,description,imageURL,registrationURL,location,times,startTime,endTime,featured,visibleInChurchCenter,created,updated,resources,tags";
 export const tagsExpandRequirementsPublic = "expand.tags.tag_id,expand.tags.name,expand.tags.color";
-export const resourcesExpandRequirementsPublic = "expand.resources.resource_id,expand.resources.kind,expand.resources.name,expand.resources.path_name,expand.resources.description,expand.resources.quantity";
+export const resourcesExpandRequirementsPublic =
+	"expand.resources.resource_id,expand.resources.kind,expand.resources.name,expand.resources.path_name,expand.resources.description,expand.resources.quantity";
 
 export function eventResourceAllowListToFilterString(allowedResources: string[]) {
 	let filterString = "";
-	for (let i=0;i<allowedResources.length;i++) {
-		filterString += ` && resources ~ "${allowedResources[i]}"`
+	for (let i = 0; i < allowedResources.length; i++) {
+		filterString += ` && resources ~ "${allowedResources[i]}"`;
 	}
 	return filterString;
 }
 
 export function eventResourceBlockListToFilterString(blockedResources: string[]) {
 	let filterString = "";
-	for (let i=0;i<blockedResources.length;i++) {
-		filterString += ` && resources !~ "${blockedResources[i]}"`
+	for (let i = 0; i < blockedResources.length; i++) {
+		filterString += ` && resources !~ "${blockedResources[i]}"`;
 	}
 	return filterString;
 }
 
 export function eventTagAllowListToFilterString(allowedTags: string[]) {
 	let filterString = "";
-	for (let i=0;i<allowedTags.length;i++) {
-		filterString += ` && tags ~ "${allowedTags[i]}"`
+	for (let i = 0; i < allowedTags.length; i++) {
+		filterString += ` && tags ~ "${allowedTags[i]}"`;
 	}
 	return filterString;
 }
 
 export function eventTagBlockListToFilterString(blockedTags: string[]) {
 	let filterString = "";
-	for (let i=0;i<blockedTags.length;i++) {
-		filterString += ` && tags !~ "${blockedTags[i]}"`
+	for (let i = 0; i < blockedTags.length; i++) {
+		filterString += ` && tags !~ "${blockedTags[i]}"`;
 	}
 	return filterString;
 }
 
-export function filterEventsBasedOnTagAndResourceFilters(events: EventDBModelExpanded[], filters: CalendarFilters) {
+export function filterEventsBasedOnTagAndResourceFilters(
+	events: EventDBModelExpanded[],
+	filters: CalendarFilters
+) {
 	return events.filter((event) => {
-        let allGood = true;
-
-        if (filters.enableResourceFiltering) {
-            if (filters.resourceFilterType === "allow") {
-                let allowedResourceFound = false;
-                for (let i=0;i<filters.allowResources.length;i++) {
-                    const allowedResource = filters.allowResources[i]
-                    if (allowedResource && event.resources?.includes(allowedResource)) {
-                        allowedResourceFound = true;
-                        break
-                    }
-                }
-                if (!allowedResourceFound) allGood = false;
-            } else {
-                for (let i=0;i<filters.blockResources.length;i++) {
-                    const blockedResource = filters.blockResources[i]
-                    if (blockedResource && event.resources?.includes(blockedResource)) {
-                        allGood = false;
-                        break
-                    }
-                }
-            }
-        }
-
-        if (filters.enableTagFiltering) {
-            if (filters.tagFilterType === "allow") {
-                let allowedTagFound = false;
-                for (let i=0;i<filters.allowTags.length;i++) {
-                    const allowedTag = filters.allowTags[i]
-                    if (allowedTag && event.tags?.includes(allowedTag)) {
-                        allowedTagFound = true;
-                        break
-                    }
-                }
-                if (!allowedTagFound) allGood = false;
-            } else {
-                for (let i=0;i<filters.blockTags.length;i++) {
-                    const blockedTag = filters.blockTags[i]
-                    if (blockedTag && event.tags?.includes(blockedTag)) {
-                        allGood = false;
-                        break
-                    }
-                }
-            }
-        }
-
-        return allGood;
-    });
-}
\ No newline at end of file
+		let allGood = true;
+
+		if (filters.enableResourceFiltering) {
+			if (filters.resourceFilterType === "allow") {
+				let allowedResourceFound = false;
+				for (let i = 0; i < filters.allowResources.length; i++) {
+					const allowedResource = filters.allowResources[i];
+					if (allowedResource && event.resources?.includes(allowedResource)) {
+						allowedResourceFound = true;
+						break;
+					}
+				}
+				if (!allowedResourceFound) allGood = false;
+			} else {
+				for (let i = 0; i < filters.blockResources.length; i++) {
+					const blockedResource = filters.blockResources[i];
+					if (blockedResource && event.resources?.includes(blockedResource)) {
+						allGood = false;
+						break;
+					}
+				}
+			}
+		}
+
+		if (filters.enableTagFiltering) {
+			if (filters.tagFilterType === "allow") {
+				let allowedTagFound = false;
+				for (let i = 0; i < filters.allowTags.length; i++) {
+					const allowedTag = filters.allowTags[i];
+					if (allowedTag && event.tags?.includes(allowedTag)) {
+						allowedTagFound = true;
+						break;
+					}
+				}
+				if (!allowedTagFound) allGood = false;
+			} else {
+				for (let i = 0; i < filters.blockTags.length; i++) {
+					const blockedTag = filters.blockTags[i];
+					if (blockedTag && event.tags?.includes(blockedTag)) {
+						allGood = false;
+						break;
+					}
+				}
+			}
+		}
+
+		return allGood;
+	});
+}
diff --git a/frontend/src/lib/eventList/EventCard.svelte b/frontend/src/lib/eventList/EventCard.svelte
index bff873e..6bb0a55 100644
--- a/frontend/src/lib/eventList/EventCard.svelte
+++ b/frontend/src/lib/eventList/EventCard.svelte
@@ -1,183 +1,195 @@
 <script lang="ts">
-    import type { ImageListCustomizations } from "@/utils";
+	import type { ImageListCustomizations } from "@/utils";
 	import Badge from "@/components/ui/badge/badge.svelte";
-    import type { EventDBModel } from "@/event.utils";
-    import { Button } from "@/components/ui/button";
-    import PrettyDate from "@/PrettyDate.svelte";
-    import { Temporal } from "temporal-polyfill";
+	import type { EventDBModel } from "@/event.utils";
+	import { Button } from "@/components/ui/button";
+	import PrettyDate from "@/PrettyDate.svelte";
+	import { Temporal } from "temporal-polyfill";
 	import { Calendar } from "@lucide/svelte";
 
-    let {
-        event,
-        timeZone,
-        displaySettings,
-        reverse = false
-    }: {
-        event: EventDBModel,
-        timeZone: string,
-        displaySettings: ImageListCustomizations,
-        reverse?: boolean
-    } = $props();
-
-    // svelte-ignore state_referenced_locally
-    console.log(event);
-    $inspect(event);
+	let {
+		event,
+		timeZone,
+		displaySettings,
+		reverse = false
+	}: {
+		event: EventDBModel;
+		timeZone: string;
+		displaySettings: ImageListCustomizations;
+		reverse?: boolean;
+	} = $props();
+
+	// svelte-ignore state_referenced_locally
+	console.log(event);
+	$inspect(event);
 </script>
 
-<div class="card {displaySettings.displayStyle} {reverse ? "reverse" : ""}">
-        <div class="img-parent">
-            <img src={event.imageURL} alt={event.name}>
-        </div>
-
-        <div class="content-parent">
-            {#if displaySettings.displayStyle === "expanded" && event.featured}
-                <Badge class="mb-4">FEATURED EVENT</Badge>
-            {/if}
-
-            {#if displaySettings.showEventName}
-                <h2 class="text-balance text-2xl text-center font-light tracking-tight text-card-foreground">{event.name}</h2>
-            {/if}
-
-            <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                <p class="mt-3 flex gap-3 items-center">
-                    {#if displaySettings.displayStyle === "expanded"}
-                        <Calendar class="w-5 h-5" />
-                    {/if}
-                    <PrettyDate date={Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone)} />
-                </p>
-            </div>
-
-            {#if event.description && displaySettings.showEventDescription}
-                <p class="event-description text-pretty leading-relaxed text-muted-foreground mt-3">{event.description}</p>
-            {/if}
-
-            {#if event.registrationURL && displaySettings.showEventRegistration}
-                <div class="buttonparent{displaySettings.displayStyle} mt-2">
-                    <Button class="button{displaySettings.displayStyle} w-full md:w-auto rounded-none font-light" variant="default" href={event.registrationURL} target="_blank" rel="noopener noreferrer">
-                        More Info
-                    </Button>
-                    <!-- {#if displaySettings.displayStyle === "expanded"}
+<div class="card {displaySettings.displayStyle} {reverse ? 'reverse' : ''}">
+	<div class="img-parent">
+		<img src={event.imageURL} alt={event.name} />
+	</div>
+
+	<div class="content-parent">
+		{#if displaySettings.displayStyle === "expanded" && event.featured}
+			<Badge class="mb-4">FEATURED EVENT</Badge>
+		{/if}
+
+		{#if displaySettings.showEventName}
+			<h2 class="text-balance text-2xl text-center font-light tracking-tight text-card-foreground">
+				{event.name}
+			</h2>
+		{/if}
+
+		<div class="flex items-center gap-2 text-sm text-muted-foreground">
+			<p class="mt-3 flex gap-3 items-center">
+				{#if displaySettings.displayStyle === "expanded"}
+					<Calendar class="w-5 h-5" />
+				{/if}
+				<PrettyDate date={Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone)} />
+			</p>
+		</div>
+
+		{#if event.description && displaySettings.showEventDescription}
+			<p class="event-description text-pretty leading-relaxed text-muted-foreground mt-3">
+				{event.description}
+			</p>
+		{/if}
+
+		{#if event.registrationURL && displaySettings.showEventRegistration}
+			<div class="buttonparent{displaySettings.displayStyle} mt-2">
+				<Button
+					class="button{displaySettings.displayStyle} w-full md:w-auto rounded-none font-light"
+					variant="default"
+					href={event.registrationURL}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					More Info
+				</Button>
+				<!-- {#if displaySettings.displayStyle === "expanded"}
                         <Button class="sharebutton{displaySettings.displayStyle}" variant="outline">
                             <Share2 />
                         </Button>
                     {/if} -->
-                </div>
-            <!-- {:else if displaySettings.displayStyle === "expanded"}
+			</div>
+			<!-- {:else if displaySettings.displayStyle === "expanded"}
                 <div class="buttonparent{displaySettings.displayStyle}">
                     <Button class="sharebutton{displaySettings.displayStyle}" variant="outline">
                         <Share2 />
                     </Button>
                 </div> -->
-            {/if}
-        </div>
+		{/if}
+	</div>
 </div>
 
 <style>
-    .card {
-        display: grid;
-        grid-template-columns: 1fr;
-        grid-template-rows: 61fr 39fr;
-        overflow: hidden;
-        border: 1px solid #000000;
-        grid-template-areas: 
-        "image"
-        "content";
-        background-color: #ffffff;
-    }
-
-    .card.expanded {
-        background-color: #f3f3f4;
-        border: none;
-        border-radius: 20px;
-        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
-    }
-
-    @media screen and (min-width: 850px) {
-        .card {
-            grid-template-columns: 61fr 39fr;
-            grid-template-rows: 1fr;
-            grid-template-areas: "image content";
-        }
-
-        .card.reverse {
-            grid-template-areas: "content image";
-            grid-template-columns: 39fr 61fr;
-        }
-    }
-
-    .img-parent {
-        grid-area: image;
-        width: 100%;
-        aspect-ratio: 16 / 9;
-        position: relative;
-        overflow: hidden;
-        min-width: 0; 
-        min-height: 0;
-    }
-
-    .img-parent img {
-        height: 100%;
-        width: 100%;
-        position: absolute;
-        transition: transform 0.6s ease 10ms;
-        transform: scale(1.01);
-    }
-
-    .card:hover .img-parent img {
-        transform: scale(1.1);
-    }
-
-    .content-parent {
-        grid-area: content;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-direction: column;
-        row-gap: 3px;
-        min-width: 0;
-        min-height: 0;
-    }
-
-    .card.expanded .content-parent {
-        padding: 30px;
-        align-items: flex-start;
-    }
-
-    .card.expanded h2 {
-        font-weight: bold;
-    }
-
-    .card:not(.expanded) .event-description {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        text-align: center;
-    }
-
-    .event-description {
-        width: 100%;
-    }
-
-    .buttonparentexpanded {
-        margin-top: 20px;
-        display: flex;
-        gap: 10px;
-    }
-
-    :global(.buttonexpanded) {
-        background-color: #000000;
-        border-radius: 10px;
-        font-weight: bold;
-        width: 150px;
-        height: 40px;
-        letter-spacing: 0.15ch;
-    }
-
-    :global(.sharebuttonexpanded) {
-        border-radius: 100%;
-        height: 40px;
-        width: 40px;
-    }
-</style>
\ No newline at end of file
+	.card {
+		display: grid;
+		grid-template-columns: 1fr;
+		grid-template-rows: 61fr 39fr;
+		overflow: hidden;
+		border: 1px solid #000000;
+		grid-template-areas:
+			"image"
+			"content";
+		background-color: #ffffff;
+	}
+
+	.card.expanded {
+		background-color: #f3f3f4;
+		border: none;
+		border-radius: 20px;
+		box-shadow:
+			rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
+			rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+	}
+
+	@media screen and (min-width: 850px) {
+		.card {
+			grid-template-columns: 61fr 39fr;
+			grid-template-rows: 1fr;
+			grid-template-areas: "image content";
+		}
+
+		.card.reverse {
+			grid-template-areas: "content image";
+			grid-template-columns: 39fr 61fr;
+		}
+	}
+
+	.img-parent {
+		grid-area: image;
+		width: 100%;
+		aspect-ratio: 16 / 9;
+		position: relative;
+		overflow: hidden;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.img-parent img {
+		height: 100%;
+		width: 100%;
+		position: absolute;
+		transition: transform 0.6s ease 10ms;
+		transform: scale(1.01);
+	}
+
+	.card:hover .img-parent img {
+		transform: scale(1.1);
+	}
+
+	.content-parent {
+		grid-area: content;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		row-gap: 3px;
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.card.expanded .content-parent {
+		padding: 30px;
+		align-items: flex-start;
+	}
+
+	.card.expanded h2 {
+		font-weight: bold;
+	}
+
+	.card:not(.expanded) .event-description {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		text-align: center;
+	}
+
+	.event-description {
+		width: 100%;
+	}
+
+	.buttonparentexpanded {
+		margin-top: 20px;
+		display: flex;
+		gap: 10px;
+	}
+
+	:global(.buttonexpanded) {
+		background-color: #000000;
+		border-radius: 10px;
+		font-weight: bold;
+		width: 150px;
+		height: 40px;
+		letter-spacing: 0.15ch;
+	}
+
+	:global(.sharebuttonexpanded) {
+		border-radius: 100%;
+		height: 40px;
+		width: 40px;
+	}
+</style>
diff --git a/frontend/src/lib/ifeedslug/CreateCustomEvent.svelte b/frontend/src/lib/ifeedslug/CreateCustomEvent.svelte
index 77dec93..58b4ae4 100644
--- a/frontend/src/lib/ifeedslug/CreateCustomEvent.svelte
+++ b/frontend/src/lib/ifeedslug/CreateCustomEvent.svelte
@@ -1,159 +1,178 @@
 <script lang="ts">
-    import { createCustomImageForm } from "../../routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote";
-    import Spinner from "@/components/ui/spinner/spinner.svelte";
-    import { type RemoteFormField } from "@sveltejs/kit";
-    import * as Dialog from "@/components/ui/dialog";
-    import { Button } from "@/components/ui/button";
-    import { Switch } from "@/components/ui/switch";
-    import { Input } from "@/components/ui/input";
-    import { Label } from "@/components/ui/label";
-    import { Upload, X } from "@lucide/svelte";
-    import { clearFileInput } from "@/utils";
-    import { toast } from "svelte-sonner";
+	import { createCustomImageForm } from "../../routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote";
+	import Spinner from "@/components/ui/spinner/spinner.svelte";
+	import { type RemoteFormField } from "@sveltejs/kit";
+	import * as Dialog from "@/components/ui/dialog";
+	import { Button } from "@/components/ui/button";
+	import { Switch } from "@/components/ui/switch";
+	import { Input } from "@/components/ui/input";
+	import { Label } from "@/components/ui/label";
+	import { Upload, X } from "@lucide/svelte";
+	import { clearFileInput } from "@/utils";
+	import { toast } from "svelte-sonner";
 
-    let { iFeedId, dialogOpen = $bindable() }: { iFeedId: string, dialogOpen: boolean } = $props();
+	let { iFeedId, dialogOpen = $bindable() }: { iFeedId: string; dialogOpen: boolean } = $props();
 
-    let linkText = $state("");
-    let showLink = $state(false);
-    let registrationURL = $state("");
-    let uploadNewEventPicture: File | null = $state(null);
-    let uploadNewEventPictureLink = $derived(uploadNewEventPicture ? URL.createObjectURL(uploadNewEventPicture) : null);
-    let creatingForm = $state(false);
+	let linkText = $state("");
+	let showLink = $state(false);
+	let registrationURL = $state("");
+	let uploadNewEventPicture: File | null = $state(null);
+	let uploadNewEventPictureLink = $derived(
+		uploadNewEventPicture ? URL.createObjectURL(uploadNewEventPicture) : null
+	);
+	let creatingForm = $state(false);
 
-    function handleEventPictureChange(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
-        //@ts-ignore
-        const files = event.target.files as File[];
-        if (files.length === 0) return;
-        if (!files[0]) return;
+	function handleEventPictureChange(
+		event: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) {
+		//@ts-ignore
+		const files = event.target.files as File[];
+		if (files.length === 0) return;
+		if (!files[0]) return;
 
-        uploadNewEventPicture = files[0];
-    }
+		uploadNewEventPicture = files[0];
+	}
 
-    function handleRemoveEventPicture() {
-        clearFileInput(document.getElementById("newCustomEventImageInput"))
-        uploadNewEventPicture = null;
-    }
+	function handleRemoveEventPicture() {
+		clearFileInput(document.getElementById("newCustomEventImageInput"));
+		uploadNewEventPicture = null;
+	}
 </script>
 
 <Dialog.Root bind:open={dialogOpen}>
-    <Dialog.Content class="sm:max-w-125 max-h-screen overflow-y-auto" style="max-height: calc(100vh - 50px);">
-        <Dialog.Header>
-            <Dialog.Title>Add Image</Dialog.Title>
-            <Dialog.Description>Add an image to this feed.</Dialog.Description>
-        </Dialog.Header>
-        <form
-            {...createCustomImageForm.enhance(async ({ submit, form }) => {
-                creatingForm = true;
-                try {
-                    await submit();
-                    creatingForm = false;
-                    if (!createCustomImageForm.fields.allIssues()) {
-                        form.reset();
-                        clearFileInput(document.getElementById("newCustomEventImageInput"));
-                        uploadNewEventPicture = null;
-                        linkText = "";
-                        registrationURL = "";
-                        showLink = false;
-                        dialogOpen = false;
-                        toast.success("Successfully added the image.");
-                    }
-                } catch (err) {
-                    console.log(err);
-                    creatingForm = false;
-                    toast.error("An error occured.");
-                }
-            })}
-            class="space-y-4 py-4"
-            enctype="multipart/form-data"
-            id="createCustomImageForm"
-        >
-            {#if iFeedId}
-                <input {...createCustomImageForm.fields.currentIFeed.as("hidden", iFeedId)} />
-            {/if}
-            <div class="space-y-2">
-                <Label for="event-picture">Picture*</Label>
-                {#if uploadNewEventPictureLink}
-                    <div class="relative">
-                        <img
-                            src={uploadNewEventPictureLink}
-                            alt="Event preview"
-                            class="w-full aspect-video object-cover rounded-lg border-2 border-border"
-                        />
-                        <button
-                            onclick={handleRemoveEventPicture}
-                            class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1"
-                        >
-                            <X class="h-4 w-4" />
-                        </button>
-                    </div>
-                {/if}
-                <div class="{uploadNewEventPictureLink ? "sr-only" : ""} border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-primary/50 transition-colors">
-                    <Button variant="outline" class="relative bg-transparent" type="button">
-                        <Upload class="h-4 w-4 mr-2" />
-                        Upload Image
-                        <input
-                            {...(createCustomImageForm.fields.picture as unknown as RemoteFormField<File>).as("file")}
-                            type="file"
-                            accept="image/*"
-                            onchange={handleEventPictureChange}
-                            id="newCustomEventImageInput"
-                            class="absolute inset-0 opacity-0 cursor-pointer"
-                            required
-                        />
-                    </Button>
-                    <p class="text-xs text-muted-foreground mt-2">PNG, JPG or GIF. Max 2MB</p>
-                </div>
-            </div>
+	<Dialog.Content
+		class="sm:max-w-125 max-h-screen overflow-y-auto"
+		style="max-height: calc(100vh - 50px);"
+	>
+		<Dialog.Header>
+			<Dialog.Title>Add Image</Dialog.Title>
+			<Dialog.Description>Add an image to this feed.</Dialog.Description>
+		</Dialog.Header>
+		<form
+			{...createCustomImageForm.enhance(async ({ submit, form }) => {
+				creatingForm = true;
+				try {
+					await submit();
+					creatingForm = false;
+					if (!createCustomImageForm.fields.allIssues()) {
+						form.reset();
+						clearFileInput(document.getElementById("newCustomEventImageInput"));
+						uploadNewEventPicture = null;
+						linkText = "";
+						registrationURL = "";
+						showLink = false;
+						dialogOpen = false;
+						toast.success("Successfully added the image.");
+					}
+				} catch (err) {
+					console.log(err);
+					creatingForm = false;
+					toast.error("An error occured.");
+				}
+			})}
+			class="space-y-4 py-4"
+			enctype="multipart/form-data"
+			id="createCustomImageForm"
+		>
+			{#if iFeedId}
+				<input {...createCustomImageForm.fields.currentIFeed.as("hidden", iFeedId)} />
+			{/if}
+			<div class="space-y-2">
+				<Label for="event-picture">Picture*</Label>
+				{#if uploadNewEventPictureLink}
+					<div class="relative">
+						<img
+							src={uploadNewEventPictureLink}
+							alt="Event preview"
+							class="w-full aspect-video object-cover rounded-lg border-2 border-border"
+						/>
+						<button
+							onclick={handleRemoveEventPicture}
+							class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1"
+						>
+							<X class="h-4 w-4" />
+						</button>
+					</div>
+				{/if}
+				<div
+					class="{uploadNewEventPictureLink
+						? 'sr-only'
+						: ''} border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-primary/50 transition-colors"
+				>
+					<Button variant="outline" class="relative bg-transparent" type="button">
+						<Upload class="h-4 w-4 mr-2" />
+						Upload Image
+						<input
+							{...(createCustomImageForm.fields.picture as unknown as RemoteFormField<File>).as(
+								"file"
+							)}
+							type="file"
+							accept="image/*"
+							onchange={handleEventPictureChange}
+							id="newCustomEventImageInput"
+							class="absolute inset-0 opacity-0 cursor-pointer"
+							required
+						/>
+					</Button>
+					<p class="text-xs text-muted-foreground mt-2">PNG, JPG or GIF. Max 2MB</p>
+				</div>
+			</div>
 
-            <div class="flex items-center justify-between">
-                <input {...createCustomImageForm.fields.showLink.as("checkbox")} checked={showLink} type="checkbox" class="sr-only" />
-                <div class="space-y-0.5">
-                    <Label for="event-show" class="text-base">
-                        Add Link
-                    </Label>
-                    <p class="text-sm text-muted-foreground">This adds a button that lets people click a custom link.</p>
-                </div>
-                <Switch
-                    id="event-show"
-                    bind:checked={showLink}
-                />
-            </div>
-            {#if showLink}
-                <div class="space-y-2">
-                    <input {...createCustomImageForm.fields.linkText.as("text")} value={linkText} class="sr-only" />
-                    <Label for="event-name">Link Button Text</Label>
-                    <Input
-                        id="event-name"
-                        placeholder="Link Button Text"
-                        bind:value={linkText}
-                    />
-                </div>
-                <div class="space-y-2">
-                    <input {...createCustomImageForm.fields.registrationURL.as("url")} value={registrationURL} class="sr-only" />
-                    <Label for="event-registration">Link URL</Label>
-                    <Input
-                        id="event-registration"
-                        type="url"
-                        placeholder="https://example.com/register"
-                        bind:value={registrationURL}
-                    />
-                </div>
-            {/if}
-            {#each createCustomImageForm.fields.allIssues() as anIssue (`AformsubmitIssue${anIssue.message}`)}
-                <p class="text-red-500">{anIssue.message}</p>
-            {/each}
-        </form>
-        <Dialog.Footer>
-            <Button variant="outline" onclick={() => dialogOpen = false} class="bg-transparent">
-                Cancel
-            </Button>
-            <Button form="createCustomImageForm" type="submit" disabled={creatingForm}>
-                {#if creatingForm}
-                    Saving <Spinner />
-                {:else}
-                    Save
-                {/if}
-            </Button>
-        </Dialog.Footer>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+			<div class="flex items-center justify-between">
+				<input
+					{...createCustomImageForm.fields.showLink.as("checkbox")}
+					checked={showLink}
+					type="checkbox"
+					class="sr-only"
+				/>
+				<div class="space-y-0.5">
+					<Label for="event-show" class="text-base">Add Link</Label>
+					<p class="text-sm text-muted-foreground">
+						This adds a button that lets people click a custom link.
+					</p>
+				</div>
+				<Switch id="event-show" bind:checked={showLink} />
+			</div>
+			{#if showLink}
+				<div class="space-y-2">
+					<input
+						{...createCustomImageForm.fields.linkText.as("text")}
+						value={linkText}
+						class="sr-only"
+					/>
+					<Label for="event-name">Link Button Text</Label>
+					<Input id="event-name" placeholder="Link Button Text" bind:value={linkText} />
+				</div>
+				<div class="space-y-2">
+					<input
+						{...createCustomImageForm.fields.registrationURL.as("url")}
+						value={registrationURL}
+						class="sr-only"
+					/>
+					<Label for="event-registration">Link URL</Label>
+					<Input
+						id="event-registration"
+						type="url"
+						placeholder="https://example.com/register"
+						bind:value={registrationURL}
+					/>
+				</div>
+			{/if}
+			{#each createCustomImageForm.fields.allIssues() as anIssue (`AformsubmitIssue${anIssue.message}`)}
+				<p class="text-red-500">{anIssue.message}</p>
+			{/each}
+		</form>
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (dialogOpen = false)} class="bg-transparent">
+				Cancel
+			</Button>
+			<Button form="createCustomImageForm" type="submit" disabled={creatingForm}>
+				{#if creatingForm}
+					Saving <Spinner />
+				{:else}
+					Save
+				{/if}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/lib/ifeedslug/CustomImages.svelte b/frontend/src/lib/ifeedslug/CustomImages.svelte
index b69420c..3883ce2 100644
--- a/frontend/src/lib/ifeedslug/CustomImages.svelte
+++ b/frontend/src/lib/ifeedslug/CustomImages.svelte
@@ -1,111 +1,139 @@
 <script lang="ts">
-    import { deleteCustomImageCommand } from "../../routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote";
-    import { type CustomImageIFeedDBModel, type ImageFeedDBModel } from "@/utils";
-    import Button, { buttonVariants } from "@/components/ui/button/button.svelte";
-    import * as Sheet from "$lib/components/ui/sheet/index.js";
-    import * as Table from "$lib/components/ui/table/index.js";
-    import UpdateCustomEvent from "./UpdateCustomEvent.svelte";
-    import * as Empty from "$lib/components/ui/empty/index.js";
-    import CreateCustomEvent from "./CreateCustomEvent.svelte";
-    import Badge from "@/components/ui/badge/badge.svelte";
-    import * as Dialog from "@/components/ui/dialog";
-    import { ImagePlus } from "@lucide/svelte";
-    import { toast } from "svelte-sonner";
+	import { deleteCustomImageCommand } from "../../routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote";
+	import { type CustomImageIFeedDBModel, type ImageFeedDBModel } from "@/utils";
+	import Button, { buttonVariants } from "@/components/ui/button/button.svelte";
+	import * as Sheet from "$lib/components/ui/sheet/index.js";
+	import * as Table from "$lib/components/ui/table/index.js";
+	import UpdateCustomEvent from "./UpdateCustomEvent.svelte";
+	import * as Empty from "$lib/components/ui/empty/index.js";
+	import CreateCustomEvent from "./CreateCustomEvent.svelte";
+	import Badge from "@/components/ui/badge/badge.svelte";
+	import * as Dialog from "@/components/ui/dialog";
+	import { ImagePlus } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
 
-    let { customImages, apiServer, imageFeeds, currentFeedID }: { customImages: CustomImageIFeedDBModel[], apiServer: string, imageFeeds: ImageFeedDBModel[], currentFeedID: string } = $props();
+	let {
+		customImages,
+		apiServer,
+		imageFeeds,
+		currentFeedID
+	}: {
+		customImages: CustomImageIFeedDBModel[];
+		apiServer: string;
+		imageFeeds: ImageFeedDBModel[];
+		currentFeedID: string;
+	} = $props();
 
-    let createCustomEventDialog = $state(false);
-    let selectedEventIndex = $state(0);
-    let showEvent = $state(false);
+	let createCustomEventDialog = $state(false);
+	let selectedEventIndex = $state(0);
+	let showEvent = $state(false);
 
-    function eventClicked(index: number) {
-        selectedEventIndex = index;
-        showEvent = true;
-    }
+	function eventClicked(index: number) {
+		selectedEventIndex = index;
+		showEvent = true;
+	}
 
-    async function deleteEvent() {
-        const selectedCustomImage = customImages[selectedEventIndex];
-        if (!selectedCustomImage) return;
+	async function deleteEvent() {
+		const selectedCustomImage = customImages[selectedEventIndex];
+		if (!selectedCustomImage) return;
 
-        const response = await deleteCustomImageCommand({ id: selectedCustomImage.id, currentFeedID });
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-            showEvent = false;
-        }
-    }
+		const response = await deleteCustomImageCommand({ id: selectedCustomImage.id, currentFeedID });
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+			showEvent = false;
+		}
+	}
 </script>
- 
+
 {#if customImages.length > 0}
-    <Table.Root>
-        <Table.Header>
-            <Table.Row>
-                <Table.Head class="w-25">Picture</Table.Head>
-                <Table.Head class="text-end">Has Link</Table.Head>
-            </Table.Row>
-        </Table.Header>
+	<Table.Root>
+		<Table.Header>
+			<Table.Row>
+				<Table.Head class="w-25">Picture</Table.Head>
+				<Table.Head class="text-end">Has Link</Table.Head>
+			</Table.Row>
+		</Table.Header>
 
-        <Table.Body>
-            {#each customImages as customEvent, index (`customeventrow${customEvent.id}`)}
-                <Table.Row onclick={() => eventClicked(index)}>
-                    <Table.Cell>
-                        <img class="w-full aspect-video rounded-lg object-cover" src="{apiServer}api/files/{customEvent.collectionId}/{customEvent.id}/{customEvent.picture}" alt="@leerob" />
-                    </Table.Cell>
-                    <Table.Cell class="text-end">
-                        <Badge variant="outline">{customEvent.showLink ? "Yes" : "No"}</Badge>
-                    </Table.Cell>
-                </Table.Row>
-            {/each}
-        </Table.Body>
-    </Table.Root>
-    <div class="w-full flex items-center justify-center mt-2">
-        <Button variant="outline" class="w-full" onclick={() => createCustomEventDialog=true}>Add Image</Button>
-    </div>
+		<Table.Body>
+			{#each customImages as customEvent, index (`customeventrow${customEvent.id}`)}
+				<Table.Row onclick={() => eventClicked(index)}>
+					<Table.Cell>
+						<img
+							class="w-full aspect-video rounded-lg object-cover"
+							src="{apiServer}api/files/{customEvent.collectionId}/{customEvent.id}/{customEvent.picture}"
+							alt="@leerob"
+						/>
+					</Table.Cell>
+					<Table.Cell class="text-end">
+						<Badge variant="outline">{customEvent.showLink ? "Yes" : "No"}</Badge>
+					</Table.Cell>
+				</Table.Row>
+			{/each}
+		</Table.Body>
+	</Table.Root>
+	<div class="w-full flex items-center justify-center mt-2">
+		<Button variant="outline" class="w-full" onclick={() => (createCustomEventDialog = true)}
+			>Add Image</Button
+		>
+	</div>
 {:else}
-    <Empty.Root>
-        <Empty.Header>
-            <Empty.Media variant="icon">
-                <ImagePlus />
-            </Empty.Media>
-            <Empty.Title>No Pics Yet</Empty.Title>
-            <Empty.Description>You haven't added any additional images yet.</Empty.Description>
-        </Empty.Header>
-        <Empty.Content>
-            <Button onclick={() => createCustomEventDialog=true}>Add One</Button>
-        </Empty.Content>
-    </Empty.Root>
+	<Empty.Root>
+		<Empty.Header>
+			<Empty.Media variant="icon">
+				<ImagePlus />
+			</Empty.Media>
+			<Empty.Title>No Pics Yet</Empty.Title>
+			<Empty.Description>You haven't added any additional images yet.</Empty.Description>
+		</Empty.Header>
+		<Empty.Content>
+			<Button onclick={() => (createCustomEventDialog = true)}>Add One</Button>
+		</Empty.Content>
+	</Empty.Root>
 {/if}
 
 <Sheet.Root bind:open={showEvent}>
-    <Sheet.Content side="left">
-        <Sheet.Header>
-            <Sheet.Title>Custom Image</Sheet.Title>
-            <Sheet.Description>Make changes to the image settings here. Click save when you're done.</Sheet.Description>
-        </Sheet.Header>
-        {#if showEvent}
-            <UpdateCustomEvent {currentFeedID} {customImages} {apiServer} {imageFeeds} {selectedEventIndex} close={() => {showEvent = false}} />
-        {/if}
-        <Sheet.Footer>
-            <Button form="updateEventForm" type="submit">Save changes</Button>
-            <Dialog.Root>
-                <Dialog.Trigger class={buttonVariants({ variant: "outline" })}>
-                    Delete Image
-                </Dialog.Trigger>
-                <Dialog.Content>
-                    <Dialog.Header>
-                        <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-                        <Dialog.Description>
-                            This action cannot be undone. This will permanently delete this image from our servers.
-                        </Dialog.Description>
-                        <Dialog.Footer>
-                            <Button variant="destructive" type="reset" onclick={deleteEvent}>Confirm Delete</Button>
-                        </Dialog.Footer>
-                    </Dialog.Header>
-                </Dialog.Content>
-            </Dialog.Root>
-        </Sheet.Footer>
-    </Sheet.Content>
+	<Sheet.Content side="left">
+		<Sheet.Header>
+			<Sheet.Title>Custom Image</Sheet.Title>
+			<Sheet.Description
+				>Make changes to the image settings here. Click save when you're done.</Sheet.Description
+			>
+		</Sheet.Header>
+		{#if showEvent}
+			<UpdateCustomEvent
+				{currentFeedID}
+				{customImages}
+				{apiServer}
+				{imageFeeds}
+				{selectedEventIndex}
+				close={() => {
+					showEvent = false;
+				}}
+			/>
+		{/if}
+		<Sheet.Footer>
+			<Button form="updateEventForm" type="submit">Save changes</Button>
+			<Dialog.Root>
+				<Dialog.Trigger class={buttonVariants({ variant: "outline" })}>Delete Image</Dialog.Trigger>
+				<Dialog.Content>
+					<Dialog.Header>
+						<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
+						<Dialog.Description>
+							This action cannot be undone. This will permanently delete this image from our
+							servers.
+						</Dialog.Description>
+						<Dialog.Footer>
+							<Button variant="destructive" type="reset" onclick={deleteEvent}
+								>Confirm Delete</Button
+							>
+						</Dialog.Footer>
+					</Dialog.Header>
+				</Dialog.Content>
+			</Dialog.Root>
+		</Sheet.Footer>
+	</Sheet.Content>
 </Sheet.Root>
 
-<CreateCustomEvent iFeedId={currentFeedID} bind:dialogOpen={createCustomEventDialog} />
\ No newline at end of file
+<CreateCustomEvent iFeedId={currentFeedID} bind:dialogOpen={createCustomEventDialog} />
diff --git a/frontend/src/lib/ifeedslug/UpdateCustomEvent.svelte b/frontend/src/lib/ifeedslug/UpdateCustomEvent.svelte
index 6bea7e5..08c3766 100644
--- a/frontend/src/lib/ifeedslug/UpdateCustomEvent.svelte
+++ b/frontend/src/lib/ifeedslug/UpdateCustomEvent.svelte
@@ -1,175 +1,207 @@
 <script lang="ts">
-    import { updateCustomImageForm } from "../../routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote";
-    import { clearFileInput, type CustomImageIFeedDBModel, type ImageFeedDBModel } from "@/utils";
-    import Button from "@/components/ui/button/button.svelte";
-    import { type RemoteFormField } from "@sveltejs/kit";
-    import { Switch } from "@/components/ui/switch";
-    import { Input } from "@/components/ui/input";
-    import { Label } from "@/components/ui/label";
-    import { Upload, X } from "@lucide/svelte";
-    import { toast } from "svelte-sonner";
+	import { updateCustomImageForm } from "../../routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote";
+	import { clearFileInput, type CustomImageIFeedDBModel, type ImageFeedDBModel } from "@/utils";
+	import Button from "@/components/ui/button/button.svelte";
+	import { type RemoteFormField } from "@sveltejs/kit";
+	import { Switch } from "@/components/ui/switch";
+	import { Input } from "@/components/ui/input";
+	import { Label } from "@/components/ui/label";
+	import { Upload, X } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
 
-    let {
-        customImages,
-        apiServer,
-        imageFeeds,
-        currentFeedID,
-        selectedEventIndex,
-        close
-    }: {
-        customImages: CustomImageIFeedDBModel[],
-        apiServer: string,
-        imageFeeds: ImageFeedDBModel[],
-        currentFeedID: string,
-        selectedEventIndex: number,
-        close: () => unknown
-    } = $props();
+	let {
+		customImages,
+		apiServer,
+		imageFeeds,
+		currentFeedID,
+		selectedEventIndex,
+		close
+	}: {
+		customImages: CustomImageIFeedDBModel[];
+		apiServer: string;
+		imageFeeds: ImageFeedDBModel[];
+		currentFeedID: string;
+		selectedEventIndex: number;
+		close: () => unknown;
+	} = $props();
 
-    let uploadNewEventPicture: File | null = $state(null);
-    let uploadNewEventPictureLink = $derived(uploadNewEventPicture ? URL.createObjectURL(uploadNewEventPicture) : null);
-    let currentCustomImage = $derived(customImages[selectedEventIndex] as CustomImageIFeedDBModel );
+	let uploadNewEventPicture: File | null = $state(null);
+	let uploadNewEventPictureLink = $derived(
+		uploadNewEventPicture ? URL.createObjectURL(uploadNewEventPicture) : null
+	);
+	let currentCustomImage = $derived(customImages[selectedEventIndex] as CustomImageIFeedDBModel);
 
-    let eventPictureLink = $derived(currentCustomImage.picture ? `${apiServer}api/files/${currentCustomImage.collectionId}/${currentCustomImage.id}/${currentCustomImage.picture}` : "");
+	let eventPictureLink = $derived(
+		currentCustomImage.picture
+			? `${apiServer}api/files/${currentCustomImage.collectionId}/${currentCustomImage.id}/${currentCustomImage.picture}`
+			: ""
+	);
 
-    // svelte-ignore state_referenced_locally
-    let linkText = $state(currentCustomImage.linkText);
-    // svelte-ignore state_referenced_locally
-    let registrationURL = $state(currentCustomImage.registrationURL);
-    // svelte-ignore state_referenced_locally
-    let showLink = $state(currentCustomImage.showLink);
+	// svelte-ignore state_referenced_locally
+	let linkText = $state(currentCustomImage.linkText);
+	// svelte-ignore state_referenced_locally
+	let registrationURL = $state(currentCustomImage.registrationURL);
+	// svelte-ignore state_referenced_locally
+	let showLink = $state(currentCustomImage.showLink);
 
-    function handleRemoveEventPicture() {
-        clearFileInput(document.getElementById("imageUploaderIFeed"))
-        uploadNewEventPicture = null;
-        eventPictureLink = "";
-    }
+	function handleRemoveEventPicture() {
+		clearFileInput(document.getElementById("imageUploaderIFeed"));
+		uploadNewEventPicture = null;
+		eventPictureLink = "";
+	}
 
-    function handleEventPictureChange(event: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
-        //@ts-ignore
-        const files = event.target.files as File[];
-        if (files.length === 0) return;
-        if (!files[0]) return;
+	function handleEventPictureChange(
+		event: Event & { currentTarget: EventTarget & HTMLInputElement }
+	) {
+		//@ts-ignore
+		const files = event.target.files as File[];
+		if (files.length === 0) return;
+		if (!files[0]) return;
 
-        uploadNewEventPicture = files[0];
-        eventPictureLink = ""
-    }
+		uploadNewEventPicture = files[0];
+		eventPictureLink = "";
+	}
 </script>
 
 <form
-    id="updateEventForm"
-    {...updateCustomImageForm.enhance(async ({ submit, form }) => {
-        const savingChangesToast = toast.loading("Saving changes!");
-        try {
-            await submit();
-            toast.dismiss(savingChangesToast);
-            if (!updateCustomImageForm.fields.allIssues()) {
-                form.reset();
-                clearFileInput(document.getElementById("imageUploaderIFeed"));
-                uploadNewEventPicture = null;
-                close();
-                toast.success("Success.");
-            }
-        } catch (err) {
-            console.log(err);
-            toast.dismiss(savingChangesToast);
-            toast.error("An error occured.");
-        }
-    })}
-    enctype="multipart/form-data"
-    class="grid flex-1 auto-rows-min gap-5 px-4 w-full overflow-y-auto"
+	id="updateEventForm"
+	{...updateCustomImageForm.enhance(async ({ submit, form }) => {
+		const savingChangesToast = toast.loading("Saving changes!");
+		try {
+			await submit();
+			toast.dismiss(savingChangesToast);
+			if (!updateCustomImageForm.fields.allIssues()) {
+				form.reset();
+				clearFileInput(document.getElementById("imageUploaderIFeed"));
+				uploadNewEventPicture = null;
+				close();
+				toast.success("Success.");
+			}
+		} catch (err) {
+			console.log(err);
+			toast.dismiss(savingChangesToast);
+			toast.error("An error occured.");
+		}
+	})}
+	enctype="multipart/form-data"
+	class="grid flex-1 auto-rows-min gap-5 px-4 w-full overflow-y-auto"
 >
-    {#if currentCustomImage.id}
-        <input {...updateCustomImageForm.fields.id.as("hidden", currentCustomImage.id)} />
-    {/if}
-    {#if currentFeedID}
-        <input {...updateCustomImageForm.fields.currentIFeedId.as("hidden", currentFeedID)} />
-    {/if}
-    <input {...updateCustomImageForm.fields.eventPictureLink.as("text")} value={eventPictureLink} class="sr-only" />
+	{#if currentCustomImage.id}
+		<input {...updateCustomImageForm.fields.id.as("hidden", currentCustomImage.id)} />
+	{/if}
+	{#if currentFeedID}
+		<input {...updateCustomImageForm.fields.currentIFeedId.as("hidden", currentFeedID)} />
+	{/if}
+	<input
+		{...updateCustomImageForm.fields.eventPictureLink.as("text")}
+		value={eventPictureLink}
+		class="sr-only"
+	/>
 
-    <div class="flex items-start gap-4 flex-col">
-        {#each updateCustomImageForm.fields.allIssues() as anIssue (`AformsubmitIssue${anIssue.message}`)}
-            <p class="text-red-500">{anIssue.message}</p>
-        {/each}
-        <div class="relative w-full">
-            {#if eventPictureLink.length > 0 || uploadNewEventPicture}
-                <div class="relative group w-full">
-                    <img
-                        src={uploadNewEventPicture !== null ? uploadNewEventPictureLink : eventPictureLink}
-                        alt="Event Banner"
-                        class="aspect-video w-full rounded-lg object-cover border-2 border-border"
-                    />
-                    <button
-                        onclick={handleRemoveEventPicture}
-                        class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
-                    >
-                        <X class="h-4 w-4" />
-                    </button>
-                </div>
-            {:else}
-                <div class="w-full aspect-video bg-ring/50 rounded-lg flex items-center justify-center">
-                    <p class="text-foreground">No Picture</p>
-                </div>
-            {/if}
-        </div>
-        <div class="flex-1 space-y-3">
-        <div>
-            <p class="text-sm text-foreground font-medium">Upload an image</p>
-            <p class="text-sm text-muted-foreground mt-1">
-            JPG, PNG or GIF. Max size 2MB. Recommended 960x540px.
-            </p>
-        </div>
-        <div class="flex gap-2">
-            <Button variant="outline" class="relative bg-transparent">
-                <Upload class="h-4 w-4 mr-2" />
-                Upload Image
-                <input
-                    {...(updateCustomImageForm.fields.uploadNewEventPicture as unknown as RemoteFormField<File>).as("file")}
-                    id="imageUploaderIFeed"
-                    type="file"
-                    accept="image/*"
-                    onchange={handleEventPictureChange}
-                    class="absolute inset-0 opacity-0 cursor-pointer"
-                />
-            </Button>
-            {#if uploadNewEventPicture}
-                <Button variant="outline" onclick={handleRemoveEventPicture} class="bg-transparent">
-                    Remove
-                </Button>
-            {/if}
-        </div>
-        </div>
-    </div>
+	<div class="flex items-start gap-4 flex-col">
+		{#each updateCustomImageForm.fields.allIssues() as anIssue (`AformsubmitIssue${anIssue.message}`)}
+			<p class="text-red-500">{anIssue.message}</p>
+		{/each}
+		<div class="relative w-full">
+			{#if eventPictureLink.length > 0 || uploadNewEventPicture}
+				<div class="relative group w-full">
+					<img
+						src={uploadNewEventPicture !== null ? uploadNewEventPictureLink : eventPictureLink}
+						alt="Event Banner"
+						class="aspect-video w-full rounded-lg object-cover border-2 border-border"
+					/>
+					<button
+						onclick={handleRemoveEventPicture}
+						class="absolute -top-2 -right-2 bg-destructive text-destructive-foreground rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity"
+					>
+						<X class="h-4 w-4" />
+					</button>
+				</div>
+			{:else}
+				<div class="w-full aspect-video bg-ring/50 rounded-lg flex items-center justify-center">
+					<p class="text-foreground">No Picture</p>
+				</div>
+			{/if}
+		</div>
+		<div class="flex-1 space-y-3">
+			<div>
+				<p class="text-sm text-foreground font-medium">Upload an image</p>
+				<p class="text-sm text-muted-foreground mt-1">
+					JPG, PNG or GIF. Max size 2MB. Recommended 960x540px.
+				</p>
+			</div>
+			<div class="flex gap-2">
+				<Button variant="outline" class="relative bg-transparent">
+					<Upload class="h-4 w-4 mr-2" />
+					Upload Image
+					<input
+						{...(
+							updateCustomImageForm.fields.uploadNewEventPicture as unknown as RemoteFormField<File>
+						).as("file")}
+						id="imageUploaderIFeed"
+						type="file"
+						accept="image/*"
+						onchange={handleEventPictureChange}
+						class="absolute inset-0 opacity-0 cursor-pointer"
+					/>
+				</Button>
+				{#if uploadNewEventPicture}
+					<Button variant="outline" onclick={handleRemoveEventPicture} class="bg-transparent">
+						Remove
+					</Button>
+				{/if}
+			</div>
+		</div>
+	</div>
 
-    <div class="flex items-center justify-between space-x-2">
-        <input {...updateCustomImageForm.fields.showLink.as("checkbox")} checked={showLink} type="checkbox" class="sr-only" />
-        <Label for="showEvent" class="flex flex-col items-start space-y-1 cursor-pointer">
-            <span class="font-medium">Show Link</span>
-        </Label>
-        <Switch
-            name="eventShow"
-            id="showEvent"
-            bind:checked={showLink}
-        />
-    </div>
+	<div class="flex items-center justify-between space-x-2">
+		<input
+			{...updateCustomImageForm.fields.showLink.as("checkbox")}
+			checked={showLink}
+			type="checkbox"
+			class="sr-only"
+		/>
+		<Label for="showEvent" class="flex flex-col items-start space-y-1 cursor-pointer">
+			<span class="font-medium">Show Link</span>
+		</Label>
+		<Switch name="eventShow" id="showEvent" bind:checked={showLink} />
+	</div>
 
-    {#if showLink}
-        <div class="grid gap-2">
-            <input {...updateCustomImageForm.fields.linkText.as("text")} value={linkText} class="sr-only" />
-            <Label for="name" class="text-end">Name*</Label>
-            <Input name="eventName" id="name" bind:value={linkText} />
-        </div>
+	{#if showLink}
+		<div class="grid gap-2">
+			<input
+				{...updateCustomImageForm.fields.linkText.as("text")}
+				value={linkText}
+				class="sr-only"
+			/>
+			<Label for="name" class="text-end">Name*</Label>
+			<Input name="eventName" id="name" bind:value={linkText} />
+		</div>
 
-        <div class="grid gap-2">
-            <input {...updateCustomImageForm.fields.registrationURL.as("text")} value={registrationURL} class="sr-only" />
-            <Label for="registrationURL" class="text-end">Link URL*</Label>
-            <Input name="eventRegistrationURL" id="registrationURL" bind:value={registrationURL} placeholder='e.g. "https://event123.example.com/register"' />
-        </div>
-    {/if}
+		<div class="grid gap-2">
+			<input
+				{...updateCustomImageForm.fields.registrationURL.as("text")}
+				value={registrationURL}
+				class="sr-only"
+			/>
+			<Label for="registrationURL" class="text-end">Link URL*</Label>
+			<Input
+				name="eventRegistrationURL"
+				id="registrationURL"
+				bind:value={registrationURL}
+				placeholder={`e.g. "https://event123.example.com/register"`}
+			/>
+		</div>
+	{/if}
 
-    {#each imageFeeds as imageFeed (`includeInAnImageFeed${imageFeed.id}`)}
-        <div class="flex items-center gap-3 {imageFeed.id === currentFeedID ? "sr-only" : ""}">
-            <input id="includehere{imageFeed.id}" {...updateCustomImageForm.fields.included.as("checkbox", imageFeed.id)} checked={currentCustomImage.imageFeed.includes(imageFeed.id)} />
-            <Label for="includehere{imageFeed.id}">Include in "{imageFeed.name}" feed.</Label>
-        </div>
-    {/each}
-</form>
\ No newline at end of file
+	{#each imageFeeds as imageFeed (`includeInAnImageFeed${imageFeed.id}`)}
+		<div class="flex items-center gap-3 {imageFeed.id === currentFeedID ? 'sr-only' : ''}">
+			<input
+				id="includehere{imageFeed.id}"
+				{...updateCustomImageForm.fields.included.as("checkbox", imageFeed.id)}
+				checked={currentCustomImage.imageFeed.includes(imageFeed.id)}
+			/>
+			<Label for="includehere{imageFeed.id}">Include in "{imageFeed.name}" feed.</Label>
+		</div>
+	{/each}
+</form>
diff --git a/frontend/src/lib/landingPage/AlphaWarning.svelte b/frontend/src/lib/landingPage/AlphaWarning.svelte
index c4ddde1..b17602b 100644
--- a/frontend/src/lib/landingPage/AlphaWarning.svelte
+++ b/frontend/src/lib/landingPage/AlphaWarning.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-    import { X } from "@lucide/svelte";
+	import { X } from "@lucide/svelte";
 
-    let showWarning = $state(true);
+	let showWarning = $state(true);
 </script>
 
 {#if showWarning}
-    <div class="bg-ring/85 flex p-2 items-center justify-between">
-        <p class="text-background">Warning. This website is currently in the alpha stage. Not all features are implemented yet.</p>
-        <button class="text-background" onclick={() => showWarning = false}><X /></button>
-    </div>
-{/if}
\ No newline at end of file
+	<div class="bg-ring/85 flex p-2 items-center justify-between">
+		<p class="text-background">
+			Warning. This website is currently in the alpha stage. Not all features are implemented yet.
+		</p>
+		<button class="text-background" onclick={() => (showWarning = false)}><X /></button>
+	</div>
+{/if}
diff --git a/frontend/src/lib/landingPage/CTA.svelte b/frontend/src/lib/landingPage/CTA.svelte
index cd98d42..f37e2a3 100644
--- a/frontend/src/lib/landingPage/CTA.svelte
+++ b/frontend/src/lib/landingPage/CTA.svelte
@@ -1,34 +1,38 @@
 <script>
-    import { Button } from "@/components/ui/button";
-    import { ArrowRight } from "@lucide/svelte";
-
+	import { Button } from "@/components/ui/button";
+	import { ArrowRight } from "@lucide/svelte";
 </script>
+
 <section class="py-20 sm:py-32 bg-secondary text-secondary-foreground">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="max-w-3xl mx-auto text-center space-y-8">
-            <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-balance">
-                Ready to transform your scheduling?
-            </h2>
-            <p class="text-lg text-secondary-foreground/80 leading-relaxed">
-                Join many professionals who have streamlined their calendar management with InfoSections. Start your
-                free trial today—no credit card required.
-            </p>
-            <div class="flex flex-col sm:flex-row gap-4 justify-center">
-            <div class="sm:w-fit w-full">
-                <Button size="lg" href="/signup?free_trial=1" class="w-full bg-primary text-primary-foreground hover:bg-primary/90">
-                    Start Free Trial
-                    <ArrowRight class="ml-2 h-4 w-4" />
-                </Button>
-            </div>
-            <Button
-                size="lg"
-                variant="outline"
-                class="border-secondary-foreground/20 text-secondary-foreground hover:bg-primary-foreground/10 hover:text-secondary-foreground/70 bg-transparent"
-                href="mailto:sales@infosections.com"
-            >
-                Contact Sales
-            </Button>
-            </div>
-        </div>
-    </div>
-</section>
\ No newline at end of file
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="max-w-3xl mx-auto text-center space-y-8">
+			<h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-balance">
+				Ready to transform your scheduling?
+			</h2>
+			<p class="text-lg text-secondary-foreground/80 leading-relaxed">
+				Join many professionals who have streamlined their calendar management with InfoSections.
+				Start your free trial today—no credit card required.
+			</p>
+			<div class="flex flex-col sm:flex-row gap-4 justify-center">
+				<div class="sm:w-fit w-full">
+					<Button
+						size="lg"
+						href="/signup?free_trial=1"
+						class="w-full bg-primary text-primary-foreground hover:bg-primary/90"
+					>
+						Start Free Trial
+						<ArrowRight class="ml-2 h-4 w-4" />
+					</Button>
+				</div>
+				<Button
+					size="lg"
+					variant="outline"
+					class="border-secondary-foreground/20 text-secondary-foreground hover:bg-primary-foreground/10 hover:text-secondary-foreground/70 bg-transparent"
+					href="mailto:sales@infosections.com"
+				>
+					Contact Sales
+				</Button>
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/frontend/src/lib/landingPage/Features.svelte b/frontend/src/lib/landingPage/Features.svelte
index 0dfd8e1..36d03b3 100644
--- a/frontend/src/lib/landingPage/Features.svelte
+++ b/frontend/src/lib/landingPage/Features.svelte
@@ -1,49 +1,55 @@
 <script lang="ts">
-    import { Calendar, Layers, Smartphone } from "@lucide/svelte";
+	import { Calendar, Layers, Smartphone } from "@lucide/svelte";
 
-    let features = $state([
-        {
-            icon: Calendar,
-            title: "Smart Filtering",
-            description:
-            "You can filter events based on if they're public, have certain tags, all resources are approved.",
-        },
-        {
-            icon: Smartphone,
-            title: "Customizable Views",
-            description: "Create a custom look for a front page website, or a kiosk at church.",
-        },
-        {
-            icon: Layers,
-            title: "All-in-One Platform",
-            description: "Manage multiple calendars, time zones, and availability preferences from a single dashboard.",
-        },
-    ])
+	let features = $state([
+		{
+			icon: Calendar,
+			title: "Smart Filtering",
+			description:
+				"You can filter events based on if they're public, have certain tags, all resources are approved."
+		},
+		{
+			icon: Smartphone,
+			title: "Customizable Views",
+			description: "Create a custom look for a front page website, or a kiosk at church."
+		},
+		{
+			icon: Layers,
+			title: "All-in-One Platform",
+			description:
+				"Manage multiple calendars, time zones, and availability preferences from a single dashboard."
+		}
+	]);
 </script>
 
 <section class="py-20 sm:py-32 bg-secondary/30">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="text-center space-y-4 mb-16">
-            <h2 class="text-3xl sm:text-4xl font-bold text-foreground text-balance">
-            Everything you need to show only what you need
-            </h2>
-            <p class="text-lg text-muted-foreground max-w-2xl mx-auto">
-            Powerful features designed to filter and select the events that you want displayed in your custom calendar. 
-            </p>
-        </div>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="text-center space-y-4 mb-16">
+			<h2 class="text-3xl sm:text-4xl font-bold text-foreground text-balance">
+				Everything you need to show only what you need
+			</h2>
+			<p class="text-lg text-muted-foreground max-w-2xl mx-auto">
+				Powerful features designed to filter and select the events that you want displayed in your
+				custom calendar.
+			</p>
+		</div>
 
-        <div class="grid md:grid-cols-3 gap-8">
-            {#each features as feature, index (`feature${index}`)}
-                <div class="group relative">
-                    <div class="rounded-2xl border border-border bg-card p-8 transition-all hover:shadow-lg hover:border-accent/50">
-                    <div class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-ring/10">
-                        <feature.icon class="h-6 w-6 text-ring" />
-                    </div>
-                    <h3 class="text-xl font-semibold text-card-foreground mb-3">{feature.title}</h3>
-                    <p class="text-muted-foreground leading-relaxed">{feature.description}</p>
-                    </div>
-                </div>
-            {/each}
-        </div>
-    </div>
-</section>
\ No newline at end of file
+		<div class="grid md:grid-cols-3 gap-8">
+			{#each features as feature, index (`feature${index}`)}
+				<div class="group relative">
+					<div
+						class="rounded-2xl border border-border bg-card p-8 transition-all hover:shadow-lg hover:border-accent/50"
+					>
+						<div
+							class="mb-6 inline-flex h-12 w-12 items-center justify-center rounded-xl bg-ring/10"
+						>
+							<feature.icon class="h-6 w-6 text-ring" />
+						</div>
+						<h3 class="text-xl font-semibold text-card-foreground mb-3">{feature.title}</h3>
+						<p class="text-muted-foreground leading-relaxed">{feature.description}</p>
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>
diff --git a/frontend/src/lib/landingPage/Header.svelte b/frontend/src/lib/landingPage/Header.svelte
index d19a938..d81e47f 100644
--- a/frontend/src/lib/landingPage/Header.svelte
+++ b/frontend/src/lib/landingPage/Header.svelte
@@ -1,32 +1,48 @@
 <script lang="ts">
-    import { Button } from "@/components/ui/button";
-    import { Calendar } from "@lucide/svelte";
+	import { Button } from "@/components/ui/button";
+	import { Calendar } from "@lucide/svelte";
 
-    let { loggedIn }: { loggedIn: boolean } = $props();
+	let { loggedIn }: { loggedIn: boolean } = $props();
 </script>
 
-<header class="border-b border-border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="flex h-16 items-center justify-between">
-            <div class="flex items-center gap-2">
-                <Calendar class="h-6 w-6 text-ring" />
-                <span class="text-xl font-semibold text-foreground">InfoSections</span>
-            </div>
+<header
+	class="border-b border-border bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60"
+>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="flex h-16 items-center justify-between">
+			<div class="flex items-center gap-2">
+				<Calendar class="h-6 w-6 text-ring" />
+				<span class="text-xl font-semibold text-foreground">InfoSections</span>
+			</div>
 
-            <nav class="hidden md:flex items-center gap-8">
-                <a href="#features" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Features</a>
-                <a href="#pricing" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">Pricing</a>
-                <a href="#about" class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">About</a>
-            </nav>
+			<nav class="hidden md:flex items-center gap-8">
+				<a
+					href="#features"
+					class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+					>Features</a
+				>
+				<a
+					href="#pricing"
+					class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+					>Pricing</a
+				>
+				<a
+					href="#about"
+					class="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
+					>About</a
+				>
+			</nav>
 
-            {#if loggedIn}
-                <Button href="/dashboard" variant="outline">Dashboard</Button>
-            {:else}
-                <div class="flex gap-3 items-center">
-                    <Button href="/signup" class="bg-primary text-primary-foreground hover:bg-primary/90">Get Started</Button>
-                    <Button href="/login" variant="outline">Login</Button>
-                </div>
-            {/if}
-        </div>
-    </div>
-</header>
\ No newline at end of file
+			{#if loggedIn}
+				<Button href="/dashboard" variant="outline">Dashboard</Button>
+			{:else}
+				<div class="flex gap-3 items-center">
+					<Button href="/signup" class="bg-primary text-primary-foreground hover:bg-primary/90"
+						>Get Started</Button
+					>
+					<Button href="/login" variant="outline">Login</Button>
+				</div>
+			{/if}
+		</div>
+	</div>
+</header>
diff --git a/frontend/src/lib/landingPage/Hero.svelte b/frontend/src/lib/landingPage/Hero.svelte
index 02d0953..15aeb50 100644
--- a/frontend/src/lib/landingPage/Hero.svelte
+++ b/frontend/src/lib/landingPage/Hero.svelte
@@ -1,103 +1,108 @@
 <script>
-    import { Button } from "@/components/ui/button";
-    import { ArrowRight } from "@lucide/svelte";
+	import { Button } from "@/components/ui/button";
+	import { ArrowRight } from "@lucide/svelte";
 
-    let mostPopular = $state([
-        { name: "Church Website Front Page", visits: "47 visits" },
-        { name: "Only Approved Events", visits: "32 visits" },
-        { name: "Church Location Events", visits: "28 visits" },
-    ]);
+	let mostPopular = $state([
+		{ name: "Church Website Front Page", visits: "47 visits" },
+		{ name: "Only Approved Events", visits: "32 visits" },
+		{ name: "Church Location Events", visits: "28 visits" }
+	]);
 </script>
 
 <section class="relative overflow-hidden py-20 sm:py-32">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="grid lg:grid-cols-2 gap-12 items-center">
-            <div class="space-y-8">
-                <div class="inline-flex items-center gap-2 rounded-full bg-secondary px-4 py-1.5 text-sm font-medium text-secondary-foreground">
-                    <span class="h-1.5 w-1.5 rounded-full bg-ring animate-pulse"></span>
-                    Customization made simple
-                </div>
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="grid lg:grid-cols-2 gap-12 items-center">
+			<div class="space-y-8">
+				<div
+					class="inline-flex items-center gap-2 rounded-full bg-secondary px-4 py-1.5 text-sm font-medium text-secondary-foreground"
+				>
+					<span class="h-1.5 w-1.5 rounded-full bg-ring animate-pulse"></span>
+					Customization made simple
+				</div>
 
-                <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground text-balance">
-                    View events. A better way.
-                </h1>
+				<h1
+					class="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground text-balance"
+				>
+					View events. A better way.
+				</h1>
 
-                <p class="text-lg text-muted-foreground leading-relaxed max-w-xl">
-                    We offer a unified view of every event, sortable by location, tags, and custom filters so you can focus on what's happening, where it matters.
-                </p>
+				<p class="text-lg text-muted-foreground leading-relaxed max-w-xl">
+					We offer a unified view of every event, sortable by location, tags, and custom filters so
+					you can focus on what's happening, where it matters.
+				</p>
 
-                <div class="flex flex-col sm:flex-row gap-4">
-                    <div class="sm:w-fit w-full">
-                        <Button size="lg" href="/signup?free_trial=1" class="w-full bg-primary text-primary-foreground hover:bg-primary/90">
-                            Start Free Trial
-                            <ArrowRight class="ml-2 h-4 w-4" />
-                        </Button>
-                    </div>
-                    <Button size="lg" variant="outline">
-                        Watch Demo
-                    </Button>
-                </div>
+				<div class="flex flex-col sm:flex-row gap-4">
+					<div class="sm:w-fit w-full">
+						<Button
+							size="lg"
+							href="/signup?free_trial=1"
+							class="w-full bg-primary text-primary-foreground hover:bg-primary/90"
+						>
+							Start Free Trial
+							<ArrowRight class="ml-2 h-4 w-4" />
+						</Button>
+					</div>
+					<Button size="lg" variant="outline">Watch Demo</Button>
+				</div>
 
-                <div class="flex items-center gap-8 pt-4">
-                    <div>
-                        <div class="text-2xl font-bold text-foreground">Unlimited</div>
-                        <div class="text-sm text-muted-foreground">Custom Calendars</div>
-                    </div>
-                    <div class="h-12 w-px bg-border"></div>
-                    <div>
-                        <div class="text-2xl font-bold text-foreground">50k+</div>
-                        <div class="text-sm text-muted-foreground">Calendar Views</div>
-                    </div>
-                </div>
-            </div>
+				<div class="flex items-center gap-8 pt-4">
+					<div>
+						<div class="text-2xl font-bold text-foreground">Unlimited</div>
+						<div class="text-sm text-muted-foreground">Custom Calendars</div>
+					</div>
+					<div class="h-12 w-px bg-border"></div>
+					<div>
+						<div class="text-2xl font-bold text-foreground">50k+</div>
+						<div class="text-sm text-muted-foreground">Calendar Views</div>
+					</div>
+				</div>
+			</div>
 
-            <div class="relative">
-                <div class="relative rounded-2xl border border-border bg-card p-6 shadow-2xl">
-                    <div class="space-y-4">
-                        <div class="flex items-center justify-between">
-                            <h3 class="text-lg font-semibold text-card-foreground">Calendar Insights</h3>
-                            <div class="flex gap-2">
-                                <div class="h-2 w-2 rounded-full bg-ring"></div>
-                                <div class="h-2 w-2 rounded-full bg-muted"></div>
-                                <div class="h-2 w-2 rounded-full bg-muted"></div>
-                            </div>
-                        </div>
-                    </div>
+			<div class="relative">
+				<div class="relative rounded-2xl border border-border bg-card p-6 shadow-2xl">
+					<div class="space-y-4">
+						<div class="flex items-center justify-between">
+							<h3 class="text-lg font-semibold text-card-foreground">Calendar Insights</h3>
+							<div class="flex gap-2">
+								<div class="h-2 w-2 rounded-full bg-ring"></div>
+								<div class="h-2 w-2 rounded-full bg-muted"></div>
+								<div class="h-2 w-2 rounded-full bg-muted"></div>
+							</div>
+						</div>
+					</div>
 
-                    <div class="grid grid-cols-2 gap-4">
-                        <div class="rounded-lg bg-secondary p-4 space-y-2">
-                            <div class="text-sm font-medium text-secondary-foreground">Total Visits</div>
-                            <div class="text-3xl font-bold text-foreground">107</div>
-                            <div class="text-xs text-muted-foreground">Visits for your calendars</div>
-                        </div>
-                        <div class="rounded-lg bg-secondary p-4 space-y-2">
-                            <div class="text-sm font-medium text-secondary-foreground">Custom Calendars</div>
-                            <div class="text-3xl font-bold text-foreground">3</div>
-                            <div class="text-xs text-muted-foreground">Customized calendars</div>
-                        </div>
-                    </div>
+					<div class="grid grid-cols-2 gap-4">
+						<div class="rounded-lg bg-secondary p-4 space-y-2">
+							<div class="text-sm font-medium text-secondary-foreground">Total Visits</div>
+							<div class="text-3xl font-bold text-foreground">107</div>
+							<div class="text-xs text-muted-foreground">Visits for your calendars</div>
+						</div>
+						<div class="rounded-lg bg-secondary p-4 space-y-2">
+							<div class="text-sm font-medium text-secondary-foreground">Custom Calendars</div>
+							<div class="text-3xl font-bold text-foreground">3</div>
+							<div class="text-xs text-muted-foreground">Customized calendars</div>
+						</div>
+					</div>
 
-                    <div class="space-y-3 pt-2">
-                        <div class="text-sm font-medium text-card-foreground">Most Popular</div>
-                        {#each mostPopular as pop, index (`mostPopular${index}`)}
-                            <div class="flex items-center justify-between rounded-lg bg-muted/50 p-3">
-                                <div class="flex items-center gap-3">
-                                    <div class="h-8 w-8 rounded-full bg-ring/10 flex items-center justify-center">
-                                        <div class="h-4 w-4 rounded-full bg-ring"></div>
-                                    </div>
-                                    <div>
-                                        <div class="text-sm font-medium text-foreground">{pop.name}</div>
-                                        <div class="text-xs text-muted-foreground">{pop.visits}</div>
-                                    </div>
-                                </div>
-                                <Button variant="ghost" size="sm" class="text-xs">
-                                View
-                                </Button>
-                            </div>
-                        {/each}
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</section>
\ No newline at end of file
+					<div class="space-y-3 pt-2">
+						<div class="text-sm font-medium text-card-foreground">Most Popular</div>
+						{#each mostPopular as pop, index (`mostPopular${index}`)}
+							<div class="flex items-center justify-between rounded-lg bg-muted/50 p-3">
+								<div class="flex items-center gap-3">
+									<div class="h-8 w-8 rounded-full bg-ring/10 flex items-center justify-center">
+										<div class="h-4 w-4 rounded-full bg-ring"></div>
+									</div>
+									<div>
+										<div class="text-sm font-medium text-foreground">{pop.name}</div>
+										<div class="text-xs text-muted-foreground">{pop.visits}</div>
+									</div>
+								</div>
+								<Button variant="ghost" size="sm" class="text-xs">View</Button>
+							</div>
+						{/each}
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
diff --git a/frontend/src/lib/landingPage/Stats.svelte b/frontend/src/lib/landingPage/Stats.svelte
index 01801c9..7eed769 100644
--- a/frontend/src/lib/landingPage/Stats.svelte
+++ b/frontend/src/lib/landingPage/Stats.svelte
@@ -1,22 +1,22 @@
 <script lang="ts">
-    const stats = [
-        { value: "98%", label: "Customer satisfaction", company: "Feedback is greatly appreciated" },
-        { value: "2.5x", label: "Faster setup", company: "vs traditional methods" },
-        { value: "50k+", label: "Calendar Views", company: "and rising" },
-        { value: "24/7", label: "Always available", company: "Automated event fetching" },
-    ]
+	const stats = [
+		{ value: "98%", label: "Customer satisfaction", company: "Feedback is greatly appreciated" },
+		{ value: "2.5x", label: "Faster setup", company: "vs traditional methods" },
+		{ value: "50k+", label: "Calendar Views", company: "and rising" },
+		{ value: "24/7", label: "Always available", company: "Automated event fetching" }
+	];
 </script>
 
 <section class="py-20 sm:py-32">
-    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
-            {#each stats as stat, index (`stats${index}`)}
-                <div class="text-center space-y-2">
-                    <div class="text-4xl sm:text-5xl font-bold text-foreground">{stat.value}</div>
-                    <div class="text-base font-medium text-foreground">{stat.label}</div>
-                    <div class="text-sm text-muted-foreground">{stat.company}</div>
-                </div>
-            {/each}
-        </div>
-    </div>
-</section>
\ No newline at end of file
+	<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+		<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-8">
+			{#each stats as stat, index (`stats${index}`)}
+				<div class="text-center space-y-2">
+					<div class="text-4xl sm:text-5xl font-bold text-foreground">{stat.value}</div>
+					<div class="text-base font-medium text-foreground">{stat.label}</div>
+					<div class="text-sm text-muted-foreground">{stat.company}</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+</section>
diff --git a/frontend/src/lib/landingPage/authComponents/LoginForm.svelte b/frontend/src/lib/landingPage/authComponents/LoginForm.svelte
index dd2558a..f4830c7 100644
--- a/frontend/src/lib/landingPage/authComponents/LoginForm.svelte
+++ b/frontend/src/lib/landingPage/authComponents/LoginForm.svelte
@@ -1,78 +1,79 @@
 <script lang="ts">
-    import { cn } from "$lib/utils.js";
-    import * as Card from "$lib/components/ui/card/index.js";
-    import { Button } from "$lib/components/ui/button/index.js";
-    import * as Field from "$lib/components/ui/field/index.js";
-    import { Input } from "$lib/components/ui/input/index.js";
-    import type { HTMLAttributes } from "svelte/elements";
-    import { emailPasswordLogin } from "../../../routes/(mainWebsite)/login/login.remote";
-    import { googleLoginSignup } from "../../../routes/(mainWebsite)/signup/signup.remote";
+	import { cn } from "$lib/utils.js";
+	import * as Card from "$lib/components/ui/card/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as Field from "$lib/components/ui/field/index.js";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { emailPasswordLogin } from "../../../routes/(mainWebsite)/login/login.remote";
+	import { googleLoginSignup } from "../../../routes/(mainWebsite)/signup/signup.remote";
 
-    let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
 <div class={cn("flex flex-col gap-6", className)} {...restProps}>
-    <Card.Root>
-        <Card.Header class="text-center">
-            <Card.Title class="text-xl">Log into your account</Card.Title>
-            <Card.Description>Enter your email and password below to access your account</Card.Description>
-        </Card.Header>
-        <Card.Content>
-            <form {...emailPasswordLogin}>
-                <Field.Group>
-                    <Field.Field>
-                        <Field.Label for="email">Email</Field.Label>
-                        <Input id="email" {...emailPasswordLogin.fields.email.as("email")} />
-                        {#each emailPasswordLogin.fields.email.issues() as issue (`anIssueforemail${issue.message}`)}
-                            <Field.Error>{issue.message}</Field.Error>
-                        {/each}
-                    </Field.Field>
+	<Card.Root>
+		<Card.Header class="text-center">
+			<Card.Title class="text-xl">Log into your account</Card.Title>
+			<Card.Description>Enter your email and password below to access your account</Card.Description
+			>
+		</Card.Header>
+		<Card.Content>
+			<form {...emailPasswordLogin}>
+				<Field.Group>
+					<Field.Field>
+						<Field.Label for="email">Email</Field.Label>
+						<Input id="email" {...emailPasswordLogin.fields.email.as("email")} />
+						{#each emailPasswordLogin.fields.email.issues() as issue (`anIssueforemail${issue.message}`)}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
 
-                    <Field.Field>
-                        <Field.Label for="password">Password</Field.Label>
-                        <Input id="password" {...emailPasswordLogin.fields.password.as("password")} />
-                        {#each emailPasswordLogin.fields.password.issues() as issue (`anIssueforpassword${issue.message}`)}
-                            <Field.Error>{issue.message}</Field.Error>
-                        {/each}
-                    </Field.Field>
+					<Field.Field>
+						<Field.Label for="password">Password</Field.Label>
+						<Input id="password" {...emailPasswordLogin.fields.password.as("password")} />
+						{#each emailPasswordLogin.fields.password.issues() as issue (`anIssueforpassword${issue.message}`)}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
 
-                    <Field.Field>
-                        <Button type="submit">Login</Button>
-                    </Field.Field>
-                </Field.Group>
-            </form>
+					<Field.Field>
+						<Button type="submit">Login</Button>
+					</Field.Field>
+				</Field.Group>
+			</form>
 
-            <form {...googleLoginSignup}>
-                <Field.Group class="mt-5">
-                    <Field.Separator class="*:data-[slot=field-separator-content]:bg-card">
-                        Or continue with
-                    </Field.Separator>
-    
-                    <Field.Field class="flex">
-                        <Input {...googleLoginSignup.fields.id.as("hidden", "google_login")} />
-                        <Button variant="outline" type="submit">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                <path
-                                d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-                                fill="currentColor"
-                            />
-                            </svg>
-                            <span>Sign in with Google</span>
-                        </Button>
-                        {#each googleLoginSignup.fields.id.issues() as issue (`anIssueforoathGoogleLoginconfirm${issue.message}`)}
-                            <Field.Error>{issue.message}</Field.Error>
-                        {/each}
-                    </Field.Field>
-    
-                    <Field.Description class="text-center">
-                        Don't have an account? <a href="/signup">Sign up</a>
-                    </Field.Description>
-                </Field.Group>
-            </form>
-        </Card.Content>
-    </Card.Root>
-    <Field.Description class="px-6 text-center">
-        By clicking continue, you agree to our <a href="/terms">Terms of Service</a>
-        and <a href="/privacy">Privacy Policy</a>.
-    </Field.Description>
+			<form {...googleLoginSignup}>
+				<Field.Group class="mt-5">
+					<Field.Separator class="*:data-[slot=field-separator-content]:bg-card">
+						Or continue with
+					</Field.Separator>
+
+					<Field.Field class="flex">
+						<Input {...googleLoginSignup.fields.id.as("hidden", "google_login")} />
+						<Button variant="outline" type="submit">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path
+									d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+									fill="currentColor"
+								/>
+							</svg>
+							<span>Sign in with Google</span>
+						</Button>
+						{#each googleLoginSignup.fields.id.issues() as issue (`anIssueforoathGoogleLoginconfirm${issue.message}`)}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
+
+					<Field.Description class="text-center">
+						Don't have an account? <a href="/signup">Sign up</a>
+					</Field.Description>
+				</Field.Group>
+			</form>
+		</Card.Content>
+	</Card.Root>
+	<Field.Description class="px-6 text-center">
+		By clicking continue, you agree to our <a href="/terms">Terms of Service</a>
+		and <a href="/privacy">Privacy Policy</a>.
+	</Field.Description>
 </div>
diff --git a/frontend/src/lib/landingPage/authComponents/SignupForm.svelte b/frontend/src/lib/landingPage/authComponents/SignupForm.svelte
index 19e6df3..b985a3b 100644
--- a/frontend/src/lib/landingPage/authComponents/SignupForm.svelte
+++ b/frontend/src/lib/landingPage/authComponents/SignupForm.svelte
@@ -1,97 +1,106 @@
 <script lang="ts">
-    import { cn } from "$lib/utils.js";
-    import * as Card from "$lib/components/ui/card/index.js";
-    import { Button } from "$lib/components/ui/button/index.js";
-    import * as Field from "$lib/components/ui/field/index.js";
-    import { Input } from "$lib/components/ui/input/index.js";
-    import type { HTMLAttributes } from "svelte/elements";
-    import { createEmailPasswordSignup, googleLoginSignup } from "../../../routes/(mainWebsite)/signup/signup.remote";
+	import { cn } from "$lib/utils.js";
+	import * as Card from "$lib/components/ui/card/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import * as Field from "$lib/components/ui/field/index.js";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import {
+		createEmailPasswordSignup,
+		googleLoginSignup
+	} from "../../../routes/(mainWebsite)/signup/signup.remote";
 
-    let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
 </script>
 
 <div class={cn("flex flex-col gap-6", className)} {...restProps}>
-    <Card.Root>
-        <Card.Header class="text-center">
-            <Card.Title class="text-xl">Create your account</Card.Title>
-            <Card.Description>Enter your email below to create your account</Card.Description>
-        </Card.Header>
-        <Card.Content>
-            <form {...createEmailPasswordSignup}>
-                <Field.Group>
-                    <Field.Field>
-                        <Field.Label for="name">Full Name</Field.Label>
-                        <Input id="name" {...createEmailPasswordSignup.fields.name.as("text")} />
-                        {#each createEmailPasswordSignup.fields.name.issues() as issue (`anIssueforname${issue.message}`)}
-                            <Field.Error>{issue.message}</Field.Error>
-                        {/each}
-                    </Field.Field>
+	<Card.Root>
+		<Card.Header class="text-center">
+			<Card.Title class="text-xl">Create your account</Card.Title>
+			<Card.Description>Enter your email below to create your account</Card.Description>
+		</Card.Header>
+		<Card.Content>
+			<form {...createEmailPasswordSignup}>
+				<Field.Group>
+					<Field.Field>
+						<Field.Label for="name">Full Name</Field.Label>
+						<Input id="name" {...createEmailPasswordSignup.fields.name.as("text")} />
+						{#each createEmailPasswordSignup.fields.name.issues() as issue (`anIssueforname${issue.message}`)}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
 
-                    <Field.Field>
-                        <Field.Label for="email">Email</Field.Label>
-                        <Input id="email" {...createEmailPasswordSignup.fields.email.as("email")} />
-                        {#each createEmailPasswordSignup.fields.email.issues() as issue (`anIssueforemail${issue.message}`)}
-                            <Field.Error>{issue.message}</Field.Error>
-                        {/each}
-                    </Field.Field>
+					<Field.Field>
+						<Field.Label for="email">Email</Field.Label>
+						<Input id="email" {...createEmailPasswordSignup.fields.email.as("email")} />
+						{#each createEmailPasswordSignup.fields.email.issues() as issue (`anIssueforemail${issue.message}`)}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
 
-                    <Field.Field>
-                        <Field.Field class="grid grid-cols-2 gap-4">
-                            <Field.Field>
-                                <Field.Label for="password">Password</Field.Label>
-                                <Input id="password" {...createEmailPasswordSignup.fields.password.as("password")} />
-                                {#each createEmailPasswordSignup.fields.password.issues() as issue (`anIssueforpassword${issue.message}`)}
-                                    <Field.Error>{issue.message}</Field.Error>
-                                {/each}
-                            </Field.Field>
-                            <Field.Field>
-                                <Field.Label for="confirm-password">Confirm Password</Field.Label>
-                                <Input id="confirm-password" {...createEmailPasswordSignup.fields.passwordConfirm.as("password")} />
-                                {#each createEmailPasswordSignup.fields.passwordConfirm.issues() as issue (`anIssueforpasswordconfirm${issue.message}`)}
-                                    <Field.Error>{issue.message}</Field.Error>
-                                {/each}
-                            </Field.Field>
-                        </Field.Field>
-                        <Field.Description>Must be at least 8 characters long.</Field.Description>
-                    </Field.Field>
+					<Field.Field>
+						<Field.Field class="grid grid-cols-2 gap-4">
+							<Field.Field>
+								<Field.Label for="password">Password</Field.Label>
+								<Input
+									id="password"
+									{...createEmailPasswordSignup.fields.password.as("password")}
+								/>
+								{#each createEmailPasswordSignup.fields.password.issues() as issue (`anIssueforpassword${issue.message}`)}
+									<Field.Error>{issue.message}</Field.Error>
+								{/each}
+							</Field.Field>
+							<Field.Field>
+								<Field.Label for="confirm-password">Confirm Password</Field.Label>
+								<Input
+									id="confirm-password"
+									{...createEmailPasswordSignup.fields.passwordConfirm.as("password")}
+								/>
+								{#each createEmailPasswordSignup.fields.passwordConfirm.issues() as issue (`anIssueforpasswordconfirm${issue.message}`)}
+									<Field.Error>{issue.message}</Field.Error>
+								{/each}
+							</Field.Field>
+						</Field.Field>
+						<Field.Description>Must be at least 8 characters long.</Field.Description>
+					</Field.Field>
 
-                    <Field.Field>
-                        <Button type="submit">Create Account</Button>
-                    </Field.Field>
-                </Field.Group>
-            </form>
+					<Field.Field>
+						<Button type="submit">Create Account</Button>
+					</Field.Field>
+				</Field.Group>
+			</form>
 
-            <form {...googleLoginSignup}>
-                <Field.Group class="mt-5">
-                    <Field.Separator class="*:data-[slot=field-separator-content]:bg-card">
-                        Or continue with
-                    </Field.Separator>
-    
-                    <Field.Field class="flex">
-                        <Input {...googleLoginSignup.fields.id.as("hidden", "google_login")} />
-                        <Button variant="outline" type="submit">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                                <path
-                                d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
-                                fill="currentColor"
-                            />
-                            </svg>
-                            <span>Sign in with Google</span>
-                        </Button>
-                        {#each googleLoginSignup.fields.id.issues() as issue (`anIssueforoathGoogleLoginconfirm${issue.message}`)}
-                            <Field.Error>{issue.message}</Field.Error>
-                        {/each}
-                    </Field.Field>
-    
-                    <Field.Description class="text-center">
-                        Already have an account? <a href="/login">Login</a>
-                    </Field.Description>
-                </Field.Group>
-            </form>
-        </Card.Content>
-    </Card.Root>
-    <Field.Description class="px-6 text-center">
-        By clicking continue, you agree to our <a href="/terms">Terms of Service</a>
-        and <a href="/privacy">Privacy Policy</a>.
-    </Field.Description>
+			<form {...googleLoginSignup}>
+				<Field.Group class="mt-5">
+					<Field.Separator class="*:data-[slot=field-separator-content]:bg-card">
+						Or continue with
+					</Field.Separator>
+
+					<Field.Field class="flex">
+						<Input {...googleLoginSignup.fields.id.as("hidden", "google_login")} />
+						<Button variant="outline" type="submit">
+							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path
+									d="M12.48 10.92v3.28h7.84c-.24 1.84-.853 3.187-1.787 4.133-1.147 1.147-2.933 2.4-6.053 2.4-4.827 0-8.6-3.893-8.6-8.72s3.773-8.72 8.6-8.72c2.6 0 4.507 1.027 5.907 2.347l2.307-2.307C18.747 1.44 16.133 0 12.48 0 5.867 0 .307 5.387.307 12s5.56 12 12.173 12c3.573 0 6.267-1.173 8.373-3.36 2.16-2.16 2.84-5.213 2.84-7.667 0-.76-.053-1.467-.173-2.053H12.48z"
+									fill="currentColor"
+								/>
+							</svg>
+							<span>Sign in with Google</span>
+						</Button>
+						{#each googleLoginSignup.fields.id.issues() as issue (`anIssueforoathGoogleLoginconfirm${issue.message}`)}
+							<Field.Error>{issue.message}</Field.Error>
+						{/each}
+					</Field.Field>
+
+					<Field.Description class="text-center">
+						Already have an account? <a href="/login">Login</a>
+					</Field.Description>
+				</Field.Group>
+			</form>
+		</Card.Content>
+	</Card.Root>
+	<Field.Description class="px-6 text-center">
+		By clicking continue, you agree to our <a href="/terms">Terms of Service</a>
+		and <a href="/privacy">Privacy Policy</a>.
+	</Field.Description>
 </div>
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 7267faf..f2d8004 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -19,90 +19,119 @@ export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & { ref?:
 
 /**
  * This function get the url that is passed and makes a fetch request to recieve the file. The function then returns the file in a blob format.
- * @param fileLink 
+ * @param fileLink
  * @returns Blob
  */
-export async function fetchFileFromURL(fileLink: string): Promise<{error: false, blob: Blob} | {error: true, msg: unknown}> {
+export async function fetchFileFromURL(
+	fileLink: string
+): Promise<{ error: false; blob: Blob } | { error: true; msg: unknown }> {
 	try {
 		const res = await fetch(fileLink);
 		const blob = await res.blob();
 		return {
 			error: false,
 			blob
-		}
+		};
 	} catch (err) {
 		return {
 			error: true,
 			msg: err
-		}
+		};
 	}
 }
 
 // Don't judge
 export function clearFileInput(ctrl: HTMLElement | null) {
-	if (ctrl === null) return
+	if (ctrl === null) return;
 	try {
 		//@ts-ignore
 		ctrl.value = null;
 		//@ts-ignore
 		if (ctrl.value) {
 			//@ts-ignore
-			ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl); 
-		} 
-		} catch(ex) {
-	}
+			ctrl.parentNode.replaceChild(ctrl.cloneNode(true), ctrl);
+		}
+	} catch (ex) {}
 }
 
-export const LONGDAYTOSTRING = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"];
-export const MONTHTOSTRING = ["", "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+export const LONGDAYTOSTRING = [
+	"Sunday",
+	"Monday",
+	"Tuesday",
+	"Wednesday",
+	"Thursday",
+	"Friday",
+	"Saturday",
+	"Sunday"
+];
+export const MONTHTOSTRING = [
+	"",
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
 
 export function dateRangeOverlaps(a_start: number, a_end: number, b_start: number, b_end: number) {
-    if (a_start <= b_start && b_start <= a_end) return true; // b starts in a
-    if (a_start <= b_end   && b_end   <= a_end) return true; // b ends in a
-    if (b_start <  a_start && a_end   <  b_end) return true; // a in b
-    return false;
+	if (a_start <= b_start && b_start <= a_end) return true; // b starts in a
+	if (a_start <= b_end && b_end <= a_end) return true; // b ends in a
+	if (b_start < a_start && a_end < b_end) return true; // a in b
+	return false;
 }
 
 export interface CustomImageIFeedDBModel extends RecordModel {
-	picture: string | File,
-	registrationURL: string,
-	showLink: boolean,
-	linkText: string,
-	imageFeed: string[],
-	owner: string
+	picture: string | File;
+	registrationURL: string;
+	showLink: boolean;
+	linkText: string;
+	imageFeed: string[];
+	owner: string;
 }
 
 export interface ImageFeedDBModel extends RecordModel {
-	name: string,
-	owner: string,
-	logo: string | File,
-	visits: number,
-	description: string,
-	displaySettings: ImageFeedCustomizations,
-	created: string,
-	updated: string,
-	filters: ImageFeedFilters,
-	additionalCalendars: string[]
+	name: string;
+	owner: string;
+	logo: string | File;
+	visits: number;
+	description: string;
+	displaySettings: ImageFeedCustomizations;
+	created: string;
+	updated: string;
+	filters: ImageFeedFilters;
+	additionalCalendars: string[];
 }
 
 export interface EventListDBModel extends RecordModel {
-	name: string,
-	owner: string,
-	logo: string | File,
-	visits: number,
-	description: string,
-	displaySettings: ImageListCustomizations,
-	created: string,
-	updated: string,
-	filters: EventListFilters
+	name: string;
+	owner: string;
+	logo: string | File;
+	visits: number;
+	description: string;
+	displaySettings: ImageListCustomizations;
+	created: string;
+	updated: string;
+	filters: EventListFilters;
 }
 
 // Dont you dare judge
 export function toggleFullScreen() {
-	const elem = document.documentElement
+	const elem = document.documentElement;
 	// ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
 	//@ts-ignore
-	if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
+	if (
+		(document.fullScreenElement !== undefined && document.fullScreenElement === null) ||
+		(document.msFullscreenElement !== undefined && document.msFullscreenElement === null) ||
+		(document.mozFullScreen !== undefined && !document.mozFullScreen) ||
+		(document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)
+	) {
 		//@ts-ignore
 		if (elem.requestFullScreen) {
 			//@ts-ignore
@@ -110,41 +139,48 @@ export function toggleFullScreen() {
 			//@ts-ignore
 		} else if (elem.mozRequestFullScreen) {
 			//@ts-ignore
-			elem.mozRequestFullScreen();//@ts-ignore
-		} else if (elem.webkitRequestFullScreen) {//@ts-ignore
-			elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);//@ts-ignore
-		} else if (elem.msRequestFullscreen) {//@ts-ignore
-			elem.msRequestFullscreen();//@ts-ignore
+			elem.mozRequestFullScreen(); //@ts-ignore
+		} else if (elem.webkitRequestFullScreen) {
+			//@ts-ignore
+			elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); //@ts-ignore
+		} else if (elem.msRequestFullscreen) {
+			//@ts-ignore
+			elem.msRequestFullscreen(); //@ts-ignore
 		}
-	} else {//@ts-ignore
-		if (document.cancelFullScreen) {//@ts-ignore
-			document.cancelFullScreen();//@ts-ignore
-		} else if (document.mozCancelFullScreen) {//@ts-ignore
-			document.mozCancelFullScreen();//@ts-ignore
-		} else if (document.webkitCancelFullScreen) {//@ts-ignore
-			document.webkitCancelFullScreen();//@ts-ignore
-		} else if (document.msExitFullscreen) {//@ts-ignore
+	} else {
+		//@ts-ignore
+		if (document.cancelFullScreen) {
+			//@ts-ignore
+			document.cancelFullScreen(); //@ts-ignore
+		} else if (document.mozCancelFullScreen) {
+			//@ts-ignore
+			document.mozCancelFullScreen(); //@ts-ignore
+		} else if (document.webkitCancelFullScreen) {
+			//@ts-ignore
+			document.webkitCancelFullScreen(); //@ts-ignore
+		} else if (document.msExitFullscreen) {
+			//@ts-ignore
 			document.msExitFullscreen();
 		}
 	}
 }
 
 export type ImageFeedCustomizations = {
-	showEventExtraInfo: boolean,
-	showEventName: boolean,
-	showEventDescription: boolean,
-	showEventRegistration: boolean,
-	feedDurationMS: number,
-}
+	showEventExtraInfo: boolean;
+	showEventName: boolean;
+	showEventDescription: boolean;
+	showEventRegistration: boolean;
+	feedDurationMS: number;
+};
 
 export type ImageListCustomizations = {
-	displayStyle: "minimal" | "expanded",
-	showEventName: boolean,
-	showEventDescription: boolean,
-	showEventRegistration: boolean,
-	showUpcomingEventsTextAndDesc: boolean,
-	setTransparentBackground: boolean
-}
+	displayStyle: "minimal" | "expanded";
+	showEventName: boolean;
+	showEventDescription: boolean;
+	showEventRegistration: boolean;
+	showUpcomingEventsTextAndDesc: boolean;
+	setTransparentBackground: boolean;
+};
 
 export const defaultImageListCustomizations: ImageListCustomizations = {
 	displayStyle: "minimal",
@@ -153,143 +189,145 @@ export const defaultImageListCustomizations: ImageListCustomizations = {
 	showEventRegistration: true,
 	showUpcomingEventsTextAndDesc: false,
 	setTransparentBackground: false
-}
+};
 
 export const defaultImageFeedCustomizations: ImageFeedCustomizations = {
 	showEventExtraInfo: false,
 	showEventName: true,
 	showEventDescription: true,
 	showEventRegistration: true,
-	feedDurationMS: 7000,
-}
+	feedDurationMS: 7000
+};
 
 export type ImageFeedFilters = {
-	onlyShowFeatured: boolean,
-	hideUnpublished: boolean,
-	hideRecurringEvents: boolean,
-}
+	onlyShowFeatured: boolean;
+	hideUnpublished: boolean;
+	hideRecurringEvents: boolean;
+};
 
 export type EventListFilters = ImageFeedFilters;
 
 export const defaultImageFeedFilters: ImageFeedFilters = {
 	onlyShowFeatured: true,
 	hideUnpublished: true,
-	hideRecurringEvents: false,
-}
+	hideRecurringEvents: false
+};
 
 export const defaultEventListFilters: EventListFilters = {
 	onlyShowFeatured: true,
 	hideUnpublished: true,
-	hideRecurringEvents: false,
-}
+	hideRecurringEvents: false
+};
 
 export interface UserModel extends RecordModel {
-	name: string,
-	email: string,
-	avatar: string,
-	customerId: string,
-	priceId: string,
-	new: boolean,
-	accessLevel: "none" | "standard" | "premium",
-	subscriptionURL: string
-	freeTrialURL: string
+	name: string;
+	email: string;
+	avatar: string;
+	customerId: string;
+	priceId: string;
+	new: boolean;
+	accessLevel: "none" | "standard" | "premium";
+	subscriptionURL: string;
+	freeTrialURL: string;
 }
 
 export interface IntegrationModel extends RecordModel {
-	prettyName: string,
-	owner: string,
-	service: "planningcenter" | "breeze" | "google" | "twitter"
-	refreshToken: string,
-	accessToken: string,
-	refreshTokenExpires: number,
-	accessTokenExpires: number
-	lastEventsFetch: string,
-	status: "connected" | "syncing" | "error" | "disconnected"
+	prettyName: string;
+	owner: string;
+	service: "planningcenter" | "breeze" | "google" | "twitter";
+	refreshToken: string;
+	accessToken: string;
+	refreshTokenExpires: number;
+	accessTokenExpires: number;
+	lastEventsFetch: string;
+	status: "connected" | "syncing" | "error" | "disconnected";
 }
 
 export function capitalizeFirstLetter(str: string) {
-  if (typeof str !== 'string' || str.length === 0) {
-    return str; // Handle non-string inputs or empty strings
-  }
-  return str.charAt(0).toUpperCase() + str.slice(1);
+	if (typeof str !== "string" || str.length === 0) {
+		return str; // Handle non-string inputs or empty strings
+	}
+	return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
 export function timeAgo(dateParam: Date | string | number) {
-    if (!dateParam) {
-        return null;
-    }
+	if (!dateParam) {
+		return null;
+	}
 
-    const date = new Date(dateParam); // Ensure it's a Date object
-    const now = new Date();
+	const date = new Date(dateParam); // Ensure it's a Date object
+	const now = new Date();
 	//@ts-ignore
-    const diffInMs = now - date; // Difference in milliseconds
-
-    const seconds = Math.round(diffInMs / 1000);
-    const minutes = Math.round(seconds / 60);
-    const hours = Math.round(minutes / 60);
-    const days = Math.round(hours / 24);
-
-    // Less than a minute ago
-    if (seconds < 60) {
-        return `${seconds} second${seconds === 1 ? '' : 's'} ago`;
-    }
-    // Less than an hour ago
-    if (minutes < 60) {
-        return `${minutes} minute${minutes === 1 ? '' : 's'} ago`;
-    }
-    // Less than 24 hours ago (a day ago)
-    if (hours < 24) {
-        return `${hours} hour${hours === 1 ? '' : 's'} ago`;
-    }
-    // Less than a month ago (e.g., 1 day ago, 5 days ago)
-    if (days < 30) { // Approximating a month as 30 days
-        return `${days} day${days === 1 ? '' : 's'} ago`;
-    }
-
-    // Older than a month, return formatted date
-    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+	const diffInMs = now - date; // Difference in milliseconds
+
+	const seconds = Math.round(diffInMs / 1000);
+	const minutes = Math.round(seconds / 60);
+	const hours = Math.round(minutes / 60);
+	const days = Math.round(hours / 24);
+
+	// Less than a minute ago
+	if (seconds < 60) {
+		return `${seconds} second${seconds === 1 ? "" : "s"} ago`;
+	}
+	// Less than an hour ago
+	if (minutes < 60) {
+		return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
+	}
+	// Less than 24 hours ago (a day ago)
+	if (hours < 24) {
+		return `${hours} hour${hours === 1 ? "" : "s"} ago`;
+	}
+	// Less than a month ago (e.g., 1 day ago, 5 days ago)
+	if (days < 30) {
+		// Approximating a month as 30 days
+		return `${days} day${days === 1 ? "" : "s"} ago`;
+	}
+
+	// Older than a month, return formatted date
+	const options = { year: "numeric", month: "long", day: "numeric" };
 
 	//@ts-ignore
-    return date.toLocaleDateString(undefined, options); // Use default locale
+	return date.toLocaleDateString(undefined, options); // Use default locale
 }
 
 export function timeWhen(dateParam: Date | string | number) {
-    if (!dateParam) {
-        return null;
-    }
+	if (!dateParam) {
+		return null;
+	}
 
-    const date = new Date(dateParam); // Ensure it's a Date object
-    const now = new Date();
+	const date = new Date(dateParam); // Ensure it's a Date object
+	const now = new Date();
 	//@ts-ignore
-    const diffInMs = date - now; // Difference in milliseconds
-
-    const seconds = Math.round(diffInMs / 1000);
-    const minutes = Math.round(seconds / 60);
-    const hours = Math.round(minutes / 60);
-    const days = Math.round(hours / 24);
-
-    // Less than a minute ago
-    if (seconds < 60) {
-        return `${seconds} second${seconds === 1 ? '' : 's'}`;
-    }
-    // Less than an hour ago
-    if (minutes < 60) {
-        return `${minutes} minute${minutes === 1 ? '' : 's'}`;
-    }
-    // Less than 24 hours ago (a day ago)
-    if (hours < 24) {
-        return `${hours} hour${hours === 1 ? '' : 's'}`;
-    }
-    // Less than a month ago (e.g., 1 day ago, 5 days ago)
-    if (days < 30) { // Approximating a month as 30 days
-        return `${days} day${days === 1 ? '' : 's'}`;
-    }
-
-    // Older than a month, return formatted date
-    const options = { year: 'numeric', month: 'long', day: 'numeric' };
+	const diffInMs = date - now; // Difference in milliseconds
+
+	const seconds = Math.round(diffInMs / 1000);
+	const minutes = Math.round(seconds / 60);
+	const hours = Math.round(minutes / 60);
+	const days = Math.round(hours / 24);
+
+	// Less than a minute ago
+	if (seconds < 60) {
+		return `${seconds} second${seconds === 1 ? "" : "s"}`;
+	}
+	// Less than an hour ago
+	if (minutes < 60) {
+		return `${minutes} minute${minutes === 1 ? "" : "s"}`;
+	}
+	// Less than 24 hours ago (a day ago)
+	if (hours < 24) {
+		return `${hours} hour${hours === 1 ? "" : "s"}`;
+	}
+	// Less than a month ago (e.g., 1 day ago, 5 days ago)
+	if (days < 30) {
+		// Approximating a month as 30 days
+		return `${days} day${days === 1 ? "" : "s"}`;
+	}
+
+	// Older than a month, return formatted date
+	const options = { year: "numeric", month: "long", day: "numeric" };
 
 	//@ts-ignore
-    return date.toLocaleDateString(undefined, options); // Use default locale
+	return date.toLocaleDateString(undefined, options); // Use default locale
 }
 
 export async function refreshingEvents() {
@@ -306,17 +344,17 @@ export async function refreshingEvents() {
 export function getDaysInMonth(date: Temporal.ZonedDateTime): Temporal.ZonedDateTime[] {
 	const firstDay = date.with({ day: 1 });
 	const lastDay = date.with({ day: date.daysInMonth });
-	
+
 	const days: Temporal.ZonedDateTime[] = [];
-	
+
 	// Add days from previous month to start on Sunday
 	const startDayOfWeek = firstDay.dayOfWeek !== 7 ? firstDay.dayOfWeek : 0;
 
 	for (let i = startDayOfWeek; i >= 1; i--) {
-		const prevDate = firstDay.subtract({ days: i }).startOfDay() //new Date(year, month, -i)
-		days.push(prevDate)
+		const prevDate = firstDay.subtract({ days: i }).startOfDay(); //new Date(year, month, -i)
+		days.push(prevDate);
 	}
-	
+
 	// Add days of current month
 	for (let i = 0; i <= lastDay.day - 1; i++) {
 		days.push(firstDay.add({ days: i }));
@@ -332,59 +370,68 @@ export function getDaysInMonth(date: Temporal.ZonedDateTime): Temporal.ZonedDate
 	}
 
 	// Add days from next month to complete the grid
-	const remainingDays = (rowsRequired * 7) - days.length;
+	const remainingDays = rowsRequired * 7 - days.length;
 
 	for (let i = 1; i <= remainingDays; i++) {
 		days.push(lastDay.add({ days: i }).startOfDay());
 	}
 
-	return days
+	return days;
 }
 
-export function getDayRange(startDate: Temporal.ZonedDateTime, days: number): Temporal.ZonedDateTime[] {
-	const range: Temporal.ZonedDateTime[] = []
+export function getDayRange(
+	startDate: Temporal.ZonedDateTime,
+	days: number
+): Temporal.ZonedDateTime[] {
+	const range: Temporal.ZonedDateTime[] = [];
 	for (let i = 0; i < days; i++) {
 		range.push(startDate.add({ days: i }));
 	}
-	return range
+	return range;
 }
 
 export function isSameDay(date1: Temporal.ZonedDateTime, date2: Temporal.ZonedDateTime): boolean {
-	return (
-		date1.year === date2.year &&
-		date1.month === date2.month &&
-		date1.day === date2.day
-	)
+	return date1.year === date2.year && date1.month === date2.month && date1.day === date2.day;
 }
 
-export function getEventsForDate(events: EventDBModel[], day: Temporal.ZonedDateTime, nextDay: Temporal.ZonedDateTime): EventDBModel[] {
+export function getEventsForDate(
+	events: EventDBModel[],
+	day: Temporal.ZonedDateTime,
+	nextDay: Temporal.ZonedDateTime
+): EventDBModel[] {
 	return events.filter((event) => {
-		return dateRangeOverlaps(day.toInstant().epochMilliseconds, nextDay.toInstant().epochMilliseconds, (new Date(event.startTime)).valueOf(), (new Date(event.endTime)).valueOf())
-	})
+		return dateRangeOverlaps(
+			day.toInstant().epochMilliseconds,
+			nextDay.toInstant().epochMilliseconds,
+			new Date(event.startTime).valueOf(),
+			new Date(event.endTime).valueOf()
+		);
+	});
 }
 
 export type WeekSheetTimeSlot = {
-    startMinute: number;
-    endMinute: number;
-    link: string;
-}
+	startMinute: number;
+	endMinute: number;
+	link: string;
+};
 
-export type URLRefHits = { name: string, hits: number }
+export type URLRefHits = { name: string; hits: number };
 
 export interface DynamicURLModel extends RecordModel {
-	owner: string,
-	defaultRedirectTo: string
-	timeZone: Temporal.TimeZoneLike
-	weekSheet: WeekSheetTimeSlot[][],
-	enableWeekSheet: boolean,
-	overrideRedirectTo: string
-	enableOverrideRedirect: boolean,
-	disableURL: boolean,
-	refs: URLRefHits[],
-	created: string,
-	updated: string,
-	overrideExpiresIn: string
-	overrideExpireInStr: "never" | "15min" | "30min" | "1hour" | "2hour" | "4hour" | "8hour" | "16hour" | "set"
+	owner: string;
+	defaultRedirectTo: string;
+	timeZone: Temporal.TimeZoneLike;
+	weekSheet: WeekSheetTimeSlot[][];
+	enableWeekSheet: boolean;
+	overrideRedirectTo: string;
+	enableOverrideRedirect: boolean;
+	disableURL: boolean;
+	refs: URLRefHits[];
+	created: string;
+	updated: string;
+	overrideExpiresIn: string;
+	overrideExpireInStr:
+		"never" | "15min" | "30min" | "1hour" | "2hour" | "4hour" | "8hour" | "16hour" | "set";
 }
 
 export const TIMEZONES = [
@@ -411,13 +458,13 @@ export const TIMEZONES = [
 ];
 
 export interface AvailableIntegration {
-  id: string;
-  name: string;
-  slug: string;
-  description: string;
-  icon: IntegrationModel["service"];
-  docsUrl: string;
-  comingSoon: boolean
+	id: string;
+	name: string;
+	slug: string;
+	description: string;
+	icon: IntegrationModel["service"];
+	docsUrl: string;
+	comingSoon: boolean;
 }
 
 export const availableIntegrations: AvailableIntegration[] = [
@@ -425,10 +472,11 @@ export const availableIntegrations: AvailableIntegration[] = [
 		id: "planningcenter",
 		name: "Planning Center",
 		slug: "planningcenter",
-		description: "Sync events from Planning Center Calendar. Automatically imports services, events, and schedules.",
+		description:
+			"Sync events from Planning Center Calendar. Automatically imports services, events, and schedules.",
 		icon: "planningcenter",
 		docsUrl: "https://www.planningcenter.com/",
-		comingSoon: false,
+		comingSoon: false
 	},
 	{
 		id: "twitter",
@@ -437,7 +485,7 @@ export const availableIntegrations: AvailableIntegration[] = [
 		description: "Integrate X Ai features like speech to text and translation.",
 		icon: "twitter",
 		docsUrl: "https://docs.x.com",
-		comingSoon: false,
+		comingSoon: false
 	},
 	{
 		id: "breeze",
@@ -446,38 +494,45 @@ export const availableIntegrations: AvailableIntegration[] = [
 		description: "Connect with Breeze Church Management to sync your church events and calendar.",
 		icon: "breeze",
 		docsUrl: "https://www.breezechms.com/",
-		comingSoon: true,
+		comingSoon: true
 	},
 	{
 		id: "googlecalendar",
 		name: "Google Calendar",
 		slug: "google-calendar",
-		description: "Import events from Google Calendar. Supports multiple calendars and automatic sync.",
+		description:
+			"Import events from Google Calendar. Supports multiple calendars and automatic sync.",
 		icon: "google",
 		docsUrl: "https://calendar.google.com/",
-		comingSoon: true,
+		comingSoon: true
 	}
 ];
 
 export const errorTypes = {
-	"signup_stripe_error": "Error using the stripe SDK.",
-	"signup_oath_no_state": "Error connecting with Oath provider.",
-	"signup_auth_method_get": "Failed to get Oath Method",
-	"signup_auth_signup_fail": "Failed to signup with Oath",
-	"signup_after_oath": "Failed to signup."
-}
+	signup_stripe_error: "Error using the stripe SDK.",
+	signup_oath_no_state: "Error connecting with Oath provider.",
+	signup_auth_method_get: "Failed to get Oath Method",
+	signup_auth_signup_fail: "Failed to signup with Oath",
+	signup_after_oath: "Failed to signup."
+};
 
 export function hasKey<T extends object>(obj: T, key: PropertyKey): key is keyof T {
-  return key in obj;
+	return key in obj;
 }
 
-export function generateIframeCode(iframeLink: string, iframeTitle: string, id: string, infosectionsLink: string, removeScript?: boolean) {
+export function generateIframeCode(
+	iframeLink: string,
+	iframeTitle: string,
+	id: string,
+	infosectionsLink: string,
+	removeScript?: boolean
+) {
 	let text: string[] = [];
 	if (removeScript) {
 		text = [
-			'<iframe',
+			"<iframe",
 			'  style="background:none transparent;border:none;display:block;"',
-			'  allowtransparency',
+			"  allowtransparency",
 			'  width="100%"',
 			'  height="100%"',
 			`  src="${iframeLink}"`,
@@ -485,15 +540,15 @@ export function generateIframeCode(iframeLink: string, iframeTitle: string, id:
 			`  title="${iframeTitle}"`,
 			`  id="iframe${id}"`,
 			'  frameborder="0"',
-			'></iframe>'
-		]
+			"></iframe>"
+		];
 	} else {
 		text = [
 			`<script async src="${infosectionsLink}/resizeObserver.js">`,
-			'</script>',
-			'<iframe',
+			"</script>",
+			"<iframe",
 			'  style="background:none transparent;border:none;display:block;"',
-			'  allowtransparency',
+			"  allowtransparency",
 			'  width="100%"',
 			'  height="100%"',
 			`  src="${iframeLink}"`,
@@ -501,9 +556,9 @@ export function generateIframeCode(iframeLink: string, iframeTitle: string, id:
 			`  title="${iframeTitle}"`,
 			`  id="iframe${id}"`,
 			'  frameborder="0"',
-			'></iframe>'
-		]
+			"></iframe>"
+		];
 	}
 
 	return text.join("\n");
-}
\ No newline at end of file
+}
diff --git a/frontend/src/lib/valibotSchemaHelpers.ts b/frontend/src/lib/valibotSchemaHelpers.ts
index bed1a07..3f50246 100644
--- a/frontend/src/lib/valibotSchemaHelpers.ts
+++ b/frontend/src/lib/valibotSchemaHelpers.ts
@@ -1,8 +1,8 @@
 import * as v from "valibot";
 
 export const EmailSchema = v.pipe(
-  v.string(),
-  v.nonEmpty('Please enter your email.'),
-  v.email('The email is badly formatted.'),
-  v.maxLength(30, 'Your email is too long.')
-);
\ No newline at end of file
+	v.string(),
+	v.nonEmpty("Please enter your email."),
+	v.email("The email is badly formatted."),
+	v.maxLength(30, "Your email is too long.")
+);
diff --git a/frontend/src/routes/(mainWebsite)/+layout.server.ts b/frontend/src/routes/(mainWebsite)/+layout.server.ts
index 1fcc361..583f6b3 100644
--- a/frontend/src/routes/(mainWebsite)/+layout.server.ts
+++ b/frontend/src/routes/(mainWebsite)/+layout.server.ts
@@ -1,32 +1,32 @@
-import type { UserModel } from '@/utils';
-import { redirect } from '@sveltejs/kit';
+import type { UserModel } from "@/utils";
+import { redirect } from "@sveltejs/kit";
 import { config } from "dotenv";
 
 config();
 
 export async function load({ locals, url }) {
-    if (locals.user) {
-        try {
-            const user: UserModel = await locals.pb.collection("users").getOne(locals.user.id, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-            
-            return {
-                user,
-                avatar: locals.pb.files.getURL(user, user.avatar),
-                pathname: url.pathname,
-                stripeCustomerPortal: process.env["STRIPE_CUSTOMER_PORTAL_LINK"]!
-            }
-        } catch (err) {
-            console.log(err);
+	if (locals.user) {
+		try {
+			const user: UserModel = await locals.pb.collection("users").getOne(locals.user.id, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
 
-            throw redirect(307, "/logout");
-        }
-    }
-    return {
-        pathname: url.pathname,
-        stripeCustomerPortal: process.env["STRIPE_CUSTOMER_PORTAL_LINK"]!
-    }
-}
\ No newline at end of file
+			return {
+				user,
+				avatar: locals.pb.files.getURL(user, user.avatar),
+				pathname: url.pathname,
+				stripeCustomerPortal: process.env["STRIPE_CUSTOMER_PORTAL_LINK"]!
+			};
+		} catch (err) {
+			console.log(err);
+
+			throw redirect(307, "/logout");
+		}
+	}
+	return {
+		pathname: url.pathname,
+		stripeCustomerPortal: process.env["STRIPE_CUSTOMER_PORTAL_LINK"]!
+	};
+}
diff --git a/frontend/src/routes/(mainWebsite)/+page.server.ts b/frontend/src/routes/(mainWebsite)/+page.server.ts
index 6ebd1d1..10eedb8 100644
--- a/frontend/src/routes/(mainWebsite)/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/+page.server.ts
@@ -1,3 +1,3 @@
 export async function load({ parent }) {
-    await parent();
-}
\ No newline at end of file
+	await parent();
+}
diff --git a/frontend/src/routes/(mainWebsite)/+page.svelte b/frontend/src/routes/(mainWebsite)/+page.svelte
index ed5bfa9..550f944 100644
--- a/frontend/src/routes/(mainWebsite)/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/+page.svelte
@@ -1,35 +1,37 @@
 <script lang="ts">
-    import Features from "@/landingPage/Features.svelte";
-    import Header from "@/landingPage/Header.svelte";
-    import { afterNavigate } from "$app/navigation";
-    import { errorTypes, hasKey } from "@/utils.js";
-    import Stats from "@/landingPage/Stats.svelte";
-    import Hero from "@/landingPage/Hero.svelte";
-    import CTA from "@/landingPage/CTA.svelte";
-    import { browser } from "$app/environment";
-    import { toast } from "svelte-sonner";
-    import { page } from "$app/stores";
+	import Features from "@/landingPage/Features.svelte";
+	import Header from "@/landingPage/Header.svelte";
+	import { afterNavigate } from "$app/navigation";
+	import { errorTypes, hasKey } from "@/utils.js";
+	import Stats from "@/landingPage/Stats.svelte";
+	import Hero from "@/landingPage/Hero.svelte";
+	import CTA from "@/landingPage/CTA.svelte";
+	import { browser } from "$app/environment";
+	import { toast } from "svelte-sonner";
+	import { page } from "$app/stores";
 
-    let { data } = $props();
-    
+	let { data } = $props();
 
-    afterNavigate(() => {
+	afterNavigate(() => {
 		if (browser) {
-            const errorGot = $page.url.searchParams.get("error");
-            if (!errorGot) return;
-            if (hasKey(errorTypes, errorGot)) {
-                toast.error(errorTypes[errorGot], { description: "Please try again later.", duration: 20000 });
-            }
+			const errorGot = $page.url.searchParams.get("error");
+			if (!errorGot) return;
+			if (hasKey(errorTypes, errorGot)) {
+				toast.error(errorTypes[errorGot], {
+					description: "Please try again later.",
+					duration: 20000
+				});
+			}
 		}
 	});
 </script>
 
 <svelte:head>
-    <title>InfoSections</title>
+	<title>InfoSections</title>
 </svelte:head>
 
-<Header loggedIn={data.user!==undefined} />
+<Header loggedIn={data.user !== undefined} />
 <Hero />
 <Features />
 <Stats />
-<CTA />
\ No newline at end of file
+<CTA />
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/+error.svelte b/frontend/src/routes/(mainWebsite)/dashboard/+error.svelte
index d049933..be2490f 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/+error.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/+error.svelte
@@ -1,38 +1,51 @@
 <script>
-    import { page } from "$app/state";
-    import { AlertCircle, RefreshCw } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { AlertCircle, RefreshCw } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>{page.status} {page.error?.message}</title>
+	<title>{page.status} {page.error?.message}</title>
 </svelte:head>
 
 <main class="min-h-screen w-full flex items-center justify-center bg-background" style="">
-    <div class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center">
-        <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50">
-            <AlertCircle class="h-10 w-10 text-red-500" />
-        </div>
+	<div
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center"
+	>
+		<div
+			class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50"
+		>
+			<AlertCircle class="h-10 w-10 text-red-500" />
+		</div>
 
-        <h2 class="mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
+		<h2 class="mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
 
-        <p class="mb-8 max-w-md text-gray-500">
-            {#if page.status === 404}
-                We couldn't find the page you're looking for. This might be due to an invalid link.
-            {:else}
-                An error has occured. Please wait and try again. If the error keeps happening, contact our support team.
-            {/if}
-        </p>
+		<p class="mb-8 max-w-md text-gray-500">
+			{#if page.status === 404}
+				We couldn't find the page you're looking for. This might be due to an invalid link.
+			{:else}
+				An error has occured. Please wait and try again. If the error keeps happening, contact our
+				support team.
+			{/if}
+		</p>
 
-            <a
-                data-sveltekit-preload-data="off"
-                href={page.url.toString()}
-                class="flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
-                >
-                <RefreshCw class="h-4 w-4" />
-                Try Again
-            </a>
+		<a
+			data-sveltekit-preload-data="off"
+			href={page.url.toString()}
+			class="flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
+		>
+			<RefreshCw class="h-4 w-4" />
+			Try Again
+		</a>
 
-        <div class="mt-8 text-sm text-gray-500">Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a></div>
-        <div class="mt-1 text-sm text-gray-500"><a href="https://uptime.stephengruzin.dev/status/infosections" target="_blank" class="underline">Status Page</a></div>
-    </div>
-</main>
\ No newline at end of file
+		<div class="mt-8 text-sm text-gray-500">
+			Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a>
+		</div>
+		<div class="mt-1 text-sm text-gray-500">
+			<a
+				href="https://uptime.stephengruzin.dev/status/infosections"
+				target="_blank"
+				class="underline">Status Page</a
+			>
+		</div>
+	</div>
+</main>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/+layout.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/+layout.server.ts
index d577be0..2b40c77 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/+layout.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/+layout.server.ts
@@ -1,19 +1,19 @@
-import { redirect } from '@sveltejs/kit';
+import { redirect } from "@sveltejs/kit";
 import { config } from "dotenv";
 
 config();
 
 export async function load({ parent }) {
-    const data = await parent();
+	const data = await parent();
 
-    if (!data.user) {
-        return redirect(307, "/");
-    }
+	if (!data.user) {
+		return redirect(307, "/");
+	}
 
-    return {
-        ...data,
-        pb_url: process.env["PB_URL"]!,
-        stripeSubscriptionUrl: data.user.subscriptionURL,
-        stripeTrialSubscriptionUrl: data.user.freeTrialURL
-    }
-} 
\ No newline at end of file
+	return {
+		...data,
+		pb_url: process.env["PB_URL"]!,
+		stripeSubscriptionUrl: data.user.subscriptionURL,
+		stripeTrialSubscriptionUrl: data.user.freeTrialURL
+	};
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/+layout.svelte b/frontend/src/routes/(mainWebsite)/dashboard/+layout.svelte
index 9684115..d6abf37 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/+layout.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/+layout.svelte
@@ -1,29 +1,32 @@
 <script lang="ts">
-    import { getMyCalendars, getMyEventLists, getMyImageFeeds } from './backend.remote.js';
-    import DashboardIsNavigating from '@/dashboard/DashboardIsNavigating.svelte';
-    import DashboardSidebar from '@/dashboard/DashboardSidebar.svelte';
-    import DashboardHeader from '@/dashboard/DashboardHeader.svelte';
+	import { getMyCalendars, getMyEventLists, getMyImageFeeds } from "./backend.remote.js";
+	import DashboardIsNavigating from "@/dashboard/DashboardIsNavigating.svelte";
+	import DashboardSidebar from "@/dashboard/DashboardSidebar.svelte";
+	import DashboardHeader from "@/dashboard/DashboardHeader.svelte";
 	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
-    import { afterNavigate } from '$app/navigation';
-    import { browser } from '$app/environment';
-    import { navigating } from '$app/state';
+	import { afterNavigate } from "$app/navigation";
+	import { browser } from "$app/environment";
+	import { navigating } from "$app/state";
 
 	let { children, data } = $props();
 
 	afterNavigate(() => {
 		if (browser) {
-			const element = document.getElementById('ascrollableelement'); 
+			const element = document.getElementById("ascrollableelement");
 			if (element) {
-				element.scrollTo({ top: 0, behavior: 'smooth' });
+				element.scrollTo({ top: 0, behavior: "smooth" });
 			} else {
 				// Fallback for default window scroll
-				window.scrollTo({ top: 0, behavior: 'smooth' });
+				window.scrollTo({ top: 0, behavior: "smooth" });
 			}
 		}
 	});
 </script>
 
-<Sidebar.Provider class="flex min-h-screen bg-background" style="--sidebar-width: 16rem; --sidebar-width-mobile: 16rem;">
+<Sidebar.Provider
+	class="flex min-h-screen bg-background"
+	style="--sidebar-width: 16rem; --sidebar-width-mobile: 16rem;"
+>
 	<DashboardSidebar
 		user={data.user}
 		userAvatar={data.avatar}
@@ -34,7 +37,11 @@
 	/>
 
 	<div class="flex-1 flex flex-col h-full">
-		<DashboardHeader calendars={await getMyCalendars()} imageFeeds={await getMyImageFeeds()} eventLists={await getMyEventLists()} />
+		<DashboardHeader
+			calendars={await getMyCalendars()}
+			imageFeeds={await getMyImageFeeds()}
+			eventLists={await getMyEventLists()}
+		/>
 
 		<main class="flex-1 p-1 sm:p-6 space-y-6 mainPage relative h-full" id="ascrollableelement">
 			{#if navigating.complete !== null}
@@ -50,4 +57,4 @@
 		max-height: calc(100vh - 64px);
 		overflow-y: auto;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/+page.server.ts
index 81c607b..10eedb8 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/+page.server.ts
@@ -1,3 +1,3 @@
 export async function load({ parent }) {
-    await parent();
-} 
\ No newline at end of file
+	await parent();
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/+page.svelte
index aa7030a..2aa9cd3 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/+page.svelte
@@ -1,71 +1,67 @@
 <script lang="ts">
-    import { getMyCalendars, getMyImageFeeds, getMyEventLists, getMyDynamicURLS, getMyIntegrations } from './backend.remote.js';
-    import IntegrationStatus from '@/dashboard/homePage/IntegrationStatus.svelte';
-    import UpcomingEvents from '@/dashboard/homePage/UpcomingEvents.svelte';
-    import RecentActivity from '@/dashboard/homePage/RecentActivity.svelte';
-    import QuickActions from '@/dashboard/homePage/QuickActions.svelte';
-    import MetricCards from '@/dashboard/homePage/MetricCards.svelte';
-    import { getAllUserEvents } from './events.remote.js';
+	import {
+		getMyCalendars,
+		getMyImageFeeds,
+		getMyEventLists,
+		getMyDynamicURLS,
+		getMyIntegrations
+	} from "./backend.remote.js";
+	import IntegrationStatus from "@/dashboard/homePage/IntegrationStatus.svelte";
+	import UpcomingEvents from "@/dashboard/homePage/UpcomingEvents.svelte";
+	import RecentActivity from "@/dashboard/homePage/RecentActivity.svelte";
+	import QuickActions from "@/dashboard/homePage/QuickActions.svelte";
+	import MetricCards from "@/dashboard/homePage/MetricCards.svelte";
+	import { getAllUserEvents } from "./events.remote.js";
 
-    let { data } = $props();
+	let { data } = $props();
 
-    const [
-        myCalendars,
-        myImageFeeds,
-        myEventLists,
-        myDynamicURLs,
-        allUserEvents,
-        myIntegrations
-    ] = $derived(await Promise.all([
-        getMyCalendars(),
-        getMyImageFeeds(),
-        getMyEventLists(),
-        getMyDynamicURLS(),
-        getAllUserEvents(),
-        getMyIntegrations()
-    ]));
+	const [myCalendars, myImageFeeds, myEventLists, myDynamicURLs, allUserEvents, myIntegrations] =
+		$derived(
+			await Promise.all([
+				getMyCalendars(),
+				getMyImageFeeds(),
+				getMyEventLists(),
+				getMyDynamicURLS(),
+				getAllUserEvents(),
+				getMyIntegrations()
+			])
+		);
 </script>
 
 <svelte:head>
-    <title>Dashboard | InfoSections</title>
+	<title>Dashboard | InfoSections</title>
 </svelte:head>
 
 <div class="w-full h-full">
-    <div class="space-y-8">
-        <section>
-            <h2 class="text-2xl font-bold tracking-tight text-foreground">
-                Hello, {data.user.name}!
-            </h2>
-            <p class="text-muted-foreground mt-1">
-                {"Here's an overview of your events and activity."}
-            </p>
-        </section>
+	<div class="space-y-8">
+		<section>
+			<h2 class="text-2xl font-bold tracking-tight text-foreground">
+				Hello, {data.user.name}!
+			</h2>
+			<p class="text-muted-foreground mt-1">
+				{"Here's an overview of your events and activity."}
+			</p>
+		</section>
 
-        <MetricCards
-            {myCalendars}
-            {myDynamicURLs}
-            {myEventLists}
-            {myImageFeeds}
-            {allUserEvents}
-        />
+		<MetricCards {myCalendars} {myDynamicURLs} {myEventLists} {myImageFeeds} {allUserEvents} />
 
-        <div class="grid gap-6 lg:grid-cols-3">
-            <div class="lg:col-span-2 space-y-6">
-                <RecentActivity
-                    {myCalendars}
-                    {myDynamicURLs}
-                    {myEventLists}
-                    {myImageFeeds}
-                    pb_url={data.pb_url}
-                />
-                <UpcomingEvents />
-            </div>
-            <div>
-                <div class="space-y-6" style="position: sticky;top:0px;">
-                    <QuickActions />
-                    <IntegrationStatus {myIntegrations} {allUserEvents} />
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
\ No newline at end of file
+		<div class="grid gap-6 lg:grid-cols-3">
+			<div class="lg:col-span-2 space-y-6">
+				<RecentActivity
+					{myCalendars}
+					{myDynamicURLs}
+					{myEventLists}
+					{myImageFeeds}
+					pb_url={data.pb_url}
+				/>
+				<UpcomingEvents />
+			</div>
+			<div>
+				<div class="space-y-6" style="position: sticky;top:0px;">
+					<QuickActions />
+					<IntegrationStatus {myIntegrations} {allUserEvents} />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
index d9931dd..4e6e50a 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
@@ -1,5 +1,11 @@
 //This file can fetch all the needed data from the pocketbase instance. Stuff like calendars, image feeds, etc.
-import type { CustomImageIFeedDBModel, DynamicURLModel, EventListDBModel, ImageFeedDBModel, IntegrationModel } from "@/utils";
+import type {
+	CustomImageIFeedDBModel,
+	DynamicURLModel,
+	EventListDBModel,
+	ImageFeedDBModel,
+	IntegrationModel
+} from "@/utils";
 import { getRequestEvent, query } from "$app/server";
 import type { CalendarDBModel } from "@/cal.utils";
 import { redirect } from "@sveltejs/kit";
@@ -9,246 +15,250 @@ import * as v from "valibot";
 config();
 
 export const getMyIntegrations = query(async () => {
-    const { locals } = getRequestEvent();
-    let myIntegrations: IntegrationModel[] = [];
-
-    if (!locals.user) return myIntegrations;
-
-    try {
-        myIntegrations = await locals.pb.collection("integration").getFullList({
-            filter: `owner="${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Error when fetching integrations, ", err);
-    }
-
-    return myIntegrations;
+	const { locals } = getRequestEvent();
+	let myIntegrations: IntegrationModel[] = [];
+
+	if (!locals.user) return myIntegrations;
+
+	try {
+		myIntegrations = await locals.pb.collection("integration").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Error when fetching integrations, ", err);
+	}
+
+	return myIntegrations;
 });
 
 export const getMyCalendars = query(async () => {
-    const { locals } = getRequestEvent();
-    let calendars: CalendarDBModel[] = [];
-
-    if (!locals.user) return calendars;
-
-    try {
-        calendars = await locals.pb.collection('calendars').getFullList({
-            filter: `owner="${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch calendars.", err);
-    }
-
-    return calendars;
+	const { locals } = getRequestEvent();
+	let calendars: CalendarDBModel[] = [];
+
+	if (!locals.user) return calendars;
+
+	try {
+		calendars = await locals.pb.collection("calendars").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch calendars.", err);
+	}
+
+	return calendars;
 });
 
 /**
  * This gets a calendar by the database id, it also checks if the locals.user is the owner of this calendar. If not, the user gets redirected.
  */
 export const getCalendarById = query(v.string(), async (id) => {
-    const { locals } = getRequestEvent();
-    let calendar: CalendarDBModel | undefined;
+	const { locals } = getRequestEvent();
+	let calendar: CalendarDBModel | undefined;
 
-    if (!locals.user) return redirect(303, "/dashboard/calendars");
+	if (!locals.user) return redirect(303, "/dashboard/calendars");
 
-    try {
-        calendar = await locals.pb.collection('calendars').getOne(id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch calendars.", err);
-        return redirect(303, "/dashboard/calendars");
-    }
+	try {
+		calendar = await locals.pb.collection("calendars").getOne(id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch calendars.", err);
+		return redirect(303, "/dashboard/calendars");
+	}
 
-    if (!calendar) return redirect(303, "/dashboard/calendars");
+	if (!calendar) return redirect(303, "/dashboard/calendars");
 
-    if (calendar.owner !== locals.user.id) return redirect(303, "/dashboard/calendars");
+	if (calendar.owner !== locals.user.id) return redirect(303, "/dashboard/calendars");
 
-    return calendar;
+	return calendar;
 });
 
 export const getMyImageFeeds = query(async () => {
-    const { locals } = getRequestEvent();
-    let imageFeeds: ImageFeedDBModel[] = [];
-
-    if (!locals.user) return imageFeeds;
-
-    try {
-        imageFeeds = await locals.pb.collection('imageFeeds').getFullList({
-            filter: `owner="${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch image feeds.", err);
-    }
-
-    return imageFeeds;
+	const { locals } = getRequestEvent();
+	let imageFeeds: ImageFeedDBModel[] = [];
+
+	if (!locals.user) return imageFeeds;
+
+	try {
+		imageFeeds = await locals.pb.collection("imageFeeds").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch image feeds.", err);
+	}
+
+	return imageFeeds;
 });
 
 /**
  * This gets a image feed by the database id, it also checks if the locals.user is the owner of this feed. If not, the user gets redirected.
  */
 export const getImageFeedById = query(v.string(), async (id) => {
-    const { locals } = getRequestEvent();
-    let imageFeed: ImageFeedDBModel | undefined;
+	const { locals } = getRequestEvent();
+	let imageFeed: ImageFeedDBModel | undefined;
 
-    if (!locals.user) return redirect(303, "/dashboard/image-feeds");
+	if (!locals.user) return redirect(303, "/dashboard/image-feeds");
 
-    try {
-        imageFeed = await locals.pb.collection('imageFeeds').getOne(id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch image feeds.", err);
-        return redirect(303, "/dashboard/image-feeds");
-    }
+	try {
+		imageFeed = await locals.pb.collection("imageFeeds").getOne(id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch image feeds.", err);
+		return redirect(303, "/dashboard/image-feeds");
+	}
 
-    if (!imageFeed) return redirect(303, "/dashboard/image-feeds");
+	if (!imageFeed) return redirect(303, "/dashboard/image-feeds");
 
-    if (imageFeed.owner !== locals.user.id) return redirect(303, "/dashboard/image-feeds");
+	if (imageFeed.owner !== locals.user.id) return redirect(303, "/dashboard/image-feeds");
 
-    return imageFeed;
+	return imageFeed;
 });
 
 export const getCustomImagesForIFeed = query(v.string(), async (id) => {
-    const { locals } = getRequestEvent();
-    let customImages: CustomImageIFeedDBModel[] = [];
-
-    if (!locals.user) return customImages;
-
-    try {
-        customImages = await locals.pb.collection('customImageIfeed').getFullList({
-            filter: `imageFeed ~ "${id}" && owner = "${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch image feed custom images.", err);
-        return redirect(303, "/dashboard/image-feeds");
-    }
-
-    return customImages;
+	const { locals } = getRequestEvent();
+	let customImages: CustomImageIFeedDBModel[] = [];
+
+	if (!locals.user) return customImages;
+
+	try {
+		customImages = await locals.pb.collection("customImageIfeed").getFullList({
+			filter: `imageFeed ~ "${id}" && owner = "${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch image feed custom images.", err);
+		return redirect(303, "/dashboard/image-feeds");
+	}
+
+	return customImages;
 });
 
 export const getMyEventLists = query(async () => {
-    const { locals } = getRequestEvent();
-    let eventLists: EventListDBModel[] = [];
-
-    if (!locals.user) return eventLists;
-
-    try {
-        eventLists = await locals.pb.collection('eventLists').getFullList({
-            filter: `owner="${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to event lists.", err);
-    }
-
-    return eventLists;
+	const { locals } = getRequestEvent();
+	let eventLists: EventListDBModel[] = [];
+
+	if (!locals.user) return eventLists;
+
+	try {
+		eventLists = await locals.pb.collection("eventLists").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to event lists.", err);
+	}
+
+	return eventLists;
 });
 
 /**
  * This gets a event list by the database id, it also checks if the locals.user is the owner of this list. If not, the user gets redirected.
-*/
+ */
 export const getEventListById = query(v.string(), async (id) => {
-    const { locals } = getRequestEvent();
-    let eventList: EventListDBModel | undefined;
-    
-    if (!locals.user) return redirect(303, "/dashboard/event-lists");
-    
-    try {
-        eventList = await locals.pb.collection('eventLists').getOne(id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch event list.", err);
-        return redirect(303, "/dashboard/event-lists");
-    }
-    
-    if (!eventList) return redirect(303, "/dashboard/event-lists");
-    
-    if (eventList.owner !== locals.user.id) return redirect(303, "/dashboard/event-lists");
-    
-    return eventList;
+	const { locals } = getRequestEvent();
+	let eventList: EventListDBModel | undefined;
+
+	if (!locals.user) return redirect(303, "/dashboard/event-lists");
+
+	try {
+		eventList = await locals.pb.collection("eventLists").getOne(id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch event list.", err);
+		return redirect(303, "/dashboard/event-lists");
+	}
+
+	if (!eventList) return redirect(303, "/dashboard/event-lists");
+
+	if (eventList.owner !== locals.user.id) return redirect(303, "/dashboard/event-lists");
+
+	return eventList;
 });
 
 export const getMyDynamicURLS = query(async () => {
-    const { locals } = getRequestEvent();
-    let dynamic_urls: DynamicURLModel[] = [];
-
-    if (!locals.user) return dynamic_urls;
-
-    try {
-        dynamic_urls = await locals.pb.collection('dynamic_url').getFullList({
-            filter: `owner="${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to dynamic urls.", err);
-    }
-
-    let somethingChanged = false;
-    const batch = locals.pb.createBatch();
-    const now = (new Date()).getTime();
-    for (let i = 0; i<dynamic_urls.length;i++) {
-        const url = dynamic_urls[i];
-        if (!url) continue;
-        if (url.overrideExpireInStr !== "set") continue;
-        if((new Date(url.overrideExpiresIn)).getTime() > now) continue;
-        batch.collection('dynamic_url').update(url.id, {
-            "overrideExpiresIn": "",
-            "overrideExpireInStr": "never",
-            "enableOverrideRedirect": false
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-        somethingChanged = true;
-    }
-
-    if (somethingChanged) {
-        try {
-            const result = await batch.send({
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-            console.log({bod: result[0]?.body});
-        } catch (err) {
-            console.log("Error updating dynamic url override expire date resets,", err);
-        }
-        try {
-            dynamic_urls = await locals.pb.collection('dynamic_url').getFullList({
-                filter: `owner="${locals.user.id}"`,
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-        } catch (err) {
-            console.log("Failed to dynamic urls.", err);
-        }
-    }
-
-    return dynamic_urls;
-});
\ No newline at end of file
+	const { locals } = getRequestEvent();
+	let dynamic_urls: DynamicURLModel[] = [];
+
+	if (!locals.user) return dynamic_urls;
+
+	try {
+		dynamic_urls = await locals.pb.collection("dynamic_url").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to dynamic urls.", err);
+	}
+
+	let somethingChanged = false;
+	const batch = locals.pb.createBatch();
+	const now = new Date().getTime();
+	for (let i = 0; i < dynamic_urls.length; i++) {
+		const url = dynamic_urls[i];
+		if (!url) continue;
+		if (url.overrideExpireInStr !== "set") continue;
+		if (new Date(url.overrideExpiresIn).getTime() > now) continue;
+		batch.collection("dynamic_url").update(
+			url.id,
+			{
+				overrideExpiresIn: "",
+				overrideExpireInStr: "never",
+				enableOverrideRedirect: false
+			},
+			{
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			}
+		);
+		somethingChanged = true;
+	}
+
+	if (somethingChanged) {
+		try {
+			const result = await batch.send({
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+			console.log({ bod: result[0]?.body });
+		} catch (err) {
+			console.log("Error updating dynamic url override expire date resets,", err);
+		}
+		try {
+			dynamic_urls = await locals.pb.collection("dynamic_url").getFullList({
+				filter: `owner="${locals.user.id}"`,
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+		} catch (err) {
+			console.log("Failed to dynamic urls.", err);
+		}
+	}
+
+	return dynamic_urls;
+});
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.server.ts
index 81c607b..10eedb8 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.server.ts
@@ -1,3 +1,3 @@
 export async function load({ parent }) {
-    await parent();
-} 
\ No newline at end of file
+	await parent();
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte
index 03aad41..0ec52e2 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/+page.svelte
@@ -1,265 +1,276 @@
 <script lang="ts">
-    import { createCalendarCommand, deleteCalendarCommand } from "./calendarActions.remote.js";
-    import { Copy, MoreVertical, Plus, Shield, Trash2, Users } from "@lucide/svelte";
-    import * as DropdownMenu from "@/components/ui/dropdown-menu/index";
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Tooltip from "$lib/components/ui/tooltip/index.js";
-    import * as Avatar from "$lib/components/ui/avatar/index.js";
-    import { Spinner } from "@/components/ui/spinner/index.js";
-    import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
-    import { Switch } from "@/components/ui/switch/index.js";
-    import * as Dialog from "@/components/ui/dialog/index";
-    import { getMyCalendars } from "../backend.remote.js";
-    import { Textarea } from "@/components/ui/textarea";
-    import * as Card from "@/components/ui/card/index";
-    import { afterNavigate } from "$app/navigation";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
-    import { browser } from "$app/environment";
-    import { toast } from "svelte-sonner";
-    import { page } from "$app/stores";
-    import { cn } from "@/utils";
+	import { createCalendarCommand, deleteCalendarCommand } from "./calendarActions.remote.js";
+	import { Copy, MoreVertical, Plus, Shield, Trash2, Users } from "@lucide/svelte";
+	import * as DropdownMenu from "@/components/ui/dropdown-menu/index";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+	import * as Avatar from "$lib/components/ui/avatar/index.js";
+	import { Spinner } from "@/components/ui/spinner/index.js";
+	import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
+	import { Switch } from "@/components/ui/switch/index.js";
+	import * as Dialog from "@/components/ui/dialog/index";
+	import { getMyCalendars } from "../backend.remote.js";
+	import { Textarea } from "@/components/ui/textarea";
+	import * as Card from "@/components/ui/card/index";
+	import { afterNavigate } from "$app/navigation";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
+	import { browser } from "$app/environment";
+	import { toast } from "svelte-sonner";
+	import { page } from "$app/stores";
+	import { cn } from "@/utils";
 
-    let { data } = $props();
+	let { data } = $props();
 
-    let newCalendarDialogOpen = $state(false);
-    let newCalendarDescription = $state("");
-    let newCalendarPublicId = $state("");
-    let newCalendarName = $state("");
-    let newCalendarPasswordEnabled = $state(false);
-    let newCalendarPassword = $state("");
-    let creatingCalendar = $state(false);
+	let newCalendarDialogOpen = $state(false);
+	let newCalendarDescription = $state("");
+	let newCalendarPublicId = $state("");
+	let newCalendarName = $state("");
+	let newCalendarPasswordEnabled = $state(false);
+	let newCalendarPassword = $state("");
+	let creatingCalendar = $state(false);
 
-    async function handleCreateCalendar() {
-        if (newCalendarPublicId && newCalendarName && newCalendarDescription) {
-            creatingCalendar = true;
-            const response = await createCalendarCommand({
-                publicId: newCalendarPublicId,
-                name: newCalendarName,
-                description: newCalendarDescription,
-                enablePassword: newCalendarPasswordEnabled,
-                newPassword: newCalendarPassword
-            });
-            creatingCalendar = false;
-            if (response.error) {
-                toast.error(response.msg);
-            } else {
-                toast.success(response.msg);
-                newCalendarDialogOpen = false;
-                newCalendarDescription = "";
-                newCalendarPublicId = "";
-                newCalendarName = "";
-                newCalendarPasswordEnabled = false;
-                newCalendarPassword = "";
-            }
-        } else {
-            toast.error("Missing Fields.");
-        }
-    }
+	async function handleCreateCalendar() {
+		if (newCalendarPublicId && newCalendarName && newCalendarDescription) {
+			creatingCalendar = true;
+			const response = await createCalendarCommand({
+				publicId: newCalendarPublicId,
+				name: newCalendarName,
+				description: newCalendarDescription,
+				enablePassword: newCalendarPasswordEnabled,
+				newPassword: newCalendarPassword
+			});
+			creatingCalendar = false;
+			if (response.error) {
+				toast.error(response.msg);
+			} else {
+				toast.success(response.msg);
+				newCalendarDialogOpen = false;
+				newCalendarDescription = "";
+				newCalendarPublicId = "";
+				newCalendarName = "";
+				newCalendarPasswordEnabled = false;
+				newCalendarPassword = "";
+			}
+		} else {
+			toast.error("Missing Fields.");
+		}
+	}
 
-    function copyCalLinkToClipboard(id: string) {
-        const link = `${window.location.origin}/cal/${id}`;
+	function copyCalLinkToClipboard(id: string) {
+		const link = `${window.location.origin}/cal/${id}`;
 
-        navigator.clipboard.writeText(link);
+		navigator.clipboard.writeText(link);
 
-        toast.info("Copied", {
-            description: link,
-            descriptionClass: "underline"
-        })
-    }
+		toast.info("Copied", {
+			description: link,
+			descriptionClass: "underline"
+		});
+	}
 
-    let deleteCalendarId: string | null = $state(null);
+	let deleteCalendarId: string | null = $state(null);
 
-    async function deleteCal() {
-        if (deleteCalendarId === null) return
-        const deletingCalendar = toast.loading("Deleting Calendar");
-        const response = await deleteCalendarCommand(deleteCalendarId);
-        toast.dismiss(deletingCalendar);
-        deleteCalendarId = null;
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-        }
-    }
+	async function deleteCal() {
+		if (deleteCalendarId === null) return;
+		const deletingCalendar = toast.loading("Deleting Calendar");
+		const response = await deleteCalendarCommand(deleteCalendarId);
+		toast.dismiss(deletingCalendar);
+		deleteCalendarId = null;
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+		}
+	}
 
-    afterNavigate(() => {
+	afterNavigate(() => {
 		if (browser) {
-            newCalendarDialogOpen = $page.url.searchParams.get("new") === "1";
+			newCalendarDialogOpen = $page.url.searchParams.get("new") === "1";
 		}
 	});
 </script>
 
 <svelte:head>
-    <title>My Calendars | InfoSections</title>
+	<title>My Calendars | InfoSections</title>
 </svelte:head>
 
 <div class="w-full h-full space-y-6">
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-2xl font-bold text-foreground">My Calendars</h1>
-            <p class="text-muted-foreground mt-1">Customisable calendars that can be accessed anywhere by anyone (Unless it's password protected.)</p>
-        </div>
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-2xl font-bold text-foreground">My Calendars</h1>
+			<p class="text-muted-foreground mt-1">
+				Customisable calendars that can be accessed anywhere by anyone (Unless it's password
+				protected.)
+			</p>
+		</div>
 
-        <Dialog.Root bind:open={newCalendarDialogOpen}>
-            <Dialog.Trigger class={cn(buttonVariants({ variant: "default" }), "gap-2")}>
-                <Plus class="h-4 w-4" />
-                New Calendar
-            </Dialog.Trigger>
-            <Dialog.Content class="sm:max-w-125">
-                <Dialog.Header>
-                <Dialog.Title>Create New Calendar</Dialog.Title>
-                    <Dialog.Description>You can change more settings after creating the calendar.</Dialog.Description>
-                </Dialog.Header>
+		<Dialog.Root bind:open={newCalendarDialogOpen}>
+			<Dialog.Trigger class={cn(buttonVariants({ variant: "default" }), "gap-2")}>
+				<Plus class="h-4 w-4" />
+				New Calendar
+			</Dialog.Trigger>
+			<Dialog.Content class="sm:max-w-125">
+				<Dialog.Header>
+					<Dialog.Title>Create New Calendar</Dialog.Title>
+					<Dialog.Description
+						>You can change more settings after creating the calendar.</Dialog.Description
+					>
+				</Dialog.Header>
 
-                <div class="space-y-4 py-4">
-                    <div class="space-y-2">
-                        <Label for="name">Calendar URL path</Label>
-                        <Input
-                        id="publicId"
-                        placeholder="e.g., publishedevents"
-                        bind:value={newCalendarPublicId}
-                        />
-                    </div>
+				<div class="space-y-4 py-4">
+					<div class="space-y-2">
+						<Label for="name">Calendar URL path</Label>
+						<Input
+							id="publicId"
+							placeholder="e.g., publishedevents"
+							bind:value={newCalendarPublicId}
+						/>
+					</div>
 
-                    <div class="space-y-2">
-                        <Label for="name">Calendar Name</Label>
-                        <Input
-                        id="name"
-                        placeholder="e.g., Published Events"
-                        bind:value={newCalendarName}
-                        />
-                    </div>
+					<div class="space-y-2">
+						<Label for="name">Calendar Name</Label>
+						<Input id="name" placeholder="e.g., Published Events" bind:value={newCalendarName} />
+					</div>
 
-                    <div class="space-y-2">
-                        <Label for="description">Description</Label>
-                        <Textarea
-                        id="description"
-                        placeholder="Brief description of this calendar type"
-                        bind:value={newCalendarDescription}
-                        rows={3}
-                        />
-                    </div>
-                    <div class="flex items-center justify-between">
-                        <div class="space-y-0.5">
-                        <Label for="password-protection" class="text-base">
-                            Password Protection
-                        </Label>
-                        <p class="text-sm text-muted-foreground">Require a password to access this calendar</p>
-                        </div>
-                        <Switch id="password-protection" bind:checked={newCalendarPasswordEnabled} />
-                    </div>
+					<div class="space-y-2">
+						<Label for="description">Description</Label>
+						<Textarea
+							id="description"
+							placeholder="Brief description of this calendar type"
+							bind:value={newCalendarDescription}
+							rows={3}
+						/>
+					</div>
+					<div class="flex items-center justify-between">
+						<div class="space-y-0.5">
+							<Label for="password-protection" class="text-base">Password Protection</Label>
+							<p class="text-sm text-muted-foreground">
+								Require a password to access this calendar
+							</p>
+						</div>
+						<Switch id="password-protection" bind:checked={newCalendarPasswordEnabled} />
+					</div>
 
-                    {#if newCalendarPasswordEnabled}
-                        <div class="space-y-2 pt-2">
-                            <Label for="password">Calendar Password</Label>
-                            <Input id="password" bind:value={newCalendarPassword} type="password" placeholder="Enter password" />
-                        </div>
-                    {/if}
-                </div>
+					{#if newCalendarPasswordEnabled}
+						<div class="space-y-2 pt-2">
+							<Label for="password">Calendar Password</Label>
+							<Input
+								id="password"
+								bind:value={newCalendarPassword}
+								type="password"
+								placeholder="Enter password"
+							/>
+						</div>
+					{/if}
+				</div>
 
-                <Dialog.Footer>
-                <Button variant="outline" onclick={() => newCalendarDialogOpen = false}>
-                    Cancel
-                </Button>
-                <Button onclick={handleCreateCalendar}>
-                    {#if creatingCalendar}
-                        <Spinner />
-                        Creating Calendar...
-                    {:else}
-                        Create Calendar
-                    {/if}
-                </Button>
-                </Dialog.Footer>
-            </Dialog.Content>
-        </Dialog.Root>
-    </div>
+				<Dialog.Footer>
+					<Button variant="outline" onclick={() => (newCalendarDialogOpen = false)}>Cancel</Button>
+					<Button onclick={handleCreateCalendar}>
+						{#if creatingCalendar}
+							<Spinner />
+							Creating Calendar...
+						{:else}
+							Create Calendar
+						{/if}
+					</Button>
+				</Dialog.Footer>
+			</Dialog.Content>
+		</Dialog.Root>
+	</div>
 
-    <div class="w-full h-full grid gap-4 xl:grid-cols-3 relative">
-        {#if (await getMyCalendars()).length === 0}
-            <p class="absolute top-3 left-1/2 -translate-1/2 text-muted-foreground">No Calendars Yet.</p>
-        {/if}
-        {#each await getMyCalendars() as calendar (`calendarlist${calendar.id}`)}
-            <Card.Root class="hover:shadow-lg transition-shadow">
-                <Card.Header>
-                <div class="flex items-start justify-between">
-                    <div class="flex items-center gap-1">
-                        <Avatar.Root class="h-15 w-15">
-                            <Avatar.Image src="{data.pb_url}/api/files/{calendar.collectionId}/{calendar.id}/{calendar.logo}" alt="Avatar" />
-                            <Avatar.Fallback><NoCalendarAvatar /></Avatar.Fallback>
-                        </Avatar.Root>
-                        <div>
-                            <Card.Title class="text-lg flex">
-                                {calendar.name}
-                                {#if calendar.passwordEnabled}
-                                    <div class="flex items-center gap-1 ml-1 text-xs text-muted-foreground">
-                                        <span>•</span>
-                                        <Tooltip.Provider>
-                                            <Tooltip.Root>
-                                                <Tooltip.Trigger>
-                                                    <Shield class="h-4 w-4" />
-                                                </Tooltip.Trigger>
-                                                <Tooltip.Content>Password Protected</Tooltip.Content>
-                                            </Tooltip.Root>
-                                        </Tooltip.Provider>
-                                    </div>
-                                {/if}
-                            </Card.Title>
-                            <Card.Description class="text-sm mt-1">/cal/{calendar.publicId}</Card.Description>
-                        </div>
-                    </div>
+	<div class="w-full h-full grid gap-4 xl:grid-cols-3 relative">
+		{#if (await getMyCalendars()).length === 0}
+			<p class="absolute top-3 left-1/2 -translate-1/2 text-muted-foreground">No Calendars Yet.</p>
+		{/if}
+		{#each await getMyCalendars() as calendar (`calendarlist${calendar.id}`)}
+			<Card.Root class="hover:shadow-lg transition-shadow">
+				<Card.Header>
+					<div class="flex items-start justify-between">
+						<div class="flex items-center gap-1">
+							<Avatar.Root class="h-15 w-15">
+								<Avatar.Image
+									src="{data.pb_url}/api/files/{calendar.collectionId}/{calendar.id}/{calendar.logo}"
+									alt="Avatar"
+								/>
+								<Avatar.Fallback><NoCalendarAvatar /></Avatar.Fallback>
+							</Avatar.Root>
+							<div>
+								<Card.Title class="text-lg flex">
+									{calendar.name}
+									{#if calendar.passwordEnabled}
+										<div class="flex items-center gap-1 ml-1 text-xs text-muted-foreground">
+											<span>•</span>
+											<Tooltip.Provider>
+												<Tooltip.Root>
+													<Tooltip.Trigger>
+														<Shield class="h-4 w-4" />
+													</Tooltip.Trigger>
+													<Tooltip.Content>Password Protected</Tooltip.Content>
+												</Tooltip.Root>
+											</Tooltip.Provider>
+										</div>
+									{/if}
+								</Card.Title>
+								<Card.Description class="text-sm mt-1">/cal/{calendar.publicId}</Card.Description>
+							</div>
+						</div>
 
-                    <DropdownMenu.Root>
-                        <DropdownMenu.Trigger class={cn(buttonVariants({ variant: "ghost" }), "h-8 w-8")}>
-                            <MoreVertical class="h-4 w-4" />
-                        </DropdownMenu.Trigger>
-                        <DropdownMenu.Content align="end">
-                            <DropdownMenu.Item
-                                onclick={() => copyCalLinkToClipboard(calendar.id)}
-                            >
-                                <Copy class="h-4 w-4 mr-2 data-highlighted:text-primary" />
-                                Copy Link
-                            </DropdownMenu.Item>
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger class={cn(buttonVariants({ variant: "ghost" }), "h-8 w-8")}>
+								<MoreVertical class="h-4 w-4" />
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Item onclick={() => copyCalLinkToClipboard(calendar.id)}>
+									<Copy class="h-4 w-4 mr-2 data-highlighted:text-primary" />
+									Copy Link
+								</DropdownMenu.Item>
 
-                            <DropdownMenu.Item class="text-destructive" onclick={() => {deleteCalendarId = calendar.id}}>
-                                <Trash2 class="h-4 w-4 mr-2 data-highlighted:text-primary" />
-                                Delete
-                            </DropdownMenu.Item>
-                        </DropdownMenu.Content>
-                    </DropdownMenu.Root>
-                </div>
-                </Card.Header>
+								<DropdownMenu.Item
+									class="text-destructive"
+									onclick={() => {
+										deleteCalendarId = calendar.id;
+									}}
+								>
+									<Trash2 class="h-4 w-4 mr-2 data-highlighted:text-primary" />
+									Delete
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
+				</Card.Header>
 
-                <Card.Content>
-                    <p class="text-sm text-muted-foreground mb-4">{calendar.description}</p>
+				<Card.Content>
+					<p class="text-sm text-muted-foreground mb-4">{calendar.description}</p>
 
-                    <div class="flex items-center justify-between pt-4 border-t border-border">
-                        <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                            <Users class="h-4 w-4" />
-                            <span>{calendar.visits} Visit{calendar.visits === 1 ? "" : "s"}</span>
-                        </div>
+					<div class="flex items-center justify-between pt-4 border-t border-border">
+						<div class="flex items-center gap-2 text-sm text-muted-foreground">
+							<Users class="h-4 w-4" />
+							<span>{calendar.visits} Visit{calendar.visits === 1 ? "" : "s"}</span>
+						</div>
 
-                        <Button variant="outline" size="sm" href="/dashboard/calendars/{calendar.id}">
-                            View Details
-                        </Button>
-                    </div>
-                </Card.Content>
-            </Card.Root>
-        {/each}
-    </div>
+						<Button variant="outline" size="sm" href="/dashboard/calendars/{calendar.id}">
+							View Details
+						</Button>
+					</div>
+				</Card.Content>
+			</Card.Root>
+		{/each}
+	</div>
 </div>
 
 <!-- Delete Calendar Dialog -->
-<Dialog.Root open={deleteCalendarId !== null} onOpenChange={() => deleteCalendarId = null}>
-    <Dialog.Content>
-        <Dialog.Header>
-            <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-            <Dialog.Description>
-                This action cannot be undone. This will permanently delete this calendar from our servers. All links or image feeds relying on this calendar will not work.
-            </Dialog.Description>
-            <Dialog.Footer>
-                <Button variant="destructive" onclick={deleteCal}>Confirm Delete</Button>
-            </Dialog.Footer>
-        </Dialog.Header>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+<Dialog.Root open={deleteCalendarId !== null} onOpenChange={() => (deleteCalendarId = null)}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
+			<Dialog.Description>
+				This action cannot be undone. This will permanently delete this calendar from our servers.
+				All links or image feeds relying on this calendar will not work.
+			</Dialog.Description>
+			<Dialog.Footer>
+				<Button variant="destructive" onclick={deleteCal}>Confirm Delete</Button>
+			</Dialog.Footer>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.server.ts
index 7a8474e..9af2a5e 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.server.ts
@@ -1,8 +1,8 @@
 export async function load({ params, parent }) {
-    await parent();
-    let slug = params.slug;
+	await parent();
+	let slug = params.slug;
 
-    return {
-        selectedCalendarId: slug
-    }
-}
\ No newline at end of file
+	return {
+		selectedCalendarId: slug
+	};
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte
index e2808eb..7bda2b2 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/[slug]/+page.svelte
@@ -1,166 +1,184 @@
 <script lang="ts">
-    import CalSecuritySettings from "@/dashboard/calendar/CalSecuritySettings.svelte";
-    import CalDisplaySettings from "@/dashboard/calendar/CalDisplaySettings.svelte";
-    import CalFilterSettings from "@/dashboard/calendar/CalFilterSettings.svelte";
-    import CalEventPreview from "@/dashboard/calendar/CalEventPreview.svelte";
-    import CalQuickActions from "@/dashboard/calendar/CalQuickActions.svelte";
-    import CalGeneralInfo from "@/dashboard/calendar/CalGeneralInfo.svelte";
-    import CalStatistics from "@/dashboard/calendar/CalStatistics.svelte";
-    import { updateCalendarForm } from "../calendarActions.remote.js";
-    import CalAvatar from "@/dashboard/calendar/CalAvatar.svelte";
-    import CalShare from "@/dashboard/calendar/CalShare.svelte";
-    import { getCalendarById } from "../../backend.remote.js";
-    import { Button } from "@/components/ui/button";
-    import { Temporal } from "temporal-polyfill";
-    import { clearFileInput } from "@/utils.js";
-    import { ArrowLeft } from "@lucide/svelte";
-    import { toast } from "svelte-sonner";
-    import { onDestroy } from "svelte";
-
-    
-    let { data } = $props();
-
-    let selectedCalendar = $derived(await getCalendarById(data.selectedCalendarId));
-
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let nowDate = $derived(Temporal.Now.zonedDateTimeISO(timeZone));
-    let uploadNewAvatar: File | null = $state(null);
-    let saveChangesToast: string | number | null = $state(null);
-
-    let avatarChanged = $state(false);
-    let generalInfoChanged = $state(false);
-    let filterSettingsChanged = $state(false);
-    let displaySettingsChanged = $state(false);
-    let securitySettingsChanged = $state(false);
-
-    // svelte-ignore state_referenced_locally
-    let displaySettingsPreview = $state(selectedCalendar.displaySettings);
-
-    // This effect checks if any configurations have changed. If so, the saveRequired state will be set to true.
-    $effect(() => {
-        const saveRequired = avatarChanged || generalInfoChanged || displaySettingsChanged || filterSettingsChanged || securitySettingsChanged;
-    
-        if (saveRequired) {
-            if (saveChangesToast === null) {
-                saveChangesToast = toast("Save?", {
-                    description: "You have some unsaved changes.",
-                    dismissable: false,
-                    duration: Number.POSITIVE_INFINITY,
-                    action: {
-                        label: "Save Changes",
-                        onClick: () => {
-                            const formSubmitButton = document.getElementById("updateCalendarButton1") as HTMLButtonElement | null;
-                            if (formSubmitButton) {
-                                formSubmitButton.click();
-                            }
-                        }
-                    }
-                });
-            }
-        } else {
-            if (saveChangesToast !== null) {
-                toast.dismiss(saveChangesToast);
-            }
-            saveChangesToast = null;
-        }
-    });
-
-    onDestroy(() => {
-        if (saveChangesToast !== null) {
-            toast.dismiss(saveChangesToast);
-        }
-        saveChangesToast = null;
-    });
+	import CalSecuritySettings from "@/dashboard/calendar/CalSecuritySettings.svelte";
+	import CalDisplaySettings from "@/dashboard/calendar/CalDisplaySettings.svelte";
+	import CalFilterSettings from "@/dashboard/calendar/CalFilterSettings.svelte";
+	import CalEventPreview from "@/dashboard/calendar/CalEventPreview.svelte";
+	import CalQuickActions from "@/dashboard/calendar/CalQuickActions.svelte";
+	import CalGeneralInfo from "@/dashboard/calendar/CalGeneralInfo.svelte";
+	import CalStatistics from "@/dashboard/calendar/CalStatistics.svelte";
+	import { updateCalendarForm } from "../calendarActions.remote.js";
+	import CalAvatar from "@/dashboard/calendar/CalAvatar.svelte";
+	import CalShare from "@/dashboard/calendar/CalShare.svelte";
+	import { getCalendarById } from "../../backend.remote.js";
+	import { Button } from "@/components/ui/button";
+	import { Temporal } from "temporal-polyfill";
+	import { clearFileInput } from "@/utils.js";
+	import { ArrowLeft } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
+	import { onDestroy } from "svelte";
+
+	let { data } = $props();
+
+	let selectedCalendar = $derived(await getCalendarById(data.selectedCalendarId));
+
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let nowDate = $derived(Temporal.Now.zonedDateTimeISO(timeZone));
+	let uploadNewAvatar: File | null = $state(null);
+	let saveChangesToast: string | number | null = $state(null);
+
+	let avatarChanged = $state(false);
+	let generalInfoChanged = $state(false);
+	let filterSettingsChanged = $state(false);
+	let displaySettingsChanged = $state(false);
+	let securitySettingsChanged = $state(false);
+
+	// svelte-ignore state_referenced_locally
+	let displaySettingsPreview = $state(selectedCalendar.displaySettings);
+
+	// This effect checks if any configurations have changed. If so, the saveRequired state will be set to true.
+	$effect(() => {
+		const saveRequired =
+			avatarChanged ||
+			generalInfoChanged ||
+			displaySettingsChanged ||
+			filterSettingsChanged ||
+			securitySettingsChanged;
+
+		if (saveRequired) {
+			if (saveChangesToast === null) {
+				saveChangesToast = toast("Save?", {
+					description: "You have some unsaved changes.",
+					dismissable: false,
+					duration: Number.POSITIVE_INFINITY,
+					action: {
+						label: "Save Changes",
+						onClick: () => {
+							const formSubmitButton = document.getElementById(
+								"updateCalendarButton1"
+							) as HTMLButtonElement | null;
+							if (formSubmitButton) {
+								formSubmitButton.click();
+							}
+						}
+					}
+				});
+			}
+		} else {
+			if (saveChangesToast !== null) {
+				toast.dismiss(saveChangesToast);
+			}
+			saveChangesToast = null;
+		}
+	});
+
+	onDestroy(() => {
+		if (saveChangesToast !== null) {
+			toast.dismiss(saveChangesToast);
+		}
+		saveChangesToast = null;
+	});
 </script>
 
 <svelte:head>
-    <title>{selectedCalendar.name} | InfoSections</title>
+	<title>{selectedCalendar.name} | InfoSections</title>
 </svelte:head>
 
 <div class="max-w-5xl mx-auto space-y-6 isolate">
-    <div class="flex items-center gap-4">
-        <Button variant="ghost" size="icon" href="/dashboard/calendars">
-            <ArrowLeft class="h-5 w-5" />
-        </Button>
-        <div>
-            <h1 class="text-3xl font-bold text-foreground">{selectedCalendar.name} | Calendar Details</h1>
-            <p class="text-muted-foreground mt-1">Manage your calendar settings and filters.</p>
-        </div>
-    </div>
-
-    <div class="grid gap-6 lg:grid-cols-3">
-        <form {...updateCalendarForm.enhance(async ({ submit, form }) => {
-            let savingChanges = toast.loading("Saving Changes.", { duration: Number.POSITIVE_INFINITY });
-            try {
-                await submit();
-                toast.dismiss(savingChanges);
-
-                if (!updateCalendarForm.fields.allIssues()) {
-                    form.reset();
-
-                    clearFileInput(document.getElementById("imageUploaderCalendar"));
-                    uploadNewAvatar = null;
-                    toast.success("Saved Changes");
-                } else {
-                    toast.error("Something went wrong!");
-                }
-            } catch (err) {
-                console.log(err);
-                toast.dismiss(savingChanges);
-                toast.error("An error occured.");
-            }
-        })} class="lg:col-span-2 space-y-6" enctype="multipart/form-data">
-            {#if selectedCalendar.id.length > 0}
-                <input {...updateCalendarForm.fields.id.as("hidden", selectedCalendar.id)} />
-            {/if}
-            <Button type="submit" id="updateCalendarButton1" class="sr-only">Update Calendar</Button>
-            <CalAvatar
-                bind:changed={avatarChanged}
-                bind:uploadNewAvatar
-                avatarLink={selectedCalendar.logo ? `${data.pb_url}/api/files/${selectedCalendar.collectionId}/${selectedCalendar.id}/${selectedCalendar.logo}` : ""}
-            />
-
-            <CalGeneralInfo
-                bind:changed={generalInfoChanged}
-                calPublicId={selectedCalendar.publicId}
-                calendarName={selectedCalendar.name}
-                calendarDescription={selectedCalendar.description}
-            />
-
-            <CalDisplaySettings displaySettings={selectedCalendar.displaySettings} bind:changed={displaySettingsChanged} bind:displaySettingsPreview />
-
-            <CalEventPreview {nowDate} displaySettings={displaySettingsPreview} />
-
-            <CalFilterSettings filters={selectedCalendar.filters} bind:changed={filterSettingsChanged} />
-
-            <CalSecuritySettings
-                bind:changed={securitySettingsChanged}
-                enablePassword={selectedCalendar.passwordEnabled}
-                newPassword=""
-                passwordScreenMessage={selectedCalendar.passwordScreenMessage}
-            />
-        </form>
-
-        <!-- This is the sticky side options section. -->
-        <div class="space-y-6 stickySidebar h-fit">
-            <CalShare calId={selectedCalendar.publicId} />
-
-            <CalStatistics
-                visits={selectedCalendar.visits}
-                updated={selectedCalendar.updated}
-                created={selectedCalendar.created}
-                {timeZone}
-            />
-
-            <CalQuickActions calId={selectedCalendar.id} />
-        </div>
-    </div>
+	<div class="flex items-center gap-4">
+		<Button variant="ghost" size="icon" href="/dashboard/calendars">
+			<ArrowLeft class="h-5 w-5" />
+		</Button>
+		<div>
+			<h1 class="text-3xl font-bold text-foreground">{selectedCalendar.name} | Calendar Details</h1>
+			<p class="text-muted-foreground mt-1">Manage your calendar settings and filters.</p>
+		</div>
+	</div>
+
+	<div class="grid gap-6 lg:grid-cols-3">
+		<form
+			{...updateCalendarForm.enhance(async ({ submit, form }) => {
+				let savingChanges = toast.loading("Saving Changes.", {
+					duration: Number.POSITIVE_INFINITY
+				});
+				try {
+					await submit();
+					toast.dismiss(savingChanges);
+
+					if (!updateCalendarForm.fields.allIssues()) {
+						form.reset();
+
+						clearFileInput(document.getElementById("imageUploaderCalendar"));
+						uploadNewAvatar = null;
+						toast.success("Saved Changes");
+					} else {
+						toast.error("Something went wrong!");
+					}
+				} catch (err) {
+					console.log(err);
+					toast.dismiss(savingChanges);
+					toast.error("An error occured.");
+				}
+			})}
+			class="lg:col-span-2 space-y-6"
+			enctype="multipart/form-data"
+		>
+			{#if selectedCalendar.id.length > 0}
+				<input {...updateCalendarForm.fields.id.as("hidden", selectedCalendar.id)} />
+			{/if}
+			<Button type="submit" id="updateCalendarButton1" class="sr-only">Update Calendar</Button>
+			<CalAvatar
+				bind:changed={avatarChanged}
+				bind:uploadNewAvatar
+				avatarLink={selectedCalendar.logo
+					? `${data.pb_url}/api/files/${selectedCalendar.collectionId}/${selectedCalendar.id}/${selectedCalendar.logo}`
+					: ""}
+			/>
+
+			<CalGeneralInfo
+				bind:changed={generalInfoChanged}
+				calPublicId={selectedCalendar.publicId}
+				calendarName={selectedCalendar.name}
+				calendarDescription={selectedCalendar.description}
+			/>
+
+			<CalDisplaySettings
+				displaySettings={selectedCalendar.displaySettings}
+				bind:changed={displaySettingsChanged}
+				bind:displaySettingsPreview
+			/>
+
+			<CalEventPreview {nowDate} displaySettings={displaySettingsPreview} />
+
+			<CalFilterSettings filters={selectedCalendar.filters} bind:changed={filterSettingsChanged} />
+
+			<CalSecuritySettings
+				bind:changed={securitySettingsChanged}
+				enablePassword={selectedCalendar.passwordEnabled}
+				newPassword=""
+				passwordScreenMessage={selectedCalendar.passwordScreenMessage}
+			/>
+		</form>
+
+		<!-- This is the sticky side options section. -->
+		<div class="space-y-6 stickySidebar h-fit">
+			<CalShare calId={selectedCalendar.publicId} />
+
+			<CalStatistics
+				visits={selectedCalendar.visits}
+				updated={selectedCalendar.updated}
+				created={selectedCalendar.created}
+				{timeZone}
+			/>
+
+			<CalQuickActions calId={selectedCalendar.id} />
+		</div>
+	</div>
 </div>
 
 <style>
-    .stickySidebar {
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-    }
-</style>
\ No newline at end of file
+	.stickySidebar {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+	}
+</style>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
index c43cd96..4cd752b 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
@@ -1,4 +1,8 @@
-import { defaultCalendarCustomizations, defaultCalendarFilters, type CalendarDBModel } from "@/cal.utils";
+import {
+	defaultCalendarCustomizations,
+	defaultCalendarFilters,
+	type CalendarDBModel
+} from "@/cal.utils";
 import { getCalendarById, getMyCalendars } from "../backend.remote";
 import { command, form, getRequestEvent } from "$app/server";
 import { invalid, redirect } from "@sveltejs/kit";
@@ -8,219 +12,232 @@ import * as v from "valibot";
 config();
 
 async function calPublicIdInUse(locals: App.Locals, pubID: string) {
-    try {
-        await locals.pb.collection('calendars').getFirstListItem(`publicId="${pubID}"`, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-        return true;
-    } catch (err) {
-        return false;
-    }
+	try {
+		await locals.pb.collection("calendars").getFirstListItem(`publicId="${pubID}"`, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+		return true;
+	} catch (err) {
+		return false;
+	}
 }
 
 const CreateCalendarSchema = v.object({
-    publicId: v.pipe(
-        v.string(),
-        v.regex(/^[a-zA-Z0-9]+$/, 'No spaces or special characters allowed.')
-    ),
-    name: v.pipe(v.string(), v.nonEmpty("A name for the calendar is required.")),
-    description: v.pipe(v.string(), v.nonEmpty("A description for the calendar is required.")),
-    enablePassword: v.boolean(),
-    newPassword: v.string()
+	publicId: v.pipe(
+		v.string(),
+		v.regex(/^[a-zA-Z0-9]+$/, "No spaces or special characters allowed.")
+	),
+	name: v.pipe(v.string(), v.nonEmpty("A name for the calendar is required.")),
+	description: v.pipe(v.string(), v.nonEmpty("A description for the calendar is required.")),
+	enablePassword: v.boolean(),
+	newPassword: v.string()
 });
 
 export const createCalendarCommand = command(CreateCalendarSchema, async (newCalendar) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const calendars = await getMyCalendars();
-
-    if (calendars.length > 0 && locals.user.accessLevel === "none") {
-        return {
-            error: true,
-            msg: "Exceed the amount of calendars on the free plan."
-        }
-    }
-
-    if (await calPublicIdInUse(locals, newCalendar.publicId)) {
-        return {
-            error: true,
-            msg: "Calendar URL path already taken."
-        }
-    }
-
-    try {
-        let data: Partial<CalendarDBModel> = {
-            "publicId": newCalendar.publicId,
-            "name": newCalendar.name,
-            "description": newCalendar.description,
-            "passwordEnabled": newCalendar.enablePassword,
-            "owner": locals.user.id,
-            "displaySettings": defaultCalendarCustomizations,
-            "filters": defaultCalendarFilters
-        };
-
-        if (newCalendar.enablePassword) {
-            data["password"] = newCalendar.newPassword;
-        }
-
-        await locals.pb.collection('calendars').create(data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "Internal Server Error."
-        }
-    }
-
-    getMyCalendars().refresh();
-    return {
-        error: false,
-        msg: "Successfully created calendar."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	const calendars = await getMyCalendars();
+
+	if (calendars.length > 0 && locals.user.accessLevel === "none") {
+		return {
+			error: true,
+			msg: "Exceed the amount of calendars on the free plan."
+		};
+	}
+
+	if (await calPublicIdInUse(locals, newCalendar.publicId)) {
+		return {
+			error: true,
+			msg: "Calendar URL path already taken."
+		};
+	}
+
+	try {
+		let data: Partial<CalendarDBModel> = {
+			publicId: newCalendar.publicId,
+			name: newCalendar.name,
+			description: newCalendar.description,
+			passwordEnabled: newCalendar.enablePassword,
+			owner: locals.user.id,
+			displaySettings: defaultCalendarCustomizations,
+			filters: defaultCalendarFilters
+		};
+
+		if (newCalendar.enablePassword) {
+			data["password"] = newCalendar.newPassword;
+		}
+
+		await locals.pb.collection("calendars").create(data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: "Internal Server Error."
+		};
+	}
+
+	getMyCalendars().refresh();
+	return {
+		error: false,
+		msg: "Successfully created calendar."
+	};
 });
 
 const UpdateCalendarSchema = v.object({
-    id: v.string(),
-    publicId: v.pipe(
-        v.string(),
-        v.regex(/^[a-zA-Z0-9]+$/, 'No spaces or special characters allowed.')
-    ),
-    name: v.string(),
-    description: v.string(),
-    enablePassword: v.optional(v.boolean(), false),
-    newPassword: v.optional(v.string()),
-    avatarLink: v.optional(v.string()),
-    newAvatar: v.optional(v.any()),
-    passwordScreenMessage: v.optional(v.string()),
-    displaySettings: v.object({
-        viewType: v.picklist(["3day", "week", "month"]),
-        useAMPM: v.optional(v.boolean(), false),
-        showResourcePathname: v.optional(v.boolean(), false),
-        onlyShowLocationTitle: v.optional(v.boolean(), false),
-        showLocation: v.optional(v.boolean(), false),
-        showResources: v.optional(v.boolean(), false),
-        showRooms: v.optional(v.boolean(), false),
-        showDescription: v.optional(v.boolean(), false)
-    }),
-    filters: v.object({
-        onlyShowFeatured: v.optional(v.boolean(), false),
-	    hideUnpublished: v.optional(v.boolean(), false),
-        resourceFilterType: v.picklist(["allow", "block"]),
-        allowResources: v.optional(v.array(v.string()), []),
-        blockResources: v.optional(v.array(v.string()), []),
-        enableResourceFiltering: v.optional(v.boolean(), false),
-        tagFilterType: v.picklist(["allow", "block"]),
-        allowTags: v.optional(v.array(v.string()), []),
-        blockTags: v.optional(v.array(v.string()), []),
-        enableTagFiltering: v.optional(v.boolean(), false)
-    })
+	id: v.string(),
+	publicId: v.pipe(
+		v.string(),
+		v.regex(/^[a-zA-Z0-9]+$/, "No spaces or special characters allowed.")
+	),
+	name: v.string(),
+	description: v.string(),
+	enablePassword: v.optional(v.boolean(), false),
+	newPassword: v.optional(v.string()),
+	avatarLink: v.optional(v.string()),
+	newAvatar: v.optional(v.any()),
+	passwordScreenMessage: v.optional(v.string()),
+	displaySettings: v.object({
+		viewType: v.picklist(["3day", "week", "month"]),
+		useAMPM: v.optional(v.boolean(), false),
+		showResourcePathname: v.optional(v.boolean(), false),
+		onlyShowLocationTitle: v.optional(v.boolean(), false),
+		showLocation: v.optional(v.boolean(), false),
+		showResources: v.optional(v.boolean(), false),
+		showRooms: v.optional(v.boolean(), false),
+		showDescription: v.optional(v.boolean(), false)
+	}),
+	filters: v.object({
+		onlyShowFeatured: v.optional(v.boolean(), false),
+		hideUnpublished: v.optional(v.boolean(), false),
+		resourceFilterType: v.picklist(["allow", "block"]),
+		allowResources: v.optional(v.array(v.string()), []),
+		blockResources: v.optional(v.array(v.string()), []),
+		enableResourceFiltering: v.optional(v.boolean(), false),
+		tagFilterType: v.picklist(["allow", "block"]),
+		allowTags: v.optional(v.array(v.string()), []),
+		blockTags: v.optional(v.array(v.string()), []),
+		enableTagFiltering: v.optional(v.boolean(), false)
+	})
 });
 
 export const updateCalendarForm = form(UpdateCalendarSchema, async (updatedCalendar, issue) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return redirect(303, "/");
-    }
-
-    const calendar = await getCalendarById(updatedCalendar.id);
-
-    if (calendar.publicId !== updatedCalendar.publicId && await calPublicIdInUse(locals, updatedCalendar.publicId)) {
-        return invalid(issue.publicId("Calendar URL path already taken."));
-    }
-
-    try {
-        let data: Partial<CalendarDBModel> = {
-            "publicId": updatedCalendar.publicId,
-            "name": updatedCalendar.name,
-            "description": updatedCalendar.description,
-            "passwordEnabled": updatedCalendar.enablePassword,
-            "displaySettings": updatedCalendar.displaySettings,
-            "filters": updatedCalendar.filters
-        };
-
-        if (updatedCalendar.newPassword && updatedCalendar.newPassword.length > 0 && updatedCalendar.enablePassword) {
-            data["password"] = updatedCalendar.newPassword;
-        }
-
-        if (updatedCalendar.passwordScreenMessage && updatedCalendar.passwordScreenMessage.length > 0 && updatedCalendar.enablePassword) {
-            data["passwordScreenMessage"] = updatedCalendar.passwordScreenMessage;
-        }
-
-        if (!updatedCalendar.avatarLink && updatedCalendar.newAvatar) {
-            const newAvatar = updatedCalendar.newAvatar as File;
-            const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, { type: newAvatar.type });
-            data["logo"] = file;
-        }
-        
-        if (!updatedCalendar.avatarLink && !updatedCalendar.newAvatar) {
-            data["logo"] = "";
-        }
-
-        await locals.pb.collection('calendars').update(calendar.id, data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return invalid(issue.id("Failed to update calendar."));
-    }
-
-    getMyCalendars().refresh();
-    getCalendarById(calendar.id).refresh();
-    return {
-        error: false,
-        msg: "Successfully updated calendar."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return redirect(303, "/");
+	}
+
+	const calendar = await getCalendarById(updatedCalendar.id);
+
+	if (
+		calendar.publicId !== updatedCalendar.publicId &&
+		(await calPublicIdInUse(locals, updatedCalendar.publicId))
+	) {
+		return invalid(issue.publicId("Calendar URL path already taken."));
+	}
+
+	try {
+		let data: Partial<CalendarDBModel> = {
+			publicId: updatedCalendar.publicId,
+			name: updatedCalendar.name,
+			description: updatedCalendar.description,
+			passwordEnabled: updatedCalendar.enablePassword,
+			displaySettings: updatedCalendar.displaySettings,
+			filters: updatedCalendar.filters
+		};
+
+		if (
+			updatedCalendar.newPassword &&
+			updatedCalendar.newPassword.length > 0 &&
+			updatedCalendar.enablePassword
+		) {
+			data["password"] = updatedCalendar.newPassword;
+		}
+
+		if (
+			updatedCalendar.passwordScreenMessage &&
+			updatedCalendar.passwordScreenMessage.length > 0 &&
+			updatedCalendar.enablePassword
+		) {
+			data["passwordScreenMessage"] = updatedCalendar.passwordScreenMessage;
+		}
+
+		if (!updatedCalendar.avatarLink && updatedCalendar.newAvatar) {
+			const newAvatar = updatedCalendar.newAvatar as File;
+			const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, {
+				type: newAvatar.type
+			});
+			data["logo"] = file;
+		}
+
+		if (!updatedCalendar.avatarLink && !updatedCalendar.newAvatar) {
+			data["logo"] = "";
+		}
+
+		await locals.pb.collection("calendars").update(calendar.id, data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return invalid(issue.id("Failed to update calendar."));
+	}
+
+	getMyCalendars().refresh();
+	getCalendarById(calendar.id).refresh();
+	return {
+		error: false,
+		msg: "Successfully updated calendar."
+	};
 });
 
 export const deleteCalendarCommand = command(v.string(), async (id) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const calendar = await getCalendarById(id);
-
-    try {
-        await locals.pb.collection('calendars').delete(calendar.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: `Internal Server Error.`
-        }
-    }
-
-    getMyCalendars().refresh();
-    // getMyCalendarById(calendar.id).refresh();
-    return {
-        error: false,
-        msg: "Successfully deleted calendar."
-    }
-});
\ No newline at end of file
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	const calendar = await getCalendarById(id);
+
+	try {
+		await locals.pb.collection("calendars").delete(calendar.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: `Internal Server Error.`
+		};
+	}
+
+	getMyCalendars().refresh();
+	// getMyCalendarById(calendar.id).refresh();
+	return {
+		error: false,
+		msg: "Successfully deleted calendar."
+	};
+});
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.server.ts
index 8d8c959..086ce30 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.server.ts
@@ -4,12 +4,12 @@ import { config } from "dotenv";
 config();
 
 export async function load({ parent, locals }) {
-    await parent();
-    if (!locals.user) {
-        return redirect(307, "/");
-    }
+	await parent();
+	if (!locals.user) {
+		return redirect(307, "/");
+	}
 
-    return {
-        websiteURL: process.env["VITE_WEBSITE_URL"]!
-    }
-}
\ No newline at end of file
+	return {
+		websiteURL: process.env["VITE_WEBSITE_URL"]!
+	};
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.svelte
index 301b75f..ad896fb 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/+page.svelte
@@ -1,218 +1,213 @@
 <script lang="ts">
-    import SingleDynamicURL from "@/dashboard/dynamicUrls/SingleDynamicURL.svelte";
-    import { TIMEZONES, type DynamicURLModel } from "@/utils.js";
-    import * as Select from "$lib/components/ui/select/index.js";
-    import { Spinner } from "@/components/ui/spinner/index.js";
-    import { createDynamicURLCommand } from "./data.remote.js";
-    import { getMyDynamicURLS } from "../backend.remote.js";
-    import { Label } from "@/components/ui/label/index.js";
-    import { Input } from "@/components/ui/input/index.js";
-    import * as Dialog from "@/components/ui/dialog/index";
-    import * as Card from "@/components/ui/card/index";
-    import { Button } from "@/components/ui/button";
-    import { afterNavigate } from "$app/navigation";
-    import { Link2, Plus } from "@lucide/svelte";
-    import { Temporal } from "temporal-polyfill";
-    import { browser } from "$app/environment";
-    import { toast } from "svelte-sonner";
-    import { page } from "$app/stores";
-
-    function getTotalHits(url: DynamicURLModel) {
-        return url.refs.reduce((sum, ref) => sum + ref.hits, 0)
-    }
-
-    function getTimeSlotCount(url: DynamicURLModel) {
-        return url.weekSheet.reduce((sum, day) => sum + day.length, 0)
-    }
-
-    let { data } = $props();
-    let openId: string | null = $state(null);
-    let newDynamicURLOpen = $state(false);
-
-    let newDynamicURLID = $state("");
-    let newDynamicURLDefaultRedirectTo = $state("");
-    let timeZone = $state(Temporal.Now.timeZoneId());
-
-    let creatingDynamicURL = $state(false);
-
-    function handleCreate() {
-        newDynamicURLOpen = true;
-    }
-
-    async function handleCreateDynamicURL() {
-        if (newDynamicURLID && newDynamicURLDefaultRedirectTo) {
-            creatingDynamicURL = true;
-            try {
-                const response = await createDynamicURLCommand({
-                    id: newDynamicURLID,
-                    defaultRedirectTo: newDynamicURLDefaultRedirectTo,
-                    timeZone: timeZone
-                });
-                creatingDynamicURL = false;
-                if (response.error) {
-                    toast.error(response.msg);
-                } else {
-                    toast.success(response.msg);
-                    newDynamicURLOpen = false;
-                    newDynamicURLID = "";
-                    newDynamicURLDefaultRedirectTo = "";
-                    timeZone = Temporal.Now.timeZoneId();
-
-                    let updating = toast.info("Updating Dynamic URL List");
-                    toast.dismiss(updating);
-                }
-            } catch (err) {
-                creatingDynamicURL = false;
-                console.log("errrrrr", err);
-                toast.error("An error has occured.");
-            }
-        } else {
-            toast.error("Missing Fields.");
-        }
-    }
-
-    afterNavigate(() => {
+	import SingleDynamicURL from "@/dashboard/dynamicUrls/SingleDynamicURL.svelte";
+	import { TIMEZONES, type DynamicURLModel } from "@/utils.js";
+	import * as Select from "$lib/components/ui/select/index.js";
+	import { Spinner } from "@/components/ui/spinner/index.js";
+	import { createDynamicURLCommand } from "./data.remote.js";
+	import { getMyDynamicURLS } from "../backend.remote.js";
+	import { Label } from "@/components/ui/label/index.js";
+	import { Input } from "@/components/ui/input/index.js";
+	import * as Dialog from "@/components/ui/dialog/index";
+	import * as Card from "@/components/ui/card/index";
+	import { Button } from "@/components/ui/button";
+	import { afterNavigate } from "$app/navigation";
+	import { Link2, Plus } from "@lucide/svelte";
+	import { Temporal } from "temporal-polyfill";
+	import { browser } from "$app/environment";
+	import { toast } from "svelte-sonner";
+	import { page } from "$app/stores";
+
+	function getTotalHits(url: DynamicURLModel) {
+		return url.refs.reduce((sum, ref) => sum + ref.hits, 0);
+	}
+
+	function getTimeSlotCount(url: DynamicURLModel) {
+		return url.weekSheet.reduce((sum, day) => sum + day.length, 0);
+	}
+
+	let { data } = $props();
+	let openId: string | null = $state(null);
+	let newDynamicURLOpen = $state(false);
+
+	let newDynamicURLID = $state("");
+	let newDynamicURLDefaultRedirectTo = $state("");
+	let timeZone = $state(Temporal.Now.timeZoneId());
+
+	let creatingDynamicURL = $state(false);
+
+	function handleCreate() {
+		newDynamicURLOpen = true;
+	}
+
+	async function handleCreateDynamicURL() {
+		if (newDynamicURLID && newDynamicURLDefaultRedirectTo) {
+			creatingDynamicURL = true;
+			try {
+				const response = await createDynamicURLCommand({
+					id: newDynamicURLID,
+					defaultRedirectTo: newDynamicURLDefaultRedirectTo,
+					timeZone: timeZone
+				});
+				creatingDynamicURL = false;
+				if (response.error) {
+					toast.error(response.msg);
+				} else {
+					toast.success(response.msg);
+					newDynamicURLOpen = false;
+					newDynamicURLID = "";
+					newDynamicURLDefaultRedirectTo = "";
+					timeZone = Temporal.Now.timeZoneId();
+
+					let updating = toast.info("Updating Dynamic URL List");
+					toast.dismiss(updating);
+				}
+			} catch (err) {
+				creatingDynamicURL = false;
+				console.log("errrrrr", err);
+				toast.error("An error has occured.");
+			}
+		} else {
+			toast.error("Missing Fields.");
+		}
+	}
+
+	afterNavigate(() => {
 		if (browser) {
-            const expandAURL = $page.url.searchParams.get("expanded");
-            if (expandAURL && expandAURL.length > 0) {
-                openId = expandAURL;
-                const openIdElem = document.getElementById(`aDynamicURL${openId}`);
-                if (openIdElem) {
-                    setTimeout(() => {
-                        openIdElem.scrollIntoView({
-                            behavior: 'smooth'
-                        });
-                    }, 50);
-                }
-            }
-            newDynamicURLOpen = $page.url.searchParams.get("new") === "1";
+			const expandAURL = $page.url.searchParams.get("expanded");
+			if (expandAURL && expandAURL.length > 0) {
+				openId = expandAURL;
+				const openIdElem = document.getElementById(`aDynamicURL${openId}`);
+				if (openIdElem) {
+					setTimeout(() => {
+						openIdElem.scrollIntoView({
+							behavior: "smooth"
+						});
+					}, 50);
+				}
+			}
+			newDynamicURLOpen = $page.url.searchParams.get("new") === "1";
 		}
 	});
 </script>
 
 <svelte:head>
-    <title>My Dynamic URLs | InfoSections</title>
+	<title>My Dynamic URLs | InfoSections</title>
 </svelte:head>
 
-
 <div class="space-y-6">
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-2xl font-bold text-foreground">My Dynamic URLs</h1>
-            <p class="text-sm text-muted-foreground mt-1">
-                Create smart redirects that change based on time of day and day of week.
-            </p>
-        </div>
-        <Button onclick={handleCreate} class="gap-2">
-            <Plus class="h-4 w-4" />
-            New Dynamic URL
-        </Button>
-    </div>
-
-    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-        <Card.Root class="p-4">
-            <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Total URLs</p>
-            <p class="text-2xl font-semibold text-foreground mt-1">{(await getMyDynamicURLS()).length}</p>
-        </Card.Root>
-        <Card.Root class="p-4">
-            <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Active</p>
-            <p class="text-2xl font-semibold text-foreground mt-1">
-                {(await getMyDynamicURLS()).filter((u) => !u.disableURL).length}
-            </p>
-        </Card.Root>
-        <Card.Root class="p-4">
-            <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Total Hits</p>
-            <p class="text-2xl font-semibold text-foreground mt-1">
-                {(await getMyDynamicURLS()).reduce((sum, u) => sum + getTotalHits(u), 0).toLocaleString()}
-            </p>
-        </Card.Root>
-        <Card.Root class="p-4">
-            <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Time Slots</p>
-            <p class="text-2xl font-semibold text-foreground mt-1">
-                {(await getMyDynamicURLS()).reduce((sum, u) => sum + getTimeSlotCount(u), 0)}
-            </p>
-        </Card.Root>
-    </div>
-
-    <div class="space-y-3">
-        {#each await getMyDynamicURLS() as dynamic_url (`aDynamicURL${dynamic_url.id}`)}
-            <SingleDynamicURL bind:openId={openId} url={dynamic_url} websiteURL={data.websiteURL} />
-        {/each}
-
-        {#if (await getMyDynamicURLS()).length === 0}
-            <Card.Root class="p-12 text-center">
-                <Link2 class="h-10 w-10 text-muted-foreground mx-auto mb-4" />
-                <h3 class="text-lg font-medium text-foreground">No dynamic URLs yet</h3>
-                <p class="text-sm text-muted-foreground mt-1">
-                    Create your first smart redirect to get started.
-                </p>
-                <Button onclick={handleCreate} class="mt-4 gap-2">
-                    <Plus class="h-4 w-4" />
-                    Create Dynamic URL
-                </Button>
-            </Card.Root>
-        {/if}
-    </div>
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-2xl font-bold text-foreground">My Dynamic URLs</h1>
+			<p class="text-sm text-muted-foreground mt-1">
+				Create smart redirects that change based on time of day and day of week.
+			</p>
+		</div>
+		<Button onclick={handleCreate} class="gap-2">
+			<Plus class="h-4 w-4" />
+			New Dynamic URL
+		</Button>
+	</div>
+
+	<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
+		<Card.Root class="p-4">
+			<p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Total URLs</p>
+			<p class="text-2xl font-semibold text-foreground mt-1">{(await getMyDynamicURLS()).length}</p>
+		</Card.Root>
+		<Card.Root class="p-4">
+			<p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Active</p>
+			<p class="text-2xl font-semibold text-foreground mt-1">
+				{(await getMyDynamicURLS()).filter((u) => !u.disableURL).length}
+			</p>
+		</Card.Root>
+		<Card.Root class="p-4">
+			<p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Total Hits</p>
+			<p class="text-2xl font-semibold text-foreground mt-1">
+				{(await getMyDynamicURLS()).reduce((sum, u) => sum + getTotalHits(u), 0).toLocaleString()}
+			</p>
+		</Card.Root>
+		<Card.Root class="p-4">
+			<p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">Time Slots</p>
+			<p class="text-2xl font-semibold text-foreground mt-1">
+				{(await getMyDynamicURLS()).reduce((sum, u) => sum + getTimeSlotCount(u), 0)}
+			</p>
+		</Card.Root>
+	</div>
+
+	<div class="space-y-3">
+		{#each await getMyDynamicURLS() as dynamic_url (`aDynamicURL${dynamic_url.id}`)}
+			<SingleDynamicURL bind:openId url={dynamic_url} websiteURL={data.websiteURL} />
+		{/each}
+
+		{#if (await getMyDynamicURLS()).length === 0}
+			<Card.Root class="p-12 text-center">
+				<Link2 class="h-10 w-10 text-muted-foreground mx-auto mb-4" />
+				<h3 class="text-lg font-medium text-foreground">No dynamic URLs yet</h3>
+				<p class="text-sm text-muted-foreground mt-1">
+					Create your first smart redirect to get started.
+				</p>
+				<Button onclick={handleCreate} class="mt-4 gap-2">
+					<Plus class="h-4 w-4" />
+					Create Dynamic URL
+				</Button>
+			</Card.Root>
+		{/if}
+	</div>
 </div>
 
 <Dialog.Root bind:open={newDynamicURLOpen}>
-    <Dialog.Content class="sm:max-w-125">
-        <Dialog.Header>
-        <Dialog.Title>Create New Dynamic URL</Dialog.Title>
-            <Dialog.Description>You can change more settings after creating the URL.</Dialog.Description>
-        </Dialog.Header>
-
-        <div class="space-y-4 py-4">
-            <div class="space-y-2">
-                <Label for="id">URL ID</Label>
-                <Input
-                    id="id"
-                    placeholder="e.g., donate"
-                    bind:value={newDynamicURLID}
-                />
-            </div>
-
-            <div class="space-y-2">
-                <Label for="defaulturl">Default Redirect URL</Label>
-                <Input
-                    id="defaulturl"
-                    type="url"
-                    bind:value={newDynamicURLDefaultRedirectTo}
-                    placeholder="https://example.com/donate"
-                />
-                <p class="text-xs text-muted-foreground">Where visitors go when no schedule or override matches.</p>
-            </div>
-
-            <div class="space-y-2">
-                <Label for="tznew">Timezone</Label>
-                <Select.Root type="single" bind:value={timeZone} >
-                    <Select.Trigger id="tznew">
-                    {timeZone}
-                    </Select.Trigger>
-                    <Select.Content>
-                    {#each TIMEZONES as tz (`aTZ${tz}`)}
-                        <Select.Item value={tz}>
-                            {tz.replace(/_/g, " ")}
-                        </Select.Item>
-                    {/each}
-                    </Select.Content>
-                </Select.Root>
-                <p class="text-xs text-muted-foreground">Schedule times are evaluated in this timezone.</p>
-            </div>
-        </div>
-
-        <Dialog.Footer>
-        <Button variant="outline" onclick={() => newDynamicURLOpen = false}>
-            Cancel
-        </Button>
-        <Button onclick={handleCreateDynamicURL}>
-            {#if creatingDynamicURL}
-                <Spinner />
-                Creating Dynamic URL...
-            {:else}
-                Create Dynamic URL
-            {/if}
-        </Button>
-        </Dialog.Footer>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+	<Dialog.Content class="sm:max-w-125">
+		<Dialog.Header>
+			<Dialog.Title>Create New Dynamic URL</Dialog.Title>
+			<Dialog.Description>You can change more settings after creating the URL.</Dialog.Description>
+		</Dialog.Header>
+
+		<div class="space-y-4 py-4">
+			<div class="space-y-2">
+				<Label for="id">URL ID</Label>
+				<Input id="id" placeholder="e.g., donate" bind:value={newDynamicURLID} />
+			</div>
+
+			<div class="space-y-2">
+				<Label for="defaulturl">Default Redirect URL</Label>
+				<Input
+					id="defaulturl"
+					type="url"
+					bind:value={newDynamicURLDefaultRedirectTo}
+					placeholder="https://example.com/donate"
+				/>
+				<p class="text-xs text-muted-foreground">
+					Where visitors go when no schedule or override matches.
+				</p>
+			</div>
+
+			<div class="space-y-2">
+				<Label for="tznew">Timezone</Label>
+				<Select.Root type="single" bind:value={timeZone}>
+					<Select.Trigger id="tznew">
+						{timeZone}
+					</Select.Trigger>
+					<Select.Content>
+						{#each TIMEZONES as tz (`aTZ${tz}`)}
+							<Select.Item value={tz}>
+								{tz.replace(/_/g, " ")}
+							</Select.Item>
+						{/each}
+					</Select.Content>
+				</Select.Root>
+				<p class="text-xs text-muted-foreground">Schedule times are evaluated in this timezone.</p>
+			</div>
+		</div>
+
+		<Dialog.Footer>
+			<Button variant="outline" onclick={() => (newDynamicURLOpen = false)}>Cancel</Button>
+			<Button onclick={handleCreateDynamicURL}>
+				{#if creatingDynamicURL}
+					<Spinner />
+					Creating Dynamic URL...
+				{:else}
+					Create Dynamic URL
+				{/if}
+			</Button>
+		</Dialog.Footer>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
index a54baca..2c88707 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/dynamic-urls/data.remote.ts
@@ -7,279 +7,289 @@ import * as v from "valibot";
 config();
 
 const CreateDynamicURLSchema = v.object({
-    id: v.string(),
-    defaultRedirectTo: v.pipe(v.string(), v.url()),
-    timeZone: v.string()
+	id: v.string(),
+	defaultRedirectTo: v.pipe(v.string(), v.url()),
+	timeZone: v.string()
 });
 
 export const createDynamicURLCommand = command(CreateDynamicURLSchema, async (newURLData) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    let dynamicURL: DynamicURLModel | null = null;
-    try {
-        dynamicURL = await locals.pb.collection("dynamic_url").getOne(newURLData.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch(_err) {
-        //All Good
-    }
-
-    if (dynamicURL) {
-        return {
-            error: true,
-            msg: `URL ID: "${newURLData.id}" already in use.`
-        }
-    }
-
-    let user: UserModel | null = null;
-    let dynamicURLs: DynamicURLModel[] = [];
-    try {
-        user = await locals.pb.collection("users").getOne(locals.user.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    if (!user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    try {
-        dynamicURLs = await locals.pb.collection('dynamic_url').getFullList({
-            filter: `owner = "${user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "Internal Server Error."
-        }
-    }
-
-    if (dynamicURLs.length > 0 && user.accessLevel === "none") {
-        return {
-            error: true,
-            msg: "Exceed the amount of dynamic URLs on the free plan."
-        }
-    }
-
-    try {
-        let data: Partial<DynamicURLModel> = {
-            "id": newURLData.id,
-            "defaultRedirectTo": newURLData.defaultRedirectTo,
-            "timeZone": newURLData.timeZone,
-            "weekSheet": [[],[],[],[],[],[],[]],
-            "refs": [],
-            "owner": locals.user.id,
-            "overrideExpireInStr": "never"
-        };
-
-        await locals.pb.collection('dynamic_url').create(data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "Internal Server Error."
-        }
-    }
-
-    getMyDynamicURLS().refresh();
-    return {
-        error: false,
-        msg: "Successfully created dynamic URL."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	let dynamicURL: DynamicURLModel | null = null;
+	try {
+		dynamicURL = await locals.pb.collection("dynamic_url").getOne(newURLData.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (_err) {
+		//All Good
+	}
+
+	if (dynamicURL) {
+		return {
+			error: true,
+			msg: `URL ID: "${newURLData.id}" already in use.`
+		};
+	}
+
+	let user: UserModel | null = null;
+	let dynamicURLs: DynamicURLModel[] = [];
+	try {
+		user = await locals.pb.collection("users").getOne(locals.user.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	if (!user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	try {
+		dynamicURLs = await locals.pb.collection("dynamic_url").getFullList({
+			filter: `owner = "${user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: "Internal Server Error."
+		};
+	}
+
+	if (dynamicURLs.length > 0 && user.accessLevel === "none") {
+		return {
+			error: true,
+			msg: "Exceed the amount of dynamic URLs on the free plan."
+		};
+	}
+
+	try {
+		let data: Partial<DynamicURLModel> = {
+			id: newURLData.id,
+			defaultRedirectTo: newURLData.defaultRedirectTo,
+			timeZone: newURLData.timeZone,
+			weekSheet: [[], [], [], [], [], [], []],
+			refs: [],
+			owner: locals.user.id,
+			overrideExpireInStr: "never"
+		};
+
+		await locals.pb.collection("dynamic_url").create(data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: "Internal Server Error."
+		};
+	}
+
+	getMyDynamicURLS().refresh();
+	return {
+		error: false,
+		msg: "Successfully created dynamic URL."
+	};
 });
 
 const UpdateDynamicURLSchema = v.object({
-    id: v.string(),
-    defaultRedirectTo: v.pipe(v.string(), v.url()),
-    timeZone: v.string(),
-    weekSheet: v.array(v.array(v.object({
-        startMinute: v.number(),
-        endMinute: v.number(),
-        link: v.pipe(v.string(), v.url())
-    }))),
-    enableWeekSheet: v.boolean(),
-    enableOverrideRedirect: v.boolean(),
-    overrideExpiresIn: v.string(),
-    disableURL: v.boolean(),
-    overrideRedirectTo: v.nullish(v.union([v.pipe(v.string(), v.url()), v.pipe(v.string(), v.maxLength(0))])),
+	id: v.string(),
+	defaultRedirectTo: v.pipe(v.string(), v.url()),
+	timeZone: v.string(),
+	weekSheet: v.array(
+		v.array(
+			v.object({
+				startMinute: v.number(),
+				endMinute: v.number(),
+				link: v.pipe(v.string(), v.url())
+			})
+		)
+	),
+	enableWeekSheet: v.boolean(),
+	enableOverrideRedirect: v.boolean(),
+	overrideExpiresIn: v.string(),
+	disableURL: v.boolean(),
+	overrideRedirectTo: v.nullish(
+		v.union([v.pipe(v.string(), v.url()), v.pipe(v.string(), v.maxLength(0))])
+	)
 });
 
 export const updateDynamicURLCommand = command(UpdateDynamicURLSchema, async (updatedURLData) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    if (updatedURLData.enableOverrideRedirect && !updatedURLData.overrideRedirectTo) {
-        return {
-            error: true,
-            msg: "No Override URL provided."
-        }
-    }
-
-    let dynamicURL: DynamicURLModel | null = null;
-    try {
-        dynamicURL = await locals.pb.collection("dynamic_url").getOne(updatedURLData.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch(_err) {
-        return {
-            error: true,
-            msg: `Dynamic URL not found.`
-        }
-    }
-
-    if (dynamicURL === null) {
-        return {
-            error: true,
-            msg: `Dynamic URL not found.`
-        }
-    }
-
-    if (dynamicURL.owner !== locals.user.id) {
-        return {
-            error: true,
-            msg: `Unauthorized.`
-        }
-    }
-
-    try {
-        let data: Partial<DynamicURLModel> = {
-            "defaultRedirectTo": updatedURLData.defaultRedirectTo,
-            "timeZone": updatedURLData.timeZone,
-            "weekSheet": updatedURLData.weekSheet,
-            "enableWeekSheet": updatedURLData.enableWeekSheet,
-            "enableOverrideRedirect": updatedURLData.enableOverrideRedirect,
-            "disableURL": updatedURLData.disableURL
-        };
-
-        if (updatedURLData.enableOverrideRedirect && updatedURLData.overrideRedirectTo && updatedURLData.overrideRedirectTo.length > 0) {
-            data["overrideRedirectTo"] = updatedURLData.overrideRedirectTo;
-        }
-
-        if (updatedURLData.enableOverrideRedirect) {
-            data["overrideExpiresIn"] = updatedURLData.overrideExpiresIn;
-            data["overrideExpireInStr"] = "set";
-        }
-
-        await locals.pb.collection('dynamic_url').update(dynamicURL.id, data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: `Internal Server Error.`
-        }
-    }
-
-    getMyDynamicURLS().refresh();
-    return {
-        error: false,
-        msg: "Successfully updated dynamic URL."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	if (updatedURLData.enableOverrideRedirect && !updatedURLData.overrideRedirectTo) {
+		return {
+			error: true,
+			msg: "No Override URL provided."
+		};
+	}
+
+	let dynamicURL: DynamicURLModel | null = null;
+	try {
+		dynamicURL = await locals.pb.collection("dynamic_url").getOne(updatedURLData.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (_err) {
+		return {
+			error: true,
+			msg: `Dynamic URL not found.`
+		};
+	}
+
+	if (dynamicURL === null) {
+		return {
+			error: true,
+			msg: `Dynamic URL not found.`
+		};
+	}
+
+	if (dynamicURL.owner !== locals.user.id) {
+		return {
+			error: true,
+			msg: `Unauthorized.`
+		};
+	}
+
+	try {
+		let data: Partial<DynamicURLModel> = {
+			defaultRedirectTo: updatedURLData.defaultRedirectTo,
+			timeZone: updatedURLData.timeZone,
+			weekSheet: updatedURLData.weekSheet,
+			enableWeekSheet: updatedURLData.enableWeekSheet,
+			enableOverrideRedirect: updatedURLData.enableOverrideRedirect,
+			disableURL: updatedURLData.disableURL
+		};
+
+		if (
+			updatedURLData.enableOverrideRedirect &&
+			updatedURLData.overrideRedirectTo &&
+			updatedURLData.overrideRedirectTo.length > 0
+		) {
+			data["overrideRedirectTo"] = updatedURLData.overrideRedirectTo;
+		}
+
+		if (updatedURLData.enableOverrideRedirect) {
+			data["overrideExpiresIn"] = updatedURLData.overrideExpiresIn;
+			data["overrideExpireInStr"] = "set";
+		}
+
+		await locals.pb.collection("dynamic_url").update(dynamicURL.id, data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: `Internal Server Error.`
+		};
+	}
+
+	getMyDynamicURLS().refresh();
+	return {
+		error: false,
+		msg: "Successfully updated dynamic URL."
+	};
 });
 
 const DeleteDynamicURLSchema = v.object({
-    id: v.string(),
+	id: v.string()
 });
 
 export const deleteDynamicURLCommand = command(DeleteDynamicURLSchema, async (updatedURLData) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    let dynamicURL: DynamicURLModel | null = null;
-    try {
-        dynamicURL = await locals.pb.collection("dynamic_url").getOne(updatedURLData.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch(_err) {
-        return {
-            error: true,
-            msg: `Dynamic URL not found.`
-        }
-    }
-
-    if (dynamicURL === null) {
-        return {
-            error: true,
-            msg: `Dynamic URL not found.`
-        }
-    }
-
-    if (dynamicURL.owner !== locals.user.id) {
-        return {
-            error: true,
-            msg: `Unauthorized.`
-        }
-    }
-    
-    try {
-        await locals.pb.collection('dynamic_url').delete(dynamicURL.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: `Internal Server Error.`
-        }
-    }
-
-    getMyDynamicURLS().refresh();
-    return {
-        error: false,
-        msg: "Successfully deleted dynamic URL."
-    }
-});
\ No newline at end of file
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	let dynamicURL: DynamicURLModel | null = null;
+	try {
+		dynamicURL = await locals.pb.collection("dynamic_url").getOne(updatedURLData.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (_err) {
+		return {
+			error: true,
+			msg: `Dynamic URL not found.`
+		};
+	}
+
+	if (dynamicURL === null) {
+		return {
+			error: true,
+			msg: `Dynamic URL not found.`
+		};
+	}
+
+	if (dynamicURL.owner !== locals.user.id) {
+		return {
+			error: true,
+			msg: `Unauthorized.`
+		};
+	}
+
+	try {
+		await locals.pb.collection("dynamic_url").delete(dynamicURL.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: `Internal Server Error.`
+		};
+	}
+
+	getMyDynamicURLS().refresh();
+	return {
+		error: false,
+		msg: "Successfully deleted dynamic URL."
+	};
+});
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.server.ts
index 6ebd1d1..10eedb8 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.server.ts
@@ -1,3 +1,3 @@
 export async function load({ parent }) {
-    await parent();
-}
\ No newline at end of file
+	await parent();
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.svelte
index 40e7055..b52c2ae 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/+page.svelte
@@ -1,218 +1,225 @@
 <script lang="ts">
-    import { createEventListCommand, deleteEventListCommand } from "./eventListActions.remote.js";
-    import { Copy, MoreVertical, Plus, Trash2, Users } from "@lucide/svelte";
-    import * as DropdownMenu from "@/components/ui/dropdown-menu/index";
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Avatar from "$lib/components/ui/avatar/index.js";
-    import { Spinner } from "@/components/ui/spinner/index.js";
-    import NoEventListAvatar from "@/NoEventListAvatar.svelte";
-    import * as Dialog from "@/components/ui/dialog/index";
-    import { getMyEventLists } from "../backend.remote.js";
-    import { Textarea } from "@/components/ui/textarea";
-    import * as Card from "@/components/ui/card/index";
-    import { afterNavigate } from "$app/navigation";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
-    import { browser } from "$app/environment";
-    import { toast } from "svelte-sonner";
-    import { page } from "$app/stores";
-    import { cn } from "@/utils";
-
-    let { data } = $props();
-
-    let newEListDialogOpen = $state(false);
-    let newEListDescription = $state("");
-    let newEListName = $state("");
-    let creatingEList = $state(false);
-
-    async function handleCreateEList() {
-        if (newEListName && newEListDescription) {
-            creatingEList = true;
-            const response = await createEventListCommand({
-                name: newEListName,
-                description: newEListDescription,
-            });
-            creatingEList = false;
-            if (response.error) {
-                toast.error(response.msg);
-            } else {
-                newEListDialogOpen = false;
-                newEListDescription = "";
-                newEListName = "";
-
-                toast.success(response.msg);
-            }
-        } else {
-            toast.error("Missing Fields.");
-        }
-    }
-
-    function copyEListLinkToClipboard(id: string) {
-        const link = `${window.location.origin}/elist/${id}`;
-
-        navigator.clipboard.writeText(link);
-
-        toast.info("Copied", {
-            description: link,
-            descriptionClass: "underline"
-        })
-    }
-
-    let deleteEListId: string | null = $state(null);
-
-    async function deleteEventList() {
-        if (deleteEListId === null) return
-
-        const deletingEList = toast.loading("Deleting Event List");
-        const response = await deleteEventListCommand(deleteEListId);
-        toast.dismiss(deletingEList);
-        deleteEListId = null;
-        
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-        }
-    }
-
-    afterNavigate(() => {
+	import { createEventListCommand, deleteEventListCommand } from "./eventListActions.remote.js";
+	import { Copy, MoreVertical, Plus, Trash2, Users } from "@lucide/svelte";
+	import * as DropdownMenu from "@/components/ui/dropdown-menu/index";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Avatar from "$lib/components/ui/avatar/index.js";
+	import { Spinner } from "@/components/ui/spinner/index.js";
+	import NoEventListAvatar from "@/NoEventListAvatar.svelte";
+	import * as Dialog from "@/components/ui/dialog/index";
+	import { getMyEventLists } from "../backend.remote.js";
+	import { Textarea } from "@/components/ui/textarea";
+	import * as Card from "@/components/ui/card/index";
+	import { afterNavigate } from "$app/navigation";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
+	import { browser } from "$app/environment";
+	import { toast } from "svelte-sonner";
+	import { page } from "$app/stores";
+	import { cn } from "@/utils";
+
+	let { data } = $props();
+
+	let newEListDialogOpen = $state(false);
+	let newEListDescription = $state("");
+	let newEListName = $state("");
+	let creatingEList = $state(false);
+
+	async function handleCreateEList() {
+		if (newEListName && newEListDescription) {
+			creatingEList = true;
+			const response = await createEventListCommand({
+				name: newEListName,
+				description: newEListDescription
+			});
+			creatingEList = false;
+			if (response.error) {
+				toast.error(response.msg);
+			} else {
+				newEListDialogOpen = false;
+				newEListDescription = "";
+				newEListName = "";
+
+				toast.success(response.msg);
+			}
+		} else {
+			toast.error("Missing Fields.");
+		}
+	}
+
+	function copyEListLinkToClipboard(id: string) {
+		const link = `${window.location.origin}/elist/${id}`;
+
+		navigator.clipboard.writeText(link);
+
+		toast.info("Copied", {
+			description: link,
+			descriptionClass: "underline"
+		});
+	}
+
+	let deleteEListId: string | null = $state(null);
+
+	async function deleteEventList() {
+		if (deleteEListId === null) return;
+
+		const deletingEList = toast.loading("Deleting Event List");
+		const response = await deleteEventListCommand(deleteEListId);
+		toast.dismiss(deletingEList);
+		deleteEListId = null;
+
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+		}
+	}
+
+	afterNavigate(() => {
 		if (browser) {
-            newEListDialogOpen = $page.url.searchParams.get("new") === "1";
+			newEListDialogOpen = $page.url.searchParams.get("new") === "1";
 		}
 	});
 </script>
 
 <svelte:head>
-    <title>My Event Lists | InfoSections</title>
+	<title>My Event Lists | InfoSections</title>
 </svelte:head>
 
 <div class="w-full h-full space-y-6">
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-2xl font-bold text-foreground">My Event Lists</h1>
-            <p class="text-muted-foreground mt-1">Any upcoming events can be displayed as an event list in any project that supports iframes.</p>
-        </div>
-
-        <Dialog.Root bind:open={newEListDialogOpen}>
-        <Dialog.Trigger class={cn(buttonVariants({ variant: "default" }), "gap-2")}>
-            <Plus class="h-4 w-4" />
-            New Event List
-        </Dialog.Trigger>
-        <Dialog.Content class="sm:max-w-125">
-            <Dialog.Header>
-            <Dialog.Title>Create New Event List</Dialog.Title>
-                <Dialog.Description>You can change more settings after creating the list.</Dialog.Description>
-            </Dialog.Header>
-
-            <div class="space-y-4 py-4">
-                <div class="space-y-2">
-                    <Label for="name">List Name</Label>
-                    <Input
-                    id="name"
-                    placeholder="e.g., Church Website List"
-                    bind:value={newEListName}
-                    />
-                </div>
-
-                <div class="space-y-2">
-                    <Label for="description">Description</Label>
-                    <Textarea
-                    id="description"
-                    placeholder="Brief description of this list type"
-                    bind:value={newEListDescription}
-                    rows={3}
-                    />
-                </div>
-            </div>
-
-            <Dialog.Footer>
-            <Button variant="outline" onclick={() => newEListDialogOpen = false}>
-                Cancel
-            </Button>
-            <Button onclick={handleCreateEList}>
-                {#if creatingEList}
-                    <Spinner />
-                    Creating Event List...
-                {:else}
-                    Create Event List
-                {/if}
-            </Button>
-            </Dialog.Footer>
-        </Dialog.Content>
-        </Dialog.Root>
-    </div>
-
-    <div class="w-full h-full grid gap-4 xl:grid-cols-3 relative">
-        {#if (await getMyEventLists()).length === 0}
-            <p class="absolute top-3 left-1/2 -translate-1/2 text-muted-foreground">No Event Lists Yet.</p>
-        {/if}
-        {#each await getMyEventLists() as eventList (`eventFeedlist${eventList.id}`)}
-            <Card.Root class="hover:shadow-lg transition-shadow">
-                <Card.Header>
-                <div class="flex items-start justify-between">
-                    <div class="flex items-center gap-1">
-                        <Avatar.Root class="h-15 w-15">
-                            <Avatar.Image src="{data.pb_url}/api/files/{eventList.collectionId}/{eventList.id}/{eventList.logo}" alt="Avatar" />
-                            <Avatar.Fallback><NoEventListAvatar /></Avatar.Fallback>
-                        </Avatar.Root>
-                        <div>
-                            <Card.Title class="text-lg flex">
-                                {eventList.name}
-                            </Card.Title>
-                            <Card.Description class="text-sm mt-1">/elist/{eventList.id}</Card.Description>
-                        </div>
-                    </div>
-
-                    <DropdownMenu.Root>
-                    <DropdownMenu.Trigger class={cn(buttonVariants({ variant: "ghost" }), "h-8 w-8")}>
-                        <MoreVertical class="h-4 w-4" />
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content align="end">
-                        <DropdownMenu.Item
-                            onclick={() => copyEListLinkToClipboard(eventList.id)}
-                        >
-                        <Copy class="h-4 w-4 mr-2 data-highlighted:text-primary" />
-                        Copy Link
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item class="text-destructive" onclick={() => {deleteEListId = eventList.id}}>
-                        <Trash2 class="h-4 w-4 mr-2 data-highlighted:text-primary" />
-                        Delete
-                        </DropdownMenu.Item>
-                    </DropdownMenu.Content>
-                    </DropdownMenu.Root>
-                </div>
-                </Card.Header>
-
-                <Card.Content>
-                <p class="text-sm text-muted-foreground mb-4">{eventList.description}</p>
-
-                <div class="flex items-center justify-between pt-4 border-t border-border">
-                    <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Users class="h-4 w-4" />
-                    <span>{eventList.visits} Visit{eventList.visits === 1 ? "" : "s"}</span>
-                    </div>
-
-                    <Button variant="outline" size="sm" href="/dashboard/event-lists/{eventList.id}">
-                    View Details
-                    </Button>
-                </div>
-                </Card.Content>
-            </Card.Root>
-        {/each}
-    </div>
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-2xl font-bold text-foreground">My Event Lists</h1>
+			<p class="text-muted-foreground mt-1">
+				Any upcoming events can be displayed as an event list in any project that supports iframes.
+			</p>
+		</div>
+
+		<Dialog.Root bind:open={newEListDialogOpen}>
+			<Dialog.Trigger class={cn(buttonVariants({ variant: "default" }), "gap-2")}>
+				<Plus class="h-4 w-4" />
+				New Event List
+			</Dialog.Trigger>
+			<Dialog.Content class="sm:max-w-125">
+				<Dialog.Header>
+					<Dialog.Title>Create New Event List</Dialog.Title>
+					<Dialog.Description
+						>You can change more settings after creating the list.</Dialog.Description
+					>
+				</Dialog.Header>
+
+				<div class="space-y-4 py-4">
+					<div class="space-y-2">
+						<Label for="name">List Name</Label>
+						<Input id="name" placeholder="e.g., Church Website List" bind:value={newEListName} />
+					</div>
+
+					<div class="space-y-2">
+						<Label for="description">Description</Label>
+						<Textarea
+							id="description"
+							placeholder="Brief description of this list type"
+							bind:value={newEListDescription}
+							rows={3}
+						/>
+					</div>
+				</div>
+
+				<Dialog.Footer>
+					<Button variant="outline" onclick={() => (newEListDialogOpen = false)}>Cancel</Button>
+					<Button onclick={handleCreateEList}>
+						{#if creatingEList}
+							<Spinner />
+							Creating Event List...
+						{:else}
+							Create Event List
+						{/if}
+					</Button>
+				</Dialog.Footer>
+			</Dialog.Content>
+		</Dialog.Root>
+	</div>
+
+	<div class="w-full h-full grid gap-4 xl:grid-cols-3 relative">
+		{#if (await getMyEventLists()).length === 0}
+			<p class="absolute top-3 left-1/2 -translate-1/2 text-muted-foreground">
+				No Event Lists Yet.
+			</p>
+		{/if}
+		{#each await getMyEventLists() as eventList (`eventFeedlist${eventList.id}`)}
+			<Card.Root class="hover:shadow-lg transition-shadow">
+				<Card.Header>
+					<div class="flex items-start justify-between">
+						<div class="flex items-center gap-1">
+							<Avatar.Root class="h-15 w-15">
+								<Avatar.Image
+									src="{data.pb_url}/api/files/{eventList.collectionId}/{eventList.id}/{eventList.logo}"
+									alt="Avatar"
+								/>
+								<Avatar.Fallback><NoEventListAvatar /></Avatar.Fallback>
+							</Avatar.Root>
+							<div>
+								<Card.Title class="text-lg flex">
+									{eventList.name}
+								</Card.Title>
+								<Card.Description class="text-sm mt-1">/elist/{eventList.id}</Card.Description>
+							</div>
+						</div>
+
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger class={cn(buttonVariants({ variant: "ghost" }), "h-8 w-8")}>
+								<MoreVertical class="h-4 w-4" />
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Item onclick={() => copyEListLinkToClipboard(eventList.id)}>
+									<Copy class="h-4 w-4 mr-2 data-highlighted:text-primary" />
+									Copy Link
+								</DropdownMenu.Item>
+								<DropdownMenu.Item
+									class="text-destructive"
+									onclick={() => {
+										deleteEListId = eventList.id;
+									}}
+								>
+									<Trash2 class="h-4 w-4 mr-2 data-highlighted:text-primary" />
+									Delete
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
+				</Card.Header>
+
+				<Card.Content>
+					<p class="text-sm text-muted-foreground mb-4">{eventList.description}</p>
+
+					<div class="flex items-center justify-between pt-4 border-t border-border">
+						<div class="flex items-center gap-2 text-sm text-muted-foreground">
+							<Users class="h-4 w-4" />
+							<span>{eventList.visits} Visit{eventList.visits === 1 ? "" : "s"}</span>
+						</div>
+
+						<Button variant="outline" size="sm" href="/dashboard/event-lists/{eventList.id}">
+							View Details
+						</Button>
+					</div>
+				</Card.Content>
+			</Card.Root>
+		{/each}
+	</div>
 </div>
 
 <!-- Delete Event List Dialog -->
-<Dialog.Root open={deleteEListId !== null} onOpenChange={() => deleteEListId = null}>
-    <Dialog.Content>
-        <Dialog.Header>
-            <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-            <Dialog.Description>
-                This action cannot be undone. This will permanently delete this event list from our servers. All links relying on this list will not work.
-            </Dialog.Description>
-            <Dialog.Footer>
-                <Button variant="destructive" onclick={deleteEventList}>Confirm Delete</Button>
-            </Dialog.Footer>
-        </Dialog.Header>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+<Dialog.Root open={deleteEListId !== null} onOpenChange={() => (deleteEListId = null)}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
+			<Dialog.Description>
+				This action cannot be undone. This will permanently delete this event list from our servers.
+				All links relying on this list will not work.
+			</Dialog.Description>
+			<Dialog.Footer>
+				<Button variant="destructive" onclick={deleteEventList}>Confirm Delete</Button>
+			</Dialog.Footer>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.server.ts
index 8c6d64f..85ecad6 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.server.ts
@@ -3,11 +3,11 @@ import { config } from "dotenv";
 config();
 
 export async function load({ params, parent }) {
-    await parent();
-    let slug = params.slug;
+	await parent();
+	let slug = params.slug;
 
-    return {
-        selectedlistId: slug,
-        apiServer: process.env["PB_URL"]!
-    }
-}
\ No newline at end of file
+	return {
+		selectedlistId: slug,
+		apiServer: process.env["PB_URL"]!
+	};
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.svelte
index 5c1b3e1..5d721f3 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/[slug]/+page.svelte
@@ -1,154 +1,167 @@
 <script lang="ts">
-    import EListDisplaySettings from "@/dashboard/eventList/EListDisplaySettings.svelte";
-    import EListFilterSettings from "@/dashboard/eventList/EListFilterSettings.svelte";
-    import EListQuickActions from "@/dashboard/eventList/EListQuickActions.svelte";
-    import EListGeneralInfo from "@/dashboard/eventList/EListGeneralInfo.svelte";
-    import EListStatistics from "@/dashboard/eventList/EListStatistics.svelte";
-    import EListPreview from "@/dashboard/eventList/EListPreview.svelte";
-    import { updateEventListForm } from "../eventListActions.remote.js";
-    import EListAvatar from "@/dashboard/eventList/EListAvatar.svelte";
-    import EListShare from "@/dashboard/eventList/EListShare.svelte";
-    import { getEventListById } from "../../backend.remote.js";
-    import { Button } from "@/components/ui/button";
-    import { Temporal } from "temporal-polyfill";
-    import { clearFileInput } from "@/utils.js";
-    import { ArrowLeft } from "@lucide/svelte";
-    import { toast } from "svelte-sonner";
-    import { onDestroy } from "svelte";
-
-    
-    let { data } = $props();
-
-    let selectedEventList = $derived(await getEventListById(data.selectedlistId));
-
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let uploadNewAvatar: File | null = $state(null);
-    let saveChangesToast: string | number | null = $state(null);
-
-    let avatarChanged = $state(false);
-    let generalInfoChanged = $state(false);
-    let filterSettingsChanged = $state(false);
-    let displaySettingsChanged = $state(false);
-
-    // svelte-ignore state_referenced_locally
-    let displaySettingsPreview = $state(selectedEventList.displaySettings);
-
-    // This effect checks if any configurations have changed. If so, the saveRequired state will be set to true.
-    $effect(() => {
-        const saveRequired = avatarChanged || generalInfoChanged || displaySettingsChanged || filterSettingsChanged;
-    
-        if (saveRequired) {
-            if (saveChangesToast === null) {
-                saveChangesToast = toast("Save?", {
-                    description: "You have some unsaved changes.",
-                    dismissable: false,
-                    duration: Number.POSITIVE_INFINITY,
-                    action: {
-                        label: "Save Changes",
-                        onClick: () => {
-                            const formSubmitButton = document.getElementById("updateEventListButton1") as HTMLButtonElement | null;
-                            if (formSubmitButton) {
-                                formSubmitButton.click();
-                            }
-                        }
-                    }
-                });
-            }
-        } else {
-            if (saveChangesToast !== null) {
-                toast.dismiss(saveChangesToast);
-            }
-            saveChangesToast = null;
-        }
-    });
-
-    onDestroy(() => {
-        if (saveChangesToast !== null) {
-            toast.dismiss(saveChangesToast);
-        }
-        saveChangesToast = null;
-    });
+	import EListDisplaySettings from "@/dashboard/eventList/EListDisplaySettings.svelte";
+	import EListFilterSettings from "@/dashboard/eventList/EListFilterSettings.svelte";
+	import EListQuickActions from "@/dashboard/eventList/EListQuickActions.svelte";
+	import EListGeneralInfo from "@/dashboard/eventList/EListGeneralInfo.svelte";
+	import EListStatistics from "@/dashboard/eventList/EListStatistics.svelte";
+	import EListPreview from "@/dashboard/eventList/EListPreview.svelte";
+	import { updateEventListForm } from "../eventListActions.remote.js";
+	import EListAvatar from "@/dashboard/eventList/EListAvatar.svelte";
+	import EListShare from "@/dashboard/eventList/EListShare.svelte";
+	import { getEventListById } from "../../backend.remote.js";
+	import { Button } from "@/components/ui/button";
+	import { Temporal } from "temporal-polyfill";
+	import { clearFileInput } from "@/utils.js";
+	import { ArrowLeft } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
+	import { onDestroy } from "svelte";
+
+	let { data } = $props();
+
+	let selectedEventList = $derived(await getEventListById(data.selectedlistId));
+
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let uploadNewAvatar: File | null = $state(null);
+	let saveChangesToast: string | number | null = $state(null);
+
+	let avatarChanged = $state(false);
+	let generalInfoChanged = $state(false);
+	let filterSettingsChanged = $state(false);
+	let displaySettingsChanged = $state(false);
+
+	// svelte-ignore state_referenced_locally
+	let displaySettingsPreview = $state(selectedEventList.displaySettings);
+
+	// This effect checks if any configurations have changed. If so, the saveRequired state will be set to true.
+	$effect(() => {
+		const saveRequired =
+			avatarChanged || generalInfoChanged || displaySettingsChanged || filterSettingsChanged;
+
+		if (saveRequired) {
+			if (saveChangesToast === null) {
+				saveChangesToast = toast("Save?", {
+					description: "You have some unsaved changes.",
+					dismissable: false,
+					duration: Number.POSITIVE_INFINITY,
+					action: {
+						label: "Save Changes",
+						onClick: () => {
+							const formSubmitButton = document.getElementById(
+								"updateEventListButton1"
+							) as HTMLButtonElement | null;
+							if (formSubmitButton) {
+								formSubmitButton.click();
+							}
+						}
+					}
+				});
+			}
+		} else {
+			if (saveChangesToast !== null) {
+				toast.dismiss(saveChangesToast);
+			}
+			saveChangesToast = null;
+		}
+	});
+
+	onDestroy(() => {
+		if (saveChangesToast !== null) {
+			toast.dismiss(saveChangesToast);
+		}
+		saveChangesToast = null;
+	});
 </script>
 
 <svelte:head>
-    <title>{selectedEventList.name} | InfoSections</title>
+	<title>{selectedEventList.name} | InfoSections</title>
 </svelte:head>
 
 <div class="max-w-5xl mx-auto space-y-6 isolate">
-    <div class="flex items-center gap-4">
-        <Button variant="ghost" size="icon" href="/dashboard/event-lists">
-            <ArrowLeft class="h-5 w-5" />
-        </Button>
-        <div>
-            <h1 class="text-3xl font-bold text-foreground">{selectedEventList.name} | List Details</h1>
-            <p class="text-muted-foreground mt-1">Manage your event list settings and filters.</p>
-        </div>
-    </div>
-
-    <div class="grid gap-6 lg:grid-cols-3">
-        <div class="lg:col-span-2 space-y-6">
-            <form
-                {...updateEventListForm.enhance(async ({ submit, form }) => {
-                    let savingChanges = toast.loading("Saving Changes.", { duration: Number.POSITIVE_INFINITY });
-                    try {
-                        await submit();
-                        form.reset();
-                        clearFileInput(document.getElementById("imageUploaderEventList"));
-                        uploadNewAvatar = null;
-                        toast.dismiss(savingChanges);
-
-                        toast.success("Saved Changes");
-                    } catch (err) {
-                        console.log(err);
-                        toast.dismiss(savingChanges);
-                        toast.error("An error occured.");
-                    }
-                })}
-                class="space-y-6"
-                enctype="multipart/form-data"
-            >
-                <Button type="submit" id="updateEventListButton1" class="sr-only">Update Image Feed</Button>
-                <EListAvatar
-                    bind:changed={avatarChanged}
-                    bind:uploadNewAvatar
-                    avatarLink={selectedEventList.logo ? `${data.pb_url}/api/files/${selectedEventList.collectionId}/${selectedEventList.id}/${selectedEventList.logo}` : ""}
-                />
-
-                <EListGeneralInfo
-                    bind:changed={generalInfoChanged}
-                    listId={selectedEventList.id}
-                    listName={selectedEventList.name}
-                    listDescription={selectedEventList.description}
-                />
-
-                <EListDisplaySettings displaySettings={selectedEventList.displaySettings} bind:changed={displaySettingsChanged} bind:displaySettingsPreview />
-
-                <EListPreview displaySettings={displaySettingsPreview} listId={selectedEventList.id} />
-
-                <EListFilterSettings filters={selectedEventList.filters} bind:changed={filterSettingsChanged} />
-            </form>
-        </div>
-
-        <!-- This is the sticky side options section. -->
-        <div class="space-y-6 stickySidebar h-fit">
-            <EListShare listId={selectedEventList.id} listName={selectedEventList.name} />
-
-            <EListStatistics
-                visits={selectedEventList.visits}
-                updated={selectedEventList.updated}
-                created={selectedEventList.created}
-                {timeZone}
-            />
-
-            <EListQuickActions listId={selectedEventList.id} />
-        </div>
-    </div>
+	<div class="flex items-center gap-4">
+		<Button variant="ghost" size="icon" href="/dashboard/event-lists">
+			<ArrowLeft class="h-5 w-5" />
+		</Button>
+		<div>
+			<h1 class="text-3xl font-bold text-foreground">{selectedEventList.name} | List Details</h1>
+			<p class="text-muted-foreground mt-1">Manage your event list settings and filters.</p>
+		</div>
+	</div>
+
+	<div class="grid gap-6 lg:grid-cols-3">
+		<div class="lg:col-span-2 space-y-6">
+			<form
+				{...updateEventListForm.enhance(async ({ submit, form }) => {
+					let savingChanges = toast.loading("Saving Changes.", {
+						duration: Number.POSITIVE_INFINITY
+					});
+					try {
+						await submit();
+						form.reset();
+						clearFileInput(document.getElementById("imageUploaderEventList"));
+						uploadNewAvatar = null;
+						toast.dismiss(savingChanges);
+
+						toast.success("Saved Changes");
+					} catch (err) {
+						console.log(err);
+						toast.dismiss(savingChanges);
+						toast.error("An error occured.");
+					}
+				})}
+				class="space-y-6"
+				enctype="multipart/form-data"
+			>
+				<Button type="submit" id="updateEventListButton1" class="sr-only">Update Image Feed</Button>
+				<EListAvatar
+					bind:changed={avatarChanged}
+					bind:uploadNewAvatar
+					avatarLink={selectedEventList.logo
+						? `${data.pb_url}/api/files/${selectedEventList.collectionId}/${selectedEventList.id}/${selectedEventList.logo}`
+						: ""}
+				/>
+
+				<EListGeneralInfo
+					bind:changed={generalInfoChanged}
+					listId={selectedEventList.id}
+					listName={selectedEventList.name}
+					listDescription={selectedEventList.description}
+				/>
+
+				<EListDisplaySettings
+					displaySettings={selectedEventList.displaySettings}
+					bind:changed={displaySettingsChanged}
+					bind:displaySettingsPreview
+				/>
+
+				<EListPreview displaySettings={displaySettingsPreview} listId={selectedEventList.id} />
+
+				<EListFilterSettings
+					filters={selectedEventList.filters}
+					bind:changed={filterSettingsChanged}
+				/>
+			</form>
+		</div>
+
+		<!-- This is the sticky side options section. -->
+		<div class="space-y-6 stickySidebar h-fit">
+			<EListShare listId={selectedEventList.id} listName={selectedEventList.name} />
+
+			<EListStatistics
+				visits={selectedEventList.visits}
+				updated={selectedEventList.updated}
+				created={selectedEventList.created}
+				{timeZone}
+			/>
+
+			<EListQuickActions listId={selectedEventList.id} />
+		</div>
+	</div>
 </div>
 
 <style>
-    .stickySidebar {
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-    }
-</style>
\ No newline at end of file
+	.stickySidebar {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+	}
+</style>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote.ts
index efe132a..69d8d58 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/event-lists/eventListActions.remote.ts
@@ -1,4 +1,8 @@
-import { defaultEventListFilters, defaultImageListCustomizations, type EventListDBModel } from "@/utils";
+import {
+	defaultEventListFilters,
+	defaultImageListCustomizations,
+	type EventListDBModel
+} from "@/utils";
 import { getEventListById, getMyEventLists } from "../backend.remote";
 import { command, form, getRequestEvent } from "$app/server";
 import { invalid, redirect } from "@sveltejs/kit";
@@ -8,160 +12,167 @@ import * as v from "valibot";
 config();
 
 const CreateEventListSchema = v.object({
-    name: v.pipe(v.string(), v.nonEmpty("A name for the list is required.")),
-    description: v.pipe(v.string(), v.nonEmpty("A description for the list is required."))
+	name: v.pipe(v.string(), v.nonEmpty("A name for the list is required.")),
+	description: v.pipe(v.string(), v.nonEmpty("A description for the list is required."))
 });
 
 export const createEventListCommand = command(CreateEventListSchema, async (newEList) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const eventLists = await getMyEventLists();
-
-    if (eventLists.length > 1 && locals.user.accessLevel === "none") {
-        return {
-            error: true,
-            msg: "Exceed the amount of event lists on the free plan."
-        }
-    }
-
-    try {
-        let data: Partial<EventListDBModel> = {
-            "name": newEList.name,
-            "description": newEList.description,
-            "owner": locals.user.id,
-            "displaySettings": defaultImageListCustomizations,
-            "filters": defaultEventListFilters
-        };
-
-        await locals.pb.collection('eventLists').create(data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "Internal Server Error."
-        }
-    }
-
-    getMyEventLists().refresh();
-    return {
-        error: false,
-        msg: "Successfully created event list."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	const eventLists = await getMyEventLists();
+
+	if (eventLists.length > 1 && locals.user.accessLevel === "none") {
+		return {
+			error: true,
+			msg: "Exceed the amount of event lists on the free plan."
+		};
+	}
+
+	try {
+		let data: Partial<EventListDBModel> = {
+			name: newEList.name,
+			description: newEList.description,
+			owner: locals.user.id,
+			displaySettings: defaultImageListCustomizations,
+			filters: defaultEventListFilters
+		};
+
+		await locals.pb.collection("eventLists").create(data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: "Internal Server Error."
+		};
+	}
+
+	getMyEventLists().refresh();
+	return {
+		error: false,
+		msg: "Successfully created event list."
+	};
 });
 
 const UpdateEventListSchema = v.object({
-    id: v.string(),
-    name: v.string(),
-    description: v.string(),
-    avatarLink: v.optional(v.string()),
-    newAvatar: v.optional(v.any()),
-    displaySettings: v.object({
-        displayStyle: v.picklist(["minimal", "expanded"]),
-        showEventName: v.optional(v.boolean(), false),
-        showEventDescription: v.optional(v.boolean(), false),
-        showEventRegistration: v.optional(v.boolean(), false),
-        showUpcomingEventsTextAndDesc: v.optional(v.boolean(), false),
-	    setTransparentBackground: v.optional(v.boolean(), false)
-    }),
-    filters: v.optional(v.object({
-        onlyShowFeatured: v.optional(v.boolean(), false),
-        hideUnpublished: v.optional(v.boolean(), false),
-        hideRecurringEvents: v.optional(v.boolean(), false)
-    }), undefined)
+	id: v.string(),
+	name: v.string(),
+	description: v.string(),
+	avatarLink: v.optional(v.string()),
+	newAvatar: v.optional(v.any()),
+	displaySettings: v.object({
+		displayStyle: v.picklist(["minimal", "expanded"]),
+		showEventName: v.optional(v.boolean(), false),
+		showEventDescription: v.optional(v.boolean(), false),
+		showEventRegistration: v.optional(v.boolean(), false),
+		showUpcomingEventsTextAndDesc: v.optional(v.boolean(), false),
+		setTransparentBackground: v.optional(v.boolean(), false)
+	}),
+	filters: v.optional(
+		v.object({
+			onlyShowFeatured: v.optional(v.boolean(), false),
+			hideUnpublished: v.optional(v.boolean(), false),
+			hideRecurringEvents: v.optional(v.boolean(), false)
+		}),
+		undefined
+	)
 });
 
 export const updateEventListForm = form(UpdateEventListSchema, async (updatedEList, issue) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return redirect(303, "/");
-    }
-
-    const currentEventList = await getEventListById(updatedEList.id);
-
-    try {
-        let data: Partial<EventListDBModel> = {
-            "name": updatedEList.name,
-            "description": updatedEList.description,
-            "displaySettings": updatedEList.displaySettings,
-            "filters": updatedEList.filters ? updatedEList.filters : {
-                "hideUnpublished": false,
-                "onlyShowFeatured": false,
-                "hideRecurringEvents": false
-            }
-        };
-
-        if (!updatedEList.avatarLink && updatedEList.newAvatar) {
-            const newAvatar = updatedEList.newAvatar as File;
-            const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, { type: newAvatar.type });
-            data["logo"] = file;
-        }
-        
-        if (!updatedEList.avatarLink && !updatedEList.newAvatar) {
-            data["logo"] = "";
-        }
-
-        await locals.pb.collection('eventLists').update(currentEventList.id, data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return invalid(issue.id("Failed to update event list."));
-    }
-
-    getMyEventLists().refresh();
-    getEventListById(currentEventList.id).refresh();
-    return {
-        error: false,
-        msg: "Successfully updated event list."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return redirect(303, "/");
+	}
+
+	const currentEventList = await getEventListById(updatedEList.id);
+
+	try {
+		let data: Partial<EventListDBModel> = {
+			name: updatedEList.name,
+			description: updatedEList.description,
+			displaySettings: updatedEList.displaySettings,
+			filters: updatedEList.filters
+				? updatedEList.filters
+				: {
+						hideUnpublished: false,
+						onlyShowFeatured: false,
+						hideRecurringEvents: false
+					}
+		};
+
+		if (!updatedEList.avatarLink && updatedEList.newAvatar) {
+			const newAvatar = updatedEList.newAvatar as File;
+			const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, {
+				type: newAvatar.type
+			});
+			data["logo"] = file;
+		}
+
+		if (!updatedEList.avatarLink && !updatedEList.newAvatar) {
+			data["logo"] = "";
+		}
+
+		await locals.pb.collection("eventLists").update(currentEventList.id, data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return invalid(issue.id("Failed to update event list."));
+	}
+
+	getMyEventLists().refresh();
+	getEventListById(currentEventList.id).refresh();
+	return {
+		error: false,
+		msg: "Successfully updated event list."
+	};
 });
 
 export const deleteEventListCommand = command(v.string(), async (id) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const eventList = await getEventListById(id);
-
-    try {
-        await locals.pb.collection('eventLists').delete(eventList.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: `Internal Server Error.`
-        }
-    }
-
-    getMyEventLists().refresh();
-    return {
-        error: false,
-        msg: "Successfully deleted event list."
-    }
-});
\ No newline at end of file
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	const eventList = await getEventListById(id);
+
+	try {
+		await locals.pb.collection("eventLists").delete(eventList.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: `Internal Server Error.`
+		};
+	}
+
+	getMyEventLists().refresh();
+	return {
+		error: false,
+		msg: "Successfully deleted event list."
+	};
+});
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts
index 9fc924c..6abb024 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts
@@ -1,100 +1,107 @@
 import { command, getRequestEvent, query } from "$app/server";
-import type { EventDBModelPrivateExpanded, EventResourcesDBModelPrivate, EventTagsDBModelPrivate } from "@/event.utils";
+import type {
+	EventDBModelPrivateExpanded,
+	EventResourcesDBModelPrivate,
+	EventTagsDBModelPrivate
+} from "@/event.utils";
 import { getMyIntegrations } from "./backend.remote";
 import { config } from "dotenv";
 
 config();
 
 export const getAllUserEvents = query(async () => {
-    const { locals } = getRequestEvent();
-    let events: EventDBModelPrivateExpanded[] = [];
-    
-    if (!locals.user) return events;
-    
-    try {
-        events = await locals.pb.collection('events').getFullList({
-            filter: `owner="${locals.user.id}"`,
-            expand: "tags,resources",
-            sort: 'startTime',
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to events.", err);
-    }
-    
-    return events;
+	const { locals } = getRequestEvent();
+	let events: EventDBModelPrivateExpanded[] = [];
+
+	if (!locals.user) return events;
+
+	try {
+		events = await locals.pb.collection("events").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			expand: "tags,resources",
+			sort: "startTime",
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to events.", err);
+	}
+
+	return events;
 });
 
 export const updateSpecificUserEvents = command(async () => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-    
-    const response = await fetch(process.env["PB_URL"] + `updateSpecificUserEvents/${locals.user.id}`, {
-        method: 'PATCH',
-        headers: {
-            "X-PCO-Webhooks-Authenticity": locals.user.customerId
-        }
-    });
-    if (!response.ok) {
-        console.log(response);
-        return {
-            error: false,
-            msg: "Failed to refetch events."
-        }
-    }
-
-    getMyIntegrations().refresh();
-    getAllUserEvents().refresh();
-    return {
-        error: false,
-        msg: "Successful sync"
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	const response = await fetch(
+		process.env["PB_URL"] + `updateSpecificUserEvents/${locals.user.id}`,
+		{
+			method: "PATCH",
+			headers: {
+				"X-PCO-Webhooks-Authenticity": locals.user.customerId
+			}
+		}
+	);
+	if (!response.ok) {
+		console.log(response);
+		return {
+			error: false,
+			msg: "Failed to refetch events."
+		};
+	}
+
+	getMyIntegrations().refresh();
+	getAllUserEvents().refresh();
+	return {
+		error: false,
+		msg: "Successful sync"
+	};
 });
 
 export const getMyEventTagsPrivate = query(async () => {
-    const { locals } = getRequestEvent();
-    let tags: EventTagsDBModelPrivate[] = [];
-
-    if (!locals.user) return tags;
-
-    try {
-        tags = await locals.pb.collection('tags').getFullList({
-            filter: `owner="${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch tags.", err);
-    }
-
-    return tags;
+	const { locals } = getRequestEvent();
+	let tags: EventTagsDBModelPrivate[] = [];
+
+	if (!locals.user) return tags;
+
+	try {
+		tags = await locals.pb.collection("tags").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch tags.", err);
+	}
+
+	return tags;
 });
 
 export const getMyEventResourcesPrivate = query(async () => {
-    const { locals } = getRequestEvent();
-    let resources: EventResourcesDBModelPrivate[] = [];
-
-    if (!locals.user) return resources;
-
-    try {
-        resources = await locals.pb.collection('resources').getFullList({
-            filter: `owner="${locals.user.id}"`,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to fetch resources.", err);
-    }
-
-    return resources;
-});
\ No newline at end of file
+	const { locals } = getRequestEvent();
+	let resources: EventResourcesDBModelPrivate[] = [];
+
+	if (!locals.user) return resources;
+
+	try {
+		resources = await locals.pb.collection("resources").getFullList({
+			filter: `owner="${locals.user.id}"`,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Failed to fetch resources.", err);
+	}
+
+	return resources;
+});
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.server.ts
index 6ebd1d1..10eedb8 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.server.ts
@@ -1,3 +1,3 @@
 export async function load({ parent }) {
-    await parent();
-}
\ No newline at end of file
+	await parent();
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.svelte
index d4f6465..d042f2f 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/+page.svelte
@@ -1,217 +1,225 @@
 <script lang="ts">
-    import { createImageFeedCommand, deleteImageFeedCommand } from "./imageFeedActions.remote.js";
-    import { Copy, MoreVertical, Plus, Trash2, Users } from "@lucide/svelte";
-    import * as DropdownMenu from "@/components/ui/dropdown-menu/index";
-    import { Button, buttonVariants } from "@/components/ui/button";
-    import * as Avatar from "$lib/components/ui/avatar/index.js";
-    import { Spinner } from "@/components/ui/spinner/index.js";
-    import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
-    import * as Dialog from "@/components/ui/dialog/index";
-    import { getMyImageFeeds } from "../backend.remote.js";
-    import { Textarea } from "@/components/ui/textarea";
-    import * as Card from "@/components/ui/card/index";
-    import { afterNavigate } from "$app/navigation";
-    import { Label } from "@/components/ui/label";
-    import { Input } from "@/components/ui/input";
-    import { browser } from "$app/environment";
-    import { toast } from "svelte-sonner";
-    import { page } from "$app/stores";
-    import { cn } from "@/utils";
-
-    let { data } = $props();
-
-    let newIFeedDialogOpen = $state(false);
-    let newIFeedDescription = $state("");
-    let newIFeedName = $state("");
-    let creatingIFeed = $state(false);
-
-    async function handleCreateIFeed() {
-        if (newIFeedName && newIFeedDescription) {
-            creatingIFeed = true;
-            const response = await createImageFeedCommand({
-                name: newIFeedName,
-                description: newIFeedDescription
-            });
-            creatingIFeed = false;
-            if (response.error) {
-                toast.error(response.msg);
-            } else {
-                toast.success(response.msg);
-                newIFeedDialogOpen = false;
-                newIFeedDescription = "";
-                newIFeedName = "";
-            }
-        } else {
-            toast.error("Missing Fields.");
-        }
-    }
-
-    function copyIFeedLinkToClipboard(id: string) {
-        const link = `${window.location.origin}/ifeed/${id}`;
-
-        navigator.clipboard.writeText(link);
-
-        toast.info("Copied", {
-            description: link,
-            descriptionClass: "underline"
-        })
-    }
-
-    let deleteIFeedId: string | null = $state(null);
-
-    async function deleteImageFeed() {
-        if (deleteIFeedId === null) return
-
-        const deletingCalendar = toast.loading("Deleting Image Feed");
-        const response = await deleteImageFeedCommand(deleteIFeedId);
-        toast.dismiss(deletingCalendar);
-        deleteIFeedId = null;
-        
-        if (response.error) {
-            toast.error(response.msg);
-        } else {
-            toast.success(response.msg);
-        }
-    }
-
-    afterNavigate(() => {
+	import { createImageFeedCommand, deleteImageFeedCommand } from "./imageFeedActions.remote.js";
+	import { Copy, MoreVertical, Plus, Trash2, Users } from "@lucide/svelte";
+	import * as DropdownMenu from "@/components/ui/dropdown-menu/index";
+	import { Button, buttonVariants } from "@/components/ui/button";
+	import * as Avatar from "$lib/components/ui/avatar/index.js";
+	import { Spinner } from "@/components/ui/spinner/index.js";
+	import NoImageFeedAvatar from "@/NoImageFeedAvatar.svelte";
+	import * as Dialog from "@/components/ui/dialog/index";
+	import { getMyImageFeeds } from "../backend.remote.js";
+	import { Textarea } from "@/components/ui/textarea";
+	import * as Card from "@/components/ui/card/index";
+	import { afterNavigate } from "$app/navigation";
+	import { Label } from "@/components/ui/label";
+	import { Input } from "@/components/ui/input";
+	import { browser } from "$app/environment";
+	import { toast } from "svelte-sonner";
+	import { page } from "$app/stores";
+	import { cn } from "@/utils";
+
+	let { data } = $props();
+
+	let newIFeedDialogOpen = $state(false);
+	let newIFeedDescription = $state("");
+	let newIFeedName = $state("");
+	let creatingIFeed = $state(false);
+
+	async function handleCreateIFeed() {
+		if (newIFeedName && newIFeedDescription) {
+			creatingIFeed = true;
+			const response = await createImageFeedCommand({
+				name: newIFeedName,
+				description: newIFeedDescription
+			});
+			creatingIFeed = false;
+			if (response.error) {
+				toast.error(response.msg);
+			} else {
+				toast.success(response.msg);
+				newIFeedDialogOpen = false;
+				newIFeedDescription = "";
+				newIFeedName = "";
+			}
+		} else {
+			toast.error("Missing Fields.");
+		}
+	}
+
+	function copyIFeedLinkToClipboard(id: string) {
+		const link = `${window.location.origin}/ifeed/${id}`;
+
+		navigator.clipboard.writeText(link);
+
+		toast.info("Copied", {
+			description: link,
+			descriptionClass: "underline"
+		});
+	}
+
+	let deleteIFeedId: string | null = $state(null);
+
+	async function deleteImageFeed() {
+		if (deleteIFeedId === null) return;
+
+		const deletingCalendar = toast.loading("Deleting Image Feed");
+		const response = await deleteImageFeedCommand(deleteIFeedId);
+		toast.dismiss(deletingCalendar);
+		deleteIFeedId = null;
+
+		if (response.error) {
+			toast.error(response.msg);
+		} else {
+			toast.success(response.msg);
+		}
+	}
+
+	afterNavigate(() => {
 		if (browser) {
-            newIFeedDialogOpen = $page.url.searchParams.get("new") === "1";
+			newIFeedDialogOpen = $page.url.searchParams.get("new") === "1";
 		}
 	});
 </script>
 
 <svelte:head>
-    <title>My Image Feeds | InfoSections</title>
+	<title>My Image Feeds | InfoSections</title>
 </svelte:head>
 
 <div class="w-full h-full space-y-6">
-    <div class="flex items-center justify-between">
-        <div>
-            <h1 class="text-2xl font-bold text-foreground">My Image Feeds</h1>
-            <p class="text-muted-foreground mt-1">Any upcoming events containing an image, can be displayed as an image feed in any project that supports iframes.</p>
-        </div>
-
-        <Dialog.Root bind:open={newIFeedDialogOpen}>
-        <Dialog.Trigger class={cn(buttonVariants({ variant: "default" }), "gap-2")}>
-            <Plus class="h-4 w-4" />
-            New Image Feed
-        </Dialog.Trigger>
-        <Dialog.Content class="sm:max-w-125">
-            <Dialog.Header>
-            <Dialog.Title>Create New Image Feed</Dialog.Title>
-                <Dialog.Description>You can change more settings after creating the feed.</Dialog.Description>
-            </Dialog.Header>
-
-            <div class="space-y-4 py-4">
-                <div class="space-y-2">
-                    <Label for="name">Feed Name</Label>
-                    <Input
-                    id="name"
-                    placeholder="e.g., Church Website Feed"
-                    bind:value={newIFeedName}
-                    />
-                </div>
-
-                <div class="space-y-2">
-                    <Label for="description">Description</Label>
-                    <Textarea
-                    id="description"
-                    placeholder="Brief description of this feed type"
-                    bind:value={newIFeedDescription}
-                    rows={3}
-                    />
-                </div>
-            </div>
-
-            <Dialog.Footer>
-            <Button variant="outline" onclick={() => newIFeedDialogOpen = false}>
-                Cancel
-            </Button>
-            <Button onclick={handleCreateIFeed}>
-                {#if creatingIFeed}
-                    <Spinner />
-                    Creating Image Feed...
-                {:else}
-                    Create Image Feed
-                {/if}
-            </Button>
-            </Dialog.Footer>
-        </Dialog.Content>
-        </Dialog.Root>
-    </div>
-
-    <div class="w-full h-full grid gap-4 xl:grid-cols-3 relative">
-        {#if (await getMyImageFeeds()).length === 0}
-            <p class="absolute top-3 left-1/2 -translate-1/2 text-muted-foreground">No Image Feeds Yet.</p>
-        {/if}
-        {#each await getMyImageFeeds() as imageFeed (`imageFeedlist${imageFeed.id}`)}
-            <Card.Root class="hover:shadow-lg transition-shadow">
-                <Card.Header>
-                <div class="flex items-start justify-between">
-                    <div class="flex items-center gap-1">
-                        <Avatar.Root class="h-15 w-15">
-                            <Avatar.Image src="{data.pb_url}/api/files/{imageFeed.collectionId}/{imageFeed.id}/{imageFeed.logo}" alt="Avatar" />
-                            <Avatar.Fallback><NoImageFeedAvatar /></Avatar.Fallback>
-                        </Avatar.Root>
-                        <div>
-                            <Card.Title class="text-lg flex">
-                                {imageFeed.name}
-                            </Card.Title>
-                            <Card.Description class="text-sm mt-1">/ifeed/{imageFeed.id}</Card.Description>
-                        </div>
-                    </div>
-
-                    <DropdownMenu.Root>
-                    <DropdownMenu.Trigger class={cn(buttonVariants({ variant: "ghost" }), "h-8 w-8")}>
-                        <MoreVertical class="h-4 w-4" />
-                    </DropdownMenu.Trigger>
-                    <DropdownMenu.Content align="end">
-                        <DropdownMenu.Item
-                            onclick={() => copyIFeedLinkToClipboard(imageFeed.id)}
-                        >
-                        <Copy class="h-4 w-4 mr-2 data-highlighted:text-primary" />
-                        Copy Link
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item class="text-destructive" onclick={() => {deleteIFeedId = imageFeed.id}}>
-                        <Trash2 class="h-4 w-4 mr-2 data-highlighted:text-primary" />
-                        Delete
-                        </DropdownMenu.Item>
-                    </DropdownMenu.Content>
-                    </DropdownMenu.Root>
-                </div>
-                </Card.Header>
-
-                <Card.Content>
-                <p class="text-sm text-muted-foreground mb-4">{imageFeed.description}</p>
-
-                <div class="flex items-center justify-between pt-4 border-t border-border">
-                    <div class="flex items-center gap-2 text-sm text-muted-foreground">
-                    <Users class="h-4 w-4" />
-                    <span>{imageFeed.visits} Visit{imageFeed.visits === 1 ? "" : "s"}</span>
-                    </div>
-
-                    <Button variant="outline" size="sm" href="/dashboard/image-feeds/{imageFeed.id}">
-                    View Details
-                    </Button>
-                </div>
-                </Card.Content>
-            </Card.Root>
-        {/each}
-    </div>
+	<div class="flex items-center justify-between">
+		<div>
+			<h1 class="text-2xl font-bold text-foreground">My Image Feeds</h1>
+			<p class="text-muted-foreground mt-1">
+				Any upcoming events containing an image, can be displayed as an image feed in any project
+				that supports iframes.
+			</p>
+		</div>
+
+		<Dialog.Root bind:open={newIFeedDialogOpen}>
+			<Dialog.Trigger class={cn(buttonVariants({ variant: "default" }), "gap-2")}>
+				<Plus class="h-4 w-4" />
+				New Image Feed
+			</Dialog.Trigger>
+			<Dialog.Content class="sm:max-w-125">
+				<Dialog.Header>
+					<Dialog.Title>Create New Image Feed</Dialog.Title>
+					<Dialog.Description
+						>You can change more settings after creating the feed.</Dialog.Description
+					>
+				</Dialog.Header>
+
+				<div class="space-y-4 py-4">
+					<div class="space-y-2">
+						<Label for="name">Feed Name</Label>
+						<Input id="name" placeholder="e.g., Church Website Feed" bind:value={newIFeedName} />
+					</div>
+
+					<div class="space-y-2">
+						<Label for="description">Description</Label>
+						<Textarea
+							id="description"
+							placeholder="Brief description of this feed type"
+							bind:value={newIFeedDescription}
+							rows={3}
+						/>
+					</div>
+				</div>
+
+				<Dialog.Footer>
+					<Button variant="outline" onclick={() => (newIFeedDialogOpen = false)}>Cancel</Button>
+					<Button onclick={handleCreateIFeed}>
+						{#if creatingIFeed}
+							<Spinner />
+							Creating Image Feed...
+						{:else}
+							Create Image Feed
+						{/if}
+					</Button>
+				</Dialog.Footer>
+			</Dialog.Content>
+		</Dialog.Root>
+	</div>
+
+	<div class="w-full h-full grid gap-4 xl:grid-cols-3 relative">
+		{#if (await getMyImageFeeds()).length === 0}
+			<p class="absolute top-3 left-1/2 -translate-1/2 text-muted-foreground">
+				No Image Feeds Yet.
+			</p>
+		{/if}
+		{#each await getMyImageFeeds() as imageFeed (`imageFeedlist${imageFeed.id}`)}
+			<Card.Root class="hover:shadow-lg transition-shadow">
+				<Card.Header>
+					<div class="flex items-start justify-between">
+						<div class="flex items-center gap-1">
+							<Avatar.Root class="h-15 w-15">
+								<Avatar.Image
+									src="{data.pb_url}/api/files/{imageFeed.collectionId}/{imageFeed.id}/{imageFeed.logo}"
+									alt="Avatar"
+								/>
+								<Avatar.Fallback><NoImageFeedAvatar /></Avatar.Fallback>
+							</Avatar.Root>
+							<div>
+								<Card.Title class="text-lg flex">
+									{imageFeed.name}
+								</Card.Title>
+								<Card.Description class="text-sm mt-1">/ifeed/{imageFeed.id}</Card.Description>
+							</div>
+						</div>
+
+						<DropdownMenu.Root>
+							<DropdownMenu.Trigger class={cn(buttonVariants({ variant: "ghost" }), "h-8 w-8")}>
+								<MoreVertical class="h-4 w-4" />
+							</DropdownMenu.Trigger>
+							<DropdownMenu.Content align="end">
+								<DropdownMenu.Item onclick={() => copyIFeedLinkToClipboard(imageFeed.id)}>
+									<Copy class="h-4 w-4 mr-2 data-highlighted:text-primary" />
+									Copy Link
+								</DropdownMenu.Item>
+								<DropdownMenu.Item
+									class="text-destructive"
+									onclick={() => {
+										deleteIFeedId = imageFeed.id;
+									}}
+								>
+									<Trash2 class="h-4 w-4 mr-2 data-highlighted:text-primary" />
+									Delete
+								</DropdownMenu.Item>
+							</DropdownMenu.Content>
+						</DropdownMenu.Root>
+					</div>
+				</Card.Header>
+
+				<Card.Content>
+					<p class="text-sm text-muted-foreground mb-4">{imageFeed.description}</p>
+
+					<div class="flex items-center justify-between pt-4 border-t border-border">
+						<div class="flex items-center gap-2 text-sm text-muted-foreground">
+							<Users class="h-4 w-4" />
+							<span>{imageFeed.visits} Visit{imageFeed.visits === 1 ? "" : "s"}</span>
+						</div>
+
+						<Button variant="outline" size="sm" href="/dashboard/image-feeds/{imageFeed.id}">
+							View Details
+						</Button>
+					</div>
+				</Card.Content>
+			</Card.Root>
+		{/each}
+	</div>
 </div>
 
 <!-- Delete Image Feed Dialog -->
-<Dialog.Root open={deleteIFeedId !== null} onOpenChange={() => deleteIFeedId = null}>
-    <Dialog.Content>
-        <Dialog.Header>
-            <Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
-            <Dialog.Description>
-                This action cannot be undone. This will permanently delete this image feed from our servers. All links relying on this feed will not work.
-            </Dialog.Description>
-            <Dialog.Footer>
-                <Button variant="destructive" onclick={deleteImageFeed}>Confirm Delete</Button>
-            </Dialog.Footer>
-        </Dialog.Header>
-    </Dialog.Content>
-</Dialog.Root>
\ No newline at end of file
+<Dialog.Root open={deleteIFeedId !== null} onOpenChange={() => (deleteIFeedId = null)}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Are you sure absolutely sure?</Dialog.Title>
+			<Dialog.Description>
+				This action cannot be undone. This will permanently delete this image feed from our servers.
+				All links relying on this feed will not work.
+			</Dialog.Description>
+			<Dialog.Footer>
+				<Button variant="destructive" onclick={deleteImageFeed}>Confirm Delete</Button>
+			</Dialog.Footer>
+		</Dialog.Header>
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote.ts
index 2023032..3918e1b 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedCustomImageActions.remote.ts
@@ -8,233 +8,254 @@ import * as v from "valibot";
 config();
 
 const CreateCustomImageSchema = v.object({
-    picture: v.any(),
-    showLink: v.pipe(v.optional(v.boolean(), false), v.transform((val) => val ?? false)),
-    linkText: v.pipe(v.optional(v.string(), ""), v.transform((val) => val ?? "")),
-    registrationURL: v.optional(
-        v.union([
-            v.pipe(v.string(), v.url()),
-            v.literal("")
-        ]),
-        ""
-    ),
-    currentIFeed: v.string()
+	picture: v.any(),
+	showLink: v.pipe(
+		v.optional(v.boolean(), false),
+		v.transform((val) => val ?? false)
+	),
+	linkText: v.pipe(
+		v.optional(v.string(), ""),
+		v.transform((val) => val ?? "")
+	),
+	registrationURL: v.optional(v.union([v.pipe(v.string(), v.url()), v.literal("")]), ""),
+	currentIFeed: v.string()
 });
 
-export const createCustomImageForm = form(CreateCustomImageSchema, async (newCustomImage, issue) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return redirect(303, "/");
-    }
-
-    if (locals.user.accessLevel === "none") {
-        return invalid(issue.registrationURL("You need to be subsrcibed to use this feature."));
-    }
-
-    if (newCustomImage.showLink && !newCustomImage.registrationURL) {
-        return invalid(issue.registrationURL("Link URL cannot be empty."))
-    }
-
-    if (newCustomImage.showLink && newCustomImage.linkText.length === 0) {
-        return invalid(issue.linkText("Link Button Text cannot be empty."))
-    }
-
-    try {
-        let data: Partial<CustomImageIFeedDBModel> = {
-            "linkText": newCustomImage.linkText,
-            "registrationURL": newCustomImage.registrationURL,
-            "showLink": newCustomImage.showLink,
-            "imageFeed": [ newCustomImage.currentIFeed ],
-            "owner": locals.user.id
-        };
-
-        if (newCustomImage.picture) {
-            const newAvatar = newCustomImage.picture as File;
-            const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, { type: newAvatar.type });
-            data["picture"] = file;
-        } else {
-            return invalid(issue.registrationURL("A Picture is required."));
-        }
-
-        await locals.pb.collection('customImageIfeed').create(data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return invalid(issue.registrationURL("Failed to create custom image."));
-    }
-
-    getCustomImagesForIFeed(newCustomImage.currentIFeed).refresh();
-    return {
-        error: false,
-        msg: "Successfully created image feed."
-    }
-});
-
-export const getCustomImageById = command(v.string(), async (id): Promise<({
-    error: true,
-    msg: string
-} | {
-    error: false,
-    customImageIfeed: CustomImageIFeedDBModel
-})> => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    let customImageIfeed: CustomImageIFeedDBModel | null = null;
-    try {
-        customImageIfeed = await locals.pb.collection("customImageIfeed").getOne(id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch(err) {
-        console.log(err);
-        return {
-            error: true,
-            msg: "Internal Server Error."
-        }
-    }
-
-    if (customImageIfeed === null) {
-        return {
-            error: true,
-            msg: "Custom Image doesnt exist."
-        }
-    }
-
-    if (customImageIfeed.owner !== locals.user.id) {
-        return {
-            error: true,
-            msg: "Unauthorized."
-        }
-    }
-
-    return {
-        error: false,
-        customImageIfeed
-    }
-});
+export const createCustomImageForm = form(
+	CreateCustomImageSchema,
+	async (newCustomImage, issue) => {
+		const { locals } = getRequestEvent();
+
+		if (!locals.user) {
+			return redirect(303, "/");
+		}
+
+		if (locals.user.accessLevel === "none") {
+			return invalid(issue.registrationURL("You need to be subsrcibed to use this feature."));
+		}
+
+		if (newCustomImage.showLink && !newCustomImage.registrationURL) {
+			return invalid(issue.registrationURL("Link URL cannot be empty."));
+		}
+
+		if (newCustomImage.showLink && newCustomImage.linkText.length === 0) {
+			return invalid(issue.linkText("Link Button Text cannot be empty."));
+		}
+
+		try {
+			let data: Partial<CustomImageIFeedDBModel> = {
+				linkText: newCustomImage.linkText,
+				registrationURL: newCustomImage.registrationURL,
+				showLink: newCustomImage.showLink,
+				imageFeed: [newCustomImage.currentIFeed],
+				owner: locals.user.id
+			};
+
+			if (newCustomImage.picture) {
+				const newAvatar = newCustomImage.picture as File;
+				const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, {
+					type: newAvatar.type
+				});
+				data["picture"] = file;
+			} else {
+				return invalid(issue.registrationURL("A Picture is required."));
+			}
+
+			await locals.pb.collection("customImageIfeed").create(data, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+		} catch (err) {
+			console.log(err);
+
+			return invalid(issue.registrationURL("Failed to create custom image."));
+		}
+
+		getCustomImagesForIFeed(newCustomImage.currentIFeed).refresh();
+		return {
+			error: false,
+			msg: "Successfully created image feed."
+		};
+	}
+);
+
+export const getCustomImageById = command(
+	v.string(),
+	async (
+		id
+	): Promise<
+		| {
+				error: true;
+				msg: string;
+		  }
+		| {
+				error: false;
+				customImageIfeed: CustomImageIFeedDBModel;
+		  }
+	> => {
+		const { locals } = getRequestEvent();
+
+		if (!locals.user) {
+			return {
+				error: true,
+				msg: "No User."
+			};
+		}
+
+		let customImageIfeed: CustomImageIFeedDBModel | null = null;
+		try {
+			customImageIfeed = await locals.pb.collection("customImageIfeed").getOne(id, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+		} catch (err) {
+			console.log(err);
+			return {
+				error: true,
+				msg: "Internal Server Error."
+			};
+		}
+
+		if (customImageIfeed === null) {
+			return {
+				error: true,
+				msg: "Custom Image doesnt exist."
+			};
+		}
+
+		if (customImageIfeed.owner !== locals.user.id) {
+			return {
+				error: true,
+				msg: "Unauthorized."
+			};
+		}
+
+		return {
+			error: false,
+			customImageIfeed
+		};
+	}
+);
 
 const UpdateCustomImageSchema = v.object({
-    id: v.string(),
-    eventPictureLink: v.optional(v.string()),
-    included: v.array(v.string()),
-    uploadNewEventPicture: v.optional(v.any()),
-    showLink: v.optional(v.boolean(), false),
-    linkText: v.optional(v.string(), ""),
-    registrationURL: v.optional(v.pipe(v.string(), v.url("Invalid Link URL. Please enter a valid URL."))),
-    currentIFeedId: v.string()
-});
-
-export const updateCustomImageForm = form(UpdateCustomImageSchema, async (updatedCustomImage, issue) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return redirect(303, "/");
-    }
-
-    if (locals.user.accessLevel === "none") {
-        return invalid(issue.registrationURL("You need to be subscibed to use this feature."));
-    }
-
-    if (updatedCustomImage.showLink && !updatedCustomImage.registrationURL) {
-        return invalid(issue.registrationURL("Link URL cannot be empty."))
-    }
-
-    if (updatedCustomImage.showLink && updatedCustomImage.linkText.length === 0) {
-        return invalid(issue.linkText("Link Button Text cannot be empty."))
-    }
-
-    if (!updatedCustomImage.eventPictureLink && !updatedCustomImage.uploadNewEventPicture) {
-        return invalid(issue.registrationURL("Image is missing."));
-
-    }
-
-    const response = await getCustomImageById(updatedCustomImage.id);
-
-    if (response.error) return redirect(303, "/dashboard/image-feeds");
-
-    const { customImageIfeed } = response;
-
-    try {
-        let data: Partial<CustomImageIFeedDBModel> = {
-            "linkText": updatedCustomImage.linkText,
-            "registrationURL": updatedCustomImage.registrationURL,
-            "showLink": updatedCustomImage.showLink,
-            "imageFeed": updatedCustomImage.included
-        };
-
-        if (updatedCustomImage.uploadNewEventPicture) {
-            const newAvatar = updatedCustomImage.uploadNewEventPicture as File;
-            const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, { type: newAvatar.type });
-            data["picture"] = file;
-        }
-        
-
-        await locals.pb.collection('customImageIfeed').update(customImageIfeed.id, data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return invalid(issue.id("Failed to update custom image."));
-    }
-
-    getCustomImagesForIFeed(updatedCustomImage.currentIFeedId).refresh();
-    return {
-        error: false,
-        msg: "Successfully updated custom image."
-    }
+	id: v.string(),
+	eventPictureLink: v.optional(v.string()),
+	included: v.array(v.string()),
+	uploadNewEventPicture: v.optional(v.any()),
+	showLink: v.optional(v.boolean(), false),
+	linkText: v.optional(v.string(), ""),
+	registrationURL: v.optional(
+		v.pipe(v.string(), v.url("Invalid Link URL. Please enter a valid URL."))
+	),
+	currentIFeedId: v.string()
 });
 
-export const deleteCustomImageCommand = command(v.object({
-    id: v.string(),
-    currentFeedID: v.string()
-}), async (data) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const response = await getCustomImageById(data.id);
-
-    if (response.error) return response;
-
-    try {
-        await locals.pb.collection('customImageIfeed').delete(data.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: `Internal Server Error.`
-        }
-    }
-
-    getCustomImagesForIFeed(data.currentFeedID).refresh();
-    return {
-        error: false,
-        msg: "Successfully deleted custom image."
-    }
-});
\ No newline at end of file
+export const updateCustomImageForm = form(
+	UpdateCustomImageSchema,
+	async (updatedCustomImage, issue) => {
+		const { locals } = getRequestEvent();
+
+		if (!locals.user) {
+			return redirect(303, "/");
+		}
+
+		if (locals.user.accessLevel === "none") {
+			return invalid(issue.registrationURL("You need to be subscibed to use this feature."));
+		}
+
+		if (updatedCustomImage.showLink && !updatedCustomImage.registrationURL) {
+			return invalid(issue.registrationURL("Link URL cannot be empty."));
+		}
+
+		if (updatedCustomImage.showLink && updatedCustomImage.linkText.length === 0) {
+			return invalid(issue.linkText("Link Button Text cannot be empty."));
+		}
+
+		if (!updatedCustomImage.eventPictureLink && !updatedCustomImage.uploadNewEventPicture) {
+			return invalid(issue.registrationURL("Image is missing."));
+		}
+
+		const response = await getCustomImageById(updatedCustomImage.id);
+
+		if (response.error) return redirect(303, "/dashboard/image-feeds");
+
+		const { customImageIfeed } = response;
+
+		try {
+			let data: Partial<CustomImageIFeedDBModel> = {
+				linkText: updatedCustomImage.linkText,
+				registrationURL: updatedCustomImage.registrationURL,
+				showLink: updatedCustomImage.showLink,
+				imageFeed: updatedCustomImage.included
+			};
+
+			if (updatedCustomImage.uploadNewEventPicture) {
+				const newAvatar = updatedCustomImage.uploadNewEventPicture as File;
+				const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, {
+					type: newAvatar.type
+				});
+				data["picture"] = file;
+			}
+
+			await locals.pb.collection("customImageIfeed").update(customImageIfeed.id, data, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+		} catch (err) {
+			console.log(err);
+
+			return invalid(issue.id("Failed to update custom image."));
+		}
+
+		getCustomImagesForIFeed(updatedCustomImage.currentIFeedId).refresh();
+		return {
+			error: false,
+			msg: "Successfully updated custom image."
+		};
+	}
+);
+
+export const deleteCustomImageCommand = command(
+	v.object({
+		id: v.string(),
+		currentFeedID: v.string()
+	}),
+	async (data) => {
+		const { locals } = getRequestEvent();
+
+		if (!locals.user) {
+			return {
+				error: true,
+				msg: "No User."
+			};
+		}
+
+		const response = await getCustomImageById(data.id);
+
+		if (response.error) return response;
+
+		try {
+			await locals.pb.collection("customImageIfeed").delete(data.id, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+		} catch (err) {
+			console.log(err);
+
+			return {
+				error: true,
+				msg: `Internal Server Error.`
+			};
+		}
+
+		getCustomImagesForIFeed(data.currentFeedID).refresh();
+		return {
+			error: false,
+			msg: "Successfully deleted custom image."
+		};
+	}
+);
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedIncludeCalActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedIncludeCalActions.remote.ts
index b1b84cc..cac9996 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedIncludeCalActions.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/IFeedIncludeCalActions.remote.ts
@@ -5,92 +5,106 @@ import * as v from "valibot";
 
 config();
 
-export const updateIncludedCalendarsToIFeed = command(v.object({
-    calIds: v.array(v.string()),
-    currentFeedID: v.string()
-}), async (data) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const imageFeed = await getImageFeedById(data.currentFeedID);
-    const myCalendars = await getMyCalendars();
-    let newCals = imageFeed.additionalCalendars;
-
-    for (let i=0;i<data.calIds.length;i++) {
-        const currentCalId = data.calIds[i];
-        if (!currentCalId) continue;
-
-        if (imageFeed.additionalCalendars.includes(currentCalId)) continue;
-
-        if (myCalendars.filter((cal) => cal.id === currentCalId).length === 0) continue
-
-        newCals.push(currentCalId);
-    }
-
-    try {
-        await locals.pb.collection('imageFeeds').update(imageFeed.id, {
-            "additionalCalendars": newCals,
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "Failed to update the included calendars."
-        }
-    }
-
-    getImageFeedById(data.currentFeedID).refresh();
-    return {
-        error: false,
-        msg: "Successfully updated included calendars."
-    }
-});
-
-export const removeIncludedCalendarsToIFeed = command(v.object({
-    calId: v.string(),
-    currentFeedID: v.string()
-}), async (data) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const imageFeed = await getImageFeedById(data.currentFeedID);
-    try {
-        await locals.pb.collection('imageFeeds').update(imageFeed.id, {
-            "additionalCalendars": imageFeed.additionalCalendars.filter((cal) => cal !== data.calId),
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "Failed to update the included calendars."
-        }
-    }
-
-    getImageFeedById(data.currentFeedID).refresh();
-    return {
-        error: false,
-        msg: "Successfully updated included calendars."
-    }
-});
\ No newline at end of file
+export const updateIncludedCalendarsToIFeed = command(
+	v.object({
+		calIds: v.array(v.string()),
+		currentFeedID: v.string()
+	}),
+	async (data) => {
+		const { locals } = getRequestEvent();
+
+		if (!locals.user) {
+			return {
+				error: true,
+				msg: "No User."
+			};
+		}
+
+		const imageFeed = await getImageFeedById(data.currentFeedID);
+		const myCalendars = await getMyCalendars();
+		let newCals = imageFeed.additionalCalendars;
+
+		for (let i = 0; i < data.calIds.length; i++) {
+			const currentCalId = data.calIds[i];
+			if (!currentCalId) continue;
+
+			if (imageFeed.additionalCalendars.includes(currentCalId)) continue;
+
+			if (myCalendars.filter((cal) => cal.id === currentCalId).length === 0) continue;
+
+			newCals.push(currentCalId);
+		}
+
+		try {
+			await locals.pb.collection("imageFeeds").update(
+				imageFeed.id,
+				{
+					additionalCalendars: newCals
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+		} catch (err) {
+			console.log(err);
+
+			return {
+				error: true,
+				msg: "Failed to update the included calendars."
+			};
+		}
+
+		getImageFeedById(data.currentFeedID).refresh();
+		return {
+			error: false,
+			msg: "Successfully updated included calendars."
+		};
+	}
+);
+
+export const removeIncludedCalendarsToIFeed = command(
+	v.object({
+		calId: v.string(),
+		currentFeedID: v.string()
+	}),
+	async (data) => {
+		const { locals } = getRequestEvent();
+
+		if (!locals.user) {
+			return {
+				error: true,
+				msg: "No User."
+			};
+		}
+
+		const imageFeed = await getImageFeedById(data.currentFeedID);
+		try {
+			await locals.pb.collection("imageFeeds").update(
+				imageFeed.id,
+				{
+					additionalCalendars: imageFeed.additionalCalendars.filter((cal) => cal !== data.calId)
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+		} catch (err) {
+			console.log(err);
+
+			return {
+				error: true,
+				msg: "Failed to update the included calendars."
+			};
+		}
+
+		getImageFeedById(data.currentFeedID).refresh();
+		return {
+			error: false,
+			msg: "Successfully updated included calendars."
+		};
+	}
+);
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.server.ts b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.server.ts
index ace8daf..9dafcc2 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.server.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.server.ts
@@ -3,10 +3,10 @@ import { config } from "dotenv";
 config();
 
 export async function load({ params, parent }) {
-    await parent();
-    let slug = params.slug;
+	await parent();
+	let slug = params.slug;
 
-    return {
-        selectedFeedId: slug
-    }
-}
\ No newline at end of file
+	return {
+		selectedFeedId: slug
+	};
+}
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.svelte b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.svelte
index 909855c..08d7765 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/[slug]/+page.svelte
@@ -1,162 +1,179 @@
 <script lang="ts">
-    import IFeedIncludedCalendars from "@/dashboard/imageFeed/IFeedIncludedCalendars.svelte";
-    import IFeedAdditionalImages from "@/dashboard/imageFeed/IFeedAdditionalImages.svelte";
-    import IFeedDisplaySettings from "@/dashboard/imageFeed/IFeedDisplaySettings.svelte";
-    import IFeedFilterSettings from "@/dashboard/imageFeed/IFeedFilterSettings.svelte";
-    import IFeedQuickActions from "@/dashboard/imageFeed/IFeedQuickActions.svelte";
-    import IFeedPreviewCard from "@/dashboard/imageFeed/IFeedPreviewCard.svelte";
-    import IFeedGeneralInfo from "@/dashboard/imageFeed/IFeedGeneralInfo.svelte";
-    import IFeedStatistics from "@/dashboard/imageFeed/IFeedStatistics.svelte";
-    import { updateImageFeedForm } from "../imageFeedActions.remote.js";
-    import IFeedAvatar from "@/dashboard/imageFeed/IFeedAvatar.svelte";
-    import IFeedShare from "@/dashboard/imageFeed/IFeedShare.svelte";
-    import { getImageFeedById } from "../../backend.remote.js";
-    import { Button } from "@/components/ui/button";
-    import { Temporal } from "temporal-polyfill";
-    import { clearFileInput } from "@/utils.js";
-    import { ArrowLeft } from "@lucide/svelte";
-    import { toast } from "svelte-sonner";
-    import { onDestroy } from "svelte";
-
-    
-    let { data } = $props();
-
-    let selectedImageFeed = $derived(await getImageFeedById(data.selectedFeedId));
-
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let uploadNewAvatar: File | null = $state(null);
-    let saveChangesToast: string | number | null = $state(null);
-
-    let avatarChanged = $state(false);
-    let generalInfoChanged = $state(false);
-    let filterSettingsChanged = $state(false);
-    let displaySettingsChanged = $state(false);
-
-    // svelte-ignore state_referenced_locally
-    let displaySettingsPreview = $state(selectedImageFeed.displaySettings);
-
-    // This effect checks if any configurations have changed. If so, the saveRequired state will be set to true.
-    $effect(() => {
-        const saveRequired = avatarChanged || generalInfoChanged || displaySettingsChanged || filterSettingsChanged;
-    
-        if (saveRequired) {
-            if (saveChangesToast === null) {
-                saveChangesToast = toast("Save?", {
-                    description: "You have some unsaved changes.",
-                    dismissable: false,
-                    duration: Number.POSITIVE_INFINITY,
-                    action: {
-                        label: "Save Changes",
-                        onClick: () => {
-                            const formSubmitButton = document.getElementById("updateImageFeedButton1") as HTMLButtonElement | null;
-                            if (formSubmitButton) {
-                                formSubmitButton.click();
-                            }
-                        }
-                    }
-                });
-            }
-        } else {
-            if (saveChangesToast !== null) {
-                toast.dismiss(saveChangesToast);
-            }
-            saveChangesToast = null;
-        }
-    });
-
-    onDestroy(() => {
-        if (saveChangesToast !== null) {
-            toast.dismiss(saveChangesToast);
-        }
-        saveChangesToast = null;
-    });
+	import IFeedIncludedCalendars from "@/dashboard/imageFeed/IFeedIncludedCalendars.svelte";
+	import IFeedAdditionalImages from "@/dashboard/imageFeed/IFeedAdditionalImages.svelte";
+	import IFeedDisplaySettings from "@/dashboard/imageFeed/IFeedDisplaySettings.svelte";
+	import IFeedFilterSettings from "@/dashboard/imageFeed/IFeedFilterSettings.svelte";
+	import IFeedQuickActions from "@/dashboard/imageFeed/IFeedQuickActions.svelte";
+	import IFeedPreviewCard from "@/dashboard/imageFeed/IFeedPreviewCard.svelte";
+	import IFeedGeneralInfo from "@/dashboard/imageFeed/IFeedGeneralInfo.svelte";
+	import IFeedStatistics from "@/dashboard/imageFeed/IFeedStatistics.svelte";
+	import { updateImageFeedForm } from "../imageFeedActions.remote.js";
+	import IFeedAvatar from "@/dashboard/imageFeed/IFeedAvatar.svelte";
+	import IFeedShare from "@/dashboard/imageFeed/IFeedShare.svelte";
+	import { getImageFeedById } from "../../backend.remote.js";
+	import { Button } from "@/components/ui/button";
+	import { Temporal } from "temporal-polyfill";
+	import { clearFileInput } from "@/utils.js";
+	import { ArrowLeft } from "@lucide/svelte";
+	import { toast } from "svelte-sonner";
+	import { onDestroy } from "svelte";
+
+	let { data } = $props();
+
+	let selectedImageFeed = $derived(await getImageFeedById(data.selectedFeedId));
+
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let uploadNewAvatar: File | null = $state(null);
+	let saveChangesToast: string | number | null = $state(null);
+
+	let avatarChanged = $state(false);
+	let generalInfoChanged = $state(false);
+	let filterSettingsChanged = $state(false);
+	let displaySettingsChanged = $state(false);
+
+	// svelte-ignore state_referenced_locally
+	let displaySettingsPreview = $state(selectedImageFeed.displaySettings);
+
+	// This effect checks if any configurations have changed. If so, the saveRequired state will be set to true.
+	$effect(() => {
+		const saveRequired =
+			avatarChanged || generalInfoChanged || displaySettingsChanged || filterSettingsChanged;
+
+		if (saveRequired) {
+			if (saveChangesToast === null) {
+				saveChangesToast = toast("Save?", {
+					description: "You have some unsaved changes.",
+					dismissable: false,
+					duration: Number.POSITIVE_INFINITY,
+					action: {
+						label: "Save Changes",
+						onClick: () => {
+							const formSubmitButton = document.getElementById(
+								"updateImageFeedButton1"
+							) as HTMLButtonElement | null;
+							if (formSubmitButton) {
+								formSubmitButton.click();
+							}
+						}
+					}
+				});
+			}
+		} else {
+			if (saveChangesToast !== null) {
+				toast.dismiss(saveChangesToast);
+			}
+			saveChangesToast = null;
+		}
+	});
+
+	onDestroy(() => {
+		if (saveChangesToast !== null) {
+			toast.dismiss(saveChangesToast);
+		}
+		saveChangesToast = null;
+	});
 </script>
 
 <svelte:head>
-    <title>{selectedImageFeed.name} | InfoSections</title>
+	<title>{selectedImageFeed.name} | InfoSections</title>
 </svelte:head>
 
 <div class="main max-w-5xl mx-auto space-y-6 isolate">
-    <div class="flex items-center gap-4">
-        <Button variant="ghost" size="icon" href="/dashboard/image-feeds">
-            <ArrowLeft class="h-5 w-5" />
-        </Button>
-        <div>
-            <h1 class="text-3xl font-bold text-foreground">{selectedImageFeed.name} | Feed Details</h1>
-            <p class="text-muted-foreground mt-1">Manage your image feed settings and filters.</p>
-        </div>
-    </div>
-
-    <div class="grid gap-6 lg:grid-cols-3">
-        <div class="lg:col-span-2 space-y-6">
-            <form
-                {...updateImageFeedForm.enhance(async ({ submit, form }) => {
-                    let savingChanges = toast.loading("Saving Changes.", { duration: Number.POSITIVE_INFINITY });
-                    try {
-                        await submit();
-                        form.reset();
-                        clearFileInput(document.getElementById("imageUploaderImageFeed"));
-                        uploadNewAvatar = null;
-                        toast.dismiss(savingChanges);
-
-                        toast.success("Saved Changes");
-                    } catch (err) {
-                        console.log(err);
-                        toast.dismiss(savingChanges);
-                        toast.error("An error occured.");
-                    }
-                })}
-                class="space-y-6"
-                enctype="multipart/form-data"
-            >
-                <Button type="submit" id="updateImageFeedButton1" class="sr-only">Update Image Feed</Button>
-                <IFeedAvatar
-                    bind:changed={avatarChanged}
-                    bind:uploadNewAvatar
-                    avatarLink={selectedImageFeed.logo ? `${data.pb_url}/api/files/${selectedImageFeed.collectionId}/${selectedImageFeed.id}/${selectedImageFeed.logo}` : ""}
-                />
-
-                <IFeedGeneralInfo
-                    bind:changed={generalInfoChanged}
-                    feedId={selectedImageFeed.id}
-                    feedName={selectedImageFeed.name}
-                    feedDescription={selectedImageFeed.description}
-                />
-
-                <IFeedDisplaySettings displaySettings={selectedImageFeed.displaySettings} bind:changed={displaySettingsChanged} bind:displaySettingsPreview />
-
-                <IFeedPreviewCard displaySettings={displaySettingsPreview} feedId={selectedImageFeed.id} />
-
-                <IFeedFilterSettings filters={selectedImageFeed.filters} bind:changed={filterSettingsChanged} />
-            </form>
-
-            <div class="space-y-6">
-                <IFeedAdditionalImages feedId={selectedImageFeed.id} pb_url={data.pb_url} />
-
-                <IFeedIncludedCalendars feedId={selectedImageFeed.id} pb_url={data.pb_url} additionalCalendars={selectedImageFeed.additionalCalendars} />
-            </div>
-        </div>
-
-        <!-- This is the sticky side options section. -->
-        <div class="space-y-6 stickySidebar h-fit">
-            <IFeedShare feedId={selectedImageFeed.id} feedName={selectedImageFeed.name}/>
-
-            <IFeedStatistics
-                visits={selectedImageFeed.visits}
-                updated={selectedImageFeed.updated}
-                created={selectedImageFeed.created}
-                {timeZone}
-            />
-
-            <IFeedQuickActions feedId={selectedImageFeed.id} />
-        </div>
-    </div>
+	<div class="flex items-center gap-4">
+		<Button variant="ghost" size="icon" href="/dashboard/image-feeds">
+			<ArrowLeft class="h-5 w-5" />
+		</Button>
+		<div>
+			<h1 class="text-3xl font-bold text-foreground">{selectedImageFeed.name} | Feed Details</h1>
+			<p class="text-muted-foreground mt-1">Manage your image feed settings and filters.</p>
+		</div>
+	</div>
+
+	<div class="grid gap-6 lg:grid-cols-3">
+		<div class="lg:col-span-2 space-y-6">
+			<form
+				{...updateImageFeedForm.enhance(async ({ submit, form }) => {
+					let savingChanges = toast.loading("Saving Changes.", {
+						duration: Number.POSITIVE_INFINITY
+					});
+					try {
+						await submit();
+						form.reset();
+						clearFileInput(document.getElementById("imageUploaderImageFeed"));
+						uploadNewAvatar = null;
+						toast.dismiss(savingChanges);
+
+						toast.success("Saved Changes");
+					} catch (err) {
+						console.log(err);
+						toast.dismiss(savingChanges);
+						toast.error("An error occured.");
+					}
+				})}
+				class="space-y-6"
+				enctype="multipart/form-data"
+			>
+				<Button type="submit" id="updateImageFeedButton1" class="sr-only">Update Image Feed</Button>
+				<IFeedAvatar
+					bind:changed={avatarChanged}
+					bind:uploadNewAvatar
+					avatarLink={selectedImageFeed.logo
+						? `${data.pb_url}/api/files/${selectedImageFeed.collectionId}/${selectedImageFeed.id}/${selectedImageFeed.logo}`
+						: ""}
+				/>
+
+				<IFeedGeneralInfo
+					bind:changed={generalInfoChanged}
+					feedId={selectedImageFeed.id}
+					feedName={selectedImageFeed.name}
+					feedDescription={selectedImageFeed.description}
+				/>
+
+				<IFeedDisplaySettings
+					displaySettings={selectedImageFeed.displaySettings}
+					bind:changed={displaySettingsChanged}
+					bind:displaySettingsPreview
+				/>
+
+				<IFeedPreviewCard displaySettings={displaySettingsPreview} feedId={selectedImageFeed.id} />
+
+				<IFeedFilterSettings
+					filters={selectedImageFeed.filters}
+					bind:changed={filterSettingsChanged}
+				/>
+			</form>
+
+			<div class="space-y-6">
+				<IFeedAdditionalImages feedId={selectedImageFeed.id} pb_url={data.pb_url} />
+
+				<IFeedIncludedCalendars
+					feedId={selectedImageFeed.id}
+					pb_url={data.pb_url}
+					additionalCalendars={selectedImageFeed.additionalCalendars}
+				/>
+			</div>
+		</div>
+
+		<!-- This is the sticky side options section. -->
+		<div class="space-y-6 stickySidebar h-fit">
+			<IFeedShare feedId={selectedImageFeed.id} feedName={selectedImageFeed.name} />
+
+			<IFeedStatistics
+				visits={selectedImageFeed.visits}
+				updated={selectedImageFeed.updated}
+				created={selectedImageFeed.created}
+				{timeZone}
+			/>
+
+			<IFeedQuickActions feedId={selectedImageFeed.id} />
+		</div>
+	</div>
 </div>
 
 <style>
-    .stickySidebar {
-        position: -webkit-sticky;
-        position: sticky;
-        top: 0;
-    }
-</style>
\ No newline at end of file
+	.stickySidebar {
+		position: -webkit-sticky;
+		position: sticky;
+		top: 0;
+	}
+</style>
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote.ts
index ab9804a..d1faf5a 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/image-feeds/imageFeedActions.remote.ts
@@ -1,4 +1,8 @@
-import { defaultImageFeedCustomizations, defaultImageFeedFilters, type ImageFeedDBModel } from "@/utils";
+import {
+	defaultImageFeedCustomizations,
+	defaultImageFeedFilters,
+	type ImageFeedDBModel
+} from "@/utils";
 import { getImageFeedById, getMyImageFeeds } from "../backend.remote";
 import { command, form, getRequestEvent } from "$app/server";
 import { invalid, redirect } from "@sveltejs/kit";
@@ -8,159 +12,166 @@ import * as v from "valibot";
 config();
 
 const CreateImageFeedSchema = v.object({
-    name: v.pipe(v.string(), v.nonEmpty("A name for the feed is required.")),
-    description: v.pipe(v.string(), v.nonEmpty("A description for the feed is required."))
+	name: v.pipe(v.string(), v.nonEmpty("A name for the feed is required.")),
+	description: v.pipe(v.string(), v.nonEmpty("A description for the feed is required."))
 });
 
 export const createImageFeedCommand = command(CreateImageFeedSchema, async (newIFeed) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const imageFeeds = await getMyImageFeeds();
-
-    if (imageFeeds.length > 0 && locals.user.accessLevel === "none") {
-        return {
-            error: true,
-            msg: "Exceed the amount of image feeds on the free plan."
-        }
-    }
-
-    try {
-        let data: Partial<ImageFeedDBModel> = {
-            "name": newIFeed.name,
-            "description": newIFeed.description,
-            "owner": locals.user.id,
-            "displaySettings": defaultImageFeedCustomizations,
-            "filters": defaultImageFeedFilters
-        };
-
-        await locals.pb.collection('imageFeeds').create(data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: "Internal Server Error."
-        }
-    }
-
-    getMyImageFeeds().refresh();
-    return {
-        error: false,
-        msg: "Successfully created image feed."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	const imageFeeds = await getMyImageFeeds();
+
+	if (imageFeeds.length > 0 && locals.user.accessLevel === "none") {
+		return {
+			error: true,
+			msg: "Exceed the amount of image feeds on the free plan."
+		};
+	}
+
+	try {
+		let data: Partial<ImageFeedDBModel> = {
+			name: newIFeed.name,
+			description: newIFeed.description,
+			owner: locals.user.id,
+			displaySettings: defaultImageFeedCustomizations,
+			filters: defaultImageFeedFilters
+		};
+
+		await locals.pb.collection("imageFeeds").create(data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: "Internal Server Error."
+		};
+	}
+
+	getMyImageFeeds().refresh();
+	return {
+		error: false,
+		msg: "Successfully created image feed."
+	};
 });
 
 const UpdateImageFeedSchema = v.object({
-    id: v.string(),
-    name: v.string(),
-    description: v.string(),
-    avatarLink: v.optional(v.string()),
-    newAvatar: v.optional(v.any()),
-    displaySettings: v.object({
-        showEventExtraInfo: v.optional(v.boolean(), false),
-        showEventName: v.optional(v.boolean(), false),
-        showEventDescription: v.optional(v.boolean(), false),
-        showEventRegistration: v.optional(v.boolean(), false),
-        feedDurationMS: v.number()
-    }),
-    filters: v.optional(v.object({
-        onlyShowFeatured: v.optional(v.boolean(), false),
-        hideUnpublished: v.optional(v.boolean(), false),
-        hideRecurringEvents: v.optional(v.boolean(), false)
-    }), undefined)
+	id: v.string(),
+	name: v.string(),
+	description: v.string(),
+	avatarLink: v.optional(v.string()),
+	newAvatar: v.optional(v.any()),
+	displaySettings: v.object({
+		showEventExtraInfo: v.optional(v.boolean(), false),
+		showEventName: v.optional(v.boolean(), false),
+		showEventDescription: v.optional(v.boolean(), false),
+		showEventRegistration: v.optional(v.boolean(), false),
+		feedDurationMS: v.number()
+	}),
+	filters: v.optional(
+		v.object({
+			onlyShowFeatured: v.optional(v.boolean(), false),
+			hideUnpublished: v.optional(v.boolean(), false),
+			hideRecurringEvents: v.optional(v.boolean(), false)
+		}),
+		undefined
+	)
 });
 
 export const updateImageFeedForm = form(UpdateImageFeedSchema, async (updatedIFeed, issue) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return redirect(303, "/");
-    }
-
-    const currentImageFeed = await getImageFeedById(updatedIFeed.id);
-
-    try {
-        let data: Partial<ImageFeedDBModel> = {
-            "name": updatedIFeed.name,
-            "description": updatedIFeed.description,
-            "displaySettings": updatedIFeed.displaySettings,
-            "filters": updatedIFeed.filters ? updatedIFeed.filters : {
-                "hideUnpublished": false,
-                "onlyShowFeatured": false,
-                "hideRecurringEvents": false
-            }
-        };
-
-        if (!updatedIFeed.avatarLink && updatedIFeed.newAvatar) {
-            const newAvatar = updatedIFeed.newAvatar as File;
-            const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, { type: newAvatar.type });
-            data["logo"] = file;
-        }
-        
-        if (!updatedIFeed.avatarLink && !updatedIFeed.newAvatar) {
-            data["logo"] = "";
-        }
-
-        await locals.pb.collection('imageFeeds').update(currentImageFeed.id, data, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return invalid(issue.id("Failed to update image feed."));
-    }
-
-    getMyImageFeeds().refresh();
-    getImageFeedById(currentImageFeed.id).refresh();
-    return {
-        error: false,
-        msg: "Successfully updated image feed."
-    }
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return redirect(303, "/");
+	}
+
+	const currentImageFeed = await getImageFeedById(updatedIFeed.id);
+
+	try {
+		let data: Partial<ImageFeedDBModel> = {
+			name: updatedIFeed.name,
+			description: updatedIFeed.description,
+			displaySettings: updatedIFeed.displaySettings,
+			filters: updatedIFeed.filters
+				? updatedIFeed.filters
+				: {
+						hideUnpublished: false,
+						onlyShowFeatured: false,
+						hideRecurringEvents: false
+					}
+		};
+
+		if (!updatedIFeed.avatarLink && updatedIFeed.newAvatar) {
+			const newAvatar = updatedIFeed.newAvatar as File;
+			const file = new File([await newAvatar.arrayBuffer()], newAvatar.name, {
+				type: newAvatar.type
+			});
+			data["logo"] = file;
+		}
+
+		if (!updatedIFeed.avatarLink && !updatedIFeed.newAvatar) {
+			data["logo"] = "";
+		}
+
+		await locals.pb.collection("imageFeeds").update(currentImageFeed.id, data, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return invalid(issue.id("Failed to update image feed."));
+	}
+
+	getMyImageFeeds().refresh();
+	getImageFeedById(currentImageFeed.id).refresh();
+	return {
+		error: false,
+		msg: "Successfully updated image feed."
+	};
 });
 
 export const deleteImageFeedCommand = command(v.string(), async (id) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) {
-        return {
-            error: true,
-            msg: "No User."
-        }
-    }
-
-    const imageFeed = await getImageFeedById(id);
-
-    try {
-        await locals.pb.collection('imageFeeds').delete(imageFeed.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(err);
-
-        return {
-            error: true,
-            msg: `Internal Server Error.`
-        }
-    }
-
-    getMyImageFeeds().refresh();
-    return {
-        error: false,
-        msg: "Successfully deleted image feed."
-    }
-});
\ No newline at end of file
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) {
+		return {
+			error: true,
+			msg: "No User."
+		};
+	}
+
+	const imageFeed = await getImageFeedById(id);
+
+	try {
+		await locals.pb.collection("imageFeeds").delete(imageFeed.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log(err);
+
+		return {
+			error: true,
+			msg: `Internal Server Error.`
+		};
+	}
+
+	getMyImageFeeds().refresh();
+	return {
+		error: false,
+		msg: "Successfully deleted image feed."
+	};
+});
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/integrations.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/integrations.remote.ts
index 60faaa2..0247a23 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/integrations.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/integrations.remote.ts
@@ -9,102 +9,104 @@ import { getMyIntegrations } from "./backend.remote";
 config();
 
 const AddIntegrationData = v.object({
-    provider: v.string()
+	provider: v.string()
 });
 
 export const addAnIntegration = form(AddIntegrationData, async (integrationData) => {
-    const { locals, url, cookies } = getRequestEvent();
+	const { locals, url, cookies } = getRequestEvent();
 
-    if (!locals.user) return redirect(303, "/");
-    
-    const authMethods = await locals.pb.collection('integration').listAuthMethods();
+	if (!locals.user) return redirect(303, "/");
 
-    if (!authMethods.oauth2.enabled) return redirect(303, "/dashboard");
+	const authMethods = await locals.pb.collection("integration").listAuthMethods();
 
-    let redirectURL;
+	if (!authMethods.oauth2.enabled) return redirect(303, "/dashboard");
 
-    if (dev) {
-        if (url.origin.includes(".dev")) {
-            redirectURL = url.origin.replace("http", "https") + "/oath";
-        } else {
-            redirectURL = url.origin + "/oath";
-        }
-    } else {
-        redirectURL = process.env["VITE_WEBSITE_URL"] + "/oath";
-    }
+	let redirectURL;
 
-    let authProvider: AuthProviderInfo | undefined;
-    for (let i=0;i<authMethods.oauth2.providers.length;i++) {
-        const currentAuthProvider = authMethods.oauth2.providers[i];
-        if (currentAuthProvider && currentAuthProvider.name === integrationData.provider) {
-            authProvider = authMethods.oauth2.providers[i];
-        }
-    }
+	if (dev) {
+		if (url.origin.includes(".dev")) {
+			redirectURL = url.origin.replace("http", "https") + "/oath";
+		} else {
+			redirectURL = url.origin + "/oath";
+		}
+	} else {
+		redirectURL = process.env["VITE_WEBSITE_URL"] + "/oath";
+	}
 
-    if (!authProvider) return redirect(303, "/dashboard");
-    
-    const authProviderRedirect = `${authProvider.authURL}${redirectURL}`;
+	let authProvider: AuthProviderInfo | undefined;
+	for (let i = 0; i < authMethods.oauth2.providers.length; i++) {
+		const currentAuthProvider = authMethods.oauth2.providers[i];
+		if (currentAuthProvider && currentAuthProvider.name === integrationData.provider) {
+			authProvider = authMethods.oauth2.providers[i];
+		}
+	}
 
-    const state = authProvider.state;
-    const verifier = authProvider.codeVerifier;
-    const name = authProvider.name;
+	if (!authProvider) return redirect(303, "/dashboard");
 
-    cookies.set('integrationState', state, {
-        path: "/"
-    });
+	const authProviderRedirect = `${authProvider.authURL}${redirectURL}`;
 
-    cookies.set('integrationVerifier', verifier, {
-        path: "/"
-    });
+	const state = authProvider.state;
+	const verifier = authProvider.codeVerifier;
+	const name = authProvider.name;
 
-    cookies.set('integrationName', name, {
-        path: "/"
-    });
+	cookies.set("integrationState", state, {
+		path: "/"
+	});
 
-    const url2 = new URL(authProviderRedirect);
-    const params = url2.searchParams;
+	cookies.set("integrationVerifier", verifier, {
+		path: "/"
+	});
 
-    // We need to widen the oath scope for planning center oath.
-    if (name === "planningcenter") {
-        params.set("scope", "calendar people services");
-    } else if (name === "twitter") {
-        params.set("scope", "offline.access users.read users.email tweet.read");
-    }
+	cookies.set("integrationName", name, {
+		path: "/"
+	});
 
-    url2.search = params.toString();
+	const url2 = new URL(authProviderRedirect);
+	const params = url2.searchParams;
 
-    const newUrl = url2.toString();
+	// We need to widen the oath scope for planning center oath.
+	if (name === "planningcenter") {
+		params.set("scope", "calendar people services");
+	} else if (name === "twitter") {
+		params.set("scope", "offline.access users.read users.email tweet.read");
+	}
 
-    return redirect(303, newUrl);
+	url2.search = params.toString();
+
+	const newUrl = url2.toString();
+
+	return redirect(303, newUrl);
 });
 
 const RemoveIntegrationData = v.object({
-    id: v.string()
+	id: v.string()
 });
 
 export const removeAnIntegration = form(RemoveIntegrationData, async (integrationData) => {
-    const { locals } = getRequestEvent();
-
-    if (!locals.user) return redirect(303, "/");
-
-    try {
-        const record = await locals.pb.collection('integration').getFirstListItem(`id="${integrationData.id}" && owner ="${locals.user.id}"`, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-
-        await locals.pb.collection('integration').delete(record.id, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-
-        getMyIntegrations().refresh();
-    } catch (err) {
-        console.log(err);
-        return redirect(303, "/dashboard");
-    }
-
-    return { msg: "Good" }
-});
\ No newline at end of file
+	const { locals } = getRequestEvent();
+
+	if (!locals.user) return redirect(303, "/");
+
+	try {
+		const record = await locals.pb
+			.collection("integration")
+			.getFirstListItem(`id="${integrationData.id}" && owner ="${locals.user.id}"`, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+
+		await locals.pb.collection("integration").delete(record.id, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+
+		getMyIntegrations().refresh();
+	} catch (err) {
+		console.log(err);
+		return redirect(303, "/dashboard");
+	}
+
+	return { msg: "Good" };
+});
diff --git a/frontend/src/routes/(mainWebsite)/login/+page.svelte b/frontend/src/routes/(mainWebsite)/login/+page.svelte
index f53eecb..609eceb 100644
--- a/frontend/src/routes/(mainWebsite)/login/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/login/+page.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-    import LoginForm from "@/landingPage/authComponents/LoginForm.svelte";
-    import { Calendar } from "@lucide/svelte";
+	import LoginForm from "@/landingPage/authComponents/LoginForm.svelte";
+	import { Calendar } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>Login | InfoSections</title>
+	<title>Login | InfoSections</title>
 </svelte:head>
 
 <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
-    <div class="flex w-full max-w-sm flex-col gap-6">
-        <a href="/" class="flex items-center gap-2 self-center font-medium">
-            <div class="bg-ring text-primary-foreground flex size-6 items-center justify-center rounded-md">
-                <Calendar class="size-4" />
-            </div>
-            InfoSections
-        </a>
-        <LoginForm />
-    </div>
-</div>
\ No newline at end of file
+	<div class="flex w-full max-w-sm flex-col gap-6">
+		<a href="/" class="flex items-center gap-2 self-center font-medium">
+			<div
+				class="bg-ring text-primary-foreground flex size-6 items-center justify-center rounded-md"
+			>
+				<Calendar class="size-4" />
+			</div>
+			InfoSections
+		</a>
+		<LoginForm />
+	</div>
+</div>
diff --git a/frontend/src/routes/(mainWebsite)/login/login.remote.ts b/frontend/src/routes/(mainWebsite)/login/login.remote.ts
index 51b3caf..514f1bd 100644
--- a/frontend/src/routes/(mainWebsite)/login/login.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/login/login.remote.ts
@@ -7,29 +7,27 @@ import * as v from "valibot";
 config();
 
 const EmailPasswordLoginSchema = v.object({
-    email: EmailSchema,
-    password: v.pipe(v.string(), v.minLength(8, "The password must be longer than 8 characters."))
+	email: EmailSchema,
+	password: v.pipe(v.string(), v.minLength(8, "The password must be longer than 8 characters."))
 });
 
 export const emailPasswordLogin = form(EmailPasswordLoginSchema, async (newSignupData, issue) => {
-    const { locals, cookies } = getRequestEvent();
+	const { locals, cookies } = getRequestEvent();
 
-    try {
-        await locals.pb.collection('users').authWithPassword(
-            newSignupData.email,
-            newSignupData.password,
-        );
+	try {
+		await locals.pb
+			.collection("users")
+			.authWithPassword(newSignupData.email, newSignupData.password);
 
-        const authCookieString = locals.pb.authStore.exportToCookie().split(";");
-        cookies.set("pb_auth", authCookieString[0] ? authCookieString[0] : "", {
-            path: "/"
-        })
-    } catch (err) {
-        console.log(err);
+		const authCookieString = locals.pb.authStore.exportToCookie().split(";");
+		cookies.set("pb_auth", authCookieString[0] ? authCookieString[0] : "", {
+			path: "/"
+		});
+	} catch (err) {
+		console.log(err);
 
-        return invalid(issue.email("Something went wrong."));
-    }
+		return invalid(issue.email("Something went wrong."));
+	}
 
-
-    redirect(303, "/dashboard");
-});
\ No newline at end of file
+	redirect(303, "/dashboard");
+});
diff --git a/frontend/src/routes/(mainWebsite)/privacy/+page.svelte b/frontend/src/routes/(mainWebsite)/privacy/+page.svelte
index bf30f5d..d5c17d9 100644
--- a/frontend/src/routes/(mainWebsite)/privacy/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/privacy/+page.svelte
@@ -1,202 +1,188 @@
 <script lang="ts">
-    import { ArrowLeft } from "@lucide/svelte";
+	import { ArrowLeft } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>Privacy Policy | InfoSections</title>
+	<title>Privacy Policy | InfoSections</title>
 </svelte:head>
 
 <div class="min-h-screen bg-background">
-    <div class="mx-auto max-w-3xl px-6 py-12">
-    <a
-        href="/"
-        class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8 mt-5"
-    >
-        <ArrowLeft class="h-4 w-4" />
-        Back to Home
-    </a>
-
-    <article class="prose prose-invert max-w-none">
-        <h1 class="text-3xl font-bold tracking-tight text-foreground mb-2">
-        Privacy Policy
-        </h1>
-        <p class="text-muted-foreground mb-8">
-        Last updated: March 14, 2026
-        </p>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            1. Introduction
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            InfoSections ("we", "our", or "us") is committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you use our event management platform.
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            2. Information We Collect
-        </h2>
-        <h3 class="text-lg font-medium text-foreground mb-3">
-            2.1 Information You Provide
-        </h3>
-        <ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
-            <li>Account information (name, email address, password)</li>
-            <li>Profile information and preferences</li>
-            <li>Event data and configurations you create</li>
-            <li>Integration credentials for third-party services</li>
-        </ul>
-
-        <h3 class="text-lg font-medium text-foreground mb-3">
-            2.2 Information Collected Automatically
-        </h3>
-        <ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
-            <li>Dynamic URL click tracking and referrer data</li>
-        </ul>
-
-        <h3 class="text-lg font-medium text-foreground mb-3">
-            2.3 Information from Third Parties
-        </h3>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            When you connect integrations like Planning Center, Breeze ChMS, or Google Calendar, we receive event data and related information from these services as authorized by you.
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            3. How We Use Your Information
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We use the information we collect to:
-        </p>
-        <ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
-            <li>Provide and maintain the Service</li>
-            <li>Sync and display events from connected integrations</li>
-            <li>Process Dynamic URL redirections and track referrer analytics</li>
-            <li>Send service-related notifications and updates</li>
-            <li>Improve and optimize the Service</li>
-            <li>Respond to your requests and support inquiries</li>
-            <li>Detect and prevent fraud or abuse</li>
-        </ul>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            4. Information Sharing
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We do not sell your personal information. We may share your information in the following circumstances:
-        </p>
-        <ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
-            <li>
-            <strong class="text-foreground">Service Providers:</strong> With trusted third parties who assist us in operating the Service
-            </li>
-            <li>
-            <strong class="text-foreground">Integrations:</strong> With third-party services you connect to your account
-            </li>
-            <li>
-            <strong class="text-foreground">Legal Requirements:</strong> When required by law or to protect our rights
-            </li>
-            <li>
-            <strong class="text-foreground">Business Transfers:</strong> In connection with a merger, acquisition, or sale of assets
-            </li>
-        </ul>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            5. Data Retention
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We retain your information for as long as your account is active or as needed to provide the Service. You may request deletion of your account and associated data at any time. Some information may be retained as required by law or for legitimate business purposes.
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            6. Data Security
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We implement appropriate technical and organizational measures to protect your information, including encryption, secure servers, and access controls. However, no method of transmission over the Internet is 100% secure, and we cannot guarantee absolute security.
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            7. Your Rights
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            Depending on your location, you may have the following rights:
-        </p>
-        <ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
-            <li>Access and receive a copy of your personal data</li>
-            <li>Correct inaccurate or incomplete data</li>
-            <li>Request deletion of your data</li>
-            <li>Object to or restrict processing of your data</li>
-            <li>Data portability</li>
-            <li>Withdraw consent at any time</li>
-        </ul>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            To exercise these rights, please contact us at{" "}
-            <a href="mailto:privacy@infosections.com" class="text-primary hover:underline">
-            privacy@infosections.com
-            </a>
-            .
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            8. Cookies and Tracking
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We use cookies and similar technologies to enhance your experience, analyze usage, and remember your preferences. You can control cookie settings through your browser preferences.
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            9. Children's Privacy
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            The Service is not intended for children under 13 years of age. We do not knowingly collect personal information from children under 13. If you believe we have collected such information, please contact us immediately.
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            10. Changes to This Policy
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We may update this Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page and updating the "Last updated" date.
-        </p>
-        </section>
-
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            11. Contact Us
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            If you have any questions about this Privacy Policy, please contact us at:
-        </p>
-        <ul class="list-none text-muted-foreground space-y-2">
-            <li>
-            Email:{" "}
-            <a href="mailto:privacy@infosections.com" class="text-primary hover:underline">
-                privacy@infosections.com
-            </a>
-            </li>
-        </ul>
-        </section>
-    </article>
-
-    <div class="mt-12 pt-8 border-t border-border">
-        <p class="text-sm text-muted-foreground">
-        See also:{" "}
-        <a href="/terms" class="text-primary hover:underline">
-            Terms of Service
-        </a>
-        </p>
-    </div>
-    </div>
-</div>
\ No newline at end of file
+	<div class="mx-auto max-w-3xl px-6 py-12">
+		<a
+			href="/"
+			class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8 mt-5"
+		>
+			<ArrowLeft class="h-4 w-4" />
+			Back to Home
+		</a>
+
+		<article class="prose prose-invert max-w-none">
+			<h1 class="text-3xl font-bold tracking-tight text-foreground mb-2">Privacy Policy</h1>
+			<p class="text-muted-foreground mb-8">Last updated: March 14, 2026</p>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">1. Introduction</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					InfoSections ("we", "our", or "us") is committed to protecting your privacy. This Privacy
+					Policy explains how we collect, use, disclose, and safeguard your information when you use
+					our event management platform.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">2. Information We Collect</h2>
+				<h3 class="text-lg font-medium text-foreground mb-3">2.1 Information You Provide</h3>
+				<ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
+					<li>Account information (name, email address, password)</li>
+					<li>Profile information and preferences</li>
+					<li>Event data and configurations you create</li>
+					<li>Integration credentials for third-party services</li>
+				</ul>
+
+				<h3 class="text-lg font-medium text-foreground mb-3">
+					2.2 Information Collected Automatically
+				</h3>
+				<ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
+					<li>Dynamic URL click tracking and referrer data</li>
+				</ul>
+
+				<h3 class="text-lg font-medium text-foreground mb-3">2.3 Information from Third Parties</h3>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					When you connect integrations like Planning Center, Breeze ChMS, or Google Calendar, we
+					receive event data and related information from these services as authorized by you.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">3. How We Use Your Information</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We use the information we collect to:
+				</p>
+				<ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
+					<li>Provide and maintain the Service</li>
+					<li>Sync and display events from connected integrations</li>
+					<li>Process Dynamic URL redirections and track referrer analytics</li>
+					<li>Send service-related notifications and updates</li>
+					<li>Improve and optimize the Service</li>
+					<li>Respond to your requests and support inquiries</li>
+					<li>Detect and prevent fraud or abuse</li>
+				</ul>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">4. Information Sharing</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We do not sell your personal information. We may share your information in the following
+					circumstances:
+				</p>
+				<ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
+					<li>
+						<strong class="text-foreground">Service Providers:</strong> With trusted third parties who
+						assist us in operating the Service
+					</li>
+					<li>
+						<strong class="text-foreground">Integrations:</strong> With third-party services you connect
+						to your account
+					</li>
+					<li>
+						<strong class="text-foreground">Legal Requirements:</strong> When required by law or to protect
+						our rights
+					</li>
+					<li>
+						<strong class="text-foreground">Business Transfers:</strong> In connection with a merger,
+						acquisition, or sale of assets
+					</li>
+				</ul>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">5. Data Retention</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We retain your information for as long as your account is active or as needed to provide
+					the Service. You may request deletion of your account and associated data at any time.
+					Some information may be retained as required by law or for legitimate business purposes.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">6. Data Security</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We implement appropriate technical and organizational measures to protect your
+					information, including encryption, secure servers, and access controls. However, no method
+					of transmission over the Internet is 100% secure, and we cannot guarantee absolute
+					security.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">7. Your Rights</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					Depending on your location, you may have the following rights:
+				</p>
+				<ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
+					<li>Access and receive a copy of your personal data</li>
+					<li>Correct inaccurate or incomplete data</li>
+					<li>Request deletion of your data</li>
+					<li>Object to or restrict processing of your data</li>
+					<li>Data portability</li>
+					<li>Withdraw consent at any time</li>
+				</ul>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					To exercise these rights, please contact us at{" "}
+					<a href="mailto:privacy@infosections.com" class="text-primary hover:underline">
+						privacy@infosections.com
+					</a>
+					.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">8. Cookies and Tracking</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We use cookies and similar technologies to enhance your experience, analyze usage, and
+					remember your preferences. You can control cookie settings through your browser
+					preferences.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">9. Children's Privacy</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					The Service is not intended for children under 13 years of age. We do not knowingly
+					collect personal information from children under 13. If you believe we have collected such
+					information, please contact us immediately.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">10. Changes to This Policy</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We may update this Privacy Policy from time to time. We will notify you of any changes by
+					posting the new Privacy Policy on this page and updating the "Last updated" date.
+				</p>
+			</section>
+
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">11. Contact Us</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					If you have any questions about this Privacy Policy, please contact us at:
+				</p>
+				<ul class="list-none text-muted-foreground space-y-2">
+					<li>
+						Email:{" "}
+						<a href="mailto:privacy@infosections.com" class="text-primary hover:underline">
+							privacy@infosections.com
+						</a>
+					</li>
+				</ul>
+			</section>
+		</article>
+
+		<div class="mt-12 pt-8 border-t border-border">
+			<p class="text-sm text-muted-foreground">
+				See also:{" "}
+				<a href="/terms" class="text-primary hover:underline"> Terms of Service </a>
+			</p>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/(mainWebsite)/signup/+page.svelte b/frontend/src/routes/(mainWebsite)/signup/+page.svelte
index 7fd34eb..944f8ae 100644
--- a/frontend/src/routes/(mainWebsite)/signup/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/signup/+page.svelte
@@ -1,20 +1,22 @@
 <script lang="ts">
-    import SignupForm from "@/landingPage/authComponents/SignupForm.svelte";
-    import { Calendar } from "@lucide/svelte";
+	import SignupForm from "@/landingPage/authComponents/SignupForm.svelte";
+	import { Calendar } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>Signup | InfoSections</title>
+	<title>Signup | InfoSections</title>
 </svelte:head>
 
 <div class="bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10">
-    <div class="flex w-full max-w-sm flex-col gap-6">
-        <a href="/" class="flex items-center gap-2 self-center font-medium">
-            <div class="bg-ring text-primary-foreground flex size-6 items-center justify-center rounded-md">
-                <Calendar class="size-4" />
-            </div>
-            InfoSections
-        </a>
-        <SignupForm />
-    </div>
-</div>
\ No newline at end of file
+	<div class="flex w-full max-w-sm flex-col gap-6">
+		<a href="/" class="flex items-center gap-2 self-center font-medium">
+			<div
+				class="bg-ring text-primary-foreground flex size-6 items-center justify-center rounded-md"
+			>
+				<Calendar class="size-4" />
+			</div>
+			InfoSections
+		</a>
+		<SignupForm />
+	</div>
+</div>
diff --git a/frontend/src/routes/(mainWebsite)/signup/signup.remote.ts b/frontend/src/routes/(mainWebsite)/signup/signup.remote.ts
index df05587..ad44ecf 100644
--- a/frontend/src/routes/(mainWebsite)/signup/signup.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/signup/signup.remote.ts
@@ -10,149 +10,164 @@ import Stripe from "stripe";
 config();
 
 const CreateEmailPasswordSignupSchema = v.object({
-    name: v.pipe(v.string(), v.nonEmpty("Your name is required.")),
-    email: EmailSchema,
-    password: v.pipe(v.string(), v.minLength(8, "The password must be longer than 8 characters.")),
-    passwordConfirm: v.pipe(v.string(), v.minLength(8, "The password must be at least 8 characters long."))
+	name: v.pipe(v.string(), v.nonEmpty("Your name is required.")),
+	email: EmailSchema,
+	password: v.pipe(v.string(), v.minLength(8, "The password must be longer than 8 characters.")),
+	passwordConfirm: v.pipe(
+		v.string(),
+		v.minLength(8, "The password must be at least 8 characters long.")
+	)
 });
 
-export const createEmailPasswordSignup = form(CreateEmailPasswordSignupSchema, async (newSignupData, issue) => {
-    const { locals, cookies } = getRequestEvent();
-
-    if (newSignupData.password !== newSignupData.passwordConfirm) return invalid(issue.passwordConfirm("Passwords dont match."))
-
-    let existingEmailUser: RecordModel | undefined;
-    try {
-        existingEmailUser = await locals.pb.collection('users').getFirstListItem(`email="${newSignupData.email}"`, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        // All Good
-        existingEmailUser = undefined;
-    }
-
-    if (existingEmailUser) return invalid(issue.email("Email already in use."));
-
-    try {
-        const res = await locals.pb.collection("users").create({
-            name: newSignupData.name,
-            password: newSignupData.password,
-            passwordConfirm: newSignupData.passwordConfirm,
-            email: newSignupData.email,
-            accessLevel: "none"
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-
-        const stripe = new Stripe(process.env["STRIPE_PRIVATE_KEY"]!);
-        const customer = await stripe.customers.create({
-            email: newSignupData.email,
-            metadata: {
-                internal_id: res.id
-            },
-        });
-
-        const session = await stripe.checkout.sessions.create({
-            line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
-            mode: 'subscription',
-            success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-            cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-            customer: customer.id,
-        });
-
-        const freeTrialSession = await stripe.checkout.sessions.create({
-            line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
-            mode: 'subscription',
-            success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-            cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-            customer: customer.id,
-            subscription_data: {
-                trial_period_days: 14
-            }
-        });
-
-        await locals.pb.collection("users").update(res.id, {
-            customerId: customer.id,
-            freeTrialURL: freeTrialSession.url,
-            subscriptionURL: session.url
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-
-        await locals.pb.collection('users').authWithPassword(
-            newSignupData.email,
-            newSignupData.password,
-        );
-
-        const authCookieString = locals.pb.authStore.exportToCookie().split(";");
-        cookies.set("pb_auth", authCookieString[0] ? authCookieString[0] : "", {
-            path: "/"
-        })
-    } catch (err) {
-        console.log(err);
-        return error(500, "Internal Error");
-    }
-
-    redirect(303, "/dashboard");
-});
+export const createEmailPasswordSignup = form(
+	CreateEmailPasswordSignupSchema,
+	async (newSignupData, issue) => {
+		const { locals, cookies } = getRequestEvent();
+
+		if (newSignupData.password !== newSignupData.passwordConfirm)
+			return invalid(issue.passwordConfirm("Passwords dont match."));
+
+		let existingEmailUser: RecordModel | undefined;
+		try {
+			existingEmailUser = await locals.pb
+				.collection("users")
+				.getFirstListItem(`email="${newSignupData.email}"`, {
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				});
+		} catch (err) {
+			// All Good
+			existingEmailUser = undefined;
+		}
+
+		if (existingEmailUser) return invalid(issue.email("Email already in use."));
+
+		try {
+			const res = await locals.pb.collection("users").create(
+				{
+					name: newSignupData.name,
+					password: newSignupData.password,
+					passwordConfirm: newSignupData.passwordConfirm,
+					email: newSignupData.email,
+					accessLevel: "none"
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+
+			const stripe = new Stripe(process.env["STRIPE_PRIVATE_KEY"]!);
+			const customer = await stripe.customers.create({
+				email: newSignupData.email,
+				metadata: {
+					internal_id: res.id
+				}
+			});
+
+			const session = await stripe.checkout.sessions.create({
+				line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
+				mode: "subscription",
+				success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+				cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+				customer: customer.id
+			});
+
+			const freeTrialSession = await stripe.checkout.sessions.create({
+				line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
+				mode: "subscription",
+				success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+				cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+				customer: customer.id,
+				subscription_data: {
+					trial_period_days: 14
+				}
+			});
+
+			await locals.pb.collection("users").update(
+				res.id,
+				{
+					customerId: customer.id,
+					freeTrialURL: freeTrialSession.url,
+					subscriptionURL: session.url
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+
+			await locals.pb
+				.collection("users")
+				.authWithPassword(newSignupData.email, newSignupData.password);
+
+			const authCookieString = locals.pb.authStore.exportToCookie().split(";");
+			cookies.set("pb_auth", authCookieString[0] ? authCookieString[0] : "", {
+				path: "/"
+			});
+		} catch (err) {
+			console.log(err);
+			return error(500, "Internal Error");
+		}
+
+		redirect(303, "/dashboard");
+	}
+);
 
 const GoogleLoginSchema = v.object({
-    id: v.string()
+	id: v.string()
 });
 
 export const googleLoginSignup = form(GoogleLoginSchema, async (_id, issue) => {
-    const { locals, cookies, url } = getRequestEvent();
-    
-    locals.pb.authStore.clear();
-    const authMethods = await locals.pb.collection('users').listAuthMethods();
-
-    if (!authMethods.oauth2.enabled) {
-        return {
-            authProviders: '',
-        }
-    }
-
-    let redirectURL;
-
-    if (dev) {
-        if (url.origin.includes(".dev")) {
-            redirectURL = url.origin.replace("http", "https") + "/google_oath";
-        } else {
-            redirectURL = url.origin + "/google_oath";
-        }
-    } else {
-        redirectURL = process.env["VITE_WEBSITE_URL"] + "/google_oath";
-    }
-
-    let authProvider: AuthProviderInfo | undefined;
-
-    for (let i=0;i<authMethods.oauth2.providers.length;i++) {
-        const currentAuthProvider = authMethods.oauth2.providers[i];
-        if (currentAuthProvider && currentAuthProvider.name === "google") {
-            authProvider = authMethods.oauth2.providers[i];
-        }
-    }
-
-    if (!authProvider) return invalid(issue.id("Google Login is not working right now!"));
-    
-    const authProviderRedirect = `${authProvider.authURL}${redirectURL}`;
-
-    const state = authProvider.state;
-    const verifier = authProvider.codeVerifier;
-
-    cookies.set('state', state, {
-        path: "/"
-    });
-
-    cookies.set('verifier', verifier, {
-        path: "/"
-    });
-
-    return redirect(303, authProviderRedirect);
-});
\ No newline at end of file
+	const { locals, cookies, url } = getRequestEvent();
+
+	locals.pb.authStore.clear();
+	const authMethods = await locals.pb.collection("users").listAuthMethods();
+
+	if (!authMethods.oauth2.enabled) {
+		return {
+			authProviders: ""
+		};
+	}
+
+	let redirectURL;
+
+	if (dev) {
+		if (url.origin.includes(".dev")) {
+			redirectURL = url.origin.replace("http", "https") + "/google_oath";
+		} else {
+			redirectURL = url.origin + "/google_oath";
+		}
+	} else {
+		redirectURL = process.env["VITE_WEBSITE_URL"] + "/google_oath";
+	}
+
+	let authProvider: AuthProviderInfo | undefined;
+
+	for (let i = 0; i < authMethods.oauth2.providers.length; i++) {
+		const currentAuthProvider = authMethods.oauth2.providers[i];
+		if (currentAuthProvider && currentAuthProvider.name === "google") {
+			authProvider = authMethods.oauth2.providers[i];
+		}
+	}
+
+	if (!authProvider) return invalid(issue.id("Google Login is not working right now!"));
+
+	const authProviderRedirect = `${authProvider.authURL}${redirectURL}`;
+
+	const state = authProvider.state;
+	const verifier = authProvider.codeVerifier;
+
+	cookies.set("state", state, {
+		path: "/"
+	});
+
+	cookies.set("verifier", verifier, {
+		path: "/"
+	});
+
+	return redirect(303, authProviderRedirect);
+});
diff --git a/frontend/src/routes/(mainWebsite)/terms/+page.svelte b/frontend/src/routes/(mainWebsite)/terms/+page.svelte
index d70f56f..46abbe7 100644
--- a/frontend/src/routes/(mainWebsite)/terms/+page.svelte
+++ b/frontend/src/routes/(mainWebsite)/terms/+page.svelte
@@ -1,151 +1,138 @@
 <script lang="ts">
-    import { ArrowLeft } from "@lucide/svelte";
+	import { ArrowLeft } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>Terms of Service | InfoSections</title>
+	<title>Terms of Service | InfoSections</title>
 </svelte:head>
 
- <div class="min-h-screen bg-background">
-    <div class="mx-auto max-w-3xl px-6 py-12">
-    <a
-        href="/"
-        class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8 mt-5"
-    >
-        <ArrowLeft class="h-4 w-4" />
-        Back to Home
-    </a>
+<div class="min-h-screen bg-background">
+	<div class="mx-auto max-w-3xl px-6 py-12">
+		<a
+			href="/"
+			class="inline-flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors mb-8 mt-5"
+		>
+			<ArrowLeft class="h-4 w-4" />
+			Back to Home
+		</a>
 
-    <article class="prose prose-invert max-w-none">
-        <h1 class="text-3xl font-bold tracking-tight text-foreground mb-2">
-        Terms of Service
-        </h1>
-        <p class="text-muted-foreground mb-8">
-        Last updated: March 14, 2026
-        </p>
+		<article class="prose prose-invert max-w-none">
+			<h1 class="text-3xl font-bold tracking-tight text-foreground mb-2">Terms of Service</h1>
+			<p class="text-muted-foreground mb-8">Last updated: March 14, 2026</p>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            1. Acceptance of Terms
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            By accessing or using InfoSections ("the Service"), you agree to be bound by these Terms of Service. If you do not agree to these terms, please do not use the Service.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">1. Acceptance of Terms</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					By accessing or using InfoSections ("the Service"), you agree to be bound by these Terms
+					of Service. If you do not agree to these terms, please do not use the Service.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            2. Description of Service
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            InfoSections provides an event management platform that allows users to fetch events from third-party services, create event displays (calendars, lists, carousels), and manage dynamic URLs for event redirection.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">2. Description of Service</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					InfoSections provides an event management platform that allows users to fetch events from
+					third-party services, create event displays (calendars, lists, carousels), and manage
+					dynamic URLs for event redirection.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            3. User Accounts
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            You are responsible for maintaining the confidentiality of your account credentials and for all activities that occur under your account. You agree to notify us immediately of any unauthorized use of your account.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">3. User Accounts</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					You are responsible for maintaining the confidentiality of your account credentials and
+					for all activities that occur under your account. You agree to notify us immediately of
+					any unauthorized use of your account.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            4. Third-Party Integrations
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            The Service integrates with third-party services such as Planning Center, Breeze ChMS, Google Calendar, and others. Your use of these integrations is subject to the respective third-party terms of service. We are not responsible for the availability, accuracy, or content provided by third-party services.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">4. Third-Party Integrations</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					The Service integrates with third-party services such as Planning Center, Breeze ChMS,
+					Google Calendar, and others. Your use of these integrations is subject to the respective
+					third-party terms of service. We are not responsible for the availability, accuracy, or
+					content provided by third-party services.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            5. Acceptable Use
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            You agree not to use the Service to:
-        </p>
-        <ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
-            <li>Violate any applicable laws or regulations</li>
-            <li>Infringe on the rights of others</li>
-            <li>Distribute malicious software or harmful content</li>
-            <li>Attempt to gain unauthorized access to the Service or its systems</li>
-            <li>Interfere with or disrupt the Service's operation</li>
-        </ul>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">5. Acceptable Use</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					You agree not to use the Service to:
+				</p>
+				<ul class="list-disc list-inside text-muted-foreground space-y-2 mb-4">
+					<li>Violate any applicable laws or regulations</li>
+					<li>Infringe on the rights of others</li>
+					<li>Distribute malicious software or harmful content</li>
+					<li>Attempt to gain unauthorized access to the Service or its systems</li>
+					<li>Interfere with or disrupt the Service's operation</li>
+				</ul>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            6. Intellectual Property
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            The Service and its original content, features, and functionality are owned by InfoSections and are protected by international copyright, trademark, and other intellectual property laws.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">6. Intellectual Property</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					The Service and its original content, features, and functionality are owned by
+					InfoSections and are protected by international copyright, trademark, and other
+					intellectual property laws.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            7. Data and Privacy
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            Your use of the Service is also governed by our{" "}
-            <a href="/privacy" class="text-primary hover:underline">
-            Privacy Policy
-            </a>
-            . By using the Service, you consent to the collection and use of information as described in the Privacy Policy.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">7. Data and Privacy</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					Your use of the Service is also governed by our{" "}
+					<a href="/privacy" class="text-primary hover:underline"> Privacy Policy </a>
+					. By using the Service, you consent to the collection and use of information as described in
+					the Privacy Policy.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            8. Limitation of Liability
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            To the maximum extent permitted by law, InfoSections shall not be liable for any indirect, incidental, special, consequential, or punitive damages, including loss of profits, data, or other intangible losses resulting from your use of the Service.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">8. Limitation of Liability</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					To the maximum extent permitted by law, InfoSections shall not be liable for any indirect,
+					incidental, special, consequential, or punitive damages, including loss of profits, data,
+					or other intangible losses resulting from your use of the Service.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            9. Termination
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We reserve the right to terminate or suspend your account and access to the Service at our sole discretion, without prior notice, for conduct that we believe violates these Terms or is harmful to other users, us, or third parties.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">9. Termination</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We reserve the right to terminate or suspend your account and access to the Service at our
+					sole discretion, without prior notice, for conduct that we believe violates these Terms or
+					is harmful to other users, us, or third parties.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            10. Changes to Terms
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            We reserve the right to modify these Terms at any time. We will notify users of significant changes by posting a notice on the Service. Your continued use of the Service after such modifications constitutes acceptance of the updated Terms.
-        </p>
-        </section>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">10. Changes to Terms</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					We reserve the right to modify these Terms at any time. We will notify users of
+					significant changes by posting a notice on the Service. Your continued use of the Service
+					after such modifications constitutes acceptance of the updated Terms.
+				</p>
+			</section>
 
-        <section class="mb-8">
-        <h2 class="text-xl font-semibold text-foreground mb-4">
-            11. Contact Information
-        </h2>
-        <p class="text-muted-foreground leading-relaxed mb-4">
-            If you have any questions about these Terms, please contact us at{" "}
-            <a href="mailto:support@infosections.com" class="text-primary hover:underline">
-            support@infosections.com
-            </a>
-            .
-        </p>
-        </section>
-    </article>
+			<section class="mb-8">
+				<h2 class="text-xl font-semibold text-foreground mb-4">11. Contact Information</h2>
+				<p class="text-muted-foreground leading-relaxed mb-4">
+					If you have any questions about these Terms, please contact us at{" "}
+					<a href="mailto:support@infosections.com" class="text-primary hover:underline">
+						support@infosections.com
+					</a>
+					.
+				</p>
+			</section>
+		</article>
 
-    <div class="mt-12 pt-8 border-t border-border">
-        <p class="text-sm text-muted-foreground">
-        See also:{" "}
-        <a href="/privacy" class="text-primary hover:underline">
-            Privacy Policy
-        </a>
-        </p>
-    </div>
-    </div>
-</div>
\ No newline at end of file
+		<div class="mt-12 pt-8 border-t border-border">
+			<p class="text-sm text-muted-foreground">
+				See also:{" "}
+				<a href="/privacy" class="text-primary hover:underline"> Privacy Policy </a>
+			</p>
+		</div>
+	</div>
+</div>
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
index d2bef69..39fb9cc 100644
--- a/frontend/src/routes/+layout.svelte
+++ b/frontend/src/routes/+layout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { Toaster } from "@/components/ui/sonner";
+	import { Toaster } from "@/components/ui/sonner";
 	import favicon from "../lib/assets/logo.png";
 	import "./layout.css";
-	
+
 	let { children } = $props();
 </script>
 
diff --git a/frontend/src/routes/api/go/[slug]/+server.ts b/frontend/src/routes/api/go/[slug]/+server.ts
index caba8d9..e4b9792 100644
--- a/frontend/src/routes/api/go/[slug]/+server.ts
+++ b/frontend/src/routes/api/go/[slug]/+server.ts
@@ -7,111 +7,117 @@ config();
 
 //This function records the ref data after we redirect the user as to not waste their time.
 async function recordRefHit(url: URL, record: DynamicURLModel, locals: App.Locals) {
-    setTimeout(async () => {
-        let ref = url.searchParams.get("ref");
-        if (!ref || ref.length === 0) return;
-
-        let newRef: URLRefHits[] = [];
-        let refFound = false;
-
-        for (let i=0;i<record.refs.length;i++) {
-            let currentRef = record.refs[i];
-            if (!currentRef) continue;
-
-            if (ref !== currentRef.name) {
-                newRef.push(currentRef);
-            } else {
-                newRef.push({
-                    name: ref,
-                    hits: currentRef.hits + 1
-                });
-                refFound = true;
-            }
-
-        }
-
-        if (!refFound) {
-            newRef.push({
-                name: ref,
-                hits: 1
-            });
-        }
-
-        try {
-            await locals.pb.collection('dynamic_url').update(record.id, {
-                refs: newRef,
-            }, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-        } catch (err) {
-            console.log("Failed to update ref for dynamic url: ", err);
-        }
-    }, 1);
+	setTimeout(async () => {
+		let ref = url.searchParams.get("ref");
+		if (!ref || ref.length === 0) return;
+
+		let newRef: URLRefHits[] = [];
+		let refFound = false;
+
+		for (let i = 0; i < record.refs.length; i++) {
+			let currentRef = record.refs[i];
+			if (!currentRef) continue;
+
+			if (ref !== currentRef.name) {
+				newRef.push(currentRef);
+			} else {
+				newRef.push({
+					name: ref,
+					hits: currentRef.hits + 1
+				});
+				refFound = true;
+			}
+		}
+
+		if (!refFound) {
+			newRef.push({
+				name: ref,
+				hits: 1
+			});
+		}
+
+		try {
+			await locals.pb.collection("dynamic_url").update(
+				record.id,
+				{
+					refs: newRef
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+		} catch (err) {
+			console.log("Failed to update ref for dynamic url: ", err);
+		}
+	}, 1);
 }
 
 export async function GET({ params, locals, url }) {
-    const goID = params.slug;
-
-    let record: DynamicURLModel;
-    try {
-        record = await locals.pb.collection('dynamic_url').getOne(goID, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (_err) {
-        return error(404, "Dynamic Link not found.");
-    }
-
-    // The url has been disabled by the owner.
-    if (record.disableURL) {
-        return error(404, "Dynamic Link not found.");
-    }
-
-    let linkToRedirect = record.defaultRedirectTo;
-
-    // If the dynamic_url owner enabled the override switch, we dont need to worry about anything else and just return the override URL
-    if (record.enableOverrideRedirect) {
-        linkToRedirect = record.overrideRedirectTo;
-    } else if (record.enableWeekSheet) {
-        let today = Temporal.Now.zonedDateTimeISO(record.timeZone);
-    
-        const todaysTimeSheet = record.weekSheet[today.dayOfWeek - 1];
-
-        if (todaysTimeSheet) {
-            const currentMinute = today.hour * 60 + today.minute;
-        
-            let currentTimeSheet: WeekSheetTimeSlot | null = null;
-        
-            for (let i=0;i<todaysTimeSheet.length;i++) {
-                let thisTimeSheet = todaysTimeSheet[i];
-                if (!thisTimeSheet) continue;
-
-                if (thisTimeSheet.startMinute <= currentMinute && currentMinute <= thisTimeSheet.endMinute) {
-                    currentTimeSheet = thisTimeSheet;
-                }
-            }
-        
-            if (currentTimeSheet) {
-                linkToRedirect = currentTimeSheet.link;
-            }
-        }
-    }
-
-    recordRefHit(url, record, locals);
-    // return json({
-    //     linkToRedirect,
-    // });
-    
-    return new Response(undefined, {
-        status: 200,
-        
-        headers: {
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Expose-Headers": "X-Redirect-To",
-            "X-Redirect-To": linkToRedirect
-        }
-    });
-}
\ No newline at end of file
+	const goID = params.slug;
+
+	let record: DynamicURLModel;
+	try {
+		record = await locals.pb.collection("dynamic_url").getOne(goID, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (_err) {
+		return error(404, "Dynamic Link not found.");
+	}
+
+	// The url has been disabled by the owner.
+	if (record.disableURL) {
+		return error(404, "Dynamic Link not found.");
+	}
+
+	let linkToRedirect = record.defaultRedirectTo;
+
+	// If the dynamic_url owner enabled the override switch, we dont need to worry about anything else and just return the override URL
+	if (record.enableOverrideRedirect) {
+		linkToRedirect = record.overrideRedirectTo;
+	} else if (record.enableWeekSheet) {
+		let today = Temporal.Now.zonedDateTimeISO(record.timeZone);
+
+		const todaysTimeSheet = record.weekSheet[today.dayOfWeek - 1];
+
+		if (todaysTimeSheet) {
+			const currentMinute = today.hour * 60 + today.minute;
+
+			let currentTimeSheet: WeekSheetTimeSlot | null = null;
+
+			for (let i = 0; i < todaysTimeSheet.length; i++) {
+				let thisTimeSheet = todaysTimeSheet[i];
+				if (!thisTimeSheet) continue;
+
+				if (
+					thisTimeSheet.startMinute <= currentMinute &&
+					currentMinute <= thisTimeSheet.endMinute
+				) {
+					currentTimeSheet = thisTimeSheet;
+				}
+			}
+
+			if (currentTimeSheet) {
+				linkToRedirect = currentTimeSheet.link;
+			}
+		}
+	}
+
+	recordRefHit(url, record, locals);
+	// return json({
+	//     linkToRedirect,
+	// });
+
+	return new Response(undefined, {
+		status: 200,
+
+		headers: {
+			"Access-Control-Allow-Origin": "*",
+			"Access-Control-Expose-Headers": "X-Redirect-To",
+			"X-Redirect-To": linkToRedirect
+		}
+	});
+}
diff --git a/frontend/src/routes/api/webhook/stripe/+server.ts b/frontend/src/routes/api/webhook/stripe/+server.ts
index 6c0e0cc..875998b 100644
--- a/frontend/src/routes/api/webhook/stripe/+server.ts
+++ b/frontend/src/routes/api/webhook/stripe/+server.ts
@@ -6,87 +6,99 @@ import Stripe from "stripe";
 config();
 
 export async function POST({ request, locals }) {
-    console.log("[server] Someone just subscribed to a plan.");
-    if (!process.env["STRIPE_PRIVATE_KEY"] || !process.env["STRIPE_WEBHOOK_SECRET"]) {
-        console.error("STRIPE_PRIVATE_KEY or STRIPE_WEBHOOK_SECRET env var is not set.");
-        return json({msg: "not ok"}, { status: 500 });
-    }
-
-    const stripe = new Stripe(process.env["STRIPE_PRIVATE_KEY"]);
-    const webhookSecret = process.env["STRIPE_WEBHOOK_SECRET"];
-    const body = await request.text();
-    const signature = request.headers.get('stripe-signature') || "";
-
-    let event;
-    try {
-        event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
-    } catch (err) {
-        console.error(`Webhook signature verification failed. ${err}`);
-        return json({ error: err }, { status: 400 });
-    }
-
-    const data = event.data;
-    const eventType = event.type;
-
-    try {
-        switch (eventType) {
-            case "checkout.session.completed":
-            case "customer.subscription.updated": {
-                //@ts-ignore
-                const session = await stripe.checkout.sessions.retrieve(data.object.id, {
-                    expand: ['line_items']
-                });
-
-                const customerId = session.customer;
-                const priceId = process.env["STRIPE_PRICE_ID"];
-
-                const user = await locals.pb.collection('users').getFirstListItem(`customerId="${customerId}"`, {
-                    headers: {
-                        "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                    }
-                });
-
-                await locals.pb.collection('users').update(user.id, {
-                    priceId,
-                    accessLevel: "standard",
-                    customerId
-                }, {
-                    headers: {
-                        "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                    }
-                });
-
-                break
-            }
-        case "customer.subscription.deleted": {
-            //@ts-ignore
-            const subscription = await stripe.subscriptions.retrieve(data.object.id);
-
-            const user = await locals.pb.collection('users').getFirstListItem(`customerId="${subscription.customer}"`, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            }) as UserModel;
-
-            console.log(user.name, "is deleting their subscription.");
-
-            await locals.pb.collection('users').update(user.id, {
-                accessLevel: "none",
-                priceId: ""
-            }, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-
-            break
-        }
-        }
-    } catch (err) {
-        console.log("[server] Error in the user subscription endpoint.", err);
-
-        return error(500, JSON.stringify(err));
-    }
-
-    return json({msg: "ok"});
-}
\ No newline at end of file
+	console.log("[server] Someone just subscribed to a plan.");
+	if (!process.env["STRIPE_PRIVATE_KEY"] || !process.env["STRIPE_WEBHOOK_SECRET"]) {
+		console.error("STRIPE_PRIVATE_KEY or STRIPE_WEBHOOK_SECRET env var is not set.");
+		return json({ msg: "not ok" }, { status: 500 });
+	}
+
+	const stripe = new Stripe(process.env["STRIPE_PRIVATE_KEY"]);
+	const webhookSecret = process.env["STRIPE_WEBHOOK_SECRET"];
+	const body = await request.text();
+	const signature = request.headers.get("stripe-signature") || "";
+
+	let event;
+	try {
+		event = stripe.webhooks.constructEvent(body, signature, webhookSecret);
+	} catch (err) {
+		console.error(`Webhook signature verification failed. ${err}`);
+		return json({ error: err }, { status: 400 });
+	}
+
+	const data = event.data;
+	const eventType = event.type;
+
+	try {
+		switch (eventType) {
+			case "checkout.session.completed":
+			case "customer.subscription.updated": {
+				//@ts-ignore
+				const session = await stripe.checkout.sessions.retrieve(data.object.id, {
+					expand: ["line_items"]
+				});
+
+				const customerId = session.customer;
+				const priceId = process.env["STRIPE_PRICE_ID"];
+
+				const user = await locals.pb
+					.collection("users")
+					.getFirstListItem(`customerId="${customerId}"`, {
+						headers: {
+							Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+						}
+					});
+
+				await locals.pb.collection("users").update(
+					user.id,
+					{
+						priceId,
+						accessLevel: "standard",
+						customerId
+					},
+					{
+						headers: {
+							Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+						}
+					}
+				);
+
+				break;
+			}
+			case "customer.subscription.deleted": {
+				//@ts-ignore
+				const subscription = await stripe.subscriptions.retrieve(data.object.id);
+
+				const user = (await locals.pb
+					.collection("users")
+					.getFirstListItem(`customerId="${subscription.customer}"`, {
+						headers: {
+							Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+						}
+					})) as UserModel;
+
+				console.log(user.name, "is deleting their subscription.");
+
+				await locals.pb.collection("users").update(
+					user.id,
+					{
+						accessLevel: "none",
+						priceId: ""
+					},
+					{
+						headers: {
+							Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+						}
+					}
+				);
+
+				break;
+			}
+		}
+	} catch (err) {
+		console.log("[server] Error in the user subscription endpoint.", err);
+
+		return error(500, JSON.stringify(err));
+	}
+
+	return json({ msg: "ok" });
+}
diff --git a/frontend/src/routes/cal/[slug]/+error.svelte b/frontend/src/routes/cal/[slug]/+error.svelte
index 59b4d31..22c5ce6 100644
--- a/frontend/src/routes/cal/[slug]/+error.svelte
+++ b/frontend/src/routes/cal/[slug]/+error.svelte
@@ -1,38 +1,52 @@
 <script>
-    import { page } from "$app/state";
-    import { AlertCircle, RefreshCw } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { AlertCircle, RefreshCw } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>{page.status} {page.error?.message}</title>
+	<title>{page.status} {page.error?.message}</title>
 </svelte:head>
 
 <main class="dark min-h-screen w-full flex items-center justify-center bg-background" style="">
-    <div class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center">
-        <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50">
-            <AlertCircle class="h-10 w-10 text-red-500" />
-        </div>
+	<div
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center"
+	>
+		<div
+			class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50"
+		>
+			<AlertCircle class="h-10 w-10 text-red-500" />
+		</div>
 
-        <h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
+		<h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
 
-        <p class="dark mb-8 max-w-md text-gray-500">
-            {#if page.status === 404}
-                We couldn't find the calendar you're looking for. This might be due to an invalid link or the calendar may not exist.
-            {:else}
-                An error has occured. Please wait and try again. If the error keeps happening, contact our support team.
-            {/if}
-        </p>
+		<p class="dark mb-8 max-w-md text-gray-500">
+			{#if page.status === 404}
+				We couldn't find the calendar you're looking for. This might be due to an invalid link or
+				the calendar may not exist.
+			{:else}
+				An error has occured. Please wait and try again. If the error keeps happening, contact our
+				support team.
+			{/if}
+		</p>
 
-            <a
-                data-sveltekit-preload-data="off"
-                href={page.url.toString()}
-                class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
-                >
-                <RefreshCw class="h-4 w-4" />
-                Try Again
-            </a>
+		<a
+			data-sveltekit-preload-data="off"
+			href={page.url.toString()}
+			class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
+		>
+			<RefreshCw class="h-4 w-4" />
+			Try Again
+		</a>
 
-        <div class="dark mt-8 text-sm text-gray-500">Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a></div>
-        <div class="dark mt-1 text-sm text-gray-500"><a href="https://uptime.stephengruzin.dev/status/infosections" target="_blank" class="underline">Status Page</a></div>
-    </div>
-</main>
\ No newline at end of file
+		<div class="dark mt-8 text-sm text-gray-500">
+			Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a>
+		</div>
+		<div class="dark mt-1 text-sm text-gray-500">
+			<a
+				href="https://uptime.stephengruzin.dev/status/infosections"
+				target="_blank"
+				class="underline">Status Page</a
+			>
+		</div>
+	</div>
+</main>
diff --git a/frontend/src/routes/cal/[slug]/+layout.svelte b/frontend/src/routes/cal/[slug]/+layout.svelte
index 28b982e..914b4c5 100644
--- a/frontend/src/routes/cal/[slug]/+layout.svelte
+++ b/frontend/src/routes/cal/[slug]/+layout.svelte
@@ -2,4 +2,4 @@
 	let { children } = $props();
 </script>
 
-{@render children?.()}
\ No newline at end of file
+{@render children?.()}
diff --git a/frontend/src/routes/cal/[slug]/+page.server.ts b/frontend/src/routes/cal/[slug]/+page.server.ts
index 81c85b4..db16a66 100644
--- a/frontend/src/routes/cal/[slug]/+page.server.ts
+++ b/frontend/src/routes/cal/[slug]/+page.server.ts
@@ -5,42 +5,48 @@ import { config } from "dotenv";
 config();
 
 export async function load({ params, locals, cookies }) {
-    let calendar: CalendarDBModel;
-    try {
-        calendar = await locals.pb.collection('calendars').getFirstListItem(`publicId="${params.slug}"`, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Calendar not found.", err);
-        return error(404, "Calendar Not Found");
-    }
+	let calendar: CalendarDBModel;
+	try {
+		calendar = await locals.pb
+			.collection("calendars")
+			.getFirstListItem(`publicId="${params.slug}"`, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+	} catch (err) {
+		console.log("Calendar not found.", err);
+		return error(404, "Calendar Not Found");
+	}
 
-    if (calendar.password && calendar.passwordEnabled) {
-        if (cookies.get(`cal-${params.slug}`) !== calendar.password) {
-            return redirect(307, `/cal/${params.slug}/login`);
-        }
-    }
+	if (calendar.password && calendar.passwordEnabled) {
+		if (cookies.get(`cal-${params.slug}`) !== calendar.password) {
+			return redirect(307, `/cal/${params.slug}/login`);
+		}
+	}
 
-    try {
-        await locals.pb.collection('calendars').update(calendar.id, { 
-            visits: calendar.visits + 1
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to update the visits", err);
-        return error(500);
-    }
+	try {
+		await locals.pb.collection("calendars").update(
+			calendar.id,
+			{
+				visits: calendar.visits + 1
+			},
+			{
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			}
+		);
+	} catch (err) {
+		console.log("Failed to update the visits", err);
+		return error(500);
+	}
 
-    return {
-        id: calendar.id,
-        name: calendar.name,
-        logoLink: locals.pb.files.getURL(calendar, calendar.logo.toString()),
-        displaySettings: calendar.displaySettings,
-        filters: calendar.filters
-    }
-}
\ No newline at end of file
+	return {
+		id: calendar.id,
+		name: calendar.name,
+		logoLink: locals.pb.files.getURL(calendar, calendar.logo.toString()),
+		displaySettings: calendar.displaySettings,
+		filters: calendar.filters
+	};
+}
diff --git a/frontend/src/routes/cal/[slug]/eventFetch.remote.ts b/frontend/src/routes/cal/[slug]/eventFetch.remote.ts
index f8d0d7c..9f7466f 100644
--- a/frontend/src/routes/cal/[slug]/eventFetch.remote.ts
+++ b/frontend/src/routes/cal/[slug]/eventFetch.remote.ts
@@ -1,12 +1,12 @@
 import {
-    eventResourceAllowListToFilterString,
-    eventResourceBlockListToFilterString,
-    resourcesExpandRequirementsPublic,
-    eventTagAllowListToFilterString,
-    eventTagBlockListToFilterString,
-    tagsExpandRequirementsPublic,
-    eventFieldRequirementsPublic,
-    type EventDBModelExpanded,
+	eventResourceAllowListToFilterString,
+	eventResourceBlockListToFilterString,
+	resourcesExpandRequirementsPublic,
+	eventTagAllowListToFilterString,
+	eventTagBlockListToFilterString,
+	tagsExpandRequirementsPublic,
+	eventFieldRequirementsPublic,
+	type EventDBModelExpanded
 } from "@/event.utils";
 import { getRequestEvent, query } from "$app/server";
 import type { CalendarDBModel } from "@/cal.utils";
@@ -17,78 +17,82 @@ import * as v from "valibot";
 config();
 
 export const getEventsForCalendar = query(v.string(), async (calId) => {
-    const { locals, cookies } = getRequestEvent();
-    let events: EventDBModelExpanded[] = [];
-    let calendar: CalendarDBModel;
+	const { locals, cookies } = getRequestEvent();
+	let events: EventDBModelExpanded[] = [];
+	let calendar: CalendarDBModel;
 
-    try {
-        calendar = await locals.pb.collection('calendars').getOne(calId, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Calendar not found.", err);
-        return events;
-    }
+	try {
+		calendar = await locals.pb.collection("calendars").getOne(calId, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Calendar not found.", err);
+		return events;
+	}
 
-    if (calendar.password && calendar.passwordEnabled) {
-        if (cookies.get(`cal-${calId}`) !== calendar.password) {
-            return events;
-        }
-    }
+	if (calendar.password && calendar.passwordEnabled) {
+		if (cookies.get(`cal-${calId}`) !== calendar.password) {
+			return events;
+		}
+	}
 
-    let today = Temporal.Now.zonedDateTimeISO().startOfDay();
-    let monthAgo = today.subtract({ days: today.day + 7 });
-    let monthAgoStr = `${monthAgo.year}-${(monthAgo.month).toString().padStart(2, '0')}-${(monthAgo.day).toString().padStart(2, '0')}`;
-    
-    try {
-        // let filter = `startTime >= "${seventyTwoHoursAgoStr}" && startTime <= "${seventyTwoHoursLaterStr}"`;
-        let filter = `startTime >= "${monthAgoStr}"`;
+	let today = Temporal.Now.zonedDateTimeISO().startOfDay();
+	let monthAgo = today.subtract({ days: today.day + 7 });
+	let monthAgoStr = `${monthAgo.year}-${monthAgo.month.toString().padStart(2, "0")}-${monthAgo.day.toString().padStart(2, "0")}`;
 
+	try {
+		// let filter = `startTime >= "${seventyTwoHoursAgoStr}" && startTime <= "${seventyTwoHoursLaterStr}"`;
+		let filter = `startTime >= "${monthAgoStr}"`;
 
-        // This filter shows all events for the testing dev cal.
-        if (calendar.id !== "sdinfaplylaesst") {
-            filter += ` && owner="${calendar.owner}"`;
-        }
+		// This filter shows all events for the testing dev cal.
+		if (calendar.id !== "sdinfaplylaesst") {
+			filter += ` && owner="${calendar.owner}"`;
+		}
 
-        if (calendar.filters.onlyShowFeatured) {
-            filter += " && featured=true"
-        }
+		if (calendar.filters.onlyShowFeatured) {
+			filter += " && featured=true";
+		}
 
-        if (calendar.filters.hideUnpublished) {
-            filter += " && visibleInChurchCenter=true"
-        }
+		if (calendar.filters.hideUnpublished) {
+			filter += " && visibleInChurchCenter=true";
+		}
 
-        if (calendar.filters.enableResourceFiltering) {
-            if (calendar.filters.resourceFilterType === "allow") {
-                filter += eventResourceAllowListToFilterString(calendar.filters.allowResources);
-            } else {
-                filter += eventResourceBlockListToFilterString(calendar.filters.blockResources);
-            }
-        }
+		if (calendar.filters.enableResourceFiltering) {
+			if (calendar.filters.resourceFilterType === "allow") {
+				filter += eventResourceAllowListToFilterString(calendar.filters.allowResources);
+			} else {
+				filter += eventResourceBlockListToFilterString(calendar.filters.blockResources);
+			}
+		}
 
-        if (calendar.filters.enableTagFiltering) {
-            if (calendar.filters.tagFilterType === "allow") {
-                filter += eventTagAllowListToFilterString(calendar.filters.allowTags);
-            } else {
-                filter += eventTagBlockListToFilterString(calendar.filters.blockTags);
-            }
-        }
+		if (calendar.filters.enableTagFiltering) {
+			if (calendar.filters.tagFilterType === "allow") {
+				filter += eventTagAllowListToFilterString(calendar.filters.allowTags);
+			} else {
+				filter += eventTagBlockListToFilterString(calendar.filters.blockTags);
+			}
+		}
 
-        events = await locals.pb.collection('events').getFullList({
-            filter,
-            expand: "tags,resources",
-            sort: 'startTime',
-            fields: eventFieldRequirementsPublic + "," + tagsExpandRequirementsPublic + "," + resourcesExpandRequirementsPublic,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Calendar not found.");
-        return events;
-    }
-    
-    return events;
-});
\ No newline at end of file
+		events = await locals.pb.collection("events").getFullList({
+			filter,
+			expand: "tags,resources",
+			sort: "startTime",
+			fields:
+				eventFieldRequirementsPublic +
+				"," +
+				tagsExpandRequirementsPublic +
+				"," +
+				resourcesExpandRequirementsPublic,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Calendar not found.");
+		return events;
+	}
+
+	return events;
+});
diff --git a/frontend/src/routes/cal/[slug]/login/+page.server.ts b/frontend/src/routes/cal/[slug]/login/+page.server.ts
index a0b41aa..ceb7da1 100644
--- a/frontend/src/routes/cal/[slug]/login/+page.server.ts
+++ b/frontend/src/routes/cal/[slug]/login/+page.server.ts
@@ -1,58 +1,62 @@
-import { error, fail, redirect } from '@sveltejs/kit';
-import type { CalendarDBModel } from '@/cal.utils.js';
+import { error, fail, redirect } from "@sveltejs/kit";
+import type { CalendarDBModel } from "@/cal.utils.js";
 import { config } from "dotenv";
 
 config();
 
 export async function load({ locals, params }) {
-    let calendar: CalendarDBModel;
-    try {
-        calendar = await locals.pb.collection('calendars').getFirstListItem(`publicId="${params.slug}"`, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log(`[server] Calendar not found: '${params.slug}'.`);
-        return error(404, "Calendar doesn't exist.");
-    }
-
-    if (!calendar.password) {
-        return redirect(307, `/cal/${params.slug}`);
-    }
-
-    return {
-        name: calendar.name,
-        id: calendar.id,
-        logo: locals.pb.files.getURL(calendar, calendar.logo as string),
-        customMessage: calendar.passwordScreenMessage
-    }
+	let calendar: CalendarDBModel;
+	try {
+		calendar = await locals.pb
+			.collection("calendars")
+			.getFirstListItem(`publicId="${params.slug}"`, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+	} catch (err) {
+		console.log(`[server] Calendar not found: '${params.slug}'.`);
+		return error(404, "Calendar doesn't exist.");
+	}
+
+	if (!calendar.password) {
+		return redirect(307, `/cal/${params.slug}`);
+	}
+
+	return {
+		name: calendar.name,
+		id: calendar.id,
+		logo: locals.pb.files.getURL(calendar, calendar.logo as string),
+		customMessage: calendar.passwordScreenMessage
+	};
 }
 
 export const actions = {
-    default: async ({ cookies, params, request, locals }) => {
-        const data = await request.formData();
-
-        let calendar: CalendarDBModel;
-        try {
-            calendar = await locals.pb.collection('calendars').getFirstListItem(`publicId="${params.slug}"`, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-        } catch (err) {
-            console.log("Calendar not found.");
-            return error(404, "Calendar doesn't exist.");
-        }
-
-        if (calendar.password !== data.get("password")) {
-            return fail(401, { message: "Invalid Password!" });
-        }
-
-        cookies.set(`cal-${params.slug}`, calendar.password, {
-            path: "/"
-        });
-
-        return redirect(303, `/cal/${params.slug}`);
-    }
-};
\ No newline at end of file
+	default: async ({ cookies, params, request, locals }) => {
+		const data = await request.formData();
+
+		let calendar: CalendarDBModel;
+		try {
+			calendar = await locals.pb
+				.collection("calendars")
+				.getFirstListItem(`publicId="${params.slug}"`, {
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				});
+		} catch (err) {
+			console.log("Calendar not found.");
+			return error(404, "Calendar doesn't exist.");
+		}
+
+		if (calendar.password !== data.get("password")) {
+			return fail(401, { message: "Invalid Password!" });
+		}
+
+		cookies.set(`cal-${params.slug}`, calendar.password, {
+			path: "/"
+		});
+
+		return redirect(303, `/cal/${params.slug}`);
+	}
+};
diff --git a/frontend/src/routes/cal/[slug]/login/+page.svelte b/frontend/src/routes/cal/[slug]/login/+page.svelte
index fa016a1..8b99e55 100644
--- a/frontend/src/routes/cal/[slug]/login/+page.svelte
+++ b/frontend/src/routes/cal/[slug]/login/+page.svelte
@@ -1,75 +1,90 @@
 <script lang="ts">
-    import * as Avatar from "$lib/components/ui/avatar/index.js";
-    import { Button } from "$lib/components/ui/button/index.js";
-    import { Input } from "$lib/components/ui/input/index.js";
-    import { Label } from "$lib/components/ui/label/index.js";
-    import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
-    import * as Card from "$lib/components/ui/card/index.js";
-    import { toast } from "svelte-sonner";
-    import { enhance } from "$app/forms";
-    import { onDestroy } from "svelte";
+	import * as Avatar from "$lib/components/ui/avatar/index.js";
+	import { Button } from "$lib/components/ui/button/index.js";
+	import { Input } from "$lib/components/ui/input/index.js";
+	import { Label } from "$lib/components/ui/label/index.js";
+	import NoCalendarAvatar from "@/NoCalendarAvatar.svelte";
+	import * as Card from "$lib/components/ui/card/index.js";
+	import { toast } from "svelte-sonner";
+	import { enhance } from "$app/forms";
+	import { onDestroy } from "svelte";
 
-    let { data, form } = $props();
+	let { data, form } = $props();
 
-    let updatingToast: null | string | number = $state("");
+	let updatingToast: null | string | number = $state("");
 
-    function dismissToast() {
-        if (updatingToast !== null) {
-            toast.dismiss(updatingToast);
-            updatingToast = null;
-        }
-    }
+	function dismissToast() {
+		if (updatingToast !== null) {
+			toast.dismiss(updatingToast);
+			updatingToast = null;
+		}
+	}
 
-    $effect(() => {
-        if (form?.message) {
-            toast.error(form.message);
-            dismissToast();
-        }
-    });
+	$effect(() => {
+		if (form?.message) {
+			toast.error(form.message);
+			dismissToast();
+		}
+	});
 
-    onDestroy(() => {
-        dismissToast();
-    });
+	onDestroy(() => {
+		dismissToast();
+	});
 </script>
 
 <svelte:head>
-    <title>Login | {data.name}</title>
-    <link rel="shortcut icon" href={data.logo} type="image/x-icon">
+	<title>Login | {data.name}</title>
+	<link rel="shortcut icon" href={data.logo} type="image/x-icon" />
 </svelte:head>
 
-<main class="w-full min-h-screen flex items-center justify-center" style="background-color: #f9f9f5;">
-    <Card.Root style="width:350px;">
-        <Card.Header>
-            <Card.Title>{data.name}</Card.Title>
-            <Card.Description>{#if data.customMessage.length > 0}{data.customMessage}{:else}This calendar is restricted.{/if}</Card.Description>
-        </Card.Header>
-        <Card.Content>
-            <form method="POST" use:enhance={() => {
-                updatingToast = toast.loading("Logging In...");
-                return async ({ update }) => {
-                    if (updatingToast) {
-                        dismissToast();
-                    }
-                    update({ reset: true });
-                };
-              }}>
-                <div class="grid w-full items-center gap-4">
-                    <div class="w-full flex justify-center">
-                        <Avatar.Root class="h-60 w-60 border-gray border-2">
-                            <Avatar.Image src={data.logo} alt="Avatar" />
-                            <Avatar.Fallback><NoCalendarAvatar /></Avatar.Fallback>
-                        </Avatar.Root>
-                    </div>
-                    <div class="flex flex-col space-y-1.5">
-                        <Label for="password">Password</Label>
-                        <Input autofocus  id="password" class="bg-(#f9f9f5)" type="password" name="password" placeholder="Password" />
-                    </div>
-                    <div class="flex justify-between">
-                        <Button class="bg-(#f9f9f5)" href="/" variant="outline">Cancel</Button>
-                        <Button type="submit">Login</Button>
-                    </div>
-                </div>
-            </form>
-        </Card.Content>
-    </Card.Root>
-</main>
\ No newline at end of file
+<main
+	class="w-full min-h-screen flex items-center justify-center"
+	style="background-color: #f9f9f5;"
+>
+	<Card.Root style="width:350px;">
+		<Card.Header>
+			<Card.Title>{data.name}</Card.Title>
+			<Card.Description
+				>{#if data.customMessage.length > 0}{data.customMessage}{:else}This calendar is restricted.{/if}</Card.Description
+			>
+		</Card.Header>
+		<Card.Content>
+			<form
+				method="POST"
+				use:enhance={() => {
+					updatingToast = toast.loading("Logging In...");
+					return async ({ update }) => {
+						if (updatingToast) {
+							dismissToast();
+						}
+						update({ reset: true });
+					};
+				}}
+			>
+				<div class="grid w-full items-center gap-4">
+					<div class="w-full flex justify-center">
+						<Avatar.Root class="h-60 w-60 border-gray border-2">
+							<Avatar.Image src={data.logo} alt="Avatar" />
+							<Avatar.Fallback><NoCalendarAvatar /></Avatar.Fallback>
+						</Avatar.Root>
+					</div>
+					<div class="flex flex-col space-y-1.5">
+						<Label for="password">Password</Label>
+						<Input
+							autofocus
+							id="password"
+							class="bg-(#f9f9f5)"
+							type="password"
+							name="password"
+							placeholder="Password"
+						/>
+					</div>
+					<div class="flex justify-between">
+						<Button class="bg-(#f9f9f5)" href="/" variant="outline">Cancel</Button>
+						<Button type="submit">Login</Button>
+					</div>
+				</div>
+			</form>
+		</Card.Content>
+	</Card.Root>
+</main>
diff --git a/frontend/src/routes/cal/[slug]/logout/+server.ts b/frontend/src/routes/cal/[slug]/logout/+server.ts
index 4d8f551..35bd8d0 100644
--- a/frontend/src/routes/cal/[slug]/logout/+server.ts
+++ b/frontend/src/routes/cal/[slug]/logout/+server.ts
@@ -1,18 +1,17 @@
-import { redirect } from '@sveltejs/kit';
+import { redirect } from "@sveltejs/kit";
 
 export function POST({ params, cookies }) {
-    cookies.delete(`cal-${params.slug}`, {
-        path: "/"
-    });
+	cookies.delete(`cal-${params.slug}`, {
+		path: "/"
+	});
 
-    throw redirect(303, `/cal/${params.slug}/login`);
+	throw redirect(303, `/cal/${params.slug}/login`);
 }
 
 export function GET({ params, cookies }) {
+	cookies.delete(`cal-${params.slug}`, {
+		path: "/"
+	});
 
-    cookies.delete(`cal-${params.slug}`, {
-        path: "/"
-    });
-
-    throw redirect(303, `/cal/${params.slug}/login`);
-}
\ No newline at end of file
+	throw redirect(303, `/cal/${params.slug}/login`);
+}
diff --git a/frontend/src/routes/elist/+error.svelte b/frontend/src/routes/elist/+error.svelte
index 9cc7137..71ce8f0 100644
--- a/frontend/src/routes/elist/+error.svelte
+++ b/frontend/src/routes/elist/+error.svelte
@@ -1,38 +1,52 @@
 <script>
-    import { page } from "$app/state";
-    import { AlertCircle, RefreshCw } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { AlertCircle, RefreshCw } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>{page.status} {page.error?.message}</title>
+	<title>{page.status} {page.error?.message}</title>
 </svelte:head>
 
 <main class="dark min-h-screen w-full flex items-center justify-center bg-background" style="">
-    <div class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center">
-        <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50">
-            <AlertCircle class="h-10 w-10 text-red-500" />
-        </div>
+	<div
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center"
+	>
+		<div
+			class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50"
+		>
+			<AlertCircle class="h-10 w-10 text-red-500" />
+		</div>
 
-        <h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
+		<h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
 
-        <p class="dark mb-8 max-w-md text-gray-500">
-            {#if page.status === 404}
-                We couldn't find the event list you're looking for. This might be due to an invalid link or the list may not exist.
-            {:else}
-                An error has occured. Please wait and try again. If the error keeps happening, contact our support team.
-            {/if}
-        </p>
+		<p class="dark mb-8 max-w-md text-gray-500">
+			{#if page.status === 404}
+				We couldn't find the event list you're looking for. This might be due to an invalid link or
+				the list may not exist.
+			{:else}
+				An error has occured. Please wait and try again. If the error keeps happening, contact our
+				support team.
+			{/if}
+		</p>
 
-            <a
-                data-sveltekit-preload-data="off"
-                href={page.url.toString()}
-                class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
-                >
-                <RefreshCw class="h-4 w-4" />
-                Try Again
-            </a>
+		<a
+			data-sveltekit-preload-data="off"
+			href={page.url.toString()}
+			class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
+		>
+			<RefreshCw class="h-4 w-4" />
+			Try Again
+		</a>
 
-        <div class="dark mt-8 text-sm text-gray-500">Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a></div>
-        <div class="dark mt-1 text-sm text-gray-500"><a href="https://uptime.stephengruzin.dev/status/infosections" target="_blank" class="underline">Status Page</a></div>
-    </div>
-</main>
\ No newline at end of file
+		<div class="dark mt-8 text-sm text-gray-500">
+			Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a>
+		</div>
+		<div class="dark mt-1 text-sm text-gray-500">
+			<a
+				href="https://uptime.stephengruzin.dev/status/infosections"
+				target="_blank"
+				class="underline">Status Page</a
+			>
+		</div>
+	</div>
+</main>
diff --git a/frontend/src/routes/elist/[slug]/+page.server.ts b/frontend/src/routes/elist/[slug]/+page.server.ts
index d8449a3..60fd92f 100644
--- a/frontend/src/routes/elist/[slug]/+page.server.ts
+++ b/frontend/src/routes/elist/[slug]/+page.server.ts
@@ -1,5 +1,5 @@
 export async function load({ params }) {
-    return {
-        id: params.slug
-    };
+	return {
+		id: params.slug
+	};
 }
diff --git a/frontend/src/routes/elist/[slug]/+page.svelte b/frontend/src/routes/elist/[slug]/+page.svelte
index 43287fb..8c4354e 100644
--- a/frontend/src/routes/elist/[slug]/+page.svelte
+++ b/frontend/src/routes/elist/[slug]/+page.svelte
@@ -1,98 +1,103 @@
 <script lang="ts">
-    import { getEventsForElist } from "../elistEventFetch.remote.js";
+	import { getEventsForElist } from "../elistEventFetch.remote.js";
 	import { getElistById } from "../elistData.remote.js";
-    import EventCard from "@/eventList/EventCard.svelte";
-    import { Temporal } from "temporal-polyfill";
-
-    let { data } = $props();
-
-    let elist = $derived(await getElistById(data.id));
-
-    let displaySettings = $derived(elist.displaySettings);
-
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
-
-    let eventIdUsed: string[] = [];
-
-    $effect(() => {
-        const observer = new ResizeObserver(() => {
-            window.parent.postMessage({ height: document.body.scrollHeight, frameId: "iframe" + data.id }, "*");
-        });
-
-        observer.observe(document.body);
-
-        return () => observer.disconnect();
-    });
-
-    // svelte-ignore state_referenced_locally
-    let events = (await getEventsForElist(data.id)).filter((event, index) => {
-        if (index === 0) {
-            eventIdUsed = [];
-        }
-
-        if (today.toInstant().epochMilliseconds < (new Date(event.startTime)).valueOf()) {
-            if (elist.filters.hideRecurringEvents) {
-                if (!eventIdUsed.includes(event.recEventId)) {
-                    eventIdUsed.push(event.recEventId);
-                    return true;
-                }
-            } else {
-                return true;
-            }
-        } else {
-            return false;
-        }
-    });
-
-    console.log(events);
+	import EventCard from "@/eventList/EventCard.svelte";
+	import { Temporal } from "temporal-polyfill";
+
+	let { data } = $props();
+
+	let elist = $derived(await getElistById(data.id));
+
+	let displaySettings = $derived(elist.displaySettings);
+
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
+
+	let eventIdUsed: string[] = [];
+
+	$effect(() => {
+		const observer = new ResizeObserver(() => {
+			window.parent.postMessage(
+				{ height: document.body.scrollHeight, frameId: "iframe" + data.id },
+				"*"
+			);
+		});
+
+		observer.observe(document.body);
+
+		return () => observer.disconnect();
+	});
+
+	// svelte-ignore state_referenced_locally
+	let events = (await getEventsForElist(data.id)).filter((event, index) => {
+		if (index === 0) {
+			eventIdUsed = [];
+		}
+
+		if (today.toInstant().epochMilliseconds < new Date(event.startTime).valueOf()) {
+			if (elist.filters.hideRecurringEvents) {
+				if (!eventIdUsed.includes(event.recEventId)) {
+					eventIdUsed.push(event.recEventId);
+					return true;
+				}
+			} else {
+				return true;
+			}
+		} else {
+			return false;
+		}
+	});
+
+	console.log(events);
 </script>
 
 <svelte:head>
-    <title>{elist.name} | InfoSections</title>
-    <meta name="description" content={elist.description}>
+	<title>{elist.name} | InfoSections</title>
+	<meta name="description" content={elist.description} />
 </svelte:head>
 
-<main style="{displaySettings.setTransparentBackground ? "" : "background: #fff;"}">
-    <div class="mx-auto">
-        {#if displaySettings.showUpcomingEventsTextAndDesc}
-            <div class="mb-3">
-                <h1 class="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">Upcoming Events</h1>
-                <p class="mt-2 text-pretty text-muted-foreground">
-                    Browse our schedule and register for events that interest you
-                </p>
-            </div>
-        {/if}
-    
-        <div class="flex flex-col gap-4">
-            {#each events as event, index (`anEvent${event.id}`)}
-                <EventCard event={event} {timeZone} {displaySettings} reverse={(index & 1)===1} />
-            {/each}
-        </div>
-    </div>
+<main style={displaySettings.setTransparentBackground ? "" : "background: #fff;"}>
+	<div class="mx-auto">
+		{#if displaySettings.showUpcomingEventsTextAndDesc}
+			<div class="mb-3">
+				<h1 class="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">
+					Upcoming Events
+				</h1>
+				<p class="mt-2 text-pretty text-muted-foreground">
+					Browse our schedule and register for events that interest you
+				</p>
+			</div>
+		{/if}
+
+		<div class="flex flex-col gap-4">
+			{#each events as event, index (`anEvent${event.id}`)}
+				<EventCard {event} {timeZone} {displaySettings} reverse={(index & 1) === 1} />
+			{/each}
+		</div>
+	</div>
 </main>
 
 <style>
-    :global(body) {
-        background: none transparent;
-    }
-
-    :global(::-webkit-scrollbar){
-        width: 10px;
-    }
-
-    :global(::-webkit-scrollbar-track-piece){
-        background-color: #FFF;
-    }
-
-    :global(::-webkit-scrollbar-thumb){
-        background-color: #CBCBCB;
-        outline: 2px solid #FFF;
-        outline-offset: -2px;
-        border: .1px solid #B7B7B7;
-    }
-
-    :global(::-webkit-scrollbar-thumb:hover){
-        background-color: #909090;
-    }
-</style>
\ No newline at end of file
+	:global(body) {
+		background: none transparent;
+	}
+
+	:global(::-webkit-scrollbar) {
+		width: 10px;
+	}
+
+	:global(::-webkit-scrollbar-track-piece) {
+		background-color: #fff;
+	}
+
+	:global(::-webkit-scrollbar-thumb) {
+		background-color: #cbcbcb;
+		outline: 2px solid #fff;
+		outline-offset: -2px;
+		border: 0.1px solid #b7b7b7;
+	}
+
+	:global(::-webkit-scrollbar-thumb:hover) {
+		background-color: #909090;
+	}
+</style>
diff --git a/frontend/src/routes/elist/elistData.remote.ts b/frontend/src/routes/elist/elistData.remote.ts
index fca5320..0864631 100644
--- a/frontend/src/routes/elist/elistData.remote.ts
+++ b/frontend/src/routes/elist/elistData.remote.ts
@@ -7,19 +7,19 @@ import * as v from "valibot";
 config();
 
 export const getElistById = query(v.string(), async (listId) => {
-  const { locals } = getRequestEvent();
+	const { locals } = getRequestEvent();
 
-  let eventList: EventListDBModel;
-  try {
-    eventList = await locals.pb.collection("eventLists").getOne(listId, {
-      headers: {
-        Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!,
-      },
-    });
-  } catch (err) {
-    console.log("Event list not found.", err);
-    return error(404, "Event list Not Found");
-  }
+	let eventList: EventListDBModel;
+	try {
+		eventList = await locals.pb.collection("eventLists").getOne(listId, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Event list not found.", err);
+		return error(404, "Event list Not Found");
+	}
 
-  return eventList;
+	return eventList;
 });
diff --git a/frontend/src/routes/elist/elistEventFetch.remote.ts b/frontend/src/routes/elist/elistEventFetch.remote.ts
index 976c1fa..8fd8dea 100644
--- a/frontend/src/routes/elist/elistEventFetch.remote.ts
+++ b/frontend/src/routes/elist/elistEventFetch.remote.ts
@@ -15,8 +15,8 @@ export const getEventsForElist = query(v.string(), async (listId) => {
 	try {
 		eventList = await locals.pb.collection("eventLists").getOne(listId, {
 			headers: {
-			Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!,
-			},
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
 		});
 	} catch (err) {
 		console.log("Event list not found.", err);
@@ -47,8 +47,8 @@ export const getEventsForElist = query(v.string(), async (listId) => {
 			sort: "startTime",
 			fields: eventFieldRequirementsPublic,
 			headers: {
-			Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!,
-			},
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
 		});
 	} catch (err) {
 		console.log("Events not found.", err);
diff --git a/frontend/src/routes/elistPreview/+error.svelte b/frontend/src/routes/elistPreview/+error.svelte
index 9cc7137..71ce8f0 100644
--- a/frontend/src/routes/elistPreview/+error.svelte
+++ b/frontend/src/routes/elistPreview/+error.svelte
@@ -1,38 +1,52 @@
 <script>
-    import { page } from "$app/state";
-    import { AlertCircle, RefreshCw } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { AlertCircle, RefreshCw } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>{page.status} {page.error?.message}</title>
+	<title>{page.status} {page.error?.message}</title>
 </svelte:head>
 
 <main class="dark min-h-screen w-full flex items-center justify-center bg-background" style="">
-    <div class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center">
-        <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50">
-            <AlertCircle class="h-10 w-10 text-red-500" />
-        </div>
+	<div
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center"
+	>
+		<div
+			class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50"
+		>
+			<AlertCircle class="h-10 w-10 text-red-500" />
+		</div>
 
-        <h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
+		<h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
 
-        <p class="dark mb-8 max-w-md text-gray-500">
-            {#if page.status === 404}
-                We couldn't find the event list you're looking for. This might be due to an invalid link or the list may not exist.
-            {:else}
-                An error has occured. Please wait and try again. If the error keeps happening, contact our support team.
-            {/if}
-        </p>
+		<p class="dark mb-8 max-w-md text-gray-500">
+			{#if page.status === 404}
+				We couldn't find the event list you're looking for. This might be due to an invalid link or
+				the list may not exist.
+			{:else}
+				An error has occured. Please wait and try again. If the error keeps happening, contact our
+				support team.
+			{/if}
+		</p>
 
-            <a
-                data-sveltekit-preload-data="off"
-                href={page.url.toString()}
-                class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
-                >
-                <RefreshCw class="h-4 w-4" />
-                Try Again
-            </a>
+		<a
+			data-sveltekit-preload-data="off"
+			href={page.url.toString()}
+			class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
+		>
+			<RefreshCw class="h-4 w-4" />
+			Try Again
+		</a>
 
-        <div class="dark mt-8 text-sm text-gray-500">Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a></div>
-        <div class="dark mt-1 text-sm text-gray-500"><a href="https://uptime.stephengruzin.dev/status/infosections" target="_blank" class="underline">Status Page</a></div>
-    </div>
-</main>
\ No newline at end of file
+		<div class="dark mt-8 text-sm text-gray-500">
+			Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a>
+		</div>
+		<div class="dark mt-1 text-sm text-gray-500">
+			<a
+				href="https://uptime.stephengruzin.dev/status/infosections"
+				target="_blank"
+				class="underline">Status Page</a
+			>
+		</div>
+	</div>
+</main>
diff --git a/frontend/src/routes/elistPreview/[slug]/+page.server.ts b/frontend/src/routes/elistPreview/[slug]/+page.server.ts
index 3ebde89..a95a40c 100644
--- a/frontend/src/routes/elistPreview/[slug]/+page.server.ts
+++ b/frontend/src/routes/elistPreview/[slug]/+page.server.ts
@@ -3,7 +3,7 @@ import { config } from "dotenv";
 config();
 
 export async function load({ params }) {
-    return {
-        id: params.slug
-    }
-}
\ No newline at end of file
+	return {
+		id: params.slug
+	};
+}
diff --git a/frontend/src/routes/elistPreview/[slug]/+page.svelte b/frontend/src/routes/elistPreview/[slug]/+page.svelte
index 24e16d8..fcd8713 100644
--- a/frontend/src/routes/elistPreview/[slug]/+page.svelte
+++ b/frontend/src/routes/elistPreview/[slug]/+page.svelte
@@ -1,111 +1,116 @@
 <script lang="ts">
 	import { getEventsForElist } from "../../elist/elistEventFetch.remote.js";
 	import { getElistById } from "../../elist/elistData.remote.js";
-    import EventCard from "@/eventList/EventCard.svelte";
-    import { Temporal } from "temporal-polyfill";
-
-    let { data } = $props();
-
-    let elist = $derived(await getElistById(data.id));
-
-    let displaySettings = $derived(elist.displaySettings);
-
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
-
-    let eventIdUsed: string[] = [];
-
-    $effect(() => {
-        const observer = new ResizeObserver(() => {
-            window.parent.postMessage({ height: document.body.scrollHeight, frameId: "iframe" + data.id }, "*");
-        });
-
-        observer.observe(document.body);
-
-        return () => observer.disconnect();
-    });
-
-    function parentSentMessage(event: MessageEvent) {
-        try {
-            if (event.data.call === "displaySettings") {
-                displaySettings = JSON.parse(event.data.value);
-            } else if (event.data.call === "reloadPage") {
-                window.location.reload();
-            }
-        } catch(err) {
-            console.log("Failed to recieve date from the parent container");
-            console.log(err);
-        }
-    }
-
-    // svelte-ignore state_referenced_locally
-    let events = (await getEventsForElist(data.id)).filter((event, index) => {
-        if (index === 0) {
-            eventIdUsed = [];
-        }
-
-        if (today.toInstant().epochMilliseconds < (new Date(event.startTime)).valueOf()) {
-            if (elist.filters.hideRecurringEvents) {
-                if (!eventIdUsed.includes(event.recEventId)) {
-                    eventIdUsed.push(event.recEventId);
-                    return true;
-                }
-            } else {
-                return true;
-            }
-        } else {
-            return false;
-        }
-    });
+	import EventCard from "@/eventList/EventCard.svelte";
+	import { Temporal } from "temporal-polyfill";
+
+	let { data } = $props();
+
+	let elist = $derived(await getElistById(data.id));
+
+	let displaySettings = $derived(elist.displaySettings);
+
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
+
+	let eventIdUsed: string[] = [];
+
+	$effect(() => {
+		const observer = new ResizeObserver(() => {
+			window.parent.postMessage(
+				{ height: document.body.scrollHeight, frameId: "iframe" + data.id },
+				"*"
+			);
+		});
+
+		observer.observe(document.body);
+
+		return () => observer.disconnect();
+	});
+
+	function parentSentMessage(event: MessageEvent) {
+		try {
+			if (event.data.call === "displaySettings") {
+				displaySettings = JSON.parse(event.data.value);
+			} else if (event.data.call === "reloadPage") {
+				window.location.reload();
+			}
+		} catch (err) {
+			console.log("Failed to recieve date from the parent container");
+			console.log(err);
+		}
+	}
+
+	// svelte-ignore state_referenced_locally
+	let events = (await getEventsForElist(data.id)).filter((event, index) => {
+		if (index === 0) {
+			eventIdUsed = [];
+		}
+
+		if (today.toInstant().epochMilliseconds < new Date(event.startTime).valueOf()) {
+			if (elist.filters.hideRecurringEvents) {
+				if (!eventIdUsed.includes(event.recEventId)) {
+					eventIdUsed.push(event.recEventId);
+					return true;
+				}
+			} else {
+				return true;
+			}
+		} else {
+			return false;
+		}
+	});
 </script>
 
 <svelte:head>
-    <title>{elist.name} | InfoSections</title>
-    <meta name="description" content={elist.description}>
+	<title>{elist.name} | InfoSections</title>
+	<meta name="description" content={elist.description} />
 </svelte:head>
 
 <svelte:window onmessage={parentSentMessage} />
 
-<main style="{displaySettings.setTransparentBackground ? "" : "background: #fff;"}">
-    <div class="mx-auto">
-        {#if displaySettings.showUpcomingEventsTextAndDesc}
-            <div class="mb-3">
-                <h1 class="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">Upcoming Events</h1>
-                <p class="mt-2 text-pretty text-muted-foreground">
-                    Browse our schedule and register for events that interest you
-                </p>
-            </div>
-        {/if}
-    
-        <div class="flex flex-col gap-4">
-            {#each events as event, index (`anEvent${event.id}`)}
-                <EventCard event={event} {timeZone} {displaySettings} reverse={(index & 1)===1} />
-            {/each}
-        </div>
-    </div>
+<main style={displaySettings.setTransparentBackground ? "" : "background: #fff;"}>
+	<div class="mx-auto">
+		{#if displaySettings.showUpcomingEventsTextAndDesc}
+			<div class="mb-3">
+				<h1 class="text-balance text-3xl font-bold tracking-tight text-foreground md:text-4xl">
+					Upcoming Events
+				</h1>
+				<p class="mt-2 text-pretty text-muted-foreground">
+					Browse our schedule and register for events that interest you
+				</p>
+			</div>
+		{/if}
+
+		<div class="flex flex-col gap-4">
+			{#each events as event, index (`anEvent${event.id}`)}
+				<EventCard {event} {timeZone} {displaySettings} reverse={(index & 1) === 1} />
+			{/each}
+		</div>
+	</div>
 </main>
 
 <style>
-    :global(body) {
-        background: none transparent;
-    }
-
-    :global(::-webkit-scrollbar){
-        width: 10px;
-    }
-
-    :global(::-webkit-scrollbar-track-piece){
-        background-color: #FFF;
-    }
-
-    :global(::-webkit-scrollbar-thumb){
-        background-color: #CBCBCB;
-        outline: 2px solid #FFF;
-        outline-offset: -2px;
-        border: .1px solid #B7B7B7;
-    }
-
-    :global(::-webkit-scrollbar-thumb:hover){
-        background-color: #909090;
-    }
-</style>
\ No newline at end of file
+	:global(body) {
+		background: none transparent;
+	}
+
+	:global(::-webkit-scrollbar) {
+		width: 10px;
+	}
+
+	:global(::-webkit-scrollbar-track-piece) {
+		background-color: #fff;
+	}
+
+	:global(::-webkit-scrollbar-thumb) {
+		background-color: #cbcbcb;
+		outline: 2px solid #fff;
+		outline-offset: -2px;
+		border: 0.1px solid #b7b7b7;
+	}
+
+	:global(::-webkit-scrollbar-thumb:hover) {
+		background-color: #909090;
+	}
+</style>
diff --git a/frontend/src/routes/go/[slug]/+server.ts b/frontend/src/routes/go/[slug]/+server.ts
index 4b1b957..7422495 100644
--- a/frontend/src/routes/go/[slug]/+server.ts
+++ b/frontend/src/routes/go/[slug]/+server.ts
@@ -7,112 +7,121 @@ config();
 
 //This function records the ref data after we redirect the user as to not waste their time.
 async function recordRefHit(url: URL, record: DynamicURLModel, locals: App.Locals) {
-    setTimeout(async () => {
-        let ref = url.searchParams.get("ref");
-        if (!ref || ref.length === 0) return;
-
-        let newRef: URLRefHits[] = [];
-        let refFound = false;
-
-        for (let i=0;i<record.refs.length;i++) {
-            let currentRef = record.refs[i];
-            if (!currentRef) continue;
-
-            if (ref !== currentRef.name) {
-                newRef.push(currentRef);
-            } else {
-                newRef.push({
-                    name: ref,
-                    hits: currentRef.hits + 1
-                });
-                refFound = true;
-            }
-
-        }
-
-        if (!refFound) {
-            newRef.push({
-                name: ref,
-                hits: 1
-            });
-        }
-
-        try {
-            await locals.pb.collection('dynamic_url').update(record.id, {
-                refs: newRef,
-            }, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-        } catch (err) {
-            console.log("Failed to update ref for dynamic url: ", err);
-        }
-    }, 1);
+	setTimeout(async () => {
+		let ref = url.searchParams.get("ref");
+		if (!ref || ref.length === 0) return;
+
+		let newRef: URLRefHits[] = [];
+		let refFound = false;
+
+		for (let i = 0; i < record.refs.length; i++) {
+			let currentRef = record.refs[i];
+			if (!currentRef) continue;
+
+			if (ref !== currentRef.name) {
+				newRef.push(currentRef);
+			} else {
+				newRef.push({
+					name: ref,
+					hits: currentRef.hits + 1
+				});
+				refFound = true;
+			}
+		}
+
+		if (!refFound) {
+			newRef.push({
+				name: ref,
+				hits: 1
+			});
+		}
+
+		try {
+			await locals.pb.collection("dynamic_url").update(
+				record.id,
+				{
+					refs: newRef
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+		} catch (err) {
+			console.log("Failed to update ref for dynamic url: ", err);
+		}
+	}, 1);
 }
 
 export async function GET({ params, locals, url }) {
-    const goID = params.slug;
-
-    let record: DynamicURLModel;
-    try {
-        record = await locals.pb.collection('dynamic_url').getOne(goID, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (_err) {
-        return error(404, "Dynamic Link not found.");
-    }
-
-    // The url has been disabled by the owner.
-    if (record.disableURL) {
-        return error(404, "Dynamic Link not found.");
-    }
-
-    let linkToRedirect = record.defaultRedirectTo;
-    const overrideExpired = record.overrideExpireInStr === "set" ? (new Date(record.overrideExpiresIn)).getTime() < (new Date()).getTime() : false;
-
-    // If the dynamic_url owner enabled the override switch, we dont need to worry about anything else and just return the override URL
-    if (record.enableOverrideRedirect && !overrideExpired) {
-        linkToRedirect = record.overrideRedirectTo;
-    } else if (record.enableWeekSheet) {
-        let today = Temporal.Now.zonedDateTimeISO(record.timeZone);
-    
-        const todaysTimeSheet = record.weekSheet[today.dayOfWeek - 1];
-
-        if (todaysTimeSheet) {
-            const currentMinute = today.hour * 60 + today.minute;
-        
-            let currentTimeSheet: WeekSheetTimeSlot | null = null;
-        
-            for (let i=0;i<todaysTimeSheet.length;i++) {
-                let thisTimeSheet = todaysTimeSheet[i];
-                if (!thisTimeSheet) continue;
-                
-                if (thisTimeSheet.startMinute <= currentMinute && currentMinute <= thisTimeSheet.endMinute) {
-                    currentTimeSheet = thisTimeSheet;
-                }
-            }
-        
-            if (currentTimeSheet) {
-                linkToRedirect = currentTimeSheet.link;
-            }
-        }
-    }
-
-    recordRefHit(url, record, locals);
-    // return json({
-    //     linkToRedirect,
-    // });
-    
-    return new Response(undefined, {
-        status: 307,
-        
-        headers: {
-            "Access-Control-Allow-Origin": "*",
-            "Access-Control-Expose-Headers": "Location",
-            "Location": linkToRedirect
-        }
-    });
-}
\ No newline at end of file
+	const goID = params.slug;
+
+	let record: DynamicURLModel;
+	try {
+		record = await locals.pb.collection("dynamic_url").getOne(goID, {
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (_err) {
+		return error(404, "Dynamic Link not found.");
+	}
+
+	// The url has been disabled by the owner.
+	if (record.disableURL) {
+		return error(404, "Dynamic Link not found.");
+	}
+
+	let linkToRedirect = record.defaultRedirectTo;
+	const overrideExpired =
+		record.overrideExpireInStr === "set"
+			? new Date(record.overrideExpiresIn).getTime() < new Date().getTime()
+			: false;
+
+	// If the dynamic_url owner enabled the override switch, we dont need to worry about anything else and just return the override URL
+	if (record.enableOverrideRedirect && !overrideExpired) {
+		linkToRedirect = record.overrideRedirectTo;
+	} else if (record.enableWeekSheet) {
+		let today = Temporal.Now.zonedDateTimeISO(record.timeZone);
+
+		const todaysTimeSheet = record.weekSheet[today.dayOfWeek - 1];
+
+		if (todaysTimeSheet) {
+			const currentMinute = today.hour * 60 + today.minute;
+
+			let currentTimeSheet: WeekSheetTimeSlot | null = null;
+
+			for (let i = 0; i < todaysTimeSheet.length; i++) {
+				let thisTimeSheet = todaysTimeSheet[i];
+				if (!thisTimeSheet) continue;
+
+				if (
+					thisTimeSheet.startMinute <= currentMinute &&
+					currentMinute <= thisTimeSheet.endMinute
+				) {
+					currentTimeSheet = thisTimeSheet;
+				}
+			}
+
+			if (currentTimeSheet) {
+				linkToRedirect = currentTimeSheet.link;
+			}
+		}
+	}
+
+	recordRefHit(url, record, locals);
+	// return json({
+	//     linkToRedirect,
+	// });
+
+	return new Response(undefined, {
+		status: 307,
+
+		headers: {
+			"Access-Control-Allow-Origin": "*",
+			"Access-Control-Expose-Headers": "Location",
+			Location: linkToRedirect
+		}
+	});
+}
diff --git a/frontend/src/routes/google_oath/+server.ts b/frontend/src/routes/google_oath/+server.ts
index d24b9e6..7ad0d5d 100644
--- a/frontend/src/routes/google_oath/+server.ts
+++ b/frontend/src/routes/google_oath/+server.ts
@@ -8,167 +8,182 @@ import Stripe from "stripe";
 config();
 
 export async function GET({ locals, url, cookies }) {
-    const expectedState = cookies.get("state");
-    const expectedVerifier = cookies.get("verifier");
-
-    if (!expectedState || !expectedVerifier) {
-        return redirect(303, "/");
-    }
-
-    let redirectURL;
-
-    if (dev) {
-        if (url.origin.includes(".dev")) {
-            redirectURL = url.origin.replace("http", "https") + "/google_oath";
-        } else {
-            redirectURL = url.origin + "/google_oath";
-        }
-    } else {
-        redirectURL = process.env["VITE_WEBSITE_URL"] + "/google_oath";
-    }
-        
-    const state = url.searchParams.get("state");
-    const code = url.searchParams.get("code");
-
-    if (!state || !code) {
-        return redirect(303, "/?error=signup_oath_no_state");
-    }
-
-    let provider: AuthProviderInfo | undefined;
-    try {
-        const authMethods = await locals.pb.collection("users").listAuthMethods({
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    
-        if (!authMethods.oauth2.enabled) {
-            console.log("Oath not enabled.");
-            return redirect(303, "/");
-        }
-    
-        for (let i=0;i<authMethods.oauth2.providers.length;i++) {
-            const provider2 = authMethods.oauth2.providers[i];
-            if (provider2 !== undefined && provider2.name === "google") {
-                provider = provider2;
-            }
-        }
-    } catch (err) {
-        console.log("List auth methods error.", err);
-        return redirect(303, "/?error=signup_auth_method_get");
-    }
-
-    if (!provider) {
-        console.log("Provider not found.");
-        return redirect(303, "/?error=signup_auth_method_get");
-    }
-
-    if (expectedState != state) {
-        console.log("Returned state does not match expected state.");
-        return redirect(303, "/?error=signup_auth_method_get");
-    }
-    
-    let res: RecordAuthResponse;
-    try {
-        res = await locals.pb.collection("users").authWithOAuth2Code(provider.name, code, expectedVerifier, redirectURL, {
-            new: true
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-
-        const authCookie = locals.pb.authStore.exportToCookie().split(";");
-        cookies.set("pb_auth", authCookie[0] ? authCookie[0] : "", {
-            path: "/"
-        })
-    } catch (err) {
-        console.log("Error signing up with oath", err);
-        return redirect(303, "/?error=signup_auth_signup_fail");
-    }
-
-    const newUserRecord = locals.pb.authStore.record;
-    if (newUserRecord && res.meta) {
-        const fileFetchResp = await fetchFileFromURL(res.meta["avatarUrl"]);
-        let file: File | null = null;
-        if (!fileFetchResp.error) {
-            file = new File([fileFetchResp.blob], "logo.png", { type: fileFetchResp.blob.type });
-        }
-        
-        if (newUserRecord["new"]) {
-            let stripeTrialSubscriptionUrl = "";
-            let stripeSubscriptionUrl = "";
-            let stripeCustomerID = "";
-
-            try {
-                const stripe = new Stripe(process.env["STRIPE_PRIVATE_KEY"]!);
-                const customer = await stripe.customers.create({
-                    metadata: {
-                        internal_id: newUserRecord.id
-                    },
-                });
-
-                const session = await stripe.checkout.sessions.create({
-                    line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
-                    mode: 'subscription',
-                    success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-                    cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-                    customer: customer.id,
-                });
-        
-                const freeTrialSession = await stripe.checkout.sessions.create({
-                    line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
-                    mode: 'subscription',
-                    success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-                    cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
-                    customer: customer.id,
-                    subscription_data: {
-                        trial_period_days: 14
-                    }
-                });
-        
-                stripeTrialSubscriptionUrl = freeTrialSession.url ? freeTrialSession.url : "";
-                stripeSubscriptionUrl = session.url ? session.url : "";
-                stripeCustomerID = customer.id;
-            } catch (err) {
-                console.log("Failed to do stripe stuff", err);
-                return redirect(303, "/?error=signup_stripe_error");
-            }
-            
-            try {
-                await locals.pb.collection("users").update(newUserRecord.id, {
-                    new: false,
-                    avatar: file,
-                    name: res.meta["name"] ? res.meta["name"] : "New User",
-                    accessLevel: "none",
-                    customerId: stripeCustomerID,
-                    subscriptionURL: stripeSubscriptionUrl,
-                    freeTrialURL: stripeTrialSubscriptionUrl,
-                }, {
-                    headers: {
-                        "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                    }
-                });
-            } catch (err) {
-                console.log("Failed to update user data after signup:", err);
-                return redirect(303, "/?error=signup_after_oath");
-            }
-        } else {
-            try {
-                await locals.pb.collection("users").update(newUserRecord.id, {
-                    avatar: file,
-                    name: res.meta["name"] ? res.meta["name"] : "New User",
-                }, {
-                    headers: {
-                        "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                    }
-                });
-            } catch (err) {
-                console.log("Failed to update user data after signup:", err);
-                return redirect(303, "/?error=signup_after_oath");
-            }
-        }
-    }
-
-    return redirect(303, "/dashboard");
-}
\ No newline at end of file
+	const expectedState = cookies.get("state");
+	const expectedVerifier = cookies.get("verifier");
+
+	if (!expectedState || !expectedVerifier) {
+		return redirect(303, "/");
+	}
+
+	let redirectURL;
+
+	if (dev) {
+		if (url.origin.includes(".dev")) {
+			redirectURL = url.origin.replace("http", "https") + "/google_oath";
+		} else {
+			redirectURL = url.origin + "/google_oath";
+		}
+	} else {
+		redirectURL = process.env["VITE_WEBSITE_URL"] + "/google_oath";
+	}
+
+	const state = url.searchParams.get("state");
+	const code = url.searchParams.get("code");
+
+	if (!state || !code) {
+		return redirect(303, "/?error=signup_oath_no_state");
+	}
+
+	let provider: AuthProviderInfo | undefined;
+	try {
+		const authMethods = await locals.pb.collection("users").listAuthMethods({
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+
+		if (!authMethods.oauth2.enabled) {
+			console.log("Oath not enabled.");
+			return redirect(303, "/");
+		}
+
+		for (let i = 0; i < authMethods.oauth2.providers.length; i++) {
+			const provider2 = authMethods.oauth2.providers[i];
+			if (provider2 !== undefined && provider2.name === "google") {
+				provider = provider2;
+			}
+		}
+	} catch (err) {
+		console.log("List auth methods error.", err);
+		return redirect(303, "/?error=signup_auth_method_get");
+	}
+
+	if (!provider) {
+		console.log("Provider not found.");
+		return redirect(303, "/?error=signup_auth_method_get");
+	}
+
+	if (expectedState != state) {
+		console.log("Returned state does not match expected state.");
+		return redirect(303, "/?error=signup_auth_method_get");
+	}
+
+	let res: RecordAuthResponse;
+	try {
+		res = await locals.pb.collection("users").authWithOAuth2Code(
+			provider.name,
+			code,
+			expectedVerifier,
+			redirectURL,
+			{
+				new: true
+			},
+			{
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			}
+		);
+
+		const authCookie = locals.pb.authStore.exportToCookie().split(";");
+		cookies.set("pb_auth", authCookie[0] ? authCookie[0] : "", {
+			path: "/"
+		});
+	} catch (err) {
+		console.log("Error signing up with oath", err);
+		return redirect(303, "/?error=signup_auth_signup_fail");
+	}
+
+	const newUserRecord = locals.pb.authStore.record;
+	if (newUserRecord && res.meta) {
+		const fileFetchResp = await fetchFileFromURL(res.meta["avatarUrl"]);
+		let file: File | null = null;
+		if (!fileFetchResp.error) {
+			file = new File([fileFetchResp.blob], "logo.png", { type: fileFetchResp.blob.type });
+		}
+
+		if (newUserRecord["new"]) {
+			let stripeTrialSubscriptionUrl = "";
+			let stripeSubscriptionUrl = "";
+			let stripeCustomerID = "";
+
+			try {
+				const stripe = new Stripe(process.env["STRIPE_PRIVATE_KEY"]!);
+				const customer = await stripe.customers.create({
+					metadata: {
+						internal_id: newUserRecord.id
+					}
+				});
+
+				const session = await stripe.checkout.sessions.create({
+					line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
+					mode: "subscription",
+					success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+					cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+					customer: customer.id
+				});
+
+				const freeTrialSession = await stripe.checkout.sessions.create({
+					line_items: [{ price: process.env["STRIPE_PRICE_ID"]!, quantity: 1 }],
+					mode: "subscription",
+					success_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+					cancel_url: process.env["VITE_WEBSITE_URL"]! + "/dashboard",
+					customer: customer.id,
+					subscription_data: {
+						trial_period_days: 14
+					}
+				});
+
+				stripeTrialSubscriptionUrl = freeTrialSession.url ? freeTrialSession.url : "";
+				stripeSubscriptionUrl = session.url ? session.url : "";
+				stripeCustomerID = customer.id;
+			} catch (err) {
+				console.log("Failed to do stripe stuff", err);
+				return redirect(303, "/?error=signup_stripe_error");
+			}
+
+			try {
+				await locals.pb.collection("users").update(
+					newUserRecord.id,
+					{
+						new: false,
+						avatar: file,
+						name: res.meta["name"] ? res.meta["name"] : "New User",
+						accessLevel: "none",
+						customerId: stripeCustomerID,
+						subscriptionURL: stripeSubscriptionUrl,
+						freeTrialURL: stripeTrialSubscriptionUrl
+					},
+					{
+						headers: {
+							Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+						}
+					}
+				);
+			} catch (err) {
+				console.log("Failed to update user data after signup:", err);
+				return redirect(303, "/?error=signup_after_oath");
+			}
+		} else {
+			try {
+				await locals.pb.collection("users").update(
+					newUserRecord.id,
+					{
+						avatar: file,
+						name: res.meta["name"] ? res.meta["name"] : "New User"
+					},
+					{
+						headers: {
+							Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+						}
+					}
+				);
+			} catch (err) {
+				console.log("Failed to update user data after signup:", err);
+				return redirect(303, "/?error=signup_after_oath");
+			}
+		}
+	}
+
+	return redirect(303, "/dashboard");
+}
diff --git a/frontend/src/routes/ifeed/+error.svelte b/frontend/src/routes/ifeed/+error.svelte
index 0b74f5c..e98ea0a 100644
--- a/frontend/src/routes/ifeed/+error.svelte
+++ b/frontend/src/routes/ifeed/+error.svelte
@@ -1,38 +1,52 @@
 <script>
-    import { page } from "$app/state";
-    import { AlertCircle, RefreshCw } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { AlertCircle, RefreshCw } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>{page.status} {page.error?.message}</title>
+	<title>{page.status} {page.error?.message}</title>
 </svelte:head>
 
 <main class="dark min-h-screen w-full flex items-center justify-center bg-background" style="">
-    <div class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center">
-        <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50">
-            <AlertCircle class="h-10 w-10 text-red-500" />
-        </div>
+	<div
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center"
+	>
+		<div
+			class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50"
+		>
+			<AlertCircle class="h-10 w-10 text-red-500" />
+		</div>
 
-        <h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
+		<h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
 
-        <p class="dark mb-8 max-w-md text-gray-500">
-            {#if page.status === 404}
-                We couldn't find the image feed you're looking for. This might be due to an invalid link or the feed may not exist.
-            {:else}
-                An error has occured. Please wait and try again. If the error keeps happening, contact our support team.
-            {/if}
-        </p>
+		<p class="dark mb-8 max-w-md text-gray-500">
+			{#if page.status === 404}
+				We couldn't find the image feed you're looking for. This might be due to an invalid link or
+				the feed may not exist.
+			{:else}
+				An error has occured. Please wait and try again. If the error keeps happening, contact our
+				support team.
+			{/if}
+		</p>
 
-            <a
-                data-sveltekit-preload-data="off"
-                href={page.url.toString()}
-                class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
-                >
-                <RefreshCw class="h-4 w-4" />
-                Try Again
-            </a>
+		<a
+			data-sveltekit-preload-data="off"
+			href={page.url.toString()}
+			class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
+		>
+			<RefreshCw class="h-4 w-4" />
+			Try Again
+		</a>
 
-        <div class="dark mt-8 text-sm text-gray-500">Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a></div>
-        <div class="dark mt-1 text-sm text-gray-500"><a href="https://uptime.stephengruzin.dev/status/infosections" target="_blank" class="underline">Status Page</a></div>
-    </div>
-</main>
\ No newline at end of file
+		<div class="dark mt-8 text-sm text-gray-500">
+			Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a>
+		</div>
+		<div class="dark mt-1 text-sm text-gray-500">
+			<a
+				href="https://uptime.stephengruzin.dev/status/infosections"
+				target="_blank"
+				class="underline">Status Page</a
+			>
+		</div>
+	</div>
+</main>
diff --git a/frontend/src/routes/ifeed/[slug]/+page.server.ts b/frontend/src/routes/ifeed/[slug]/+page.server.ts
index 0260835..a94d7c9 100644
--- a/frontend/src/routes/ifeed/[slug]/+page.server.ts
+++ b/frontend/src/routes/ifeed/[slug]/+page.server.ts
@@ -1,4 +1,9 @@
-import { eventFieldRequirementsPublic, resourcesExpandRequirementsPublic, tagsExpandRequirementsPublic, type EventDBModelExpanded } from "@/event.utils";
+import {
+	eventFieldRequirementsPublic,
+	resourcesExpandRequirementsPublic,
+	tagsExpandRequirementsPublic,
+	type EventDBModelExpanded
+} from "@/event.utils";
 import type { CalendarCustomizations, CalendarFilters } from "@/cal.utils";
 import type { CustomImageIFeedDBModel, ImageFeedDBModel } from "@/utils";
 import { Temporal } from "temporal-polyfill";
@@ -8,117 +13,132 @@ import { config } from "dotenv";
 config();
 
 export async function load({ params, locals }) {
-    let imageFeed: ImageFeedDBModel;
-    try {
-        imageFeed = await locals.pb.collection('imageFeeds').getOne(params.slug, {
-            expand: "additionalCalendars",
-            fields: "*,expand.additionalCalendars.displaySettings,expand.additionalCalendars.filters,expand.additionalCalendars.id",
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Image Feed not found.", err);
-        return error(404, "Image Feed Not Found");
-    }
-
-    const additionalCalendars: {displaySettings: CalendarCustomizations, filters: CalendarFilters, id: string}[] = imageFeed.expand ? imageFeed.expand["additionalCalendars"] : [];
-
-    // These variables and the for loop checks if any of the cals need to access a private event. If so, we need to change the event fetch filtering.
-    let visibleInChurchCenterEventRequired = false;
-    let featuredEventRequired = false;
-
-    if (additionalCalendars) {
-        for (let i=0;i<additionalCalendars.length;i++) {
-            const currentAdditionalCal = additionalCalendars[i];
-            if (currentAdditionalCal && currentAdditionalCal.filters.onlyShowFeatured === false) {
-                featuredEventRequired = true;
-            }
-    
-            if (currentAdditionalCal && currentAdditionalCal.filters.hideUnpublished === false) {
-                visibleInChurchCenterEventRequired = true;
-            }
-        }
-    }
-
-    const today = Temporal.Now.zonedDateTimeISO().startOfDay();
-    const monthAgo = today.subtract({ days: today.day + 7 });
-    const monthAgoStr = `${monthAgo.year}-${(monthAgo.month).toString().padStart(2, '0')}-${(monthAgo.day).toString().padStart(2, '0')}`;
-
-    let events: EventDBModelExpanded[] = [];
-    try {
-        let filter = `startTime >= "${monthAgoStr}"`;
-
-        // This filter shows all events for the testing dev feed.
-        if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
-            filter += ` && owner="${imageFeed.owner}"`;
-        }
-
-        if (imageFeed.filters.onlyShowFeatured && !featuredEventRequired) {
-            filter += " && featured=true"
-        }
-
-        if (imageFeed.filters.hideUnpublished && !visibleInChurchCenterEventRequired) {
-            filter += " && visibleInChurchCenter=true"
-        }
-
-        events = await locals.pb.collection('events').getFullList({
-            filter,
-            expand: "tags,resources",
-            sort: 'startTime',
-            fields: eventFieldRequirementsPublic + "," + tagsExpandRequirementsPublic + "," + resourcesExpandRequirementsPublic,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Events not found.", err);
-        return error(500, "Internal Server error.");
-    }
-
-    let customEvents: CustomImageIFeedDBModel[] = [];
-    try {
-        let filter = `picture != "" && imageFeed ~ "${imageFeed.id}"`;
-
-        // This filter shows all events for the testing dev feed.
-        if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
-            filter += ` && owner = "${imageFeed.owner}"`;
-        }
-
-        customEvents = await locals.pb.collection('customImageIfeed').getFullList({
-            filter,
-            fields: "id,recEventId,picture,registrationURL,created,updated,collectionId,showLink,linkText",
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Custom events not found.", err);
-        customEvents = [];
-    }
-
-    try {
-        await locals.pb.collection('imageFeeds').update(imageFeed.id, { 
-            visits: imageFeed.visits + 1
-        }, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Failed to update the visits for image feeds", err);
-        return error(500);
-    }
-
-    return {
-        events,
-        customEvents,
-        name: imageFeed.name,
-        logoLink: locals.pb.files.getURL(imageFeed, imageFeed.logo.toString()),
-        displaySettings: imageFeed.displaySettings,
-        description: imageFeed.description,
-        apiServer: process.env["PB_URL"]!,
-        additionalCalendars,
-        filters: imageFeed.filters
-    }
-}
\ No newline at end of file
+	let imageFeed: ImageFeedDBModel;
+	try {
+		imageFeed = await locals.pb.collection("imageFeeds").getOne(params.slug, {
+			expand: "additionalCalendars",
+			fields:
+				"*,expand.additionalCalendars.displaySettings,expand.additionalCalendars.filters,expand.additionalCalendars.id",
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Image Feed not found.", err);
+		return error(404, "Image Feed Not Found");
+	}
+
+	const additionalCalendars: {
+		displaySettings: CalendarCustomizations;
+		filters: CalendarFilters;
+		id: string;
+	}[] = imageFeed.expand ? imageFeed.expand["additionalCalendars"] : [];
+
+	// These variables and the for loop checks if any of the cals need to access a private event. If so, we need to change the event fetch filtering.
+	let visibleInChurchCenterEventRequired = false;
+	let featuredEventRequired = false;
+
+	if (additionalCalendars) {
+		for (let i = 0; i < additionalCalendars.length; i++) {
+			const currentAdditionalCal = additionalCalendars[i];
+			if (currentAdditionalCal && currentAdditionalCal.filters.onlyShowFeatured === false) {
+				featuredEventRequired = true;
+			}
+
+			if (currentAdditionalCal && currentAdditionalCal.filters.hideUnpublished === false) {
+				visibleInChurchCenterEventRequired = true;
+			}
+		}
+	}
+
+	const today = Temporal.Now.zonedDateTimeISO().startOfDay();
+	const monthAgo = today.subtract({ days: today.day + 7 });
+	const monthAgoStr = `${monthAgo.year}-${monthAgo.month.toString().padStart(2, "0")}-${monthAgo.day.toString().padStart(2, "0")}`;
+
+	let events: EventDBModelExpanded[] = [];
+	try {
+		let filter = `startTime >= "${monthAgoStr}"`;
+
+		// This filter shows all events for the testing dev feed.
+		if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
+			filter += ` && owner="${imageFeed.owner}"`;
+		}
+
+		if (imageFeed.filters.onlyShowFeatured && !featuredEventRequired) {
+			filter += " && featured=true";
+		}
+
+		if (imageFeed.filters.hideUnpublished && !visibleInChurchCenterEventRequired) {
+			filter += " && visibleInChurchCenter=true";
+		}
+
+		events = await locals.pb.collection("events").getFullList({
+			filter,
+			expand: "tags,resources",
+			sort: "startTime",
+			fields:
+				eventFieldRequirementsPublic +
+				"," +
+				tagsExpandRequirementsPublic +
+				"," +
+				resourcesExpandRequirementsPublic,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Events not found.", err);
+		return error(500, "Internal Server error.");
+	}
+
+	let customEvents: CustomImageIFeedDBModel[] = [];
+	try {
+		let filter = `picture != "" && imageFeed ~ "${imageFeed.id}"`;
+
+		// This filter shows all events for the testing dev feed.
+		if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
+			filter += ` && owner = "${imageFeed.owner}"`;
+		}
+
+		customEvents = await locals.pb.collection("customImageIfeed").getFullList({
+			filter,
+			fields:
+				"id,recEventId,picture,registrationURL,created,updated,collectionId,showLink,linkText",
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Custom events not found.", err);
+		customEvents = [];
+	}
+
+	try {
+		await locals.pb.collection("imageFeeds").update(
+			imageFeed.id,
+			{
+				visits: imageFeed.visits + 1
+			},
+			{
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			}
+		);
+	} catch (err) {
+		console.log("Failed to update the visits for image feeds", err);
+		return error(500);
+	}
+
+	return {
+		events,
+		customEvents,
+		name: imageFeed.name,
+		logoLink: locals.pb.files.getURL(imageFeed, imageFeed.logo.toString()),
+		displaySettings: imageFeed.displaySettings,
+		description: imageFeed.description,
+		apiServer: process.env["PB_URL"]!,
+		additionalCalendars,
+		filters: imageFeed.filters
+	};
+}
diff --git a/frontend/src/routes/ifeed/[slug]/+page.svelte b/frontend/src/routes/ifeed/[slug]/+page.svelte
index 98c2379..f98553b 100644
--- a/frontend/src/routes/ifeed/[slug]/+page.svelte
+++ b/frontend/src/routes/ifeed/[slug]/+page.svelte
@@ -1,184 +1,224 @@
 <script lang="ts">
-    import { filterEventsBasedOnTagAndResourceFilters } from "@/event.utils.js";
-    import { AspectRatio } from "@/components/ui/aspect-ratio/index.js";
-    import * as Carousel from "$lib/components/ui/carousel/index.js";
-    import { SquareArrowOutUpRight } from "@lucide/svelte";
-    import Autoplay from "embla-carousel-autoplay";
-    import { Temporal } from "temporal-polyfill";
-    import Calendar from '@/Calendar.svelte';
+	import { filterEventsBasedOnTagAndResourceFilters } from "@/event.utils.js";
+	import { AspectRatio } from "@/components/ui/aspect-ratio/index.js";
+	import * as Carousel from "$lib/components/ui/carousel/index.js";
+	import { SquareArrowOutUpRight } from "@lucide/svelte";
+	import Autoplay from "embla-carousel-autoplay";
+	import { Temporal } from "temporal-polyfill";
+	import Calendar from "@/Calendar.svelte";
 
-    let { data } = $props();
+	let { data } = $props();
 
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
 
-    let eventIdUsed: string[] = [];
+	let eventIdUsed: string[] = [];
 
-    let events = $derived(data.events.filter((event, index) => {
-        if (index === 0) {
-            eventIdUsed = [];
-        }
-        if (!(!event.featured && data.filters.onlyShowFeatured) && !(!event.visibleInChurchCenter && data.filters.hideUnpublished) && event.imageURL.length > 0) {
-            if (today.toInstant().epochMilliseconds < (new Date(event.startTime)).valueOf()) {
-                if (data.filters.hideRecurringEvents) {
-                    if (!eventIdUsed.includes(event.recEventId)) {
-                        eventIdUsed.push(event.recEventId);
-                        return true;
-                    }
-                } else {
-                    return true;
-                }
-            } else {
-                return false;
-            }
-        } else {
-            return false;
-        }
-    }));
+	let events = $derived(
+		data.events.filter((event, index) => {
+			if (index === 0) {
+				eventIdUsed = [];
+			}
+			if (
+				!(!event.featured && data.filters.onlyShowFeatured) &&
+				!(!event.visibleInChurchCenter && data.filters.hideUnpublished) &&
+				event.imageURL.length > 0
+			) {
+				if (today.toInstant().epochMilliseconds < new Date(event.startTime).valueOf()) {
+					if (data.filters.hideRecurringEvents) {
+						if (!eventIdUsed.includes(event.recEventId)) {
+							eventIdUsed.push(event.recEventId);
+							return true;
+						}
+					} else {
+						return true;
+					}
+				} else {
+					return false;
+				}
+			} else {
+				return false;
+			}
+		})
+	);
 </script>
 
 <svelte:head>
-    <title>{data.name}</title>
-    <link rel="shortcut icon" href={data.logoLink} type="image/x-icon">
-    <meta name="description" content={data.description}>
+	<title>{data.name}</title>
+	<link rel="shortcut icon" href={data.logoLink} type="image/x-icon" />
+	<meta name="description" content={data.description} />
 </svelte:head>
 
 <div class="h-screen w-screen">
-    <Carousel.Root
-        opts={{
-            loop: true,
-        }}
-        plugins={[Autoplay({
-            delay: data.displaySettings.feedDurationMS,
-            playOnInit: true,
-            stopOnFocusIn: false,
-            stopOnInteraction: false,
-            stopOnMouseEnter: false,
-            stopOnLastSnap: false,
-        })]}
-        class="w-full h-full"
-    >
-        <Carousel.Content class="w-screen h-screen">
-            {#each events as event (`anEvent${event.id}`)}
-                <Carousel.Item class="w-screen h-screen">
-                    <AspectRatio ratio={16 / 9} class="relative max-w-screen max-h-screen aspect-video centered-div">
-                        <img src={event.imageURL} alt={event.name} class="w-full h-full">
-                        {#if data.displaySettings.showEventExtraInfo && (data.displaySettings.showEventName || (data.displaySettings.showEventDescription && event.description.length > 0) || (data.displaySettings.showEventRegistration && event.registrationURL.length !== 0))}
-                            <div class="extrastuff overflow-hidden">
-                                <div class="info">
-                                    {#if data.displaySettings.showEventName}
-                                        <h2 class="text-2xl">{event.name}</h2>
-                                    {/if}
+	<Carousel.Root
+		opts={{
+			loop: true
+		}}
+		plugins={[
+			Autoplay({
+				delay: data.displaySettings.feedDurationMS,
+				playOnInit: true,
+				stopOnFocusIn: false,
+				stopOnInteraction: false,
+				stopOnMouseEnter: false,
+				stopOnLastSnap: false
+			})
+		]}
+		class="w-full h-full"
+	>
+		<Carousel.Content class="w-screen h-screen">
+			{#each events as event (`anEvent${event.id}`)}
+				<Carousel.Item class="w-screen h-screen">
+					<AspectRatio
+						ratio={16 / 9}
+						class="relative max-w-screen max-h-screen aspect-video centered-div"
+					>
+						<img src={event.imageURL} alt={event.name} class="w-full h-full" />
+						{#if data.displaySettings.showEventExtraInfo && (data.displaySettings.showEventName || (data.displaySettings.showEventDescription && event.description.length > 0) || (data.displaySettings.showEventRegistration && event.registrationURL.length !== 0))}
+							<div class="extrastuff overflow-hidden">
+								<div class="info">
+									{#if data.displaySettings.showEventName}
+										<h2 class="text-2xl">{event.name}</h2>
+									{/if}
 
-                                    {#if data.displaySettings.showEventDescription && event.description.length > 0}
-                                        <p class="text-sm">{event.description}</p>
-                                    {/if}
+									{#if data.displaySettings.showEventDescription && event.description.length > 0}
+										<p class="text-sm">{event.description}</p>
+									{/if}
 
-                                    {#if data.displaySettings.showEventRegistration && event.registrationURL.length !== 0}
-                                        <a href={event.registrationURL} class="flex items-center gap-1" target="_blank">
-                                            Register Now
-                                            <SquareArrowOutUpRight class="h-4 w-4" />
-                                        </a>
-                                    {/if}
-                                </div>
-                            </div>
-                        {/if}
-                    </AspectRatio>
-                </Carousel.Item>
-            {/each}
-            {#each data.customEvents as customImage (`anCustomImage${customImage.id}`)}
-                <Carousel.Item class="w-screen h-screen">
-                    <AspectRatio ratio={16 / 9} class="relative max-w-screen max-h-screen aspect-video centered-div">
-                        <img src="{data.apiServer}api/files/{customImage.collectionId}/{customImage.id}/{customImage.picture}" alt={customImage.linkText} class="w-full h-full">
-                        {#if data.displaySettings.showEventExtraInfo && (data.displaySettings.showEventRegistration && customImage.showLink && customImage.registrationURL.length !== 0)}
-                            <div class="extrastuff overflow-hidden">
-                                <div class="info">
-                                    <a href={customImage.registrationURL} class="flex items-center gap-1" target="_blank">
-                                        {customImage.linkText}
-                                        <SquareArrowOutUpRight class="h-4 w-4" />
-                                    </a>
-                                </div>
-                            </div>
-                        {/if}
-                    </AspectRatio>
-                </Carousel.Item>
-            {/each}
-            {#if data.additionalCalendars}
-                {#each data.additionalCalendars as additionalCalendar (`anAdditionalCalendar${additionalCalendar.id}`)}
-                    <Carousel.Item class="w-screen h-screen">
-                        <AspectRatio ratio={16 / 9} class="relative max-w-screen max-h-screen aspect-video centered-div">
-                            <div id="cal-root" class="dark min-h-screen w-full bg-background relative">
-                                <Calendar calId={additionalCalendar.id} autoUpdate={false} events={filterEventsBasedOnTagAndResourceFilters(data.events, additionalCalendar.filters)} displaySettings={additionalCalendar.displaySettings} timeZone={timeZone} filters={additionalCalendar.filters} />
-                            </div>
-                        </AspectRatio>
-                    </Carousel.Item>
-                {/each}
-            {/if}
-        </Carousel.Content>
-    </Carousel.Root>
+									{#if data.displaySettings.showEventRegistration && event.registrationURL.length !== 0}
+										<a href={event.registrationURL} class="flex items-center gap-1" target="_blank">
+											Register Now
+											<SquareArrowOutUpRight class="h-4 w-4" />
+										</a>
+									{/if}
+								</div>
+							</div>
+						{/if}
+					</AspectRatio>
+				</Carousel.Item>
+			{/each}
+			{#each data.customEvents as customImage (`anCustomImage${customImage.id}`)}
+				<Carousel.Item class="w-screen h-screen">
+					<AspectRatio
+						ratio={16 / 9}
+						class="relative max-w-screen max-h-screen aspect-video centered-div"
+					>
+						<img
+							src="{data.apiServer}api/files/{customImage.collectionId}/{customImage.id}/{customImage.picture}"
+							alt={customImage.linkText}
+							class="w-full h-full"
+						/>
+						{#if data.displaySettings.showEventExtraInfo && data.displaySettings.showEventRegistration && customImage.showLink && customImage.registrationURL.length !== 0}
+							<div class="extrastuff overflow-hidden">
+								<div class="info">
+									<a
+										href={customImage.registrationURL}
+										class="flex items-center gap-1"
+										target="_blank"
+									>
+										{customImage.linkText}
+										<SquareArrowOutUpRight class="h-4 w-4" />
+									</a>
+								</div>
+							</div>
+						{/if}
+					</AspectRatio>
+				</Carousel.Item>
+			{/each}
+			{#if data.additionalCalendars}
+				{#each data.additionalCalendars as additionalCalendar (`anAdditionalCalendar${additionalCalendar.id}`)}
+					<Carousel.Item class="w-screen h-screen">
+						<AspectRatio
+							ratio={16 / 9}
+							class="relative max-w-screen max-h-screen aspect-video centered-div"
+						>
+							<div id="cal-root" class="dark min-h-screen w-full bg-background relative">
+								<Calendar
+									calId={additionalCalendar.id}
+									autoUpdate={false}
+									events={filterEventsBasedOnTagAndResourceFilters(
+										data.events,
+										additionalCalendar.filters
+									)}
+									displaySettings={additionalCalendar.displaySettings}
+									{timeZone}
+									filters={additionalCalendar.filters}
+								/>
+							</div>
+						</AspectRatio>
+					</Carousel.Item>
+				{/each}
+			{/if}
+		</Carousel.Content>
+	</Carousel.Root>
 </div>
 
 <style>
-    :global(*) {
-        box-sizing: border-box;
-        box-sizing: border-box;
-        /* Standard property */
-        /* user-drag: none; */
-        /* WebKit (Chrome, Safari, newer Opera) */
-        -webkit-user-drag: none;
-        /* Firefox (older versions) */
-        -moz-user-drag: none;
-        /* Internet Explorer (older versions) */
-        -ms-user-drag: none;
-        -webkit-user-select: none; /* Safari */
-        user-select: none; /* Standard syntax */
-    }
+	:global(*) {
+		box-sizing: border-box;
+		box-sizing: border-box;
+		/* Standard property */
+		/* user-drag: none; */
+		/* WebKit (Chrome, Safari, newer Opera) */
+		-webkit-user-drag: none;
+		/* Firefox (older versions) */
+		-moz-user-drag: none;
+		/* Internet Explorer (older versions) */
+		-ms-user-drag: none;
+		-webkit-user-select: none; /* Safari */
+		user-select: none; /* Standard syntax */
+	}
 
-    :global(body) {
-        margin: 0;
-        padding: 0;
-        background:none transparent;
-    }
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background: none transparent;
+	}
 
-    :global(.centered-div) {
-        margin: 0 auto;
-        position: absolute;
-        max-width: 100vw;
-        max-height: 100vh;
-        width: calc(min(100vw, 100vh * 16 / 9));
-        height: calc(min(100vh, 100vw * 9 / 16));
-    }
+	:global(.centered-div) {
+		margin: 0 auto;
+		position: absolute;
+		max-width: 100vw;
+		max-height: 100vh;
+		width: calc(min(100vw, 100vh * 16 / 9));
+		height: calc(min(100vh, 100vw * 9 / 16));
+	}
 
-    .extrastuff {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 82%, rgba(0, 0, 0, 1) 100%) !important;
-        display: flex;
-        align-items: flex-end;
-        justify-content: space-between;
-        padding: 10px;
-    }
+	.extrastuff {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0) 0%,
+			rgba(255, 255, 255, 0) 82%,
+			rgba(0, 0, 0, 1) 100%
+		) !important;
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		padding: 10px;
+	}
 
-    .info {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-    }
+	.info {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
 
-    .extrastuff h2,
-    .extrastuff p,
-    .extrastuff a {
-        color: #ffffff;
-        font-family: "Geist", sans-serif;
-    }
+	.extrastuff h2,
+	.extrastuff p,
+	.extrastuff a {
+		color: #ffffff;
+		font-family: "Geist", sans-serif;
+	}
 
-    .extrastuff a {
-        margin-top: 5px;
-        border: 1px solid #ffffff;
-        width: fit-content;
-        padding: 5px;
-    }
-</style>
\ No newline at end of file
+	.extrastuff a {
+		margin-top: 5px;
+		border: 1px solid #ffffff;
+		width: fit-content;
+		padding: 5px;
+	}
+</style>
diff --git a/frontend/src/routes/ifeedPreview/+error.svelte b/frontend/src/routes/ifeedPreview/+error.svelte
index 0b74f5c..e98ea0a 100644
--- a/frontend/src/routes/ifeedPreview/+error.svelte
+++ b/frontend/src/routes/ifeedPreview/+error.svelte
@@ -1,38 +1,52 @@
 <script>
-    import { page } from "$app/state";
-    import { AlertCircle, RefreshCw } from "@lucide/svelte";
+	import { page } from "$app/state";
+	import { AlertCircle, RefreshCw } from "@lucide/svelte";
 </script>
 
 <svelte:head>
-    <title>{page.status} {page.error?.message}</title>
+	<title>{page.status} {page.error?.message}</title>
 </svelte:head>
 
 <main class="dark min-h-screen w-full flex items-center justify-center bg-background" style="">
-    <div class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center">
-        <div class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50">
-            <AlertCircle class="h-10 w-10 text-red-500" />
-        </div>
+	<div
+		class="mx-auto flex min-h-[60vh] max-w-2xl flex-col items-center justify-center px-6 text-center"
+	>
+		<div
+			class="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-red-950/30 border border-red-900/50"
+		>
+			<AlertCircle class="h-10 w-10 text-red-500" />
+		</div>
 
-        <h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
+		<h2 class="dark mb-3 text-2xl font-bold text-white">{page.status} {page.error?.message}</h2>
 
-        <p class="dark mb-8 max-w-md text-gray-500">
-            {#if page.status === 404}
-                We couldn't find the image feed you're looking for. This might be due to an invalid link or the feed may not exist.
-            {:else}
-                An error has occured. Please wait and try again. If the error keeps happening, contact our support team.
-            {/if}
-        </p>
+		<p class="dark mb-8 max-w-md text-gray-500">
+			{#if page.status === 404}
+				We couldn't find the image feed you're looking for. This might be due to an invalid link or
+				the feed may not exist.
+			{:else}
+				An error has occured. Please wait and try again. If the error keeps happening, contact our
+				support team.
+			{/if}
+		</p>
 
-            <a
-                data-sveltekit-preload-data="off"
-                href={page.url.toString()}
-                class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
-                >
-                <RefreshCw class="h-4 w-4" />
-                Try Again
-            </a>
+		<a
+			data-sveltekit-preload-data="off"
+			href={page.url.toString()}
+			class="dark flex items-center gap-2 rounded-lg bg-white px-6 py-3 font-medium text-black transition-colors hover:bg-gray-200"
+		>
+			<RefreshCw class="h-4 w-4" />
+			Try Again
+		</a>
 
-        <div class="dark mt-8 text-sm text-gray-500">Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a></div>
-        <div class="dark mt-1 text-sm text-gray-500"><a href="https://uptime.stephengruzin.dev/status/infosections" target="_blank" class="underline">Status Page</a></div>
-    </div>
-</main>
\ No newline at end of file
+		<div class="dark mt-8 text-sm text-gray-500">
+			Need help? <a href="mailto:support@infosections.com" class="underline">Contact support</a>
+		</div>
+		<div class="dark mt-1 text-sm text-gray-500">
+			<a
+				href="https://uptime.stephengruzin.dev/status/infosections"
+				target="_blank"
+				class="underline">Status Page</a
+			>
+		</div>
+	</div>
+</main>
diff --git a/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts b/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts
index c10d60c..762cddb 100644
--- a/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts
+++ b/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts
@@ -1,4 +1,9 @@
-import { eventFieldRequirementsPublic, resourcesExpandRequirementsPublic, tagsExpandRequirementsPublic, type EventDBModelExpanded } from "@/event.utils";
+import {
+	eventFieldRequirementsPublic,
+	resourcesExpandRequirementsPublic,
+	tagsExpandRequirementsPublic,
+	type EventDBModelExpanded
+} from "@/event.utils";
 import type { CalendarCustomizations, CalendarFilters } from "@/cal.utils";
 import type { CustomImageIFeedDBModel, ImageFeedDBModel } from "@/utils";
 import { Temporal } from "temporal-polyfill";
@@ -8,105 +13,115 @@ import { config } from "dotenv";
 config();
 
 export async function load({ params, locals }) {
-    let imageFeed: ImageFeedDBModel;
-    try {
-        imageFeed = await locals.pb.collection('imageFeeds').getOne(params.slug, {
-            expand: "additionalCalendars",
-            fields: "*,expand.additionalCalendars.displaySettings,expand.additionalCalendars.filters,expand.additionalCalendars.id",
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Image Feed not found.", err);
-        return error(404, "Image Feed Not Found");
-    }
-
-    const additionalCalendars: {displaySettings: CalendarCustomizations, filters: CalendarFilters, id: string}[] = imageFeed.expand ? imageFeed.expand["additionalCalendars"] : [];
-
-    // These variables and the for loop checks if any of the cals need to access a private event. If so, we need to change the event fetch filtering.
-    let visibleInChurchCenterEventRequired = false;
-    let featuredEventRequired = false;
-
-    if (additionalCalendars) {
-        for (let i=0;i<additionalCalendars.length;i++) {
-            const currentAdditionalCal = additionalCalendars[i];
-            if (currentAdditionalCal && currentAdditionalCal.filters.onlyShowFeatured === false) {
-                featuredEventRequired = true;
-            }
-    
-            if (currentAdditionalCal && currentAdditionalCal.filters.hideUnpublished === false) {
-                visibleInChurchCenterEventRequired = true;
-            }
-        }
-    }
-    
-    const today = Temporal.Now.zonedDateTimeISO().startOfDay();
-    const monthAgo = today.subtract({ days: today.day + 7 });
-    const monthAgoStr = `${monthAgo.year}-${(monthAgo.month).toString().padStart(2, '0')}-${(monthAgo.day).toString().padStart(2, '0')}`;
-
-    let events: EventDBModelExpanded[] = [];
-    try {
-        let filter = `startTime > "${monthAgoStr}"`;
-
-        // This filter shows all events for the testing dev feed.
-        if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
-            filter += ` && owner = "${imageFeed.owner}"`;
-        }
-
-        if (imageFeed.filters.onlyShowFeatured && !featuredEventRequired) {
-            filter += " && featured=true"
-        }
-
-        if (imageFeed.filters.hideUnpublished && !visibleInChurchCenterEventRequired) {
-            filter += " && visibleInChurchCenter=true"
-        }
-
-        events = await locals.pb.collection('events').getFullList({
-            filter,
-            expand: "tags,resources",
-            sort: 'startTime',
-            fields: eventFieldRequirementsPublic + "," + tagsExpandRequirementsPublic + "," + resourcesExpandRequirementsPublic,
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Events not found.", err);
-        return error(500, "Internal Server error.");
-    }
-
-    let customEvents: CustomImageIFeedDBModel[] = [];
-    try {
-        let filter = `picture != "" && imageFeed ~ "${imageFeed.id}"`;
-
-        // This filter shows all events for the testing dev feed.
-        if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
-            filter += ` && owner = "${imageFeed.owner}"`;
-        }
-
-        customEvents = await locals.pb.collection('customImageIfeed').getFullList({
-            filter,
-            fields: "id,picture,registrationURL,created,updated,collectionId,showLink,linkText",
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    } catch (err) {
-        console.log("Custom events not found.", err);
-        customEvents = [];
-    }
-
-    return {
-        events,
-        customEvents,
-        name: imageFeed.name,
-        logoLink: locals.pb.files.getURL(imageFeed, imageFeed.logo.toString()),
-        displaySettings: imageFeed.displaySettings,
-        description: imageFeed.description,
-        apiServer: process.env["PB_URL"]!,
-        additionalCalendars,
-        filters: imageFeed.filters,
-        id: params.slug
-    }
-}
\ No newline at end of file
+	let imageFeed: ImageFeedDBModel;
+	try {
+		imageFeed = await locals.pb.collection("imageFeeds").getOne(params.slug, {
+			expand: "additionalCalendars",
+			fields:
+				"*,expand.additionalCalendars.displaySettings,expand.additionalCalendars.filters,expand.additionalCalendars.id",
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Image Feed not found.", err);
+		return error(404, "Image Feed Not Found");
+	}
+
+	const additionalCalendars: {
+		displaySettings: CalendarCustomizations;
+		filters: CalendarFilters;
+		id: string;
+	}[] = imageFeed.expand ? imageFeed.expand["additionalCalendars"] : [];
+
+	// These variables and the for loop checks if any of the cals need to access a private event. If so, we need to change the event fetch filtering.
+	let visibleInChurchCenterEventRequired = false;
+	let featuredEventRequired = false;
+
+	if (additionalCalendars) {
+		for (let i = 0; i < additionalCalendars.length; i++) {
+			const currentAdditionalCal = additionalCalendars[i];
+			if (currentAdditionalCal && currentAdditionalCal.filters.onlyShowFeatured === false) {
+				featuredEventRequired = true;
+			}
+
+			if (currentAdditionalCal && currentAdditionalCal.filters.hideUnpublished === false) {
+				visibleInChurchCenterEventRequired = true;
+			}
+		}
+	}
+
+	const today = Temporal.Now.zonedDateTimeISO().startOfDay();
+	const monthAgo = today.subtract({ days: today.day + 7 });
+	const monthAgoStr = `${monthAgo.year}-${monthAgo.month.toString().padStart(2, "0")}-${monthAgo.day.toString().padStart(2, "0")}`;
+
+	let events: EventDBModelExpanded[] = [];
+	try {
+		let filter = `startTime > "${monthAgoStr}"`;
+
+		// This filter shows all events for the testing dev feed.
+		if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
+			filter += ` && owner = "${imageFeed.owner}"`;
+		}
+
+		if (imageFeed.filters.onlyShowFeatured && !featuredEventRequired) {
+			filter += " && featured=true";
+		}
+
+		if (imageFeed.filters.hideUnpublished && !visibleInChurchCenterEventRequired) {
+			filter += " && visibleInChurchCenter=true";
+		}
+
+		events = await locals.pb.collection("events").getFullList({
+			filter,
+			expand: "tags,resources",
+			sort: "startTime",
+			fields:
+				eventFieldRequirementsPublic +
+				"," +
+				tagsExpandRequirementsPublic +
+				"," +
+				resourcesExpandRequirementsPublic,
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Events not found.", err);
+		return error(500, "Internal Server error.");
+	}
+
+	let customEvents: CustomImageIFeedDBModel[] = [];
+	try {
+		let filter = `picture != "" && imageFeed ~ "${imageFeed.id}"`;
+
+		// This filter shows all events for the testing dev feed.
+		if (imageFeed.id !== "v7t0bmf8o0rqx5b") {
+			filter += ` && owner = "${imageFeed.owner}"`;
+		}
+
+		customEvents = await locals.pb.collection("customImageIfeed").getFullList({
+			filter,
+			fields: "id,picture,registrationURL,created,updated,collectionId,showLink,linkText",
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+	} catch (err) {
+		console.log("Custom events not found.", err);
+		customEvents = [];
+	}
+
+	return {
+		events,
+		customEvents,
+		name: imageFeed.name,
+		logoLink: locals.pb.files.getURL(imageFeed, imageFeed.logo.toString()),
+		displaySettings: imageFeed.displaySettings,
+		description: imageFeed.description,
+		apiServer: process.env["PB_URL"]!,
+		additionalCalendars,
+		filters: imageFeed.filters,
+		id: params.slug
+	};
+}
diff --git a/frontend/src/routes/ifeedPreview/[slug]/+page.svelte b/frontend/src/routes/ifeedPreview/[slug]/+page.svelte
index 544c578..795d138 100644
--- a/frontend/src/routes/ifeedPreview/[slug]/+page.svelte
+++ b/frontend/src/routes/ifeedPreview/[slug]/+page.svelte
@@ -1,225 +1,263 @@
 <script lang="ts">
-    import { filterEventsBasedOnTagAndResourceFilters } from "@/event.utils";
-    import { AspectRatio } from "@/components/ui/aspect-ratio/index.js";
-    import { SquareArrowOutUpRight } from "@lucide/svelte";
-    import { Temporal } from "temporal-polyfill";
-    import Calendar from '@/Calendar.svelte';
-
-    let { data } = $props();
-
-    let displaySettings = $derived(data.displaySettings);
-
-    let timeZone = $state(Temporal.Now.timeZoneId());
-    let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
-    let debugToggle = $state(false);
-
-    let eventIdUsed: string[] = [];
-
-    $effect(() => {
-        const observer = new ResizeObserver(() => {
-            window.parent.postMessage({ height: document.body.scrollHeight, frameId: "iframe" + data.id }, "*");
-        });
-
-        observer.observe(document.body);
-
-        return () => observer.disconnect();
-    });
-
-    let events = $derived(data.events.filter((event, index) => {
-        if (index === 0) {
-            eventIdUsed = [];
-        }
-        if (!(!event.featured && data.filters.onlyShowFeatured) && !(!event.visibleInChurchCenter && data.filters.hideUnpublished) && event.imageURL.length > 0) {
-            if (today.toInstant().epochMilliseconds < (new Date(event.startTime)).valueOf()) {
-                if (data.filters.hideRecurringEvents) {
-                    if (!eventIdUsed.includes(event.recEventId)) {
-                        eventIdUsed.push(event.recEventId);
-                        return true;
-                    }
-                } else {
-                    return true;
-                }
-            } else {
-                return false;
-            }
-        } else {
-            return false;
-        }
-    }));
-
-    function parentSentMessage(event: MessageEvent) {
-        try {
-            if (event.data.call === "displaySettings") {
-                displaySettings = JSON.parse(event.data.value);
-            } else if (event.data.call === "reloadPage") {
-                window.location.reload();
-            } else if (event.data.call === "toggleDebug") {
-                debugToggle = event.data.value === "1"
-            }
-        } catch(err) {
-            console.log("Failed to recieve date from the parent container");
-            console.log(err);
-        }
-    }
+	import { filterEventsBasedOnTagAndResourceFilters } from "@/event.utils";
+	import { AspectRatio } from "@/components/ui/aspect-ratio/index.js";
+	import { SquareArrowOutUpRight } from "@lucide/svelte";
+	import { Temporal } from "temporal-polyfill";
+	import Calendar from "@/Calendar.svelte";
+
+	let { data } = $props();
+
+	let displaySettings = $derived(data.displaySettings);
+
+	let timeZone = $state(Temporal.Now.timeZoneId());
+	let today = $state(Temporal.Now.zonedDateTimeISO(timeZone).startOfDay());
+	let debugToggle = $state(false);
+
+	let eventIdUsed: string[] = [];
+
+	$effect(() => {
+		const observer = new ResizeObserver(() => {
+			window.parent.postMessage(
+				{ height: document.body.scrollHeight, frameId: "iframe" + data.id },
+				"*"
+			);
+		});
+
+		observer.observe(document.body);
+
+		return () => observer.disconnect();
+	});
+
+	let events = $derived(
+		data.events.filter((event, index) => {
+			if (index === 0) {
+				eventIdUsed = [];
+			}
+			if (
+				!(!event.featured && data.filters.onlyShowFeatured) &&
+				!(!event.visibleInChurchCenter && data.filters.hideUnpublished) &&
+				event.imageURL.length > 0
+			) {
+				if (today.toInstant().epochMilliseconds < new Date(event.startTime).valueOf()) {
+					if (data.filters.hideRecurringEvents) {
+						if (!eventIdUsed.includes(event.recEventId)) {
+							eventIdUsed.push(event.recEventId);
+							return true;
+						}
+					} else {
+						return true;
+					}
+				} else {
+					return false;
+				}
+			} else {
+				return false;
+			}
+		})
+	);
+
+	function parentSentMessage(event: MessageEvent) {
+		try {
+			if (event.data.call === "displaySettings") {
+				displaySettings = JSON.parse(event.data.value);
+			} else if (event.data.call === "reloadPage") {
+				window.location.reload();
+			} else if (event.data.call === "toggleDebug") {
+				debugToggle = event.data.value === "1";
+			}
+		} catch (err) {
+			console.log("Failed to recieve date from the parent container");
+			console.log(err);
+		}
+	}
 </script>
 
 <svelte:head>
-    <title>{data.name}</title>
-    <link rel="shortcut icon" href={data.logoLink} type="image/x-icon">
-    <meta name="description" content={data.description}>
+	<title>{data.name}</title>
+	<link rel="shortcut icon" href={data.logoLink} type="image/x-icon" />
+	<meta name="description" content={data.description} />
 </svelte:head>
 
 <svelte:window onmessage={parentSentMessage} />
 
 <div class="h-screen w-screen grid grid-cols-1 bigger-grid">
-    {#each events as event (`anEvent${event.id}`)}
-        <div class="w-full">
-            <AspectRatio ratio={16 / 9} class="relative w-full aspect-video">
-                <img src={event.imageURL} alt={event.name} class="w-full h-full">
-                {#if displaySettings.showEventExtraInfo && (displaySettings.showEventName || (displaySettings.showEventDescription && event.description.length > 0) || (displaySettings.showEventRegistration && event.registrationURL.length !== 0))}
-                    <div class="extrastuff overflow-hidden">
-                        <div class="info">
-                            {#if displaySettings.showEventName}
-                                <h2 class="text-2xl">{event.name}</h2>
-                            {/if}
-
-                            {#if displaySettings.showEventDescription && event.description.length > 0}
-                                <p class="text-sm">{event.description}</p>
-                            {/if}
-
-                            {#if displaySettings.showEventRegistration && event.registrationURL.length !== 0}
-                                <a href={event.registrationURL} class="flex items-center gap-1" target="_blank">
-                                    Register Now
-                                    <SquareArrowOutUpRight class="h-4 w-4" />
-                                </a>
-                            {/if}
-                        </div>
-                    </div>
-                {/if}
-                {#if debugToggle}
-                    <div class="debugger">
-                        <p>Type: Event</p>
-                        <p>Id: {event.id}</p>
-                        <p>Recurring Id: {event.recEventId}</p>
-                        <p>Name: {event.name}</p>
-                        <p>Link href: <a href="{event.registrationURL}" class="underline" target="_blank">here</a></p>
-                        <p>Image href: <a href="{event.imageURL}" class="underline" target="_blank">here</a></p>
-                    </div>
-                {/if}
-            </AspectRatio>
-        </div>
-    {/each}
-    {#each data.customEvents as customImage (`anCustomImage${customImage.id}`)}
-        <div class="w-full">
-            <AspectRatio ratio={16 / 9} class="relative w-full aspect-video">
-                <img src="{data.apiServer}api/files/{customImage.collectionId}/{customImage.id}/{customImage.picture}" alt={customImage.linkText} class="w-full h-full">
-                {#if displaySettings.showEventExtraInfo && (displaySettings.showEventRegistration && customImage.showLink && customImage.registrationURL.length !== 0)}
-                    <div class="extrastuff overflow-hidden">
-                        <div class="info">
-                            <a href={customImage.registrationURL} class="flex items-center gap-1" target="_blank">
-                                {customImage.linkText}
-                                <SquareArrowOutUpRight class="h-4 w-4" />
-                            </a>
-                        </div>
-                    </div>
-                {/if}
-                {#if debugToggle}
-                    <div class="debugger">
-                        <p>Type: Custom Image</p>
-                        <p>Id: {customImage.id}</p>
-                        <p>Show Link: {customImage.showLink}</p>
-                        <p>Link href: <a href="{customImage.registrationURL}" class="underline" target="_blank">here</a></p>
-                    </div>
-                {/if}
-            </AspectRatio>
-        </div>
-    {/each}
-    {#if data.additionalCalendars}
-        {#each data.additionalCalendars as additionalCalendar (`anAdditionalCalendar${additionalCalendar.id}`)}
-            <div class="w-full">
-                <AspectRatio ratio={16 / 9} class="relative w-full aspect-video overflow-hidden">
-                    <p class="absolute bottom-0 left-1/2 -translate-x-1/2 text-red-500 z-200 bg-white/70 text-xs">*Looks better on bigger screens</p>
-                    <div class="dark bg-background relative overflow-hidden w-full h-full">
-                        <Calendar calId={additionalCalendar.id} autoUpdate={false} events={filterEventsBasedOnTagAndResourceFilters(data.events, additionalCalendar.filters)} displaySettings={additionalCalendar.displaySettings} timeZone={timeZone} filters={additionalCalendar.filters} />
-                    </div>
-                    {#if debugToggle}
-                        <div class="debugger">
-                            <p>Type: Calendar</p>
-                            <p>Id: {additionalCalendar.id}</p>
-                        </div>
-                    {/if}
-                </AspectRatio>
-            </div>
-        {/each}
-    {/if}
+	{#each events as event (`anEvent${event.id}`)}
+		<div class="w-full">
+			<AspectRatio ratio={16 / 9} class="relative w-full aspect-video">
+				<img src={event.imageURL} alt={event.name} class="w-full h-full" />
+				{#if displaySettings.showEventExtraInfo && (displaySettings.showEventName || (displaySettings.showEventDescription && event.description.length > 0) || (displaySettings.showEventRegistration && event.registrationURL.length !== 0))}
+					<div class="extrastuff overflow-hidden">
+						<div class="info">
+							{#if displaySettings.showEventName}
+								<h2 class="text-2xl">{event.name}</h2>
+							{/if}
+
+							{#if displaySettings.showEventDescription && event.description.length > 0}
+								<p class="text-sm">{event.description}</p>
+							{/if}
+
+							{#if displaySettings.showEventRegistration && event.registrationURL.length !== 0}
+								<a href={event.registrationURL} class="flex items-center gap-1" target="_blank">
+									Register Now
+									<SquareArrowOutUpRight class="h-4 w-4" />
+								</a>
+							{/if}
+						</div>
+					</div>
+				{/if}
+				{#if debugToggle}
+					<div class="debugger">
+						<p>Type: Event</p>
+						<p>Id: {event.id}</p>
+						<p>Recurring Id: {event.recEventId}</p>
+						<p>Name: {event.name}</p>
+						<p>
+							Link href: <a href={event.registrationURL} class="underline" target="_blank">here</a>
+						</p>
+						<p>Image href: <a href={event.imageURL} class="underline" target="_blank">here</a></p>
+					</div>
+				{/if}
+			</AspectRatio>
+		</div>
+	{/each}
+	{#each data.customEvents as customImage (`anCustomImage${customImage.id}`)}
+		<div class="w-full">
+			<AspectRatio ratio={16 / 9} class="relative w-full aspect-video">
+				<img
+					src="{data.apiServer}api/files/{customImage.collectionId}/{customImage.id}/{customImage.picture}"
+					alt={customImage.linkText}
+					class="w-full h-full"
+				/>
+				{#if displaySettings.showEventExtraInfo && displaySettings.showEventRegistration && customImage.showLink && customImage.registrationURL.length !== 0}
+					<div class="extrastuff overflow-hidden">
+						<div class="info">
+							<a href={customImage.registrationURL} class="flex items-center gap-1" target="_blank">
+								{customImage.linkText}
+								<SquareArrowOutUpRight class="h-4 w-4" />
+							</a>
+						</div>
+					</div>
+				{/if}
+				{#if debugToggle}
+					<div class="debugger">
+						<p>Type: Custom Image</p>
+						<p>Id: {customImage.id}</p>
+						<p>Show Link: {customImage.showLink}</p>
+						<p>
+							Link href: <a href={customImage.registrationURL} class="underline" target="_blank"
+								>here</a
+							>
+						</p>
+					</div>
+				{/if}
+			</AspectRatio>
+		</div>
+	{/each}
+	{#if data.additionalCalendars}
+		{#each data.additionalCalendars as additionalCalendar (`anAdditionalCalendar${additionalCalendar.id}`)}
+			<div class="w-full">
+				<AspectRatio ratio={16 / 9} class="relative w-full aspect-video overflow-hidden">
+					<p
+						class="absolute bottom-0 left-1/2 -translate-x-1/2 text-red-500 z-200 bg-white/70 text-xs"
+					>
+						*Looks better on bigger screens
+					</p>
+					<div class="dark bg-background relative overflow-hidden w-full h-full">
+						<Calendar
+							calId={additionalCalendar.id}
+							autoUpdate={false}
+							events={filterEventsBasedOnTagAndResourceFilters(
+								data.events,
+								additionalCalendar.filters
+							)}
+							displaySettings={additionalCalendar.displaySettings}
+							{timeZone}
+							filters={additionalCalendar.filters}
+						/>
+					</div>
+					{#if debugToggle}
+						<div class="debugger">
+							<p>Type: Calendar</p>
+							<p>Id: {additionalCalendar.id}</p>
+						</div>
+					{/if}
+				</AspectRatio>
+			</div>
+		{/each}
+	{/if}
 </div>
 
 <style>
-    :global(*) {
-        box-sizing: border-box;
-        /* Standard property */
-        /* user-drag: none; */
-        /* WebKit (Chrome, Safari, newer Opera) */
-        -webkit-user-drag: none;
-        /* Firefox (older versions) */
-        -moz-user-drag: none;
-        /* Internet Explorer (older versions) */
-        -ms-user-drag: none;
-        -webkit-user-select: none; /* Safari */
-        user-select: none; /* Standard syntax */
-    }
-
-    :global(body) {
-        margin: 0;
-        padding: 0;
-        background:none transparent;
-    }
-
-    .extrastuff {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 82%, rgba(0, 0, 0, 1) 100%) !important;
-        display: flex;
-        align-items: flex-end;
-        justify-content: space-between;
-        padding: 10px;
-    }
-
-    .debugger {
-        padding: 10px;
-        position: absolute;
-        top: 0;
-        right: 0;
-        background-color: #000000b6;
-        color: white;
-    }
-
-    .info {
-        display: flex;
-        flex-direction: column;
-        gap: 5px;
-    }
-
-    .extrastuff h2,
-    .extrastuff p,
-    .extrastuff a {
-        color: #ffffff;
-        font-family: "Geist", sans-serif;
-    }
-
-    .extrastuff a {
-        margin-top: 5px;
-        border: 1px solid #ffffff;
-        width: fit-content;
-        padding: 5px;
-    }
-
-    @media (width >= 350px) {
-        .bigger-grid {
-            grid-template-columns: repeat(2, minmax(0, 1fr));
-        }
-    }
-</style>
\ No newline at end of file
+	:global(*) {
+		box-sizing: border-box;
+		/* Standard property */
+		/* user-drag: none; */
+		/* WebKit (Chrome, Safari, newer Opera) */
+		-webkit-user-drag: none;
+		/* Firefox (older versions) */
+		-moz-user-drag: none;
+		/* Internet Explorer (older versions) */
+		-ms-user-drag: none;
+		-webkit-user-select: none; /* Safari */
+		user-select: none; /* Standard syntax */
+	}
+
+	:global(body) {
+		margin: 0;
+		padding: 0;
+		background: none transparent;
+	}
+
+	.extrastuff {
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		left: 0;
+		top: 0;
+		background: linear-gradient(
+			180deg,
+			rgba(255, 255, 255, 0) 0%,
+			rgba(255, 255, 255, 0) 82%,
+			rgba(0, 0, 0, 1) 100%
+		) !important;
+		display: flex;
+		align-items: flex-end;
+		justify-content: space-between;
+		padding: 10px;
+	}
+
+	.debugger {
+		padding: 10px;
+		position: absolute;
+		top: 0;
+		right: 0;
+		background-color: #000000b6;
+		color: white;
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		gap: 5px;
+	}
+
+	.extrastuff h2,
+	.extrastuff p,
+	.extrastuff a {
+		color: #ffffff;
+		font-family: "Geist", sans-serif;
+	}
+
+	.extrastuff a {
+		margin-top: 5px;
+		border: 1px solid #ffffff;
+		width: fit-content;
+		padding: 5px;
+	}
+
+	@media (width >= 350px) {
+		.bigger-grid {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+	}
+</style>
diff --git a/frontend/src/routes/layout.css b/frontend/src/routes/layout.css
index a6feb8d..d904a30 100644
--- a/frontend/src/routes/layout.css
+++ b/frontend/src/routes/layout.css
@@ -1,4 +1,4 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn-svelte/tailwind.css";
 @import "@fontsource-variable/inter";
@@ -53,7 +53,7 @@
 
 .dark {
 	--background: oklch(18.22% 0.00002 271.152);
-	--foreground: oklch(0.24 0 0);;
+	--foreground: oklch(0.24 0 0);
 	--card: oklch(1 0 0);
 	--card-foreground: oklch(0.145 0 0);
 	--popover: oklch(1 0 0);
@@ -88,7 +88,7 @@
 }
 
 @theme inline {
-	--font-sans: 'Inter Variable', sans-serif;
+	--font-sans: "Inter Variable", sans-serif;
 	--color-sidebar-ring: var(--sidebar-ring);
 	--color-sidebar-border: var(--sidebar-border);
 	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
diff --git a/frontend/src/routes/logout/+server.ts b/frontend/src/routes/logout/+server.ts
index 11eb8ca..a6d4e1b 100644
--- a/frontend/src/routes/logout/+server.ts
+++ b/frontend/src/routes/logout/+server.ts
@@ -1,23 +1,23 @@
-import { redirect } from '@sveltejs/kit';
+import { redirect } from "@sveltejs/kit";
 
 export function POST({ locals, cookies }) {
-    locals.pb.authStore.clear();
-    locals.user = undefined;
+	locals.pb.authStore.clear();
+	locals.user = undefined;
 
-    cookies.delete("pb_auth", {
-        path: "/"
-    });
+	cookies.delete("pb_auth", {
+		path: "/"
+	});
 
-    throw redirect(303, "/");
+	throw redirect(303, "/");
 }
 
 export function GET({ locals, cookies }) {
-    locals.pb.authStore.clear();
-    locals.user = undefined;
+	locals.pb.authStore.clear();
+	locals.user = undefined;
 
-    cookies.delete("pb_auth", {
-        path: "/"
-    });
+	cookies.delete("pb_auth", {
+		path: "/"
+	});
 
-    throw redirect(303, "/");
-}
\ No newline at end of file
+	throw redirect(303, "/");
+}
diff --git a/frontend/src/routes/oath/+server.ts b/frontend/src/routes/oath/+server.ts
index 411492d..1d16016 100644
--- a/frontend/src/routes/oath/+server.ts
+++ b/frontend/src/routes/oath/+server.ts
@@ -7,169 +7,185 @@ import { config } from "dotenv";
 config();
 
 export async function GET({ locals, url, cookies }) {
-    const expectedState = cookies.get("integrationState");
-    const expectedVerifier = cookies.get("integrationVerifier");
-    const expectedName = cookies.get("integrationName");
-
-    if (!expectedState || !expectedVerifier || !expectedName) {
-        return redirect(303, "/");
-    }
-
-    if (!locals.user) return redirect(303, "/");
-
-    let redirectURL;
-
-    if (dev) {
-        if (url.origin.includes(".dev")) {
-            redirectURL = url.origin.replace("http", "https") + "/oath";
-        } else {
-            redirectURL = url.origin + "/oath";
-        }
-    } else {
-        redirectURL = process.env["VITE_WEBSITE_URL"] + "/oath";
-    }
-        
-    const state = url.searchParams.get("state");
-    const code = url.searchParams.get("code");
-
-    if (!state || !code) {
-        return redirect(303, "/");
-    }
-
-    let provider: AuthProviderInfo | undefined;
-    try {
-        const authMethods = await locals.pb.collection("integration").listAuthMethods({
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-    
-        if (!authMethods.oauth2.enabled) {
-            console.log("Oath not enabled.");
-            return redirect(303, "/");
-        }
-    
-        for (let i=0;i<authMethods.oauth2.providers.length;i++) {
-            const currentProvider = authMethods.oauth2.providers[i];
-            if (currentProvider && currentProvider.name === expectedName) {
-                provider = currentProvider;
-            }
-        }
-    } catch (err) {
-        console.log("List auth methods error.", err);
-        return redirect(303, "/");
-    }
-
-    if (!provider) {
-        console.log("Provider not found.");
-        return redirect(303, "/");
-    }
-
-    if (expectedState != state) {
-        console.log("Returned state does not match expected state.");
-        return redirect(303, "/");
-    }
-
-    try {
-        const record = await locals.pb.collection('integration').getFirstListItem(`service="${provider.name}" && owner ="${locals.user.id}"`, {
-            headers: {
-                "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-            }
-        });
-
-        if (record) {
-            return redirect(303, "/dashboard");
-        }
-    } catch (_err) {
-        //All Good. The record doesnt exist.
-    }
-
-    if (provider.name === "twitter") {
-        try {
-            const token = await fetch("https://api.x.com/2/oauth2/token", {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/x-www-form-urlencoded",
-                    "Authorization": "Basic " + Buffer.from(`${process.env["X_OATH_CLIENT_ID"]!}:${process.env["X_OATH_CLIENT_SECRET"]!}`).toString("base64")
-                },
-                body: new URLSearchParams({
-                    grant_type: "authorization_code",
-                    code,
-                    redirect_uri: redirectURL,
-                    client_id: process.env["X_OATH_CLIENT_ID"]!,
-                    code_verifier: expectedVerifier
-                })
-            }).then(r => r.json());
-    
-            const in180Days = new Date(new Date().setDate((new Date()).getDate() + 180));
-            const in1hour = new Date(new Date().setHours((new Date()).getHours() + 1));
-            const in2hours = new Date(new Date().setHours((new Date()).getHours() + 2));
-    
-            await locals.pb.collection("integration").create({
-                owner: locals.user.id,
-                service: provider.name,
-                refreshToken: token.refresh_token,
-                accessToken: token.access_token,
-                refreshTokenExpires: in180Days,
-                accessTokenExpires: in2hours,
-                lastEventsFetch: in1hour,
-                password: "12345678",
-                passwordConfirm: "12345678",
-                prettyName: provider.displayName,
-                status: "connected"
-            }, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-        } catch (err) {
-            console.log("Error signing up with X oath", err);
-            return redirect(303, "/");
-        }
-    } else if (provider.name === "planningcenter") {
-        try {
-            const token = await fetch("https://api.planningcenteronline.com/oauth/token", {
-                method: "POST",
-                headers: {
-                    "Authorization": "Basic " + Buffer.from(`${process.env["PLANNING_CENTER_CLIENT_ID"]!}:${process.env["PLANNING_CENTER_CLIENT_SECRET"]!}`).toString("base64")
-                },
-                body: new URLSearchParams({
-                    grant_type: "authorization_code",
-                    code,
-                    redirect_uri: redirectURL,
-                    client_id: process.env["PLANNING_CENTER_CLIENT_ID"]!,
-                    code_verifier: expectedVerifier
-                })
-            }).then(r => r.json());
-    
-            const in89Days = new Date(new Date().setDate((new Date()).getDate() + 89));
-            const in1hour = new Date(new Date().setHours((new Date()).getHours() + 1));
-            const in2hours = new Date(new Date().setHours((new Date()).getHours() + 2));
-    
-            await locals.pb.collection("integration").create({
-                owner: locals.user.id,
-                service: provider.name,
-                refreshToken: token.refresh_token,
-                accessToken: token.access_token,
-                refreshTokenExpires: in89Days,
-                accessTokenExpires: in2hours,
-                lastEventsFetch: in1hour,
-                password: "12345678",
-                passwordConfirm: "12345678",
-                prettyName: provider.displayName,
-                status: "connected"
-            }, {
-                headers: {
-                    "Authorization": "Bearer " + process.env["POCKETBASE_TOKEN"]!
-                }
-            });
-        } catch (err) {
-            console.log("Error signing up with planning center oath", err);
-            return redirect(303, "/");
-        }
-    
-        await updateSpecificUserEvents();
-    }
-
-    return redirect(303, "/dashboard");
-}
\ No newline at end of file
+	const expectedState = cookies.get("integrationState");
+	const expectedVerifier = cookies.get("integrationVerifier");
+	const expectedName = cookies.get("integrationName");
+
+	if (!expectedState || !expectedVerifier || !expectedName) {
+		return redirect(303, "/");
+	}
+
+	if (!locals.user) return redirect(303, "/");
+
+	let redirectURL;
+
+	if (dev) {
+		if (url.origin.includes(".dev")) {
+			redirectURL = url.origin.replace("http", "https") + "/oath";
+		} else {
+			redirectURL = url.origin + "/oath";
+		}
+	} else {
+		redirectURL = process.env["VITE_WEBSITE_URL"] + "/oath";
+	}
+
+	const state = url.searchParams.get("state");
+	const code = url.searchParams.get("code");
+
+	if (!state || !code) {
+		return redirect(303, "/");
+	}
+
+	let provider: AuthProviderInfo | undefined;
+	try {
+		const authMethods = await locals.pb.collection("integration").listAuthMethods({
+			headers: {
+				Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+			}
+		});
+
+		if (!authMethods.oauth2.enabled) {
+			console.log("Oath not enabled.");
+			return redirect(303, "/");
+		}
+
+		for (let i = 0; i < authMethods.oauth2.providers.length; i++) {
+			const currentProvider = authMethods.oauth2.providers[i];
+			if (currentProvider && currentProvider.name === expectedName) {
+				provider = currentProvider;
+			}
+		}
+	} catch (err) {
+		console.log("List auth methods error.", err);
+		return redirect(303, "/");
+	}
+
+	if (!provider) {
+		console.log("Provider not found.");
+		return redirect(303, "/");
+	}
+
+	if (expectedState != state) {
+		console.log("Returned state does not match expected state.");
+		return redirect(303, "/");
+	}
+
+	try {
+		const record = await locals.pb
+			.collection("integration")
+			.getFirstListItem(`service="${provider.name}" && owner ="${locals.user.id}"`, {
+				headers: {
+					Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+				}
+			});
+
+		if (record) {
+			return redirect(303, "/dashboard");
+		}
+	} catch (_err) {
+		//All Good. The record doesnt exist.
+	}
+
+	if (provider.name === "twitter") {
+		try {
+			const token = await fetch("https://api.x.com/2/oauth2/token", {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/x-www-form-urlencoded",
+					Authorization:
+						"Basic " +
+						Buffer.from(
+							`${process.env["X_OATH_CLIENT_ID"]!}:${process.env["X_OATH_CLIENT_SECRET"]!}`
+						).toString("base64")
+				},
+				body: new URLSearchParams({
+					grant_type: "authorization_code",
+					code,
+					redirect_uri: redirectURL,
+					client_id: process.env["X_OATH_CLIENT_ID"]!,
+					code_verifier: expectedVerifier
+				})
+			}).then((r) => r.json());
+
+			const in180Days = new Date(new Date().setDate(new Date().getDate() + 180));
+			const in1hour = new Date(new Date().setHours(new Date().getHours() + 1));
+			const in2hours = new Date(new Date().setHours(new Date().getHours() + 2));
+
+			await locals.pb.collection("integration").create(
+				{
+					owner: locals.user.id,
+					service: provider.name,
+					refreshToken: token.refresh_token,
+					accessToken: token.access_token,
+					refreshTokenExpires: in180Days,
+					accessTokenExpires: in2hours,
+					lastEventsFetch: in1hour,
+					password: "12345678",
+					passwordConfirm: "12345678",
+					prettyName: provider.displayName,
+					status: "connected"
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+		} catch (err) {
+			console.log("Error signing up with X oath", err);
+			return redirect(303, "/");
+		}
+	} else if (provider.name === "planningcenter") {
+		try {
+			const token = await fetch("https://api.planningcenteronline.com/oauth/token", {
+				method: "POST",
+				headers: {
+					Authorization:
+						"Basic " +
+						Buffer.from(
+							`${process.env["PLANNING_CENTER_CLIENT_ID"]!}:${process.env["PLANNING_CENTER_CLIENT_SECRET"]!}`
+						).toString("base64")
+				},
+				body: new URLSearchParams({
+					grant_type: "authorization_code",
+					code,
+					redirect_uri: redirectURL,
+					client_id: process.env["PLANNING_CENTER_CLIENT_ID"]!,
+					code_verifier: expectedVerifier
+				})
+			}).then((r) => r.json());
+
+			const in89Days = new Date(new Date().setDate(new Date().getDate() + 89));
+			const in1hour = new Date(new Date().setHours(new Date().getHours() + 1));
+			const in2hours = new Date(new Date().setHours(new Date().getHours() + 2));
+
+			await locals.pb.collection("integration").create(
+				{
+					owner: locals.user.id,
+					service: provider.name,
+					refreshToken: token.refresh_token,
+					accessToken: token.access_token,
+					refreshTokenExpires: in89Days,
+					accessTokenExpires: in2hours,
+					lastEventsFetch: in1hour,
+					password: "12345678",
+					passwordConfirm: "12345678",
+					prettyName: provider.displayName,
+					status: "connected"
+				},
+				{
+					headers: {
+						Authorization: "Bearer " + process.env["POCKETBASE_TOKEN"]!
+					}
+				}
+			);
+		} catch (err) {
+			console.log("Error signing up with planning center oath", err);
+			return redirect(303, "/");
+		}
+
+		await updateSpecificUserEvents();
+	}
+
+	return redirect(303, "/dashboard");
+}
diff --git a/frontend/svelte.config.js b/frontend/svelte.config.js
index 5c034b2..f6196cf 100644
--- a/frontend/svelte.config.js
+++ b/frontend/svelte.config.js
@@ -1,5 +1,5 @@
-import adapter from "svelte-adapter-bun"; 
-import { relative, sep } from 'node:path';
+import adapter from "svelte-adapter-bun";
+import { relative, sep } from "node:path";
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -8,7 +8,7 @@ const config = {
 		runes: ({ filename }) => {
 			const relativePath = relative(import.meta.dirname, filename);
 			const pathSegments = relativePath.toLowerCase().split(sep);
-			const isExternalLibrary = pathSegments.includes('node_modules');
+			const isExternalLibrary = pathSegments.includes("node_modules");
 
 			return isExternalLibrary ? undefined : true;
 		}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 029a779..e8d0c86 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -22,7 +22,7 @@
 		"noPropertyAccessFromIndexSignature": true,
 		"erasableSyntaxOnly": true,
 		"noImplicitOverride": true,
-		"noErrorTruncation": true,
+		"noErrorTruncation": true
 		// "exactOptionalPropertyTypes": true
 	}
 	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 6aed00e..55dd80a 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,12 +1,10 @@
-import tailwindcss from '@tailwindcss/vite';
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import tailwindcss from "@tailwindcss/vite";
+import { sveltekit } from "@sveltejs/kit/vite";
+import { defineConfig } from "vite";
 
 export default defineConfig({
-    plugins: [tailwindcss(), sveltekit()],
-    server: {
-        allowedHosts: [
-            "caldev.stephengruzin.dev"
-        ]
-    }
+	plugins: [tailwindcss(), sveltekit()],
+	server: {
+		allowedHosts: ["caldev.stephengruzin.dev"]
+	}
 });

From 022d6fad91ac3212406d867e9ed8fe80c5667254 Mon Sep 17 00:00:00 2001
From: Stephen Gruzin <stephengrzn@gmail.com>
Date: Tue, 21 Jul 2026 20:19:42 -0700
Subject: [PATCH 6/6] Fixed the sketchy fullscreen code by ignoring the stuff

---
 frontend/src/lib/utils.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index f2d8004..447873a 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -124,12 +124,14 @@ export interface EventListDBModel extends RecordModel {
 // Dont you dare judge
 export function toggleFullScreen() {
 	const elem = document.documentElement;
-	// ## The below if statement seems to work better ## if ((document.fullScreenElement && document.fullScreenElement !== null) || (document.msfullscreenElement && document.msfullscreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
-	//@ts-ignore
 	if (
+		//@ts-ignore
 		(document.fullScreenElement !== undefined && document.fullScreenElement === null) ||
+		//@ts-ignore
 		(document.msFullscreenElement !== undefined && document.msFullscreenElement === null) ||
+		//@ts-ignore
 		(document.mozFullScreen !== undefined && !document.mozFullScreen) ||
+		//@ts-ignore
 		(document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)
 	) {
 		//@ts-ignore