diff --git a/locane/src/components/Tasks.css b/locane/src/components/Tasks.css
index 7b7f4a0d..9c1e514b 100644
--- a/locane/src/components/Tasks.css
+++ b/locane/src/components/Tasks.css
@@ -93,6 +93,9 @@
 .task-box.status-completed:hover .task-thumbnail-wrapper {
   display: block;
 }
+.task-box.status-completed:hover .task-status-info {
+  display: none;
+}
 
 /* ====== TASK CONTENT ====== */
 .main-content-area {
@@ -123,25 +126,78 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 1rem;
-  padding-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
+  padding-bottom: 0.5rem;
   border-bottom: 2px solid #f7fafc;
 }
 
-.task-header h3 {
+.task-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.task-status-info {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+}
+
+.task-id-row {
+  margin-bottom: 0.75rem;
+}
+
+.task-name {
   margin: 0;
   color: #2d3748;
-  font-size: 1.1rem;
+  font-size: 30px;
   font-weight: 600;
+  line-height: 1.2;
+}
+
+.task-project-name {
+  margin: 0;
+  color: #718096;
+  font-size: 15px;
+  font-weight: 400;
 }
 
 .task-id {
   color: #718096;
-  font-size: 0.8rem;
+  font-size: 10px;
   background: #f7fafc;
   padding: 0.2rem 0.5rem;
   border-radius: 4px;
   font-family: monospace;
+  display: inline-block;
+}
+
+.status-indicator {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.status-indicator.status-running {
+  background-color: #1976d2;
+}
+
+.status-indicator.status-completed {
+  background-color: #2e7d32;
+}
+
+.status-indicator.status-failed {
+  background-color: #d32f2f;
+}
+
+.status-indicator.status-canceled {
+  background-color: #757575;
+}
+
+.status-indicator.status-queued {
+  background-color: #f57c00;
 }
 
 .task-content {
@@ -149,13 +205,7 @@
   flex-grow: 1;
 }
 
-.task-name {
-  color: #4a5568;
-  margin: 0 0 1.25rem 0;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 1.4;
-}
+
 
 /* ====== PROGRESS ====== */
 .task-progress {
@@ -231,12 +281,41 @@
 .status-canceled { background-color: #f5f5f5; color: #757575; }
 .status-queued { background-color: #fff3e0; color: #f57c00; }
 
-/* Task box status borders */
-.task-box.status-running { border-left: 4px solid #1976d2; }
-.task-box.status-completed { border-left: 4px solid #2e7d32; }
-.task-box.status-failed { border-left: 4px solid #d32f2f; }
-.task-box.status-canceled { border-left: 4px solid #757575; }
-.task-box.status-queued { border-left: 4px solid #f57c00; }
+.task-box.status-running {
+  border-left: 8px solid #1976d2;
+  border-right: 2px solid #1976d2;
+  border-top: 2px solid #1976d2;
+  border-bottom: 2px solid #1976d2;
+}
+
+.task-box.status-completed {
+  border-left: 8px solid #2e7d32;
+  border-right: 2px solid #2e7d32;
+  border-top: 2px solid #2e7d32;
+  border-bottom: 2px solid #2e7d32;
+}
+
+.task-box.status-failed {
+  border-left: 8px solid #d32f2f;
+  border-right: 2px solid #d32f2f;
+  border-top: 2px solid #d32f2f;
+  border-bottom: 2px solid #d32f2f;
+}
+
+.task-box.status-canceled {
+  border-left: 8px solid #757575;
+  border-right: 2px solid #757575;
+  border-top: 2px solid #757575;
+  border-bottom: 2px solid #757575;
+}
+
+.task-box.status-queued {
+  border-left: 8px solid #f57c00;
+  border-right: 2px solid #f57c00;
+  border-top: 2px solid #f57c00;
+  border-bottom: 2px solid #f57c00;
+}
+
 
 /* ====== ACTION BUTTONS ====== */
 .task-actions {
@@ -244,7 +323,7 @@
   gap: 8px;
   margin-top: 12px;
   flex-wrap: nowrap; /* keep buttons on one line */
-  justify-content: space-between; /* spread View / Export / Delete */
+  justify-content: flex-start; /* align buttons to the left */
 }
 
 .task-actions button {
@@ -261,8 +340,7 @@
 .btn-delete { background-color: #f44336; color: white; }
 .btn-delete:hover { background-color: #d32f2f; }
 
-.btn-view { background-color: #2196f3; color: white; }
-.btn-view:hover { background-color: #1976d2; }
+
 
 .btn-export { background-color: #4caf50; color: white; }
 .btn-export:hover { background-color: #2e7d32; }
diff --git a/locane/src/components/Tasks.jsx b/locane/src/components/Tasks.jsx
index e2c31d23..bbe6ee96 100644
--- a/locane/src/components/Tasks.jsx
+++ b/locane/src/components/Tasks.jsx
@@ -71,16 +71,21 @@ const TaskBox = ({ task, onAction, onShowDeleteDialog, fetchJSON, isDeleteDialog
     >
       <div className="main-content-area">
         <div className="task-header">
-            <h3>{task.projectName}</h3>
+            <div className="task-info">
+                <h3 className="task-name">{task.taskName}</h3>
+                <p className="task-project-name">{task.projectName}</p>
+            </div>
             <div className="task-status-info">
+                <div className={`status-indicator ${getStatusClass(effectiveStatus)}`}></div>
                 <span className={`status-badge ${getStatusClass(effectiveStatus)}`}>
                     {getStatusText(effectiveStatus)}
                 </span>
-                <span className="task-id">ID: {task.id}</span>
             </div>
         </div>
+        <div className="task-id-row">
+            <span className="task-id">{task.id}</span>
+        </div>
         <div className="task-content">
-            <p className="task-name">{task.taskName}</p>
             {effectiveStatus === 30 && lastError && (
               <p className="task-error"><strong>Error:</strong> {lastError}</p>
             )}
@@ -114,7 +119,6 @@ const TaskBox = ({ task, onAction, onShowDeleteDialog, fetchJSON, isDeleteDialog
             )}
             {effectiveStatus === 40 && (
                 <>
-                <button className="btn-view" onClick={() => handleAction('view')}>View</button>
                 <Export 
                   projectId={task.projectId} 
                   taskId={task.id} 
@@ -262,7 +266,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
           <>
             {categorizedTasks.running.length > 0 && (
               <div className="task-category">
-                <h3>Running Tasks ({categorizedTasks.running.length})</h3>
                 <div className="tasks-grid">
                   {categorizedTasks.running.map((task) => (
                     <TaskBox 
@@ -281,7 +284,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
             )}
             {categorizedTasks.completed.length > 0 && (
               <div className="task-category">
-                <h3>Completed Tasks ({categorizedTasks.completed.length})</h3>
                 <div className="tasks-grid">
                   {categorizedTasks.completed.map((task) => (
                     <TaskBox 
@@ -300,7 +302,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
             )}
             {categorizedTasks.failed.length > 0 && (
               <div className="task-category">
-                <h3>Failed Tasks ({categorizedTasks.failed.length})</h3>
                 <div className="tasks-grid">
                   {categorizedTasks.failed.map((task) => (
                     <TaskBox 
@@ -319,7 +320,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
             )}
             {categorizedTasks.canceled.length > 0 && (
               <div className="task-category">
-                <h3>Canceled Tasks ({categorizedTasks.canceled.length})</h3>
                 <div className="tasks-grid">
                   {categorizedTasks.canceled.map((task) => (
                     <TaskBox 
@@ -338,7 +338,6 @@ const Tasks = ({ runningTasks, loading, onRefresh, onTaskAction ,isViewing,exitV
             )}
             {categorizedTasks.queued.length > 0 && (
               <div className="task-category">
-                <h3>Queued Tasks ({categorizedTasks.queued.length})</h3>
                 <div className="tasks-grid">
                   {categorizedTasks.queued.map((task) => (
                     <TaskBox