diff --git a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
index 1621533..da698e1 100644
--- a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
+++ b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobDetail.vue
@@ -53,8 +53,10 @@
               <label>{{ t('Status') }}</label>
               <div class="status-display">
                 <n-checkbox v-model:checked="job.stopped" @update:checked="handleStatusChange">
-                  {{ job.stopped ? t('Stopped') : t('Running') }}
                 </n-checkbox>
+                <span :class="['status-badge', job.stopped ? 'stopped' : 'running']">
+                  {{ job.stopped ? t('Stopped') : t('Running') }}
+                </span>
               </div>
             </div>
             <div class="property-item">
@@ -352,23 +354,45 @@ onMounted(() => {
 
 .status-display {
   padding: 8px 0;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* 将checkbox选中状态（已停止）的背景改为红色 */
+.status-display :deep(.n-checkbox--checked .n-checkbox-box) {
+  background-color: #ef4444 !important;
+  border-color: #ef4444 !important;
+}
+
+.status-display :deep(.n-checkbox--checked .n-checkbox-box:hover) {
+  background-color: #dc2626 !important;
+  border-color: #dc2626 !important;
+}
+
+.status-display :deep(.n-checkbox--checked .n-checkbox-box__border) {
+  border-color: #ef4444 !important;
 }
 
 .status-badge {
-  padding: 4px 8px;
+  padding: 4px 10px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 500;
+  display: inline-block;
+  white-space: nowrap;
 }
 
 .status-badge.running {
-  background: #d1fae5;
-  color: #065f46;
+  background: #dcfce7;
+  color: #166534;
+  border: 1px solid rgba(34, 197, 94, 0.2);
 }
 
 .status-badge.stopped {
   background: #fee2e2;
   color: #dc2626;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
 .status-badge.enabled {
diff --git a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
index 6afa2c3..a7b081e 100644
--- a/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
+++ b/apps/jingrow/frontend/src/views/scheduledJobs/ScheduledJobList.vue
@@ -67,8 +67,10 @@
               </div>
               <div class="col-status">
                 <n-checkbox v-model:checked="job.stopped" @update:checked="() => handleStatusChange(job)">
-                  {{ job.stopped ? t('Stopped') : t('Running') }}
                 </n-checkbox>
+                <span :class="['status-badge', job.stopped ? 'stopped' : 'running']">
+                  {{ job.stopped ? t('Stopped') : t('Running') }}
+                </span>
               </div>
               <div class="col-last-execution">
                 <span v-if="job.last_execution" class="datetime-text">{{ formatDateTime(job.last_execution) }}</span>
@@ -475,6 +477,22 @@ onMounted(() => {
 .col-status {
   display: flex;
   align-items: center;
+  gap: 8px;
+}
+
+/* 将checkbox选中状态（已停止）的背景改为红色 */
+.col-status :deep(.n-checkbox--checked .n-checkbox-box) {
+  background-color: #ef4444 !important;
+  border-color: #ef4444 !important;
+}
+
+.col-status :deep(.n-checkbox--checked .n-checkbox-box:hover) {
+  background-color: #dc2626 !important;
+  border-color: #dc2626 !important;
+}
+
+.col-status :deep(.n-checkbox--checked .n-checkbox-box__border) {
+  border-color: #ef4444 !important;
 }
 
 .col-last-execution {
@@ -553,20 +571,24 @@ onMounted(() => {
 }
 
 .status-badge {
-  padding: 4px 8px;
+  padding: 4px 10px;
   border-radius: 6px;
   font-size: 12px;
   font-weight: 500;
+  display: inline-block;
+  white-space: nowrap;
 }
 
 .status-badge.running {
-  background: #d1fae5;
-  color: #065f46;
+  background: #dcfce7;
+  color: #166534;
+  border: 1px solid rgba(34, 197, 94, 0.2);
 }
 
 .status-badge.stopped {
   background: #fee2e2;
   color: #dc2626;
+  border: 1px solid rgba(239, 68, 68, 0.2);
 }
 
 .list-pagination {