diff --git a/web/src/pages/admin/service-status.tsx b/web/src/pages/admin/service-status.tsx
index c78cbb0d6..582b38cac 100644
--- a/web/src/pages/admin/service-status.tsx
+++ b/web/src/pages/admin/service-status.tsx
@@ -68,6 +68,8 @@ import {
 } from './utils';
 
 import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+
 import ServiceDetail from './service-detail';
 import TaskExecutorDetail from './task-executor-detail';
 
diff --git a/web/src/pages/admin/task-executor-detail.tsx b/web/src/pages/admin/task-executor-detail.tsx
index 55d2eef11..0adf6d4c0 100644
--- a/web/src/pages/admin/task-executor-detail.tsx
+++ b/web/src/pages/admin/task-executor-detail.tsx
@@ -1,5 +1,8 @@
 import dayjs from 'dayjs';
+import { isPlainObject } from 'lodash';
 import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+
 import {
   Bar,
   BarChart,
@@ -15,6 +18,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { formatDate, formatTime } from '@/utils/date';
+import ServiceDetail from './service-detail';
 
 interface TaskExecutorDetailProps {
   content?: AdminService.TaskExecutorInfo;
@@ -68,9 +72,15 @@ function CustomAxisTick({ x, y, payload }: any) {
 }
 
 function TaskExecutorDetail({ content }: TaskExecutorDetailProps) {
+  if (!isPlainObject(content)) {
+    return <ServiceDetail content={content} />;
+  }
+
   return (
     <section className="space-y-8">
       {Object.entries(content ?? {}).map(([name, data]) => {
+        console.log(data);
+
         const items = data.map((x) => ({
           ...x,
           done: Math.floor(Math.random() * 100),