diff --git a/README.md b/README.md
index 341a35a..e313213 100644
--- a/README.md
+++ b/README.md
@@ -12,7 +12,7 @@
 - Business logic: `TaskService` + models in `backend/tasks.py`
 - Frontend: React 18, Vite, FluentUI components, feature-first structure under `frontend/src/features`
 - Tests: Playwright E2E (`tests/e2e/app.spec.js`)
-
+test
 ## Documentation
 
 All deep-dive guides now live under `docs/` for easier discovery:
diff --git a/frontend/package.json b/frontend/package.json
index f5ef78e..08c02c4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,7 +15,8 @@
     "@fluentui/react-icons": "^2.0.239",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^7.9.6"
+    "react-router-dom": "^7.9.6",
+    "recharts": "^3.5.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.42.1",
@@ -24,4 +25,4 @@
     "@vitejs/plugin-react": "^4.2.1",
     "vite": "^5.1.0"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/features/dashboard/Dashboard.jsx b/frontend/src/features/dashboard/Dashboard.jsx
index 427567d..bc2eceb 100644
--- a/frontend/src/features/dashboard/Dashboard.jsx
+++ b/frontend/src/features/dashboard/Dashboard.jsx
@@ -2,7 +2,7 @@
  * Dashboard Component
  *
  * Displays real-time server information using Server-Sent Events
- * Demonstrates FluentUI Card and Text components
+ * Demonstrates FluentUI Card and Text components with colorful metrics and charts
  */
 
 import { useEffect, useState } from 'react'
@@ -13,9 +13,37 @@ import {
   makeStyles,
   tokens,
   Spinner,
+  Badge,
 } from '@fluentui/react-components'
-import { Clock24Regular, CalendarLtr24Regular } from '@fluentui/react-icons'
+import {
+  Clock24Regular,
+  CalendarLtr24Regular,
+  ChartMultiple24Regular,
+  DataUsage24Regular,
+  People24Regular,
+  Checkmark24Regular,
+  ArrowUp24Regular,
+  Server24Regular,
+} from '@fluentui/react-icons'
 import { connectToTimeStream, getCurrentDate } from '../../services/api'
+import {
+  LineChart,
+  Line,
+  AreaChart,
+  Area,
+  BarChart,
+  Bar,
+  PieChart,
+  Pie,
+  Cell,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+  Tooltip,
+  Legend,
+  RadialBarChart,
+  RadialBar,
+} from 'recharts'
 
 const useStyles = makeStyles({
   dashboard: {
@@ -27,6 +55,31 @@ const useStyles = makeStyles({
   card: {
     padding: tokens.spacingVerticalL,
   },
+  cardSuccess: {
+    padding: tokens.spacingVerticalL,
+    backgroundColor: tokens.colorPaletteGreenBackground2,
+    borderLeft: `4px solid ${tokens.colorPaletteGreenBorder2}`,
+  },
+  cardWarning: {
+    padding: tokens.spacingVerticalL,
+    backgroundColor: tokens.colorPaletteYellowBackground2,
+    borderLeft: `4px solid ${tokens.colorPaletteYellowBorder2}`,
+  },
+  cardInfo: {
+    padding: tokens.spacingVerticalL,
+    backgroundColor: tokens.colorPaletteBlueBorder1,
+    borderLeft: `4px solid ${tokens.colorPaletteBlueBorder2}`,
+  },
+  cardPurple: {
+    padding: tokens.spacingVerticalL,
+    backgroundColor: tokens.colorPalettePurpleBackground2,
+    borderLeft: `4px solid ${tokens.colorPalettePurpleBorder2}`,
+  },
+  cardRed: {
+    padding: tokens.spacingVerticalL,
+    backgroundColor: tokens.colorPaletteRedBackground2,
+    borderLeft: `4px solid ${tokens.colorPaletteRedBorder2}`,
+  },
   timeDisplay: {
     fontSize: '48px',
     fontWeight: 'bold',
@@ -37,6 +90,15 @@ const useStyles = makeStyles({
     fontSize: '24px',
     color: tokens.colorNeutralForeground2,
   },
+  metricValue: {
+    fontSize: '36px',
+    fontWeight: 'bold',
+    color: tokens.colorBrandForeground1,
+  },
+  metricChange: {
+    fontSize: '14px',
+    fontWeight: 'semibold',
+  },
   label: {
     fontSize: '14px',
     color: tokens.colorNeutralForeground3,
@@ -47,8 +109,48 @@ const useStyles = makeStyles({
     flexDirection: 'column',
     gap: tokens.spacingVerticalM,
   },
+  chartContainer: {
+    height: '200px',
+    marginTop: tokens.spacingVerticalM,
+  },
+  metricRow: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
 })
 
+// Sample data generators
+const generateWeeklyData = () => {
+  const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
+  return days.map((day) => ({
+    name: day,
+    wert: Math.floor(Math.random() * 100) + 50,
+    ziel: 80,
+  }))
+}
+
+const generateMonthlyData = () => {
+  const months = ['Jan', 'Feb', 'Mär', 'Apr', 'Mai', 'Jun']
+  return months.map((month) => ({
+    name: month,
+    umsatz: Math.floor(Math.random() * 5000) + 3000,
+    kosten: Math.floor(Math.random() * 3000) + 1500,
+  }))
+}
+
+const generateCategoryData = () => [
+  { name: 'Frontend', value: 35, color: '#0078d4' },
+  { name: 'Backend', value: 28, color: '#50e6ff' },
+  { name: 'DevOps', value: 20, color: '#00b7c3' },
+  { name: 'Design', value: 17, color: '#8764b8' },
+]
+
+const generatePerformanceData = () => [
+  { name: 'Performance', value: 85, fill: '#10b981' },
+  { name: 'Verbleibend', value: 15, fill: '#e5e7eb' },
+]
+
 export default function Dashboard() {
   const styles = useStyles()
   const [liveTime, setLiveTime] = useState(null)
@@ -56,6 +158,22 @@ export default function Dashboard() {
   const [isConnected, setIsConnected] = useState(false)
   const [error, setError] = useState(null)
 
+  // Fictional metrics state
+  const [weeklyData] = useState(generateWeeklyData())
+  const [monthlyData] = useState(generateMonthlyData())
+  const [categoryData] = useState(generateCategoryData())
+  const [performanceData] = useState(generatePerformanceData())
+  const [systemMetrics] = useState({
+    activeUsers: Math.floor(Math.random() * 500) + 1200,
+    userChange: '+12%',
+    completedTasks: Math.floor(Math.random() * 200) + 450,
+    taskChange: '+8%',
+    serverUptime: '99.9%',
+    uptimeChange: '+0.1%',
+    avgResponseTime: Math.floor(Math.random() * 50) + 120,
+    responseChange: '-15ms',
+  })
+
   // Fetch initial server date
   useEffect(() => {
     getCurrentDate()
@@ -82,72 +200,222 @@ export default function Dashboard() {
 
   return (
     <div className={styles.dashboard}>
-      <Card className={styles.card}>
+      {/* Active Users Metric */}
+      <Card className={styles.cardSuccess}>
         <CardHeader
           header={
             <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <Clock24Regular />
-              <Text weight="semibold">Live Server Time</Text>
+              <People24Regular />
+              <Text weight="semibold">Aktive Benutzer</Text>
             </div>
           }
-          description={
-            isConnected ? (
-              <Text size={200}>Connected via Server-Sent Events</Text>
-            ) : (
-              <Text size={200}>Connecting...</Text>
-            )
+          description={<Badge appearance="tint" color="success">Live</Badge>}
+        />
+        <div className={styles.content}>
+          <div className={styles.metricRow}>
+            <div className={styles.metricValue}>{systemMetrics.activeUsers.toLocaleString()}</div>
+            <Text className={styles.metricChange} style={{ color: tokens.colorPaletteGreenForeground1 }}>
+              <ArrowUp24Regular /> {systemMetrics.userChange}
+            </Text>
+          </div>
+          <div className={styles.chartContainer}>
+            <ResponsiveContainer width="100%" height="100%">
+              <LineChart data={weeklyData}>
+                <XAxis dataKey="name" stroke={tokens.colorNeutralForeground3} />
+                <YAxis stroke={tokens.colorNeutralForeground3} />
+                <Tooltip />
+                <Line type="monotone" dataKey="wert" stroke="#10b981" strokeWidth={3} dot={{ fill: '#10b981', r: 4 }} />
+                <Line type="monotone" dataKey="ziel" stroke="#94a3b8" strokeDasharray="5 5" strokeWidth={2} />
+              </LineChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </Card>
+
+      {/* Task Completion Metric */}
+      <Card className={styles.cardInfo}>
+        <CardHeader
+          header={
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <Checkmark24Regular />
+              <Text weight="semibold">Erledigte Aufgaben</Text>
+            </div>
           }
+          description={<Badge appearance="tint" color="informative">Heute</Badge>}
         />
         <div className={styles.content}>
-          {liveTime ? (
-            <>
-              <div className={styles.timeDisplay} data-testid="live-time">
-                {liveTime.time}
-              </div>
-              <div className={styles.dateDisplay}>{liveTime.date}</div>
-            </>
-          ) : (
-            <Spinner label="Connecting to server..." />
-          )}
+          <div className={styles.metricRow}>
+            <div className={styles.metricValue}>{systemMetrics.completedTasks}</div>
+            <Text className={styles.metricChange} style={{ color: tokens.colorPaletteBlueForeground1 }}>
+              {systemMetrics.taskChange}
+            </Text>
+          </div>
+          <div className={styles.chartContainer}>
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={weeklyData}>
+                <XAxis dataKey="name" stroke={tokens.colorNeutralForeground3} />
+                <YAxis stroke={tokens.colorNeutralForeground3} />
+                <Tooltip />
+                <Bar dataKey="wert" fill="#0078d4" radius={[8, 8, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </Card>
+
+      {/* Server Uptime */}
+      <Card className={styles.cardPurple}>
+        <CardHeader
+          header={
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <Server24Regular />
+              <Text weight="semibold">Server Verfügbarkeit</Text>
+            </div>
+          }
+          description={<Badge appearance="tint" color="important">30 Tage</Badge>}
+        />
+        <div className={styles.content}>
+          <div className={styles.metricRow}>
+            <div className={styles.metricValue}>{systemMetrics.serverUptime}</div>
+            <Text className={styles.metricChange} style={{ color: tokens.colorPalettePurpleForeground1 }}>
+              {systemMetrics.uptimeChange}
+            </Text>
+          </div>
+          <div className={styles.chartContainer}>
+            <ResponsiveContainer width="100%" height="100%">
+              <RadialBarChart 
+                innerRadius="50%" 
+                outerRadius="100%" 
+                data={performanceData}
+                startAngle={180}
+                endAngle={0}
+              >
+                <RadialBar dataKey="value" cornerRadius={10} />
+              </RadialBarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </Card>
+
+      {/* Response Time */}
+      <Card className={styles.cardWarning}>
+        <CardHeader
+          header={
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <DataUsage24Regular />
+              <Text weight="semibold">Ø Antwortzeit</Text>
+            </div>
+          }
+          description={<Badge appearance="tint" color="warning">Millisekunden</Badge>}
+        />
+        <div className={styles.content}>
+          <div className={styles.metricRow}>
+            <div className={styles.metricValue}>{systemMetrics.avgResponseTime}ms</div>
+            <Text className={styles.metricChange} style={{ color: tokens.colorPaletteGreenForeground1 }}>
+              {systemMetrics.responseChange}
+            </Text>
+          </div>
+          <div className={styles.chartContainer}>
+            <ResponsiveContainer width="100%" height="100%">
+              <AreaChart data={weeklyData}>
+                <XAxis dataKey="name" stroke={tokens.colorNeutralForeground3} />
+                <YAxis stroke={tokens.colorNeutralForeground3} />
+                <Tooltip />
+                <Area type="monotone" dataKey="wert" stroke="#f59e0b" fill="#fde68a" />
+              </AreaChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </Card>
+
+      {/* Monthly Revenue/Cost Chart */}
+      <Card className={styles.card} style={{ gridColumn: 'span 2' }}>
+        <CardHeader
+          header={
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <ChartMultiple24Regular />
+              <Text weight="semibold">Umsatz & Kosten Übersicht</Text>
+            </div>
+          }
+          description={<Text size={200}>Letzte 6 Monate</Text>}
+        />
+        <div className={styles.content}>
+          <div className={styles.chartContainer} style={{ height: '300px' }}>
+            <ResponsiveContainer width="100%" height="100%">
+              <BarChart data={monthlyData}>
+                <XAxis dataKey="name" stroke={tokens.colorNeutralForeground3} />
+                <YAxis stroke={tokens.colorNeutralForeground3} />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="umsatz" fill="#10b981" name="Umsatz (€)" radius={[8, 8, 0, 0]} />
+                <Bar dataKey="kosten" fill="#ef4444" name="Kosten (€)" radius={[8, 8, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </div>
+        </div>
+      </Card>
+
+      {/* Category Distribution */}
+      <Card className={styles.card}>
+        <CardHeader
+          header={
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <ChartMultiple24Regular />
+              <Text weight="semibold">Projektverteilung</Text>
+            </div>
+          }
+          description={<Text size={200}>Nach Kategorie</Text>}
+        />
+        <div className={styles.content}>
+          <div className={styles.chartContainer}>
+            <ResponsiveContainer width="100%" height="100%">
+              <PieChart>
+                <Pie
+                  data={categoryData}
+                  cx="50%"
+                  cy="50%"
+                  outerRadius={80}
+                  dataKey="value"
+                  label={({ name, value }) => `${name}: ${value}%`}
+                >
+                  {categoryData.map((entry, index) => (
+                    <Cell key={`cell-${index}`} fill={entry.color} />
+                  ))}
+                </Pie>
+                <Tooltip />
+              </PieChart>
+            </ResponsiveContainer>
+          </div>
         </div>
       </Card>
 
+      {/* Live Server Time */}
       <Card className={styles.card}>
         <CardHeader
           header={
             <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-              <CalendarLtr24Regular />
-              <Text weight="semibold">Server Date</Text>
+              <Clock24Regular />
+              <Text weight="semibold">Live Server Zeit</Text>
             </div>
           }
-          description={<Text size={200}>Current date from API</Text>}
+          description={
+            isConnected ? (
+              <Badge appearance="tint" color="success">Verbunden</Badge>
+            ) : (
+              <Badge appearance="outline">Verbinde...</Badge>
+            )
+          }
         />
         <div className={styles.content}>
-          {serverDate ? (
+          {liveTime ? (
             <>
-              <div>
-                <div className={styles.label}>Date</div>
-                <div className={styles.dateDisplay} data-testid="server-date">
-                  {serverDate.date}
-                </div>
-              </div>
-              <div>
-                <div className={styles.label}>Time</div>
-                <div className={styles.dateDisplay} data-testid="server-time">
-                  {serverDate.time}
-                </div>
-              </div>
-              <div>
-                <div className={styles.label}>ISO 8601</div>
-                <Text size={200} font="monospace">
-                  {serverDate.datetime}
-                </Text>
+              <div className={styles.timeDisplay} data-testid="live-time">
+                {liveTime.time}
               </div>
+              <div className={styles.dateDisplay}>{liveTime.date}</div>
             </>
-          ) : error ? (
-            <Text>Error: {error}</Text>
           ) : (
-            <Spinner label="Loading..." />
+            <Spinner label="Verbinde mit Server..." />
           )}
         </div>
       </Card>