diff --git a/worklenz-frontend/public/locales/alb/phases-drawer.json b/worklenz-frontend/public/locales/alb/phases-drawer.json
index cccda7d2..23816727 100644
--- a/worklenz-frontend/public/locales/alb/phases-drawer.json
+++ b/worklenz-frontend/public/locales/alb/phases-drawer.json
@@ -1,18 +1,19 @@
 {
   "configurePhases": "Konfiguro Fazat",
   "phaseLabel": "Etiketa e Fazës",
-  "enterPhaseName": "Vendosni një emër për etiketën e fazës",
+  "enterPhaseName": "Shkruani emrin e fazës",
   "addOption": "Shto Opsion",
-  "phaseOptions": "Opsionet e Fazës:",
+  "phaseOptions": "Opsionet e Fazës",
   "dragToReorderPhases": "Zvarrit fazat për t'i rirenditur. Çdo fazë mund të ketë një ngjyrë të ndryshme.",
   "enterNewPhaseName": "Shkruani emrin e fazës së re...",
   "addPhase": "Shto Fazë",
-  "noPhasesFound": "Nuk u gjetën faza. Krijoni fazën tuaj të parë më sipër.",
+  "noPhasesFound": "Nuk u gjetën faza",
   "deletePhase": "Fshi Fazën",
   "deletePhaseConfirm": "Jeni të sigurt që doni të fshini këtë fazë? Ky veprim nuk mund të zhbëhet.",
   "rename": "Riemëro",
   "delete": "Fshi",
-  "enterPhaseName": "Shkruani emrin e fazës",
+  "create": "Krijo",
+  "cancel": "Anulo",
   "selectColor": "Zgjidh ngjyrën",
   "managePhases": "Menaxho Fazat",
   "close": "Mbyll"
diff --git a/worklenz-frontend/public/locales/de/phases-drawer.json b/worklenz-frontend/public/locales/de/phases-drawer.json
index c9e41e09..4a143c7f 100644
--- a/worklenz-frontend/public/locales/de/phases-drawer.json
+++ b/worklenz-frontend/public/locales/de/phases-drawer.json
@@ -1,18 +1,19 @@
 {
   "configurePhases": "Phasen konfigurieren",
   "phaseLabel": "Phasenbezeichnung",
-  "enterPhaseName": "Namen für Phasenbezeichnung eingeben",
+  "enterPhaseName": "Phasennamen eingeben",
   "addOption": "Option hinzufügen",
-  "phaseOptions": "Phasenoptionen:",
+  "phaseOptions": "Phasenoptionen",
   "dragToReorderPhases": "Ziehen Sie Phasen, um sie neu zu ordnen. Jede Phase kann eine andere Farbe haben.",
   "enterNewPhaseName": "Neuen Phasennamen eingeben...",
   "addPhase": "Phase hinzufügen",
-  "noPhasesFound": "Keine Phasen gefunden. Erstellen Sie Ihre erste Phase oben.",
+  "noPhasesFound": "Keine Phasen gefunden",
   "deletePhase": "Phase löschen",
   "deletePhaseConfirm": "Sind Sie sicher, dass Sie diese Phase löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
   "rename": "Umbenennen",
   "delete": "Löschen",
-  "enterPhaseName": "Phasennamen eingeben",
+  "create": "Erstellen",
+  "cancel": "Abbrechen",
   "selectColor": "Farbe auswählen",
   "managePhases": "Phasen verwalten",
   "close": "Schließen"
diff --git a/worklenz-frontend/public/locales/en/phases-drawer.json b/worklenz-frontend/public/locales/en/phases-drawer.json
index 10ad78a4..7791a08b 100644
--- a/worklenz-frontend/public/locales/en/phases-drawer.json
+++ b/worklenz-frontend/public/locales/en/phases-drawer.json
@@ -1,18 +1,19 @@
 {
   "configurePhases": "Configure Phases",
   "phaseLabel": "Phase Label",
-  "enterPhaseName": "Enter a name for phase label",
+  "enterPhaseName": "Enter phase name",
   "addOption": "Add Option",
-  "phaseOptions": "Phase Options:",
+  "phaseOptions": "Phase Options",
   "dragToReorderPhases": "Drag phases to reorder them. Each phase can have a different color.",
   "enterNewPhaseName": "Enter new phase name...",
   "addPhase": "Add Phase",
-  "noPhasesFound": "No phases found. Create your first phase above.",
+  "noPhasesFound": "No phases found",
   "deletePhase": "Delete Phase",
   "deletePhaseConfirm": "Are you sure you want to delete this phase? This action cannot be undone.",
   "rename": "Rename",
   "delete": "Delete",
-  "enterPhaseName": "Enter phase name",
+  "create": "Create",
+  "cancel": "Cancel",
   "selectColor": "Select color",
   "managePhases": "Manage Phases",
   "close": "Close"
diff --git a/worklenz-frontend/public/locales/es/phases-drawer.json b/worklenz-frontend/public/locales/es/phases-drawer.json
index e961b068..abb6ee81 100644
--- a/worklenz-frontend/public/locales/es/phases-drawer.json
+++ b/worklenz-frontend/public/locales/es/phases-drawer.json
@@ -1,18 +1,19 @@
 {
   "configurePhases": "Configurar fases",
   "phaseLabel": "Etiqueta de fase",
-  "enterPhaseName": "Ingrese un nombre para la etiqueta de fase",
+  "enterPhaseName": "Introducir nombre de la fase",
   "addOption": "Agregar opción",
-  "phaseOptions": "Opciones de fase:",
+  "phaseOptions": "Opciones de fase",
   "dragToReorderPhases": "Arrastra las fases para reordenarlas. Cada fase puede tener un color diferente.",
   "enterNewPhaseName": "Introducir nuevo nombre de fase...",
   "addPhase": "Añadir Fase",
-  "noPhasesFound": "No se encontraron fases. Crea tu primera fase arriba.",
+  "noPhasesFound": "No se encontraron fases",
   "deletePhase": "Eliminar Fase",
   "deletePhaseConfirm": "¿Estás seguro de que quieres eliminar esta fase? Esta acción no se puede deshacer.",
   "rename": "Renombrar",
   "delete": "Eliminar",
-  "enterPhaseName": "Introducir nombre de la fase",
+  "create": "Crear",
+  "cancel": "Cancelar",
   "selectColor": "Seleccionar color",
   "managePhases": "Gestionar Fases",
   "close": "Cerrar"
diff --git a/worklenz-frontend/public/locales/pt/phases-drawer.json b/worklenz-frontend/public/locales/pt/phases-drawer.json
index 080b13df..b0ca7c51 100644
--- a/worklenz-frontend/public/locales/pt/phases-drawer.json
+++ b/worklenz-frontend/public/locales/pt/phases-drawer.json
@@ -1,18 +1,19 @@
 {
   "configurePhases": "Configurar fases",
   "phaseLabel": "Etiqueta de fase",
-  "enterPhaseName": "Digite um nome para o rótulo da fase",
+  "enterPhaseName": "Digite o nome da fase",
   "addOption": "Adicionar Opção",
-  "phaseOptions": "Opções de Fase:",
+  "phaseOptions": "Opções de Fase",
   "dragToReorderPhases": "Arraste as fases para reordená-las. Cada fase pode ter uma cor diferente.",
   "enterNewPhaseName": "Digite o novo nome da fase...",
   "addPhase": "Adicionar Fase",
-  "noPhasesFound": "Nenhuma fase encontrada. Crie sua primeira fase acima.",
+  "noPhasesFound": "Nenhuma fase encontrada",
   "deletePhase": "Excluir Fase",
   "deletePhaseConfirm": "Tem certeza de que deseja excluir esta fase? Esta ação não pode ser desfeita.",
   "rename": "Renomear",
   "delete": "Excluir",
-  "enterPhaseName": "Digite o nome da fase",
+  "create": "Criar",
+  "cancel": "Cancelar",
   "selectColor": "Selecionar cor",
   "managePhases": "Gerenciar Fases",
   "close": "Fechar"
diff --git a/worklenz-frontend/public/locales/zh/phases-drawer.json b/worklenz-frontend/public/locales/zh/phases-drawer.json
index 24d21b38..8f55e527 100644
--- a/worklenz-frontend/public/locales/zh/phases-drawer.json
+++ b/worklenz-frontend/public/locales/zh/phases-drawer.json
@@ -1,18 +1,19 @@
 {
     "configurePhases": "配置阶段",
     "phaseLabel": "阶段标签",
-    "enterPhaseName": "输入阶段标签名称",
+    "enterPhaseName": "输入阶段名称",
     "addOption": "添加选项",
-    "phaseOptions": "阶段选项：",
+    "phaseOptions": "阶段选项",
     "dragToReorderPhases": "拖拽阶段以重新排序。每个阶段可以有不同的颜色。",
     "enterNewPhaseName": "输入新阶段名称...",
     "addPhase": "添加阶段",
-    "noPhasesFound": "未找到阶段。请在上面创建您的第一个阶段。",
+    "noPhasesFound": "未找到阶段",
     "deletePhase": "删除阶段",
     "deletePhaseConfirm": "您确定要删除此阶段吗？此操作无法撤销。",
     "rename": "重命名",
     "delete": "删除",
-    "enterPhaseName": "输入阶段名称",
+    "create": "创建",
+    "cancel": "取消",
     "selectColor": "选择颜色",
     "managePhases": "管理阶段",
     "close": "关闭"
diff --git a/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx b/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
index 0e10d437..81a44378 100644
--- a/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
+++ b/worklenz-frontend/src/components/task-management/ManagePhaseModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
-import { Modal, Form, Input, Button, Space, Divider, Typography, Flex, ColorPicker } from 'antd';
-import { PlusOutlined, HolderOutlined } from '@ant-design/icons';
+import { Modal, Form, Input, Button, Space, Divider, Typography, Flex, ColorPicker, Tooltip } from 'antd';
+import { PlusOutlined, HolderOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { DndContext, DragEndEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
@@ -41,7 +41,7 @@ interface PhaseItemProps {
   isDarkMode: boolean;
 }
 
-// Sortable Phase Item Component
+// Sortable Phase Item Component (compact with hover actions)
 const SortablePhaseItem: React.FC<PhaseItemProps & { id: string }> = ({
   id,
   phase,
@@ -50,9 +50,11 @@ const SortablePhaseItem: React.FC<PhaseItemProps & { id: string }> = ({
   onColorChange,
   isDarkMode,
 }) => {
+  const { t } = useTranslation('phases-drawer');
   const [isEditing, setIsEditing] = useState(false);
   const [editName, setEditName] = useState(phase.name || '');
   const [color, setColor] = useState(phase.color_code || PhaseColorCodes[0]);
+  const [isHovered, setIsHovered] = useState(false);
   const inputRef = useRef<any>(null);
 
   const {
@@ -90,6 +92,10 @@ const SortablePhaseItem: React.FC<PhaseItemProps & { id: string }> = ({
     }
   }, [handleSave, handleCancel]);
 
+  const handleClick = useCallback(() => {
+    setIsEditing(true);
+  }, []);
+
   const handleColorChangeComplete = useCallback(() => {
     if (color !== phase.color_code) {
       onColorChange(id, color);
@@ -107,33 +113,52 @@ const SortablePhaseItem: React.FC<PhaseItemProps & { id: string }> = ({
     setColor(phase.color_code || PhaseColorCodes[0]);
   }, [phase.color_code]);
 
-    return (
+  return (
     <div
       ref={setNodeRef}
       style={style}
-      className={`p-3 rounded-md border transition-all duration-200 ${
+      className={`group relative py-1.5 px-2 rounded border transition-all duration-200 ${
         isDarkMode
-          ? 'bg-gray-800 border-gray-700 hover:bg-gray-750'
-          : 'bg-white border-gray-200 hover:bg-gray-50 shadow-sm'
-      }`}
+          ? 'bg-gray-700 border-gray-600 hover:bg-gray-600 hover:border-gray-500'
+          : 'bg-white border-gray-200 hover:bg-gray-50 hover:border-gray-300'
+      } ${isDragging ? 'shadow-lg opacity-50 rotate-2 scale-105' : 'shadow-sm hover:shadow-md'}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
     >
-      {/* Header Row - Drag Handle, Phase Name, Actions */}
-      <div className="flex items-center gap-2 mb-2">
+      <div className="flex items-center gap-2">
         {/* Drag Handle */}
         <div
           {...attributes}
           {...listeners}
-          className={`cursor-grab active:cursor-grabbing p-1 rounded transition-colors ${
+          className={`flex-shrink-0 cursor-grab active:cursor-grabbing p-1 rounded transition-all duration-200 ${
             isDarkMode 
-              ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-700' 
-              : 'text-gray-500 hover:text-gray-600 hover:bg-gray-100'
+              ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-600' 
+              : 'text-gray-400 hover:text-gray-600 hover:bg-gray-100'
           }`}
         >
-          <HolderOutlined />
+          <HolderOutlined className="text-sm" />
+        </div>
+
+        {/* Phase Color */}
+        <div className="flex-shrink-0 flex items-center gap-1">
+          <ColorPicker
+            value={color}
+            onChange={(value) => setColor(value.toHexString())}
+            onChangeComplete={handleColorChangeComplete}
+            size="small"
+            className="phase-color-picker"
+          />
+          <div 
+            className="w-2.5 h-2.5 rounded border shadow-sm"
+            style={{
+              backgroundColor: color,
+              borderColor: isDarkMode ? '#6b7280' : '#d1d5db',
+            }}
+          />
         </div>
 
         {/* Phase Name */}
-        <div className="flex-1">
+        <div className="flex-1 min-w-0">
           {isEditing ? (
             <Input
               ref={inputRef}
@@ -141,66 +166,57 @@ const SortablePhaseItem: React.FC<PhaseItemProps & { id: string }> = ({
               onChange={(e) => setEditName(e.target.value)}
               onBlur={handleSave}
               onKeyDown={handleKeyDown}
-              className="font-medium"
-              placeholder="Enter phase name"
+              className={`font-medium text-xs border-0 px-1 py-1 shadow-none ${
+                isDarkMode 
+                  ? 'bg-transparent text-gray-200 placeholder-gray-400' 
+                  : 'bg-transparent text-gray-900 placeholder-gray-500'
+              }`}
+              placeholder={t('enterPhaseName')}
             />
           ) : (
             <Text
-              className={`text-sm font-medium cursor-pointer transition-colors ${
-                isDarkMode ? 'text-gray-100 hover:text-white' : 'text-gray-900 hover:text-gray-700'
+              className={`text-xs font-medium cursor-pointer transition-colors select-none ${
+                isDarkMode ? 'text-gray-200 hover:text-gray-100' : 'text-gray-800 hover:text-gray-900'
               }`}
-              onClick={() => setIsEditing(true)}
+              onClick={handleClick}
+              title={t('rename')}
             >
               {phase.name}
             </Text>
           )}
         </div>
 
-        {/* Actions */}
-        <Space size={4}>
-          <Button
-            type="text"
-            size="small"
-            onClick={() => setIsEditing(true)}
-            className={`text-xs ${isDarkMode ? 'text-gray-400 hover:text-gray-300' : 'text-gray-500 hover:text-gray-600'} hover:bg-transparent`}
-          >
-            Rename
-          </Button>
-          <Button
-            type="text"
-            size="small"
-            danger
-            onClick={() => onDelete(id)}
-            className="text-xs text-red-500 hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20"
-          >
-            Delete
-          </Button>
-        </Space>
-      </div>
-
-      {/* Color Row */}
-      <div className="flex items-center gap-1.5">
-        <Text 
-          className={`text-xs font-medium ${
-            isDarkMode ? 'text-gray-400' : 'text-gray-600'
-          }`}
-        >
-          Color:
-        </Text>
-        <ColorPicker
-          value={color}
-          onChange={(value) => setColor(value.toHexString())}
-          onChangeComplete={handleColorChangeComplete}
-          size="small"
-          className="phase-color-picker"
-        />
-        <div 
-          className="w-3 h-3 rounded-full border ml-1 transition-all duration-200"
-          style={{
-            backgroundColor: color,
-            borderColor: isDarkMode ? '#374151' : '#e5e7eb',
-          }}
-        />
+        {/* Hover Actions */}
+        <div className={`flex items-center gap-1 transition-all duration-200 ${
+          isHovered || isEditing ? 'opacity-100' : 'opacity-0'
+        }`}>
+          <Tooltip title={t('rename')}>
+            <Button
+              type="text"
+              size="small"
+              icon={<EditOutlined />}
+              onClick={() => setIsEditing(true)}
+              className={`h-6 w-6 flex items-center justify-center transition-all duration-200 ${
+                isDarkMode 
+                  ? 'text-gray-400 hover:text-gray-300 hover:bg-gray-600' 
+                  : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'
+              }`}
+            />
+          </Tooltip>
+          <Tooltip title={t('delete')}>
+            <Button
+              type="text"
+              size="small"
+              icon={<DeleteOutlined />}
+              onClick={() => onDelete(id)}
+              className={`h-6 w-6 flex items-center justify-center transition-all duration-200 ${
+                isDarkMode 
+                  ? 'text-red-400 hover:text-red-300 hover:bg-red-800' 
+                  : 'text-red-500 hover:text-red-600 hover:bg-red-50'
+              }`}
+            />
+          </Tooltip>
+        </div>
       </div>
     </div>
   );
@@ -224,6 +240,8 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
   const [initialPhaseName, setInitialPhaseName] = useState<string>(project?.phase_label || '');
   const [sorting, setSorting] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  const [newPhaseName, setNewPhaseName] = useState('');
+  const [showAddForm, setShowAddForm] = useState(false);
 
   const finalProjectId = projectId || currentProjectId;
 
@@ -285,17 +303,28 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
     }
   }, [finalProjectId, phaseList, dispatch, refreshTasks]);
 
-  const handleAddPhase = useCallback(async () => {
-    if (!finalProjectId) return;
+  const handleCreatePhase = useCallback(async () => {
+    if (!newPhaseName.trim() || !finalProjectId) return;
 
     try {
       await dispatch(addPhaseOption({ projectId: finalProjectId }));
       await dispatch(fetchPhasesByProjectId(finalProjectId));
       await refreshTasks();
+      setNewPhaseName('');
+      setShowAddForm(false);
     } catch (error) {
       console.error('Error adding phase:', error);
     }
-  }, [finalProjectId, dispatch, refreshTasks]);
+  }, [finalProjectId, dispatch, refreshTasks, newPhaseName]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleCreatePhase();
+    } else if (e.key === 'Escape') {
+      setNewPhaseName('');
+      setShowAddForm(false);
+    }
+  }, [handleCreatePhase]);
 
   const handleRenamePhase = useCallback(async (id: string, name: string) => {
     if (!finalProjectId) return;
@@ -326,8 +355,11 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
     if (!finalProjectId) return;
     
     AntModal.confirm({
-      title: 'Delete Phase',
-      content: 'Are you sure you want to delete this phase? This action cannot be undone.',
+      title: t('deletePhase'),
+      content: t('deletePhaseConfirm'),
+      okText: t('delete'),
+      cancelText: t('cancel'),
+      okButtonProps: { danger: true },
       onOk: async () => {
         try {
           const response = await dispatch(
@@ -343,7 +375,7 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
         }
       },
     });
-  }, [finalProjectId, dispatch, refreshTasks]);
+  }, [finalProjectId, dispatch, refreshTasks, t]);
 
   const handleColorChange = useCallback(async (id: string, color: string) => {
     if (!finalProjectId) return;
@@ -393,39 +425,52 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
   return (
     <Modal
       title={
-        <Title level={4} className={isDarkMode ? 'text-gray-200' : 'text-gray-800'}>
+        <Title level={4} className={`m-0 font-semibold ${
+          isDarkMode ? 'text-gray-100' : 'text-gray-800'
+        }`}>
           {t('configurePhases')}
         </Title>
       }
       open={open}
       onCancel={handleClose}
-      width={600}
+      width={720}
       style={{ top: 20 }}
-      bodyStyle={{
-        maxHeight: 'calc(100vh - 200px)',
-        overflowY: 'auto',
-        padding: '24px',
+      styles={{
+        body: {
+          maxHeight: 'calc(100vh - 200px)',
+          overflowY: 'auto',
+          padding: '16px',
+        },
       }}
       footer={
-        <Flex justify="flex-end">
-          <Button onClick={handleClose}>
-            Close
+        <div className={`flex justify-end pt-3 ${
+          isDarkMode ? 'border-gray-700' : 'border-gray-200'
+        }`}>
+          <Button 
+            onClick={handleClose}
+            className={`font-medium ${
+              isDarkMode 
+                ? 'text-gray-300 hover:text-gray-200 border-gray-600' 
+                : 'text-gray-600 hover:text-gray-800 border-gray-300'
+            }`}
+          >
+            {t('close')}
           </Button>
-        </Flex>
+        </div>
       }
-      className={isDarkMode ? 'dark-modal' : ''}
+      className={`${isDarkMode ? 'dark-modal' : ''} phase-manage-modal`}
       loading={loadingPhases || sorting}
     >
       <div className="space-y-4">
         {/* Phase Label Configuration */}
-        <div className={`p-3 rounded-md border ${
+        <div className={`p-3 rounded border transition-all duration-200 ${
           isDarkMode 
-            ? 'bg-gray-800/30 border-gray-700' 
-            : 'bg-blue-50/50 border-blue-200'
+            ? 'bg-gray-800 border-gray-700 text-gray-300' 
+            : 'bg-blue-50 border-blue-200 text-blue-700'
         }`}>
           <div className="space-y-2">
             <Text className={`text-xs font-medium ${
-              isDarkMode ? 'text-gray-300' : 'text-gray-700'
+              isDarkMode ? 'text-gray-300' : 'text-blue-700'
             }`}>
               {t('phaseLabel')}
             </Text>
@@ -441,76 +486,138 @@ const ManagePhaseModal: React.FC<ManagePhaseModalProps> = ({
           </div>
         </div>
 
-        <Divider className={isDarkMode ? 'border-gray-700' : 'border-gray-300'} />
-
-        {/* Phase Options */}
-        <div className="space-y-4">
-          <div className={`p-2.5 rounded-md ${
-            isDarkMode ? 'bg-gray-800/50' : 'bg-purple-50'
+        {/* Info Banner */}
+        <div className={`p-3 rounded border transition-all duration-200 ${
+          isDarkMode 
+            ? 'bg-gray-800 border-gray-700 text-gray-300' 
+            : 'bg-blue-50 border-blue-200 text-blue-700'
+        }`}>
+          <Text className={`text-xs font-medium ${
+            isDarkMode ? 'text-gray-300' : 'text-blue-700'
           }`}>
-            <Text 
-              type="secondary" 
-              className={`text-xs ${
-                isDarkMode ? 'text-gray-400' : 'text-purple-600'
-              }`}
-            >
-              🎨 Drag phases to reorder them. Each phase can have a custom color.
-            </Text>
-          </div>
+            🎨 Drag phases to reorder them. Click on a phase name to rename it. Each phase can have a custom color.
+          </Text>
+        </div>
 
-          {/* Add New Phase */}
-          <div className={`p-3 rounded-md border-2 border-dashed transition-colors ${
+        {/* Add New Phase Form */}
+        {showAddForm && (
+          <div className={`p-2 rounded border-2 border-dashed transition-all duration-200 ${
+            isDarkMode 
+              ? 'border-gray-600 bg-gray-700 hover:border-gray-500' 
+              : 'border-gray-300 bg-white hover:border-gray-400'
+          } shadow-sm`}>
+            <div className="flex gap-2">
+              <Input
+                placeholder={t('enterNewPhaseName')}
+                value={newPhaseName}
+                onChange={(e) => setNewPhaseName(e.target.value)}
+                onKeyDown={handleKeyDown}
+                className={`flex-1 ${
+                  isDarkMode 
+                    ? 'bg-gray-600 border-gray-500 text-gray-100 placeholder-gray-400' 
+                    : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500'
+                }`}
+                size="small"
+                autoFocus
+              />
+              <Button
+                type="primary"
+                onClick={handleCreatePhase}
+                disabled={!newPhaseName.trim()}
+                size="small"
+                className="text-xs"
+              >
+                {t('create')}
+              </Button>
+              <Button
+                onClick={() => {
+                  setNewPhaseName('');
+                  setShowAddForm(false);
+                }}
+                size="small"
+                className={`text-xs ${
+                  isDarkMode 
+                    ? 'text-gray-300 hover:text-gray-200 border-gray-600' 
+                    : 'text-gray-600 hover:text-gray-800 border-gray-300'
+                }`}
+              >
+                {t('cancel')}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Add Phase Button */}
+        {!showAddForm && (
+          <div className={`p-3 rounded border-2 border-dashed transition-colors ${
             isDarkMode 
               ? 'border-gray-600 bg-gray-800/50 hover:border-gray-500' 
               : 'border-gray-300 bg-gray-50/50 hover:border-gray-400'
           }`}>
-            <div className="flex gap-2">
-              <Text className={`text-xs font-medium flex-shrink-0 self-center ${
+            <div className="flex items-center justify-between">
+              <Text className={`text-xs font-medium ${
                 isDarkMode ? 'text-gray-300' : 'text-gray-700'
               }`}>
-                {t('phaseOptions')}:
+                {t('phaseOptions')}
               </Text>
               <Button 
                 type="primary" 
                 icon={<PlusOutlined />} 
-                onClick={handleAddPhase}
+                onClick={() => setShowAddForm(true)}
                 disabled={loadingPhases}
                 size="small"
-                className="ml-auto"
+                className="text-xs"
               >
                 {t('addOption')}
               </Button>
             </div>
           </div>
+        )}
 
-          {/* Phase List with Drag & Drop */}
-          <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
-            <SortableContext
-              items={phaseList.map(phase => phase.id)}
-              strategy={verticalListSortingStrategy}
-            >
-              <div className="space-y-2">
-                {phaseList.map((phase) => (
-                  <SortablePhaseItem
-                    key={phase.id}
-                    id={phase.id}
-                    phase={phase}
-                    onRename={handleRenamePhase}
-                    onDelete={handleDeletePhase}
-                    onColorChange={handleColorChange}
-                    isDarkMode={isDarkMode}
-                  />
-                ))}
-              </div>
-            </SortableContext>
-          </DndContext>
-
-          {phaseList.length === 0 && (
-            <div className={`text-center py-8 ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
-              <Text>No phases found. Add your first phase above.</Text>
+        {/* Phase List with Drag & Drop */}
+        <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
+          <SortableContext
+            items={phaseList.map(phase => phase.id)}
+            strategy={verticalListSortingStrategy}
+          >
+            <div className="space-y-1">
+              {phaseList.map((phase) => (
+                <SortablePhaseItem
+                  key={phase.id}
+                  id={phase.id}
+                  phase={phase}
+                  onRename={handleRenamePhase}
+                  onDelete={handleDeletePhase}
+                  onColorChange={handleColorChange}
+                  isDarkMode={isDarkMode}
+                />
+              ))}
             </div>
-          )}
-        </div>
+          </SortableContext>
+        </DndContext>
+
+        {phaseList.length === 0 && (
+          <div className={`text-center py-8 transition-colors ${
+            isDarkMode ? 'text-gray-400' : 'text-gray-500'
+          }`}>
+            <Text className="text-sm font-medium">
+              {t('noPhasesFound')}
+            </Text>
+            <br />
+            <Button
+              type="link"
+              size="small"
+              onClick={() => setShowAddForm(true)}
+              className={`text-xs mt-1 font-medium ${
+                isDarkMode 
+                  ? 'text-blue-400 hover:text-blue-300' 
+                  : 'text-blue-600 hover:text-blue-700'
+              }`}
+            >
+              {t('addOption')}
+            </Button>
+          </div>
+        )}
       </div>
     </Modal>
   );