diff --git a/app/adapters/_baseAdapter.js b/app/adapters/_baseAdapter.js
index 424b82f9b69adc197deef04faa38bc94bca05a39..a78d44b5f4ce3bad1e86a0d98e39dbf2e0a24745 100644
--- a/app/adapters/_baseAdapter.js
+++ b/app/adapters/_baseAdapter.js
@@ -2,7 +2,7 @@ import Ember from 'ember';
 import RESTAdapter from 'ember-data/adapters/rest';
 
 export default RESTAdapter.extend({
-    host: 'http://localhost:8080',
+    host: 'http://localhost:8080', // TODO: replace with live url
     namespace: 'v1',
     session: Ember.inject.service()
 });
\ No newline at end of file
diff --git a/app/components/.gitkeep b/app/components/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/app/components/architecture-visualisation-cytoscape.js b/app/components/architecture-visualisation-cytoscape/component.js
similarity index 62%
rename from app/components/architecture-visualisation-cytoscape.js
rename to app/components/architecture-visualisation-cytoscape/component.js
index e4d7bb53bf17423cc117bf2cb370f4b9cb2ccfc3..5858d31b5b7c89d49466dd1790f6ef3facc28475 100644
--- a/app/components/architecture-visualisation-cytoscape.js
+++ b/app/components/architecture-visualisation-cytoscape/component.js
@@ -1,11 +1,26 @@
 import Ember from 'ember';
 import cytoscape from 'npm:cytoscape';
 import cycola from 'npm:cytoscape-cola';
+import cytoscapeStyle from './style';
 // import cola from 'npm:webcola';
 import _ from 'npm:lodash';
 
 export default Ember.Component.extend({
     classNames: ['cytoscapeRenderingSpace'],
+    dummyGraph: {
+        nodes: [
+            { data: { id: 'a', parent: 'b', name: 'Test Service' } },
+            { data: { id: 'b' } },
+            { data: { id: 'c', parent: 'b' } },
+            { data: { id: 'd' } },
+            { data: { id: 'e' } },
+            { data: { id: 'f', parent: 'e' } }
+        ],
+        edges: [
+            { data: { id: 'ad', source: 'a', target: 'd' } },
+            { data: { id: 'eb', source: 'e', target: 'b' } }
+        ]
+    },
     init: function() {
         cycola( cytoscape, cola );
 
@@ -46,45 +61,9 @@ export default Ember.Component.extend({
           boxSelectionEnabled: false,
           autounselectify: true,
 
-          style: [
-            {
-              selector: 'node',
-              css: {
-                'content': 'data(id)',
-                'text-valign': 'center',
-                'text-halign': 'center'
-              }
-            },
-            {
-              selector: '$node > node',
-              css: {
-                'padding-top': '10px',
-                'padding-left': '10px',
-                'padding-bottom': '10px',
-                'padding-right': '10px',
-                'text-valign': 'top',
-                'text-halign': 'center',
-                'background-color': '#bbb'
-              }
-            },
-            {
-              selector: 'edge',
-              css: {
-                'target-arrow-shape': 'triangle'
-              }
-            },
-            {
-              selector: ':selected',
-              css: {
-                'background-color': 'black',
-                'line-color': 'black',
-                'target-arrow-color': 'black',
-                'source-arrow-color': 'black'
-              }
-            }
-          ],
+          style: cytoscapeStyle,
 
-          elements: this.get('graph'),
+          elements: this.get('dummyGraph'), // TODO!
 
           layout: {
             name: 'cola',
diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js
new file mode 100644
index 0000000000000000000000000000000000000000..5cfcb8bbcadb5badd79e6831446a807963cc46d8
--- /dev/null
+++ b/app/components/architecture-visualisation-cytoscape/style.js
@@ -0,0 +1,33 @@
+// you should set syntax highlighting to CSS
+export default `
+
+
+node {
+    content: data(name);
+    text-valign: center;
+    text-halign: center;
+}
+
+$node > node {
+    padding-top: 10px;
+    padding-left: 10px;
+    padding-bottom: 10px;
+    padding-right: 10px;
+    text-valign: top;
+    text-halign: center;
+    background-color: #bbb;
+}
+
+edge {
+    target-arrow-shape: triangle;
+}
+
+:selected {
+    background-color: black;
+    line-color: black;
+    target-arrow-color: black;
+    source-arrow-color: black;
+}
+
+
+`;
\ No newline at end of file
diff --git a/app/index.html b/app/index.html
index 4763ae76e9389e6fe4090179af1ff19a18647ca4..35d1ce45157d17d80b756835b895f6b11ff6ccb1 100644
--- a/app/index.html
+++ b/app/index.html
@@ -11,7 +11,7 @@
 
     <link rel="stylesheet" href="assets/vendor.css">
     <link rel="stylesheet" href="assets/frontend-prototype.css">
-    <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
+    <!-- <script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script> -->
 
     {{content-for "head-footer"}}
   </head>
diff --git a/app/templates/architectures/single.hbs b/app/templates/architectures/single.hbs
index 63b43e9bfee74d9fd2d0fea2cf155e240f66041a..f4a058b6998d67a6e1f0a870fe16901501c0fd87 100644
--- a/app/templates/architectures/single.hbs
+++ b/app/templates/architectures/single.hbs
@@ -1 +1,3 @@
-Hallo Visualisierung {{model}}
\ No newline at end of file
+<div class="visualisationContainer">
+    {{architecture-visualisation-cytoscape graph=model}}
+</div>
diff --git a/bower.json b/bower.json
index 826579c2b37b7bd9fe45dc79191aa061d1050a18..d24ee728cf5969194a8ec2a34d67b51a7d4c79cc 100644
--- a/bower.json
+++ b/bower.json
@@ -6,6 +6,7 @@
     "ember-cli-test-loader": "0.2.2",
     "ember-qunit-notifications": "0.1.0",
     "d3": "^3.5.16",
-    "visionmedia-debug": "2.2"
+    "visionmedia-debug": "2.2",
+    "webcola": "^3.1.3"
   }
 }
diff --git a/ember-cli-build.js b/ember-cli-build.js
index 2537ce2caee1c7573c806629d4502aa98efb637f..ac770c258dc6d0fa104ed901121a2de8d8837be8 100644
--- a/ember-cli-build.js
+++ b/ember-cli-build.js
@@ -20,5 +20,7 @@ module.exports = function(defaults) {
   // please specify an object with the list of modules as keys
   // along with the exports of each module as its value.
 
+  app.import('bower_components/webcola/WebCola/cola.js');
+
   return app.toTree();
 };