diff --git a/.gitignore b/.gitignore
index 79518f7..cb20f44 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,5 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+http
diff --git a/drizzle.config.ts b/drizzle.config.ts
new file mode 100644
index 0000000..6b9a518
--- /dev/null
+++ b/drizzle.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from 'drizzle-kit';
+
+export default defineConfig({
+	schema: './src/lib/db/schema.ts',
+	out: './src/lib/db/migrations',
+	dialect: 'postgresql',
+	dbCredentials: {
+		url: process.env.SECRET_XATA_PG_ENDPOINT!
+	},
+	verbose: true,
+	strict: true
+});
diff --git a/package-lock.json b/package-lock.json
index 35ed689..91978d7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,13 +23,14 @@
 				"pg": "^8.13.1"
 			},
 			"devDependencies": {
+				"@internationalized/date": "^3.6.0",
 				"@sveltejs/adapter-auto": "^3.0.0",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^4.0.0",
 				"@types/eslint": "^9.6.0",
 				"@types/pg": "^8.11.10",
 				"autoprefixer": "^10.4.20",
-				"bits-ui": "^1.0.0-next.64",
+				"bits-ui": "^1.0.0-next.66",
 				"clsx": "^2.1.1",
 				"drizzle-kit": "^0.25.0",
 				"eslint": "^9.7.0",
@@ -2215,9 +2216,9 @@
 			}
 		},
 		"node_modules/bits-ui": {
-			"version": "1.0.0-next.64",
-			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.64.tgz",
-			"integrity": "sha512-r1JThjUSKwTkaB1onwIs7ZQoqygSsWhjBaUElCS8m8CCbY1RxmTz0HnbN+Xp2oJgJ4YQgIfiXTG3170l80FEgg==",
+			"version": "1.0.0-next.66",
+			"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-1.0.0-next.66.tgz",
+			"integrity": "sha512-2cvX2dhtlp79dq3D79sw/e/w2tib+ySI4RScXwSK9JLSOLVWgVM6XvnT3g8dYRSsSCnQ+hlTZ1ydJJc209HiZw==",
 			"dev": true,
 			"dependencies": {
 				"@floating-ui/core": "^1.6.4",
diff --git a/package.json b/package.json
index 9c56380..8157e44 100644
--- a/package.json
+++ b/package.json
@@ -12,18 +12,19 @@
 		"lint": "prettier --check . && eslint .",
 		"test:unit": "vitest",
 		"test": "npm run test:unit -- --run",
-		"db:generate": "drizzle-kit generate",
-		"db:migrate": "drizzle-kit migrate",
-		"db:studio": "drizzle-kit studio"
+		"db:generate": "drizzle-kit --config=drizzle.config.ts generate",
+		"db:migrate": "drizzle-kit --config=drizzle.config.ts migrate",
+		"db:studio": "drizzle-kit --config=drizzle.config.ts studio"
 	},
 	"devDependencies": {
+		"@internationalized/date": "^3.6.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@types/eslint": "^9.6.0",
 		"@types/pg": "^8.11.10",
 		"autoprefixer": "^10.4.20",
-		"bits-ui": "^1.0.0-next.64",
+		"bits-ui": "^1.0.0-next.66",
 		"clsx": "^2.1.1",
 		"drizzle-kit": "^0.25.0",
 		"eslint": "^9.7.0",
diff --git a/src/lib/api/api.ts b/src/lib/api/api.ts
index afd9521..c802b52 100644
--- a/src/lib/api/api.ts
+++ b/src/lib/api/api.ts
@@ -11,6 +11,7 @@ import { userRouter } from './user/user.controller';
 import { projectsRouter } from './projects/projects.controller';
 import { websitesRouter } from './websites/websites.controller';
 import { statusRouter } from './status/status.controller';
+import { messagesRouter } from './messages/messages.controller';
 
 export const api = new Hono().basePath('/api');
 
@@ -21,6 +22,7 @@ api.route('/user', userRouter);
 api.route('/projects', projectsRouter);
 api.route('/websites', websitesRouter);
 api.route('/status', statusRouter);
+api.route('/messages', messagesRouter);
 
 function getAuthConfig(): AuthConfig {
 	return {
diff --git a/src/lib/api/messages/messages.controller.ts b/src/lib/api/messages/messages.controller.ts
new file mode 100644
index 0000000..6591739
--- /dev/null
+++ b/src/lib/api/messages/messages.controller.ts
@@ -0,0 +1,126 @@
+import { verifyAuth } from '@hono/auth-js';
+import { Hono, type Context } from 'hono';
+import {
+	createMessage,
+	deleteMessage,
+	getMessage,
+	getMessages,
+	updateMessage
+} from './messages.service';
+import { validateRequestBody } from '../middlewares';
+import { InsertMessageSchema } from '$lib/db/schema';
+
+export const messagesRouter = new Hono();
+
+export const getMessageController = async (context: Context) => {
+	const { token } = context.get('authUser');
+	if (!token) return context.status(401);
+
+	const { messageId } = context.req.param();
+	if (!messageId) return context.json({ error: 'Missing message Id' }, 400);
+
+	const messageResponse = await getMessage(String(token.id), messageId);
+
+	return context.json(
+		messageResponse.error ? { error: messageResponse.error } : messageResponse.data,
+		messageResponse.status
+	);
+};
+
+export const getMessagesController = async (context: Context) => {
+	const { token } = context.get('authUser');
+	if (!token) return context.status(401);
+
+	const { websiteId } = context.req.query();
+
+	const messagesResponse = await getMessages(String(token.id), websiteId);
+
+	return context.json(
+		messagesResponse.error ? { error: messagesResponse.error } : messagesResponse.data,
+		messagesResponse.status
+	);
+};
+
+export const postMessageController = async (context: Context) => {
+	const { token } = context.get('authUser');
+	if (!token) return context.status(401);
+
+	const { websiteId } = context.req.param();
+	if (!websiteId) return context.json({ error: 'Missing website ID' }, 400);
+
+	const message = context.get('requestBody');
+
+	const createWebsiteResponse = await createMessage({
+		userId: String(token.id),
+		websiteId: websiteId,
+		...message
+	});
+
+	return context.json(
+		createWebsiteResponse.error
+			? { error: createWebsiteResponse.error }
+			: createWebsiteResponse.data,
+		createWebsiteResponse.status
+	);
+};
+
+export const putMessageController = async (context: Context) => {
+	const { token } = context.get('authUser');
+	if (!token) return context.status(401);
+
+	const { websiteId } = context.req.param();
+	if (!websiteId) return context.json({ error: 'Missing website ID' }, 400);
+
+	const { messageId } = context.req.param();
+	if (!messageId) return context.json({ error: 'Missing message ID' }, 400);
+
+	const updatedMessage = context.get('requestBody');
+
+	const updateWebsiteResponse = await updateMessage(String(token.id), messageId, updatedMessage);
+
+	return context.json(
+		updateWebsiteResponse.error
+			? { error: updateWebsiteResponse.error }
+			: updateWebsiteResponse.data,
+		updateWebsiteResponse.status
+	);
+};
+
+export const deleteMessageController = async (context: Context) => {
+	const { token } = context.get('authUser');
+	if (!token) return context.status(401);
+
+	const { messageId } = context.req.param();
+	if (!messageId) return context.json({ error: 'Missing message ID' }, 400);
+
+	const deleteMessageResponse = await deleteMessage(String(token.id), messageId);
+
+	return context.json(
+		deleteMessageResponse.error
+			? { error: deleteMessageResponse.error }
+			: deleteMessageResponse.data,
+
+		deleteMessageResponse.status
+	);
+};
+
+const PartialInsertMessageSchema = InsertMessageSchema.pick({
+	title: true,
+	content: true,
+	startTime: true
+});
+
+messagesRouter.use(verifyAuth());
+messagesRouter.get('/:messageId', getMessageController);
+messagesRouter.get('/', getMessagesController);
+messagesRouter.post(
+	'/:websiteId',
+	validateRequestBody(PartialInsertMessageSchema),
+	postMessageController
+);
+messagesRouter.put(
+	'/:websiteId/:messageId',
+	validateRequestBody(PartialInsertMessageSchema),
+	putMessageController
+);
+messagesRouter.delete('/:messageId', deleteMessageController);
diff --git a/src/lib/api/messages/messages.service.ts b/src/lib/api/messages/messages.service.ts
new file mode 100644
index 0000000..f0e4e12
--- /dev/null
+++ b/src/lib/api/messages/messages.service.ts
@@ -0,0 +1,178 @@
+import { db } from '$lib/db/drizzle';
+import { messages, websites, type InsertMessage, type SelectMessagePartial } from '$lib/db/schema';
+import { and, count, eq } from 'drizzle-orm';
+import type { ServiceResponse } from '../types';
+import type { StatusCode } from 'hono/utils/http-status';
+import { isUserPro } from '../user/user.service';
+import { prettifyErrors } from '$lib/db/utils';
+
+export const canWbsiteHaveMoreMessages = async (
+	userId: string,
+	projectId: string
+): Promise<boolean> => {
+	if (await isUserPro(userId)) return true;
+
+	return (await getMessagesCount(projectId)) < 5;
+};
+
+export const getMessagesCount = async (websiteId: string): Promise<number> => {
+	return await db
+		.select({ count: count(messages.id) })
+		.from(messages)
+		.where(eq(messages.websiteId, websiteId))
+		.then((response) => response[0].count);
+};
+
+export const getMessage = async (
+	userId: string,
+	messageId: string
+): Promise<ServiceResponse<SelectMessagePartial>> => {
+	return await db
+		.select({
+			id: messages.id,
+			title: messages.title,
+			content: messages.content,
+			startTime: messages.startTime
+		})
+		.from(messages)
+		.where(and(eq(messages.userId, userId), eq(messages.id, messageId)))
+		.limit(1)
+		.then((response) => {
+			if (response.length === 0)
+				return {
+					status: 404 as StatusCode,
+					error: 'Message not found'
+				};
+
+			return {
+				status: 200 as StatusCode,
+				data: response[0]
+			};
+		})
+		.catch((error) => {
+			return {
+				status: 400 as StatusCode,
+				error: error.message
+			};
+		});
+};
+
+export const getMessages = async (
+	userId: string,
+	websiteId?: string
+): Promise<ServiceResponse<SelectMessagePartial[]>> => {
+	const condition = websiteId
+		? and(eq(messages.userId, userId), eq(messages.websiteId, websiteId))
+		: eq(messages.userId, userId);
+	return await db
+		.select({
+			id: messages.id,
+			title: messages.title,
+			content: messages.content,
+			websiteId: messages.websiteId,
+			startTime: messages.startTime
+		})
+		.from(messages)
+		.where(condition)
+		.then((response) => {
+			return {
+				status: 200 as StatusCode,
+				data: response
+			};
+		})
+		.catch((error) => {
+			return {
+				status: 400 as StatusCode,
+				error: error.message
+			};
+		});
+};
+
+export const createMessage = async (
+	message: InsertMessage
+): Promise<ServiceResponse<SelectMessagePartial>> => {
+	if (!(await canWbsiteHaveMoreMessages(message.userId, message.websiteId)))
+		return {
+			status: 403,
+			error: 'Hobby users can create 5 messages per website!'
+		};
+
+	return await db
+		.insert(messages)
+		.values(message)
+		.returning({
+			id: messages.id,
+			title: messages.title,
+			content: messages.content,
+			startTime: messages.startTime
+		})
+		.then((response) => {
+			return {
+				status: 200 as StatusCode,
+				data: response[0]
+			};
+		})
+		.catch((error) => {
+			return {
+				status: 400 as StatusCode,
+				error: prettifyErrors(error)
+			};
+		});
+};
+
+export const updateMessage = async (
+	userId: string,
+	messageId: string,
+	updatedMessage: InsertMessage
+): Promise<ServiceResponse<SelectMessagePartial>> => {
+	return await db
+		.update(messages)
+		.set(updatedMessage)
+		.where(and(eq(websites.userId, userId), eq(messages.id, messageId)))
+		.returning({
+			id: messages.id,
+			title: messages.title,
+			content: messages.content,
+			startTime: messages.startTime
+		})
+		.then((response) => {
+			return {
+				status: 200 as StatusCode,
+				data: response[0]
+			};
+		})
+		.catch((error) => {
+			return {
+				status: 400 as StatusCode,
+				error: error.message
+			};
+		});
+};
+
+export const deleteMessage = async (
+	userId: string,
+	messageId: string
+): Promise<ServiceResponse<{ deletedId: string }>> => {
+	return await db
+		.delete(messages)
+		.where(and(eq(messages.userId, userId), eq(messages.id, messageId)))
+		.returning({ deletedId: websites.id })
+		.then((response) => {
+			if (response.length === 0) {
+				return {
+					status: 404 as StatusCode,
+					error: 'Message not found'
+				};
+			}
+			return {
+				status: 200 as StatusCode,
+				data: response[0]
+			};
+		})
+		.catch((error) => {
+			return {
+				status: 400 as StatusCode,
+				error: error.message
+			};
+		});
+};
diff --git a/src/lib/api/status/status.service.ts b/src/lib/api/status/status.service.ts
index 898c24e..6f9926d 100644
--- a/src/lib/api/status/status.service.ts
+++ b/src/lib/api/status/status.service.ts
@@ -1,5 +1,6 @@
 import { db } from '$lib/db/drizzle';
 import {
+	messages,
 	projects,
 	uptimeChecks,
 	websites,
@@ -7,7 +8,7 @@ import {
 	type SelectProjectPartial
 } from '$lib/db/schema';
 import { desc, eq } from 'drizzle-orm';
-import type { ServiceResponse, StatusPageResponse } from '../types';
+import type { ServiceResponse, StatusPageMessages, StatusPageResponse } from '../types';
 import type { StatusCode } from 'hono/utils/http-status';
 
 export const getStatus = async (
@@ -40,6 +41,22 @@ export const getStatus = async (
 		});
 };
 
+export const getMessages = async (websiteId: string): Promise<StatusPageMessages[]> => {
+	return await db
+		.select({
+			title: messages.title,
+			content: messages.content,
+			startTime: messages.startTime
+		})
+		.from(messages)
+		.where(eq(messages.websiteId, websiteId))
+		.orderBy(desc(messages.startTime))
+		.catch((error) => {
+			console.log(error);
+			return [];
+		});
+};
+
 export const getStatusByProject = async (
 	projectSlug: string
 ): Promise<ServiceResponse<SelectProjectPartial>> => {
@@ -90,15 +107,16 @@ export const getStatusPage = async (
 
 	const statusPromises = websitesResponse.map(async (website) => {
 		const statusResponse = await getStatus(website.id, 50);
-
 		if (statusResponse.status !== 200 || !statusResponse.data) {
-			// Optionally handle individual errors here
-			return null; // Exclude this website from the results
+			return null;
 		}
 
+		const messages = await getMessages(website.id);
+
 		return {
 			...website,
-			statuses: statusResponse.data
+			statuses: statusResponse.data,
+			messages: messages
 		};
 	});
 
diff --git a/src/lib/api/types.ts b/src/lib/api/types.ts
index b753022..044eee1 100644
--- a/src/lib/api/types.ts
+++ b/src/lib/api/types.ts
@@ -1,7 +1,11 @@
-import type { SelectPartialStatus, SelectWebsitePartial } from '$lib/db/schema';
+import type { SelectMessage, SelectPartialStatus, SelectWebsitePartial } from '$lib/db/schema';
 import type { StatusCode } from 'hono/utils/http-status';
 
-export type StatusPageResponse = SelectWebsitePartial & { statuses: SelectPartialStatus[] };
+export type StatusPageMessages = Pick<SelectMessage, 'title' | 'content' | 'startTime'>;
+export type StatusPageResponse = SelectWebsitePartial & {
+	statuses: SelectPartialStatus[];
+	messages: StatusPageMessages[];
+};
 
 export type ServiceResponse<T> = {
 	data?: T;
diff --git a/src/lib/api/websites/websites.controller.ts b/src/lib/api/websites/websites.controller.ts
index 91f2061..5116062 100644
--- a/src/lib/api/websites/websites.controller.ts
+++ b/src/lib/api/websites/websites.controller.ts
@@ -5,6 +5,7 @@ import {
 	deleteWebsite,
 	getWebsite,
 	getWebsites,
+	getWebsitesForUser,
 	updateWebsite
 } from './websites.service';
 import { validateRequestBody } from '../middlewares';
@@ -34,6 +35,18 @@ export const getWebsiteController = async (context: Context) => {
 	);
 };
 
+export const getWebsitesForUserController = async (context: Context) => {
+	const { token } = context.get('authUser');
+	if (!token) return context.status(401);
+
+	const websiteResponse = await getWebsitesForUser(String(token.id));
+
+	return context.json(
+		websiteResponse.error ? { error: websiteResponse.error } : websiteResponse.data,
+		websiteResponse.status
+	);
+};
+
 export const getWebsitesController = async (context: Context) => {
 	const { token } = context.get('authUser');
 	if (!token) return context.status(401);
@@ -121,8 +134,9 @@ const PartialInsertWebsiteSchema = InsertWebsiteSchema.pick({
 });
 
 websitesRouter.use(verifyAuth());
-websitesRouter.get('/:slug/:websiteId', getWebsiteController);
+websitesRouter.get('/', getWebsitesForUserController);
 websitesRouter.get('/:slug', getWebsitesController);
+websitesRouter.get('/:slug/:websiteId', getWebsiteController);
 websitesRouter.post(
 	'/:slug',
 	validateRequestBody(PartialInsertWebsiteSchema),
diff --git a/src/lib/api/websites/websites.service.ts b/src/lib/api/websites/websites.service.ts
index 98fdc70..2b485c3 100644
--- a/src/lib/api/websites/websites.service.ts
+++ b/src/lib/api/websites/websites.service.ts
@@ -1,5 +1,5 @@
 import { db } from '$lib/db/drizzle';
-import { websites, type InsertWebsite, type SelectWebsitePartial } from '$lib/db/schema';
+import { projects, websites, type InsertWebsite, type SelectWebsitePartial } from '$lib/db/schema';
 import { and, count, eq } from 'drizzle-orm';
 import type { ServiceResponse } from '../types';
 import type { StatusCode } from 'hono/utils/http-status';
@@ -89,6 +89,42 @@ export const getWebsites = async (
 		});
 };
 
+export const getWebsitesForUser = async (
+	userId: string
+): Promise<
+	ServiceResponse<
+		{
+			id: string;
+			name: string;
+			projectId: string;
+			projectName: string | null;
+		}[]
+	>
+> => {
+	return await db
+		.select({
+			id: websites.id,
+			name: websites.name,
+			projectId: websites.projectId,
+			projectName: projects.name
+		})
+		.from(websites)
+		.leftJoin(projects, eq(websites.projectId, projects.id))
+		.where(eq(websites.userId, userId))
+		.then((response) => {
+			return {
+				status: 200 as StatusCode,
+				data: response
+			};
+		})
+		.catch((error) => {
+			return {
+				status: 400 as StatusCode,
+				error: error.message
+			};
+		});
+};
+
 export const createWebsite = async (
 	website: InsertWebsite
 ): Promise<ServiceResponse<SelectWebsitePartial>> => {
diff --git a/src/lib/components/ui/accordion/accordion-content.svelte b/src/lib/components/ui/accordion/accordion-content.svelte
new file mode 100644
index 0000000..f2cfe88
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-content.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
+</script>
+
+<AccordionPrimitive.Content
+	bind:ref
+	class={cn(
+		"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+		className
+	)}
+	{...restProps}
+>
+	<div class="pb-4 pt-0">
+		{@render children?.()}
+	</div>
+</AccordionPrimitive.Content>
diff --git a/src/lib/components/ui/accordion/accordion-item.svelte b/src/lib/components/ui/accordion/accordion-item.svelte
new file mode 100644
index 0000000..dcffa3c
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-item.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AccordionPrimitive.ItemProps = $props();
+</script>
+
+<AccordionPrimitive.Item bind:ref class={cn(className)} {...restProps} />
diff --git a/src/lib/components/ui/accordion/accordion-trigger.svelte b/src/lib/components/ui/accordion/accordion-trigger.svelte
new file mode 100644
index 0000000..8753749
--- /dev/null
+++ b/src/lib/components/ui/accordion/accordion-trigger.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Accordion as AccordionPrimitive, type WithoutChild } from 'bits-ui';
+	import ChevronDown from 'lucide-svelte/icons/chevron-down';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithoutChild<AccordionPrimitive.TriggerProps> & {
+		level?: AccordionPrimitive.HeaderProps['level'];
+	} = $props();
+</script>
+
+<AccordionPrimitive.Header {level} class="flex">
+	<AccordionPrimitive.Trigger
+		bind:ref
+		class={cn(
+			'flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+			className
+		)}
+		{...restProps}
+	>
+		{@render children?.()}
+		<ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+	</AccordionPrimitive.Trigger>
+</AccordionPrimitive.Header>
diff --git a/src/lib/components/ui/accordion/index.ts b/src/lib/components/ui/accordion/index.ts
new file mode 100644
index 0000000..3fc36e7
--- /dev/null
+++ b/src/lib/components/ui/accordion/index.ts
@@ -0,0 +1,17 @@
+import { Accordion as AccordionPrimitive } from "bits-ui";
+import Content from "./accordion-content.svelte";
+import Item from "./accordion-item.svelte";
+import Trigger from "./accordion-trigger.svelte";
+
+const Root = AccordionPrimitive.Root;
+export {
+	Root,
+	Content,
+	Item,
+	Trigger,
+	//
+	Root as Accordion,
+	Content as AccordionContent,
+	Item as AccordionItem,
+	Trigger as AccordionTrigger,
+};
diff --git a/src/lib/components/ui/app-sidebar/app-sidebar.svelte b/src/lib/components/ui/app-sidebar/app-sidebar.svelte
index 9f19c7a..2e615cb 100644
--- a/src/lib/components/ui/app-sidebar/app-sidebar.svelte
+++ b/src/lib/components/ui/app-sidebar/app-sidebar.svelte
@@ -59,6 +59,13 @@
 						</Sidebar.MenuItem>
 					{/snippet}
 				</Collapsible.Root>
+				<Sidebar.MenuItem>
+					<Sidebar.MenuButton>
+						{#snippet child({ props })}
+							<a href="/messages" {...props}>Messages</a>
+						{/snippet}
+					</Sidebar.MenuButton>
+				</Sidebar.MenuItem>
 				<Sidebar.MenuItem>
 					<Sidebar.MenuButton>
 						{#snippet child({ props })}
diff --git a/src/lib/components/ui/calendar/calendar-cell.svelte b/src/lib/components/ui/calendar/calendar-cell.svelte
new file mode 100644
index 0000000..8f3f766
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-cell.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.CellProps = $props();
+</script>
+
+<CalendarPrimitive.Cell
+	class={cn(
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/calendar/calendar-day.svelte b/src/lib/components/ui/calendar/calendar-day.svelte
new file mode 100644
index 0000000..e9be9c0
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-day.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.DayProps = $props();
+</script>
+
+<CalendarPrimitive.Day
+	class={cn(
+		buttonVariants({ variant: "ghost" }),
+		"size-8 p-0 font-normal",
+		// Today
+		"[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground",
+		// Selected
+		"data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground data-[selected]:opacity-100",
+		// Disabled
+		"data-[disabled]:text-muted-foreground data-[disabled]:opacity-50",
+		// Unavailable
+		"data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through",
+		// Outside months
+		"data-[outside-month]:text-muted-foreground [&[data-outside-month][data-selected]]:bg-accent/50 [&[data-outside-month][data-selected]]:text-muted-foreground data-[outside-month]:pointer-events-none data-[outside-month]:opacity-50 [&[data-outside-month][data-selected]]:opacity-30",
+		className
+	)}
+	bind:ref
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/calendar/calendar-grid-body.svelte b/src/lib/components/ui/calendar/calendar-grid-body.svelte
new file mode 100644
index 0000000..8cd86de
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid-body.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridBodyProps = $props();
+</script>
+
+<CalendarPrimitive.GridBody bind:ref class={cn(className)} {...restProps} />
diff --git a/src/lib/components/ui/calendar/calendar-grid-head.svelte b/src/lib/components/ui/calendar/calendar-grid-head.svelte
new file mode 100644
index 0000000..333edc4
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid-head.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridHeadProps = $props();
+</script>
+
+<CalendarPrimitive.GridHead bind:ref class={cn(className)} {...restProps} />
diff --git a/src/lib/components/ui/calendar/calendar-grid-row.svelte b/src/lib/components/ui/calendar/calendar-grid-row.svelte
new file mode 100644
index 0000000..9032236
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid-row.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridRowProps = $props();
+</script>
+
+<CalendarPrimitive.GridRow bind:ref class={cn("flex", className)} {...restProps} />
diff --git a/src/lib/components/ui/calendar/calendar-grid.svelte b/src/lib/components/ui/calendar/calendar-grid.svelte
new file mode 100644
index 0000000..1d7edb5
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-grid.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.GridProps = $props();
+</script>
+
+<CalendarPrimitive.Grid
+	bind:ref
+	class={cn("w-full border-collapse space-y-1", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/calendar/calendar-head-cell.svelte b/src/lib/components/ui/calendar/calendar-head-cell.svelte
new file mode 100644
index 0000000..4e75040
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-head-cell.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadCellProps = $props();
+</script>
+
+<CalendarPrimitive.HeadCell
+	bind:ref
+	class={cn("text-muted-foreground w-8 rounded-md text-[0.8rem] font-normal", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/calendar/calendar-header.svelte b/src/lib/components/ui/calendar/calendar-header.svelte
new file mode 100644
index 0000000..e64feae
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeaderProps = $props();
+</script>
+
+<CalendarPrimitive.Header
+	bind:ref
+	class={cn("relative flex w-full items-center justify-between pt-1", className)}
+	{...restProps}
+/>
diff --git a/src/lib/components/ui/calendar/calendar-heading.svelte b/src/lib/components/ui/calendar/calendar-heading.svelte
new file mode 100644
index 0000000..5d57a50
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-heading.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: CalendarPrimitive.HeadingProps = $props();
+</script>
+
+<CalendarPrimitive.Heading bind:ref class={cn("text-sm font-medium", className)} {...restProps} />
diff --git a/src/lib/components/ui/calendar/calendar-months.svelte b/src/lib/components/ui/calendar/calendar-months.svelte
new file mode 100644
index 0000000..4cd0ed7
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-months.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("mt-4 flex flex-col space-y-4 sm:flex-row sm:space-x-4 sm:space-y-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/src/lib/components/ui/calendar/calendar-next-button.svelte b/src/lib/components/ui/calendar/calendar-next-button.svelte
new file mode 100644
index 0000000..3eaff6f
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-next-button.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CalendarPrimitive.NextButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronRight />
+{/snippet}
+
+<CalendarPrimitive.NextButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...restProps}
+	children={children || Fallback}
+/>
diff --git a/src/lib/components/ui/calendar/calendar-prev-button.svelte b/src/lib/components/ui/calendar/calendar-prev-button.svelte
new file mode 100644
index 0000000..77430c9
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar-prev-button.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive } from "bits-ui";
+	import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import { buttonVariants } from "$lib/components/ui/button/index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: CalendarPrimitive.PrevButtonProps = $props();
+</script>
+
+{#snippet Fallback()}
+	<ChevronLeft />
+{/snippet}
+
+<CalendarPrimitive.PrevButton
+	bind:ref
+	class={cn(
+		buttonVariants({ variant: "outline" }),
+		"size-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+		className
+	)}
+	{...restProps}
+	children={children || Fallback}
+/>
diff --git a/src/lib/components/ui/calendar/calendar.svelte b/src/lib/components/ui/calendar/calendar.svelte
new file mode 100644
index 0000000..16bebd7
--- /dev/null
+++ b/src/lib/components/ui/calendar/calendar.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import * as Calendar from "./index.js";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		value = $bindable(),
+		placeholder = $bindable(),
+		class: className,
+		weekdayFormat = "short",
+		...restProps
+	}: WithoutChildrenOrChild<CalendarPrimitive.RootProps> = $props();
+</script>
+
+<!--
+Discriminated Unions + Destructing (required for bindable) do not
+get along, so we shut typescript up by casting `value` to `never`.
+-->
+<CalendarPrimitive.Root
+	bind:value={value as never}
+	bind:ref
+	bind:placeholder
+	{weekdayFormat}
+	class={cn("p-3", className)}
+	{...restProps}
+>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header>
+			<Calendar.PrevButton />
+			<Calendar.Heading />
+			<Calendar.NextButton />
+		</Calendar.Header>
+		<Calendar.Months>
+			{#each months as month}
+				<Calendar.Grid>
+					<Calendar.GridHead>
+						<Calendar.GridRow class="flex">
+							{#each weekdays as weekday}
+								<Calendar.HeadCell>
+									{weekday.slice(0, 2)}
+								</Calendar.HeadCell>
+							{/each}
+						</Calendar.GridRow>
+					</Calendar.GridHead>
+					<Calendar.GridBody>
+						{#each month.weeks as weekDates}
+							<Calendar.GridRow class="mt-2 w-full">
+								{#each weekDates as date}
+									<Calendar.Cell {date} month={month.value}>
+										<Calendar.Day />
+									</Calendar.Cell>
+								{/each}
+							</Calendar.GridRow>
+						{/each}
+					</Calendar.GridBody>
+				</Calendar.Grid>
+			{/each}
+		</Calendar.Months>
+	{/snippet}
+</CalendarPrimitive.Root>
diff --git a/src/lib/components/ui/calendar/index.ts b/src/lib/components/ui/calendar/index.ts
new file mode 100644
index 0000000..ab257ab
--- /dev/null
+++ b/src/lib/components/ui/calendar/index.ts
@@ -0,0 +1,30 @@
+import Root from "./calendar.svelte";
+import Cell from "./calendar-cell.svelte";
+import Day from "./calendar-day.svelte";
+import Grid from "./calendar-grid.svelte";
+import Header from "./calendar-header.svelte";
+import Months from "./calendar-months.svelte";
+import GridRow from "./calendar-grid-row.svelte";
+import Heading from "./calendar-heading.svelte";
+import GridBody from "./calendar-grid-body.svelte";
+import GridHead from "./calendar-grid-head.svelte";
+import HeadCell from "./calendar-head-cell.svelte";
+import NextButton from "./calendar-next-button.svelte";
+import PrevButton from "./calendar-prev-button.svelte";
+
+export {
+	Day,
+	Cell,
+	Grid,
+	Header,
+	Months,
+	GridRow,
+	Heading,
+	GridBody,
+	GridHead,
+	HeadCell,
+	NextButton,
+	PrevButton,
+	//
+	Root as Calendar,
+};
diff --git a/src/lib/components/ui/input/input.svelte b/src/lib/components/ui/input/input.svelte
index 08c3faf..37ef6c9 100644
--- a/src/lib/components/ui/input/input.svelte
+++ b/src/lib/components/ui/input/input.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Clock from 'lucide-svelte/icons/clock';
 	import type { WithElementRef } from 'bits-ui';
 	import { cn } from '$lib/utils.js';
 
@@ -13,18 +14,31 @@
 </script>
 
 <div
-	class="w-full rounded-lg border border-input bg-transparent px-4 py-2 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+	class="flex w-full items-center justify-between rounded-lg border border-input bg-transparent px-4 py-2 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
 >
-	<div class="text-xs font-semibold text-muted-foreground">
-		{label}
-		<span class="text-red-500">
-			{#if restProps['required']}*{/if}
-		</span>
+	<div class="w-full">
+		<div class="text-xs font-semibold text-muted-foreground">
+			{label}
+			<span class="text-red-500">
+				{#if restProps['required']}*{/if}
+			</span>
+		</div>
+		<input
+			bind:this={ref}
+			class={cn('w-full bg-transparent text-sm outline-none ring-0', className)}
+			bind:value
+			{...restProps}
+		/>
 	</div>
-	<input
-		bind:this={ref}
-		class={cn('w-full bg-transparent text-sm outline-none ring-0', className)}
-		bind:value
-		{...restProps}
-	/>
+	{#if restProps['type'] === 'time'}
+		<div class="size-4">
+			<Clock class="size-4" />
+		</div>
+	{/if}
 </div>
+
+<style lang="pcss">
+	input::-webkit-calendar-picker-indicator {
+		display: none;
+	}
+</style>
diff --git a/src/lib/components/ui/messages/message-delete.svelte b/src/lib/components/ui/messages/message-delete.svelte
new file mode 100644
index 0000000..e653c44
--- /dev/null
+++ b/src/lib/components/ui/messages/message-delete.svelte
@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import LoaderCircle from 'lucide-svelte/icons/loader-circle';
+	import { messageStore, selectedMessageStore } from '$lib/store/message.store';
+
+	let { showDeleteMessageDialog = $bindable() } = $props();
+	let loading = $state(false);
+	let selectedMessage = $messageStore.get($selectedMessageStore ?? '');
+
+	const deleteMessage = async () => {
+		if (!selectedMessage) return;
+
+		loading = true;
+		await fetch(`/api/messages/${selectedMessage.id}`, { method: 'DELETE' }).then(() => {
+			showDeleteMessageDialog = false;
+
+			messageStore.update((messageMap) => {
+				messageMap.delete(selectedMessage.id);
+				return messageMap;
+			});
+		});
+
+		loading = false;
+	};
+</script>
+
+{#if selectedMessage}
+	<div>
+		<div class="mb-4">
+			Delete - {selectedMessage.title} ?
+		</div>
+		<Button variant="destructive" onclick={deleteMessage}>
+			Confirm
+			{#if loading}
+				<LoaderCircle class="ml-2 h-5 w-5 animate-spin" />
+			{/if}
+		</Button>
+	</div>
+{/if}
diff --git a/src/lib/components/ui/messages/message-form.svelte b/src/lib/components/ui/messages/message-form.svelte
new file mode 100644
index 0000000..60088fd
--- /dev/null
+++ b/src/lib/components/ui/messages/message-form.svelte
@@ -0,0 +1,185 @@
+<script lang="ts">
+	import { messageStore, selectedMessageStore } from '$lib/store/message.store';
+	import { Button } from '$lib/components/ui/button';
+	import { Input } from '$lib/components/ui/input';
+	import { Textarea } from '$lib/components/ui/textarea';
+	import CircleAlert from 'lucide-svelte/icons/circle-alert';
+	import CalendarIcon from 'lucide-svelte/icons/calendar';
+	import LoaderCircle from 'lucide-svelte/icons/loader-circle';
+	import { Calendar } from '$lib/components/ui/calendar';
+	import * as Popover from '$lib/components/ui/popover';
+	import * as Select from '$lib/components/ui/select';
+	import {
+		type DateValue,
+		DateFormatter,
+		getLocalTimeZone,
+		parseDate
+	} from '@internationalized/date';
+	import { cn } from '$lib/utils';
+
+	let { websites = $bindable(), showMessageFormDialog = $bindable() } = $props();
+	const df = new DateFormatter('en-US', {
+		dateStyle: 'long'
+	});
+	let selectedMessage = $selectedMessageStore
+		? $messageStore.get($selectedMessageStore)
+		: undefined;
+	let title = $state(selectedMessage ? selectedMessage.title : '');
+	let content = $state(selectedMessage ? selectedMessage.content : '');
+	let startDate = $state<DateValue>(
+		selectedMessage
+			? parseDate(new Date(selectedMessage.startTime).toISOString().split('T')[0])
+			: parseDate(new Date().toISOString().split('T')[0])
+	);
+	let startTime = $state(
+		selectedMessage
+			? selectedMessage.startTime.split(' ')[1].substring(0, 5) // Gets "11:00" from "11:00:00+00"
+			: new Date().toLocaleTimeString('en-US', {
+					hour12: false,
+					hour: '2-digit',
+					minute: '2-digit'
+				})
+	);
+	let formError = $state('');
+	let loading = $state(false);
+	let selectedWebsite = $state(selectedMessage ? selectedMessage.websiteId : '');
+	let websiteOptions = $state<{ label: string; value: string }[]>(getWebsiteOptions());
+	const triggerContent = $derived(
+		websiteOptions.find((f) => f.value === selectedWebsite)?.label ?? 'Select a website'
+	);
+
+	function getWebsiteOptions() {
+		if (!websites) return [];
+		return websites.map((website) => ({
+			label: `${website.name} (${website.projectName})`,
+			value: website.id
+		}));
+	}
+
+	$effect(() => {
+		websiteOptions = getWebsiteOptions();
+	});
+
+	const handleSubmit = async (event: Event): Promise<void> => {
+		event.preventDefault();
+		loading = true;
+
+		const url = selectedMessage
+			? `/api/messages/${selectedWebsite}/${selectedMessage.id}`
+			: `/api/messages/${selectedWebsite}`;
+		const body = {
+			title,
+			content,
+			startTime: new Date(`${startDate} ${startTime}`),
+			id: selectedMessage?.id
+		};
+
+		await fetch(url, {
+			method: selectedMessage ? 'PUT' : 'POST',
+			headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+			body: JSON.stringify(body)
+		})
+			.then((res) => res.json())
+			.then((data) => {
+				if (data.error) {
+					formError = data.error;
+					return;
+				} else {
+					messageStore.update((messageMap) => {
+						messageMap.set(String(data.id), data);
+						return messageMap;
+					});
+				}
+				showMessageFormDialog = false;
+			})
+			.catch((err) => {
+				console.log(err);
+				formError = 'An error occurred. Please try again later.';
+			});
+
+		loading = false;
+	};
+</script>
+
+<form onsubmit={handleSubmit} class="mt-4 space-y-4">
+	{#if formError}
+		<div class="mb-4 text-left">
+			<div class="flex items-center border border-red-400 px-4 py-2 text-red-400">
+				<CircleAlert class="mr-2 h-4 w-4" />
+				{formError}
+			</div>
+		</div>
+	{/if}
+	<Select.Root type="single" name="favoriteFruit" bind:value={selectedWebsite}>
+		<Select.Trigger label="Select a website">
+			{triggerContent}
+		</Select.Trigger>
+		<Select.Content>
+			<Select.Group>
+				{#each websiteOptions as websiteOption}
+					<Select.Item value={websiteOption.value} label={websiteOption.label}>
+						{websiteOption.label}
+					</Select.Item>
+				{/each}
+			</Select.Group>
+		</Select.Content>
+	</Select.Root>
+
+	<Input label="Title" id="title" bind:value={title} required />
+	<div class="flex items-center space-x-4">
+		<div class="w-3/5">
+			<Popover.Root>
+				<Popover.Trigger>
+					{#snippet child({ props })}
+						<Button
+							variant="outline"
+							class={cn(
+								'h-full w-full justify-between rounded-lg border border-input bg-transparent px-4 py-2 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+								!startDate && 'text-muted-foreground'
+							)}
+							{...props}
+						>
+							<div class="text-left">
+								<div class="text-xs font-semibold text-muted-foreground">
+									Select a date
+									<span class="text-red-500"> * </span>
+								</div>
+								{startDate ? df.format(startDate.toDate(getLocalTimeZone())) : 'Select a date'}
+							</div>
+							<div>
+								<CalendarIcon class="mr-2 size-4" />
+							</div>
+						</Button>
+					{/snippet}
+				</Popover.Trigger>
+				<Popover.Content class="w-auto p-0">
+					<Calendar bind:value={startDate} type="single" initialFocus />
+				</Popover.Content>
+			</Popover.Root>
+		</div>
+		<div class="w-2/5">
+			<Input
+				label="Time"
+				id="startTime"
+				type="time"
+				name="startTime"
+				bind:value={startTime}
+				required
+			/>
+		</div>
+	</div>
+	<Textarea
+		label="Content"
+		id="content"
+		bind:value={content}
+		data-gramm_editor="false"
+		class="resize-none"
+		required
+	/>
+	<Button type="submit" disabled={loading}>
+		Submit
+		{#if loading}
+			<LoaderCircle class="ml-2 h-5 w-5 animate-spin" />
+		{/if}
+	</Button>
+</form>
diff --git a/src/lib/components/ui/messages/project-card.svelte b/src/lib/components/ui/messages/project-card.svelte
new file mode 100644
index 0000000..5169ca6
--- /dev/null
+++ b/src/lib/components/ui/messages/project-card.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { projectStore, selectedProjectIdStore } from '$lib/store/project.store';
+	import { buttonVariants } from '$lib/components/ui/button';
+	import * as Card from '$lib/components/ui/card';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
+	import { cn } from '$lib/utils';
+
+	let {
+		projectId,
+		showProjectFormDialog = $bindable(),
+		showDeleteProjectDialog = $bindable()
+	} = $props();
+</script>
+
+{#if projectId}
+	{@const project = $projectStore.get(projectId)}
+	{#if project}
+		<a href="/projects/{project.slug}">
+			<Card.Root class="relative inline-block w-full">
+				<DropdownMenu.Root>
+					<DropdownMenu.Trigger
+						class={cn(buttonVariants({ variant: 'ghost', size: 'icon' }), 'absolute right-2 top-2')}
+					>
+						<EllipsisVertical class="h-3.5 w-3.5" />
+					</DropdownMenu.Trigger>
+					<DropdownMenu.Content>
+						<DropdownMenu.Group>
+							<DropdownMenu.Group>
+								<DropdownMenu.Item
+									onclick={() => {
+										showProjectFormDialog = true;
+										selectedProjectIdStore.set(project.id);
+									}}
+								>
+									Edit
+								</DropdownMenu.Item>
+								<DropdownMenu.Item
+									onclick={() => {
+										showDeleteProjectDialog = true;
+										selectedProjectIdStore.set(project.id);
+									}}
+								>
+									Delete
+								</DropdownMenu.Item>
+							</DropdownMenu.Group>
+						</DropdownMenu.Group>
+					</DropdownMenu.Content>
+				</DropdownMenu.Root>
+				<div class="p-4">
+					<div class="z-10 mb-3 whitespace-pre-wrap text-xl font-medium">{project.name}</div>
+					<p class="h-16 text-sm">{project.description ?? ''}</p>
+				</div>
+				<a
+					target="_blank"
+					href="/status/{project.slug}"
+					class="flex w-full items-center justify-between rounded-b-xl border-t border-sidebar-border bg-sidebar py-1.5"
+				>
+					<span class="px-2 text-xs text-muted-foreground">uptiq/status/{project.slug}</span>
+				</a>
+			</Card.Root>
+		</a>
+	{/if}
+{/if}
diff --git a/src/lib/components/ui/popover/index.ts b/src/lib/components/ui/popover/index.ts
new file mode 100644
index 0000000..63aecf9
--- /dev/null
+++ b/src/lib/components/ui/popover/index.ts
@@ -0,0 +1,17 @@
+import { Popover as PopoverPrimitive } from "bits-ui";
+import Content from "./popover-content.svelte";
+const Root = PopoverPrimitive.Root;
+const Trigger = PopoverPrimitive.Trigger;
+const Close = PopoverPrimitive.Close;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	Close,
+	//
+	Root as Popover,
+	Content as PopoverContent,
+	Trigger as PopoverTrigger,
+	Close as PopoverClose,
+};
diff --git a/src/lib/components/ui/popover/popover-content.svelte b/src/lib/components/ui/popover/popover-content.svelte
new file mode 100644
index 0000000..f1df6fd
--- /dev/null
+++ b/src/lib/components/ui/popover/popover-content.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn } from "$lib/utils.js";
+	import { Popover as PopoverPrimitive } from "bits-ui";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		portalProps,
+		...restProps
+	}: PopoverPrimitive.ContentProps & {
+		portalProps?: PopoverPrimitive.PortalProps;
+	} = $props();
+</script>
+
+<PopoverPrimitive.Portal {...portalProps}>
+	<PopoverPrimitive.Content
+		bind:ref
+		{align}
+		{sideOffset}
+		class={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none",
+			className
+		)}
+		{...restProps}
+	/>
+</PopoverPrimitive.Portal>
diff --git a/src/lib/components/ui/status/status-card.svelte b/src/lib/components/ui/status/status-card.svelte
index 79f1444..e2a211f 100644
--- a/src/lib/components/ui/status/status-card.svelte
+++ b/src/lib/components/ui/status/status-card.svelte
@@ -67,8 +67,10 @@
 									selectedWebsiteIdStore.set(websiteId);
 								}}>Edit</DropdownMenu.Item
 							>
+							<a href="/messages?websiteId={websiteId}">
+								<DropdownMenu.Item>Messages</DropdownMenu.Item>
+							</a>
 							<DropdownMenu.Item disabled={true}>Pause (coming soon)</DropdownMenu.Item>
-							<DropdownMenu.Item disabled={true}>Alerts (coming soon)</DropdownMenu.Item>
 							<DropdownMenu.Item disabled={true}>Subscribers (coming soon)</DropdownMenu.Item>
 							<DropdownMenu.Separator />
 							<DropdownMenu.Item
diff --git a/src/lib/components/ui/status/status-page-card.svelte b/src/lib/components/ui/status/status-page-card.svelte
index 15721e3..b881115 100644
--- a/src/lib/components/ui/status/status-page-card.svelte
+++ b/src/lib/components/ui/status/status-page-card.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
 	import type { SelectPartialStatus } from '$lib/db/schema';
+	import { prettifyDate } from '$lib/utils';
 	import * as Card from '$lib/components/ui/card';
+	import * as Accordion from '$lib/components/ui/accordion/index.js';
 	import StatusBadge from '$lib/components/ui/status/status-badge.svelte';
 	import StatusAvailability from '$lib/components/ui/status/status-availability.svelte';
 	import StatusPerformance from '$lib/components/ui/status/status-performance.svelte';
 	import StatusPageChart from '$lib/components/ui/status/status-page-chart.svelte';
+	import type { StatusPageMessages } from '$lib/api/types';
+	import Calendar from 'lucide-svelte/icons/calendar';
 
 	interface StatusPageItem {
 		name: string;
 		url: string;
 		statuses: SelectPartialStatus[];
+		messages: StatusPageMessages[];
 	}
 
 	interface Props {
@@ -34,7 +39,7 @@
 			{/if}
 		</div>
 	</div>
-	<div class="flex flex-col items-center justify-between gap-4 sm:flex-row sm:gap-8">
+	<div class=" flex flex-col items-center justify-between gap-4 sm:flex-row sm:gap-8">
 		<div class="w-full sm:w-1/2">
 			<div class="mb-2">
 				<a
@@ -60,4 +65,56 @@
 			{/if}
 		</div>
 	</div>
+	{#if statusPageItem.messages.length > 0}
+		<div class="mt-4">
+			<Accordion.Root
+				type="single"
+				value={statusPageItem.name}
+				class="w-full rounded-lg bg-sidebar px-4"
+			>
+				<Accordion.Item value={statusPageItem.name}>
+					<Accordion.Trigger>Messages</Accordion.Trigger>
+					<Accordion.Content>
+						<ol class="relative ms-4 border-s">
+							{#each statusPageItem.messages as message}
+								<li class="mb-6 ms-4 px-4">
+									<span
+										class="absolute -start-3 flex h-6 w-6 items-center justify-center rounded-full bg-accent dark:ring-gray-900"
+									>
+										<Calendar class="size-3" />
+									</span>
+									<div class="mb-2 flex items-center space-x-2">
+										<h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+											{message.title}
+										</h3>
+										<time class="block text-xs font-normal leading-none text-muted-foreground">
+											{prettifyDate(new Date(message.startTime))}
+										</time>
+									</div>
+									<p class="text-sm">
+										{message.content}
+									</p>
+								</li>
+							{/each}
+						</ol>
+						<!-- <ol class="relative gap-10 border-s border-gray-200 dark:border-gray-700">
+
+								<li class=" ms-4">
+									<div
+										class="absolute -start-1.5 mt-1.5 h-3 w-3 rounded-full border bg-gray-200 dark:bg-gray-700"
+									></div>
+									<time
+										class="mb-1 text-sm font-normal leading-none text-gray-400 dark:text-gray-500"
+									>
+
+									</time>
+
+								</li>
+							{/each}
+						</ol> -->
+					</Accordion.Content>
+				</Accordion.Item>
+			</Accordion.Root>
+		</div>
+	{/if}
 </Card.Root>
diff --git a/src/lib/components/ui/table/index.ts b/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..14695c8
--- /dev/null
+++ b/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Root from "./table.svelte";
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
diff --git a/src/lib/components/ui/table/table-body.svelte b/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..6c20c01
--- /dev/null
+++ b/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>
diff --git a/src/lib/components/ui/table/table-caption.svelte b/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..2b0cba5
--- /dev/null
+++ b/src/lib/components/ui/table/table-caption.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<caption bind:this={ref} class={cn("text-muted-foreground mt-4 text-sm", className)} {...restProps}>
+	{@render children?.()}
+</caption>
diff --git a/src/lib/components/ui/table/table-cell.svelte b/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..d859856
--- /dev/null
+++ b/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLTdAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td
+	bind:this={ref}
+	class={cn(
+		"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</td>
diff --git a/src/lib/components/ui/table/table-footer.svelte b/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..0267c47
--- /dev/null
+++ b/src/lib/components/ui/table/table-footer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot bind:this={ref} class={cn("bg-muted/50 font-medium", className)} {...restProps}>
+	{@render children?.()}
+</tfoot>
diff --git a/src/lib/components/ui/table/table-head.svelte b/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..45b2896
--- /dev/null
+++ b/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLThAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th
+	bind:this={ref}
+	class={cn(
+		"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</th>
diff --git a/src/lib/components/ui/table/table-header.svelte b/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..684a57b
--- /dev/null
+++ b/src/lib/components/ui/table/table-header.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead bind:this={ref} class={cn("[&_tr]:border-b", className)} {...restProps}>
+	{@render children?.()}
+</thead>
diff --git a/src/lib/components/ui/table/table-row.svelte b/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..b57bcaa
--- /dev/null
+++ b/src/lib/components/ui/table/table-row.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	class={cn(
+		'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
diff --git a/src/lib/components/ui/table/table.svelte b/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..bc8d74f
--- /dev/null
+++ b/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { HTMLTableAttributes } from 'svelte/elements';
+	import type { WithElementRef } from 'bits-ui';
+	import { cn } from '$lib/utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div class="relative w-full overflow-auto">
+	<table bind:this={ref} class={cn('w-full caption-bottom text-sm', className)} {...restProps}>
+		{@render children?.()}
+	</table>
+</div>
diff --git a/src/lib/db/migrations/0002_nappy_ultimo.sql b/src/lib/db/migrations/0002_nappy_ultimo.sql
new file mode 100644
index 0000000..bd4a6f7
--- /dev/null
+++ b/src/lib/db/migrations/0002_nappy_ultimo.sql
@@ -0,0 +1,22 @@
+CREATE TABLE IF NOT EXISTS "messages" (
+	"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
+	"user_id" text NOT NULL,
+	"website_id" uuid NOT NULL,
+	"title" varchar(100) NOT NULL,
+	"content" varchar(1000) NOT NULL,
+	"start_time" timestamp with time zone NOT NULL,
+	"created_at" timestamp with time zone DEFAULT now() NOT NULL,
+	"updated_at" timestamp with time zone DEFAULT now() NOT NULL
+);
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "messages" ADD CONSTRAINT "messages_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE cascade;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
+--> statement-breakpoint
+DO $$ BEGIN
+ ALTER TABLE "messages" ADD CONSTRAINT "messages_website_id_websites_id_fk" FOREIGN KEY ("website_id") REFERENCES "public"."websites"("id") ON DELETE cascade ON UPDATE cascade;
+EXCEPTION
+ WHEN duplicate_object THEN null;
+END $$;
diff --git a/src/lib/db/migrations/meta/0002_snapshot.json b/src/lib/db/migrations/meta/0002_snapshot.json
new file mode 100644
index 0000000..a3d47d3
--- /dev/null
+++ b/src/lib/db/migrations/meta/0002_snapshot.json
@@ -0,0 +1,503 @@
+{
+  "id": "bb3d4314-766f-416b-bd63-dac98b8ad610",
+  "prevId": "c99f9752-b9c9-41fa-9c7e-8a2ba8075f0c",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.alerts": {
+      "name": "alerts",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "website_id": {
+          "name": "website_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "type": {
+          "name": "type",
+          "type": "varchar(25)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "target": {
+          "name": "target",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "enabled": {
+          "name": "enabled",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true,
+          "default": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "alerts_website_id_websites_id_fk": {
+          "name": "alerts_website_id_websites_id_fk",
+          "tableFrom": "alerts",
+          "tableTo": "websites",
+          "columnsFrom": [
+            "website_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.messages": {
+      "name": "messages",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "website_id": {
+          "name": "website_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "title": {
+          "name": "title",
+          "type": "varchar(100)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "content": {
+          "name": "content",
+          "type": "varchar(1000)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "start_time": {
+          "name": "start_time",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "messages_user_id_users_id_fk": {
+          "name": "messages_user_id_users_id_fk",
+          "tableFrom": "messages",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "messages_website_id_websites_id_fk": {
+          "name": "messages_website_id_websites_id_fk",
+          "tableFrom": "messages",
+          "tableTo": "websites",
+          "columnsFrom": [
+            "website_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.projects": {
+      "name": "projects",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "slug": {
+          "name": "slug",
+          "type": "varchar(10)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(25)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "description": {
+          "name": "description",
+          "type": "varchar(400)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "projects_user_id_users_id_fk": {
+          "name": "projects_user_id_users_id_fk",
+          "tableFrom": "projects",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "no action",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "projects_slug_unique": {
+          "name": "projects_slug_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "slug"
+          ]
+        }
+      }
+    },
+    "public.uptime_checks": {
+      "name": "uptime_checks",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "website_id": {
+          "name": "website_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "status": {
+          "name": "status",
+          "type": "status_enum",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "response_time": {
+          "name": "response_time",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "status_code": {
+          "name": "status_code",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "uptime_checks_website_id_websites_id_fk": {
+          "name": "uptime_checks_website_id_websites_id_fk",
+          "tableFrom": "uptime_checks",
+          "tableTo": "websites",
+          "columnsFrom": [
+            "website_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    },
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(25)",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "pro": {
+          "name": "pro",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": false,
+          "default": false
+        },
+        "username": {
+          "name": "username",
+          "type": "varchar(39)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "varchar(255)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_id_unique": {
+          "name": "users_id_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "id"
+          ]
+        },
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "username"
+          ]
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      }
+    },
+    "public.websites": {
+      "name": "websites",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "uuid",
+          "primaryKey": true,
+          "notNull": true,
+          "default": "gen_random_uuid()"
+        },
+        "project_id": {
+          "name": "project_id",
+          "type": "uuid",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "url": {
+          "name": "url",
+          "type": "varchar(2083)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "varchar(25)",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "check_interval": {
+          "name": "check_interval",
+          "type": "check_interval_enum",
+          "typeSchema": "public",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "'5'"
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp with time zone",
+          "primaryKey": false,
+          "notNull": true,
+          "default": "now()"
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "websites_project_id_projects_id_fk": {
+          "name": "websites_project_id_projects_id_fk",
+          "tableFrom": "websites",
+          "tableTo": "projects",
+          "columnsFrom": [
+            "project_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        },
+        "websites_user_id_users_id_fk": {
+          "name": "websites_user_id_users_id_fk",
+          "tableFrom": "websites",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {}
+    }
+  },
+  "enums": {
+    "public.check_interval_enum": {
+      "name": "check_interval_enum",
+      "schema": "public",
+      "values": [
+        "1",
+        "2",
+        "5",
+        "10"
+      ]
+    },
+    "public.status_enum": {
+      "name": "status_enum",
+      "schema": "public",
+      "values": [
+        "up",
+        "degraded",
+        "down",
+        "maintenance",
+        "warning"
+      ]
+    }
+  },
+  "schemas": {},
+  "sequences": {},
+  "_meta": {
+    "columns": {},
+    "schemas": {},
+    "tables": {}
+  }
+}
\ No newline at end of file
diff --git a/src/lib/db/migrations/meta/_journal.json b/src/lib/db/migrations/meta/_journal.json
index ed9e56a..f07faf0 100644
--- a/src/lib/db/migrations/meta/_journal.json
+++ b/src/lib/db/migrations/meta/_journal.json
@@ -15,6 +15,13 @@
       "when": 1729800029715,
       "tag": "0001_solid_diamondback",
       "breakpoints": true
+    },
+    {
+      "idx": 2,
+      "version": "7",
+      "when": 1733146089065,
+      "tag": "0002_nappy_ultimo",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/src/lib/db/schema.ts b/src/lib/db/schema.ts
index 695c9de..cd08517 100644
--- a/src/lib/db/schema.ts
+++ b/src/lib/db/schema.ts
@@ -111,10 +111,26 @@ export const alerts = pgTable('alerts', {
 	updatedAt: timestamp('updated_at', { withTimezone: true }).notNull().defaultNow()
 });
 
+export const messages = pgTable('messages', {
+	id: uuid('id').primaryKey().defaultRandom(),
+	userId: text('user_id')
+		.notNull()
+		.references(() => users.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+	websiteId: uuid('website_id')
+		.notNull()
+		.references(() => websites.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+	title: varchar('title', { length: 100 }).notNull(),
+	content: varchar('content', { length: 1000 }).notNull(),
+	startTime: timestamp('start_time', { withTimezone: true, mode: 'string' }).notNull(),
+	createdAt: timestamp('created_at', { withTimezone: true }).notNull().defaultNow(),
+	updatedAt: timestamp('updated_at', { withTimezone: true }).notNull().defaultNow()
+});
+
 // Relations
 export const usersRelations = relations(users, ({ many }) => ({
 	projects: many(projects),
-	websites: many(websites)
+	websites: many(websites),
+	messages: many(messages)
 }));
 
 export const projectsRelations = relations(projects, ({ one, many }) => ({
@@ -135,7 +151,8 @@ export const websitesRelations = relations(websites, ({ one, many }) => ({
 		references: [users.id]
 	}),
 	uptimeChecks: many(uptimeChecks),
-	alerts: many(alerts)
+	alerts: many(alerts),
+	messages: many(messages)
 }));
 
 export const uptimeChecksRelations = relations(uptimeChecks, ({ one }) => ({
@@ -152,16 +169,29 @@ export const alertsRelations = relations(alerts, ({ one }) => ({
 	})
 }));
 
+export const messagesRelations = relations(messages, ({ one }) => ({
+	website: one(websites, {
+		fields: [messages.websiteId],
+		references: [websites.id]
+	}),
+	user: one(users, {
+		fields: [messages.userId],
+		references: [users.id]
+	})
+}));
+
 // Insert types
 export type InsertUser = typeof users.$inferInsert;
 export type InsertProject = typeof projects.$inferInsert;
 export type InsertWebsite = typeof websites.$inferInsert;
+export type InsertMessage = typeof messages.$inferInsert;
 
 // Select types
 export type SelectUptimeCheck = typeof uptimeChecks.$inferSelect;
 export type SelectProject = typeof projects.$inferSelect;
 export type SelectWebsite = typeof websites.$inferSelect;
 export type SelectStatus = typeof uptimeChecks.$inferSelect;
+export type SelectMessage = typeof messages.$inferSelect;
 
 // Partial Select types
 export type SelectWebsiteStatusCard = Pick<SelectWebsite, 'id' | 'name' | 'url' | 'checkInterval'>;
@@ -171,7 +201,9 @@ export type SelectPartialStatus = Pick<
 	SelectStatus,
 	'status' | 'responseTime' | 'statusCode' | 'createdAt'
 >;
+export type SelectMessagePartial = Pick<SelectMessage, 'id' | 'title' | 'content' | 'startTime'>;
 
 // Zod Schemas
 export const InsertProjectSchema = createInsertSchema(projects);
 export const InsertWebsiteSchema = createInsertSchema(websites);
+export const InsertMessageSchema = createInsertSchema(messages);
diff --git a/src/lib/store/message.store.ts b/src/lib/store/message.store.ts
new file mode 100644
index 0000000..1835827
--- /dev/null
+++ b/src/lib/store/message.store.ts
@@ -0,0 +1,5 @@
+import type { SelectMessagePartial } from '$lib/db/schema';
+import { writable } from 'svelte/store';
+
+export const messageStore = writable<Map<string, SelectMessagePartial>>();
+export const selectedMessageStore = writable<string | null>(null);
diff --git a/src/lib/store/website.store.ts b/src/lib/store/website.store.ts
index 426f6e2..1597868 100644
--- a/src/lib/store/website.store.ts
+++ b/src/lib/store/website.store.ts
@@ -3,3 +3,5 @@ import { writable } from 'svelte/store';
 
 export const websiteStore = writable<Map<string, SelectWebsitePartial>>();
 export const selectedWebsiteIdStore = writable<string | null>(null);
+export const websiteMapStore =
+	writable<Map<string, { projectName: string; websiteName: string }>>();
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
index 84fe7b1..4622484 100644
--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -14,7 +14,8 @@ export const prettifyDate = (date: Date): string => {
 
 	const dateFormatter = new Intl.DateTimeFormat('en-US', {
 		day: '2-digit',
-		month: 'short'
+		month: 'short',
+		year: 'numeric'
 	});
 
 	const time = timeFormatter.format(date);
diff --git a/src/routes/(gaurded)/messages/+page.server.ts b/src/routes/(gaurded)/messages/+page.server.ts
new file mode 100644
index 0000000..d3897dc
--- /dev/null
+++ b/src/routes/(gaurded)/messages/+page.server.ts
@@ -0,0 +1,36 @@
+import type { SelectMessagePartial } from '$lib/db/schema';
+
+export const load = async ({ fetch, url }) => {
+	let requestUrl = '/api/messages';
+
+	const websiteId = url.searchParams.get('websiteId');
+	if (websiteId) {
+		requestUrl += `?websiteId=${websiteId}`;
+	}
+
+	const messages: Map<string, SelectMessagePartial> | null = await fetch(requestUrl)
+		.then((res: Response) => res.json())
+		.then((messages: SelectMessagePartial[]) => {
+			if (!messages) return null;
+			return new Map(
+				messages.map((message: SelectMessagePartial) => [String(message.id), message])
+			);
+		})
+		.catch((err: Error) => {
+			console.log(err);
+			return null;
+		});
+
+	const websites = await fetch('/api/websites')
+		.then((res: Response) => res.json())
+		.catch((err: Error) => {
+			console.log(err);
+			return [];
+		});
+
+	return {
+		messages,
+		websites,
+		selectedWebsite: websiteId
+	};
+};
diff --git a/src/routes/(gaurded)/messages/+page.svelte b/src/routes/(gaurded)/messages/+page.svelte
new file mode 100644
index 0000000..a3ca78f
--- /dev/null
+++ b/src/routes/(gaurded)/messages/+page.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import * as Dialog from '$lib/components/ui/dialog';
+	import * as Table from '$lib/components/ui/table';
+	import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+	import Header from '$lib/components/ui/page/header.svelte';
+	import MessageForm from '$lib/components/ui/messages/message-form.svelte';
+	import MessageDelete from '$lib/components/ui/messages/message-delete.svelte';
+	import { messageStore, selectedMessageStore } from '$lib/store/message.store';
+	import { prettifyDate } from '$lib/utils.js';
+	import Pencil from 'lucide-svelte/icons/pencil';
+	import Trash2 from 'lucide-svelte/icons/trash-2';
+	import X from 'lucide-svelte/icons/x';
+	import EllipsisVertical from 'lucide-svelte/icons/ellipsis-vertical';
+
+	let { data } = $props();
+	let showMessageFormDialog = $state(false);
+	let showDeleteMessageDialog = $state(false);
+
+	$effect(() => {
+		const messages = data.messages;
+		if (messages) messageStore.set(messages);
+	});
+</script>
+
+<section class="flex items-center justify-between">
+	<div class="flex items-center space-x-4">
+		<Header title="Messages" />
+		{#if data.selectedWebsite}
+			<div class="flex items-center rounded-lg bg-sidebar py-2 pl-4 text-xs">
+				<div class="pb-0.5">
+					<span class="text-muted-foreground">Selected website: </span>
+					{data.websites.find((website) => website.id === data.selectedWebsite).name}
+				</div>
+				<Button variant="link" href="/messages" class="h-4">
+					<X class="size-2 " />
+				</Button>
+			</div>
+		{/if}
+	</div>
+	<div class="space-x-2">
+		<Button
+			onclick={() => {
+				showMessageFormDialog = true;
+				selectedMessageStore.set(null);
+			}}
+		>
+			Add Message
+		</Button>
+	</div>
+</section>
+<section>
+	{#if $messageStore === undefined}
+		<p>Loading projects...</p>
+	{:else if $messageStore.size === 0}
+		<p>No messages found. Click "Add Message" to create your first message.</p>
+	{:else}
+		<Table.Root>
+			<Table.Header>
+				<Table.Row>
+					<Table.Head>Website</Table.Head>
+					<Table.Head>Title</Table.Head>
+					<Table.Head>Content</Table.Head>
+					<Table.Head>Start Time</Table.Head>
+					<Table.Head></Table.Head>
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				{#each Array.from($messageStore.keys()) as messageId}
+					{@const message = $messageStore.get(messageId)}
+					{#if message}
+						<Table.Row>
+							<Table.Cell class="w-52">
+								{data.websites.find((website) => website.id === message.websiteId).name}
+							</Table.Cell>
+							<Table.Cell class="w-52">{message.title}</Table.Cell>
+							<Table.Cell>{message.content}</Table.Cell>
+							<Table.Cell class="w-32">{prettifyDate(new Date(message.startTime))}</Table.Cell>
+							<Table.Cell class="w-8 space-x-2">
+								<DropdownMenu.Root>
+									<DropdownMenu.Trigger>
+										<Button size="icon" variant="ghost" class="h-8 w-8">
+											<EllipsisVertical class="h-3.5 w-3.5" />
+											<span class="sr-only">More</span>
+										</Button>
+									</DropdownMenu.Trigger>
+									<DropdownMenu.Content align="end">
+										<DropdownMenu.Item
+											onclick={() => {
+												showMessageFormDialog = true;
+												selectedMessageStore.set(message.id);
+											}}
+										>
+											Edit
+										</DropdownMenu.Item>
+										<DropdownMenu.Separator />
+										<DropdownMenu.Item
+											onclick={() => {
+												showDeleteMessageDialog = true;
+												selectedMessageStore.set(message.id);
+											}}
+										>
+											Delete
+										</DropdownMenu.Item>
+									</DropdownMenu.Content>
+								</DropdownMenu.Root>
+							</Table.Cell>
+						</Table.Row>
+					{/if}
+				{/each}
+			</Table.Body>
+		</Table.Root>
+	{/if}
+</section>
+
+<Dialog.Root bind:open={showMessageFormDialog}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>{$selectedMessageStore ? 'Update' : 'Add'} Message</Dialog.Title>
+			<Dialog.Description>
+				{$selectedMessageStore
+					? 'Update the details of this message.'
+					: 'Enter the details for a new message.'}
+			</Dialog.Description>
+		</Dialog.Header>
+		<MessageForm bind:showMessageFormDialog bind:websites={data.websites} />
+	</Dialog.Content>
+</Dialog.Root>
+
+<Dialog.Root bind:open={showDeleteMessageDialog}>
+	<Dialog.Content>
+		<Dialog.Header>
+			<Dialog.Title>Delete Message</Dialog.Title>
+			<Dialog.Description>
+				Are you sure you want to delete this message? This action cannot be undone.
+			</Dialog.Description>
+		</Dialog.Header>
+		<MessageDelete bind:showDeleteMessageDialog />
+	</Dialog.Content>
+</Dialog.Root>
diff --git a/src/routes/(gaurded)/settings/+page.svelte b/src/routes/(gaurded)/settings/+page.svelte
new file mode 100644
index 0000000..dfbd60f
--- /dev/null
+++ b/src/routes/(gaurded)/settings/+page.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Header from '$lib/components/ui/page/header.svelte';
+</script>
+
+<section class="flex items-center justify-between">
+	<Header title="Settings" />
+</section>