diff --git a/src/components/editor/BadgeEditorModal.tsx b/src/components/editor/BadgeEditorModal.tsx
index dcbbb60..6e17418 100644
--- a/src/components/editor/BadgeEditorModal.tsx
+++ b/src/components/editor/BadgeEditorModal.tsx
@@ -108,7 +108,11 @@ const FONTS: Array<{ name: string; source: 'google' | 'system' }> = [
   { name: 'Impact', source: 'system' }
 ];
 
-const COLORS = ['#ffffff', '#000000', '#e2001a', '#ffde00', '#ffd100', '#003399', '#001a33', '#16a34a'];
+const COLORS: Array<[string, string]> = [
+  ['#000000', 'Čierna'],
+  ['#ffffff', 'Biela']
+];
+const HEX_RE = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i;
 
 const WEIGHTS = [
   ['400', 'Normal'],
@@ -207,6 +211,36 @@ const NumberSlider: React.FC<{
   </div>
 );
 
+// Vlastná farba ako HEX kód (#rrggbb); uloží sa až platná hodnota
+const HexColorInput: React.FC<{ value: string; onChange: (hex: string) => void }> = ({ value, onChange }) => {
+  const [text, setText] = useState(value);
+  // farba zmenená zvonka (čierna/biela, krok späť) → prepíše text v poli
+  const [prevValue, setPrevValue] = useState(value);
+  if (value !== prevValue) {
+    setPrevValue(value);
+    setText(value);
+  }
+  const valid = HEX_RE.test(text);
+  return (
+    <div className="flex items-center gap-1 flex-1 min-w-0">
+      <span className="w-6 h-6 rounded border border-black/15 shrink-0" style={{ backgroundColor: valid ? text : value }} />
+      <input
+        value={text}
+        onChange={(e) => {
+          const v = e.target.value.trim();
+          const hex = v.startsWith('#') ? v : `#${v}`;
+          setText(hex);
+          if (HEX_RE.test(hex)) onChange(hex.toLowerCase());
+        }}
+        placeholder="#e2001a"
+        maxLength={7}
+        className={`w-full min-w-0 text-[11px] font-mono uppercase border rounded-lg px-1.5 py-1 ${valid ? 'border-gray-300' : 'border-red-300 bg-red-50'}`}
+        title="Vlastná farba ako HEX kód, napr. #E2001A"
+      />
+    </div>
+  );
+};
+
 // ---------------------------------------------------------------------------
 // Editor
 // ---------------------------------------------------------------------------
@@ -750,12 +784,11 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
           <div className="border-l border-gray-100 min-h-0 overflow-y-auto p-4 space-y-5">
             {badge && (
               <>
-                <Section title="Pozadie a veľkosť">
+                <Section title="Pozadie">
                   <input ref={fileRef} type="file" accept=".svg,image/svg+xml,image/png,image/jpeg,image/webp" className="hidden" onChange={uploadBackground} />
                   <button type="button" onClick={() => fileRef.current?.click()} className="w-full flex items-center justify-center gap-1.5 text-[11px] font-bold text-gray-700 border border-dashed border-gray-300 hover:border-gray-400 hover:bg-gray-50 rounded-lg py-2">
                     <Upload className="w-3.5 h-3.5" /> Nahrať pozadie (SVG alebo PNG)
                   </button>
-                  <NumberSlider label="Predvolená šírka" value={badge.width || 110} min={60} max={200} suffix="px" onChange={(v) => commit({ ...badge, width: v }, false)} />
                 </Section>
 
                 <Section title={`Vrstvy (${badge.layersConfig.length})`}>
@@ -867,17 +900,18 @@ export const BadgeEditorModal: React.FC<BadgeEditorModalProps> = ({
                     <NumberSlider label="Veľkosť" value={layer.fontSize || 16} min={4} max={120} onChange={(v) => updateLayer(layer.id, { fontSize: v })} />
 
                     <div className="flex items-center gap-1.5">
-                      {COLORS.map((c) => (
+                      <span className="text-[10px] font-semibold text-gray-600 w-[70px]">Farba textu</span>
+                      {COLORS.map(([c, name]) => (
                         <button
                           key={c}
                           type="button"
                           onClick={() => updateLayer(layer.id, { fill: c })}
-                          className={`w-5 h-5 rounded-full border ${layer.fill?.toLowerCase() === c ? 'ring-2 ring-sky-400 border-white' : 'border-black/15'}`}
+                          className={`w-6 h-6 rounded-full border ${layer.fill?.toLowerCase() === c ? 'ring-2 ring-sky-400 border-white' : 'border-black/20'}`}
                           style={{ backgroundColor: c }}
-                          title={c}
+                          title={name}
                         />
                       ))}
-                      <input type="color" value={layer.fill || '#ffffff'} onChange={(e) => updateLayer(layer.id, { fill: e.target.value })} className="w-6 h-6 rounded cursor-pointer border border-gray-300 p-0" title="Vlastná farba" />
+                      <HexColorInput key={layer.id} value={layer.fill || '#ffffff'} onChange={(fill) => updateLayer(layer.id, { fill })} />
                     </div>
 
                     <div className="grid grid-cols-3 gap-1 bg-gray-100 p-0.5 rounded-lg">