feat(events): refactor event and participant list entries to use schema validation

feat(events): add event creation page
feat(event): add event view page
2025-06-25 19:50:53 +02:00 · 2025-06-25 19:50:42 +02:00 · 2025-06-25 19:50:42 +02:00 · 2025-06-25 19:50:42 +02:00 · 2025-06-25 19:50:42 +02:00 · 2025-06-25 19:50:42 +02:00
49 changed files with 3646 additions and 142 deletions
--- a/.env.test
+++ b/.env.test
@ -0,0 +1,6 @@
+AUTH_SECRET="auth_secret"
+AUTH_URL="http://127.0.0.1:3000"
+HOSTNAME="127.0.0.1"
+DATABASE_URL="file:/tmp/dev.db"
+AUTH_AUTHENTIK_ID="id"
+AUTH_AUTHENTIK_ISSUER="issuer"
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@ -0,0 +1,34 @@
+name: tests
+on:
+  push:
+    branches:
+      - main
+      - renovate/*
+  pull_request:
+jobs:
+  tests:
+    name: Tests
+    runs-on: docker
+    container:
+      image: cypress/browsers:latest
+      options: --user 1001
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Cypress run (e2e)
+        uses: https://github.com/cypress-io/github-action@v6
+        with:
+          build: yarn cypress:build
+          start: yarn cypress:start_server
+          e2e: true
+          wait-on: 'http://127.0.0.1:3000'
+
+      - name: Cypress run (component)
+        uses: https://github.com/cypress-io/github-action@v6
+        with:
+          component: true
+          install: false
--- a/.gitignore
+++ b/.gitignore
@ -33,6 +33,7 @@ yarn-error.log*
 # env files (can opt-in for committing if needed)
 .env*
 !.env.example
+!.env.test

 # vercel
 .vercel
@ -45,3 +46,8 @@ next-env.d.ts
 /prisma/*.db*
 src/generated/*
 data
+
+# cypress
+cypress/videos
+cypress/screenshots
+cypress/coverage
--- a/cypress.config.ts
+++ b/cypress.config.ts
@ -0,0 +1,16 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  component: {
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+});
--- a/cypress/e2e/auth-user.ts
+++ b/cypress/e2e/auth-user.ts
@ -0,0 +1,12 @@
+export default function authUser() {
+  cy.visit('http://127.0.0.1:3000/login');
+  cy.getBySel('login-header').should('exist');
+  cy.getBySel('login-form').should('exist');
+  cy.getBySel('email-input').should('exist');
+  cy.getBySel('password-input').should('exist');
+  cy.getBySel('login-button').should('exist');
+  cy.getBySel('email-input').type('cypress@example.com');
+  cy.getBySel('password-input').type('Password123!');
+  cy.getBySel('login-button').click();
+  cy.url().should('include', '/home');
+}
--- a/cypress/e2e/event-create.cy.ts
+++ b/cypress/e2e/event-create.cy.ts
@ -0,0 +1,9 @@
+import authUser from './auth-user';
+
+describe('event creation', () => {
+  it('loads', () => {
+    authUser();
+
+    // cy.visit('http://127.0.0.1:3000/events/new'); // TODO: Add event creation tests
+  });
+});
--- a/cypress/e2e/login.cy.ts
+++ b/cypress/e2e/login.cy.ts
@ -0,0 +1,45 @@
+describe('login and register', () => {
+  it('loads', () => {
+    cy.visit('http://127.0.0.1:3000/');
+
+    cy.getBySel('login-header').should('exist');
+  });
+
+  it('shows register form', () => {
+    cy.visit('http://127.0.0.1:3000/');
+
+    cy.getBySel('register-switch').click();
+
+    cy.getBySel('register-form').should('exist');
+    cy.getBySel('first-name-input').should('exist');
+    cy.getBySel('last-name-input').should('exist');
+    cy.getBySel('email-input').should('exist');
+    cy.getBySel('username-input').should('exist');
+    cy.getBySel('password-input').should('exist');
+    cy.getBySel('confirm-password-input').should('exist');
+    cy.getBySel('register-button').should('exist');
+  });
+
+  it('allows to register', async () => {
+    cy.visit('http://127.0.0.1:3000/');
+
+    cy.getBySel('register-switch').click();
+
+    cy.getBySel('first-name-input').type('Test');
+    cy.getBySel('last-name-input').type('User');
+    cy.getBySel('email-input').type('test@example.com');
+    cy.getBySel('username-input').type('testuser');
+    cy.getBySel('password-input').type('Password123!');
+    cy.getBySel('confirm-password-input').type('Password123!');
+    cy.getBySel('register-button').click();
+    cy.getBySel('login-header').should('exist');
+    cy.getBySel('login-form').should('exist');
+    cy.getBySel('email-input').should('exist');
+    cy.getBySel('password-input').should('exist');
+    cy.getBySel('login-button').should('exist');
+    cy.getBySel('email-input').type('test@example.com');
+    cy.getBySel('password-input').type('Password123!');
+    cy.getBySel('login-button').click();
+    cy.url().should('include', '/home');
+  });
+});
--- a/cypress/e2e/seed.ts
+++ b/cypress/e2e/seed.ts
@ -0,0 +1,29 @@
+import { PrismaClient } from '../../src/generated/prisma';
+
+const prisma = new PrismaClient();
+
+export default async function requireUser() {
+  await prisma.$transaction(async (tx) => {
+    const { id } = await tx.user.create({
+      data: {
+        email: 'cypress@example.com',
+        name: 'cypress',
+        password_hash:
+          '$2a$10$FmkVRHXzMb63dLHHwG1mDOepZJirL.U964wU/3Xr7cFis8XdRh8sO',
+        first_name: 'Cypress',
+        last_name: 'Tester',
+        emailVerified: new Date(),
+      },
+    });
+
+    await tx.account.create({
+      data: {
+        userId: id,
+        type: 'credentials',
+        provider: 'credentials',
+        providerAccountId: id,
+      },
+    });
+  });
+}
+requireUser();
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@ -0,0 +1,62 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+Cypress.Commands.add('getBySel', (selector, ...args) => {
+  return cy.get(`[data-cy=${selector}]`, ...args);
+});
+
+Cypress.Commands.add('getBySelLike', (selector, ...args) => {
+  return cy.get(`[data-cy*=${selector}]`, ...args);
+});
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      getBySel(
+        selector: string,
+        ...args: any[]
+      ): Chainable<JQuery<HTMLElement>>;
+      getBySelLike(
+        selector: string,
+        ...args: any[]
+      ): Chainable<JQuery<HTMLElement>>;
+    }
+  }
+}
+
+export {};
--- a/cypress/support/component-index.html
+++ b/cypress/support/component-index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
--- a/cypress/support/component.ts
+++ b/cypress/support/component.ts
@ -0,0 +1,38 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import '@/app/globals.css';
+
+// Import commands.js using ES2015 syntax:
+import './commands';
+
+import { mount } from 'cypress/react';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+// Example use:
+// cy.mount(<MyComponent />)
--- a/cypress/support/e2e.ts
+++ b/cypress/support/e2e.ts
@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
--- a/exportSwagger.ts
+++ b/exportSwagger.ts
@ -22,16 +22,15 @@ async function exportSwagger() {
  );

  await Promise.all(
-    filesToImport.map((file) => {
-      return import(file)
-        .then((module) => {
-          if (module.default) {
-            module.default(registry);
-          }
-        })
-        .catch((error) => {
-          console.error(`Error importing ${file}:`, error);
-        });
+    filesToImport.map(async (file) => {
+      try {
+        const moduleImp = await import(file);
+        if (moduleImp.default) {
+          moduleImp.default(registry);
+        }
+      } catch (error) {
+        console.error(`Error importing ${file}:`, error);
+      }
    }),
  );

--- a/package.json
+++ b/package.json
@ -5,7 +5,7 @@
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "prettier --check . && next build",
-    "start": "next start",
+    "start": "node .next/standalone/server.js",
    "lint": "next lint",
    "format": "prettier --write .",
    "prisma:migrate": "dotenv -e .env.local -- prisma migrate dev",
@ -15,7 +15,11 @@
    "prisma:migrate:reset": "dotenv -e .env.local -- prisma migrate reset",
    "dev_container": "docker compose -f docker-compose.dev.yml up --watch --build",
    "swagger:generate": "ts-node -r tsconfig-paths/register exportSwagger.ts",
-    "orval:generate": "orval"
+    "orval:generate": "orval",
+    "cypress:build": "rm -rf /tmp/dev.db && DATABASE_URL=\"file:/tmp/dev.db\" yarn prisma:generate && yarn swagger:generate && yarn orval:generate && DATABASE_URL=\"file:/tmp/dev.db\" yarn prisma:db:push && prettier --check . && NODE_ENV=test next build",
+    "cypress:start_server": "DATABASE_URL=\"file:/tmp/dev.db\" ts-node cypress/e2e/seed.ts && cp .env.test .next/standalone && cp public .next/standalone/ -r && cp .next/static/ .next/standalone/.next/ -r && NODE_ENV=test HOSTNAME=\"0.0.0.0\" dotenv -e .env.test -- node .next/standalone/server.js",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
  },
  "dependencies": {
    "@asteasolutions/zod-to-openapi": "^8.0.0-beta.4",
@ -33,7 +37,8 @@
    "@radix-ui/react-dropdown-menu": "^2.1.15",
    "@radix-ui/react-hover-card": "^1.1.13",
    "@radix-ui/react-label": "^2.1.6",
-    "@radix-ui/react-scroll-area": "^1.2.8",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-scroll-area": "^1.2.9",
    "@radix-ui/react-select": "^2.2.4",
    "@radix-ui/react-separator": "^1.1.7",
    "@radix-ui/react-slot": "^1.2.3",
@ -44,13 +49,18 @@
    "bcryptjs": "^3.0.2",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
    "lucide-react": "^0.515.0",
-    "next": "15.4.0-canary.95",
+    "next": "15.4.0-canary.96",
    "next-auth": "^5.0.0-beta.25",
+    "next-swagger-doc": "^0.4.1",
    "next-themes": "^0.4.6",
    "react": "^19.0.0",
+    "react-day-picker": "^9.7.0",
    "react-dom": "^19.0.0",
    "react-hook-form": "^7.56.4",
+    "sonner": "^2.0.5",
    "swagger-ui-react": "^5.24.1",
    "tailwind-merge": "^3.2.0",
    "zod": "^3.25.60"
@ -63,6 +73,7 @@
    "@types/react-dom": "19.1.6",
    "@types/swagger-ui-react": "5",
    "@types/webpack-env": "1.18.8",
+    "cypress": "14.5.0",
    "dotenv-cli": "8.0.0",
    "eslint": "9.29.0",
    "eslint-config-next": "15.3.4",
@ -75,7 +86,7 @@
    "ts-node": "10.9.2",
    "tsconfig-paths": "4.2.0",
    "tw-animate-css": "1.3.4",
-    "typescript": "5.8.3"
+    "typescript": "^5.8.3"
  },
  "packageManager": "yarn@4.9.2"
 }
--- a/src/app/(main)/home/page.tsx
+++ b/src/app/(main)/home/page.tsx
@ -15,6 +15,7 @@ export default function Home() {
        </h1>
        <RedirectButton redirectUrl='/logout' buttonText='Logout' />
        <RedirectButton redirectUrl='/settings' buttonText='Settings' />
+        <RedirectButton redirectUrl='/events/new' buttonText='New Event' />
      </div>
    </div>
  );
--- a/src/app/events/[eventID]/page.tsx
+++ b/src/app/events/[eventID]/page.tsx
@ -0,0 +1,169 @@
+'use client';
+
+import React from 'react';
+import Logo from '@/components/misc/logo';
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { Label } from '@/components/ui/label';
+import { useGetApiEventEventID } from '@/generated/api/event/event';
+import { useGetApiUserMe } from '@/generated/api/user/user';
+import { RedirectButton } from '@/components/buttons/redirect-button';
+import { useSession } from 'next-auth/react';
+import ParticipantListEntry from '@/components/custom-ui/participant-list-entry';
+import { useParams } from 'next/navigation';
+
+export default function ShowEvent() {
+  const session = useSession();
+
+  const { eventId } = useParams<{ eventId: string }>();
+
+  // Fetch event data
+  const { data: eventData, isLoading, error } = useGetApiEventEventID(eventId);
+  const { data: userData, isLoading: userLoading } = useGetApiUserMe();
+
+  if (isLoading || userLoading) {
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        Loading...
+      </div>
+    );
+  }
+  if (error || !eventData?.data?.event) {
+    return (
+      <div className='flex justify-center items-center h-screen'>
+        Error loading event.
+      </div>
+    );
+  }
+
+  const event = eventData.data.event;
+  const organiserName = userData?.data.user?.name || 'Unknown User';
+
+  // Format dates & times for display
+  const formatDate = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleDateString();
+  };
+  const formatTime = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>
+        <ThemePicker />
+      </div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <div className='flex flex-col gap-5 w-full'>
+            <div className='grid grid-row-start:auto gap-4 sm:gap-8'>
+              <div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
+                <div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
+                  <Logo colorType='monochrome' logoType='submark' width={50} />
+                </div>
+                <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full max-sm:flex max-sm:justify-center'>
+                  <h1 className='text-center'>
+                    {event.title || 'Untitled Event'}
+                  </h1>
+                </div>
+                <div className='w-0 sm:w-[100px]'></div>
+              </div>
+              <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
+                <div>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    start Time
+                  </Label>
+                  <Label size='large'>
+                    {event.start_time
+                      ? `${formatDate(event.start_time)} ${formatTime(event.start_time)}`
+                      : '-'}
+                  </Label>
+                </div>
+                <div>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    end Time
+                  </Label>
+                  <Label size='large'>
+                    {event.end_time
+                      ? `${formatDate(event.end_time)} ${formatTime(event.end_time)}`
+                      : '-'}
+                  </Label>
+                </div>
+                <div className='w-54'>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    Location
+                  </Label>
+                  <Label size='large'>{event.location || '-'}</Label>
+                </div>
+                <div className='flex flex-col gap-4'>
+                  <div className='flex flex-row gap-2'>
+                    <Label className='w-[70px] text-[var(--color-neutral-300)]'>
+                      created:
+                    </Label>
+                    <Label>
+                      {event.created_at ? formatDate(event.created_at) : '-'}
+                    </Label>
+                  </div>
+                  <div className='flex flex-row gap-2'>
+                    <Label className='w-[70px] text-[var(--color-neutral-300)]'>
+                      updated:
+                    </Label>
+                    <Label>
+                      {event.updated_at ? formatDate(event.updated_at) : '-'}
+                    </Label>
+                  </div>
+                </div>
+              </div>
+              <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
+                <div className='h-full w-full grid grid-flow-row gap-4 sm:gap-8'>
+                  <div className='h-full w-full'>
+                    <div className='flex flex-row gap-2'>
+                      <Label className='text-[var(--color-neutral-300)]'>
+                        Organiser:
+                      </Label>
+                      <Label size='large'>{organiserName}</Label>
+                    </div>
+                  </div>
+                  <div className='h-full w-full'>
+                    <Label className='text-[var(--color-neutral-300)] mb-2'>
+                      Description
+                    </Label>
+                    <Label size='large'>{event.description || '-'}</Label>
+                  </div>
+                </div>
+                <div className='h-full w-full mt-2'>
+                  <Label className='text-[var(--color-neutral-300)] mb-2'>
+                    Participants
+                  </Label>{' '}
+                  <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+                    {event.participants?.map((user) => (
+                      <ParticipantListEntry key={user.user.id} {...user} />
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
+                <div className='w-[20%] grid max-sm:w-full'>
+                  {session.data?.user?.id === event.organizer.id ? (
+                    <RedirectButton
+                      redirectUrl={`/events/edit/${eventId}`}
+                      buttonText='edit'
+                      className='w-full'
+                    />
+                  ) : null}
+                </div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/src/app/events/edit/[eventID]/page.tsx
+++ b/src/app/events/edit/[eventID]/page.tsx
@ -0,0 +1,26 @@
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import EventForm from '@/components/forms/event-form';
+import { Suspense } from 'react';
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ eventID: string }>;
+}) {
+  const eventID = (await params).eventID;
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <Suspense>
+            <EventForm type='edit' eventId={eventID} />
+          </Suspense>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/src/app/events/new/page.tsx
+++ b/src/app/events/new/page.tsx
@ -0,0 +1,21 @@
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import EventForm from '@/components/forms/event-form';
+import { Suspense } from 'react';
+
+export default function NewEvent() {
+  return (
+    <div className='flex flex-col items-center justify-center h-screen'>
+      <div className='absolute top-4 right-4'>{<ThemePicker />}</div>
+      <Card className='w-[80%] max-w-screen p-0 gap-0 max-xl:w-[95%] max-h-[90vh] overflow-auto'>
+        <CardHeader className='p-0 m-0 gap-0' />
+
+        <CardContent>
+          <Suspense>
+            <EventForm type='create' />
+          </Suspense>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@ -0,0 +1,59 @@
+'use client';
+
+import { RedirectButton } from '@/components/buttons/redirect-button';
+import EventListEntry from '@/components/custom-ui/event-list-entry';
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { Label } from '@/components/ui/label';
+import { useGetApiEvent } from '@/generated/api/event/event';
+
+export default function Events() {
+  const { data: eventsData, isLoading, error } = useGetApiEvent();
+
+  if (isLoading) return <div className='text-center mt-10'>Loading...</div>;
+  if (error)
+    return (
+      <div className='text-center mt-10 text-red-500'>Error loading events</div>
+    );
+
+  const events = eventsData?.data?.events || [];
+
+  return (
+    <div className='relative h-screen flex flex-col items-center'>
+      <div className='absolute top-4 right-4'>
+        <ThemePicker />
+      </div>
+
+      {/* Heading */}
+      <h1 className='text-3xl font-bold mt-8 mb-4 text-center z-10'>
+        My Events
+      </h1>
+
+      {/* Scrollable event list */}
+      <div className='w-full flex justify-center overflow-hidden'>
+        <div className='grid gap-8 w-[90%] sm:w-[80%] lg:w-[60%] xl:w-[50%] p-6 overflow-y-auto'>
+          {events.length > 0 ? (
+            events.map((event) => (
+              <EventListEntry
+                key={event.id}
+                {...event}
+                created_at={new Date(event.created_at)}
+                updated_at={new Date(event.updated_at)}
+              />
+            ))
+          ) : (
+            <div className='flex flex-1 flex-col items-center justify-center min-h-[300px]'>
+              <Label size='large' className='justify-center text-center'>
+                You don&#39;t have any events right now
+              </Label>
+              <RedirectButton
+                redirectUrl='/events/new'
+                buttonText='create Event'
+                className='mt-4'
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/app/globals.css
+++ b/src/app/globals.css
@ -9,6 +9,7 @@
  --font-heading: 'Comfortaa', sans-serif;
  --font-label: 'Varela Round', sans-serif;
  --font-button: 'Varela Round', sans-serif;
+  --font-sans: var(--font-label);

  --transparent: transparent;

@ -28,7 +29,7 @@

  --background: var(--neutral-800);
  --background-reversed: var(--neutral-000);
-  --base: var(--neutral-800);
+  --basecl: var(--neutral-800);
  --text: var(--neutral-000);
  --text-alt: var(--neutral-900);
  --text-input: var(--text);
@ -115,6 +116,62 @@
  --sidebar-ring: oklch(0.707 0.022 261.325);
 }

+h1 {
+  font-family: var(--font-heading);
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+}
+
+h2 {
+  font-family: var(--font-heading);
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h3 {
+  font-family: var(--font-heading);
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h4 {
+  font-family: var(--font-heading);
+  font-size: 28px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h5 {
+  font-family: var(--font-heading);
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+h6 {
+  font-family: var(--font-heading);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: normal;
+}
+
+p {
+  font-family: var(--font-label);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
@font-face {
  font-family: 'Comfortaa';
  font-style: normal;
@ -153,7 +210,7 @@

  --color-background: var(--neutral-750);
  --color-background-reversed: var(--background-reversed);
-  --color-base: var(--neutral-800);
+  --color-basecl: var(--neutral-800);
  --color-text: var(--text);
  --color-text-alt: var(--text-alt);
  --color-text-input: var(--text-input);
@ -277,7 +334,7 @@

  --background: var(--neutral-750);
  --background-reversed: var(--neutral-000);
-  --base: var(--neutral-750);
+  --basecl: var(--neutral-750);
  --text: var(--neutral-000);
  --text-alt: var(--neutral-900);
  --text-input: var(--text);
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -3,6 +3,8 @@ import { ThemeProvider } from '@/components/wrappers/theme-provider';
 import type { Metadata } from 'next';
 import './globals.css';
 import { QueryProvider } from '@/components/wrappers/query-provider';
+import { Toaster } from '@/components/ui/sonner';
+import { SessionProvider } from 'next-auth/react';

 export const metadata: Metadata = {
  title: 'MeetUp',
@ -50,14 +52,17 @@ export default function RootLayout({
        <link rel='manifest' href='/site.webmanifest' />
      </head>
      <body>
-        <ThemeProvider
-          attribute='class'
-          defaultTheme='system'
-          enableSystem
-          disableTransitionOnChange
-        >
-          <QueryProvider>{children}</QueryProvider>
-        </ThemeProvider>
+        <SessionProvider>
+          <ThemeProvider
+            attribute='class'
+            defaultTheme='system'
+            enableSystem
+            disableTransitionOnChange
+          >
+            <QueryProvider>{children}</QueryProvider>
+          </ThemeProvider>
+        </SessionProvider>
+        <Toaster />
      </body>
    </html>
  );
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@ -33,7 +33,10 @@ export default async function LoginPage() {
        </div>
        <div className='mt-auto mb-auto'>
          <Card className='w-[350px] max-w-screen;'>
-            <CardHeader className='grid place-items-center'>
+            <CardHeader
+              className='grid place-items-center'
+              data-cy='login-header'
+            >
              <Logo colorType='colored' logoType='secondary'></Logo>
            </CardHeader>
            <CardContent className='gap-6 flex flex-col items-center'>
@ -46,6 +49,7 @@ export default async function LoginPage() {
                  key={provider.id}
                  provider={provider.id}
                  providerDisplayName={provider.name}
+                  data-cy={'sso-login-button_' + provider.name.toLowerCase()}
                />
              ))}
            </CardContent>
--- a/src/assets/usericon/default/default-user-icon_dark.svg
+++ b/src/assets/usericon/default/default-user-icon_dark.svg
@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 4.92487 4.92487 0 11 0H29C35.0751 0 40 4.92487 40 11V29C40 35.0751 35.0751 40 29 40H11C4.92487 40 0 35.0751 0 29V11Z" fill="#5770FF"/>
+<path d="M31.6663 35V31.6667C31.6663 29.8986 30.964 28.2029 29.7137 26.9526C28.4635 25.7024 26.7678 25 24.9997 25H14.9997C13.2316 25 11.5359 25.7024 10.2856 26.9526C9.03539 28.2029 8.33301 29.8986 8.33301 31.6667V35" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9997 18.3333C23.6816 18.3333 26.6663 15.3486 26.6663 11.6667C26.6663 7.98477 23.6816 5 19.9997 5C16.3178 5 13.333 7.98477 13.333 11.6667C13.333 15.3486 16.3178 18.3333 19.9997 18.3333Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/usericon/default/default-user-icon_light.svg
+++ b/src/assets/usericon/default/default-user-icon_light.svg
@ -0,0 +1,5 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 11C0 4.92487 4.92487 0 11 0H29C35.0751 0 40 4.92487 40 11V29C40 35.0751 35.0751 40 29 40H11C4.92487 40 0 35.0751 0 29V11Z" fill="#4154C0"/>
+<path d="M31.6663 35V31.6667C31.6663 29.8986 30.964 28.2029 29.7137 26.9526C28.4635 25.7024 26.7678 25 24.9997 25H14.9997C13.2316 25 11.5359 25.7024 10.2856 26.9526C9.03539 28.2029 8.33301 29.8986 8.33301 31.6667V35" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.9997 18.3333C23.6816 18.3333 26.6663 15.3486 26.6663 11.6667C26.6663 7.98477 23.6816 5 19.9997 5C16.3178 5 13.333 7.98477 13.333 11.6667C13.333 15.3486 16.3178 18.3333 19.9997 18.3333Z" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/assets/usericon/default/defaultusericon-export.tsx
+++ b/src/assets/usericon/default/defaultusericon-export.tsx
@ -0,0 +1,2 @@
+export { default as user_default_dark } from '@/assets/usericon/default/default-user-icon_dark.svg';
+export { default as user_default_light } from '@/assets/usericon/default/default-user-icon_light.svg';
--- a/src/components/buttons/redirect-button.tsx
+++ b/src/components/buttons/redirect-button.tsx
@ -1,16 +1,18 @@
-import { Button } from '../ui/button';
+import { Button } from '@/components/ui/button';
 import Link from 'next/link';

 export function RedirectButton({
  redirectUrl,
  buttonText,
+  className,
 }: {
  redirectUrl: string;
  buttonText: string;
+  className?: string;
 }) {
  return (
    <Link href={redirectUrl}>
-      <Button>{buttonText}</Button>
+      <Button className={className}>{buttonText}</Button>
    </Link>
  );
 }
--- a/src/components/buttons/sso-login-button.tsx
+++ b/src/components/buttons/sso-login-button.tsx
@ -5,10 +5,11 @@ import { faOpenid } from '@fortawesome/free-brands-svg-icons';
 export default function SSOLogin({
  provider,
  providerDisplayName,
+  ...props
 }: {
  provider: string;
  providerDisplayName: string;
-}) {
+} & React.HTMLAttributes<HTMLButtonElement>) {
  return (
    <form
      className='flex flex-col items-center w-full'
@ -22,6 +23,7 @@ export default function SSOLogin({
        type='submit'
        variant='secondary'
        icon={faOpenid}
+        {...props}
      >
        Login with {providerDisplayName}
      </IconButton>
--- a/src/components/custom-ui/event-list-entry.tsx
+++ b/src/components/custom-ui/event-list-entry.tsx
@ -0,0 +1,68 @@
+import { Card } from '@/components/ui/card';
+import Logo from '@/components/misc/logo';
+import { Label } from '@/components/ui/label';
+import Link from 'next/link';
+import zod from 'zod/v4';
+import { EventSchema } from '@/app/api/event/validation';
+
+type EventListEntryProps = zod.output<typeof EventSchema>;
+
+export default function EventListEntry({
+  title,
+  id,
+  start_time,
+  end_time,
+  location,
+}: EventListEntryProps) {
+  const formatDate = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleDateString();
+  };
+  const formatTime = (isoString?: string) => {
+    if (!isoString) return '-';
+    return new Date(isoString).toLocaleTimeString([], {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+  return (
+    <Link href={`/events/${id}`} className='block'>
+      <Card className='w-full'>
+        <div className='grid grid-cols-1 gap-2 mx-auto md:mx-4 md:grid-cols-[80px_1fr_250px]'>
+          <div className='w-full items-center justify-center grid'>
+            <Logo colorType='monochrome' logoType='submark' width={50} />
+          </div>
+          <div className='w-full items-center justify-center grid my-3 md:my-0'>
+            <h2 className='text-center'>{title}</h2>
+          </div>
+          <div className='grid gap-4'>
+            <div className='grid grid-cols-[80px_auto] gap-2'>
+              <Label className='text-[var(--color-neutral-300)] justify-end'>
+                start
+              </Label>
+              <Label>
+                {formatDate(start_time)} {formatTime(start_time)}
+              </Label>
+            </div>
+            <div className='grid grid-cols-[80px_auto] gap-2'>
+              <Label className='text-[var(--color-neutral-300)] justify-end'>
+                end
+              </Label>
+              <Label>
+                {formatDate(end_time)} {formatTime(end_time)}
+              </Label>
+            </div>
+            {location && (
+              <div className='grid grid-cols-[80px_auto] gap-2'>
+                <Label className='text-[var(--color-neutral-300)] justify-end'>
+                  location
+                </Label>
+                <Label>{location}</Label>
+              </div>
+            )}
+          </div>
+        </div>
+      </Card>
+    </Link>
+  );
+}
--- a/src/components/custom-ui/labeled-input.tsx
+++ b/src/components/custom-ui/labeled-input.tsx
@ -1,4 +1,4 @@
-import { Input } from '@/components/ui/input';
+import { Input, Textarea } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';

 export default function LabeledInput({
@ -7,6 +7,7 @@ export default function LabeledInput({
  placeholder,
  value,
  name,
+  variantSize = 'default',
  autocomplete,
  error,
  ...rest
@ -16,22 +17,37 @@ export default function LabeledInput({
  placeholder?: string;
  value?: string;
  name?: string;
+  variantSize?: 'default' | 'big' | 'textarea';
  autocomplete?: string;
  error?: string;
 } & React.InputHTMLAttributes<HTMLInputElement>) {
  return (
    <div className='grid grid-cols-1 gap-1'>
      <Label htmlFor={name}>{label}</Label>
-
-      <Input
-        type={type}
-        placeholder={placeholder}
-        defaultValue={value}
-        id={name}
-        name={name}
-        autoComplete={autocomplete}
-        {...rest}
-      />
+      {variantSize === 'textarea' ? (
+        <Textarea
+          placeholder={placeholder}
+          defaultValue={value}
+          id={name}
+          name={name}
+          rows={3}
+        />
+      ) : (
+        <Input
+          type={type}
+          placeholder={placeholder}
+          defaultValue={value}
+          id={name}
+          name={name}
+          className={
+            variantSize === 'big'
+              ? 'h-12 file:h-10 text-lg gplaceholder:text-lg sm:text-2xl sm:placeholder:text-2xl'
+              : ''
+          }
+          autoComplete={autocomplete}
+          {...rest}
+        />
+      )}
      {error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
    </div>
  );
--- a/src/components/custom-ui/participant-list-entry.tsx
+++ b/src/components/custom-ui/participant-list-entry.tsx
@ -0,0 +1,26 @@
+import React from 'react';
+import Image from 'next/image';
+import { user_default_dark } from '@/assets/usericon/default/defaultusericon-export';
+import { user_default_light } from '@/assets/usericon/default/defaultusericon-export';
+import { useTheme } from 'next-themes';
+import zod from 'zod/v4';
+import { ParticipantSchema } from '@/app/api/event/[eventID]/participant/validation';
+
+type ParticipantListEntryProps = zod.output<typeof ParticipantSchema>;
+
+export default function ParticipantListEntry({
+  user,
+}: ParticipantListEntryProps) {
+  const { resolvedTheme } = useTheme();
+  const defaultImage =
+    resolvedTheme === 'dark' ? user_default_dark : user_default_light;
+
+  const finalImageSrc = user.image ?? defaultImage;
+
+  return (
+    <div className='flex items-center gap-2 py-1 ml-5'>
+      <Image src={finalImageSrc} alt='Avatar' width={30} height={30} />
+      <span>{user.name}</span>
+    </div>
+  );
+}
--- a/src/components/forms/event-form.tsx
+++ b/src/components/forms/event-form.tsx
@ -0,0 +1,343 @@
+'use client';
+import React from 'react';
+import LabeledInput from '@/components/custom-ui/labeled-input';
+import { Button } from '@/components/ui/button';
+import Logo from '@/components/misc/logo';
+import TimePicker from '@/components/time-picker';
+import { Label } from '@/components/ui/label';
+import { useGetApiUserMe } from '@/generated/api/user/user';
+import {
+  usePostApiEvent,
+  useGetApiEventEventID,
+  usePatchApiEventEventID,
+} from '@/generated/api/event/event';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { ToastInner } from '@/components/misc/toast-inner';
+import { UserSearchInput } from '@/components/misc/user-search';
+import ParticipantListEntry from '../custom-ui/participant-list-entry';
+
+import { useSearchParams } from 'next/navigation';
+
+import zod from 'zod/v4';
+import { PublicUserSchema } from '@/app/api/user/validation';
+
+type User = zod.output<typeof PublicUserSchema>;
+
+interface EventFormProps {
+  type: 'create' | 'edit';
+  eventId?: string;
+}
+
+const EventForm: React.FC<EventFormProps> = (props) => {
+  // Runtime validation
+  if (props.type === 'edit' && !props.eventId) {
+    throw new Error(
+      'Error [event-form]: eventId must be provided when type is "edit".',
+    );
+  }
+
+  const searchParams = useSearchParams();
+  const startFromUrl = searchParams.get('start');
+  const endFromUrl = searchParams.get('end');
+
+  const { mutate: createEvent, status, isSuccess, error } = usePostApiEvent();
+  const { data, isLoading, error: fetchError } = useGetApiUserMe();
+  const { data: eventData } = useGetApiEventEventID(props.eventId!, {
+    query: { enabled: props.type === 'edit' },
+  });
+  const patchEvent = usePatchApiEventEventID();
+  const router = useRouter();
+
+  // Extract event fields for form defaults
+  const event = eventData?.data?.event;
+
+  // State for date and time fields
+  const [startDate, setStartDate] = React.useState<Date | undefined>(undefined);
+  const [startTime, setStartTime] = React.useState('');
+  const [endDate, setEndDate] = React.useState<Date | undefined>(undefined);
+  const [endTime, setEndTime] = React.useState('');
+
+  // State for participants
+  const [selectedParticipants, setSelectedParticipants] = React.useState<
+    User[]
+  >([]);
+
+  // State for form fields
+  const [title, setTitle] = React.useState('');
+  const [location, setLocation] = React.useState('');
+  const [description, setDescription] = React.useState('');
+
+  // Update state when event data loads
+  React.useEffect(() => {
+    if (props.type === 'edit' && event) {
+      setTitle(event.title || '');
+      // Parse start_time and end_time
+      if (event.start_time) {
+        const start = new Date(event.start_time);
+        setStartDate(start);
+        setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
+      }
+      if (event.end_time) {
+        const end = new Date(event.end_time);
+        setEndDate(end);
+        setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
+      }
+      setLocation(event.location || '');
+      setDescription(event.description || '');
+      setSelectedParticipants(event.participants?.map((u) => u.user) || []);
+    } else if (props.type === 'create' && startFromUrl && endFromUrl) {
+      // If creating a new event with URL params, set title and dates
+      setTitle('');
+      const start = new Date(startFromUrl);
+      setStartDate(start);
+      setStartTime(start.toTimeString().slice(0, 5)); // "HH:mm"
+      const end = new Date(endFromUrl);
+      setEndDate(end);
+      setEndTime(end.toTimeString().slice(0, 5)); // "HH:mm"
+    }
+  }, [event, props.type, startFromUrl, endFromUrl]);
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+
+    function combine(date?: Date, time?: string) {
+      if (!date || !time) return undefined;
+      const [hours, minutes] = time.split(':');
+      const d = new Date(date);
+      d.setHours(Number(hours), Number(minutes), 0, 0);
+      return d;
+    }
+
+    const start = combine(startDate, startTime);
+    const end = combine(endDate, endTime);
+
+    //validate form data
+    if (!formData.get('eventName')) {
+      alert('Event name is required.');
+      return;
+    }
+    if (!start || !end) {
+      alert('Please provide both start and end date/time.');
+      return;
+    } else if (start >= end) {
+      alert('End time must be after start time.');
+      return;
+    }
+
+    const data = {
+      title: formData.get('eventName') as string,
+      description: formData.get('eventDescription') as string,
+      start_time: start.toISOString(),
+      end_time: end.toISOString(),
+      location: formData.get('eventLocation') as string,
+      created_at: formData.get('createdAt') as string,
+      updated_at: formData.get('updatedAt') as string,
+      organiser: formData.get('organiser') as string,
+      participants: selectedParticipants.map((u) => u.id),
+    };
+
+    if (props.type === 'edit' && props.eventId) {
+      await patchEvent.mutateAsync({
+        eventID: props.eventId,
+        data: {
+          title: data.title,
+          description: data.description,
+          start_time: data.start_time,
+          end_time: data.end_time,
+          location: data.location,
+          participants: data.participants,
+        },
+      });
+      console.log('Updating event');
+    } else {
+      console.log('Creating event');
+      createEvent({ data });
+    }
+
+    toast.custom((t) => (
+      <ToastInner
+        toastId={t}
+        title='Event saved'
+        description={event?.title}
+        onAction={() => router.push(`/events/${event?.id}`)}
+        variant='success'
+        buttonText='show'
+      />
+    ));
+
+    router.back();
+  }
+
+  // Calculate values for organiser, created, and updated
+  const organiserValue = isLoading
+    ? 'Loading...'
+    : data?.data.user?.name || 'Unknown User';
+
+  // Use DB values for created_at/updated_at in edit mode
+  const createdAtValue =
+    props.type === 'edit' && event?.created_at
+      ? event.created_at
+      : new Date().toISOString();
+  const updatedAtValue =
+    props.type === 'edit' && event?.updated_at
+      ? event.updated_at
+      : new Date().toISOString();
+
+  // Format date for display
+  const createdAtDisplay = new Date(createdAtValue).toLocaleDateString();
+  const updatedAtDisplay = new Date(updatedAtValue).toLocaleDateString();
+
+  if (props.type === 'edit' && isLoading) return <div>Loading...</div>;
+  if (props.type === 'edit' && fetchError)
+    return <div>Error loading event.</div>;
+
+  return (
+    <form className='flex flex-col gap-5 w-full' onSubmit={handleSubmit}>
+      <div className='grid grid-row-start:auto gap-4 sm:gap-8 w-full'>
+        <div className='h-full w-full mt-0 ml-2 mb-16 flex items-center max-sm:grid max-sm:grid-row-start:auto max-sm:mb-6 max-sm:mt-10 max-sm:ml-0'>
+          <div className='w-[100px] max-sm:w-full max-sm:flex max-sm:justify-center'>
+            <Logo colorType='monochrome' logoType='submark' width={50} />
+          </div>
+          <div className='items-center ml-auto mr-auto max-sm:mb-6 max-sm:w-full'>
+            <LabeledInput
+              type='text'
+              label='Event Name'
+              placeholder={props.type === 'create' ? 'New Event' : 'Event Name'}
+              name='eventName'
+              variantSize='big'
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+          </div>
+          <div className='w-0 sm:w-[50px]'></div>
+        </div>
+        <div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
+          <div>
+            <TimePicker
+              dateLabel='start Time'
+              timeLabel='&nbsp;'
+              date={startDate}
+              setDate={setStartDate}
+              time={startTime}
+              setTime={setStartTime}
+            />
+          </div>
+          <div>
+            <TimePicker
+              dateLabel='end Time'
+              timeLabel='&nbsp;'
+              date={endDate}
+              setDate={setEndDate}
+              time={endTime}
+              setTime={setEndTime}
+            />
+          </div>
+          <div className='w-54'>
+            <LabeledInput
+              type='text'
+              label='Location'
+              placeholder='where is the event?'
+              name='eventLocation'
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+            />
+          </div>
+          <div className='flex flex-col gap-4'>
+            <div className='flex flex-row gap-2'>
+              <Label className='w-[70px]'>created:</Label>
+              <Label className='text-[var(--color-neutral-300)]'>
+                {createdAtDisplay}
+              </Label>
+            </div>
+            <div className='flex flex-row gap-2'>
+              <Label className='w-[70px]'>updated:</Label>
+              <p className='text-[var(--color-neutral-300)]'>
+                {updatedAtDisplay}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
+          <div className='h-full w-full grid grid-flow-row gap-4'>
+            <div className='h-full w-full'>
+              <div className='flex flex-row gap-2'>
+                <Label>Organiser:</Label>
+                <Label className='text-[var(--color-neutral-300)]'>
+                  {organiserValue}
+                </Label>
+              </div>
+            </div>
+            <div className='h-full w-full'>
+              <LabeledInput
+                type='text'
+                label='Event Description'
+                placeholder='What is the event about?'
+                name='eventDescription'
+                variantSize='textarea'
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+              ></LabeledInput>
+            </div>
+          </div>
+          <div className='h-full w-full'>
+            <Label>Participants</Label>
+            <UserSearchInput
+              selectedUsers={selectedParticipants}
+              addUserAction={(user) => {
+                setSelectedParticipants((current) =>
+                  current.find((u) => u.id === user.id)
+                    ? current
+                    : [...current, user],
+                );
+              }}
+              removeUserAction={(user) => {
+                setSelectedParticipants((current) =>
+                  current.filter((u) => u.id !== user.id),
+                );
+              }}
+            />
+            <div className='grid grid-cols-1 mt-3 sm:max-h-60 sm:grid-cols-2  sm:overflow-y-auto sm:mb-0'>
+              {selectedParticipants.map((user) => (
+                <ParticipantListEntry
+                  key={user.id}
+                  user={user}
+                  status='PENDING'
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
+          <div className='w-[20%] grid max-sm:w-[40%]'>
+            <Button
+              type='button'
+              variant='secondary'
+              onClick={() => {
+                router.back();
+                console.log('user aborted - no change in database');
+              }}
+            >
+              cancel
+            </Button>
+          </div>
+          <div className='w-[20%] grid max-sm:w-[40%]'>
+            <Button
+              type='submit'
+              variant='primary'
+              disabled={status === 'pending'}
+            >
+              {status === 'pending' ? 'Saving...' : 'save event'}
+            </Button>
+          </div>
+        </div>
+        {isSuccess && <p>Event created!</p>}
+        {error && <p className='text-red-500'>Error: {error.message}</p>}
+      </div>
+    </form>
+  );
+};
+
+export default EventForm;
--- a/src/components/forms/login-form.tsx
+++ b/src/components/forms/login-form.tsx
@ -48,13 +48,18 @@ function LoginFormElement({
  });

  return (
-    <form className='flex flex-col gap-5 w-full' onSubmit={onSubmit}>
+    <form
+      className='flex flex-col gap-5 w-full'
+      onSubmit={onSubmit}
+      data-cy='login-form'
+    >
      <LabeledInput
        type='text'
        label='E-Mail or Username'
        placeholder='What you are known as'
        error={formState.errors.email?.message}
        {...register('email')}
+        data-cy='email-input'
      />
      <LabeledInput
        type='password'
@ -62,9 +67,10 @@ function LoginFormElement({
        placeholder="Let's hope you remember it"
        error={formState.errors.password?.message}
        {...register('password')}
+        data-cy='password-input'
      />
      <div className='grid grid-rows-2 gap-2'>
-        <Button type='submit' variant='primary'>
+        <Button type='submit' variant='primary' data-cy='login-button'>
          Login
        </Button>
        <Button
@ -74,6 +80,7 @@ function LoginFormElement({
            formRef?.current?.reset();
            setIsSignUp((v) => !v);
          }}
+          data-cy='register-switch'
        >
          Sign Up
        </Button>
@ -129,6 +136,7 @@ function RegisterFormElement({
      ref={formRef}
      className='flex flex-col gap-5 w-full'
      onSubmit={onSubmit}
+      data-cy='register-form'
    >
      <LabeledInput
        type='text'
@ -137,6 +145,7 @@ function RegisterFormElement({
        autocomplete='given-name'
        error={formState.errors.firstName?.message}
        {...register('firstName')}
+        data-cy='first-name-input'
      />
      <LabeledInput
        type='text'
@ -145,6 +154,7 @@ function RegisterFormElement({
        autocomplete='family-name'
        error={formState.errors.lastName?.message}
        {...register('lastName')}
+        data-cy='last-name-input'
      />
      <LabeledInput
        type='email'
@ -153,6 +163,7 @@ function RegisterFormElement({
        autocomplete='email'
        error={formState.errors.email?.message}
        {...register('email')}
+        data-cy='email-input'
      />
      <LabeledInput
        type='text'
@ -161,6 +172,7 @@ function RegisterFormElement({
        autocomplete='username'
        error={formState.errors.username?.message}
        {...register('username')}
+        data-cy='username-input'
      />
      <LabeledInput
        type='password'
@ -169,6 +181,7 @@ function RegisterFormElement({
        autocomplete='new-password'
        error={formState.errors.password?.message}
        {...register('password')}
+        data-cy='password-input'
      />
      <LabeledInput
        type='password'
@ -177,9 +190,10 @@ function RegisterFormElement({
        autocomplete='new-password'
        error={formState.errors.confirmPassword?.message}
        {...register('confirmPassword')}
+        data-cy='confirm-password-input'
      />
      <div className='grid grid-rows-2 gap-2'>
-        <Button type='submit' variant='primary'>
+        <Button type='submit' variant='primary' data-cy='register-button'>
          Sign Up
        </Button>
        <Button
--- a/src/components/misc/logo.tsx
+++ b/src/components/misc/logo.tsx
@ -63,9 +63,9 @@ export default function Logo({
    );
  }

-  if (width === undefined || height === undefined) {
+  if (width === undefined && height === undefined) {
    console.warn(
-      `Logo: 'width' and 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
+      `Logo: 'width' or 'height' props are required by next/image for ${logoType} logo. Path: ${LOGO_BASE_PATH}logo_${colorType}_${logoType}_${theme}.${IMAGE_EXTENSION}`,
    );
  }

--- a/src/components/misc/theme-picker.cy.tsx
+++ b/src/components/misc/theme-picker.cy.tsx
@ -0,0 +1,41 @@
+import React from 'react';
+import { ThemePicker } from '@/components/misc/theme-picker';
+import { ThemeProvider } from '@/components/wrappers/theme-provider';
+
+describe('<ThemePicker />', () => {
+  it('renders', () => {
+    cy.mount(<ThemePicker />);
+  });
+
+  it('toggle open and close', () => {
+    cy.mount(<ThemePicker />);
+    cy.getBySel('theme-picker').click();
+    cy.getBySel('theme-picker-content').should('exist');
+    cy.get('html').click();
+    cy.getBySel('theme-picker-content').should('not.exist');
+  });
+
+  it('enable dark mode', () => {
+    cy.mount(
+      <ThemeProvider>
+        <ThemePicker />
+      </ThemeProvider>,
+    );
+
+    cy.getBySel('theme-picker').click();
+    cy.getBySel('dark-theme').click();
+    cy.get('html').should('have.attr', 'data-theme', 'dark');
+  });
+
+  it('enable light mode', () => {
+    cy.mount(
+      <ThemeProvider>
+        <ThemePicker />
+      </ThemeProvider>,
+    );
+
+    cy.getBySel('theme-picker').click();
+    cy.getBySel('light-theme').click();
+    cy.get('html').should('have.attr', 'data-theme', 'light');
+  });
+});
--- a/src/components/misc/theme-picker.tsx
+++ b/src/components/misc/theme-picker.tsx
@ -18,20 +18,26 @@ export function ThemePicker() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
-        <Button variant='outline_primary' size='icon'>
+        <Button variant='outline_primary' size='icon' data-cy='theme-picker'>
          <Sun className='h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0' />
          <Moon className='absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100' />
          <span className='sr-only'>Toggle theme</span>
        </Button>
      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
-        <DropdownMenuItem onClick={() => setTheme('light')}>
+      <DropdownMenuContent align='end' data-cy='theme-picker-content'>
+        <DropdownMenuItem
+          onClick={() => setTheme('light')}
+          data-cy='light-theme'
+        >
          Light
        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
+        <DropdownMenuItem onClick={() => setTheme('dark')} data-cy='dark-theme'>
          Dark
        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
+        <DropdownMenuItem
+          onClick={() => setTheme('system')}
+          data-cy='system-theme'
+        >
          System
        </DropdownMenuItem>
      </DropdownMenuContent>
--- a/src/components/misc/toast-inner.tsx
+++ b/src/components/misc/toast-inner.tsx
@ -0,0 +1,160 @@
+/*
+USAGE:
+
+import { toast } from 'sonner';
+import { ToastInner } from '@/components/misc/toast-inner';
+
+import { Button } from '@/components/ui/button';
+
+ <Button
+          variant='outline_primary'
+          onClick={() =>
+
+
+            toast.custom(
+              (t) => (
+                <ToastInner
+                  toastId={t}
+                  title=''
+                  description=''
+                  onAction={() => console.log('on Action')} //No Button shown if this is null
+                  variant=''default' | 'success' | 'error' | 'info' | 'warning' | 'notification''
+                  buttonText=[No Button shown if this is null]
+                  iconName=[Any Icon Name from Lucide in UpperCamelCase or default if null]
+                />
+              ),
+
+
+              {
+                duration: 5000,
+              },
+            )
+          }
+        >
+          Show Toast
+        </Button>
+
+
+*/
+
+'use client';
+
+import { toast } from 'sonner';
+import { X } from 'lucide-react';
+import React from 'react';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import * as Icons from 'lucide-react';
+
+interface ToastInnerProps {
+  title: string;
+  description?: string;
+  buttonText?: string;
+  onAction?: () => void;
+  toastId: string | number;
+  variant?:
+    | 'default'
+    | 'success'
+    | 'error'
+    | 'info'
+    | 'warning'
+    | 'notification';
+  iconName?: keyof typeof Icons;
+  closeOnAction?: boolean;
+}
+
+const variantConfig = {
+  default: {
+    bgColor: 'bg-neutral-150',
+    defaultIcon: 'Info',
+  },
+  success: {
+    bgColor: 'bg-green-200',
+    defaultIcon: 'CheckCircle',
+  },
+  error: {
+    bgColor: 'bg-red-200',
+    defaultIcon: 'XCircle',
+  },
+  info: {
+    bgColor: 'bg-blue-200',
+    defaultIcon: 'Info',
+  },
+  warning: {
+    bgColor: 'bg-yellow-200',
+    defaultIcon: 'AlertTriangle',
+  },
+  notification: {
+    bgColor: 'bg-neutral-150',
+    defaultIcon: 'BellRing',
+  },
+};
+
+export const ToastInner: React.FC<ToastInnerProps> = ({
+  title,
+  description,
+  buttonText,
+  onAction,
+  toastId,
+  variant = 'default',
+  iconName,
+  closeOnAction = true,
+}) => {
+  const bgColor = variantConfig[variant].bgColor;
+
+  // fallback to variant's default icon if iconName is not provided
+  const iconKey = (iconName ||
+    variantConfig[variant].defaultIcon) as keyof typeof Icons;
+  const Icon = Icons[iconKey] as React.ComponentType<Icons.LucideProps>;
+
+  return (
+    <div className={`relative sm:w-120 rounded p-4 ${bgColor} select-none`}>
+      {/* Close Button */}
+      <button
+        onClick={() => toast.dismiss(toastId)}
+        className='absolute top-2 right-2 cursor-pointer'
+        aria-label='Close notification'
+      >
+        <X className='h-4 w-4 text-neutral-600' />
+      </button>
+
+      <div
+        className={`grid ${
+          variant === 'default'
+            ? 'grid-cols-[auto_130px] max-sm:grid-cols-[auto_90px]'
+            : 'grid-cols-[40px_auto_130px] max-sm:grid-cols-[40px_auto_90px]'
+        } gap-4 items-center`}
+      >
+        {variant !== 'default' && (
+          <div className='flex items-center justify-center'>
+            <Icon size={40} />
+          </div>
+        )}
+
+        {/* Text Content */}
+        <div className='grid gap-1'>
+          <h6>{title}</h6>
+          {description && <Label>{description}</Label>}
+        </div>
+
+        {/* Action Button */}
+        <div className='flex justify-center'>
+          {onAction && buttonText && (
+            <Button
+              variant={'secondary'}
+              className='w-full mr-2'
+              onClick={() => {
+                onAction();
+                if (closeOnAction) {
+                  toast.dismiss(toastId);
+                }
+              }}
+            >
+              {buttonText}
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
--- a/src/components/misc/user-search.tsx
+++ b/src/components/misc/user-search.tsx
@ -0,0 +1,95 @@
+'use client';
+
+import * as React from 'react';
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Button } from '@/components/ui/button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@/components/ui/command';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { useGetApiSearchUser } from '@/generated/api/search/search';
+import zod from 'zod/v4';
+import { PublicUserSchema } from '@/app/api/user/validation';
+
+type User = zod.output<typeof PublicUserSchema>;
+
+export function UserSearchInput({
+  addUserAction,
+  removeUserAction,
+  selectedUsers,
+}: {
+  addUserAction: (user: User) => void;
+  removeUserAction: (user: User) => void;
+  selectedUsers: User[];
+}) {
+  const [userSearch, setUserSearch] = React.useState('');
+  const [open, setOpen] = React.useState(false);
+  const { data: searchUserData } = useGetApiSearchUser({ query: userSearch });
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant='outline_muted'
+          role='combobox'
+          aria-expanded={open}
+          className='w-[200px] justify-between'
+        >
+          {'Select user...'}
+          <ChevronsUpDownIcon className='ml-2 h-4 w-4 shrink-0 opacity-50' />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className='w-[200px] p-0'>
+        <Command shouldFilter={false}>
+          <CommandInput
+            placeholder='Search user...'
+            value={userSearch}
+            onValueChange={setUserSearch}
+          />
+          <CommandList>
+            <CommandEmpty>No users found.</CommandEmpty>
+            <CommandGroup>
+              {searchUserData?.data.users?.map((user) => {
+                const isSelected = selectedUsers.some((u) => u.id === user.id);
+
+                return (
+                  <CommandItem
+                    key={user.id}
+                    value={user.id}
+                    onSelect={() => {
+                      if (isSelected) {
+                        removeUserAction(user);
+                      } else {
+                        addUserAction(user);
+                      }
+                      setOpen(false);
+                    }}
+                  >
+                    <CheckIcon
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        isSelected ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    {user.name}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
--- a/src/components/time-picker.tsx
+++ b/src/components/time-picker.tsx
@ -0,0 +1,86 @@
+'use client';
+
+import * as React from 'react';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+
+export default function TimePicker({
+  dateLabel = 'Date',
+  timeLabel = 'Time',
+  date,
+  setDate,
+  time,
+  setTime,
+}: {
+  dateLabel?: string;
+  timeLabel?: string;
+  date?: Date;
+  setDate?: (date: Date | undefined) => void;
+  time?: string;
+  setTime?: (time: string) => void;
+}) {
+  const [open, setOpen] = React.useState(false);
+
+  return (
+    <div className='flex gap-4'>
+      <div className='flex flex-col gap-3'>
+        <Label htmlFor='date' className='px-1'>
+          {dateLabel}
+        </Label>
+        <Popover open={open} onOpenChange={setOpen}>
+          <PopoverTrigger asChild>
+            <Button variant='calendar' id='date'>
+              {date ? date.toLocaleDateString() : 'Select date'}
+              <ChevronDownIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className='w-auto overflow-hidden p-0' align='start'>
+            <Calendar
+              mode='single'
+              selected={date}
+              captionLayout='dropdown'
+              onSelect={(d) => {
+                setDate?.(d);
+                setOpen(false);
+              }}
+              modifiers={{
+                today: new Date(),
+              }}
+              modifiersClassNames={{
+                today: 'bg-secondary text-secondary-foreground rounded-full',
+              }}
+              classNames={{
+                day: 'text-center hover:bg-gray-500 hover:rounded-md',
+              }}
+              weekStartsOn={1} // Set Monday as the first day of the week
+              startMonth={new Date(new Date().getFullYear() - 10, 0)}
+              endMonth={new Date(new Date().getFullYear() + 14, 12)}
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+      <div className='flex flex-col gap-3'>
+        <Label htmlFor='time' className='px-1'>
+          {timeLabel}
+        </Label>
+        <Input
+          type='time'
+          id='time'
+          step='60'
+          value={time}
+          onChange={(e) => setTime?.(e.target.value)}
+          className='bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none'
+        />
+      </div>
+    </div>
+  );
+}
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@ -21,8 +21,11 @@ const buttonVariants = cva(
          'bg-background border-2 text-text shadow-xs hover:bg-secondary border-secondary hover:border-background-reversed active:bg-active-secondary disabled:bg-disabled-secondary',
        outline_muted:
          'bg-background border-2 text-text shadow-xs hover:bg-muted border-muted hover:border-background-reversed active:bg-active-muted disabled:bg-disabled-muted',
-
        link: 'text-text underline-offset-4 hover:underline',
+        calendar:
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 w-32 justify-between font-normal',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
      },
      size: {
        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
--- a/src/components/ui/calendar.tsx
+++ b/src/components/ui/calendar.tsx
@ -0,0 +1,213 @@
+'use client';
+
+import * as React from 'react';
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from 'lucide-react';
+import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker';
+
+import { cn } from '@/lib/utils';
+import { Button, buttonVariants } from '@/components/ui/button';
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'flex gap-4 flex-col md:flex-row relative',
+          defaultClassNames.months,
+        ),
+        month: cn('flex flex-col w-full gap-4', defaultClassNames.month),
+        nav: cn(
+          'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn(
+          'bg-[var(--color-basecl)] absolute inset-0 opacity-0',
+          defaultClassNames.dropdown,
+        ),
+        caption_label: cn(
+          'select-none font-medium',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('flex w-full mt-2', defaultClassNames.week),
+        week_number_header: cn(
+          'select-none w-(--cell-size)',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] select-none text-muted-foreground',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot='calendar'
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <ChevronLeftIcon className={cn('size-4', className)} {...props} />
+            );
+          }
+
+          if (orientation === 'right') {
+            return (
+              <ChevronRightIcon
+                className={cn('size-4', className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn('size-4', className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className='flex size-(--cell-size) items-center justify-center text-center'>
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant='ghost'
+      size='icon'
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@ -22,7 +22,7 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
        /* Outline */
        '',
        /* Shadow */
-        'shadow-sm',
+        'shadow-[4px_4px_9px_9px_rgba(0,0,0,0.25)]',
        /* Opacity */
        '',
        /* Scaling */
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@ -0,0 +1,184 @@
+'use client';
+
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { SearchIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot='command'
+      className={cn(
+        'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className='sr-only'>
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className='[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot='command-input-wrapper'
+      className='flex h-9 items-center gap-2 border-b px-3'
+    >
+      <SearchIcon className='size-4 shrink-0 opacity-50' />
+      <CommandPrimitive.Input
+        data-slot='command-input'
+        className={cn(
+          'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot='command-list'
+      className={cn(
+        'max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot='command-empty'
+      className='py-6 text-center text-sm'
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot='command-group'
+      className={cn(
+        'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot='command-separator'
+      className={cn('bg-border -mx-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot='command-item'
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot='command-shortcut'
+      className={cn(
+        'text-muted-foreground ml-auto text-xs tracking-widest',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@ -0,0 +1,143 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { XIcon } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot='dialog' {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot='dialog-overlay'
+      className={cn(
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot='dialog-portal'>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot='dialog-content'
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot='dialog-close'
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className='sr-only'>Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-header'
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot='dialog-footer'
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot='dialog-title'
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot='dialog-description'
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@ -9,7 +9,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
      data-slot='input'
      className={cn(
        /* Text */
-        'text-text-input selection:text-text md:text-sm file:text-destructive file:text-sm placeholder:text-text-muted-input',
+        'text-text-input selection:text-text file:text-destructive file:text-sm placeholder:text-text-muted-input',
        /* Background */
        'bg-transparent selection:bg-muted-input file:bg-transparent',
        /* Border */
@ -41,4 +41,45 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
  );
 }

-export { Input };
+function Textarea({
+  className,
+  rows,
+  ...props
+}: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot='input'
+      rows={rows}
+      className={cn(
+        /* Text */
+        'text-text-input selection:text-text placeholder:text-text-muted-input',
+        /* Background */
+        'bg-transparent selection:bg-muted-input',
+        /* Border */
+        'rounded-md border border-input focus-visible:border-ring aria-invalid:border-destructive',
+        /* Font */
+        '',
+        /* Cursor */
+        'disabled:pointer-events-none disabled:cursor-not-allowed',
+        /* Ring */
+        'focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+        /* Outline */
+        'outline-none',
+        /* Shadow */
+        'shadow-md transition-[color,box-shadow]',
+        /* Opacity */
+        'disabled:opacity-50',
+        /* Scaling */
+        'h-32 w-full min-w-0', // Bigger height for textarea
+        /* Spacing */
+        'px-3 py-2',
+        /* Alignment */
+        '',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input, Textarea };
--- a/src/components/ui/label.tsx
+++ b/src/components/ui/label.tsx
@ -5,16 +5,21 @@ import * as LabelPrimitive from '@radix-ui/react-label';

 import { cn } from '@/lib/utils';

-function Label({
-  className,
-  ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+type LabelProps = React.ComponentProps<typeof LabelPrimitive.Root> & {
+  size?: 'default' | 'small' | 'large';
+};
+
+function Label({ className, size = 'default', ...props }: LabelProps) {
  return (
    <LabelPrimitive.Root
      data-slot='label'
      className={cn(
        /* Text */
-        'text-sm',
+        size === 'small'
+          ? 'text-sm'
+          : size === 'large'
+            ? 'text-xl'
+            : 'text-base',
        /* Background */
        '',
        /* Border */
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@ -0,0 +1,48 @@
+'use client';
+
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '@/lib/utils';
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot='popover' {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot='popover-trigger' {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot='popover-content'
+        align={align}
+        sideOffset={sideOffset}
+        className={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 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot='popover-anchor' {...props} />;
+}
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/src/components/ui/sonner.tsx
+++ b/src/components/ui/sonner.tsx
@ -0,0 +1,54 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import { Toaster as Sonner, ToasterProps } from 'sonner';
+import React from 'react';
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = 'system' } = useTheme();
+
+  const [shouldExpand, setShouldExpand] = React.useState(false);
+
+  React.useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 600px)');
+
+    const handleScreenSizeChange = () => {
+      setShouldExpand(mediaQuery.matches);
+    };
+
+    handleScreenSizeChange(); // set initial value
+    mediaQuery.addEventListener('change', handleScreenSizeChange);
+
+    return () =>
+      mediaQuery.removeEventListener('change', handleScreenSizeChange);
+  }, []);
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps['theme']}
+      richColors={true}
+      className='toaster group'
+      toastOptions={{
+        style: {
+          backgroundColor: 'var(--color-neutral-150)',
+          color: 'var(--color-text-alt)',
+          borderRadius: 'var(--radius)',
+        },
+        cancelButtonStyle: {
+          backgroundColor: 'var(--color-secondary)',
+          color: 'var(--color-text-alt)',
+        },
+        actionButtonStyle: {
+          backgroundColor: 'var(--color-secondary)',
+          color: 'var(--color-text-alt)',
+        },
+      }}
+      swipeDirections={['left', 'right']}
+      closeButton={true}
+      expand={shouldExpand}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };
--- a/tsconfig.json
+++ b/tsconfig.json
@ -20,7 +20,8 @@
    ],
    "paths": {
      "@/*": ["./src/*"]
-    }
+    },
+    "types": ["node", "cypress", "@types/webpack-env"]
  },
  "ts-node": {
    "compilerOptions": {
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Micha	d92ca56a7d	feat(events): refactor event and participant list entries to use schema validation All checks were successful container-scan / Container Scan (pull_request) Successful in 6m52s Details docker-build / docker (pull_request) Successful in 7m27s Details tests / Tests (pull_request) Successful in 7m37s Details	2025-06-25 19:50:53 +02:00
Micha	e946443902	feat(events): add event creation page	2025-06-25 19:50:42 +02:00
Micha	f5d740791e	feat(event): add event view page	2025-06-25 19:50:42 +02:00
Micha	cc3cfb4531	feat(events): add event edit page	2025-06-25 19:50:42 +02:00
Micha	1d2a0b5619	feat(events): add event list lage	2025-06-25 19:50:42 +02:00
Micha	b385f063c2	feat(events): add event creation form components	2025-06-25 19:50:42 +02:00
Maximilian Liebmann	0e24f7917b	Merge pull request 'test: integrate testing library' (#56 ) All checks were successful container-scan / Container Scan (push) Successful in 6m45s Details docker-build / docker (push) Successful in 9m7s Details tests / Tests (push) Successful in 4m41s Details Reviewed-on: #56 Reviewed-by: Maximilian Liebmann <lima@noreply.git.dominikstahl.dev>	2025-06-25 13:09:05 +00:00
Dominik Stahl	781e25909d	test: integrate cypress All checks were successful container-scan / Container Scan (pull_request) Successful in 2m46s Details docker-build / docker (pull_request) Successful in 6m20s Details tests / Tests (pull_request) Successful in 4m16s Details	2025-06-25 14:47:55 +02:00
Renovate Bot	7e65ac35a8	fix(deps): update dependency next to v15.4.0-canary.96 All checks were successful container-scan / Container Scan (push) Successful in 5m7s Details docker-build / docker (push) Successful in 1m27s Details	2025-06-25 12:01:25 +00:00