diff --git a/src/pages/DashboardPage.tsx b/src/pages/DashboardPage.tsx
index cbf9bab..0727349 100644
--- a/src/pages/DashboardPage.tsx
+++ b/src/pages/DashboardPage.tsx
@@ -55,13 +55,13 @@ export default function DashboardPage() {
         <h3>Recent Tasks</h3>
         <table>
           <thead>
-            <tr><th>ID</th><th>Title</th><th>Status</th><th>Priority</th><th>Type</th><th>Subtype</th></tr>
+            <tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th><th>Type</th><th>Subtype</th></tr>
           </thead>
           <tbody>
             {(stats.recent_tasks || []).map((i) => (
               <tr key={i.id}>
-                <td>#{i.id}</td>
-                <td><a href={`/tasks/${i.id}`}>{i.title}</a></td>
+                <td>{i.task_code || `#${i.id}`}</td>
+                <td><a href={`/tasks/${i.task_code || i.id}`}>{i.title}</a></td>
                 <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
                 <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
                 <td>{i.task_type}</td><td>{i.task_subtype || "-"}</td>
diff --git a/src/pages/MilestoneDetailPage.tsx b/src/pages/MilestoneDetailPage.tsx
index f5e27c5..87c3a94 100644
--- a/src/pages/MilestoneDetailPage.tsx
+++ b/src/pages/MilestoneDetailPage.tsx
@@ -31,8 +31,8 @@ export default function MilestoneDetailPage() {
   const [members, setMembers] = useState<ProjectMember[]>([])
   const [progress, setProgress] = useState<MilestoneProgress | null>(null)
   const [tasks, setTasks] = useState<MilestoneTask[]>([])
-  const [supports, setSupports] = useState<Task[]>([])
-  const [meetings, setMeetings] = useState<Task[]>([])
+  const [supports, setSupports] = useState<any[]>([])
+  const [meetings, setMeetings] = useState<any[]>([])
   const [activeTab, setActiveTab] = useState<'tasks' | 'supports' | 'meetings'>('tasks')
   const [showCreateTask, setShowCreateTask] = useState(false)
   const [showEditMilestone, setShowEditMilestone] = useState(false)
@@ -141,7 +141,7 @@ export default function MilestoneDetailPage() {
   if (!milestone) return <div className="loading">Loading...</div>
 
   const renderTaskRow = (t: MilestoneTask) => (
-    <tr key={t.id} className="clickable" onClick={() => navigate(`/tasks/${t.id}`)}>
+    <tr key={t.id} className="clickable" onClick={() => navigate(`/tasks/${t.task_code || t.id}`)}>
       <td>{t.task_code || t.id}</td>
       <td className="task-title">{t.title}</td>
       <td><span className={`badge status-${t.task_status || t.status}`}>{t.task_status || t.status}</span></td>
@@ -352,11 +352,11 @@ export default function MilestoneDetailPage() {
 
           {activeTab === 'supports' && (
             <table>
-              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
               <tbody>
                 {supports.map((i) => (
-                  <tr key={i.id} className="clickable" onClick={() => navigate(`/supports/${projectCode}/${id}/${i.id}`)}>
-                    <td>{i.id}</td>
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/supports/${projectCode}/${id}/${i.support_code || i.id}`)}>
+                    <td>{i.support_code || i.id}</td>
                     <td className="task-title">{i.title}</td>
                     <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
                     <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
@@ -369,11 +369,11 @@ export default function MilestoneDetailPage() {
 
           {activeTab === 'meetings' && (
             <table>
-              <thead><tr><th>#</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
+              <thead><tr><th>Code</th><th>Title</th><th>Status</th><th>Priority</th></tr></thead>
               <tbody>
                 {meetings.map((i) => (
-                  <tr key={i.id} className="clickable" onClick={() => navigate(`/meetings/${projectCode}/${id}/${i.id}`)}>
-                    <td>{i.id}</td>
+                  <tr key={i.id} className="clickable" onClick={() => navigate(`/meetings/${projectCode}/${id}/${i.meeting_code || i.id}`)}>
+                    <td>{i.meeting_code || i.id}</td>
                     <td className="task-title">{i.title}</td>
                     <td><span className={`badge status-${i.status}`}>{i.status}</span></td>
                     <td><span className={`badge priority-${i.priority}`}>{i.priority}</span></td>
diff --git a/src/pages/TasksPage.tsx b/src/pages/TasksPage.tsx
index 737e04c..165ff6e 100644
--- a/src/pages/TasksPage.tsx
+++ b/src/pages/TasksPage.tsx
@@ -64,7 +64,7 @@ export default function TasksPage() {
         </thead>
         <tbody>
           {tasks.map((t) => (
-            <tr key={t.id} onClick={() => navigate(`/tasks/${t.id}`)} className="clickable">
+            <tr key={t.id} onClick={() => navigate(`/tasks/${t.task_code || t.id}`)} className="clickable">
               <td>{t.task_code || t.id}</td>
               <td className="task-title">{t.title}</td>
               <td><span className="badge" style={{ backgroundColor: statusColors[t.status] || '#ccc' }}>{t.status}</span></td>