diff --git a/org.eclipse.mdm.application/src/main/webapp/package-lock.json b/org.eclipse.mdm.application/src/main/webapp/package-lock.json
index ea11b62..7522fe1 100644
--- a/org.eclipse.mdm.application/src/main/webapp/package-lock.json
+++ b/org.eclipse.mdm.application/src/main/webapp/package-lock.json
@@ -1302,6 +1302,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
       "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
       "requires": {
         "color-convert": "^1.9.0"
       }
@@ -1885,7 +1886,7 @@
     "bootstrap": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
-      "integrity": "sha1-DrNxryyESOjCEEEdDLgkpkCaEr4="
+      "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
     },
     "brace-expansion": {
       "version": "1.1.11",
@@ -2182,6 +2183,7 @@
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
       "integrity": "sha1-GMSasWoDe26wFSzIPjRxM4IVtm4=",
+      "dev": true,
       "requires": {
         "ansi-styles": "^3.2.1",
         "escape-string-regexp": "^1.0.5",
@@ -2420,6 +2422,7 @@
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
       "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
+      "dev": true,
       "requires": {
         "color-name": "1.1.3"
       }
@@ -2427,7 +2430,8 @@
     "color-name": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+      "dev": true
     },
     "colors": {
       "version": "1.1.2",
@@ -3371,7 +3375,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "eslint-scope": {
       "version": "4.0.0",
@@ -4906,7 +4911,8 @@
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+      "dev": true
     },
     "has-unicode": {
       "version": "2.0.1",
@@ -6195,6 +6201,7 @@
       "version": "2.2.5",
       "resolved": "https://registry.npmjs.org/karma-mocha-reporter/-/karma-mocha-reporter-2.2.5.tgz",
       "integrity": "sha1-FRIAlejtgZGG5HoLAS8810GJVWA=",
+      "dev": true,
       "requires": {
         "chalk": "^2.1.0",
         "log-symbols": "^2.1.0",
@@ -6204,12 +6211,14 @@
         "ansi-regex": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
+          "dev": true
         },
         "strip-ansi": {
           "version": "4.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
           "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
+          "dev": true,
           "requires": {
             "ansi-regex": "^3.0.0"
           }
@@ -6419,6 +6428,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz",
       "integrity": "sha512-VeIAFslyIerEJLXHziedo2basKbMKtTw3vfn5IzG0XTjhAVEJyNHnL2p7vc+wBDSdQuUpNw3M2u6xb9QsAY5Eg==",
+      "dev": true,
       "requires": {
         "chalk": "^2.0.1"
       }
@@ -9697,6 +9707,11 @@
         "extend-shallow": "^3.0.0"
       }
     },
+    "split.js": {
+      "version": "1.5.11",
+      "resolved": "https://registry.npmjs.org/split.js/-/split.js-1.5.11.tgz",
+      "integrity": "sha512-ec0sAbWnaMGpNHWo1ZgIlF3Mx7GzSyaO0GlcEBZGIFZQwYPPkbDV6JRpDmpzIshVig7USREuEPudy0ygQaskXg=="
+    },
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "http://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -9987,6 +10002,7 @@
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
       "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
+      "dev": true,
       "requires": {
         "has-flag": "^3.0.0"
       }
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html
index b240a99..21c6c65 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.html
@@ -11,9 +11,8 @@
  * SPDX-License-Identifier: EPL-2.0
  *
  ********************************************************************************-->
-
-<vertical-split-pane primary-component-minsize="{{minWidthLeft()}}" secondary-component-minsize="{{minWidthRight()}}" primary-component-initialratio="{{initRatio()}}">
-  <div class="split-pane-content-primary">
+ <div class="mainnavigation">
+  <div id="leftsidenav" class="split">
     <nav class="navbar navbar-default navbar-vertical bg-light">
       <div class="container-fluid">
         <div class="" id="bs-admin-navbar">
@@ -29,7 +28,7 @@
       </div>
     </nav>
   </div>
-  <div class="split-pane-content-secondary">
+  <div id="rightsidenav" class="split">
     <div class="navigator-content" (scroll)=onScroll($event)>
       <router-outlet></router-outlet>
       <div *ngIf="scrollBtnVisible" style="position: fixed; bottom: 30px; right: 35px;">
@@ -37,4 +36,4 @@
       </div>
     </div>
   </div>
-</vertical-split-pane>
+</div>
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts
index f784dfe..41a02e2 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin-modules.component.ts
@@ -13,11 +13,10 @@
  ********************************************************************************/
 
 
-import {Component} from '@angular/core';
+import {Component, AfterViewInit} from '@angular/core';
 import {Router} from '@angular/router';
-
+import Split from 'split.js';
 import { TRANSLATE } from '../core/mdm-core.module';
-import { SplitPaneModule } from 'ng2-split-pane/lib/ng2-split-pane';
 
 @Component({
   selector: 'admin-modules',
@@ -25,11 +24,13 @@
   styleUrls: ['./admin-modules.component.css'],
   providers: []
 })
-export class AdminModulesComponent {
+export class AdminModulesComponent implements AfterViewInit {
 
   div: any;
   scrollBtnVisible = false;
 
+  split: Split;
+
   links = [
     { name: TRANSLATE('administration.admin-modules.preferences'), path: 'preferences'},
     { name: TRANSLATE('administration.admin-modules.extsystems'), path: 'extsystems'}
@@ -46,7 +47,23 @@
   }
 
   initRatio() {
-    return Math.max(200 / window.innerWidth, 0.20);
+    return Math.floor(Math.max(250 / window.innerWidth, 0.20) * 100);
+  }
+  initRatioRight() {
+    return 100 - this.initRatio();
+  }
+  ngAfterViewInit(): void {
+    this.split = Split(['#leftsidenav', '#rightsidenav'], {
+      sizes: [this.initRatio(), this.initRatioRight()],
+      minSize: this.minWidthLeft(),
+      gutterSize: 10,
+      gutterStyle: function (dimension, gutterSize) {
+        return {
+          'width': gutterSize + 'px',
+          'height': (document.getElementById('leftsidenav').clientHeight - 5) + 'px'
+        }
+      },
+    });
   }
 
   onScrollTop() {
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts
index 68eaff0..59c1cf7 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/admin.module.ts
@@ -25,7 +25,6 @@
 import { AdminModulesComponent } from './admin-modules.component';
 import { AdminRoutingModule } from './admin-routing.module';
 import { ExtSystemService } from './extsystem.service';
-import { SplitPaneModule } from 'ng2-split-pane/lib/ng2-split-pane';
 import { PreferenceModule } from './preference.module';
 import { TableModule } from 'primeng/table';
 import { ContextMenuModule } from 'primeng/contextmenu';
@@ -39,7 +38,6 @@
         MDMCoreModule,
         FormsModule,
         ReactiveFormsModule,
-        SplitPaneModule,
         PreferenceModule,
         TableModule,
         ContextMenuModule,
diff --git a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts
index 02e0ab8..5783bfd 100644
--- a/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts
+++ b/org.eclipse.mdm.application/src/main/webapp/src/app/administration/extsystem-editor.component.ts
@@ -312,8 +312,8 @@
             this.translateService.instant('administration.extsystem.err-cannot-save-ext-system-attr'), error);
           // restore values
           this.getAttributeFromNode(this.tmpExtSystemAttr, 'Name').value = this.getAttributeValueFromNode(this.tmpNode, 'Name');
-          this.getAttributeFromNode(this.tmpExtSystemAttr, 'Description').value = this.getAttributeValueFromNode(this.tmpNode, 'Description');
-          this.tmpExtSystemAttr.name = this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
+          this.getAttributeFromNode(this.tmpExtSystemAttr, 'Description').value = <string> this.getAttributeValueFromNode(this.tmpNode, 'Description');
+          this.tmpExtSystemAttr.name = <string> this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
           this.tmpNode = undefined;
        }
       );
@@ -325,7 +325,7 @@
     this.dialogExtSystemAttr = false;
     this.getAttributeFromNode(this.tmpExtSystemAttr, 'Name').value = this.getAttributeValueFromNode(this.tmpNode, 'Name');
     this.getAttributeFromNode(this.tmpExtSystemAttr, 'Description').value = this.getAttributeValueFromNode(this.tmpNode, 'Description');
-    this.tmpExtSystemAttr.name = this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
+    this.tmpExtSystemAttr.name = <string> this.getAttributeValueFromNode(this.tmpExtSystemAttr, 'Name');
     this.tmpExtSystemAttr = undefined;
   }
 
@@ -419,7 +419,7 @@
           this.getAttributeFromNode(this.tmpExtSystemMDMAttr, 'CompType').value = this.getAttributeValueFromNode(this.tmpNode, 'CompType');
           this.getAttributeFromNode(this.tmpExtSystemMDMAttr, 'CompName').value = this.getAttributeValueFromNode(this.tmpNode, 'CompName');
           this.getAttributeFromNode(this.tmpExtSystemMDMAttr, 'AttrName').value = this.getAttributeValueFromNode(this.tmpNode, 'AttrName');
-          this.tmpExtSystemMDMAttr.name = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'Name');
+          this.tmpExtSystemMDMAttr.name = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'Name');
           this.tmpNode = undefined;
         }
       );
@@ -528,26 +528,26 @@
   }
 
   getCatalogComponentStr() {
-    let type: string = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
+    let type: string = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
     let data: string[] = new Array();
     // sensor does not have catalog elements
     if (type !== undefined && type !== 'Sensor') {
-      let tmp = this.getCatalogComponents(type);
-      for (let i in tmp) {
-        data.push(tmp[i].name);
+      let components = this.getCatalogComponents(type);
+      for (let component of components) {
+        data.push(component.name);
       }
     }
     return data;
   }
 
   getAttributeComponentStr() {
-    let type: string = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
-    let comp: string = this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompName');
+    let type: string = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompType');
+    let comp: string = <string> this.getAttributeValueFromNode(this.tmpExtSystemMDMAttr, 'CompName');
     let data: string[] = new Array();
     if (type !== undefined && comp !== undefined) {
-      let tmp = this.getAttributeComponents(type, comp);
-      for (let i in tmp) {
-        data.push(tmp[i].name);
+      let components = this.getAttributeComponents(type, comp);
+      for (let component of components) {
+        data.push(component.name);
       }
     }
     return data;