diff --git a/frontend/components/Note/NoteModal.tsx b/frontend/components/Note/NoteModal.tsx
index 0a08f05..bc1af28 100644
--- a/frontend/components/Note/NoteModal.tsx
+++ b/frontend/components/Note/NoteModal.tsx
@@ -43,7 +43,13 @@ const NoteModal: React.FC<NoteModalProps> = ({
 }) => {
     const { t } = useTranslation();
     const {
-        tagsStore: { tags: availableTagsStore },
+        tagsStore: {
+            tags: availableTagsStore,
+            hasLoaded: tagsLoaded,
+            isLoading: tagsLoading,
+            isError: tagsError,
+            loadTags,
+        },
     } = useStore();
     const [formData, setFormData] = useState<Note>(
         note || {
@@ -139,6 +145,13 @@ const NoteModal: React.FC<NoteModalProps> = ({
         }
     }, [isOpen, note, memoizedProjects]);
 
+    // Load tags when modal opens if not already loaded
+    useEffect(() => {
+        if (isOpen && !tagsLoaded && !tagsLoading && !tagsError) {
+            loadTags();
+        }
+    }, [isOpen, tagsLoaded, tagsLoading, tagsError, loadTags]);
+
     const handleClose = useCallback(() => {
         setIsClosing(true);
         setTimeout(() => {
@@ -482,15 +495,26 @@ const NoteModal: React.FC<NoteModalProps> = ({
                                                         <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
                                                             {t('forms.tags')}
                                                         </h3>
-                                                        <TagInput
-                                                            onTagsChange={
-                                                                handleTagsChange
-                                                            }
-                                                            initialTags={tags}
-                                                            availableTags={
-                                                                availableTagsStore
-                                                            }
-                                                        />
+                                                        {tagsLoaded ? (
+                                                            <TagInput
+                                                                onTagsChange={
+                                                                    handleTagsChange
+                                                                }
+                                                                initialTags={
+                                                                    tags
+                                                                }
+                                                                availableTags={
+                                                                    availableTagsStore
+                                                                }
+                                                            />
+                                                        ) : (
+                                                            <div className="text-gray-500 text-sm">
+                                                                {t(
+                                                                    'common.loading',
+                                                                    'Loading...'
+                                                                )}
+                                                            </div>
+                                                        )}
                                                     </div>
                                                 )}
 
diff --git a/frontend/components/Shared/PriorityDropdown.tsx b/frontend/components/Shared/PriorityDropdown.tsx
index 33487f3..1c7e41b 100644
--- a/frontend/components/Shared/PriorityDropdown.tsx
+++ b/frontend/components/Shared/PriorityDropdown.tsx
@@ -102,11 +102,14 @@ const PriorityDropdown: React.FC<PriorityDropdownProps> = ({
     }, [isOpen]);
 
     // Convert numeric priority to string if needed
-    const normalizedValue = typeof value === 'number' 
-        ? ['low', 'medium', 'high'][value] || 'medium'
-        : value;
-    
-    const selectedPriority = priorities.find((p) => p.value === normalizedValue);
+    const normalizedValue =
+        typeof value === 'number'
+            ? ['low', 'medium', 'high'][value] || 'medium'
+            : value;
+
+    const selectedPriority = priorities.find(
+        (p) => p.value === normalizedValue
+    );
 
     return (
         <div
diff --git a/frontend/components/Task/TaskModal.tsx b/frontend/components/Task/TaskModal.tsx
index de744b9..5fead3a 100644
--- a/frontend/components/Task/TaskModal.tsx
+++ b/frontend/components/Task/TaskModal.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { PriorityType, StatusType, Task } from '../../entities/Task';
+import { PriorityType, Task } from '../../entities/Task';
 import ConfirmDialog from '../Shared/ConfirmDialog';
 import { useToast } from '../Shared/ToastContext';
 import TimelinePanel from './TimelinePanel';
@@ -17,7 +17,6 @@ import {
     ClockIcon,
     TagIcon,
     FolderIcon,
-    Cog6ToothIcon,
     ArrowPathIcon,
     TrashIcon,
     ListBulletIcon,
@@ -59,7 +58,13 @@ const TaskModal: React.FC<TaskModalProps> = ({
     autoFocusSubtasks,
 }) => {
     const {
-        tagsStore: { tags: availableTags },
+        tagsStore: {
+            tags: availableTags,
+            hasLoaded: tagsLoaded,
+            isLoading: tagsLoading,
+            isError: tagsError,
+            loadTags,
+        },
     } = useStore();
     const [formData, setFormData] = useState<Task>(task);
     const [tags, setTags] = useState<string[]>(
@@ -219,6 +224,13 @@ const TaskModal: React.FC<TaskModalProps> = ({
         }
     }, [isOpen, autoFocusSubtasks]);
 
+    // Load tags when modal opens if not already loaded
+    useEffect(() => {
+        if (isOpen && !tagsLoaded && !tagsLoading && !tagsError) {
+            loadTags();
+        }
+    }, [isOpen, tagsLoaded, tagsLoading, tagsError, loadTags]);
+
     const handleEditParent = () => {
         if (parentTask && onEditParentTask) {
             onEditParentTask(parentTask);
@@ -524,20 +536,24 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                                                 'Tags'
                                                             )}
                                                         </h3>
-                                                        <TaskTagsSection
-                                                            tags={
-                                                                formData.tags?.map(
-                                                                    (tag) =>
-                                                                        tag.name
-                                                                ) || []
-                                                            }
-                                                            onTagsChange={
-                                                                handleTagsChange
-                                                            }
-                                                            availableTags={
-                                                                availableTags
-                                                            }
-                                                        />
+                                                        {tagsLoaded ? (
+                                                            <TaskTagsSection
+                                                                tags={tags}
+                                                                onTagsChange={
+                                                                    handleTagsChange
+                                                                }
+                                                                availableTags={
+                                                                    availableTags
+                                                                }
+                                                            />
+                                                        ) : (
+                                                            <div className="text-gray-500 text-sm">
+                                                                {t(
+                                                                    'common.loading',
+                                                                    'Loading...'
+                                                                )}
+                                                            </div>
+                                                        )}
                                                     </div>
                                                 )}
 
@@ -584,14 +600,22 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                                 {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.task.labels.priority', 'Priority')}
+                                                            {t(
+                                                                'forms.task.labels.priority',
+                                                                'Priority'
+                                                            )}
                                                         </h3>
                                                         <PriorityDropdown
-                                                            value={getPriorityString(formData.priority)}
-                                                            onChange={(value: PriorityType) =>
+                                                            value={getPriorityString(
+                                                                formData.priority
+                                                            )}
+                                                            onChange={(
+                                                                value: PriorityType
+                                                            ) =>
                                                                 setFormData({
                                                                     ...formData,
-                                                                    priority: value,
+                                                                    priority:
+                                                                        value,
                                                                 })
                                                             }
                                                         />
@@ -601,16 +625,30 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                                 {expandedSections.dueDate && (
                                                     <div className="border-b border-gray-200 dark:border-gray-700 pb-4 mb-4 px-4 overflow-visible">
                                                         <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-                                                            {t('forms.task.labels.dueDate', 'Due Date')}
+                                                            {t(
+                                                                'forms.task.labels.dueDate',
+                                                                'Due Date'
+                                                            )}
                                                         </h3>
                                                         <div className="overflow-visible">
                                                             <DatePicker
-                                                                value={formData.due_date || ''}
-                                                                onChange={(value) => {
-                                                                    const event = {
-                                                                        target: { name: 'due_date', value },
-                                                                    } as React.ChangeEvent<HTMLInputElement>;
-                                                                    handleChange(event);
+                                                                value={
+                                                                    formData.due_date ||
+                                                                    ''
+                                                                }
+                                                                onChange={(
+                                                                    value
+                                                                ) => {
+                                                                    const event =
+                                                                        {
+                                                                            target: {
+                                                                                name: 'due_date',
+                                                                                value,
+                                                                            },
+                                                                        } as React.ChangeEvent<HTMLInputElement>;
+                                                                    handleChange(
+                                                                        event
+                                                                    );
                                                                 }}
                                                                 placeholder={t(
                                                                     'forms.task.dueDatePlaceholder',
@@ -778,7 +816,9 @@ const TaskModal: React.FC<TaskModalProps> = ({
                                                 )}
                                             >
                                                 <ExclamationTriangleIcon className="h-5 w-5" />
-                                                {getPriorityString(formData.priority) !== 'medium' && (
+                                                {getPriorityString(
+                                                    formData.priority
+                                                ) !== 'medium' && (
                                                     <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full"></span>
                                                 )}
                                             </button>