diff --git a/mast-react-vite/src/App.tsx b/mast-react-vite/src/App.tsx
index 64a8dc4..025b5b1 100644
--- a/mast-react-vite/src/App.tsx
+++ b/mast-react-vite/src/App.tsx
@@ -255,6 +255,28 @@ function App({ ctx, syncWorker, dbname, roomId }) {
     }
   };
 
+  // Callback to toggle task priority
+  const handleTogglePriority = (taskId: number) => {
+    const sqlQuery = `
+      UPDATE todos 
+      SET priority = CASE 
+        WHEN priority = 1 THEN 0 
+        ELSE 1 
+      END 
+      WHERE id = ?
+    `;
+    
+    ctx.db.exec(sqlQuery, [taskId]);
+    
+    // Trigger sync with small delay to ensure changes are committed
+    setTimeout(() => {
+      syncWorker.postMessage({
+        type: 'SYNC_CHANGES',
+        dbname
+      });
+    }, 100);
+  };
+
   // Use previewTodos if available, otherwise use regular todos
   const displayTodos = previewTodos.length > 0 ? previewTodos : todos;
   
@@ -476,7 +498,7 @@ function App({ ctx, syncWorker, dbname, roomId }) {
             />
             <div className="h-2" />
             <div className="flex-1 w-full">
-              <DataTable data={displayTodos} onMarkDone={handleMarkDone} scrollToPreviewIndex={scrollToPreviewIndex} />
+              <DataTable data={displayTodos} onMarkDone={handleMarkDone} onTogglePriority={handleTogglePriority} scrollToPreviewIndex={scrollToPreviewIndex} />
             </div>
           </section>
         </div>
@@ -516,7 +538,7 @@ function App({ ctx, syncWorker, dbname, roomId }) {
             />
             <div className="h-2" />
             <div className="flex-1 w-full h-full">
-              <DataTable data={displayTodos} onMarkDone={handleMarkDone} scrollToPreviewIndex={scrollToPreviewIndex} />
+              <DataTable data={displayTodos} onMarkDone={handleMarkDone} onTogglePriority={handleTogglePriority} scrollToPreviewIndex={scrollToPreviewIndex} />
             </div>
           </section>
         </div>
diff --git a/mast-react-vite/src/components/ui/data-table.tsx b/mast-react-vite/src/components/ui/data-table.tsx
index d0950b6..8234f53 100644
--- a/mast-react-vite/src/components/ui/data-table.tsx
+++ b/mast-react-vite/src/components/ui/data-table.tsx
@@ -13,10 +13,11 @@ import {
 interface DataTableProps<TData> {
   data: TData[];
   onMarkDone?: (selectedIds: number[]) => void;
+  onTogglePriority?: (taskId: number) => void;
   scrollToPreviewIndex?: number; // Index of item to scroll to (for preview positioning)
 }
 
-export function DataTable<TData>({ data, onMarkDone, scrollToPreviewIndex }: DataTableProps<TData>) {
+export function DataTable<TData>({ data, onMarkDone, onTogglePriority, scrollToPreviewIndex }: DataTableProps<TData>) {
   const desktopScrollRef = useRef<HTMLDivElement>(null);
   const mobileScrollRef = useRef<HTMLDivElement>(null);
   
@@ -49,7 +50,7 @@ export function DataTable<TData>({ data, onMarkDone, scrollToPreviewIndex }: Dat
       <div className="hidden md:flex flex-col w-full">
         <ScrollArea ref={desktopScrollRef} className="h-[calc(100vh-12rem)] rounded-md border">
           {data.length ? (
-            data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} />)
+            data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} onTogglePriority={onTogglePriority} />)
           ) : (
             <div className="text-center py-4 text-muted-foreground">
               No results.
@@ -62,7 +63,7 @@ export function DataTable<TData>({ data, onMarkDone, scrollToPreviewIndex }: Dat
       <div className="md:hidden">
         <ScrollArea ref={mobileScrollRef} className="min-h-[120%] h-[calc(100vh)] border">
           {data.length ? (
-            data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} />)
+            data.map((item, index) => <Task key={index} data={item} onMarkDone={onMarkDone} onTogglePriority={onTogglePriority} />)
           ) : (
             <div className="text-center py-4 text-muted-foreground">
               No results.
diff --git a/mast-react-vite/src/components/ui/task.tsx b/mast-react-vite/src/components/ui/task.tsx
index 805c0a4..27f4f90 100644
--- a/mast-react-vite/src/components/ui/task.tsx
+++ b/mast-react-vite/src/components/ui/task.tsx
@@ -14,9 +14,10 @@ interface TaskProps {
   data: any;
   index?: number;
   onMarkDone?: (selectedIds: number[]) => void; // Callback to mark tasks as done
+  onTogglePriority?: (taskId: number) => void; // Callback to toggle task priority
 }
 
-export function Task({ selected, onSelect, data, onMarkDone }: TaskProps) {
+export function Task({ selected, onSelect, data, onMarkDone, onTogglePriority }: TaskProps) {
   // Track whether this task should be visible or exit-animating
   const [isVisible, setIsVisible] = React.useState(true);
   const { isSelected, toggleSelection, selectItem, sharedDragX, selectedItems, clearSelection} = useSelection();
@@ -192,16 +193,22 @@ export function Task({ selected, onSelect, data, onMarkDone }: TaskProps) {
         <div className="flex items-start gap-4 relative">
           <div className="flex-1 min-w-0">
           {/* Priority flag icon in top right */}
-          {displayPriority && (
-            <div className={`absolute -top-1 -right-1 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-red-500'}`} title="Priority task">
-              <Flag className="w-4 h-4" fill="currentColor" />
-            </div>
-          )}
-          {!displayPriority && (
-            <div className={`absolute -top-1 -right-1 ${data.completed === 2 || isPreviewPriority ? 'text-yellow-600' : 'text-gray-300'}`} title="Normal priority">
-              <Flag className="w-4 h-4" />
-            </div>
-          )}
+          <button 
+            className={`absolute -top-2 -right-2 cursor-pointer p-1 rounded z-10 ${
+              data.completed === 2 || isPreviewPriority 
+                ? 'text-yellow-600' 
+                : displayPriority 
+                  ? 'text-red-500' 
+                  : 'text-gray-300'
+            }`} 
+            title={`${displayPriority ? 'Priority' : ''} task (click to toggle)`}
+            onClick={(e) => {
+              e.stopPropagation();
+              onTogglePriority?.(data.id);
+            }}
+          >
+            <Flag className="w-4 h-4" fill={displayPriority ? "currentColor" : "none"} />
+          </button>
           
           {/* Display due date in bottom right */}
           {(data.due || (hasPreview && data.preview.due)) && (