diff --git a/src/components/dialog/error-dialog.css b/src/components/dialog/error-dialog.css
index a1d4be9f996233bf947d6d5ad9629b2c75bb9c6e..bc4f8cccb70699dbcaf8573ebf0c1b6b76948de4 100644
--- a/src/components/dialog/error-dialog.css
+++ b/src/components/dialog/error-dialog.css
@@ -7,6 +7,9 @@
 }
 
 .modal-dialog {
-  position: fixed;
+  position: absolute;
   margin: 50px;
+  left: 50%;
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
 }
\ No newline at end of file
diff --git a/src/components/dialog/error-dialog.js b/src/components/dialog/error-dialog.js
index 9c9489e8397779a1218a29fec6db2b57e9eaa55f..54c459295a3c426750a2a7c099ef80855da1bcba 100644
--- a/src/components/dialog/error-dialog.js
+++ b/src/components/dialog/error-dialog.js
@@ -13,12 +13,11 @@ class ErrorDialog extends React.Component{
     super(props);
     this.state = {
       error: undefined,
-      open: false,
       isErrorSourceDisplayed: false
     };
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     ErrorHandlerService.instance.addListener(
       ErrorHandlerService.EVENTS.ERROR, (error) => {
         this.onError(error);
@@ -26,52 +25,63 @@ class ErrorDialog extends React.Component{
   }
 
   onError(error) {
-    console.info(error);
-    this.setState({error: error});
+    this.setState({
+      error: error
+    });
   }
 
-  handleClose() {}
+  handleClose() {
+    this.setState({
+      error: undefined,
+      isErrorSourceDisplayed: false
+    });
+  }
 
   sourceDisplay() {
     this.setState({
-      isErrorSourceDisplayed: true
+      isErrorSourceDisplayed: !this.state.isErrorSourceDisplayed
     });
   }
 
   render(){
-    let error = this.state.error;
+    const error = this.state.error;
     return (
       <div>
-        { this.state.error ?
-          <div className="modal-dialog-wrapper" onClick={event => event.stopPropagation()}>
+        {error?
+          <div className="modal-dialog-wrapper">
             <Modal.Dialog className="modal-dialog">
               <Modal.Header>
                 <h4>{error.type}</h4>
               </Modal.Header>
               <Modal.Body>
-                <p>{error.message}</p>
+                <h5>Details</h5><pre>{error.message}</pre>
+                {this.state.isErrorSourceDisplayed
+                  ?<div>
+                    {!error.code && !error.data && !error.stack
+                      ? <h6>No scary details</h6>
+                      : null}
+                    {this.state.error.code
+                      ? <div><h6>Code</h6><pre>{this.state.error.code}</pre></div>
+                      : null}
+                    {this.state.error.data
+                      ? <div><h6>Data</h6><pre>{this.state.error.data}</pre></div>
+                      : null}
+                    {this.state.error.stack
+                      ? <div><h6>Stack Trace</h6><pre>{this.state.error.stack}</pre></div>
+                      : null}
+                  </div>
+                  : null
+                }
               </Modal.Body>
               <Modal.Footer>
                 <div>
-                  <Button variant="outline-dark" onClick={this.handleClose()}>
+                  <Button variant="outline-dark" onClick={() => this.handleClose()}>
                     <span className="glyphicon glyphicon-remove"></span> Close
                   </Button>
-                  <Button variant="outline-dark" className="pull-right" /*onClick={this.sourceDisplay()}*/>
+                  <Button variant="outline-dark" className="pull-right" onClick={() => this.sourceDisplay()}>
                     {this.state.isErrorSourceDisplayed ? 'Hide' : 'Show'} scary details <span className="caret"></span>
                   </Button>
                 </div>
-                {!this.state.isErrorSourceDisplayed
-                  ?<div>
-                    <h5>Error Type</h5><pre>{error.type}</pre>
-                    <h6>Error Code</h6><pre>{error.code}</pre>
-                    <h6>Message</h6><pre>{error.message}</pre>
-                    {error.data
-                      ? <div><h6>Data</h6><pre>{error.data}</pre></div>
-                      : null}
-                    <div><h6>Stack Trace</h6><pre>{error.stack}</pre></div>
-                  </div>
-                  : null
-                }
               </Modal.Footer>
             </Modal.Dialog>
           </div>
diff --git a/src/components/experiment-list/import-experiment-buttons.js b/src/components/experiment-list/import-experiment-buttons.js
index dec34221748c436d91f01f58e3508bd387a7f5cc..eca33e362e276d16b5cfd364bfdcf0aab7cfcbd4 100644
--- a/src/components/experiment-list/import-experiment-buttons.js
+++ b/src/components/experiment-list/import-experiment-buttons.js
@@ -7,7 +7,6 @@ import ImportExperimentService from '../../services/experiments/files/import-exp
 import ExperimentStorageService from '../../services/experiments/files/experiment-storage-service.js';
 import './experiment-list-element.css';
 import './import-experiment-buttons.css';
-import ErrorHandlerService from '../../services/error-handler-service.js';
 export default class ImportExperimentButtons extends React.Component {
   constructor(props) {
     super(props);
@@ -170,12 +169,6 @@ export default class ImportExperimentButtons extends React.Component {
             </ButtonGroup>
             : null}
         </div>
-
-        {/* DEBUG error emitting */}
-        <button
-          onClick={() => ErrorHandlerService.instance.emit(ErrorHandlerService.EVENTS.ERROR, new Error('test'))}>
-          TEST emit error
-        </button>
       </div>
     );
   }
diff --git a/src/services/error-handler-service.js b/src/services/error-handler-service.js
index 98879b8b8cc66c85f736f4341a698830930dec85..9809a81f237d7bb9a2beef64e58c93a30b88f043 100644
--- a/src/services/error-handler-service.js
+++ b/src/services/error-handler-service.js
@@ -5,6 +5,12 @@ const SINGLETON_ENFORCER = Symbol();
 
 /**
  * Service that handles error retrieving from http and opening error dialog in App.js
+ * An Error object has 5 attributes among which 2 are required:
+ *  - type: category (network ...) | required
+ *  - message: details | required
+ *  - code: error line | optional
+ *  - data: related content | optional
+ *  - stack: call stack | optional
  */
 class ErrorHandlerService extends EventEmitter {
   constructor(enforcer) {
@@ -22,8 +28,8 @@ class ErrorHandlerService extends EventEmitter {
     return _instance;
   }
 
-  emitError(message) {
-    let error = new Error(message);
+  emitNetworkError(error) {
+    error.type = 'Network Error';
     this.emit(ErrorHandlerService.EVENTS.ERROR, error);
   }
 }
@@ -32,9 +38,4 @@ ErrorHandlerService.EVENTS = Object.freeze({
   ERROR: 'ERROR'
 });
 
-ErrorHandlerService.CONSTANTS = Object.freeze({
-  INTERVAL_POLL_ERROR: 1000
-});
-
-
 export default ErrorHandlerService;
\ No newline at end of file
diff --git a/src/services/experiments/files/import-experiment-service.js b/src/services/experiments/files/import-experiment-service.js
index c597dfbe08f93582217886e502af2005ea256b7d..c0a3181a79ccdf0b59b8e7db5f5e4ebc7536ac0f 100644
--- a/src/services/experiments/files/import-experiment-service.js
+++ b/src/services/experiments/files/import-experiment-service.js
@@ -42,8 +42,8 @@ export default class ImportExperimentService extends HttpService {
     return _instance;
   }
 
-  createImportErrorPopup(error) {
-    ErrorHandlerService.instance.emitError(error);
+  async createImportErrorPopup(error) {
+    ErrorHandlerService.instance.emitNetworkError(error);
   }
 
   getImportZipResponses(responses) {