diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index ddeb20e8d..d2b78bded 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -58,29 +58,21 @@ const RootApp = () => {
         ...antdTheme,
         token: {
           /* @see global.css, YOU MUST MODIFY BOTH DEFINITIONS AT THE SAME TIME! */
+          colorBgBase: browserTheme === "dark" ? "#17191c" : "#ffffff",
+          colorTextBase: browserTheme === "dark" ? "#fafaf9" : "#141414",
           colorPrimary: browserTheme === "dark" ? "#f97316" : "#ea580c",
           colorLink: browserTheme === "dark" ? "#f97316" : "#ea580c",
           colorInfo: browserTheme === "dark" ? "#478be6" : "#0969da",
           colorSuccess: browserTheme === "dark" ? "#57ab5a" : "#1a7f37",
           colorWarning: browserTheme === "dark" ? "#daaa3f" : "#eac54f",
           colorError: browserTheme === "dark" ? "#e5534b" : "#d1242f",
-          colorBgContainer: "var(--color-container)",
         },
         components: {
           Layout: {
             ...antdTheme?.components?.Layout,
             bodyBg: "transparent",
-            headerBg: "var(--color-container)",
             siderBg: "transparent",
           },
-          Table: {
-            ...antdTheme?.components?.Table,
-            bodySortBg: "var(--color-container)",
-            headerBg: "var(--color-container)",
-            headerSortActiveBg: "var(--color-container)",
-            headerSortHoverBg: "var(--color-container-hover)",
-            rowHoverBg: "var(--color-container-hover)",
-          },
         },
       }}
     >
diff --git a/ui/src/components/provider/ACMEDns01ProviderSelect.tsx b/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
index d761023b7..a6fb45953 100644
--- a/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
+++ b/ui/src/components/provider/ACMEDns01ProviderSelect.tsx
@@ -36,7 +36,7 @@ const ACMEDns01ProviderSelect = ({ filter, ...props }: ACMEDns01ProviderSelectPr
   const renderOption = (key: string) => {
     const provider = acmeDns01ProvidersMap.get(key);
     return (
-      <div className="flex items-center gap-2 overflow-hidden truncate">
+      <div className="flex items-center gap-2 truncate overflow-hidden">
         <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
       </div>
diff --git a/ui/src/components/provider/AccessProviderSelect.tsx b/ui/src/components/provider/AccessProviderSelect.tsx
index 3ba346387..7961eba2c 100644
--- a/ui/src/components/provider/AccessProviderSelect.tsx
+++ b/ui/src/components/provider/AccessProviderSelect.tsx
@@ -53,7 +53,7 @@ const AccessProviderSelect = ({ filter, showOptionTags, ...props }: AccessProvid
     const provider = accessProvidersMap.get(key) ?? ({ type: "", name: "", icon: "", usages: [] } as unknown as AccessProvider);
     return (
       <div className="flex max-w-full items-center justify-between gap-4 overflow-hidden">
-        <div className="flex items-center gap-2 overflow-hidden truncate">
+        <div className="flex items-center gap-2 truncate overflow-hidden">
           <Avatar shape="square" src={provider.icon} size="small" />
           <Typography.Text type={provider.builtin ? "secondary" : undefined} ellipsis>
             {t(provider.name)}
diff --git a/ui/src/components/provider/CAProviderSelect.tsx b/ui/src/components/provider/CAProviderSelect.tsx
index 5aef86d19..61a5f2c91 100644
--- a/ui/src/components/provider/CAProviderSelect.tsx
+++ b/ui/src/components/provider/CAProviderSelect.tsx
@@ -45,7 +45,7 @@ const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
   const renderOption = (key: string) => {
     if (key === "") {
       return (
-        <div className="flex items-center gap-2 overflow-hidden truncate">
+        <div className="flex items-center gap-2 truncate overflow-hidden">
           <Typography.Text className="italic" ellipsis italic>
             {t("provider.default_ca_provider.label")}
           </Typography.Text>
@@ -55,7 +55,7 @@ const CAProviderSelect = ({ filter, ...props }: CAProviderSelectProps) => {
 
     const provider = caProvidersMap.get(key);
     return (
-      <div className="flex items-center gap-2 overflow-hidden truncate">
+      <div className="flex items-center gap-2 truncate overflow-hidden">
         <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
       </div>
diff --git a/ui/src/components/provider/DeploymentProviderSelect.tsx b/ui/src/components/provider/DeploymentProviderSelect.tsx
index 77d2a4635..1ca5162a4 100644
--- a/ui/src/components/provider/DeploymentProviderSelect.tsx
+++ b/ui/src/components/provider/DeploymentProviderSelect.tsx
@@ -36,7 +36,7 @@ const DeploymentProviderSelect = ({ filter, ...props }: DeploymentProviderSelect
   const renderOption = (key: string) => {
     const provider = deploymentProvidersMap.get(key);
     return (
-      <div className="flex items-center gap-2 overflow-hidden truncate">
+      <div className="flex items-center gap-2 truncate overflow-hidden">
         <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
       </div>
diff --git a/ui/src/components/provider/NotificationProviderSelect.tsx b/ui/src/components/provider/NotificationProviderSelect.tsx
index 4f2164ee2..683c8fec2 100644
--- a/ui/src/components/provider/NotificationProviderSelect.tsx
+++ b/ui/src/components/provider/NotificationProviderSelect.tsx
@@ -36,7 +36,7 @@ const NotificationProviderSelect = ({ filter, ...props }: NotificationProviderSe
   const renderOption = (key: string) => {
     const provider = notificationProvidersMap.get(key);
     return (
-      <div className="flex items-center gap-2 overflow-hidden truncate">
+      <div className="flex items-center gap-2 truncate overflow-hidden">
         <Avatar shape="square" src={provider?.icon} size="small" />
         <Typography.Text ellipsis>{t(provider?.name ?? "")}</Typography.Text>
       </div>
diff --git a/ui/src/components/workflow/node/ApplyNode.tsx b/ui/src/components/workflow/node/ApplyNode.tsx
index ff0d64bfe..ca5664474 100644
--- a/ui/src/components/workflow/node/ApplyNode.tsx
+++ b/ui/src/components/workflow/node/ApplyNode.tsx
@@ -33,7 +33,7 @@ const ApplyNode = ({ node, disabled }: ApplyNodeProps) => {
     }
 
     const config = (node.config as WorkflowNodeConfigForApply) ?? {};
-    return <Typography.Text className="truncate">{config.domains || "　"}</Typography.Text>;
+    return <Typography.Text className="truncate">{config.domains || "\u00A0"}</Typography.Text>;
   }, [node]);
 
   const formRef = useRef<ApplyNodeConfigFormInstance>(null);
diff --git a/ui/src/components/workflow/node/NotifyNode.tsx b/ui/src/components/workflow/node/NotifyNode.tsx
index 0ab418291..d652b3f76 100644
--- a/ui/src/components/workflow/node/NotifyNode.tsx
+++ b/ui/src/components/workflow/node/NotifyNode.tsx
@@ -42,7 +42,7 @@ const NotifyNode = ({ node, disabled }: NotifyNodeProps) => {
     return (
       <Flex className="size-full overflow-hidden" align="center" gap={8}>
         <Avatar shape="square" src={provider?.icon} size="small" />
-        <Typography.Text className="flex-1 truncate">{t(provider?.name ?? "　")}</Typography.Text>
+        <Typography.Text className="flex-1 truncate">{t(provider?.name ?? "\u00A0")}</Typography.Text>
         <Typography.Text className="truncate" type="secondary">
           {config.subject ?? ""}
         </Typography.Text>
diff --git a/ui/src/components/workflow/node/StartNode.tsx b/ui/src/components/workflow/node/StartNode.tsx
index 4b920bd92..b1540b638 100644
--- a/ui/src/components/workflow/node/StartNode.tsx
+++ b/ui/src/components/workflow/node/StartNode.tsx
@@ -44,7 +44,7 @@ const StartNode = ({ node, disabled }: StartNodeProps) => {
             ? t("workflow.props.trigger.auto")
             : config.trigger === WORKFLOW_TRIGGERS.MANUAL
               ? t("workflow.props.trigger.manual")
-              : "　"}
+              : "\u00A0"}
         </Typography.Text>
         <Typography.Text className="truncate" type="secondary">
           {config.trigger === WORKFLOW_TRIGGERS.AUTO ? config.triggerCron : ""}
diff --git a/ui/src/global.css b/ui/src/global.css
index b401f20ad..f5496404e 100644
--- a/ui/src/global.css
+++ b/ui/src/global.css
@@ -11,8 +11,6 @@
 @theme {
   --color-background: var(---twColorBackground);
   --color-foreground: var(---twColorForeground);
-  --color-container: var(---twColorContainer);
-  --color-container-hover: var(---twColorContainerHover);
   --color-primary: var(---twColorPrimary);
   --color-info: var(---twColorInfo);
   --color-success: var(---twColorSuccess);
@@ -24,8 +22,6 @@
   :root {
     ---twColorBackground: #ffffff;
     ---twColorForeground: #141414;
-    ---twColorContainer: #f9fafb;
-    ---twColorContainerHover: #e5e7eb;
     ---twColorPrimary: #f97316;
     ---twColorInfo: #478ce6;
     ---twColorSuccess: #59ab5c;
@@ -36,8 +32,6 @@
   .dark {
     ---twColorBackground: #17191c;
     ---twColorForeground: #fafaf9;
-    ---twColorContainer: #1e2124;
-    ---twColorContainerHover: #32373e;
     ---twColorPrimary: #ea580c;
     ---twColorInfo: #0969da;
     ---twColorSuccess: #1a7f37;
diff --git a/ui/src/pages/accesses/AccessList.tsx b/ui/src/pages/accesses/AccessList.tsx
index 5c1b09ee4..2e760ccb7 100644
--- a/ui/src/pages/accesses/AccessList.tsx
+++ b/ui/src/pages/accesses/AccessList.tsx
@@ -54,9 +54,9 @@ const AccessList = () => {
           <div className="flex max-w-full items-center gap-4 truncate overflow-hidden">
             <Avatar shape="square" src={accessProvidersMap.get(record.provider)?.icon} size={28} />
             <div className="flex max-w-full flex-col gap-1">
-              <Typography.Text ellipsis>{record.name}</Typography.Text>
+              <Typography.Text ellipsis>{record.name || "\u00A0"}</Typography.Text>
               <Typography.Text ellipsis type="secondary">
-                {t(accessProvidersMap.get(record.provider)?.name ?? "")}
+                {t(accessProvidersMap.get(record.provider)?.name ?? "") || "\u00A0"}
               </Typography.Text>
             </div>
           </div>
diff --git a/ui/src/pages/certificates/CertificateList.tsx b/ui/src/pages/certificates/CertificateList.tsx
index aebc892c6..49c0b4a3b 100644
--- a/ui/src/pages/certificates/CertificateList.tsx
+++ b/ui/src/pages/certificates/CertificateList.tsx
@@ -90,8 +90,8 @@ const CertificateList = () => {
       title: t("certificate.props.brand"),
       render: (_, record) => (
         <div className="flex max-w-full flex-col gap-1">
-          <Typography.Text>{record.issuerOrg}</Typography.Text>
-          <Typography.Text>{record.keyAlgorithm}</Typography.Text>
+          <Typography.Text>{record.issuerOrg || "\u00A0"}</Typography.Text>
+          <Typography.Text>{record.keyAlgorithm || "\u00A0"}</Typography.Text>
         </div>
       ),
     },
diff --git a/ui/src/pages/workflows/WorkflowDetail.tsx b/ui/src/pages/workflows/WorkflowDetail.tsx
index 2c04581b4..531ef7e8d 100644
--- a/ui/src/pages/workflows/WorkflowDetail.tsx
+++ b/ui/src/pages/workflows/WorkflowDetail.tsx
@@ -199,8 +199,8 @@ const WorkflowDetail = () => {
           <div className="mx-auto max-w-320">
             <div className="flex justify-between gap-2">
               <div>
-                <h1>{workflow.name || "　"}</h1>
-                <p className="mb-0 text-base text-gray-500">{workflow.description || "　"}</p>
+                <h1>{workflow.name || "\u00A0"}</h1>
+                <p className="mb-0 text-base text-gray-500">{workflow.description || "\u00A0"}</p>
               </div>
               <Flex gap="small">
                 {initialized
@@ -238,6 +238,7 @@ const WorkflowDetail = () => {
             </div>
 
             <Tabs
+              className="-mb-4"
               activeKey={tabValue}
               defaultActiveKey="orchestration"
               items={[
diff --git a/ui/src/pages/workflows/WorkflowList.tsx b/ui/src/pages/workflows/WorkflowList.tsx
index 03830b101..7e1e8e749 100644
--- a/ui/src/pages/workflows/WorkflowList.tsx
+++ b/ui/src/pages/workflows/WorkflowList.tsx
@@ -44,9 +44,9 @@ const WorkflowList = () => {
       ellipsis: true,
       render: (_, record) => (
         <div className="flex max-w-full flex-col gap-1">
-          <Typography.Text ellipsis>{record.name}</Typography.Text>
+          <Typography.Text ellipsis>{record.name || "\u00A0"}</Typography.Text>
           <Typography.Text ellipsis type="secondary">
-            {record.description || "　"}
+            {record.description || "\u00A0"}
           </Typography.Text>
         </div>
       ),
@@ -65,7 +65,7 @@ const WorkflowList = () => {
           return (
             <div className="flex max-w-full flex-col gap-1">
               <Typography.Text>{t("workflow.props.trigger.auto")}</Typography.Text>
-              <Typography.Text type="secondary">{record.triggerCron ?? ""}</Typography.Text>
+              <Typography.Text type="secondary">{record.triggerCron || "\u00A0"}</Typography.Text>
             </div>
           );
         }