diff --git a/src/modules/pages/connection/connection.ts b/src/modules/pages/connection/connection.ts
index a804c35..b604354 100644
--- a/src/modules/pages/connection/connection.ts
+++ b/src/modules/pages/connection/connection.ts
@@ -36,6 +36,10 @@ export class Connection extends BI.Widget {
                 } else {
                     this.listView.populate(BI.createItems(this.renderItems()));
                 }
+            } else {
+                this.listView.populate(BI.createItems(this.renderEmpty()));
+                this.connectionTitleWidget.setText('');
+                this.connectionEditWidget.setVisible(false);
             }
         },
     }
@@ -175,6 +179,12 @@ export class Connection extends BI.Widget {
         }];
     }
 
+    private renderEmpty() {
+        return [{
+            type: Layout,
+        }];
+    }
+
     private hasRegistered() {
         const allDatabaseTypes = getAllDatabaseTypes();
         switch (this.model.connectionSelectedOne.connectionType) {
diff --git a/src/modules/pages/connection/list/list.model.ts b/src/modules/pages/connection/list/list.model.ts
index c3d08aa..4e76792 100644
--- a/src/modules/pages/connection/list/list.model.ts
+++ b/src/modules/pages/connection/list/list.model.ts
@@ -12,6 +12,10 @@ export class ConnectionListModel extends Model<{
 }> {
     context = ['connections', 'connectionSelected'];
 
+    computed = {
+        shwoType: () => BI.size(this.model.connections) > 0 ? 'list' : 'none',
+    }
+
     actions = {
         setConnections: ():Promise<void> => api.getConnectionlist().then(data => {
             if (BI.size(data.data) > 0) {
diff --git a/src/modules/pages/connection/list/list.ts b/src/modules/pages/connection/list/list.ts
index a208382..ef2d6ce 100644
--- a/src/modules/pages/connection/list/list.ts
+++ b/src/modules/pages/connection/list/list.ts
@@ -1,5 +1,5 @@
 import { shortcut, store } from '@core/core';
-import { CenterAdapt, Label, Layout, Vtape, Loader } from 'ui';
+import { CenterAdapt, Label, Layout, Vtape, Loader, Tab } from 'ui';
 import { ListItemXtype } from './list_item/list_item';
 import { ConnectionListModel, ConnectionListModelXtype } from './list.model';
 import { getCreator, getDatabaseType } from './list.service';
@@ -11,6 +11,7 @@ export class ConnectionList extends BI.LoadingPane {
     model: ConnectionListModel['model'];
 
     groupWidget: any;
+    tab: any;
 
     beforeInit(cb: Function) {
         this.store.setConnections().then(() => {
@@ -24,44 +25,57 @@ export class ConnectionList extends BI.LoadingPane {
             this.groupWidget.populate(this.renderList(0, this.groupWidget.times * 50));
             this.groupWidget.times = times;
         },
+        shwoType: (type: 'list' | 'none') => {
+            this.tab.setSelect(type);
+        },
     }
 
     render() {
-        if (BI.size(this.model.connections) === 0) {
-            return {
-                type: CenterAdapt,
-                items: [
-                    {
-                        type: Vtape,
-                        width: 260,
-                        height: 150,
+        return {
+            type: Tab,
+            single: true,
+            showIndex: this.model.shwoType,
+            ref: (_ref: any) => {
+                this.tab = _ref;
+            },
+            cardCreator: (index: 'list' | 'none') => {
+                if (index === 'none') {
+                    return {
+                        type: CenterAdapt,
                         items: [
                             {
-                                el: {
-                                    type: Layout,
-                                    cls: 'data-connection-background',
-                                },
-                                height: 130,
-                            },
-                            {
-                                type: Label,
-                                cls: 'bi-tips',
-                                text: BI.i18nText('Dec-Dcm_Connection_None'),
+                                type: Vtape,
+                                width: 260,
+                                height: 150,
+                                items: [
+                                    {
+                                        el: {
+                                            type: Layout,
+                                            cls: 'data-connection-background',
+                                        },
+                                        height: 130,
+                                    },
+                                    {
+                                        type: Label,
+                                        cls: 'bi-tips',
+                                        text: BI.i18nText('Dec-Dcm_Connection_None'),
+                                    },
+                                ],
                             },
                         ],
+                    };
+                }
+                
+                return {
+                    type: Loader,
+                    itemsCreator: (options: {times: number}, populate) => {
+                        populate(this.renderList((options.times - 1) * 50, options.times * 50));
                     },
-                ],
-            };
-        }
-        
-        return {
-            type: Loader,
-            itemsCreator: (options: {times: number}, populate) => {
-                populate(this.renderList((options.times - 1) * 50, options.times * 50));
-            },
-            hasNext: options => options.times * 50 < BI.size(this.model.connections),
-            ref: (_ref: any) => {
-                this.groupWidget = _ref;
+                    hasNext: options => options.times * 50 < BI.size(this.model.connections),
+                    ref: (_ref: any) => {
+                        this.groupWidget = _ref;
+                    },
+                };
             },
         };
     }