diff --git a/src/db/todoSchemas.d.ts b/src/db/todoSchemas.d.ts
index b80c7e1..18ff4ce 100644
--- a/src/db/todoSchemas.d.ts
+++ b/src/db/todoSchemas.d.ts
@@ -8,4 +8,5 @@ interface Todo {
 
 interface TodoDetail {
   description: string;
+  importance: boolean;
 }
diff --git a/src/todomanager/Detail.tsx b/src/todomanager/Detail.tsx
index 0df2ce0..42cfb2a 100644
--- a/src/todomanager/Detail.tsx
+++ b/src/todomanager/Detail.tsx
@@ -22,25 +22,11 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
     const { name, value, checked } = e.target;
 
     if (selectedTodo) {
-      setSelectedTodo(prevTodo => {
-        if (!prevTodo) return prevTodo;
-        switch (name) {
-          case 'isComplete':
-            return {
-              ...prevTodo,
-              isComplete: checked,
-            };
-          case 'dueDate':
-            return {
-              ...prevTodo,
-              dueDate: new Date(value),
-            };
-          default:
-            return {
-              ...prevTodo,
-              [name]: value,
-            };
-        }
+      setSelectedTodo({
+        ...selectedTodo,
+        [name]: value,
+        [name]: name === 'isComplete' ? checked : value,
+        [name]: name === 'dueDate' ? new Date(value) : value,
       });
       updateTodo({
         ...selectedTodo,
@@ -53,15 +39,12 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
     const { name, value } = e.target;
 
     if (selectedTodo) {
-      setSelectedTodo(prevTodo => {
-        if (!prevTodo) return prevTodo;
-        return {
-          ...prevTodo,
-          todoDetail: {
-            ...prevTodo.todoDetail,
-            [name]: value,
-          },
-        };
+      setSelectedTodo({
+        ...selectedTodo,
+        todoDetail: {
+          ...selectedTodo.todoDetail,
+          [name]: value,
+        },
       });
       updateTodo({
         ...selectedTodo,
@@ -73,6 +56,25 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
     }
   };
 
+  const handleImportance = () => {
+    if (selectedTodo) {
+      const newImportance = !selectedTodo.todoDetail.importance;
+
+      setSelectedTodo({
+        ...selectedTodo,
+        todoDetail: { ...selectedTodo.todoDetail, importance: newImportance },
+      });
+
+      updateTodo({
+        ...selectedTodo,
+        todoDetail: {
+          ...selectedTodo.todoDetail,
+          importance: newImportance,
+        },
+      });
+    }
+  };
+
   useEffect(() => {
     fetchTodo();
   }, [id]);
@@ -91,6 +93,25 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
           {!isModify ? (
             <div className="flex justify-around items-center space-x-2 w-full">
               <div className="text-lg">{selectedTodo?.title}</div>
+              <div className="flex items-center gap-2 h-transparent">
+                <button
+                  type="button"
+                  aria-label="importance"
+                  className="border-none outline-none bg-transparent text-center"
+                  onClick={() => handleImportance()}
+                >
+                  {!selectedTodo?.todoDetail.importance ? (
+                    <div className="relative w-6 h-8 bg-gray-300 text-white rounded-md shadow-md">
+                      <div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-gray-300 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
+                    </div>
+                  ) : (
+                    <div className="relative w-6 h-8 bg-orange-500 text-white rounded-md shadow-md">
+                      <div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-orange-500 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
+                    </div>
+                  )}
+                </button>
+              </div>
+
               <div className="text-sm text-gray-600">
                 {selectedTodo?.dueDate && (
                   <div>{calculateDday(selectedTodo?.dueDate)}</div>
@@ -114,6 +135,24 @@ function Detail({ id, onBack }: { id: string; onBack: () => void }) {
                   onChange={handleInputChange}
                   className="border border-gray-300 focus:ring-2 focus:ring-brown-400 focus:outline-none rounded p-2 text-sm w-40"
                 />
+                <div className="flex items-center gap-2 h-transparent">
+                  <button
+                    type="button"
+                    aria-label="importance"
+                    className="border-none outline-none bg-transparent text-center"
+                    onClick={() => handleImportance()}
+                  >
+                    {!selectedTodo?.todoDetail.importance ? (
+                      <div className="relative w-6 h-8 bg-gray-300 text-white rounded-md shadow-md">
+                        <div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-gray-300 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
+                      </div>
+                    ) : (
+                      <div className="relative w-6 h-8 bg-orange-500 text-white rounded-md shadow-md">
+                        <div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-orange-500 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
+                      </div>
+                    )}
+                  </button>
+                </div>
                 <input
                   type="checkbox"
                   name="isComplete"
diff --git a/src/todomanager/TodoList.tsx b/src/todomanager/TodoList.tsx
index 9d2b58c..59442f8 100644
--- a/src/todomanager/TodoList.tsx
+++ b/src/todomanager/TodoList.tsx
@@ -36,7 +36,7 @@ function TodoList({ onSelectTodo }: TodoListProps) {
         title: newTodo,
         dueDate: undefined,
         isComplete: false,
-        todoDetail: { description: '' },
+        todoDetail: { description: '', importance: false },
       };
       addTodo(newTodoItem);
       setNewTodo('');
@@ -83,6 +83,19 @@ function TodoList({ onSelectTodo }: TodoListProps) {
     }
   };
 
+  const handleImportance = (id: string) => {
+    const selectedTodo = todoFromDB.find(todo => todo.id === id);
+    if (selectedTodo) {
+      updateTodo({
+        ...selectedTodo,
+        todoDetail: {
+          ...selectedTodo.todoDetail,
+          importance: !selectedTodo.todoDetail.importance,
+        },
+      });
+    }
+  };
+
   useEffect(() => {
     getTodosFromDB();
   }, [todoFromDB]);
@@ -119,6 +132,24 @@ function TodoList({ onSelectTodo }: TodoListProps) {
                 </button>
               )}
 
+              <div className="flex items-center gap-2 h-transparent">
+                <button
+                  type="button"
+                  aria-label="importance"
+                  className="border-none outline-none bg-transparent text-center"
+                  onClick={() => handleImportance(todo.id)}
+                >
+                  {!todo.todoDetail.importance ? (
+                    <div className="relative w-6 h-8 bg-gray-300 text-white rounded-md shadow-md">
+                      <div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-gray-300 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
+                    </div>
+                  ) : (
+                    <div className="relative w-6 h-8 bg-orange-500 text-white rounded-md shadow-md">
+                      <div className="absolute -bottom-2 left-0 right-0 mx-auto w-0 h-0 border-t-[12px] border-t-orange-500 border-l-[12px] border-l-transparent border-r-[12px] border-r-transparent" />
+                    </div>
+                  )}
+                </button>
+              </div>
               <div className="flex items-center gap-2">
                 {editTodo?.id === todo.id ? (
                   <button