diff --git a/app/components/architecture-viewer.js b/app/components/architecture-viewer.js
index be2f110a032b7e80eae206f451e9c13aad22cc6c..1396d9fc470c4d2c40f420b9178e98161970c9f5 100644
--- a/app/components/architecture-viewer.js
+++ b/app/components/architecture-viewer.js
@@ -5,6 +5,7 @@ import Themes from './architecture-visualisation-cytoscape/themes';
 
 export default Ember.Component.extend({
     graph: null,
+    entityDetails: null,
     layoutAlgorithm: 'cose',
     theme: Themes[Object.keys(Themes)[0]], // first theme
     themes: Object.keys(Themes),
@@ -27,6 +28,9 @@ export default Ember.Component.extend({
         },
         selectTheme(theme) {
             this.set('theme', Themes[theme]);
+        },
+        graphClick(rawEntity) {
+            this.set('entityDetails', rawEntity);
         }
     }
 });
diff --git a/app/components/architecture-visualisation-cytoscape/component.js b/app/components/architecture-visualisation-cytoscape/component.js
index 86f675528dc420dc77fa9a999b8c4b707b91f89e..e0de2b8743cf11642b0970fc625abdb8258624b7 100644
--- a/app/components/architecture-visualisation-cytoscape/component.js
+++ b/app/components/architecture-visualisation-cytoscape/component.js
@@ -44,6 +44,23 @@ export default Ember.Component.extend({
           }
         });
 
+        this.rendering.on('click', (event) => {
+            const target = event.cyTarget;
+            const data = target && target.data && target.data();
+            if(data && data.id) {
+                this.debug('clicked on element in graph', data, event);
+                const action = this.get('select');
+                if(action) {
+                    action(data);
+                } else {
+                    this.debug('select action not set, ignoring click');
+                }
+            } else {
+                this.debug('clicked on non-selectable entity', event);
+            }
+
+        });
+
         // just for development purposes - TODO: remove
         window.cy = cytoscape;
         window.cytoscape = this.rendering;
diff --git a/app/templates/components/architecture-viewer.hbs b/app/templates/components/architecture-viewer.hbs
index ce7d54bd50f70c1ba45e8b353c3b5eb862810493..f780a96394e94495402aba831099f3cf6f39e1a2 100644
--- a/app/templates/components/architecture-viewer.hbs
+++ b/app/templates/components/architecture-viewer.hbs
@@ -1,8 +1,8 @@
 <div class="row">
     <div class="col-md-10 visualisationContainer">
-        {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme}}
+        {{architecture-visualisation-cytoscape graph=graph layoutAlgorithm=layoutAlgorithm theme=theme select=(action "graphClick")}}
     </div>
-    <div class="col-md-2">
+    <div class="col-md-2 visualistaionSidebar">
         <div class="form-group">
           <label for="layoutAlgorithm">Layout:</label>
           <select class="form-control" id="layoutAlgorithm" onchange={{action "selectLayoutAlgorithm" value="target.value"}}>
@@ -19,6 +19,11 @@
             {{/each}}
           </select>
         </div>
+
+        {{#if entityDetails}}
+            <h3>Details</h3>
+            {{entityDetails.type}}
+        {{/if}}
     </div>
 </div>