diff --git a/components/colorpicker/ColorPicker.stories.tsx b/components/colorpicker/ColorPicker.stories.tsx
index 1130b3f..de8e4d4 100644
--- a/components/colorpicker/ColorPicker.stories.tsx
+++ b/components/colorpicker/ColorPicker.stories.tsx
@@ -17,5 +17,6 @@ type Story = StoryObj<typeof ColorPicker>
 export const Default: Story = {
     args: {
         preColors: ["#4A90E2", "#FF6B6B", "#48D1CC", "#FFD700", "#9370DB", "#E17055", "#2ECC71", "#F39C12"],
+        title: "Pick a color",
     },
 };
\ No newline at end of file
diff --git a/components/colorpicker/ColorPicker.tsx b/components/colorpicker/ColorPicker.tsx
index e491b0a..2706990 100644
--- a/components/colorpicker/ColorPicker.tsx
+++ b/components/colorpicker/ColorPicker.tsx
@@ -1,23 +1,31 @@
 import React, {useEffect, useState} from "react";
+import { Seperator } from "../seperator/Seperator";
 
 
 interface ColorPickerProps {
     initialColor?: string;
     onChange: (color: string) => void;
     preColors?: string[];
+    title?: string;
 }
 
-const ColorPicker: React.FC<ColorPickerProps> = ({ initialColor, preColors, onChange }) => {
+const ColorPicker: React.FC<ColorPickerProps> = ({ initialColor, preColors, onChange, title }) => {
     const [color, setColor] = useState<string>(initialColor || "#FFFFFF");
 
     const handleColorChange = (e: React.ChangeEvent<HTMLInputElement>) => {
         setColor(e.target.value);
-        onChange(e.target.value);
+        onChange?.(e.target.value);
     };
 
     return (
-        <div className={"flex flex-col p-4 space-y-4 rounded-lg bg-zinc-100 dark:bg-dark border border-zinc-300 dark:border-edge"}>
-            <div className={"grid grid-cols-4 gap-4"}>
+        <div className={"flex flex-col p-2 space-y-4 rounded-lg bg-zinc-100 dark:bg-dark border border-zinc-300 dark:border-edge"}>
+            {title &&
+                <div className={"text-sm text-zinc-500 dark:text-gray space-y-2 px-2"}>
+                    <span>{title}</span>
+                    <Seperator className={"-mx-4"}/>
+                </div>
+            }
+            <div className={"grid grid-cols-4 gap-4 px-2"}>
                 {preColors?.map((preColor) => (
                     <ColorBox
                         key={preColor}
@@ -27,11 +35,11 @@ const ColorPicker: React.FC<ColorPickerProps> = ({ initialColor, preColors, onCh
                 ))}
             </div>
 
-            <div>
-                <label className={"ml-0.5 block text-xs text-zinc-500 dark:text-gray"}>Selected Color</label>
+            <div className={"px-2"}>
+                <label className={"ml-0.5 block text-xs text-zinc-400 dark:text-marcador"}>Selected Color</label>
                 <input
                     type="color"
-                    className={"w-full h-12 bg-inherit appearance-none cursor-pointer outline-amber-500"}
+                    className={"w-full h-8 rounded-md bg-inherit appearance-none cursor-pointer"}
                     value={color}
                     onChange={e => handleColorChange(e)}
                 />
@@ -43,7 +51,7 @@ const ColorPicker: React.FC<ColorPickerProps> = ({ initialColor, preColors, onCh
 const ColorBox: React.FC<{ color: string, onClick: () => void }> = ({color, onClick}) => {
     return (
         <div
-            className={"size-6 rounded-md cursor-pointer"}
+            className={"size-6 rounded-md cursor-pointer hover:scale-105"}
             style={{backgroundColor: color}}
             onClick={onClick}
         />
diff --git a/package.json b/package.json
index 33357b6..53f8983 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@marraph/daisy",
-  "version": "1.0.141",
+  "version": "1.0.142",
   "description": "Daisy is a component library for the marraph organisation",
   "scripts": {
     "dev": "next dev",
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 2516c04..92666fd 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -2,6 +2,7 @@ import type { Config } from "tailwindcss";
 import colors = require("tailwindcss/colors");
 
 const config: Config = {
+  darkMode: "selector",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",