diff --git a/src/app/core/services/helpers/component-injector.helpers.ts b/src/app/core/services/helpers/component-injector.helpers.ts
index 908e4c7..9fc475b 100644
--- a/src/app/core/services/helpers/component-injector.helpers.ts
+++ b/src/app/core/services/helpers/component-injector.helpers.ts
@@ -47,9 +47,6 @@
     });
   }
 
-  // FIXME
-  // component are correctly injected but not persisted,
-  // if I change route they go away
   public injectComponent(target: string | JQuery, componentName: string, attributes?: any, transclude?: string, clean?: boolean) {
     let targetEl;
     if (angular.isString(target)) {
@@ -74,7 +71,10 @@
 
     if (angular.isDefined(attributes) && angular.isObject(attributes)) {
       attr = this.stringifyAttributes(attributes);
-      scope = angular.merge(scope, attributes);
+      // we cannot use angular.merge as it cast Resource to Objects
+      _.forEach(Object.keys(attributes), (k: string) => {
+        scope[k] = attributes[k];
+      });
     }
 
     const componentTag = `<${componentTagName} ${attr}>${transclude || ''}</${componentTagName}>`;
diff --git a/src/app/core/side-panel/side-panel.html b/src/app/core/side-panel/side-panel.html
index 5d06e79..890b40b 100644
--- a/src/app/core/side-panel/side-panel.html
+++ b/src/app/core/side-panel/side-panel.html
@@ -1,5 +1,4 @@
 <section class="xos-side-panel">
-    <pre>{{vm.isOpened | json}}</pre>
     <div class="row">
         <div class="col-xs-12 text-right">
             <i class="fa fa-remove" ng-click="vm.close()"></i>
diff --git a/src/app/core/side-panel/side-panel.scss b/src/app/core/side-panel/side-panel.scss
index 05f34e0..13538fe 100644
--- a/src/app/core/side-panel/side-panel.scss
+++ b/src/app/core/side-panel/side-panel.scss
@@ -7,11 +7,13 @@
     width: $side-panel-width;
     height: 100%;
     position: fixed;
-    background: $background-dark-color;
     z-index: 9999;
+    top: 0;
     right: -$side-panel-width;
+    background: $background-dark-color;
     padding: $padding;
     transition: all .5s cubic-bezier(0.215, 0.610, 0.355, 1.000);
+    overflow-y: scroll;
 
     &.open {
       right: 0;
diff --git a/src/app/core/side-panel/side-panel.service.ts b/src/app/core/side-panel/side-panel.service.ts
index 96e4162..6857f7d 100644
--- a/src/app/core/side-panel/side-panel.service.ts
+++ b/src/app/core/side-panel/side-panel.service.ts
@@ -13,6 +13,7 @@
   public sidePanelElName = 'xos-side-panel';
   public sidePanelElClass = '.xos-side-panel';
   public sidePanelEl: JQuery;
+  private hasComponentLoaded: boolean;
 
   constructor (
     private $rootScope: ng.IRootScopeService,
@@ -32,14 +33,23 @@
   };
 
   public injectComponent(componentName: string, attributes?: any, transclude?: string) {
-    this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
-    this.open();
+    let timeout = 0;
+    if (this.hasComponentLoaded) {
+      this.removeInjectedComponents();
+      timeout = 501; // wait for panel to close and remove component
+    }
+    this.$timeout(() => {
+      this.XosComponentInjector.injectComponent('#side-panel-container', componentName, attributes, transclude, true);
+      this.hasComponentLoaded = true;
+      this.open();
+    }, timeout);
   }
 
   public removeInjectedComponents() {
     this.close();
     this.$timeout(() => {
       this.XosComponentInjector.removeInjectedComponents('#side-panel-container');
+      this.hasComponentLoaded = false;
     }, 500);
   }
 }