diff --git a/.github/workflows/check.yml b/.github/workflows/check.yml
new file mode 100644
index 0000000..d530771
--- /dev/null
+++ b/.github/workflows/check.yml
@@ -0,0 +1,25 @@
+name: Frontend Check
+
+on: [push, pull_request]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        # Uses the official action to install Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Install dependencies
+        run: bun install
+        working-directory: ./frontend
+
+      - name: Run check script
+        # This executes the "check" script defined in your package.json
+        run: bun run check
+        working-directory: ./frontend
\ No newline at end of file
diff --git a/.github/workflows/frontend.yml b/.github/workflows/frontend.yml
index f69deb4..26418fa 100644
--- a/.github/workflows/frontend.yml
+++ b/.github/workflows/frontend.yml
@@ -3,6 +3,10 @@ name: Docker Build InfoSections frontend
 on:
     push:
         branches: [ release ]
+    workflow_run:
+      workflows: ["Frontend Check"]
+      types:
+        - completed
 
 jobs:
   build:
diff --git a/frontend/src/lib/ACalToAdd.svelte b/frontend/src/lib/ACalToAdd.svelte
index b7415cb..9d3bdcf 100644
--- a/frontend/src/lib/ACalToAdd.svelte
+++ b/frontend/src/lib/ACalToAdd.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { CalendarDBModel } from "./utils";
+    import type { CalendarDBModel } from "./cal.utils";
 
     let {
         calendar,
@@ -21,7 +21,7 @@
         bind:checked={checked}
         onchange={(event) => addToCalsToAdd(event, calendar.id)}
     />
-    <label for="caltoadd{calendar.id}" class="w-full h-full block p-2 flex items-center gap-2 cursor-pointer">
+    <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>
diff --git a/frontend/src/lib/AnIncludedCalendar.svelte b/frontend/src/lib/AnIncludedCalendar.svelte
index 7a42f38..b3e794c 100644
--- a/frontend/src/lib/AnIncludedCalendar.svelte
+++ b/frontend/src/lib/AnIncludedCalendar.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
     import { Shield, CalendarDays, TriangleAlert, X } from "@lucide/svelte";
-    import { type CalendarDBModel } from "@/utils";
-    import { Button } from "@/components/ui/button";
     import * as Tooltip from "$lib/components/ui/tooltip/index.js";
+    import { type CalendarDBModel } from "@/cal.utils";
+    import { Button } from "@/components/ui/button";
 
     let { 
         calendarId,
diff --git a/frontend/src/lib/Calendar.svelte b/frontend/src/lib/Calendar.svelte
index 8d0d872..5bebf3b 100644
--- a/frontend/src/lib/Calendar.svelte
+++ b/frontend/src/lib/Calendar.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { CalendarCustomizations, CalendarFilters } from "./utils";
+    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";
diff --git a/frontend/src/lib/Day.svelte b/frontend/src/lib/Day.svelte
index 6131bdd..30775b2 100644
--- a/frontend/src/lib/Day.svelte
+++ b/frontend/src/lib/Day.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { dateRangeOverlaps, LONGDAYTOSTRING, MONTHTOSTRING, type CalendarCustomizations, type CalendarFilters } from "./utils";
+    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";
diff --git a/frontend/src/lib/Event.svelte b/frontend/src/lib/Event.svelte
index fc11aea..4921e3d 100644
--- a/frontend/src/lib/Event.svelte
+++ b/frontend/src/lib/Event.svelte
@@ -1,10 +1,11 @@
 <script lang="ts">
     import { CalendarPlus, ClipboardClock, Clock, MapPin } from "@lucide/svelte";
-    import { MONTHTOSTRING, type CalendarCustomizations } from "./utils";
-    import EventResources from "./EventResources.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 }: { event: EventDBModelExpanded, currentDay: Temporal.ZonedDateTime, calendarCustomizations: CalendarCustomizations, timeZone: Temporal.TimeZoneLike } = $props();
diff --git a/frontend/src/lib/EventResources.svelte b/frontend/src/lib/EventResources.svelte
index bcde13f..d6fc695 100644
--- a/frontend/src/lib/EventResources.svelte
+++ b/frontend/src/lib/EventResources.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
+    import type { EventDBModelExpanded } from "./event.utils";
     import { Package,  Warehouse } from "@lucide/svelte";
-    import type { EventDBModel, EventDBModelExpanded } from "./event.utils";
 
     let { resources, showResourcePathname, showResources, showRooms }: { resources: EventDBModelExpanded["expand"]["resources"], showResourcePathname: boolean, showResources: boolean, showRooms: boolean } = $props();
 
-    let res: Exclude<EventDBModel["resources"], null> = $state([]);
-    let rooms: Exclude<EventDBModel["resources"], null> = $state([]);
+    let res: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
+    let rooms: Exclude<EventDBModelExpanded["expand"]["resources"], null> = $state([]);
 
     $effect(() => {
         if (resources && resources !== null) {
diff --git a/frontend/src/lib/EverythingSearch.svelte b/frontend/src/lib/EverythingSearch.svelte
index 2ec8f52..4e0d27f 100644
--- a/frontend/src/lib/EverythingSearch.svelte
+++ b/frontend/src/lib/EverythingSearch.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import type { CalendarDBModel, EventListDBModel, ImageFeedDBModel } from "./utils";
+    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";
diff --git a/frontend/src/lib/IncludedCalendars.svelte b/frontend/src/lib/IncludedCalendars.svelte
index d2eb5e1..54f0d8c 100644
--- a/frontend/src/lib/IncludedCalendars.svelte
+++ b/frontend/src/lib/IncludedCalendars.svelte
@@ -3,8 +3,8 @@
     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 { type CalendarDBModel } from "@/utils";
     import { CalendarDays } from "@lucide/svelte";
     import ACalToAdd from "./ACalToAdd.svelte";
     import { toast } from "svelte-sonner";
@@ -107,7 +107,7 @@
 </div>
 
 <Dialog.Root bind:open={includeACalendarPopup}>
-    <Dialog.Content class="sm:max-w-[500px] max-h-screen overflow-y-auto" style="max-height: calc(100vh - 50px);">
+    <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.
diff --git a/frontend/src/lib/cal.utils.ts b/frontend/src/lib/cal.utils.ts
new file mode 100644
index 0000000..37ff1d2
--- /dev/null
+++ b/frontend/src/lib/cal.utils.ts
@@ -0,0 +1,64 @@
+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
+}
+
+export const defaultCalendarCustomizations: CalendarCustomizations = {
+	viewType: "3day",
+	useAMPM: true,
+	showResourcePathname: false,
+	onlyShowLocationTitle: false,
+	showLocation: true,
+	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
+};
+
+export const defaultCalendarFilters: CalendarFilters = {
+	hideUnpublished: true,
+	onlyShowFeatured: true,
+	resourceFilterType: "block",
+	allowResources: [],
+	blockResources: [],
+	enableResourceFiltering: false,
+	tagFilterType: "block",
+	allowTags: [],
+	blockTags: [],
+	enableTagFiltering: false
+}
+
+export interface CalendarDBModel extends RecordModel {
+	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
diff --git a/frontend/src/lib/calendar/monthView/MonthCalView.svelte b/frontend/src/lib/calendar/monthView/MonthCalView.svelte
index ce1b567..293b2a8 100644
--- a/frontend/src/lib/calendar/monthView/MonthCalView.svelte
+++ b/frontend/src/lib/calendar/monthView/MonthCalView.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { getDaysInMonth, type CalendarCustomizations } from "../../utils";
+    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 {
diff --git a/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte b/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte
index 90d7e21..c405bbb 100644
--- a/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte
+++ b/frontend/src/lib/calendar/monthView/MonthCalViewDay.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { cn, getEventsForDate, isSameDay, type CalendarCustomizations } from "../../utils";
     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";
 
diff --git a/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte b/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte
index 83d590d..0c7092a 100644
--- a/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte
+++ b/frontend/src/lib/calendar/monthView/MonthCalViewDayEvent.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import type { CalendarCustomizations } from "@/utils";
+    import type { CalendarCustomizations } from "@/cal.utils";
     import type { EventDBModel } from "@/event.utils";
     import { Temporal } from "temporal-polyfill";
     import Time from "@/Time.svelte";
diff --git a/frontend/src/lib/calendar/weekView/WeekCalView.svelte b/frontend/src/lib/calendar/weekView/WeekCalView.svelte
index 37e2afc..97db19f 100644
--- a/frontend/src/lib/calendar/weekView/WeekCalView.svelte
+++ b/frontend/src/lib/calendar/weekView/WeekCalView.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { getDayRange, type CalendarCustomizations } 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,
diff --git a/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte b/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte
index 1b2de84..cb8b3b2 100644
--- a/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte
+++ b/frontend/src/lib/calendar/weekView/WeekCalViewDay.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { cn, getEventsForDate, isSameDay, type CalendarCustomizations } from "../../utils";
     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";
 
diff --git a/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte b/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte
index e044a22..24092b3 100644
--- a/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte
+++ b/frontend/src/lib/calendar/weekView/WeekCalViewDayEvent.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-    import { type CalendarCustomizations, MONTHTOSTRING } from "@/utils";
+    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 }: { event: EventDBModel, currentDay: Temporal.ZonedDateTime, calendarCustomizations: CalendarCustomizations, timeZone: Temporal.TimeZoneLike } = $props();
diff --git a/frontend/src/lib/components/ui/checkbox/checkbox.svelte b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
index 0a2b010..8defc2c 100644
--- a/frontend/src/lib/components/ui/checkbox/checkbox.svelte
+++ b/frontend/src/lib/components/ui/checkbox/checkbox.svelte
@@ -17,7 +17,7 @@
 	bind:ref
 	data-slot="checkbox"
 	class={cn(
-		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-lg border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
diff --git a/frontend/src/lib/components/ui/item/index.ts b/frontend/src/lib/components/ui/item/index.ts
new file mode 100644
index 0000000..168bc3e
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/index.ts
@@ -0,0 +1,34 @@
+import Root from "./item.svelte";
+import Group from "./item-group.svelte";
+import Separator from "./item-separator.svelte";
+import Header from "./item-header.svelte";
+import Footer from "./item-footer.svelte";
+import Content from "./item-content.svelte";
+import Title from "./item-title.svelte";
+import Description from "./item-description.svelte";
+import Actions from "./item-actions.svelte";
+import Media from "./item-media.svelte";
+
+export {
+	Root,
+	Group,
+	Separator,
+	Header,
+	Footer,
+	Content,
+	Title,
+	Description,
+	Actions,
+	Media,
+	//
+	Root as Item,
+	Group as ItemGroup,
+	Separator as ItemSeparator,
+	Header as ItemHeader,
+	Footer as ItemFooter,
+	Content as ItemContent,
+	Title as ItemTitle,
+	Description as ItemDescription,
+	Actions as ItemActions,
+	Media as ItemMedia,
+};
diff --git a/frontend/src/lib/components/ui/item/item-actions.svelte b/frontend/src/lib/components/ui/item/item-actions.svelte
new file mode 100644
index 0000000..4f661a3
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-actions.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-actions"
+	class={cn("gap-2 flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/item/item-content.svelte b/frontend/src/lib/components/ui/item/item-content.svelte
new file mode 100644
index 0000000..2649b79
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-content.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-content"
+	class={cn(
+		"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/item/item-description.svelte b/frontend/src/lib/components/ui/item/item-description.svelte
new file mode 100644
index 0000000..a15632b
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-description.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="item-description"
+	class={cn(
+		"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/frontend/src/lib/components/ui/item/item-footer.svelte b/frontend/src/lib/components/ui/item/item-footer.svelte
new file mode 100644
index 0000000..cd68c38
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-footer"
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/item/item-group.svelte b/frontend/src/lib/components/ui/item/item-group.svelte
new file mode 100644
index 0000000..3e58e36
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-group.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	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)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/item/item-header.svelte b/frontend/src/lib/components/ui/item/item-header.svelte
new file mode 100644
index 0000000..e1116f4
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-header.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-header"
+	class={cn("gap-2 flex basis-full items-center justify-between", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/item/item-media.svelte b/frontend/src/lib/components/ui/item/item-media.svelte
new file mode 100644
index 0000000..45def5a
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-media.svelte
@@ -0,0 +1,42 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemMediaVariants = tv({
+		base: "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+		variants: {
+			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",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type ItemMediaVariant = VariantProps<typeof itemMediaVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		variant = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { variant?: ItemMediaVariant } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="item-media"
+	data-variant={variant}
+	class={cn(itemMediaVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/item/item-separator.svelte b/frontend/src/lib/components/ui/item/item-separator.svelte
new file mode 100644
index 0000000..992541c
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-separator.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from "$lib/components/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="item-separator"
+	orientation="horizontal"
+	class={cn("my-2", className)}
+	{...restProps}
+/>
diff --git a/frontend/src/lib/components/ui/item/item-title.svelte b/frontend/src/lib/components/ui/item/item-title.svelte
new file mode 100644
index 0000000..c9a0f9b
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<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)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/item/item.svelte b/frontend/src/lib/components/ui/item/item.svelte
new file mode 100644
index 0000000..8eff328
--- /dev/null
+++ b/frontend/src/lib/components/ui/item/item.svelte
@@ -0,0 +1,61 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const itemVariants = tv({
+		base: "[a]:hover:bg-muted rounded-md border text-sm group/item focus-visible:border-ring focus-visible:ring-ring/50 flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:ring-[3px] [a]:transition-colors",
+		variants: {
+			variant: {
+				default: "border-transparent",
+				outline: "border-border",
+				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",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	});
+
+	export type ItemSize = VariantProps<typeof itemVariants>["size"];
+	export type ItemVariant = VariantProps<typeof itemVariants>["variant"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		variant,
+		size,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		variant?: ItemVariant;
+		size?: ItemSize;
+	} = $props();
+
+	const mergedProps = $derived({
+		class: cn(itemVariants({ variant, size }), className),
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}
diff --git a/frontend/src/lib/dashboard/DashboardHeader.svelte b/frontend/src/lib/dashboard/DashboardHeader.svelte
index 6ff6b17..ead2eba 100644
--- a/frontend/src/lib/dashboard/DashboardHeader.svelte
+++ b/frontend/src/lib/dashboard/DashboardHeader.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { type CalendarDBModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
+    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";
 
diff --git a/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte b/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte
index 514b647..a9eb3d2 100644
--- a/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalDisplaySettings.svelte
@@ -1,7 +1,7 @@
 <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 type { CalendarCustomizations } from "@/utils";
     import * as Card from "@/components/ui/card/index";
     import { Label } from "@/components/ui/label";
     import { Switch } from "@/components/ui/switch";
diff --git a/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte b/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte
index ce7d0d4..a508981 100644
--- a/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalEventPreview.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
+    import type { CalendarCustomizations } from "@/cal.utils";
     import { Temporal } from "temporal-polyfill";
     import Event from "@/Event.svelte";
-    import type { CalendarCustomizations } from "@/utils";
 
     let {
         displaySettings,
@@ -25,6 +25,8 @@
     featured: true,
     description: "This is a short description of this event.",
     times: [],
+    resources: [],
+    tags: [],
     expand: {
         resources: [{
             resource_id: "res1",
diff --git a/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte b/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte
index 25aa879..08a9626 100644
--- a/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte
+++ b/frontend/src/lib/dashboard/calendar/CalFilterSettings.svelte
@@ -1,9 +1,12 @@
 <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 { Label } from "@/components/ui/label";
+    import type { CalendarFilters } from "@/cal.utils";
     import { Switch } from "@/components/ui/switch";
-    import type { CalendarFilters } from "@/utils";
+    import { Label } from "@/components/ui/label";
 
     let {
         filters,
@@ -13,6 +16,9 @@
         changed: boolean
     } = $props();
 
+    let myResources = $derived(await getMyEventResourcesPrivate());
+    let myTags = $derived(await getMyEventTagsPrivate());
+
     // svelte-ignore state_referenced_locally
     let filtersBindable = $state(filters);
     $effect(() => {filtersBindable = filters});
@@ -54,6 +60,146 @@
                     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>
+
+                    <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>
+                <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>
+
+                <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
diff --git a/frontend/src/lib/dashboard/home/MetricCards.svelte b/frontend/src/lib/dashboard/home/MetricCards.svelte
deleted file mode 100644
index bc95340..0000000
--- a/frontend/src/lib/dashboard/home/MetricCards.svelte
+++ /dev/null
@@ -1,72 +0,0 @@
-<script lang="ts">
-    import { cn } from "@/utils";
-    import { Calendar, CalendarDays, ImageIcon, LayoutList } from "@lucide/svelte";
-    import * as Card from "@/components/ui/card/index";
-
-    let { 
-        eventAmount,
-        eventListAmount,
-        imageFeedsAmount,
-        calendarsAmount
-    }: {
-        eventAmount: number,
-        eventListAmount: number,
-        imageFeedsAmount: number,
-        calendarsAmount: number
-    } = $props();
-
-    const metrics = $derived([
-        {
-            name: "Upcoming Events Synced",
-            value: eventAmount,
-            icon: Calendar,
-            description: "From Your Integrations",
-            accent: "text-blue-500",
-            bgAccent: "bg-blue-500/10",
-        },
-        {
-            name: "Event Lists",
-            value: eventListAmount,
-            icon: LayoutList,
-            description: "Created",
-            accent: "text-emerald-500",
-            bgAccent: "bg-emerald-500/10",
-        },
-        {
-            name: "Image Feeds",
-            value: imageFeedsAmount,
-            icon: ImageIcon,
-            description: "Created",
-            accent: "text-amber-500",
-            bgAccent: "bg-amber-500/10",
-        },
-        {
-            name: "Calendars",
-            value: calendarsAmount,
-            icon: CalendarDays,
-            description: "Created",
-            accent: "text-violet-500",
-            bgAccent: "bg-violet-500/10",
-        },
-    ]);
-</script>
-
-<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-    {#each metrics as metric (`metric${metric.name}`)}
-        <Card.Root class="bg-card">
-            <Card.Content class="p-6">
-                <div class="flex items-center justify-between">
-                    <div class={cn("flex h-10 w-10 items-center justify-center rounded-lg", metric.bgAccent)}>
-                        <metric.icon class={cn("h-5 w-5", metric.accent)} />
-                    </div>
-                </div>
-
-                <div class="mt-4">
-                    <p class="text-2xl font-bold">{metric.value}</p>
-                    <p class="text-sm font-medium">{metric.name}</p>
-                    <p class="text-xs text-muted-foreground">{metric.description}</p>
-                </div>
-            </Card.Content>
-        </Card.Root>
-    {/each}
-</div>
\ No newline at end of file
diff --git a/frontend/src/lib/dashboard/home/QuickActions.svelte b/frontend/src/lib/dashboard/home/QuickActions.svelte
deleted file mode 100644
index b9077ca..0000000
--- a/frontend/src/lib/dashboard/home/QuickActions.svelte
+++ /dev/null
@@ -1,51 +0,0 @@
-<script lang="ts">
-    import { Button } from "@/components/ui/button";
-    import * as Card from "@/components/ui/card/index";
-    import { refreshingEvents } from "@/utils";
-    import { LayoutList, ImageIcon, CalendarDays, RefreshCw } from "@lucide/svelte";
-    import { getMyIntegrations } from "../../../routes/(mainWebsite)/dashboard/backend.remote";
-
-    const actions = [
-        {
-            name: "New Event List",
-            icon: LayoutList,
-            description: "Create list view",
-            href: "/dashboard/event-lists?new=1"
-        },
-        {
-            name: "New Image Feed",
-            icon: ImageIcon,
-            description: "Create carousel",
-            href: "/dashboard/image-feeds?new=1"
-        },
-        {
-            name: "New Calendar",
-            icon: CalendarDays,
-            description: "Create calendar",
-            href: "/dashboard/calendars?new=1"
-        },
-    ]
-</script>
-
-<Card.Root>
-    <Card.Header>
-        <Card.Title class="text-base font-medium">Quick Actions</Card.Title>
-        <Card.Description>Create new views or sync events</Card.Description>
-    </Card.Header>
-    <Card.Content>
-        <div class="grid grid-cols-2 gap-2">
-            {#each actions as action (`anaction${action.name}`)}
-                <Button variant="outline" class="h-auto flex-col gap-2 py-4 bg-transparent" href={action.href}>
-                    <action.icon class="h-5 w-5 text-ring" />
-                    <span class="text-xs">{action.name}</span>
-                </Button>
-            {/each}
-            {#if (await getMyIntegrations()).filter((integration) => integration.service === "planningcenter").length > 0}
-                 <Button variant="outline" class="h-auto flex-col gap-2 py-4 bg-transparent" onclick={refreshingEvents}>
-                    <RefreshCw class="h-5 w-5 text-ring" />
-                    <span class="text-xs">Sync Planning Center</span>
-                </Button>
-            {/if}
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
diff --git a/frontend/src/lib/dashboard/home/SyncStatus.svelte b/frontend/src/lib/dashboard/home/SyncStatus.svelte
deleted file mode 100644
index c169158..0000000
--- a/frontend/src/lib/dashboard/home/SyncStatus.svelte
+++ /dev/null
@@ -1,59 +0,0 @@
-<script lang="ts">
-    import { Button } from "@/components/ui/button";
-    import * as Card from "@/components/ui/card/index";
-    import { refreshingEvents, timeAgo, timeWhen } from "@/utils";
-    import { RefreshCw, CheckCircle2 } from "@lucide/svelte";
-    import { onMount } from "svelte";
-
-    let { lastEventsFetch, eventsAmount }: { lastEventsFetch: string, eventsAmount: number } = $props();
-
-    let lastFetchDate = $derived(new Date(lastEventsFetch));
-
-    let nextFetchDate = $derived((new Date(lastEventsFetch)).setHours(lastFetchDate.getHours() + 1));
-
-    let lastSyncTAgo = $derived(timeAgo(lastEventsFetch));
-    let lastSyncTIn = $derived(timeWhen(nextFetchDate));
-
-    onMount(() => {
-        const clearTimer = setInterval(() => {
-            lastSyncTAgo = timeAgo(lastEventsFetch);
-            lastSyncTIn = timeWhen(nextFetchDate);
-        });
-
-        return () => {
-            clearInterval(clearTimer);
-        }
-    });
-</script>
-
-<Card.Root>
-    <Card.Header>
-    <Card.Title class="text-base font-medium">Sync Status</Card.Title>
-    <Card.Description>Planning Center connection</Card.Description>
-    </Card.Header>
-    <Card.Content class="space-y-4">
-    <div class="flex items-center gap-3 p-3 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
-        <CheckCircle2 class="h-5 w-5 text-emerald-500" />
-        <div class="flex-1">
-        <p class="text-sm font-medium text-emerald-500">Connected</p>
-        <p class="text-xs text-muted-foreground">Last sync: {lastSyncTAgo}</p>
-        </div>
-    </div>
-
-    <div class="space-y-2 text-sm">
-        <div class="flex justify-between">
-        <span class="text-muted-foreground">Events fetched</span>
-        <span class="font-medium">{eventsAmount}</span>
-        </div>
-        <div class="flex justify-between">
-        <span class="text-muted-foreground">Next sync</span>
-        <span class="font-medium">In {lastSyncTIn}</span>
-        </div>
-    </div>
-
-    <Button variant="outline" class="w-full gap-2 bg-transparent" onclick={refreshingEvents}>
-        <RefreshCw class="h-4 w-4" />
-        Sync Now
-    </Button>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
diff --git a/frontend/src/lib/dashboard/home/UpcomingEvents.svelte b/frontend/src/lib/dashboard/home/UpcomingEvents.svelte
deleted file mode 100644
index 0f3cd08..0000000
--- a/frontend/src/lib/dashboard/home/UpcomingEvents.svelte
+++ /dev/null
@@ -1,80 +0,0 @@
-<script lang="ts">
-    import { MapPin, Clock, Calendar, ArrowUpRightIcon } from "@lucide/svelte";
-    import * as Empty from "$lib/components/ui/empty/index.js";
-    import * as Card from "@/components/ui/card/index";
-    import { type EventDBModel } from "@/event.utils";
-    import { Button } from "@/components/ui/button";
-    import { Temporal } from "temporal-polyfill";
-    import { dateRangeOverlaps } from "@/utils";
-    import Time from "@/Time.svelte";
-
-    let { events }: { events: EventDBModel[] } = $props();
-
-    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(events.filter((event) => {
-        return dateRangeOverlaps(today.toInstant().epochMilliseconds, nextDay.toInstant().epochMilliseconds, (new Date(event.startTime)).valueOf(), (new Date(event.endTime)).valueOf())
-    }));
-</script>
-
-<Card.Root>
-    <Card.Header class="flex flex-row items-center justify-between">
-        <div>
-            <Card.Title class="text-base font-medium">Todays Events</Card.Title>
-            <Card.Description>Fetched from Planning Center</Card.Description>
-        </div>
-    </Card.Header>
-    <Card.Content>
-    <div class="space-y-3">
-        {#if todaysEvents.length > 0}
-            {#each todaysEvents as event (`upcomingevent${event.id}`)}
-                <div class="flex items-center gap-4 rounded-lg border border-border p-4 transition-colors hover:bg-accent">
-                    <div class="flex h-12 w-12 flex-col items-center justify-center rounded-lg bg-primary/10 text-primary">
-                        <Calendar class="h-5 w-5" />
-                    </div>
-
-                    <div class="flex-1 min-w-0">
-                        <h4 class="font-medium truncate">{event.name}</h4>
-                        <div class="mt-1 flex flex-wrap items-center gap-3 text-sm text-muted-foreground">
-                            {#if event.location}
-                                <span class="flex items-center gap-1">
-                                    <MapPin class="h-3 w-3" />
-                                    {event.location.split("-")[0]}
-                                </span>
-                            {/if}
-                            <span class="flex items-center gap-1">
-                                <Clock class="h-3 w-3" />
-                                <Time date={Temporal.Instant.from(event.startTime).toZonedDateTimeISO(timeZone)} useAMPM />
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            {/each}
-        {:else}
-            <Empty.Root>
-                <Empty.Header>
-                    <Empty.Media variant="icon">
-                    <Calendar />
-                    </Empty.Media>
-                    <Empty.Title>No Events Today</Empty.Title>
-                    <Empty.Description>
-                        You haven't created any events for today. Get started by going to planning center and create an event.
-                    </Empty.Description>
-                </Empty.Header>
-                <Empty.Content>
-                    <div class="flex gap-2">
-                    <Button href="https://calendar.planningcenteronline.com/" target="_blank">Create Event</Button>
-                    </div>
-                </Empty.Content>
-                <Button variant="link" class="text-muted-foreground" size="sm">
-                    <a href="https://pcocalendar.zendesk.com/hc/en-us/articles/360016189514-Create-an-event" target="_blank">
-                    Learn More <ArrowUpRightIcon class="inline" />
-                    </a>
-                </Button>
-            </Empty.Root>
-        {/if}
-    </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
diff --git a/frontend/src/lib/dashboard/home/YourViews.svelte b/frontend/src/lib/dashboard/home/YourViews.svelte
deleted file mode 100644
index 83b8554..0000000
--- a/frontend/src/lib/dashboard/home/YourViews.svelte
+++ /dev/null
@@ -1,136 +0,0 @@
-<script lang="ts">
-    import * as Card from "@/components/ui/card/index";
-    import { CalendarDays, ImageIcon, LayoutList } from "@lucide/svelte";
-    import { Badge } from "@/components/ui/badge";
-    import { timeAgo, type CalendarDBModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
-    import * as Empty from "$lib/components/ui/empty/index.js";
-    import { Button } from "@/components/ui/button";
-
-    let { 
-        calendars,
-        eventLists,
-        imageFeeds,
-        pb_url
-     }: { 
-        calendars: CalendarDBModel[],
-        eventLists: EventListDBModel[],
-        imageFeeds: ImageFeedDBModel[],
-        pb_url: string
-
-     } = $props();
-</script>
-
-<Card.Root>
-    <Card.Header class="flex flex-row items-center justify-between">
-        <div>
-            <Card.Title class="text-base font-medium">Your Views</Card.Title>
-            <Card.Description>Event lists, Image Feeds, and Calendars you've created</Card.Description>
-        </div>
-    </Card.Header>
-    <Card.Content>
-        <div class="space-y-3">
-            {#if calendars.length > 0 || eventLists.length > 0 || imageFeeds.length > 0}
-                {#each calendars as calendar (`viewssCal${calendar.id}`)}
-                    <a href="/dashboard/calendars/{calendar.id}" class="flex items-center gap-4 rounded-lg border border-border p-4 transition-colors hover:bg-accent">
-                        {#if calendar.logo}
-                            <div class="relative group">
-                                <img
-                                    src="{pb_url}/api/files/{calendar.collectionId}/{calendar.id}/{calendar.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">
-                                <h4 class="font-medium truncate underline">{calendar.name}</h4>
-                                <Badge variant="secondary" class="text-xs">Calendar</Badge>
-                            </div>
-                            <p class="text-sm text-muted-foreground">
-                                {calendar.visits} visits · Updated {timeAgo(calendar.updated)}
-                            </p>
-                        </div>
-                    </a>
-                {/each}
-                {#each eventLists as eventList (`viewssEList${eventList.id}`)}
-                    <a href="/dashboard/event-lists/{eventList.id}" class="flex items-center gap-4 rounded-lg border border-border p-4 transition-colors hover:bg-accent">
-                        {#if eventList.logo}
-                            <div class="relative group">
-                                <img
-                                    src="{pb_url}/api/files/{eventList.collectionId}/{eventList.id}/{eventList.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-emerald-500/10">
-                                <LayoutList class="h-5 w-5 text-emerald-500" />
-                            </div>
-                        {/if}
-                        
-                        <div class="flex-1 min-w-0">
-                            <div class="flex items-center gap-2">
-                                <h4 class="font-medium truncate underline">{eventList.name}</h4>
-                                <Badge variant="secondary" class="text-xs">Event List</Badge>
-                            </div>
-                            <p class="text-sm text-muted-foreground">
-                                {eventList.visits} visits · Updated {timeAgo(eventList.updated)}
-                            </p>
-                        </div>
-                    </a>
-                {/each}
-                {#each imageFeeds as imageFeed (`viewssIFeed${imageFeed.id}`)}
-                    <a href="/dashboard/image-feeds/{imageFeed.id}" class="flex items-center gap-4 rounded-lg border border-border p-4 transition-colors hover:bg-accent">
-                        {#if imageFeed.logo}
-                            <div class="relative group">
-                                <img
-                                    src="{pb_url}/api/files/{imageFeed.collectionId}/{imageFeed.id}/{imageFeed.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-amber-500/10">
-                                <ImageIcon class="h-5 w-5 text-amber-500" />
-                            </div>
-                        {/if}
-                        
-                        <div class="flex-1 min-w-0">
-                            <div class="flex items-center gap-2">
-                                <h4 class="font-medium truncate underline">{imageFeed.name}</h4>
-                                <Badge variant="secondary" class="text-xs">Image Feed</Badge>
-                            </div>
-                            <p class="text-sm text-muted-foreground">
-                                {imageFeed.visits} visits · Updated {timeAgo(imageFeed.updated)}
-                            </p>
-                        </div>
-                    </a>
-                {/each}
-            {:else}
-                <Empty.Root>
-                    <Empty.Header>
-                        <Empty.Media variant="icon">
-                        <CalendarDays />
-                        </Empty.Media>
-                        <Empty.Title>No Views Yet</Empty.Title>
-                        <Empty.Description>
-                            You haven't created any views. Get started by creating a custom view.
-                        </Empty.Description>
-                    </Empty.Header>
-                    <Empty.Content>
-                        <div class="flex gap-2">
-                            <Button href="/dashboard/calendars?new=1" variant="outline">Create Calendar</Button>
-                            <Button href="/dashboard/event-lists?new=1" variant="outline">Create Event List</Button>
-                            <Button href="/dashboard/image-feeds?new=1" variant="outline">Create Image Feed</Button>
-                        </div>
-                    </Empty.Content>
-                </Empty.Root>
-            {/if}
-        </div>
-    </Card.Content>
-</Card.Root>
\ No newline at end of file
diff --git a/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte b/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte
index 1066b38..95977eb 100644
--- a/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte
+++ b/frontend/src/lib/dashboard/homePage/FeatureSummary.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { type CalendarDBModel, type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
+    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";
diff --git a/frontend/src/lib/dashboard/homePage/MetricCards.svelte b/frontend/src/lib/dashboard/homePage/MetricCards.svelte
index da33cdc..c6f85ba 100644
--- a/frontend/src/lib/dashboard/homePage/MetricCards.svelte
+++ b/frontend/src/lib/dashboard/homePage/MetricCards.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { cn, type CalendarDBModel, type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
+    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 {
diff --git a/frontend/src/lib/dashboard/homePage/RecentActivity.svelte b/frontend/src/lib/dashboard/homePage/RecentActivity.svelte
index 6e8c330..a92b410 100644
--- a/frontend/src/lib/dashboard/homePage/RecentActivity.svelte
+++ b/frontend/src/lib/dashboard/homePage/RecentActivity.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-    import { timeAgo, type CalendarDBModel, type DynamicURLModel, type EventListDBModel, type ImageFeedDBModel } from "@/utils";
+    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";
diff --git a/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte b/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte
index 7fa022b..3c72b98 100644
--- a/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte
+++ b/frontend/src/lib/dashboard/homePage/UpcomingEvents.svelte
@@ -48,15 +48,17 @@
                                     {/if}
                                 </div>
                                 {#if event.expand.tags}
-                                    {#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 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">
diff --git a/frontend/src/lib/event.utils.ts b/frontend/src/lib/event.utils.ts
index 7d95ed1..0f643b5 100644
--- a/frontend/src/lib/event.utils.ts
+++ b/frontend/src/lib/event.utils.ts
@@ -1,4 +1,5 @@
 import type { RecordModel } from "pocketbase";
+import type { CalendarFilters } from "./cal.utils";
 
 export type EventTimesType = {
 	name: string,
@@ -39,14 +40,14 @@ export interface EventDBModel extends RecordModel {
 	registrationURL: string,
 	location: string,
 	times: EventTimesType[] | null,
-	// resources: string[] | null
-	// tags: string[] | null,
 	startTime: string,
 	endTime: string,
 	featured: boolean,
 	visibleInChurchCenter: boolean
 	recurrence: string,
-	service: "planningcenter"
+	service: "planningcenter",
+	resources: string[] | null
+	tags: string[] | null,
 }
 
 export interface EventDBModelExpanded extends EventDBModel {
@@ -67,6 +68,90 @@ export interface EventDBModelPrivateExpanded extends EventDBModelPrivate {
 	}
 }
 
-export const eventFieldRequirementsPublic = "id,recEventId,name,description,imageURL,registrationURL,location,times,startTime,endTime,featured,visibleInChurchCenter,created,updated";
+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";
\ No newline at end of file
+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]}"`
+	}
+	return filterString;
+}
+
+export function eventResourceBlockListToFilterString(blockedResources: string[]) {
+	let filterString = "";
+	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]}"`
+	}
+	return filterString;
+}
+
+export function eventTagBlockListToFilterString(blockedTags: string[]) {
+	let filterString = "";
+	for (let i=0;i<blockedTags.length;i++) {
+		filterString += ` && tags !~ "${blockedTags[i]}"`
+	}
+	return filterString;
+}
+
+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
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index f84317e..d875d2f 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -72,21 +72,6 @@ export interface CustomImageIFeedDBModel extends RecordModel {
 	owner: string
 }
 
-export interface CalendarDBModel extends RecordModel {
-	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
-}
-
 export interface ImageFeedDBModel extends RecordModel {
 	name: string,
 	owner: string,
@@ -144,33 +129,6 @@ export function toggleFullScreen() {
 	}
 }
 
-export type CalendarCustomizations = {
-	viewType: "3day" | "week" | "month",
-	useAMPM: boolean,
-    showResourcePathname: boolean,
-	onlyShowLocationTitle: boolean,
-	showLocation: boolean,
-	showResources: boolean,
-	showRooms: boolean,
-	showDescription: boolean
-}
-
-export const defaultCalendarCustomizations: CalendarCustomizations = {
-	viewType: "3day",
-	useAMPM: true,
-	showResourcePathname: false,
-	onlyShowLocationTitle: false,
-	showLocation: true,
-	showResources: true,
-	showRooms: true,
-	showDescription: false
-}
-
-export type CalendarFilters = {
-	onlyShowFeatured: boolean,
-	hideUnpublished: boolean
-};
-
 export type ImageFeedCustomizations = {
 	showEventExtraInfo: boolean,
 	showEventName: boolean,
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
index 99d7b10..5d5cfce 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/backend.remote.ts
@@ -1,6 +1,7 @@
 //This file can fetch all the needed data from the pocketbase instance. Stuff like calendars, image feeds, etc.
-import type { CalendarDBModel, 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";
 import { config } from "dotenv";
 import * as v from "valibot";
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
index 7e76e0d..c78bb75 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/calendars/calendarActions.remote.ts
@@ -1,4 +1,4 @@
-import { defaultCalendarCustomizations, type CalendarDBModel } from "@/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";
@@ -40,10 +40,7 @@ export const createCalendarCommand = command(CreateCalendarSchema, async (newCal
             "passwordEnabled": newCalendar.enablePassword,
             "owner": locals.user.id,
             "displaySettings": defaultCalendarCustomizations,
-            "filters": {
-                "hideUnpublished": true,
-                "onlyShowFeatured": true
-            }
+            "filters": defaultCalendarFilters
         };
 
         if (newCalendar.enablePassword) {
@@ -90,10 +87,18 @@ const UpdateCalendarSchema = v.object({
         showRooms: v.optional(v.boolean(), false),
         showDescription: v.optional(v.boolean(), false)
     }),
-    filters: v.optional(v.object({
+    filters: v.object({
         onlyShowFeatured: v.optional(v.boolean(), false),
-	    hideUnpublished: v.optional(v.boolean(), false)
-    }), undefined)
+	    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) => {
@@ -111,10 +116,7 @@ export const updateCalendarForm = form(UpdateCalendarSchema, async (updatedCalen
             "description": updatedCalendar.description,
             "passwordEnabled": updatedCalendar.enablePassword,
             "displaySettings": updatedCalendar.displaySettings,
-            "filters": updatedCalendar.filters ? updatedCalendar.filters : {
-                "hideUnpublished": false,
-                "onlyShowFeatured": false
-            }
+            "filters": updatedCalendar.filters
         };
 
         if (updatedCalendar.newPassword && updatedCalendar.newPassword.length > 0 && updatedCalendar.enablePassword) {
diff --git a/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts b/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts
index 15d1fce..9fc924c 100644
--- a/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts
+++ b/frontend/src/routes/(mainWebsite)/dashboard/events.remote.ts
@@ -1,5 +1,5 @@
 import { command, getRequestEvent, query } from "$app/server";
-import type { EventDBModelPrivateExpanded } from "@/event.utils";
+import type { EventDBModelPrivateExpanded, EventResourcesDBModelPrivate, EventTagsDBModelPrivate } from "@/event.utils";
 import { getMyIntegrations } from "./backend.remote";
 import { config } from "dotenv";
 
@@ -57,4 +57,44 @@ export const updateSpecificUserEvents = command(async () => {
         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;
+});
+
+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
diff --git a/frontend/src/routes/cal/[slug]/+page.server.ts b/frontend/src/routes/cal/[slug]/+page.server.ts
index 91ceab1..bd924ce 100644
--- a/frontend/src/routes/cal/[slug]/+page.server.ts
+++ b/frontend/src/routes/cal/[slug]/+page.server.ts
@@ -1,6 +1,15 @@
-import { eventFieldRequirementsPublic, resourcesExpandRequirementsPublic, tagsExpandRequirementsPublic, type EventDBModelExpanded } from "@/event.utils";
+import {
+    eventResourceAllowListToFilterString,
+    eventResourceBlockListToFilterString,
+    resourcesExpandRequirementsPublic,
+    eventTagAllowListToFilterString,
+    eventTagBlockListToFilterString,
+    eventFieldRequirementsPublic,
+    tagsExpandRequirementsPublic,
+    type EventDBModelExpanded
+} from "@/event.utils";
+import type { CalendarDBModel } from "@/cal.utils";
 import { error, redirect } from "@sveltejs/kit";
-import type { CalendarDBModel } from "@/utils";
 import { Temporal } from "temporal-polyfill";
 import { config } from "dotenv";
 
@@ -48,6 +57,22 @@ export async function load({ params, locals, cookies }) {
             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.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",
diff --git a/frontend/src/routes/cal/[slug]/login/+page.server.ts b/frontend/src/routes/cal/[slug]/login/+page.server.ts
index 99a695c..81ca4cf 100644
--- a/frontend/src/routes/cal/[slug]/login/+page.server.ts
+++ b/frontend/src/routes/cal/[slug]/login/+page.server.ts
@@ -1,5 +1,5 @@
 import { error, fail, redirect } from '@sveltejs/kit';
-import type { CalendarDBModel } from '@/utils.js';
+import type { CalendarDBModel } from '@/cal.utils.js';
 import { config } from "dotenv";
 
 config();
diff --git a/frontend/src/routes/ifeed/[slug]/+page.server.ts b/frontend/src/routes/ifeed/[slug]/+page.server.ts
index 88ddc00..0260835 100644
--- a/frontend/src/routes/ifeed/[slug]/+page.server.ts
+++ b/frontend/src/routes/ifeed/[slug]/+page.server.ts
@@ -1,5 +1,6 @@
 import { eventFieldRequirementsPublic, resourcesExpandRequirementsPublic, tagsExpandRequirementsPublic, type EventDBModelExpanded } from "@/event.utils";
-import type { CalendarCustomizations, CalendarFilters, CustomImageIFeedDBModel, ImageFeedDBModel } from "@/utils";
+import type { CalendarCustomizations, CalendarFilters } from "@/cal.utils";
+import type { CustomImageIFeedDBModel, ImageFeedDBModel } from "@/utils";
 import { Temporal } from "temporal-polyfill";
 import { error } from "@sveltejs/kit";
 import { config } from "dotenv";
diff --git a/frontend/src/routes/ifeed/[slug]/+page.svelte b/frontend/src/routes/ifeed/[slug]/+page.svelte
index 320a11d..3e0f237 100644
--- a/frontend/src/routes/ifeed/[slug]/+page.svelte
+++ b/frontend/src/routes/ifeed/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <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";
@@ -107,7 +108,7 @@
                     <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 autoUpdate={false} events={data.events} displaySettings={additionalCalendar.displaySettings} timeZone={timeZone} filters={additionalCalendar.filters} />
+                                <Calendar autoUpdate={false} events={filterEventsBasedOnTagAndResourceFilters(data.events, additionalCalendar.filters)} displaySettings={additionalCalendar.displaySettings} timeZone={timeZone} filters={additionalCalendar.filters} />
                             </div>
                         </AspectRatio>
                     </Carousel.Item>
diff --git a/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts b/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts
index e8c6773..c4590f8 100644
--- a/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts
+++ b/frontend/src/routes/ifeedPreview/[slug]/+page.server.ts
@@ -1,5 +1,6 @@
 import { eventFieldRequirementsPublic, resourcesExpandRequirementsPublic, tagsExpandRequirementsPublic, type EventDBModelExpanded } from "@/event.utils";
-import type { CalendarCustomizations, CalendarFilters, CustomImageIFeedDBModel, ImageFeedDBModel } from "@/utils";
+import type { CalendarCustomizations, CalendarFilters } from "@/cal.utils";
+import type { CustomImageIFeedDBModel, ImageFeedDBModel } from "@/utils";
 import { Temporal } from "temporal-polyfill";
 import { error } from "@sveltejs/kit";
 import { config } from "dotenv";
diff --git a/frontend/src/routes/ifeedPreview/[slug]/+page.svelte b/frontend/src/routes/ifeedPreview/[slug]/+page.svelte
index 174ad41..966b2a7 100644
--- a/frontend/src/routes/ifeedPreview/[slug]/+page.svelte
+++ b/frontend/src/routes/ifeedPreview/[slug]/+page.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-    import Autoplay from "embla-carousel-autoplay";
-    import * as Carousel from "$lib/components/ui/carousel/index.js";
-    import { SquareArrowOutUpRight } from "@lucide/svelte";
+    import { filterEventsBasedOnTagAndResourceFilters } from "@/event.utils";
     import type { CarouselAPI } from "@/components/ui/carousel/context.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';
 
@@ -161,7 +162,7 @@
                     <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 autoUpdate={false} events={data.events} displaySettings={additionalCalendar.displaySettings} timeZone={timeZone} filters={additionalCalendar.filters} />
+                                <Calendar autoUpdate={false} events={filterEventsBasedOnTagAndResourceFilters(data.events, additionalCalendar.filters)} displaySettings={additionalCalendar.displaySettings} timeZone={timeZone} filters={additionalCalendar.filters} />
                             </div>
                             {#if debugToggle}
                             <div class="debugger">