diff --git a/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx b/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx
index 0716466f..90efd6fd 100644
--- a/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx
+++ b/frontend/src/pages/Deploy/Environment/List/components/EnvironmentModal.tsx
@@ -104,9 +104,13 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
                             const typeInfo = getBuildTypeInfo(type);
                             return (
                                 <Select.Option key={type} value={type}>
-                                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', color: typeInfo.color }}>
-                                        {typeInfo.icon}
-                                        {typeInfo.label}
+                                    <div style={{
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        gap: '4px',
+                                    }}>
+                                        <span style={{ color: typeInfo.color }}>{typeInfo.icon}</span>
+                                        <span style={{ color: typeInfo.color }}>{typeInfo.label}</span>
                                     </div>
                                 </Select.Option>
                             );
@@ -124,9 +128,13 @@ const EnvironmentModal: React.FC<EnvironmentModalProps> = ({
                             const typeInfo = getDeployTypeInfo(type);
                             return (
                                 <Select.Option key={type} value={type}>
-                                    <div style={{ display: 'inline-flex', alignItems: 'center', gap: '4px', color: typeInfo.color }}>
-                                        {typeInfo.icon}
-                                        {typeInfo.label}
+                                    <div style={{
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        gap: '4px',
+                                    }}>
+                                        <span style={{ color: typeInfo.color }}>{typeInfo.icon}</span>
+                                        <span style={{ color: typeInfo.color }}>{typeInfo.label}</span>
                                     </div>
                                 </Select.Option>
                             );
diff --git a/frontend/src/pages/Deploy/Environment/List/index.tsx b/frontend/src/pages/Deploy/Environment/List/index.tsx
index 63fe3698..6f21f275 100644
--- a/frontend/src/pages/Deploy/Environment/List/index.tsx
+++ b/frontend/src/pages/Deploy/Environment/List/index.tsx
@@ -1,6 +1,6 @@
 import React, {useState} from 'react';
 import {PageContainer} from '@ant-design/pro-layout';
-import {Button, message, Popconfirm, Space, Tag} from 'antd';
+import {Button, message, Popconfirm, Tag} from 'antd';
 import {PlusOutlined, EditOutlined, DeleteOutlined} from '@ant-design/icons';
 import {getEnvironmentPage, deleteEnvironment} from './service';
 import type {Environment, EnvironmentQueryParams} from './types';
@@ -35,6 +35,25 @@ const EnvironmentList: React.FC = () => {
         setModalVisible(true);
     };
 
+    const renderTag = (icon: React.ReactNode, label: string, color: string) => (
+        <div style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            padding: '0 7px',
+            fontSize: '14px',
+            lineHeight: '22px',
+            whiteSpace: 'nowrap',
+            background: color + '10',
+            border: `1px solid ${color}`,
+            borderRadius: '4px',
+            cursor: 'default',
+            gap: '4px',
+        }}>
+            {icon}
+            <span style={{ color }}>{label}</span>
+        </div>
+    );
+
     const columns: ProColumns<Environment>[] = [
         {
             title: '环境编码',
@@ -63,12 +82,7 @@ const EnvironmentList: React.FC = () => {
             render: (buildType) => {
                 if (!buildType) return '-';
                 const typeInfo = getBuildTypeInfo(buildType as BuildTypeEnum);
-                return (
-                    <Tag color={typeInfo.color} style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
-                        {typeInfo.icon}
-                        {typeInfo.label}
-                    </Tag>
-                );
+                return renderTag(typeInfo.icon, typeInfo.label, typeInfo.color);
             },
             filters: [
                 {text: 'Jenkins构建', value: BuildTypeEnum.JENKINS},
@@ -85,12 +99,7 @@ const EnvironmentList: React.FC = () => {
             render: (deployType) => {
                 if (!deployType) return '-';
                 const typeInfo = getDeployTypeInfo(deployType as DeployTypeEnum);
-                return (
-                    <Tag color={typeInfo.color} style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}>
-                        {typeInfo.icon}
-                        {typeInfo.label}
-                    </Tag>
-                );
+                return renderTag(typeInfo.icon, typeInfo.label, typeInfo.color);
             },
             filters: [
                 {text: 'Kubernetes集群部署', value: DeployTypeEnum.K8S},
@@ -114,30 +123,32 @@ const EnvironmentList: React.FC = () => {
             valueType: 'option',
             fixed: 'right',
             align: 'center',
-            render: (_, record) => [
-                <Button
-                    key="edit"
-                    type="link"
-                    icon={<EditOutlined/>}
-                    onClick={() => handleEdit(record)}
-                >
-                    编辑
-                </Button>,
-                <Popconfirm
-                    key="delete"
-                    title="确定要删除该环境吗？"
-                    description="删除后将无法恢复，请谨慎操作"
-                    onConfirm={() => handleDelete(record.id)}
-                >
+            render: (_, record) => (
+                <div style={{ display: 'flex', gap: '8px', justifyContent: 'center' }}>
                     <Button
                         type="link"
-                        danger
-                        icon={<DeleteOutlined/>}
+                        size="small"
+                        style={{ padding: 0 }}
+                        onClick={() => handleEdit(record)}
                     >
-                        删除
+                        <EditOutlined /> 编辑
                     </Button>
-                </Popconfirm>
-            ],
+                    <Popconfirm
+                        title="确定要删除该环境吗？"
+                        description="删除后将无法恢复，请谨慎操作"
+                        onConfirm={() => handleDelete(record.id)}
+                    >
+                        <Button
+                            type="link"
+                            size="small"
+                            danger
+                            style={{ padding: 0 }}
+                        >
+                            <DeleteOutlined /> 删除
+                        </Button>
+                    </Popconfirm>
+                </div>
+            ),
         },
     ];