From b18e7364d316948fb95a1c1fde44548e6db0954a Mon Sep 17 00:00:00 2001
From: Chris Veleris <chrisveleris@gmail.com>
Date: Mon, 7 Jul 2025 07:06:02 +0300
Subject: [PATCH] Fix all modal styles

---
 frontend/Layout.tsx                          |  10 +
 frontend/components/Area/AreaModal.tsx       | 175 ++++---
 frontend/components/Areas.tsx                |  23 +-
 frontend/components/Note/NoteModal.tsx       |   6 +-
 frontend/components/Project/ProjectModal.tsx | 509 +++++++++++++------
 frontend/components/Projects.tsx             |  10 +
 frontend/components/Tag/TagModal.tsx         | 115 +++--
 frontend/components/Tags.tsx                 |  69 ++-
 8 files changed, 629 insertions(+), 288 deletions(-)

diff --git a/frontend/Layout.tsx b/frontend/Layout.tsx
index fa20bcd..3197bbd 100644
--- a/frontend/Layout.tsx
+++ b/frontend/Layout.tsx
@@ -538,6 +538,16 @@ const Layout: React.FC<LayoutProps> = ({
           isOpen={isProjectModalOpen}
           onClose={closeProjectModal}
           onSave={handleSaveProject}
+          onDelete={async (projectId) => {
+            try {
+              const { deleteProject } = await import('./utils/projectsService');
+              await deleteProject(projectId);
+              loadProjects();
+              closeProjectModal();
+            } catch (error) {
+              console.error('Error deleting project:', error);
+            }
+          }}
           areas={areas}
         />
       )}
diff --git a/frontend/components/Area/AreaModal.tsx b/frontend/components/Area/AreaModal.tsx
index 72b264f..8ecafbd 100644
--- a/frontend/components/Area/AreaModal.tsx
+++ b/frontend/components/Area/AreaModal.tsx
@@ -2,15 +2,17 @@ import React, { useState, useEffect, useRef } from 'react';
 import { Area } from '../../entities/Area';
 import { useToast } from '../Shared/ToastContext';
 import { useTranslation } from 'react-i18next';
+import { TrashIcon } from '@heroicons/react/24/outline';
 
 interface AreaModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onSave: (areaData: Partial<Area>) => Promise<void>; 
+  onSave: (areaData: Partial<Area>) => Promise<void>;
+  onDelete?: (areaId: number) => Promise<void>;
   area?: Area | null;
 }
 
-const AreaModal: React.FC<AreaModalProps> = ({ isOpen, onClose, area, onSave }) => {
+const AreaModal: React.FC<AreaModalProps> = ({ isOpen, onClose, area, onSave, onDelete }) => {
   const { t } = useTranslation();
   const [formData, setFormData] = useState<Area>({
     id: area?.id || 0,
@@ -108,80 +110,117 @@ const AreaModal: React.FC<AreaModalProps> = ({ isOpen, onClose, area, onSave })
     }, 300);
   };
 
+  const handleDeleteArea = async () => {
+    if (formData.id && formData.id !== 0 && onDelete) {
+      try {
+        await onDelete(formData.id);
+        showSuccessToast(t('success.areaDeleted', 'Area deleted successfully!'));
+        handleClose();
+      } catch (err) {
+        setError((err as Error).message);
+        showErrorToast(t('errors.failedToDeleteArea', 'Failed to delete area.'));
+      }
+    }
+  };
+
   if (!isOpen) return null;
 
   return (
     <div
-      className={`fixed top-16 left-0 right-0 bottom-0 flex items-start sm:items-center justify-center bg-gray-900 bg-opacity-80 z-40 transition-opacity duration-300 ${isClosing ? 'opacity-0' : 'opacity-100'}`}
+      className={`fixed top-16 left-0 right-0 bottom-0 bg-gray-900 bg-opacity-80 z-40 transition-opacity duration-300 overflow-hidden sm:overflow-y-auto ${
+        isClosing ? "opacity-0" : "opacity-100"
+      }`}
     >
-      <div
-        ref={modalRef}
-        className={`bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-md overflow-hidden transform transition-transform duration-300 ${isClosing ? 'scale-95' : 'scale-100'} h-screen sm:h-auto flex flex-col`}
-        style={{
-          maxHeight: 'calc(100vh - 4rem)',
-        }}
-      >
-        <form className="flex flex-col flex-1">
-          <fieldset className="flex flex-col flex-1">
-            <div className="p-4 space-y-3 flex-1 text-sm overflow-y-auto">
-              {/* Area Name */}
-              <div className="py-4">
-                <input
-                  type="text"
-                  id="areaName"
-                  name="name"
-                  value={formData.name}
-                  onChange={handleChange}
-                  required
-                  className="block w-full text-xl font-semibold dark:bg-gray-800 text-black dark:text-white border-b-2 border-gray-200 dark:border-gray-900 focus:outline-none shadow-sm py-2"
-                  placeholder={t('forms.areaNamePlaceholder')}
-                />
+      <div className="h-full flex items-center justify-center sm:px-4 sm:py-4">
+        <div
+          ref={modalRef}
+          className={`bg-white dark:bg-gray-800 border-0 sm:border sm:border-gray-200 sm:dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-md transform transition-transform duration-300 ${
+            isClosing ? "scale-95" : "scale-100"
+          } h-full sm:h-auto sm:my-4`}
+        >
+          <div className="flex flex-col h-full sm:min-h-[400px] sm:max-h-[90vh]">
+            {/* Main Form Section */}
+            <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
+              <div className="flex-1 relative">
+                <div className="absolute inset-0 overflow-y-auto overflow-x-hidden" style={{ WebkitOverflowScrolling: 'touch' }}>
+                  <form className="h-full">
+                    <fieldset className="h-full flex flex-col">
+                      {/* Area Title Section - Always Visible */}
+                      <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
+                        <input
+                          type="text"
+                          id="areaName"
+                          name="name"
+                          value={formData.name}
+                          onChange={handleChange}
+                          required
+                          className="block w-full text-xl font-semibold bg-transparent text-black dark:text-white border-none focus:outline-none shadow-sm py-2"
+                          placeholder={t('forms.areaNamePlaceholder')}
+                        />
+                      </div>
+
+                      {/* Description Section - Always Visible */}
+                      <div className="flex-1 pb-4 mb-4 px-4">
+                        <textarea
+                          id="areaDescription"
+                          name="description"
+                          value={formData.description}
+                          onChange={handleChange}
+                          className="block w-full h-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out resize-none"
+                          placeholder={t('forms.areaDescriptionPlaceholder')}
+                          style={{ minHeight: '150px' }}
+                        />
+                      </div>
+
+                      {/* Error Message */}
+                      {error && <div className="text-red-500 px-4 mb-4">{error}</div>}
+                    </fieldset>
+                  </form>
+                </div>
               </div>
-
-              {/* Area Description */}
-              <div className="pb-3">
-                <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {t('forms.areaDescription')}
-                </label>
-                <textarea
-                  id="areaDescription"
-                  name="description"
-                  value={formData.description}
-                  onChange={handleChange}
-                  rows={4}
-                  className="block w-full rounded-md shadow-sm p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
-                  placeholder={t('forms.areaDescriptionPlaceholder')}
-                />
+              
+              {/* Action Buttons - Below border with custom layout */}
+              <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+                {/* Left side: Delete and Cancel */}
+                <div className="flex items-center space-x-3">
+                  {(area && area.id && area.id !== 0 && onDelete) && (
+                    <button
+                      type="button"
+                      onClick={handleDeleteArea}
+                      className="p-2 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none transition duration-150 ease-in-out"
+                      title={t('common.delete', 'Delete')}
+                    >
+                      <TrashIcon className="h-4 w-4" />
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    onClick={handleClose}
+                    className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none transition duration-150 ease-in-out text-sm"
+                  >
+                    {t('common.cancel')}
+                  </button>
+                </div>
+                
+                {/* Right side: Save */}
+                <button
+                  type="button"
+                  onClick={handleSubmit}
+                  disabled={isSubmitting}
+                  className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out text-sm ${
+                    isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
+                  }`}
+                >
+                  {isSubmitting
+                    ? t('modals.submitting')
+                    : formData.id && formData.id !== 0
+                    ? t('modals.updateArea')
+                    : t('modals.createArea')}
+                </button>
               </div>
-
-              {/* Error Message */}
-              {error && <div className="text-red-500">{error}</div>}
             </div>
-
-            {/* Action Buttons */}
-            <div className="p-3 flex-shrink-0 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-2">
-              <button
-                type="button"
-                onClick={handleClose}
-                className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none transition duration-150 ease-in-out"
-              >
-                {t('common.cancel')}
-              </button>
-              <button
-                type="button"
-                onClick={handleSubmit}
-                disabled={isSubmitting}
-                className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out ${isSubmitting ? 'opacity-50 cursor-not-allowed' : ''}`}
-              >
-                {isSubmitting
-                  ? t('modals.submitting')
-                  : formData.id && formData.id !== 0
-                  ? t('modals.updateArea')
-                  : t('modals.createArea')}
-              </button>
-            </div>
-          </fieldset>
-        </form>
+          </div>
+        </div>
       </div>
     </div>
   );
diff --git a/frontend/components/Areas.tsx b/frontend/components/Areas.tsx
index c1e2284..cc59f54 100644
--- a/frontend/components/Areas.tsx
+++ b/frontend/components/Areas.tsx
@@ -20,6 +20,7 @@ const Areas: React.FC = () => {
   const [selectedArea, setSelectedArea] = useState<Area | null>(null);
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState<boolean>(false);
   const [areaToDelete, setAreaToDelete] = useState<Area | null>(null);
+  const [hoveredAreaId, setHoveredAreaId] = useState<number | null>(null);
 
   useEffect(() => {
     const loadAreas = async () => {
@@ -121,6 +122,8 @@ const Areas: React.FC = () => {
               <li
                 key={area.id}
                 className="bg-white dark:bg-gray-900 shadow rounded-lg p-4 flex justify-between items-center"
+                onMouseEnter={() => setHoveredAreaId(area.id || null)}
+                onMouseLeave={() => setHoveredAreaId(null)}
               >
                 {/* Area Content */}
                 <div className="flex-grow overflow-hidden pr-4">
@@ -141,7 +144,9 @@ const Areas: React.FC = () => {
                 <div className="flex space-x-2">
                   <button
                     onClick={() => handleEditArea(area)}
-                    className="text-gray-500 hover:text-blue-700 dark:hover:text-blue-300 focus:outline-none"
+                    className={`text-gray-500 hover:text-blue-700 dark:hover:text-blue-300 focus:outline-none transition-opacity ${
+                      hoveredAreaId === area.id ? 'opacity-100' : 'opacity-0'
+                    }`}
                     aria-label={t('areas.editAreaAriaLabel', { name: area.name })}
                     title={t('areas.editAreaTitle', { name: area.name })}
                   >
@@ -149,7 +154,9 @@ const Areas: React.FC = () => {
                   </button>
                   <button
                     onClick={() => openConfirmDialog(area)}
-                    className="text-gray-500 hover:text-red-700 dark:hover:text-red-300 focus:outline-none"
+                    className={`text-gray-500 hover:text-red-700 dark:hover:text-red-300 focus:outline-none transition-opacity ${
+                      hoveredAreaId === area.id ? 'opacity-100' : 'opacity-0'
+                    }`}
                     aria-label={t('areas.deleteAreaAriaLabel', { name: area.name })}
                     title={t('areas.deleteAreaTitle', { name: area.name })}
                   >
@@ -167,6 +174,18 @@ const Areas: React.FC = () => {
             isOpen={isAreaModalOpen}
             onClose={() => setIsAreaModalOpen(false)}
             onSave={handleSaveArea}
+            onDelete={async (areaId) => {
+              try {
+                await deleteArea(areaId);
+                const updatedAreas = await fetchAreas();
+                setAreas(updatedAreas);
+                setIsAreaModalOpen(false);
+                setSelectedArea(null);
+              } catch (error) {
+                console.error('Error deleting area:', error);
+                setError(true);
+              }
+            }}
             area={selectedArea}
           />
         )}
diff --git a/frontend/components/Note/NoteModal.tsx b/frontend/components/Note/NoteModal.tsx
index 386242c..a613138 100644
--- a/frontend/components/Note/NoteModal.tsx
+++ b/frontend/components/Note/NoteModal.tsx
@@ -22,7 +22,7 @@ interface NoteModalProps {
 const NoteModal: React.FC<NoteModalProps> = ({ isOpen, onClose, note, onSave, onDelete, projects = [], onCreateProject }) => {
   const { t } = useTranslation();
   const [formData, setFormData] = useState<Note>({
-    id: note?.id || 0,
+    id: note?.id,
     title: note?.title || '',
     content: note?.content || '',
     tags: note?.tags || [],
@@ -76,7 +76,7 @@ const NoteModal: React.FC<NoteModalProps> = ({ isOpen, onClose, note, onSave, on
       // Initialize form data
       const tagNames = note?.tags?.map((tag) => tag.name) || [];
       setFormData({
-        id: note?.id || 0,
+        id: note?.id,
         title: note?.title || '',
         content: note?.content || '',
         tags: note?.tags || [],
@@ -473,7 +473,7 @@ const NoteModal: React.FC<NoteModalProps> = ({ isOpen, onClose, note, onSave, on
                 <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
                   {/* Left side: Delete and Cancel */}
                   <div className="flex items-center space-x-3">
-                    {formData.id && formData.id !== 0 && (
+                    {(note && note.id && onDelete) && (
                       <button
                         type="button"
                         onClick={handleDeleteNote}
diff --git a/frontend/components/Project/ProjectModal.tsx b/frontend/components/Project/ProjectModal.tsx
index a21f3f4..83dfbf1 100644
--- a/frontend/components/Project/ProjectModal.tsx
+++ b/frontend/components/Project/ProjectModal.tsx
@@ -9,6 +9,7 @@ import { PriorityType } from "../../entities/Task";
 import Switch from "../Shared/Switch";
 import { useStore } from "../../store/useStore";
 import { useTranslation } from "react-i18next";
+import { TagIcon, FolderIcon, Cog6ToothIcon, TrashIcon, CameraIcon, CalendarIcon, ExclamationTriangleIcon, PowerIcon } from '@heroicons/react/24/outline';
 
 interface ProjectModalProps {
   isOpen: boolean;
@@ -55,6 +56,16 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
   const [isClosing, setIsClosing] = useState(false);
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  
+  // Collapsible sections state
+  const [expandedSections, setExpandedSections] = useState({
+    tags: false,
+    area: false,
+    image: false,
+    priority: false,
+    dueDate: false,
+    active: false,
+  });
 
   const { showSuccessToast, showErrorToast } = useToast();
   const { t } = useTranslation();
@@ -278,6 +289,30 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
     }));
   };
 
+  const toggleSection = useCallback((section: keyof typeof expandedSections) => {
+    setExpandedSections(prev => {
+      const newExpanded = {
+        ...prev,
+        [section]: !prev[section]
+      };
+      
+      // Auto-scroll to show the expanded section
+      if (newExpanded[section]) {
+        setTimeout(() => {
+          const scrollContainer = document.querySelector('.absolute.inset-0.overflow-y-auto');
+          if (scrollContainer) {
+            scrollContainer.scrollTo({
+              top: scrollContainer.scrollHeight,
+              behavior: 'smooth'
+            });
+          }
+        }, 100); // Small delay to ensure DOM is updated
+      }
+      
+      return newExpanded;
+    });
+  }, []);
+
 
   if (!isOpen) return null;
 
@@ -290,198 +325,334 @@ const ProjectModal: React.FC<ProjectModalProps> = ({
       >
         <div
           ref={modalRef}
-          className={`bg-white dark:bg-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-2xl overflow-hidden transform transition-transform duration-300 ${
+          className={`bg-white dark:bg-gray-800 border-0 sm:border sm:border-gray-200 sm:dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-2xl transform transition-transform duration-300 ${
             isClosing ? "scale-95" : "scale-100"
-          } flex flex-col`}
-          style={{
-            height: "calc(100vh - 4rem)",
-            maxHeight: "90vh",
-          }}
+          } h-full sm:h-auto sm:my-4`}
         >
-          <form className="flex flex-col h-full">
-            <fieldset className="flex flex-col h-full">
-              <div className="p-4 space-y-3 flex-1 text-sm overflow-y-auto min-h-0">
-                <div className="py-4">
-                  <input
-                    type="text"
-                    id="projectName"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    required
-                    className={`block w-full text-xl font-semibold dark:bg-gray-800 text-black dark:text-white border-b-2 ${
-                      error ? 'border-red-500' : 'border-gray-200 dark:border-gray-900'
-                    } focus:outline-none shadow-sm py-2`}
-                    placeholder={t('project.name', 'Enter project name')}
-                  />
-                  {error && (
-                    <div className="mt-2 text-red-500 text-sm font-medium">
-                      {error}
-                    </div>
-                  )}
-                </div>
-
-                <div className="pb-3">
-                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    {t('forms.description', 'Description')}
-                  </label>
-                  <textarea
-                    id="projectDescription"
-                    name="description"
-                    rows={4}
-                    value={formData.description || ""}
-                    onChange={handleChange}
-                    className="block w-full rounded-md shadow-sm p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
-                    placeholder={t('forms.areaDescriptionPlaceholder', 'Enter project description (optional)')}
-                  ></textarea>
-                </div>
-
-                <div className="pb-3">
-                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    {t('project.projectImage', 'Project Image')}
-                  </label>
-                  
-                  {imagePreview ? (
-                    <div className="mb-3">
-                      <div className="relative inline-block">
-                        <img
-                          src={imagePreview}
-                          alt="Project preview"
-                          className="w-32 h-20 object-cover rounded-md border border-gray-300 dark:border-gray-600"
+          <div className="flex flex-col h-full sm:min-h-[500px] sm:max-h-[80vh]">
+            {/* Main Form Section */}
+            <div className="flex-1 flex flex-col transition-all duration-300 bg-white dark:bg-gray-800">
+              <div className="flex-1 relative">
+                <div className="absolute inset-0 overflow-y-auto overflow-x-hidden" style={{ WebkitOverflowScrolling: 'touch' }}>
+                  <form className="h-full">
+                    <fieldset className="h-full flex flex-col">
+                      {/* Project Title Section - Always Visible */}
+                      <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 pt-4">
+                        <input
+                          type="text"
+                          id="projectName"
+                          name="name"
+                          value={formData.name}
+                          onChange={handleChange}
+                          required
+                          className={`block w-full text-xl font-semibold bg-transparent text-black dark:text-white border-none focus:outline-none shadow-sm py-2`}
+                          placeholder={t('project.name', 'Enter project name')}
                         />
-                        <button
-                          type="button"
-                          onClick={handleRemoveImage}
-                          className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600"
-                        >
-                          ×
-                        </button>
+                        {error && (
+                          <div className="mt-2 text-red-500 text-sm font-medium">
+                            {error}
+                          </div>
+                        )}
                       </div>
-                    </div>
-                  ) : null}
-                  
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept="image/*"
-                    onChange={handleImageSelect}
-                    className="hidden"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => fileInputRef.current?.click()}
-                    className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
-                  >
-                    <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                    </svg>
-                    {t('project.browseImage', 'Browse Image')}
-                  </button>
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                    {t('project.uploadImageHint', 'Upload an image for your project (max 5MB)')}
-                  </p>
-                </div>
 
-                <div className="pb-3">
-                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    {t('forms.dueDate', 'Due Date')}
-                  </label>
-                  <input
-                    type="date"
-                    name="due_date_at"
-                    value={formData.due_date_at || ""}
-                    onChange={handleChange}
-                    className="block w-full rounded-md shadow-sm px-3 py-2 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
-                  />
-                </div>
+                      {/* Description Section - Always Visible */}
+                      <div className="flex-1 border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
+                        <textarea
+                          id="projectDescription"
+                          name="description"
+                          value={formData.description || ""}
+                          onChange={handleChange}
+                          className="block w-full h-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm p-3 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out resize-none"
+                          placeholder={t('forms.areaDescriptionPlaceholder', 'Enter project description (optional)')}
+                          style={{ minHeight: '200px' }}
+                        />
+                      </div>
 
-                <div className="pb-3">
-                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-3">
-                    {t('forms.priority', 'Priority')}
-                  </label>
-                  <PriorityDropdown
-                    value={formData.priority || "medium"}
-                    onChange={(value: PriorityType) =>
-                      setFormData({ ...formData, priority: value })
-                    }
-                  />
-                </div>
+                      {/* Expandable Sections - Only show when expanded */}
+                      {/* Active Status Section - First */}
+                      {expandedSections.active && (
+                        <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
+                          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                            {t('projects.active', 'Status')}
+                          </h3>
+                          <div className="flex items-center">
+                            <Switch
+                              isChecked={formData.active}
+                              onToggle={handleToggleActive}
+                            />
+                            <label
+                              htmlFor="active"
+                              className="ml-2 block text-sm text-gray-700 dark:text-gray-300"
+                            >
+                              {t('projects.active', 'Active')}
+                            </label>
+                          </div>
+                        </div>
+                      )}
 
-                <div className="pb-3">
-                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    {t('forms.tags', 'Tags')}
-                  </label>
-                  <div className="w-full">
-                    <TagInput
-                      onTagsChange={handleTagsChange}
-                      initialTags={tags}
-                      availableTags={availableTags}
-                    />
-                  </div>
-                </div>
+                      {expandedSections.tags && (
+                        <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
+                          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                            {t('forms.tags', 'Tags')}
+                          </h3>
+                          <TagInput
+                            onTagsChange={handleTagsChange}
+                            initialTags={tags}
+                            availableTags={availableTags}
+                          />
+                        </div>
+                      )}
 
-                <div className="pb-3">
-                  <label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    {t('common.area', 'Area')} ({t('forms.optional', 'optional')})
-                  </label>
-                  <select
-                    id="projectArea"
-                    name="area_id"
-                    value={formData.area_id || ""}
-                    onChange={handleChange}
-                    className="block w-full rounded-md shadow-sm px-3 py-2 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
-                  >
-                    <option value="">{t('common.none', 'No Area')}</option>
-                    {areas.map((area) => (
-                      <option key={area.id} value={area.id}>
-                        {area.name}
-                      </option>
-                    ))}
-                  </select>
-                </div>
+                      {expandedSections.area && (
+                        <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
+                          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                            {t('common.area', 'Area')}
+                          </h3>
+                          <select
+                            id="projectArea"
+                            name="area_id"
+                            value={formData.area_id || ""}
+                            onChange={handleChange}
+                            className="block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm px-3 py-2 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                          >
+                            <option value="">{t('common.none', 'No Area')}</option>
+                            {areas.map((area) => (
+                              <option key={area.id} value={area.id}>
+                                {area.name}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+                      )}
 
-                <div className="flex items-center">
-                  <Switch
-                    isChecked={formData.active}
-                    onToggle={handleToggleActive}
-                  />
-                  <label
-                    htmlFor="active"
-                    className="ml-2 block text-sm text-gray-700 dark:text-gray-300"
-                  >
-                    {t('projects.active', 'Active')}
-                  </label>
+                      {expandedSections.image && (
+                        <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
+                          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                            {t('project.projectImage', 'Project Image')}
+                          </h3>
+                          
+                          {imagePreview ? (
+                            <div className="mb-3">
+                              <div className="relative inline-block">
+                                <img
+                                  src={imagePreview}
+                                  alt="Project preview"
+                                  className="w-32 h-20 object-cover rounded-md border border-gray-300 dark:border-gray-600"
+                                />
+                                <button
+                                  type="button"
+                                  onClick={handleRemoveImage}
+                                  className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center text-xs hover:bg-red-600"
+                                >
+                                  ×
+                                </button>
+                              </div>
+                            </div>
+                          ) : null}
+                          
+                          <input
+                            ref={fileInputRef}
+                            type="file"
+                            accept="image/*"
+                            onChange={handleImageSelect}
+                            className="hidden"
+                          />
+                          <button
+                            type="button"
+                            onClick={() => fileInputRef.current?.click()}
+                            className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+                          >
+                            <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                            </svg>
+                            {t('project.browseImage', 'Browse Image')}
+                          </button>
+                          <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            {t('project.uploadImageHint', 'Upload an image for your project (max 5MB)')}
+                          </p>
+                        </div>
+                      )}
+
+                      {expandedSections.priority && (
+                        <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
+                          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                            {t('forms.priority', 'Priority')}
+                          </h3>
+                          <PriorityDropdown
+                            value={formData.priority || "medium"}
+                            onChange={(value: PriorityType) =>
+                              setFormData({ ...formData, priority: value })
+                            }
+                          />
+                        </div>
+                      )}
+
+                      {expandedSections.dueDate && (
+                        <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4">
+                          <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
+                            {t('forms.dueDate', 'Due Date')}
+                          </h3>
+                          <input
+                            type="date"
+                            name="due_date_at"
+                            value={formData.due_date_at || ""}
+                            onChange={handleChange}
+                            className="block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm px-3 py-2 text-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 transition duration-150 ease-in-out"
+                          />
+                        </div>
+                      )}
+                    </fieldset>
+                  </form>
                 </div>
               </div>
-
-              <div className="p-3 flex-shrink-0 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-2">
-                {project && onDelete && (
+              
+              {/* Section Icons - Above border, split layout */}
+              <div className="flex-shrink-0 bg-white dark:bg-gray-800 px-3 py-2">
+                <div className="flex items-center justify-between">
+                  {/* Left side: Section icons */}
+                  <div className="flex items-center space-x-1">
+                    {/* Active Status Toggle - First */}
+                    <button
+                      type="button"
+                      onClick={() => toggleSection('active')}
+                      className={`relative p-2 rounded-full transition-colors ${
+                        expandedSections.active
+                          ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+                      }`}
+                      title={t('projects.active', 'Status')}
+                    >
+                      <PowerIcon className="h-5 w-5" />
+                      {!formData.active && (
+                        <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full"></span>
+                      )}
+                    </button>
+                    
+                    {/* Tags Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => toggleSection('tags')}
+                      className={`relative p-2 rounded-full transition-colors ${
+                        expandedSections.tags
+                          ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+                      }`}
+                      title={t('forms.tags', 'Tags')}
+                    >
+                      <TagIcon className="h-5 w-5" />
+                      {formData.tags && formData.tags.length > 0 && (
+                        <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
+                      )}
+                    </button>
+                    
+                    {/* Area Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => toggleSection('area')}
+                      className={`relative p-2 rounded-full transition-colors ${
+                        expandedSections.area
+                          ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+                      }`}
+                      title={t('common.area', 'Area')}
+                    >
+                      <FolderIcon className="h-5 w-5" />
+                      {formData.area_id && (
+                        <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
+                      )}
+                    </button>
+                    
+                    {/* Project Image Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => toggleSection('image')}
+                      className={`relative p-2 rounded-full transition-colors ${
+                        expandedSections.image
+                          ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+                      }`}
+                      title={t('project.projectImage', 'Project Image')}
+                    >
+                      <CameraIcon className="h-5 w-5" />
+                      {formData.image_url && (
+                        <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
+                      )}
+                    </button>
+                    
+                    {/* Priority Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => toggleSection('priority')}
+                      className={`relative p-2 rounded-full transition-colors ${
+                        expandedSections.priority
+                          ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+                      }`}
+                      title={t('forms.priority', 'Priority')}
+                    >
+                      <ExclamationTriangleIcon className="h-5 w-5" />
+                      {formData.priority !== 'medium' && (
+                        <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
+                      )}
+                    </button>
+                    
+                    {/* Due Date Toggle */}
+                    <button
+                      type="button"
+                      onClick={() => toggleSection('dueDate')}
+                      className={`relative p-2 rounded-full transition-colors ${
+                        expandedSections.dueDate
+                          ? 'bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400'
+                          : 'text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'
+                      }`}
+                      title={t('forms.dueDate', 'Due Date')}
+                    >
+                      <CalendarIcon className="h-5 w-5" />
+                      {formData.due_date_at && (
+                        <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              
+              {/* Action Buttons - Below border with custom layout */}
+              <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+                {/* Left side: Delete and Cancel */}
+                <div className="flex items-center space-x-3">
+                  {(project && project.id && onDelete) && (
+                    <button
+                      type="button"
+                      onClick={handleDeleteClick}
+                      className="p-2 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none transition duration-150 ease-in-out"
+                      title={t('common.delete', 'Delete')}
+                    >
+                      <TrashIcon className="h-4 w-4" />
+                    </button>
+                  )}
                   <button
                     type="button"
-                    onClick={handleDeleteClick}
-                    className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 focus:outline-none transition duration-150 ease-in-out"
+                    onClick={handleClose}
+                    className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none transition duration-150 ease-in-out text-sm"
                   >
-                    {t('common.delete', 'Delete')}
+                    {t('common.cancel', 'Cancel')}
                   </button>
-                )}
-                <button
-                  type="button"
-                  onClick={handleClose}
-                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none transition duration-150 ease-in-out"
-                >
-                  {t('common.cancel', 'Cancel')}
-                </button>
+                </div>
+                
+                {/* Right side: Save */}
                 <button
                   type="button"
                   onClick={handleSubmit}
                   disabled={isUploading}
-                  className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed"
+                  className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out text-sm ${
+                    isUploading ? 'opacity-50 cursor-not-allowed' : ''
+                  }`}
                 >
                   {isUploading ? 'Uploading...' : (project ? t('modals.updateProject', 'Update Project') : t('modals.createProject', 'Create Project'))}
                 </button>
               </div>
-            </fieldset>
-          </form>
+            </div>
+          </div>
         </div>
       </div>
 
diff --git a/frontend/components/Projects.tsx b/frontend/components/Projects.tsx
index 2c2b872..dc401c5 100644
--- a/frontend/components/Projects.tsx
+++ b/frontend/components/Projects.tsx
@@ -348,6 +348,16 @@ useEffect(() => {
             setProjectToEdit(null);
           }}
           onSave={handleSaveProject}
+          onDelete={async (projectId) => {
+            try {
+              await deleteProject(projectId);
+              setProjects(prev => prev.filter(p => p.id !== projectId));
+              setIsProjectModalOpen(false);
+              setProjectToEdit(null);
+            } catch (error) {
+              console.error('Error deleting project:', error);
+            }
+          }}
           project={projectToEdit || undefined}
           areas={areas}
         />
diff --git a/frontend/components/Tag/TagModal.tsx b/frontend/components/Tag/TagModal.tsx
index 6771880..f4618b0 100644
--- a/frontend/components/Tag/TagModal.tsx
+++ b/frontend/components/Tag/TagModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import { Tag } from '../../entities/Tag';
-import { XMarkIcon } from '@heroicons/react/24/outline';
+import { TrashIcon } from '@heroicons/react/24/outline';
 import { useToast } from '../Shared/ToastContext';
 import { useTranslation } from 'react-i18next';
 
@@ -8,6 +8,7 @@ interface TagModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSave: (tag: Tag) => void;
+  onDelete?: (tagId: number) => void;
   tag?: Tag | null;
 }
 
@@ -15,6 +16,7 @@ const TagModal: React.FC<TagModalProps> = ({
   isOpen,
   onClose,
   onSave,
+  onDelete,
   tag,
 }) => {
   const [formData, setFormData] = useState<Tag>(
@@ -110,6 +112,18 @@ const TagModal: React.FC<TagModalProps> = ({
     }, 300);
   };
 
+  const handleDeleteTag = async () => {
+    if (formData.id && onDelete) {
+      try {
+        await onDelete(formData.id);
+        showSuccessToast(t('success.tagDeleted', 'Tag deleted successfully!'));
+        handleClose();
+      } catch (err) {
+        showErrorToast(t('errors.failedToDeleteTag', 'Failed to delete tag.'));
+      }
+    }
+  };
+
   if (!isOpen) return null;
 
   return (
@@ -121,57 +135,72 @@ const TagModal: React.FC<TagModalProps> = ({
       >
         <div
           ref={modalRef}
-          className={`bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-md overflow-hidden transform transition-transform duration-300 ${
+          className={`bg-white dark:bg-gray-800 border-0 sm:border sm:border-gray-200 sm:dark:border-gray-800 sm:rounded-lg sm:shadow-2xl w-full sm:max-w-md transform transition-transform duration-300 ${
             isClosing ? 'scale-95' : 'scale-100'
-          } h-screen sm:h-auto flex flex-col`}
-          style={{
-            maxHeight: 'calc(100vh - 4rem)',
-          }}
+          } h-full sm:h-auto sm:my-4`}
         >
-          <form className="flex flex-col flex-1">
-            <fieldset className="flex flex-col flex-1">
-              <div className="p-4 space-y-3 flex-1 text-sm overflow-y-auto">
-                {/* Tag Name */}
-                <div className="py-4">
-                  <input
-                    type="text"
-                    id="tagName"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    required
-                    className="block w-full text-xl font-semibold dark:bg-gray-800 text-black dark:text-white border-b-2 border-gray-200 dark:border-gray-900 focus:outline-none shadow-sm py-2"
-                    placeholder={t('forms.tagNamePlaceholder', 'Enter tag name')}
-                  />
-                </div>
-              </div>
-
-              {/* Action Buttons */}
-              <div className="p-3 flex-shrink-0 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-2">
+          <div className="flex flex-col h-auto">
+            {/* Main Form Section */}
+            <div className="bg-white dark:bg-gray-800">
+              <form>
+                <fieldset>
+                  {/* Tag Title Section - Always Visible */}
+                  <div className="px-4 pt-4 pb-4">
+                    <input
+                      type="text"
+                      id="tagName"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleChange}
+                      required
+                      className="block w-full text-xl font-semibold bg-transparent text-black dark:text-white border-none focus:outline-none shadow-sm py-2"
+                      placeholder={t('forms.tagNamePlaceholder', 'Enter tag name')}
+                    />
+                  </div>
+                </fieldset>
+              </form>
+            </div>
+            
+            {/* Action Buttons - Below border with custom layout */}
+            <div className="flex-shrink-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 px-3 py-2 flex items-center justify-between">
+              {/* Left side: Delete and Cancel */}
+              <div className="flex items-center space-x-3">
+                {(tag && tag.id && onDelete) && (
+                  <button
+                    type="button"
+                    onClick={handleDeleteTag}
+                    className="p-2 border border-red-300 dark:border-red-600 text-red-600 dark:text-red-400 rounded-md hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none transition duration-150 ease-in-out"
+                    title={t('common.delete', 'Delete')}
+                  >
+                    <TrashIcon className="h-4 w-4" />
+                  </button>
+                )}
                 <button
                   type="button"
                   onClick={handleClose}
-                  className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 focus:outline-none transition duration-150 ease-in-out"
+                  className="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 focus:outline-none transition duration-150 ease-in-out text-sm"
                 >
                   {t('common.cancel', 'Cancel')}
                 </button>
-                <button
-                  type="button"
-                  onClick={handleSubmit}
-                  disabled={isSubmitting}
-                  className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out ${
-                    isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
-                  }`}
-                >
-                  {isSubmitting 
-                    ? t('modals.submitting', 'Submitting...') 
-                    : tag 
-                      ? t('modals.updateTag', 'Update Tag') 
-                      : t('modals.createTag', 'Create Tag')}
-                </button>
               </div>
-            </fieldset>
-          </form>
+              
+              {/* Right side: Save */}
+              <button
+                type="button"
+                onClick={handleSubmit}
+                disabled={isSubmitting}
+                className={`px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 focus:outline-none transition duration-150 ease-in-out text-sm ${
+                  isSubmitting ? 'opacity-50 cursor-not-allowed' : ''
+                }`}
+              >
+                {isSubmitting 
+                  ? t('modals.submitting', 'Submitting...') 
+                  : tag 
+                    ? t('modals.updateTag', 'Update Tag') 
+                    : t('modals.createTag', 'Create Tag')}
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </>
diff --git a/frontend/components/Tags.tsx b/frontend/components/Tags.tsx
index a5dfa26..b932536 100644
--- a/frontend/components/Tags.tsx
+++ b/frontend/components/Tags.tsx
@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
-import { TrashIcon, TagIcon, MagnifyingGlassIcon, CheckIcon, BookOpenIcon, FolderIcon } from '@heroicons/react/24/solid';
+import { TrashIcon, TagIcon, MagnifyingGlassIcon, CheckIcon, BookOpenIcon, FolderIcon, PencilSquareIcon } from '@heroicons/react/24/solid';
 import ConfirmDialog from './Shared/ConfirmDialog';
+import TagModal from './Tag/TagModal';
 import { Tag } from '../entities/Tag';
-import { deleteTag as apiDeleteTag } from '../utils/tagsService';
+import { deleteTag as apiDeleteTag, createTag, updateTag } from '../utils/tagsService';
 import { useStore } from '../store/useStore';
 
 const Tags: React.FC = () => {
@@ -22,6 +23,8 @@ const Tags: React.FC = () => {
   const [tagToDelete, setTagToDelete] = useState<Tag | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>('');
   const [hoveredTagId, setHoveredTagId] = useState<number | null>(null);
+  const [isTagModalOpen, setIsTagModalOpen] = useState<boolean>(false);
+  const [selectedTag, setSelectedTag] = useState<Tag | null>(null);
   const [tagMetrics, setTagMetrics] = useState<Record<string, {tasks: number, notes: number, projects: number}>>({});
   const [metricsLoaded, setMetricsLoaded] = useState<boolean>(false);
   const [cachedProjects, setCachedProjects] = useState<any[]>([]);
@@ -115,6 +118,27 @@ const Tags: React.FC = () => {
   };
 
 
+  const handleEditTag = (tag: Tag) => {
+    setSelectedTag(tag);
+    setIsTagModalOpen(true);
+  };
+
+  const handleSaveTag = async (tagData: Tag) => {
+    try {
+      if (tagData.id) {
+        await updateTag(tagData.id, tagData);
+        setTags(tags.map(tag => tag.id === tagData.id ? tagData : tag));
+      } else {
+        const newTag = await createTag(tagData);
+        setTags([...tags, newTag]);
+      }
+      setIsTagModalOpen(false);
+      setSelectedTag(null);
+    } catch (error) {
+      console.error('Error saving tag:', error);
+    }
+  };
+
   const openConfirmDialog = (tag: Tag) => {
     setTagToDelete(tag);
     setIsConfirmDialogOpen(true);
@@ -252,8 +276,16 @@ const Tags: React.FC = () => {
                             )}
                           </div>
                           
-                          {/* Delete button */}
+                          {/* Action buttons */}
                           <div className="flex space-x-2 ml-2">
+                            <button
+                              onClick={() => handleEditTag(tag)}
+                              className={`text-gray-500 hover:text-blue-700 dark:hover:text-blue-300 focus:outline-none transition-opacity ${hoveredTagId === tag.id ? 'opacity-100' : 'opacity-0'}`}
+                              aria-label={`Edit ${tag.name}`}
+                              title={`Edit ${tag.name}`}
+                            >
+                              <PencilSquareIcon className="h-4 w-4" />
+                            </button>
                             <button
                               onClick={() => openConfirmDialog(tag)}
                               className={`text-gray-500 hover:text-red-700 dark:hover:text-red-300 focus:outline-none transition-opacity ${hoveredTagId === tag.id ? 'opacity-100' : 'opacity-0'}`}
@@ -273,6 +305,37 @@ const Tags: React.FC = () => {
           </div>
         )}
 
+        {/* TagModal */}
+        {isTagModalOpen && (
+          <TagModal
+            isOpen={isTagModalOpen}
+            onClose={() => {
+              setIsTagModalOpen(false);
+              setSelectedTag(null);
+            }}
+            onSave={handleSaveTag}
+            onDelete={async (tagId) => {
+              try {
+                await apiDeleteTag(tagId);
+                setTags(tags.filter((tag) => tag.id !== tagId));
+                setTagMetrics((prev) => {
+                  const newMetrics = { ...prev };
+                  const deletedTag = tags.find(t => t.id === tagId);
+                  if (deletedTag) {
+                    delete newMetrics[deletedTag.name];
+                  }
+                  return newMetrics;
+                });
+                setIsTagModalOpen(false);
+                setSelectedTag(null);
+              } catch (error) {
+                console.error('Error deleting tag:', error);
+              }
+            }}
+            tag={selectedTag}
+          />
+        )}
+
         {/* ConfirmDialog */}
         {isConfirmDialogOpen && tagToDelete && (
           <ConfirmDialog