diff --git a/TaskTracker.Web/src/components/NotesList.tsx b/TaskTracker.Web/src/components/NotesList.tsx
index 7dafdb4..70a4920 100644
--- a/TaskTracker.Web/src/components/NotesList.tsx
+++ b/TaskTracker.Web/src/components/NotesList.tsx
@@ -9,10 +9,10 @@ interface NotesListProps {
   notes: TaskNote[]
 }
 
-const NOTE_TYPE_CONFIG: Record<string, { label: string; color: string }> = {
-  [NoteType.PauseNote]: { label: 'Pause', color: '#f59e0b' },
-  [NoteType.ResumeNote]: { label: 'Resume', color: '#6366f1' },
-  [NoteType.General]: { label: 'General', color: '#64748b' },
+const NOTE_TYPE_CONFIG: Record<string, { label: string; bg: string; text: string }> = {
+  [NoteType.PauseNote]: { label: 'Pause', bg: 'bg-amber-500/10', text: 'text-amber-400' },
+  [NoteType.ResumeNote]: { label: 'Resume', bg: 'bg-blue-500/10', text: 'text-blue-400' },
+  [NoteType.General]: { label: 'General', bg: 'bg-white/5', text: 'text-[var(--color-text-secondary)]' },
 }
 
 function formatRelativeTime(dateStr: string): string {
@@ -68,12 +68,12 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
   return (
     <div>
       <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-[#64748b]">
+        <h3 className="text-[11px] font-medium text-[var(--color-text-secondary)] uppercase tracking-wider">
           Notes
         </h3>
         <button
           onClick={() => setShowInput(true)}
-          className="p-1 rounded hover:bg-white/5 text-[#64748b] hover:text-white transition-colors"
+          className="p-1 rounded hover:bg-white/5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
         >
           <Plus size={14} />
         </button>
@@ -86,25 +86,21 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
             <div key={note.id} className="text-sm">
               <div className="flex items-center gap-2 mb-1">
                 <span
-                  className="text-[10px] font-semibold uppercase px-1.5 py-0.5 rounded-full"
-                  style={{
-                    backgroundColor: typeConfig.color + '20',
-                    color: typeConfig.color,
-                  }}
+                  className={`text-[10px] font-medium px-1.5 py-0.5 rounded ${typeConfig.bg} ${typeConfig.text}`}
                 >
                   {typeConfig.label}
                 </span>
-                <span className="text-[11px] text-[#64748b]">
+                <span className="text-[11px] text-[var(--color-text-tertiary)]">
                   {formatRelativeTime(note.createdAt)}
                 </span>
               </div>
-              <p className="text-[#c4c9d4] leading-relaxed">{note.content}</p>
+              <p className="text-[var(--color-text-primary)] leading-relaxed">{note.content}</p>
             </div>
           )
         })}
 
         {sortedNotes.length === 0 && !showInput && (
-          <p className="text-sm text-[#64748b] italic">No notes yet</p>
+          <p className="text-sm text-[var(--color-text-secondary)] italic">No notes yet</p>
         )}
 
         {showInput && (
@@ -121,7 +117,7 @@ export default function NotesList({ taskId, notes }: NotesListProps) {
               }
             }}
             placeholder="Add a note..."
-            className="w-full bg-[#0f1117] text-sm text-white px-3 py-2 rounded border border-transparent focus:border-indigo-500 outline-none placeholder-[#64748b]"
+            className="w-full bg-[var(--color-page)] text-sm text-[var(--color-text-primary)] px-3 py-2 rounded border border-transparent focus:border-[var(--color-accent)] outline-none placeholder-[var(--color-text-secondary)]"
           />
         )}
       </div>
diff --git a/TaskTracker.Web/src/components/SubtaskList.tsx b/TaskTracker.Web/src/components/SubtaskList.tsx
index 0b1bfc9..21b5e46 100644
--- a/TaskTracker.Web/src/components/SubtaskList.tsx
+++ b/TaskTracker.Web/src/components/SubtaskList.tsx
@@ -46,12 +46,12 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
   return (
     <div>
       <div className="flex items-center justify-between mb-3">
-        <h3 className="text-xs font-semibold uppercase tracking-wider text-[#64748b]">
+        <h3 className="text-[11px] font-medium text-[var(--color-text-secondary)] uppercase tracking-wider">
           Subtasks
         </h3>
         <button
           onClick={() => setShowInput(true)}
-          className="p-1 rounded hover:bg-white/5 text-[#64748b] hover:text-white transition-colors"
+          className="p-1 rounded hover:bg-white/5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
         >
           <Plus size={14} />
         </button>
@@ -67,13 +67,13 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
               onClick={() => handleToggle(subtask)}
             >
               {isCompleted ? (
-                <CheckSquare size={16} className="text-emerald-400 flex-shrink-0" />
+                <CheckSquare size={16} className="text-[var(--color-status-completed)] flex-shrink-0" />
               ) : (
-                <Square size={16} className="text-[#64748b] group-hover:text-white flex-shrink-0" />
+                <Square size={16} className="text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)] flex-shrink-0" />
               )}
               <span
                 className={`text-sm ${
-                  isCompleted ? 'line-through text-[#64748b]' : 'text-white'
+                  isCompleted ? 'line-through text-[var(--color-text-secondary)]' : 'text-[var(--color-text-primary)]'
                 }`}
               >
                 {subtask.title}
@@ -84,7 +84,7 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
 
         {showInput && (
           <div className="flex items-center gap-2 py-1.5 px-1">
-            <Square size={16} className="text-[#64748b] flex-shrink-0" />
+            <Square size={16} className="text-[var(--color-text-secondary)] flex-shrink-0" />
             <input
               ref={inputRef}
               type="text"
@@ -98,7 +98,7 @@ export default function SubtaskList({ taskId, subtasks }: SubtaskListProps) {
                 }
               }}
               placeholder="New subtask..."
-              className="flex-1 bg-[#0f1117] text-sm text-white px-2 py-1 rounded border border-transparent focus:border-indigo-500 outline-none placeholder-[#64748b]"
+              className="flex-1 bg-[var(--color-page)] text-sm text-[var(--color-text-primary)] px-2 py-1 rounded border border-transparent focus:border-[var(--color-accent)] outline-none placeholder-[var(--color-text-secondary)]"
             />
           </div>
         )}