refactor: add AuthGuard component and fix API client empty response handling

- Add reusable AuthGuard component for protected routes - Move auth logic from index.tsx to (tabs)/_layout.tsx via AuthGuard - Fix ApiClient to handle empty responses (204 No Content) - Use useFocusEffect in chat.tsx to load messages after auth is ready - Extract getDateKey() helper function in calendar.tsx
feat: add theme system with light/dark mode support
2026-01-25 13:03:17 +01:00 · 2026-01-24 16:57:33 +01:00
25 changed files with 558 additions and 297 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -72,30 +72,33 @@ src/
 │   ├── login.tsx               # Login screen
 │   ├── register.tsx            # Registration screen
 │   ├── (tabs)/                 # Tab navigation group
-│   │   ├── _layout.tsx         # Tab bar configuration
+│   │   ├── _layout.tsx         # Tab bar configuration (themed)
 │   │   ├── chat.tsx            # Chat screen (AI conversation)
-│   │   └── calendar.tsx        # Calendar overview
+│   │   ├── calendar.tsx        # Calendar overview
+│   │   └── settings.tsx        # Settings screen (theme switcher, logout)
 │   ├── event/
 │   │   └── [id].tsx            # Event detail screen (dynamic route)
 │   └── note/
 │       └── [id].tsx            # Note editor for event (dynamic route)
 ├── components/
-│   ├── BaseBackground.tsx      # Common screen wrapper
-│   ├── Header.tsx              # Header component with logout button
-│   ├── AuthButton.tsx          # Reusable button for auth screens (with shadow)
+│   ├── AuthGuard.tsx           # Auth wrapper: loads user, shows loading, redirects if unauthenticated
+│   ├── BaseBackground.tsx      # Common screen wrapper (themed)
+│   ├── BaseButton.tsx          # Reusable button component (themed, supports children)
+│   ├── Header.tsx              # Header component (themed)
+│   ├── AuthButton.tsx          # Reusable button for auth screens (themed, with shadow)
 │   ├── ChatBubble.tsx          # Reusable chat bubble component (used by ChatMessage & TypingIndicator)
 │   ├── TypingIndicator.tsx     # Animated typing indicator (. .. ...) shown while waiting for AI response
 │   ├── EventCardBase.tsx       # Shared event card layout with icons (used by EventCard & ProposedEventCard)
 │   ├── EventCard.tsx           # Calendar event card (uses EventCardBase + edit/delete buttons)
-│   ├── EventConfirmDialog.tsx  # AI-proposed event confirmation modal
+│   ├── EventConfirmDialog.tsx  # AI-proposed event confirmation modal (skeleton)
 │   └── ProposedEventCard.tsx   # Chat event proposal (uses EventCardBase + confirm/reject buttons)
-├── Themes.tsx                  # Centralized color/theme definitions
+├── Themes.tsx                  # Theme definitions: THEMES object with defaultLight/defaultDark, Theme type
 ├── logging/
 │   ├── index.ts                # Re-exports
 │   └── logger.ts               # react-native-logs config (apiLogger, storeLogger)
 ├── services/
 │   ├── index.ts                # Re-exports all services
-│   ├── ApiClient.ts            # HTTP client with X-User-Id header injection, request logging
+│   ├── ApiClient.ts            # HTTP client with X-User-Id header injection, request logging, handles empty responses (204)
 │   ├── AuthService.ts          # login(), register(), logout() - calls API and updates AuthStore
 │   ├── EventService.ts         # getAll(), getById(), getByDateRange(), create(), update(), delete()
 │   └── ChatService.ts          # sendMessage(), confirmEvent(), rejectEvent(), getConversations(), getConversation()
@@ -104,10 +107,54 @@ src/
    ├── AuthStore.ts            # user, isAuthenticated, isLoading, login(), logout(), loadStoredUser()
    │                           # Uses expo-secure-store (native) / localStorage (web)
    ├── ChatStore.ts            # messages[], isWaitingForResponse, addMessage(), addMessages(), updateMessage(), clearMessages(), setWaitingForResponse(), chatMessageToMessageData()
-    └── EventsStore.ts          # events[], setEvents(), addEvent(), updateEvent(), deleteEvent()
+    ├── EventsStore.ts          # events[], setEvents(), addEvent(), updateEvent(), deleteEvent()
+    └── ThemeStore.ts           # theme, setTheme() - reactive theme switching with Zustand
 ```

-**Routing:** Tab-based navigation with Chat and Calendar as main screens. Auth screens (login, register) outside tabs. Dynamic routes for event detail and note editing.
+**Routing:** Tab-based navigation with Chat, Calendar, and Settings as main screens. Auth screens (login, register) outside tabs. Dynamic routes for event detail and note editing.
+
+**Authentication Flow:**
+- `AuthGuard` component wraps the tab layout in `(tabs)/_layout.tsx`
+- On app start, `AuthGuard` calls `loadStoredUser()` and shows loading indicator
+- If not authenticated, redirects to `/login`
+- `index.tsx` simply redirects to `/(tabs)/chat` - AuthGuard handles the rest
+- This pattern handles Expo Router's navigation state caching (avoids race conditions)
+
+### Theme System
+
+The app supports multiple themes (light/dark) via a reactive Zustand store.
+
+**Theme Structure (`Themes.tsx`):**
+```typescript
+export type Theme = {
+  chatBot, primeFg, primeBg, secondaryBg, messageBorderBg, placeholderBg,
+  calenderBg, confirmButton, rejectButton, disabledButton, buttonText,
+  textPrimary, textSecondary, textMuted, eventIndicator, borderPrimary, shadowColor
+};
+
+export const THEMES = {
+  defaultLight: { ... },
+  defaultDark: { ... }
+} as const satisfies Record<string, Theme>;
+```
+
+**Usage in Components:**
+```typescript
+import { useThemeStore } from "../stores/ThemeStore";
+
+const MyComponent = () => {
+  const { theme } = useThemeStore();
+  return <View style={{ backgroundColor: theme.primeBg }} />;
+};
+```
+
+**Theme Switching:**
+```typescript
+const { setTheme } = useThemeStore();
+setTheme("defaultDark"); // or "defaultLight"
+```
+
+**Note:** `shadowColor` only works on iOS. Android uses `elevation` with system-defined shadow colors.

 ### Backend Architecture (apps/server)

@@ -373,13 +420,21 @@ NODE_ENV=development        # development = pretty logs, production = JSON
 - **Authentication fully implemented:**
  - `AuthStore`: Manages user state with expo-secure-store (native) / localStorage (web)
  - `AuthService`: login(), register(), logout() - calls backend API
-  - `ApiClient`: Automatically injects X-User-Id header for authenticated requests
+  - `ApiClient`: Automatically injects X-User-Id header for authenticated requests, handles empty responses (204)
+  - `AuthGuard`: Reusable component that wraps protected routes - loads user, shows loading, redirects if unauthenticated
  - Login screen: Supports email OR userName login
  - Register screen: Email validation, checks for existing email/userName
-  - `AuthButton`: Reusable button component with shadow effect
-  - `Header`: Contains logout button on all screens
-  - `index.tsx`: Auth redirect - checks stored user on app start
- Tab navigation (Chat, Calendar) implemented with basic UI
+  - `AuthButton`: Reusable button component with themed shadow
+  - `Header`: Themed header component (logout moved to Settings)
+  - `(tabs)/_layout.tsx`: Wraps tabs with AuthGuard for protected access
+  - `index.tsx`: Simple redirect to chat (AuthGuard handles auth)
+- **Theme system fully implemented:**
+  - `ThemeStore`: Zustand store with theme state and setTheme()
+  - `Themes.tsx`: THEMES object with defaultLight/defaultDark variants
+  - All components use `useThemeStore()` for reactive theme colors
+  - Settings screen with theme switcher (light/dark)
+  - `BaseButton`: Reusable themed button component
+- Tab navigation (Chat, Calendar, Settings) implemented with themed UI
 - Calendar screen fully functional:
  - Month navigation with grid display and Ionicons (chevron-back/forward)
  - MonthSelector dropdown with infinite scroll (dynamically loads months, lazy-loaded when modal opens, cleared on close for memory efficiency)
@@ -393,7 +448,7 @@ NODE_ENV=development        # development = pretty logs, production = JSON
  - Arrow navigation between proposals with "Event X von Y" counter
  - Each proposal individually confirmable/rejectable
  - **Typing indicator**: Animated dots (. .. ...) shown after 500ms delay while waiting for AI response
-  - Messages persisted to database via ChatService and loaded on mount
+  - Messages persisted to database via ChatService, loaded via `useFocusEffect` when screen gains focus
  - Tracks conversationId for message continuity across sessions
  - ChatStore with addMessages() for bulk loading, chatMessageToMessageData() helper
  - KeyboardAvoidingView for proper keyboard handling (iOS padding, Android height)
@@ -404,9 +459,10 @@ NODE_ENV=development        # development = pretty logs, production = JSON
 - `EventCardBase`: Shared base component with event layout (header, date/time/recurring icons, description) - used by both EventCard and ProposedEventCard
 - `EventCard`: Uses EventCardBase + edit/delete buttons for calendar display
 - `ProposedEventCard`: Uses EventCardBase + confirm/reject buttons for chat proposals (supports create/update/delete actions)
- `Themes.tsx`: Centralized color definitions including textPrimary, borderPrimary, eventIndicator, secondaryBg
+- `Themes.tsx`: Theme definitions with THEMES object (defaultLight, defaultDark) including all color tokens (textPrimary, borderPrimary, eventIndicator, secondaryBg, shadowColor, etc.)
 - `EventsStore`: Zustand store with setEvents(), addEvent(), updateEvent(), deleteEvent() - stores ExpandedEvent[]
 - `ChatStore`: Zustand store with addMessage(), addMessages(), updateMessage(), clearMessages(), isWaitingForResponse/setWaitingForResponse() for typing indicator - loads from server on mount and persists across tab switches
+- `ThemeStore`: Zustand store with theme/setTheme() for reactive theme switching across all components
 - `ChatBubble`: Reusable chat bubble component with Tailwind styling, used by ChatMessage and TypingIndicator
 - `TypingIndicator`: Animated typing indicator component showing `. → .. → ...` loop while waiting for AI response
 - Event Detail and Note screens exist as skeletons
--- a/apps/client/app.json
+++ b/apps/client/app.json
@@ -2,7 +2,7 @@
  "expo": {
    "jsEngine": "hermes",
    "name": "CalChat",
-    "slug": "calchat",
+    "slug": "caldav",
    "version": "1.0.0",
    "orientation": "portrait",
    "scheme": "calchat",
@@ -32,6 +32,7 @@
      "eas": {
        "projectId": "b722dde6-7d89-48ff-9095-e007e7c7da87"
      }
-    }
+    },
+    "owner": "gilmour109"
  }
 }
--- a/apps/client/src/Themes.tsx
+++ b/apps/client/src/Themes.tsx
@@ -1,4 +1,4 @@
-type Theme = {
+export type Theme = {
  chatBot: string;
  primeFg: string;
  primeBg: string;
@@ -15,26 +15,46 @@ type Theme = {
  textMuted: string;
  eventIndicator: string;
  borderPrimary: string;
+  shadowColor: string;
 };

-const defaultLight: Theme = {
-  chatBot: "#DE6C20",
-  primeFg: "#3B3329",
-  primeBg: "#FFEEDE",
-  secondaryBg: "#FFFFFF",
-  messageBorderBg: "#FFFFFF",
-  placeholderBg: "#D9D9D9",
-  calenderBg: "#FBD5B2",
-  confirmButton: "#22c55e",
-  rejectButton: "#ef4444",
-  disabledButton: "#ccc",
-  buttonText: "#000000",
-  textPrimary: "#000000",
-  textSecondary: "#666",
-  textMuted: "#888",
-  eventIndicator: "#DE6C20",
-  borderPrimary: "#000000",
-};
-
-let currentTheme: Theme = defaultLight;
-export default currentTheme;
+export const THEMES = {
+  defaultLight: {
+    chatBot: "#DE6C20",
+    primeFg: "#3B3329",
+    primeBg: "#FFEEDE",
+    secondaryBg: "#FFFFFF",
+    messageBorderBg: "#FFFFFF",
+    placeholderBg: "#D9D9D9",
+    calenderBg: "#FBD5B2",
+    confirmButton: "#22c55e",
+    rejectButton: "#ef4444",
+    disabledButton: "#ccc",
+    buttonText: "#000000",
+    textPrimary: "#000000",
+    textSecondary: "#666",
+    textMuted: "#888",
+    eventIndicator: "#DE6C20",
+    borderPrimary: "#000000",
+    shadowColor: "#000000",
+  },
+  defaultDark: {
+    chatBot: "#DE6C20",
+    primeFg: "#F5E6D3",
+    primeBg: "#1A1512",
+    secondaryBg: "#2A2420",
+    messageBorderBg: "#3A3430",
+    placeholderBg: "#4A4440",
+    calenderBg: "#3D2A1A",
+    confirmButton: "#22c55e",
+    rejectButton: "#ef4444",
+    disabledButton: "#555",
+    buttonText: "#FFFFFF",
+    textPrimary: "#FFFFFF",
+    textSecondary: "#AAA",
+    textMuted: "#777",
+    eventIndicator: "#DE6C20",
+    borderPrimary: "#FFFFFF",
+    shadowColor: "#FFFFFF",
+  }
+} as const satisfies Record<string, Theme>;
--- a/apps/client/src/app/(tabs)/_layout.tsx
+++ b/apps/client/src/app/(tabs)/_layout.tsx
@@ -1,10 +1,13 @@
 import { Ionicons } from "@expo/vector-icons";
 import { Tabs } from "expo-router";
-import theme from "../../Themes";
+import { useThemeStore } from "../../stores/ThemeStore";
+import { AuthGuard } from "../../components/AuthGuard";

 export default function TabLayout() {
+  const { theme } = useThemeStore();
  return (
-    <Tabs
+    <AuthGuard>
+      <Tabs
      screenOptions={{
        headerShown: false,
        tabBarActiveTintColor: theme.chatBot,
@@ -30,6 +33,16 @@ export default function TabLayout() {
          ),
        }}
      />
-    </Tabs>
+      <Tabs.Screen
+        name="settings"
+        options={{
+          title: "Settings",
+          tabBarIcon: ({ color }) => (
+            <Ionicons size={28} name="settings" color={color} />
+          ),
+        }}
+      />
+      </Tabs>
+    </AuthGuard>
  );
 }
--- a/apps/client/src/app/(tabs)/calendar.tsx
+++ b/apps/client/src/app/(tabs)/calendar.tsx
@@ -19,7 +19,7 @@ import React, {
 } from "react";
 import { useFocusEffect } from "expo-router";
 import { Ionicons } from "@expo/vector-icons";
-import currentTheme from "../../Themes";
+import { useThemeStore } from "../../stores/ThemeStore";
 import BaseBackground from "../../components/BaseBackground";
 import { FlashList } from "@shopify/flash-list";
 import { EventService } from "../../services";
@@ -33,6 +33,14 @@ type MonthItem = {
  label: string; // e.g. "January 2024"
 };

+/**
+ * Formats a Date object to a string key in YYYY-MM-DD format.
+ * Used for grouping and looking up events by date.
+ */
+const getDateKey = (date: Date): string => {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+};
+
 const generateMonths = (
  centerYear: number,
  centerMonth: number,
@@ -108,7 +116,7 @@ const Calendar = () => {
    const map = new Map<string, ExpandedEvent[]>();
    events.forEach((e) => {
      const date = new Date(e.occurrenceStart);
-      const key = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+      const key = getDateKey(date);
      if (!map.has(key)) map.set(key, []);
      map.get(key)!.push(e);
    });
@@ -157,7 +165,7 @@ const Calendar = () => {
            deleteEvent(event.id);
            // Close overlay if no more events for this date
            if (selectedDate) {
-              const dateKey = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, "0")}-${String(selectedDate.getDate()).padStart(2, "0")}`;
+              const dateKey = getDateKey(selectedDate);
              const remainingEvents = eventsByDate.get(dateKey) || [];
              if (remainingEvents.length <= 1) {
                setSelectedDate(null);
@@ -175,7 +183,7 @@ const Calendar = () => {
  // Get events for selected date
  const selectedDateEvents = useMemo(() => {
    if (!selectedDate) return [];
-    const key = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth() + 1).padStart(2, "0")}-${String(selectedDate.getDate()).padStart(2, "0")}`;
+    const key = getDateKey(selectedDate);
    return eventsByDate.get(key) || [];
  }, [selectedDate, eventsByDate]);

@@ -226,6 +234,7 @@ const EventOverlay = ({
  onEditEvent,
  onDeleteEvent,
 }: EventOverlayProps) => {
+  const { theme } = useThemeStore();
  if (!date) return null;

  const dateString = date.toLocaleDateString("de-DE", {
@@ -250,9 +259,9 @@ const EventOverlay = ({
        <Pressable
          className="w-11/12 max-h-3/4 rounded-2xl overflow-hidden"
          style={{
-            backgroundColor: currentTheme.primeBg,
+            backgroundColor: theme.primeBg,
            borderWidth: 4,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
          }}
          onPress={(e) => e.stopPropagation()}
        >
@@ -260,13 +269,13 @@ const EventOverlay = ({
          <View
            className="px-4 py-3"
            style={{
-              backgroundColor: currentTheme.chatBot,
+              backgroundColor: theme.chatBot,
              borderBottomWidth: 3,
-              borderBottomColor: currentTheme.borderPrimary,
+              borderBottomColor: theme.borderPrimary,
            }}
          >
-            <Text className="font-bold text-lg">{dateString}</Text>
-            <Text>
+            <Text className="font-bold text-lg" style={{ color: theme.textPrimary }}>{dateString}</Text>
+            <Text style={{ color: theme.textPrimary }}>
              {events.length} {events.length === 1 ? "Termin" : "Termine"}
            </Text>
          </View>
@@ -289,10 +298,10 @@ const EventOverlay = ({
            className="py-3 items-center"
            style={{
              borderTopWidth: 1,
-              borderTopColor: currentTheme.placeholderBg,
+              borderTopColor: theme.placeholderBg,
            }}
          >
-            <Text style={{ color: currentTheme.primeFg }} className="font-bold">
+            <Text style={{ color: theme.primeFg }} className="font-bold">
              Schließen
            </Text>
          </Pressable>
@@ -319,6 +328,7 @@ const MonthSelector = ({
  currentMonthIndex,
  onSelectMonth,
 }: MonthSelectorProps) => {
+  const { theme } = useThemeStore();
  const heightAnim = useRef(new Animated.Value(0)).current;
  const listRef = useRef<React.ComponentRef<typeof FlashList<MonthItem>>>(null);
  const INITIAL_RANGE = 12; // 12 months before and after current
@@ -397,11 +407,11 @@ const MonthSelector = ({
        style={{
          backgroundColor:
            item.monthIndex % 2 === 0
-              ? currentTheme.primeBg
-              : currentTheme.secondaryBg,
+              ? theme.primeBg
+              : theme.secondaryBg,
        }}
      >
-        <Text className="text-xl" style={{ color: currentTheme.primeFg }}>
+        <Text className="text-xl" style={{ color: theme.primeFg }}>
          {item.label}
        </Text>
      </View>
@@ -423,9 +433,9 @@ const MonthSelector = ({
            left: position.left,
            width: position.width,
            height: heightAnim,
-            backgroundColor: currentTheme.primeBg,
+            backgroundColor: theme.primeBg,
            borderWidth: 2,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
            borderRadius: 8,
          }}
        >
@@ -457,6 +467,7 @@ type CalendarHeaderProps = {
 };

 const CalendarHeader = (props: CalendarHeaderProps) => {
+  const { theme } = useThemeStore();
  const [modalVisible, setModalVisible] = useState(false);
  const [dropdownPosition, setDropdownPosition] = useState({
    top: 0,
@@ -482,16 +493,16 @@ const CalendarHeader = (props: CalendarHeaderProps) => {
        ref={containerRef}
        className="relative flex flex-row items-center justify-around"
      >
-        <Text className="text-4xl px-1">
+        <Text className="text-4xl px-1" style={{ color: theme.textPrimary }}>
          {MONTHS[props.monthIndex]} {props.currentYear}
        </Text>
        <Pressable
          className="flex justify-center items-center w-12 h-12 border rounded-lg"
          style={{
-            borderColor: currentTheme.primeFg,
-            backgroundColor: currentTheme.chatBot,
+            borderColor: theme.primeFg,
+            backgroundColor: theme.chatBot,
            // iOS shadow
-            shadowColor: "#000",
+            shadowColor: theme.shadowColor,
            shadowOffset: { width: 0, height: 3 },
            shadowOpacity: 0.35,
            shadowRadius: 5,
@@ -503,7 +514,7 @@ const CalendarHeader = (props: CalendarHeaderProps) => {
          <Ionicons
            name="chevron-down"
            size={28}
-            color={currentTheme.primeFg}
+            color={theme.primeFg}
          />
        </Pressable>
      </View>
@@ -528,42 +539,48 @@ type ChangeMonthButtonProps = {
  icon: "chevron-back" | "chevron-forward";
 };

-const ChangeMonthButton = (props: ChangeMonthButtonProps) => (
-  <Pressable
-    onPress={props.onPress}
-    className="w-16 h-16 flex items-center justify-center mx-2 rounded-xl border border-solid"
-    style={{
-      backgroundColor: currentTheme.chatBot,
-      borderColor: currentTheme.primeFg,
-      // iOS shadow
-      shadowColor: "#000",
-      shadowOffset: { width: 0, height: 4 },
-      shadowOpacity: 0.3,
-      shadowRadius: 8,
-      // Android shadow
-      elevation: 6,
-    }}
-  >
-    <Ionicons
-      name={props.icon}
-      size={48}
-      color={currentTheme.primeFg}
+const ChangeMonthButton = (props: ChangeMonthButtonProps) => {
+  const { theme } = useThemeStore();
+  return (
+    <Pressable
+      onPress={props.onPress}
+      className="w-16 h-16 flex items-center justify-center mx-2 rounded-xl border border-solid"
      style={{
-        marginLeft: props.icon === "chevron-forward" ? 4 : 0,
-        marginRight: props.icon === "chevron-back" ? 4 : 0,
+        backgroundColor: theme.chatBot,
+        borderColor: theme.primeFg,
+        // iOS shadow
+        shadowColor: theme.shadowColor,
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.3,
+        shadowRadius: 8,
+        // Android shadow
+        elevation: 6,
      }}
-    />
-  </Pressable>
-);
+    >
+      <Ionicons
+        name={props.icon}
+        size={48}
+        color={theme.primeFg}
+        style={{
+          marginLeft: props.icon === "chevron-forward" ? 4 : 0,
+          marginRight: props.icon === "chevron-back" ? 4 : 0,
+        }}
+      />
+    </Pressable>
+  );
+};

-const WeekDaysLine = () => (
-  <View className="flex flex-row items-center justify-around px-2 gap-2">
-    {/* TODO: px and gap need fine tuning to perfectly align with the grid */}
-    {DAYS.map((day, i) => (
-      <Text key={i}>{day.substring(0, 2).toUpperCase()}</Text>
-    ))}
-  </View>
-);
+const WeekDaysLine = () => {
+  const { theme } = useThemeStore();
+  return (
+    <View className="flex flex-row items-center justify-around px-2 gap-2">
+      {/* TODO: px and gap need fine tuning to perfectly align with the grid */}
+      {DAYS.map((day, i) => (
+        <Text key={i} style={{ color: theme.textPrimary }}>{day.substring(0, 2).toUpperCase()}</Text>
+      ))}
+    </View>
+  );
+};

 type CalendarGridProps = {
  month: Month;
@@ -573,6 +590,7 @@ type CalendarGridProps = {
 };

 const CalendarGrid = (props: CalendarGridProps) => {
+  const { theme } = useThemeStore();
  const { baseDate, dateOffset } = useMemo(() => {
    const monthIndex = MONTHS.indexOf(props.month);
    const base = new Date(props.year, monthIndex, 1);
@@ -587,15 +605,11 @@ const CalendarGrid = (props: CalendarGridProps) => {
    return date;
  };

-  const getDateKey = (date: Date): string => {
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-  };
-
  return (
    <View
      className="h-full flex-1 flex-col flex-wrap gap-2 p-2"
      style={{
-        backgroundColor: currentTheme.calenderBg,
+        backgroundColor: theme.calenderBg,
      }}
    >
      {Array.from({ length: 6 }).map((_, i) => (
@@ -631,6 +645,7 @@ type SingleDayProps = {
 };

 const SingleDay = (props: SingleDayProps) => {
+  const { theme } = useThemeStore();
  const isSameMonth = MONTHS[props.date.getMonth()] === props.month;

  return (
@@ -638,11 +653,12 @@ const SingleDay = (props: SingleDayProps) => {
      onPress={props.onPress}
      className="h-full flex-1 aspect-auto rounded-xl items-center justify-between py-1"
      style={{
-        backgroundColor: currentTheme.primeBg,
+        backgroundColor: theme.primeBg,
      }}
    >
      <Text
-        className={`text-xl ` + (isSameMonth ? "text-black" : "text-black/50")}
+        className="text-xl"
+        style={{ color: theme.textPrimary, opacity: isSameMonth ? 1 : 0.5 }}
      >
        {props.date.getDate()}
      </Text>
@@ -651,7 +667,7 @@ const SingleDay = (props: SingleDayProps) => {
      {props.hasEvents && (
        <View
          className="w-2 h-2 rounded-full"
-          style={{ backgroundColor: currentTheme.eventIndicator }}
+          style={{ backgroundColor: theme.eventIndicator }}
        />
      )}
    </Pressable>
--- a/apps/client/src/app/(tabs)/chat.tsx
+++ b/apps/client/src/app/(tabs)/chat.tsx
@@ -7,14 +7,16 @@ import {
  Platform,
  Keyboard,
 } from "react-native";
-import currentTheme from "../../Themes";
-import React, { useState, useRef, useEffect } from "react";
+import { useThemeStore } from "../../stores/ThemeStore";
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { useFocusEffect } from "expo-router";
 import Header from "../../components/Header";
 import BaseBackground from "../../components/BaseBackground";
 import { FlashList } from "@shopify/flash-list";
 import { ChatService } from "../../services";
 import {
  useChatStore,
+  useAuthStore,
  chatMessageToMessageData,
  MessageData,
 } from "../../stores";
@@ -45,6 +47,7 @@ type ChatInputProps = {
 const TYPING_INDICATOR_DELAY_MS = 500;

 const Chat = () => {
+  const { isAuthenticated, isLoading: isAuthLoading } = useAuthStore();
  const {
    messages,
    addMessage,
@@ -68,27 +71,31 @@ const Chat = () => {
    return () => keyboardDidShow.remove();
  }, []);

-  // Load existing messages from database on mount
-  useEffect(() => {
-    const fetchMessages = async () => {
-      try {
-        const conversationSummaries = await ChatService.getConversations();
-        if (conversationSummaries.length > 0) {
-          const conversationId = conversationSummaries[0].id;
-          setCurrentConversationId(conversationId);
+  // Load existing messages from database once authenticated and screen is focused
+  useFocusEffect(
+    useCallback(() => {
+      if (isAuthLoading || !isAuthenticated) return;

-          const serverMessages =
-            await ChatService.getConversation(conversationId);
-          const clientMessages = serverMessages.map(chatMessageToMessageData);
-          addMessages(clientMessages);
-          scrollToEnd();
+      const fetchMessages = async () => {
+        try {
+          const conversationSummaries = await ChatService.getConversations();
+          if (conversationSummaries.length > 0) {
+            const conversationId = conversationSummaries[0].id;
+            setCurrentConversationId(conversationId);
+
+            const serverMessages =
+              await ChatService.getConversation(conversationId);
+            const clientMessages = serverMessages.map(chatMessageToMessageData);
+            addMessages(clientMessages);
+            scrollToEnd();
+          }
+        } catch (error) {
+          console.error("Failed to load messages:", error);
        }
-      } catch (error) {
-        console.error("Failed to load messages:", error);
-      }
-    };
-    fetchMessages();
-  }, []);
+      };
+      fetchMessages();
+    }, [isAuthLoading, isAuthenticated]),
+  );

  const scrollToEnd = () => {
    setTimeout(() => {
@@ -234,20 +241,21 @@ const Chat = () => {
 };

 const ChatHeader = () => {
+  const { theme } = useThemeStore();
  return (
    <Header className="flex flex-row items-center">
      <View
        className="ml-3 w-12 h-12 rounded-3xl border border-solid"
        style={{
-          backgroundColor: currentTheme.placeholderBg,
-          borderColor: currentTheme.primeFg,
+          backgroundColor: theme.placeholderBg,
+          borderColor: theme.primeFg,
        }}
      ></View>
-      <Text className="text-lg pl-3">CalChat</Text>
+      <Text className="text-lg pl-3" style={{ color: theme.textPrimary }}>CalChat</Text>
      <View
        className="h-2 bg-black"
        style={{
-          shadowColor: "#000",
+          shadowColor: theme.shadowColor,
          shadowOffset: {
            width: 0,
            height: 5,
@@ -266,6 +274,7 @@ const MIN_INPUT_HEIGHT = 40;
 const MAX_INPUT_HEIGHT = 150;

 const ChatInput = ({ onSend }: ChatInputProps) => {
+  const { theme } = useThemeStore();
  const [text, setText] = useState("");

  const handleSend = () => {
@@ -280,7 +289,8 @@ const ChatInput = ({ onSend }: ChatInputProps) => {
      <TextInput
        className="flex-1 border border-solid rounded-2xl px-3 py-2 mr-2"
        style={{
-          backgroundColor: currentTheme.messageBorderBg,
+          backgroundColor: theme.messageBorderBg,
+          color: theme.textPrimary,
          minHeight: MIN_INPUT_HEIGHT,
          maxHeight: MAX_INPUT_HEIGHT,
          textAlignVertical: "top",
@@ -288,14 +298,14 @@ const ChatInput = ({ onSend }: ChatInputProps) => {
        onChangeText={setText}
        value={text}
        placeholder="Nachricht..."
-        placeholderTextColor="#999"
+        placeholderTextColor={theme.textMuted}
        multiline
      />
      <Pressable onPress={handleSend}>
        <View
          className="w-10 h-10 rounded-full items-center justify-center"
          style={{
-            backgroundColor: currentTheme.placeholderBg,
+            backgroundColor: theme.placeholderBg,
          }}
        />
      </Pressable>
@@ -310,6 +320,7 @@ const ChatMessage = ({
  onConfirm,
  onReject,
 }: ChatMessageProps) => {
+  const { theme } = useThemeStore();
  const [currentIndex, setCurrentIndex] = useState(0);

  const hasProposals = proposedChanges && proposedChanges.length > 0;
@@ -333,7 +344,7 @@ const ChatMessage = ({
        minWidth: hasProposals ? "75%" : undefined,
      }}
    >
-      <Text className="p-2">{content}</Text>
+      <Text className="p-2" style={{ color: theme.textPrimary }}>{content}</Text>

      {hasProposals && currentProposal && onConfirm && onReject && (
        <View>
@@ -350,7 +361,7 @@ const ChatMessage = ({
                <Ionicons
                  name="chevron-back"
                  size={24}
-                  color={currentTheme.primeFg}
+                  color={theme.primeFg}
                />
              </Pressable>
            )}
@@ -375,7 +386,7 @@ const ChatMessage = ({
                <Ionicons
                  name="chevron-forward"
                  size={24}
-                  color={currentTheme.primeFg}
+                  color={theme.primeFg}
                />
              </Pressable>
            )}
@@ -385,7 +396,7 @@ const ChatMessage = ({
          {hasMultiple && (
            <Text
              className="text-center text-sm pb-2"
-              style={{ color: currentTheme.textSecondary || "#666" }}
+              style={{ color: theme.textSecondary || "#666" }}
            >
              Event {currentIndex + 1} von {proposedChanges.length}
            </Text>
--- a/apps/client/src/app/(tabs)/settings.tsx
+++ b/apps/client/src/app/(tabs)/settings.tsx
@@ -0,0 +1,60 @@
+import { Text, View } from "react-native";
+import BaseBackground from "../../components/BaseBackground";
+import BaseButton from "../../components/BaseButton";
+import { useThemeStore } from "../../stores/ThemeStore";
+import { AuthService } from "../../services/AuthService";
+import { router } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import Header from "../../components/Header";
+import { THEMES } from "../../Themes";
+
+const handleLogout = async () => {
+  await AuthService.logout();
+  router.replace("/login");
+};
+
+const Settings = () => {
+  const { theme, setTheme } = useThemeStore();
+
+  return (
+    <BaseBackground>
+      <Header>
+        <View className="h-full flex justify-center">
+          <Text className="text-center text-3xl font-bold">Settings</Text>
+        </View>
+      </Header>
+      <View className="flex items-center mt-4">
+        <BaseButton onPress={handleLogout} solid={true}>
+          <Ionicons name="log-out-outline" size={24} color={theme.primeFg} />{" "}
+          Logout
+        </BaseButton>
+        <View>
+          <Text
+            className="text-center text-2xl"
+            style={{ color: theme.textPrimary }}
+          >
+            Select Theme
+          </Text>
+        </View>
+        <BaseButton
+          solid={theme == THEMES.defaultLight}
+          onPress={() => {
+            setTheme("defaultLight");
+          }}
+        >
+          Default Light
+        </BaseButton>
+        <BaseButton
+          solid={theme == THEMES.defaultDark}
+          onPress={() => {
+            setTheme("defaultDark");
+          }}
+        >
+          Default Dark
+        </BaseButton>
+      </View>
+    </BaseBackground>
+  );
+};
+
+export default Settings;
--- a/apps/client/src/app/event/[id].tsx
+++ b/apps/client/src/app/event/[id].tsx
@@ -1,9 +1,11 @@
 import { View, Text, TextInput, Pressable } from "react-native";
 import { useLocalSearchParams } from "expo-router";
 import BaseBackground from "../../components/BaseBackground";
+import { useThemeStore } from "../../stores/ThemeStore";

 const EventDetailScreen = () => {
  const { id } = useLocalSearchParams<{ id: string }>();
+  const { theme } = useThemeStore();

  // TODO: Fetch event by id using EventService.getById()
  // TODO: Display event details (title, description, start/end time)
@@ -17,23 +19,27 @@ const EventDetailScreen = () => {
  return (
    <BaseBackground>
      <View className="flex-1 p-4">
-        <Text className="text-2xl mb-4">Event Detail</Text>
-        <Text className="text-gray-500 mb-4">ID: {id}</Text>
+        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>Event Detail</Text>
+        <Text className="mb-4" style={{ color: theme.textSecondary }}>ID: {id}</Text>
        <TextInput
          placeholder="Title"
+          placeholderTextColor={theme.textMuted}
          className="w-full border rounded p-2 mb-4"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
        />
        <TextInput
          placeholder="Description"
+          placeholderTextColor={theme.textMuted}
          multiline
          className="w-full border rounded p-2 mb-4 h-24"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
        />
        <View className="flex-row gap-2">
-          <Pressable className="bg-blue-500 p-3 rounded flex-1">
-            <Text className="text-white text-center">Save</Text>
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.confirmButton }}>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Save</Text>
          </Pressable>
-          <Pressable className="bg-red-500 p-3 rounded flex-1">
-            <Text className="text-white text-center">Delete</Text>
+          <Pressable className="p-3 rounded flex-1" style={{ backgroundColor: theme.rejectButton }}>
+            <Text className="text-center" style={{ color: theme.buttonText }}>Delete</Text>
          </Pressable>
        </View>
      </View>
--- a/apps/client/src/app/index.tsx
+++ b/apps/client/src/app/index.tsx
@@ -1,34 +1,6 @@
-import { useEffect } from "react";
-import { View, ActivityIndicator } from "react-native";
 import { Redirect } from "expo-router";
-import { useAuthStore } from "../stores";
-import currentTheme from "../Themes";

 export default function Index() {
-  const { isAuthenticated, isLoading, loadStoredUser } = useAuthStore();
-
-  useEffect(() => {
-    loadStoredUser();
-  }, [loadStoredUser]);
-
-  if (isLoading) {
-    return (
-      <View
-        style={{
-          flex: 1,
-          justifyContent: "center",
-          alignItems: "center",
-          backgroundColor: currentTheme.primeBg,
-        }}
-      >
-        <ActivityIndicator size="large" color={currentTheme.chatBot} />
-      </View>
-    );
-  }
-
-  if (isAuthenticated) {
-    return <Redirect href="/(tabs)/chat" />;
-  }
-
-  return <Redirect href="/login" />;
+  // AuthGuard in (tabs)/_layout.tsx handles authentication
+  return <Redirect href="/(tabs)/chat" />;
 }
--- a/apps/client/src/app/login.tsx
+++ b/apps/client/src/app/login.tsx
@@ -4,9 +4,10 @@ import { Link, router } from "expo-router";
 import BaseBackground from "../components/BaseBackground";
 import AuthButton from "../components/AuthButton";
 import { AuthService } from "../services";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";

 const LoginScreen = () => {
+  const { theme } = useThemeStore();
  const [identifier, setIdentifier] = useState("");
  const [password, setPassword] = useState("");
  const [error, setError] = useState<string | null>(null);
@@ -36,44 +37,44 @@ const LoginScreen = () => {
      <View className="flex-1 justify-center items-center p-8">
        <Text
          className="text-3xl font-bold mb-8"
-          style={{ color: currentTheme.textPrimary }}
+          style={{ color: theme.textPrimary }}
        >
          Anmelden
        </Text>

        {error && (
-          <Text className="mb-4 text-center" style={{ color: currentTheme.rejectButton }}>
+          <Text className="mb-4 text-center" style={{ color: theme.rejectButton }}>
            {error}
          </Text>
        )}

        <TextInput
          placeholder="E-Mail oder Benutzername"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
          value={identifier}
          onChangeText={setIdentifier}
          autoCapitalize="none"
          className="w-full rounded-lg p-4 mb-4"
          style={{
-            backgroundColor: currentTheme.secondaryBg,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            color: theme.textPrimary,
            borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
          }}
        />

        <TextInput
          placeholder="Passwort"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
          value={password}
          onChangeText={setPassword}
          secureTextEntry
          className="w-full rounded-lg p-4 mb-6"
          style={{
-            backgroundColor: currentTheme.secondaryBg,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            color: theme.textPrimary,
            borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
          }}
        />

@@ -85,7 +86,7 @@ const LoginScreen = () => {

        <Link href="/register" asChild>
          <Pressable>
-            <Text style={{ color: currentTheme.chatBot }}>
+            <Text style={{ color: theme.chatBot }}>
              Noch kein Konto? Registrieren
            </Text>
          </Pressable>
--- a/apps/client/src/app/note/[id].tsx
+++ b/apps/client/src/app/note/[id].tsx
@@ -1,9 +1,11 @@
 import { View, Text, TextInput, Pressable } from "react-native";
 import { useLocalSearchParams } from "expo-router";
 import BaseBackground from "../../components/BaseBackground";
+import { useThemeStore } from "../../stores/ThemeStore";

 const NoteScreen = () => {
  const { id } = useLocalSearchParams<{ id: string }>();
+  const { theme } = useThemeStore();

  // TODO: Fetch event by id using EventService.getById()
  // TODO: Display and edit the event's note field
@@ -15,16 +17,18 @@ const NoteScreen = () => {
  return (
    <BaseBackground>
      <View className="flex-1 p-4">
-        <Text className="text-2xl mb-4">Note</Text>
-        <Text className="text-gray-500 mb-4">Event ID: {id}</Text>
+        <Text className="text-2xl mb-4" style={{ color: theme.textPrimary }}>Note</Text>
+        <Text className="mb-4" style={{ color: theme.textSecondary }}>Event ID: {id}</Text>
        <TextInput
          placeholder="Write your note here..."
+          placeholderTextColor={theme.textMuted}
          multiline
          className="w-full border rounded p-2 flex-1 mb-4"
          textAlignVertical="top"
+          style={{ color: theme.textPrimary, borderColor: theme.borderPrimary, backgroundColor: theme.secondaryBg }}
        />
-        <Pressable className="bg-blue-500 p-3 rounded">
-          <Text className="text-white text-center">Save Note</Text>
+        <Pressable className="p-3 rounded" style={{ backgroundColor: theme.confirmButton }}>
+          <Text className="text-center" style={{ color: theme.buttonText }}>Save Note</Text>
        </Pressable>
      </View>
    </BaseBackground>
--- a/apps/client/src/app/register.tsx
+++ b/apps/client/src/app/register.tsx
@@ -4,11 +4,12 @@ import { Link, router } from "expo-router";
 import BaseBackground from "../components/BaseBackground";
 import AuthButton from "../components/AuthButton";
 import { AuthService } from "../services";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";

 const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

 const RegisterScreen = () => {
+  const { theme } = useThemeStore();
  const [email, setEmail] = useState("");
  const [userName, setUserName] = useState("");
  const [password, setPassword] = useState("");
@@ -44,60 +45,60 @@ const RegisterScreen = () => {
      <View className="flex-1 justify-center items-center p-8">
        <Text
          className="text-3xl font-bold mb-8"
-          style={{ color: currentTheme.textPrimary }}
+          style={{ color: theme.textPrimary }}
        >
          Registrieren
        </Text>

        {error && (
-          <Text className="mb-4 text-center" style={{ color: currentTheme.rejectButton }}>
+          <Text className="mb-4 text-center" style={{ color: theme.rejectButton }}>
            {error}
          </Text>
        )}

        <TextInput
          placeholder="E-Mail"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
          value={email}
          onChangeText={setEmail}
          autoCapitalize="none"
          keyboardType="email-address"
          className="w-full rounded-lg p-4 mb-4"
          style={{
-            backgroundColor: currentTheme.secondaryBg,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            color: theme.textPrimary,
            borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
          }}
        />

        <TextInput
          placeholder="Benutzername"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
          value={userName}
          onChangeText={setUserName}
          autoCapitalize="none"
          className="w-full rounded-lg p-4 mb-4"
          style={{
-            backgroundColor: currentTheme.secondaryBg,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            color: theme.textPrimary,
            borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
          }}
        />

        <TextInput
          placeholder="Passwort"
-          placeholderTextColor={currentTheme.textMuted}
+          placeholderTextColor={theme.textMuted}
          value={password}
          onChangeText={setPassword}
          secureTextEntry
          className="w-full rounded-lg p-4 mb-6"
          style={{
-            backgroundColor: currentTheme.secondaryBg,
-            color: currentTheme.textPrimary,
+            backgroundColor: theme.secondaryBg,
+            color: theme.textPrimary,
            borderWidth: 1,
-            borderColor: currentTheme.borderPrimary,
+            borderColor: theme.borderPrimary,
          }}
        />

@@ -109,7 +110,7 @@ const RegisterScreen = () => {

        <Link href="/login" asChild>
          <Pressable>
-            <Text style={{ color: currentTheme.chatBot }}>
+            <Text style={{ color: theme.chatBot }}>
              Bereits ein Konto? Anmelden
            </Text>
          </Pressable>
--- a/apps/client/src/components/AuthButton.tsx
+++ b/apps/client/src/components/AuthButton.tsx
@@ -1,5 +1,5 @@
 import { Pressable, Text, ActivityIndicator } from "react-native";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";

 interface AuthButtonProps {
  title: string;
@@ -8,6 +8,7 @@ interface AuthButtonProps {
 }

 const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
+  const { theme } = useThemeStore();
  return (
    <Pressable
      onPress={onPress}
@@ -15,9 +16,9 @@ const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
      className="w-full rounded-lg p-4 mb-4 border-4"
      style={{
        backgroundColor: isLoading
-          ? currentTheme.disabledButton
-          : currentTheme.chatBot,
-        shadowColor: "#000",
+          ? theme.disabledButton
+          : theme.chatBot,
+        shadowColor: theme.shadowColor,
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
@@ -25,11 +26,11 @@ const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
      }}
    >
      {isLoading ? (
-        <ActivityIndicator color={currentTheme.buttonText} />
+        <ActivityIndicator color={theme.buttonText} />
      ) : (
        <Text
          className="text-center font-semibold text-lg"
-          style={{ color: currentTheme.buttonText }}
+          style={{ color: theme.buttonText }}
        >
          {title}
        </Text>
--- a/apps/client/src/components/AuthGuard.tsx
+++ b/apps/client/src/components/AuthGuard.tsx
@@ -0,0 +1,46 @@
+import { useEffect, ReactNode } from "react";
+import { View, ActivityIndicator } from "react-native";
+import { Redirect } from "expo-router";
+import { useAuthStore } from "../stores";
+import { useThemeStore } from "../stores/ThemeStore";
+
+type AuthGuardProps = {
+  children: ReactNode;
+};
+
+/**
+ * Wraps content that requires authentication.
+ * - Loads stored user on mount
+ * - Shows loading indicator while checking auth state
+ * - Redirects to login if not authenticated
+ * - Renders children if authenticated
+ */
+export const AuthGuard = ({ children }: AuthGuardProps) => {
+  const { theme } = useThemeStore();
+  const { isAuthenticated, isLoading, loadStoredUser } = useAuthStore();
+
+  useEffect(() => {
+    loadStoredUser();
+  }, [loadStoredUser]);
+
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          justifyContent: "center",
+          alignItems: "center",
+          backgroundColor: theme.primeBg,
+        }}
+      >
+        <ActivityIndicator size="large" color={theme.chatBot} />
+      </View>
+    );
+  }
+
+  if (!isAuthenticated) {
+    return <Redirect href="/login" />;
+  }
+
+  return <>{children}</>;
+};
--- a/apps/client/src/components/BaseBackground.tsx
+++ b/apps/client/src/components/BaseBackground.tsx
@@ -1,5 +1,5 @@
 import { View } from "react-native";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { ReactNode } from "react";

 type BaseBackgroundProps = {
@@ -8,11 +8,12 @@ type BaseBackgroundProps = {
 };

 const BaseBackground = (props: BaseBackgroundProps) => {
+  const { theme } = useThemeStore();
  return (
    <View
      className={`h-full ${props.className}`}
      style={{
-        backgroundColor: currentTheme.primeBg,
+        backgroundColor: theme.primeBg,
      }}
    >
      {props.children}
--- a/apps/client/src/components/BaseButton.tsx
+++ b/apps/client/src/components/BaseButton.tsx
@@ -0,0 +1,39 @@
+import { Pressable, Text } from "react-native";
+import { useThemeStore } from "../stores/ThemeStore";
+import { ReactNode } from "react";
+
+type BaseButtonProps = {
+  children?: ReactNode;
+  onPress: () => void;
+  solid?: boolean;
+};
+
+const BaseButton = ({children, onPress, solid = false}: BaseButtonProps) => {
+  const { theme } = useThemeStore();
+  return (
+    <Pressable
+      className="w-11/12 rounded-lg p-4 mb-4 border-4"
+      onPress={onPress}
+      style={{
+        borderColor: theme.borderPrimary,
+        backgroundColor: solid
+          ? theme.chatBot
+          : theme.primeBg,
+        shadowColor: theme.shadowColor,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        elevation: 5,
+      }}
+    >
+      <Text
+        className="text-center font-semibold text-lg"
+        style={{ color: theme.buttonText }}
+      >
+        {children}
+      </Text>
+    </Pressable>
+  );
+};
+
+export default BaseButton;
--- a/apps/client/src/components/ChatBubble.tsx
+++ b/apps/client/src/components/ChatBubble.tsx
@@ -1,5 +1,5 @@
 import { View, ViewStyle } from "react-native";
-import colors from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";

 type BubbleSide = "left" | "right";

@@ -11,7 +11,8 @@ type ChatBubbleProps = {
 };

 export function ChatBubble({ side, children, className = "", style }: ChatBubbleProps) {
-  const borderColor = side === "left" ? colors.chatBot : colors.primeFg;
+  const { theme } = useThemeStore();
+  const borderColor = side === "left" ? theme.chatBot : theme.primeFg;
  const sideClass =
    side === "left"
      ? "self-start ml-2 rounded-bl-sm"
@@ -19,8 +20,8 @@ export function ChatBubble({ side, children, className = "", style }: ChatBubble

  return (
    <View
-      className={`bg-white border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
-      style={[{ borderColor, elevation: 8 }, style]}
+      className={`border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
+      style={[{ borderColor, elevation: 8, backgroundColor: theme.secondaryBg }, style]}
    >
      {children}
    </View>
--- a/apps/client/src/components/EventCard.tsx
+++ b/apps/client/src/components/EventCard.tsx
@@ -1,7 +1,7 @@
 import { View, Pressable } from "react-native";
 import { ExpandedEvent } from "@calchat/shared";
 import { Feather } from "@expo/vector-icons";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { EventCardBase } from "./EventCardBase";

 type EventCardProps = {
@@ -11,6 +11,7 @@ type EventCardProps = {
 };

 export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
+  const { theme } = useThemeStore();
  return (
    <View className="mb-3">
      <EventCardBase
@@ -27,23 +28,23 @@ export const EventCard = ({ event, onEdit, onDelete }: EventCardProps) => {
            className="w-10 h-10 rounded-full items-center justify-center"
            style={{
              borderWidth: 1,
-              borderColor: currentTheme.borderPrimary,
+              borderColor: theme.borderPrimary,
            }}
          >
-            <Feather name="edit-2" size={18} color={currentTheme.textPrimary} />
+            <Feather name="edit-2" size={18} color={theme.textPrimary} />
          </Pressable>
          <Pressable
            onPress={onDelete}
            className="w-10 h-10 rounded-full items-center justify-center"
            style={{
              borderWidth: 1,
-              borderColor: currentTheme.borderPrimary,
+              borderColor: theme.borderPrimary,
            }}
          >
            <Feather
              name="trash-2"
              size={18}
-              color={currentTheme.textPrimary}
+              color={theme.textPrimary}
            />
          </Pressable>
        </View>
--- a/apps/client/src/components/EventCardBase.tsx
+++ b/apps/client/src/components/EventCardBase.tsx
@@ -1,7 +1,7 @@
 import { View, Text } from "react-native";
 import { Feather } from "@expo/vector-icons";
 import { ReactNode } from "react";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";

 type EventCardBaseProps = {
  className?: string;
@@ -60,34 +60,35 @@ export const EventCardBase = ({
  isRecurring,
  children,
 }: EventCardBaseProps) => {
+  const { theme } = useThemeStore();
  return (
    <View
      className={`rounded-xl overflow-hidden ${className}`}
-      style={{ borderWidth: 2, borderColor: currentTheme.borderPrimary }}
+      style={{ borderWidth: 2, borderColor: theme.borderPrimary }}
    >
      {/* Header with title */}
      <View
        className="px-3 py-2"
        style={{
-          backgroundColor: currentTheme.chatBot,
+          backgroundColor: theme.chatBot,
          borderBottomWidth: 2,
-          borderBottomColor: currentTheme.borderPrimary,
+          borderBottomColor: theme.borderPrimary,
        }}
      >
-        <Text className="font-bold text-base">{title}</Text>
+        <Text className="font-bold text-base" style={{ color: theme.textPrimary }}>{title}</Text>
      </View>

      {/* Content */}
-      <View className="px-3 py-2 bg-white">
+      <View className="px-3 py-2" style={{ backgroundColor: theme.secondaryBg }}>
        {/* Date */}
        <View className="flex-row items-center mb-1">
          <Feather
            name="calendar"
            size={16}
-            color={currentTheme.textPrimary}
+            color={theme.textPrimary}
            style={{ marginRight: 8 }}
          />
-          <Text style={{ color: currentTheme.textPrimary }}>
+          <Text style={{ color: theme.textPrimary }}>
            {formatDate(startTime)}
          </Text>
        </View>
@@ -97,10 +98,10 @@ export const EventCardBase = ({
          <Feather
            name="clock"
            size={16}
-            color={currentTheme.textPrimary}
+            color={theme.textPrimary}
            style={{ marginRight: 8 }}
          />
-          <Text style={{ color: currentTheme.textPrimary }}>
+          <Text style={{ color: theme.textPrimary }}>
            {formatTime(startTime)} - {formatTime(endTime)} (
            {formatDuration(startTime, endTime)})
          </Text>
@@ -112,10 +113,10 @@ export const EventCardBase = ({
            <Feather
              name="repeat"
              size={16}
-              color={currentTheme.textPrimary}
+              color={theme.textPrimary}
              style={{ marginRight: 8 }}
            />
-            <Text style={{ color: currentTheme.textPrimary }}>
+            <Text style={{ color: theme.textPrimary }}>
              Wiederkehrend
            </Text>
          </View>
@@ -124,7 +125,7 @@ export const EventCardBase = ({
        {/* Description */}
        {description && (
          <Text
-            style={{ color: currentTheme.textPrimary }}
+            style={{ color: theme.textPrimary }}
            className="text-sm mt-1"
          >
            {description}
--- a/apps/client/src/components/EventConfirmDialog.tsx
+++ b/apps/client/src/components/EventConfirmDialog.tsx
@@ -1,5 +1,6 @@
 import { View, Text, Modal, Pressable } from "react-native";
 import { CreateEventDTO } from "@calchat/shared";
+import { useThemeStore } from "../stores/ThemeStore";

 type EventConfirmDialogProps = {
  visible: boolean;
@@ -16,6 +17,8 @@ const EventConfirmDialog = ({
  onReject: _onReject,
  onClose: _onClose,
 }: EventConfirmDialogProps) => {
+  const { theme } = useThemeStore();
+
  // TODO: Display proposed event details (title, time, description)
  // TODO: Confirm button calls onConfirm and closes dialog
  // TODO: Reject button calls onReject and closes dialog
@@ -26,7 +29,7 @@ const EventConfirmDialog = ({
    <Modal visible={false} transparent animationType="fade">
      <View>
        <Pressable>
-          <Text>EventConfirmDialog - Not Implemented</Text>
+          <Text style={{ color: theme.textPrimary }}>EventConfirmDialog - Not Implemented</Text>
        </Pressable>
      </View>
    </Modal>
--- a/apps/client/src/components/Header.tsx
+++ b/apps/client/src/components/Header.tsx
@@ -1,42 +1,28 @@
-import { View, Pressable } from "react-native";
-import { Ionicons } from "@expo/vector-icons";
-import { router } from "expo-router";
-import currentTheme from "../Themes";
+import { View } from "react-native";
+import { useThemeStore } from "../stores/ThemeStore";
 import { ReactNode } from "react";
-import { AuthService } from "../services";

 type HeaderProps = {
  children?: ReactNode;
  className?: string;
 };

-const handleLogout = async () => {
-  await AuthService.logout();
-  router.replace("/login");
-};
-
 const Header = (props: HeaderProps) => {
+  const { theme } = useThemeStore();
  return (
    <View>
      <View
        className={`w-full h-32 pt-10 pb-4 ${props.className}`}
        style={{
-          backgroundColor: currentTheme.chatBot,
+          backgroundColor: theme.chatBot,
        }}
      >
        {props.children}
-        <Pressable
-          onPress={handleLogout}
-          className="absolute left-1 bottom-0 p-2"
-          hitSlop={8}
-        >
-          <Ionicons name="log-out-outline" size={24} color={currentTheme.primeFg} />
-        </Pressable>
      </View>
      <View
        className="h-2 bg-black"
        style={{
-          shadowColor: "#000",
+          shadowColor: theme.shadowColor,
          shadowOffset: {
            width: 0,
            height: 5,
--- a/apps/client/src/components/ProposedEventCard.tsx
+++ b/apps/client/src/components/ProposedEventCard.tsx
@@ -1,6 +1,6 @@
 import { View, Text, Pressable } from "react-native";
 import { ProposedEventChange } from "@calchat/shared";
-import currentTheme from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { EventCardBase } from "./EventCardBase";

 type ProposedEventCardProps = {
@@ -19,42 +19,45 @@ const ConfirmRejectButtons = ({
  respondedAction?: "confirm" | "reject";
  onConfirm: () => void;
  onReject: () => void;
-}) => (
-  <View className="flex-row mt-3 gap-2">
-    <Pressable
-      onPress={onConfirm}
-      disabled={isDisabled}
-      className="flex-1 py-2 rounded-lg items-center"
-      style={{
-        backgroundColor: isDisabled
-          ? currentTheme.disabledButton
-          : currentTheme.confirmButton,
-        borderWidth: respondedAction === "confirm" ? 2 : 0,
-        borderColor: currentTheme.confirmButton,
-      }}
-    >
-      <Text style={{ color: currentTheme.buttonText }} className="font-medium">
-        Annehmen
-      </Text>
-    </Pressable>
-    <Pressable
-      onPress={onReject}
-      disabled={isDisabled}
-      className="flex-1 py-2 rounded-lg items-center"
-      style={{
-        backgroundColor: isDisabled
-          ? currentTheme.disabledButton
-          : currentTheme.rejectButton,
-        borderWidth: respondedAction === "reject" ? 2 : 0,
-        borderColor: currentTheme.rejectButton,
-      }}
-    >
-      <Text style={{ color: currentTheme.buttonText }} className="font-medium">
-        Ablehnen
-      </Text>
-    </Pressable>
-  </View>
-);
+}) => {
+  const { theme } = useThemeStore();
+  return (
+    <View className="flex-row mt-3 gap-2">
+      <Pressable
+        onPress={onConfirm}
+        disabled={isDisabled}
+        className="flex-1 py-2 rounded-lg items-center"
+        style={{
+          backgroundColor: isDisabled
+            ? theme.disabledButton
+            : theme.confirmButton,
+          borderWidth: respondedAction === "confirm" ? 2 : 0,
+          borderColor: theme.confirmButton,
+        }}
+      >
+        <Text style={{ color: theme.buttonText }} className="font-medium">
+          Annehmen
+        </Text>
+      </Pressable>
+      <Pressable
+        onPress={onReject}
+        disabled={isDisabled}
+        className="flex-1 py-2 rounded-lg items-center"
+        style={{
+          backgroundColor: isDisabled
+            ? theme.disabledButton
+            : theme.rejectButton,
+          borderWidth: respondedAction === "reject" ? 2 : 0,
+          borderColor: theme.rejectButton,
+        }}
+      >
+        <Text style={{ color: theme.buttonText }} className="font-medium">
+          Ablehnen
+        </Text>
+      </Pressable>
+    </View>
+  );
+};

 export const ProposedEventCard = ({
  proposedChange,
--- a/apps/client/src/components/TypingIndicator.tsx
+++ b/apps/client/src/components/TypingIndicator.tsx
@@ -1,12 +1,13 @@
 import { useEffect, useState } from "react";
 import { Text } from "react-native";
-import colors from "../Themes";
+import { useThemeStore } from "../stores/ThemeStore";
 import { ChatBubble } from "./ChatBubble";

 const DOTS = [".", "..", "..."];
 const INTERVAL_MS = 400;

 export default function TypingIndicator() {
+  const { theme } = useThemeStore();
  const [dotIndex, setDotIndex] = useState(0);

  useEffect(() => {
@@ -21,7 +22,7 @@ export default function TypingIndicator() {
    <ChatBubble side="left" className="px-4 py-2">
      <Text
        className="text-lg font-bold tracking-widest"
-        style={{ color: colors.textMuted }}
+        style={{ color: theme.textMuted }}
      >
        {DOTS[dotIndex]}
      </Text>
--- a/apps/client/src/services/ApiClient.ts
+++ b/apps/client/src/services/ApiClient.ts
@@ -55,7 +55,12 @@ async function request<T>(
    }

    apiLogger.debug(`${method} ${endpoint} - ${response.status} (${duration}ms)`);
-    return response.json();
+
+    const text = await response.text();
+    if (!text) {
+      return undefined as T;
+    }
+    return JSON.parse(text);
  } catch (error) {
    const duration = Math.round(performance.now() - start);
    apiLogger.error(`${method} ${endpoint} failed (${duration}ms): ${error}`);
--- a/apps/client/src/stores/ThemeStore.ts
+++ b/apps/client/src/stores/ThemeStore.ts
@@ -0,0 +1,12 @@
+import { create } from "zustand";
+import { Theme, THEMES } from "../Themes";
+
+interface ThemeState {
+  theme: Theme;
+  setTheme: (themeName: keyof typeof THEMES) => void;
+}
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  theme: THEMES.defaultLight,
+  setTheme: (themeName) => set({theme: THEMES[themeName]})
+}))