diff --git a/public/images/access-icon.png b/public/images/access-icon.png
new file mode 100644
index 00000000..aeec9e6b
Binary files /dev/null and b/public/images/access-icon.png differ
diff --git a/src/views/link/AccessConfig/components/AccessCard/index.vue b/src/views/link/AccessConfig/components/AccessCard/index.vue
index 18828e2f..7ce0183d 100644
--- a/src/views/link/AccessConfig/components/AccessCard/index.vue
+++ b/src/views/link/AccessConfig/components/AccessCard/index.vue
@@ -1,14 +1,19 @@
 <template>
     <j-card
         hoverable
-        :class="['card-render', checked === data.id ? 'checked' : '']"
+        :class="[
+            'card-render',
+            'container',
+            checked === data.id ? 'checked' : '',
+        ]"
         @click="checkedChange(data.id)"
     >
         <div class="title">
-            <j-tooltip placement="topLeft" :title="data.name">{{
-                data.name
-            }}</j-tooltip>
+            <Ellipsis style="width: calc(100% - 100px); margin-bottom: 24px">
+                {{ data.name }}
+            </Ellipsis>
         </div>
+
         <slot name="other"></slot>
         <div class="desc">
             <j-tooltip placement="topLeft" :title="data.description">{{
@@ -46,16 +51,18 @@ const checkedChange = (id: string) => {
 .card-render {
     width: 100%;
     overflow: hidden;
-    background: url('/public/images/access.png') no-repeat;
-    background-size: 100% 100%;
-    height: 120px;
-
+    // background: url('/public/images/access.png') no-repeat;
+    // background-size: 100% 100%;
+    height: 140px;
+    background: #fafafa;
+    border: 1px solid #e6e6e6;
     .title {
-        width: calc(100% - 88px);
-        overflow: hidden;
+        font-style: normal;
         font-weight: 800;
-        white-space: nowrap;
-        text-overflow: ellipsis;
+        font-size: 16px;
+        line-height: 22px;
+        color: rgba(0, 0, 0, 0.85);
+        opacity: 0.85;
     }
 
     .desc {
@@ -78,8 +85,7 @@ const checkedChange = (id: string) => {
         width: 44px;
         height: 44px;
         color: #fff;
-        background-color: red;
-        background-color: #2f54eb;
+        background-color: @primary-color;
         transform: rotate(-45deg);
 
         > div {
@@ -92,11 +98,16 @@ const checkedChange = (id: string) => {
     }
     &.checked {
         position: relative;
-        color: #2f54eb;
-        border-color: #2f54eb;
+        color: @primary-color;
+        border-color: @primary-color;
+        z-index: 0;
         .checked-icon {
             display: block;
         }
     }
 }
+.container {
+    background: url('/public/images/access-icon.png') no-repeat;
+    background-position: bottom right;
+}
 </style>
diff --git a/src/views/link/AccessConfig/components/Network/index.vue b/src/views/link/AccessConfig/components/Network/index.vue
index 41bedd39..88e182f8 100644
--- a/src/views/link/AccessConfig/components/Network/index.vue
+++ b/src/views/link/AccessConfig/components/Network/index.vue
@@ -26,11 +26,7 @@
                     </PermissionButton>
                 </div>
                 <j-scrollbar height="480">
-                    <j-row
-                        :gutter="[24, 24]"
-                        v-if="networkList.length > 0"
-                        style="margin-right: 10px"
-                    >
+                    <j-row :gutter="[24, 24]" v-if="networkList.length > 0">
                         <j-col
                             :span="8"
                             v-for="item in networkList"
@@ -62,7 +58,7 @@
                                                     class="item"
                                                 >
                                                     <j-badge
-                                                        :color="getColor(i)"
+                                                        :status="getColor(i)"
                                                     />{{ i.address }}
                                                 </div>
                                             </div>
@@ -74,7 +70,7 @@
                                                 class="item"
                                             >
                                                 <j-badge
-                                                    :color="getColor(i)"
+                                                    :status="getColor(i)"
                                                     :text="i.address"
                                                 />
                                                 <span
@@ -115,12 +111,8 @@
                         新增
                     </PermissionButton>
                 </div>
-                <j-scrollbar height="480">
-                    <j-row
-                        :gutter="[24, 24]"
-                        v-if="procotolList.length > 0"
-                        style="margin-right: 10px"
-                    >
+                <j-scrollbar height="480" style="padding-right: 8px">
+                    <j-row :gutter="[24, 24]" v-if="procotolList.length > 0">
                         <j-col
                             :span="8"
                             v-for="item in procotolList"
@@ -177,24 +169,20 @@
                             </j-form>
                         </j-col>
                         <j-col :span="12">
-                            <j-scrollbar height="600">
-                                <div class="config-right">
-                                    <div class="config-right-item">
-                                        <div class="config-right-item-title">
-                                            接入方式
-                                        </div>
-                                        <div class="config-right-item-context">
+                            <j-scrollbar height="580">
+                                <div class="doc">
+                                    <div>
+                                        <h1>接入方式</h1>
+                                        <p>
                                             {{ provider.name }}
-                                        </div>
-                                        <div class="config-right-item-context">
+                                        </p>
+                                        <p>
                                             {{ provider.description }}
-                                        </div>
+                                        </p>
                                     </div>
-                                    <div class="config-right-item">
-                                        <div class="config-right-item-title">
-                                            消息协议
-                                        </div>
-                                        <div class="config-right-item-context">
+                                    <div>
+                                        <h1>消息协议</h1>
+                                        <p>
                                             {{
                                                 procotolList.find(
                                                     (i: any) =>
@@ -202,41 +190,32 @@
                                                         procotolCurrent,
                                                 ).name
                                             }}
-                                        </div>
-                                        <div
-                                            class="config-right-item-context"
-                                            v-if="config.document"
-                                        >
+                                        </p>
+                                        <p v-if="config.document">
                                             <Markdown
                                                 :source="config.document"
                                             />
-                                        </div>
+                                        </p>
                                     </div>
-                                    <div
-                                        class="config-right-item"
-                                        v-if="getNetworkCurrent()"
-                                    >
-                                        <div class="config-right-item-title">
-                                            网络组件
-                                        </div>
-                                        <div
+                                    <div v-if="getNetworkCurrent()">
+                                        <h1>网络组件</h1>
+                                        <p
                                             v-for="i in getNetworkCurrentData()"
                                             :key="i.address"
                                         >
                                             <j-badge
-                                                :color="getColor(i)"
+                                                :status="getColor(i)"
                                                 :text="i.address"
                                             />
-                                        </div>
+                                        </p>
                                     </div>
                                     <div
-                                        class="config-right-item"
                                         v-if="
                                             config.routes &&
                                             config.routes.length > 0
                                         "
                                     >
-                                        <div class="config-right-item-title">
+                                        <h1>
                                             {{
                                                 data.provider ===
                                                     'mqtt-server-gateway' ||
@@ -245,8 +224,8 @@
                                                     ? 'topic'
                                                     : 'URL信息'
                                             }}
-                                        </div>
-                                        <j-scrollbar height="200">
+                                        </h1>
+                                        <j-scrollbar height="400">
                                             <j-table
                                                 :pagination="false"
                                                 :rowKey="generateUUID()"
@@ -463,7 +442,7 @@ const getNetworkCurrentData = () =>
         ? networkList.value.find((i: any) => i.id === networkCurrent).addresses
         : [];
 
-const getColor = (i: any) => (i.health === -1 ? 'red' : 'green');
+const getColor = (i: any) => (i.health === -1 ? 'error' : 'processing');
 
 const getStream = (record: any) => {
     console.log(222, record);
diff --git a/src/views/link/AccessConfig/components/Provider/index.vue b/src/views/link/AccessConfig/components/Provider/index.vue
index bc35dab1..0c5c9dff 100644
--- a/src/views/link/AccessConfig/components/Provider/index.vue
+++ b/src/views/link/AccessConfig/components/Provider/index.vue
@@ -5,6 +5,18 @@
             <j-row :gutter="[24, 24]">
                 <j-col :span="12" v-for="item in items.list" :key="item.id">
                     <div class="provider">
+                        <div
+                            class="card-content-bg1"
+                            :style="{
+                                background: getBackgroundColor(),
+                            }"
+                        ></div>
+                        <div
+                            class="card-content-bg2"
+                            :style="{
+                                background: getBackgroundColor(),
+                            }"
+                        ></div>
                         <div class="box">
                             <div class="left">
                                 <div class="images">
@@ -47,6 +59,14 @@ const props = defineProps({
 
 const emit = defineEmits(['onClick']);
 
+const getBackgroundColor = () => {
+    return `linear-gradient(
+                188.4deg,
+                rgba(9, 46, 231, 0.03) 22.94%,
+                rgba(9, 46, 231, 0) 94.62%
+            )`;
+};
+
 const click = (value: object) => {
     emit('onClick', value);
 };
@@ -61,10 +81,11 @@ const click = (value: object) => {
 .provider {
     position: relative;
     width: 100%;
-    padding: 20px;
-    background: url('/public/images/access/background.png') no-repeat;
+    padding: 24px;
+    // background: url('/public/images/access/background.png') no-repeat;
     background-size: 100% 100%;
     border: 1px solid #e6e6e6;
+    overflow: hidden;
 
     &::before {
         position: absolute;
@@ -84,6 +105,33 @@ const click = (value: object) => {
         box-shadow: 0 0 24px rgba(#000, 0.1);
     }
 }
+.card-content-bg1 {
+    position: absolute;
+    right: -5%;
+    height: 100%;
+    width: 44.65%;
+    top: 0;
+    background: linear-gradient(
+        188.4deg,
+        rgba(229, 0, 18, 0.03) 22.94%,
+        rgba(229, 0, 18, 0) 94.62%
+    );
+    transform: skewX(-15deg);
+}
+
+.card-content-bg2 {
+    position: absolute;
+    right: -5%;
+    height: 100%;
+    width: calc(44.65% + 34px);
+    top: 0;
+    background: linear-gradient(
+        188.4deg,
+        rgba(229, 0, 18, 0.03) 22.94%,
+        rgba(229, 0, 18, 0) 94.62%
+    );
+    transform: skewX(-15deg);
+}
 
 .box {
     display: flex;
@@ -92,31 +140,40 @@ const click = (value: object) => {
     width: 100%;
     .left {
         display: flex;
-        width: calc(100% - 70px);
+        width: calc(100% - 100px);
         .images {
-            width: 64px;
-            height: 64px;
+            width: 88px;
+            height: 88px;
 
             img {
-                width: 100%;
+                width: 88px;
+                height: 88px;
             }
         }
 
         .context {
-            width: calc(100% - 84px);
-            margin: 10px;
+            width: calc(100% - 88px);
+            margin: 8px;
+            margin-left: 24px;
 
             .title {
-                font-weight: 600;
+                font-style: normal;
+                font-weight: 800;
+                font-size: 18px;
+                line-height: 22px;
+                color: rgba(0, 0, 0, 0.85);
+                opacity: 0.85;
             }
 
             .desc {
                 width: 100%;
-                margin-top: 10px;
-                overflow: hidden;
-                color: rgba(0, 0, 0, 0.55);
+                margin-top: 24px;
+                font-style: normal;
                 font-weight: 400;
-                font-size: 13px;
+                font-size: 12px;
+                line-height: 20px;
+                color: #666666;
+                overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
             }
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index c552b512..dd72d333 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -51,15 +51,12 @@
                                 <Ellipsis
                                     style="
                                         width: calc(100% - 100px);
-                                        margin-bottom: 10px;
+                                        margin-bottom: 20px;
                                         color: #2f54eb;
                                     "
                                 >
                                     <span
-                                        style="
-                                            font-size: 16px;
-                                            font-weight: 600;
-                                        "
+                                        class="card-title"
                                         @click.stop="handlEye(slotProps.id)"
                                     >
                                         {{ slotProps.name }}
@@ -71,11 +68,17 @@
                                         v-if="slotProps.channelInfo"
                                         class="card-item-content-text"
                                     >
-                                        <div class="card-item-content-text">
+                                        <div
+                                            class="card-item-content-text-title"
+                                        >
                                             {{ slotProps.channelInfo.name }}
                                         </div>
-                                        <div
-                                            class="card-item-content-text"
+                                        <Ellipsis
+                                            style="
+                                                width: calc(100% - 10px);
+                                                display: flex;
+                                                margin-top: 4px;
+                                            "
                                             v-if="
                                                 slotProps.channelInfo.addresses
                                             "
@@ -83,53 +86,51 @@
                                             <j-badge
                                                 :status="getStatus(slotProps)"
                                             />
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.channelInfo
-                                                        .addresses[0].address
-                                                }}</template>
+                                            <span>
                                                 {{
                                                     slotProps.channelInfo
                                                         .addresses[0].address
                                                 }}
-                                            </j-tooltip>
-                                        </div>
+                                            </span>
+                                        </Ellipsis>
                                     </j-col>
                                     <j-col
                                         :span="12"
                                         v-if="slotProps.protocolDetail"
+                                        class="card-item-content-text"
                                     >
-                                        <div class="card-item-content-text">
+                                        <div
+                                            class="card-item-content-text-title"
+                                        >
                                             协议
                                         </div>
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>{{
-                                                    slotProps.protocolDetail
-                                                        .name
-                                                }}</template>
+                                        <Ellipsis
+                                            style="
+                                                width: calc(100% - 10px);
+                                                display: flex;
+                                                margin-top: 4px;
+                                            "
+                                        >
+                                            <span>
                                                 {{
                                                     slotProps.protocolDetail
                                                         .name
                                                 }}
-                                            </j-tooltip>
-                                        </div>
+                                            </span>
+                                        </Ellipsis>
                                     </j-col>
                                 </j-row>
                                 <j-row>
-                                    <j-col :span="24">
-                                        <div class="card-item-content-text">
-                                            <j-tooltip>
-                                                <template #title>
-                                                    {{
-                                                        getDescription(
-                                                            slotProps,
-                                                        )
-                                                    }}
-                                                </template>
+                                    <j-col
+                                        :span="24"
+                                        class="card-item-content-description"
+                                    >
+                                        <j-tooltip>
+                                            <template #title>
                                                 {{ getDescription(slotProps) }}
-                                            </j-tooltip>
-                                        </div>
+                                            </template>
+                                            {{ getDescription(slotProps) }}
+                                        </j-tooltip>
                                     </j-col>
                                 </j-row>
                             </div>
@@ -207,8 +208,8 @@ const columns = [
         search: {
             type: 'select',
             options: async () => {
-                const res = await getProviders();
-                return (res?.result || []).map((item) => ({
+                const res: any = await getProviders();
+                return (res?.result || [])?.map((item: any) => ({
                     lable: item.name,
                     value: item.id,
                 }));
@@ -339,7 +340,7 @@ const getDescription = (slotProps: Record<string, any>) =>
           )?.description;
 
 const getStatus = (slotProps: Record<string, any>) =>
-    slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'success';
+    slotProps.channelInfo.addresses[0].health === -1 ? 'error' : 'processing';
 
 /**
  * 搜索
@@ -358,12 +359,29 @@ const handleSearch = (e: any) => {
 
 .card-item-content {
     min-height: 100px;
+    .card-title {
+        font-size: 18px;
+        font-weight: 800;
+        line-height: 22px;
+    }
+
     .card-item-content-box {
         min-height: 50px;
     }
-    .card-item-content-text {
-        color: rgba(0, 0, 0, 0.75);
+
+    .card-item-content-text-title {
+        font-style: normal;
+        font-weight: 400;
         font-size: 12px;
+        color: rgba(0, 0, 0, 0.75);
+        opacity: 0.75;
+    }
+    .card-item-content-description {
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        color: #666666;
         overflow: hidden; //超出的文本隐藏
         text-overflow: ellipsis; //溢出用省略号显示
         white-space: nowrap; //溢出不换行
diff --git a/src/views/link/Type/index.vue b/src/views/link/Type/index.vue
index 524f2da6..260db471 100644
--- a/src/views/link/Type/index.vue
+++ b/src/views/link/Type/index.vue
@@ -36,7 +36,7 @@
                         :status="slotProps.state.value"
                         :statusText="slotProps.state.text"
                         :statusNames="{
-                            enabled: 'success',
+                            enabled: 'processing',
                             disabled: 'error',
                         }"
                     >
@@ -143,10 +143,14 @@
                     </j-space>
                 </template>
                 <template #state="slotProps">
-                    <j-badge
+                    <BadgeStatus
                         :text="slotProps.state.text"
-                        :status="statusMap.get(slotProps.state.value)"
-                    />
+                        :status="slotProps.state.value"
+                        :statusNames="{
+                            enabled: 'processing',
+                            disabled: 'error',
+                        }"
+                    ></BadgeStatus>
                 </template>
                 <template #shareCluster="slotProps">
                     {{
@@ -171,15 +175,16 @@ import { getImage } from '@/utils/comm';
 import { supports, query, remove, start, shutdown } from '@/api/link/type';
 import { onlyMessage } from '@/utils/comm';
 import { useMenuStore } from 'store/menu';
+import BadgeStatus from '@/components/BadgeStatus/index.vue';
 
 const menuStory = useMenuStore();
 const tableRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const options = ref([]);
 
-const statusMap = new Map();
-statusMap.set('enabled', 'success');
-statusMap.set('disabled', 'error');
+// const statusMap = new Map();
+// statusMap.set('enabled', 'processing');
+// statusMap.set('disabled', 'error');
 
 const columns = [
     {
diff --git a/yarn.lock b/yarn.lock
index fcbb393b..6167c435 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3698,26 +3698,14 @@ jetlinks-store@^0.0.3:
   resolved "https://registry.npmjs.org/jetlinks-store/-/jetlinks-store-0.0.3.tgz"
   integrity sha512-AZf/soh1hmmwjBZ00fr1emuMEydeReaI6IBTGByQYhTmK1Zd5pQAxC7WLek2snRAn/HHDgJfVz2hjditKThl6Q==
 
-jetlinks-ui-components@^1.0.4:
-  version "1.0.4"
-  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.4.tgz#cd080b2d8320c7a03ed20f4c4c22e9a5c920a3c8"
-  integrity sha512-8xzDFH6jSGNrkbCMb+/FL/g9vB0c2GdsDq6QPUzgKFwzPiS+cPbpSxL0RNHez9MF7/NSSuY8wL4VaujiVXTpfg==
-  dependencies:
-    "@vueuse/core" "^9.12.0"
-    ant-design-vue "^3.2.15"
-    colorpicker-v3 "^2.10.2"
-    lodash-es "^4.17.21"
-    monaco-editor "^0.35.0"
-
 jetlinks-ui-components@^1.0.5:
   version "1.0.5"
-  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#0c4999d28c96c11ce266c5c9706cc895010450dc"
-  integrity sha512-buCf4mWJ8cUyn+12nRRLIr25MwG60nxqWH4pZidKy/npNKt5WQXLV8PmHmf04z0xpJUnW5yY3C7QBkYoAkSgVw==
+  resolved "http://47.108.170.157:9013/jetlinks-ui-components/-/jetlinks-ui-components-1.0.5.tgz#682711e0f69c141fff2c256db61a060c82539611"
+  integrity sha512-rQxD/YlE+XSAG7BWIcFTtKrCQJXk5o+TUgejyuUT/baBThJB6xYt1k2dQEdXyiwpukYen5FzaoLpelSD9SUegw==
   dependencies:
     "@vueuse/core" "^9.12.0"
     ant-design-vue "^3.2.15"
     colorpicker-v3 "^2.10.2"
-    jetlinks-ui-components "^1.0.4"
     lodash-es "^4.17.21"
     monaco-editor "^0.35.0"