diff --git a/src/components/ActiveColorPicker.tsx b/src/components/ActiveColorPicker.tsx
index 221a1de..8b2d3a1 100644
--- a/src/components/ActiveColorPicker.tsx
+++ b/src/components/ActiveColorPicker.tsx
@@ -19,14 +19,11 @@ const ActiveColorPicker: React.FC = () => {
   }
 
   return (
-    <div className="mb-4">
+    <div className="flex flex-col gap-2">
       <ColorPicker
         color={currentColor}
         onChange={(newColor) => handleColorChange(activeColor, newColor)}
       />
-      <h3 className="text-lg font-semibold mt-2 text-center first-letter:uppercase">
-        {activeColor}
-      </h3>
     </div>
   )
 }
diff --git a/src/components/ColorPicker.tsx b/src/components/ColorPicker.tsx
index 43427f8..db4f65a 100644
--- a/src/components/ColorPicker.tsx
+++ b/src/components/ColorPicker.tsx
@@ -1,17 +1,40 @@
-import React from "react";
-import { HexColorPicker } from "react-colorful";
+import React from 'react'
+import { HexAlphaColorPicker, HexColorInput } from 'react-colorful'
+import { useTheme } from '../contexts/ThemeContext'
 
 interface ColorPickerProps {
-  color: string;
-  onChange: (color: string) => void;
+  color: string
+  onChange: (color: string) => void
 }
 
 const ColorPicker: React.FC<ColorPickerProps> = ({ color, onChange }) => {
+  const { activeColor } = useTheme()
+  const handleInputChange = (value: string) => {
+    if (value.startsWith('#') && value.length > 6) {
+      onChange(value)
+    }
+  }
+
   return (
-    <div className="color-picker">
-      <HexColorPicker color={color} onChange={onChange} />
+    <div className="color-picker flex flex-col gap-2 items-center justify-center">
+      <HexAlphaColorPicker color={color} onChange={onChange} />
+
+      <div className="flex gap-2 items-center">
+        <h3 className="text-lg font-semibold first-letter:uppercase">
+          {activeColor}
+        </h3>
+        <div className="w-[100px]">
+          <HexColorInput
+            className="flex h-9 w-full rounded-md border border-input bg-transparent px-2 py-1 text-sm shadow-sm transition-colors text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+            color={color}
+            prefixed
+            alpha
+            onChange={handleInputChange}
+          />
+        </div>
+      </div>
     </div>
-  );
-};
+  )
+}
 
-export default ColorPicker;
+export default ColorPicker