diff --git a/src/modules/pages/connection_pool/connection_pool.ts b/src/modules/pages/connection_pool/connection_pool.ts
index 7a449e3..c3585a5 100644
--- a/src/modules/pages/connection_pool/connection_pool.ts
+++ b/src/modules/pages/connection_pool/connection_pool.ts
@@ -1,5 +1,5 @@
 import { shortcut, store } from '@core/core';
-import { ButtonGroup, Htape, Vtape, Label, Vertical, Layout, CenterAdapt } from 'ui';
+import { Htape, Vtape, Label, Layout, CenterAdapt, Loader } from 'ui';
 import { ConnectionPoolModel, ConnectionPoolModelXtype } from './connection_pool.model';
 import { ListItemXtype } from './list_item/list_item';
 import { PoolXtype } from './pool/pool';
@@ -7,7 +7,6 @@ export const ConnectionPoolXtype = 'dec.dcm.connection_pool';
 @shortcut(ConnectionPoolXtype)
 @store(ConnectionPoolModelXtype)
 export class ConnectionPool extends BI.Widget {
-    groupWidget: any;
     title: any;
 
     model: ConnectionPoolModel['model'];
@@ -44,14 +43,11 @@ export class ConnectionPool extends BI.Widget {
                                 height: 40,
                             },
                             {
-                                type: ButtonGroup,
-                                layouts: [{
-                                    type: Vertical,
-                                }],
-                                items: this.renderList(),
-                                ref: (_ref: any) => {
-                                    this.groupWidget = _ref;
+                                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),
                             },
                         ],
                     },
@@ -113,10 +109,10 @@ export class ConnectionPool extends BI.Widget {
         };
     }
 
-    private renderList() {
+    private renderList(start = 0, end = 0) {
         const defaultSelected = this.model.connectionJDBC.length > 0 ? this.model.connectionJDBC[0].connectionName : '';
         
-        return this.model.connectionJDBC.map(item => {
+        return this.model.connectionJDBC.slice(start, end).map(item => {
             return {
                 type: ListItemXtype,
                 name: item.connectionName,
diff --git a/src/modules/pages/connection_pool/list_item/list_item.ts b/src/modules/pages/connection_pool/list_item/list_item.ts
index cfbc083..baf8d3c 100644
--- a/src/modules/pages/connection_pool/list_item/list_item.ts
+++ b/src/modules/pages/connection_pool/list_item/list_item.ts
@@ -21,6 +21,8 @@ export class ListItem extends BI.BasicButton {
                 {
                     type: Label,
                     text: this.options.name,
+                    width: 250,
+                    textAlign: 'left',
                 },
             ],
         };