diff --git a/.phase33-state.json b/.phase33-state.json
index aba356c..4f64e8d 100644
--- a/.phase33-state.json
+++ b/.phase33-state.json
@@ -1,9 +1,10 @@
 {
   "completed_features": [],
-  "current_feature": "pagination-component",
+  "current_feature": "color-picker-component",
   "started_at": "2026-05-23T09:43:23.964164",
   "attempted_features": [
     "avatar-component",
-    "divider-component"
+    "divider-component",
+    "pagination-component"
   ]
 }
\ No newline at end of file
diff --git a/GENERATION_LOG.md b/GENERATION_LOG.md
index 40398e1..d4ce059 100644
--- a/GENERATION_LOG.md
+++ b/GENERATION_LOG.md
@@ -3694,3 +3694,21 @@ src/index.ts(27,25): error TS2769: No overload matches this call.
   Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
     Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
       Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
+- `09:44:19` **INFO**   Committed feature pagination-component
+- `09:44:19` **INFO**   Pushed: rc=0
+
+## Phase-3 Feature: color-picker-component (2026-05-23 09:44:19)
+
+- `09:44:19` **INFO** Description: ColorPicker mit Preset-Swatches
+- `09:44:19` **INFO**   Generating apps/web/src/components/ColorPicker.tsx (ColorPicker-Component. Props: value (hex string), onChange(hex). Zeigt…)
+- `09:44:35` **INFO**     wrote 1463 chars in 16.0s (attempt 1)
+- `09:44:35` **INFO** Running tsc --noEmit on api…
+- `09:44:37` **WARN**   tsc errors:
+src/db/schema.ts(37,14): error TS7022: 'customers' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(45,59): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/db/schema.ts(49,14): error TS7022: 'projects' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.
+src/db/schema.ts(53,56): error TS7024: Function implicitly has return type 'any' because it does not have a return type annotation and is referenced directly or indirectly in one of its return expressions.
+src/index.ts(27,25): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(plugin: FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>, opts?: FastifyRegisterOptions<...> | undefined): FastifyInstance<...> & PromiseLike<...>', gave the following error.
+    Argument of type 'Promise<FastifyMultipartPlugin>' is not assignable to parameter of type 'FastifyPluginCallback<{ limits: { fileSize: number; }; }, RawServerDefault, FastifyTypeProvider, FastifyBaseLogger>'.
+      Type 'Promise<FastifyMultipartPlugin>' provides no match for the signature '(instance: FastifyInstance<RawServerDefault, IncomingMessage, ServerResponse<IncomingMessage>, 
diff --git a/apps/web/src/components/ColorPicker.tsx b/apps/web/src/components/ColorPicker.tsx
new file mode 100644
index 0000000..ed88b24
--- /dev/null
+++ b/apps/web/src/components/ColorPicker.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+interface ColorPickerProps {
+  value: string;
+  onChange: (color: string) => void;
+}
+
+const PRESET_COLORS = [
+  { name: 'Red', hex: '#ef4444', class: 'bg-red-500' },
+  { name: 'Orange', hex: '#f97316', class: 'bg-orange-500' },
+  { name: 'Amber', hex: '#f59e0b', class: 'bg-amber-500' },
+  { name: 'Yellow', hex: '#eab308', class: 'bg-yellow-500' },
+  { name: 'Lime', hex: '#84cc16', class: 'bg-lime-500' },
+  { name: 'Green', hex: '#22c55e', class: 'bg-green-500' },
+  { name: 'Emerald', hex: '#10b981', class: 'bg-emerald-500' },
+  { name: 'Blue', hex: '#3b82f6', class: 'bg-blue-500' },
+  { name: 'Indigo', hex: '#6366f1', class: 'bg-indigo-500' },
+  { name: 'Violet', hex: '#8b5cf6', class: 'bg-violet-500' },
+];
+
+export default function ColorPicker({ value, onChange }: ColorPickerProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="grid grid-cols-5 gap-2">
+        {PRESET_COLORS.map((color) => (
+          <button
+            key={color.hex}
+            type="button"
+            onClick={() => onChange(color.hex)}
+            className={`
+              w-8 h-8 rounded-full transition-all duration-200
+              ${color.class}
+              ${value === color.hex 
+                ? 'ring-2 ring-offset-2 ring-slate-900 scale-110' 
+                : 'hover:scale-105 ring-1 ring-black/10'}
+            `}
+            title={color.name}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
\ No newline at end of file