diff --git a/package-lock.json b/package-lock.json
index 191b022e2..b80205b8e 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -1469,6 +1469,21 @@
       "integrity": "sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=",
       "dev": true
     },
+    "browser-detect": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmjs.org/browser-detect/-/browser-detect-0.2.27.tgz",
+      "integrity": "sha512-qjOSrFROblMbGhFbS1U7DkszptdRxAH7O9I3zZPT6oIbZKjhrudj+ZRuiQkuVtXs1/HEgMv+2zJuxZIsn/bLhQ==",
+      "requires": {
+        "core-js": "^2.5.4"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.5.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
+          "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
+        }
+      }
+    },
     "browserify-aes": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/browserify-aes/-/browserify-aes-1.2.0.tgz",
diff --git a/package.json b/package.json
index 8f5b52bcb..2ef3da244 100755
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@ngrx/effects": "^6.0.0-beta.1",
     "@ngrx/store": "^6.0.0-beta.1",
     "bootstrap": "^4.0.0",
+    "browser-detect": "^0.2.27",
     "core-js": "^2.4.1",
     "font-awesome": "^4.7.0",
     "rxjs": "^6.0.0",
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
old mode 100644
new mode 100755
index 5693f89a8..9c908b22a
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -2,14 +2,17 @@
 
 :host {
   height: 100%;
+  width: 100%;
 }
 
 mat-sidenav-container {
   height: 100%;
+  width: 100%;
 
   .wrapper {
     z-index: -2;
     height: 100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
     position: relative;
diff --git a/src/app/core/animations/router.transition.ts b/src/app/core/animations/router.transition.ts
old mode 100644
new mode 100755
index eecd441e3..b74f9323e
--- a/src/app/core/animations/router.transition.ts
+++ b/src/app/core/animations/router.transition.ts
@@ -1,3 +1,4 @@
+import browser from 'browser-detect';
 import {
   animate,
   query,
@@ -10,53 +11,61 @@ import {
 
 export const ANIMATE_ON_ROUTE_ENTER = 'route-enter-staggered';
 
-export const routerTransition = trigger('routerTransition', [
-  transition('* <=> *', [
-    query(':enter > *', style({ opacity: 0, position: 'fixed' }), {
-      optional: true
-    }),
-    query(':enter .' + ANIMATE_ON_ROUTE_ENTER, style({ opacity: 0 }), {
-      optional: true
-    }),
-    sequence([
-      query(
-        ':leave > *',
-        [
-          style({ transform: 'translateY(0%)', opacity: 1 }),
-          animate(
-            '0.2s ease-in-out',
-            style({ transform: 'translateY(-3%)', opacity: 0 })
-          ),
-          style({ position: 'fixed' })
-        ],
-        { optional: true }
-      ),
-      query(
-        ':enter > *',
-        [
-          style({
-            transform: 'translateY(-3%)',
-            opacity: 0,
-            position: 'static'
-          }),
-          animate(
-            '0.5s ease-in-out',
-            style({ transform: 'translateY(0%)', opacity: 1 })
-          )
-        ],
-        { optional: true }
-      )
-    ]),
+const ROUTE_TRANSITION_STEPS: any[] = [
+  query(':enter > *', style({ opacity: 0, position: 'fixed' }), {
+    optional: true
+  }),
+  query(':enter .' + ANIMATE_ON_ROUTE_ENTER, style({ opacity: 0 }), {
+    optional: true
+  }),
+  sequence([
+    query(
+      ':leave > *',
+      [
+        style({ transform: 'translateY(0%)', opacity: 1 }),
+        animate(
+          '0.2s ease-in-out',
+          style({ transform: 'translateY(-3%)', opacity: 0 })
+        ),
+        style({ position: 'fixed' })
+      ],
+      { optional: true }
+    ),
     query(
-      ':enter .' + ANIMATE_ON_ROUTE_ENTER,
-      stagger(100, [
-        style({ transform: 'translateY(15%)', opacity: 0 }),
+      ':enter > *',
+      [
+        style({
+          transform: 'translateY(-3%)',
+          opacity: 0,
+          position: 'static'
+        }),
         animate(
           '0.5s ease-in-out',
           style({ transform: 'translateY(0%)', opacity: 1 })
         )
-      ]),
+      ],
       { optional: true }
     )
-  ])
+  ]),
+  query(
+    ':enter .' + ANIMATE_ON_ROUTE_ENTER,
+    stagger(100, [
+      style({ transform: 'translateY(15%)', opacity: 0 }),
+      animate(
+        '0.5s ease-in-out',
+        style({ transform: 'translateY(0%)', opacity: 1 })
+      )
+    ]),
+    { optional: true }
+  )
+];
+
+// disable whole page slide-in animation in IE and EDGE
+if (['ie', 'edge'].includes(browser().name)) {
+  ROUTE_TRANSITION_STEPS.splice(0, 1);
+  ROUTE_TRANSITION_STEPS.splice(1, 1);
+}
+
+export const routerTransition = trigger('routerTransition', [
+  transition('* <=> *', ROUTE_TRANSITION_STEPS)
 ]);
diff --git a/src/styles-reset.scss b/src/styles-reset.scss
old mode 100644
new mode 100755
index 5a8cdcef9..2bacb8bfe
--- a/src/styles-reset.scss
+++ b/src/styles-reset.scss
@@ -12,6 +12,7 @@ label {
 html,
 body {
   height: 100%;
+  width: 100%;
 }
 
 code {