diff --git a/app/components/architecture-visualisation-cytoscape/style.js b/app/components/architecture-visualisation-cytoscape/style.js
index c3e918e12344f01763d17db15d4ba608f12b81f5..bfa4a4f976c072dd97dae0fb0d7532d3174c26d8 100644
--- a/app/components/architecture-visualisation-cytoscape/style.js
+++ b/app/components/architecture-visualisation-cytoscape/style.js
@@ -43,7 +43,15 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
     border-color: ${theme.nodeBorderColor};
     font-weight: bold;
     z-index: 100;
+}
 
+[type="service"] {
+    background-color: ${theme.serviceColor};
+    color: ${theme.nodeTextColor};
+    border-color: ${theme.nodeBorderColor};
+    border-width: 2px;
+    font-weight: bold;
+    z-index: 100;
 }
 
 [type="serviceInstance"] {
@@ -74,6 +82,20 @@ $node > node { /* compounds. "Nodes" in meta model. $ selects the parent node th
     width: data(workload);
 }
 
+[type="communication"] {
+    color: ${theme.arrowColor};
+    line-color: ${theme.arrowColor};
+    target-arrow-color: ${theme.arrowColor};
+
+    /*text-background-color: ${theme.arrowLineColor};
+    text-background-opacity: 1;*/
+    /*text-background-shape: roundrectangle;*/
+    text-outline-color: ${theme.arrowColor};
+    text-outline-width: 1px;
+    font-size: 12pt;
+    width: data(workload);
+}
+
 [type="nodeGroup"] {
     color: ${theme.nodeGroupTextColor};
     background-color: ${theme.nodeGroupColor};
diff --git a/app/controllers/deployments/single.js b/app/controllers/deployments/single.js
index eec7138d2f3f3fabb335366c46a521a171d9a69c..0e096de41b0885ac382b054f8480fb6aa62aa3cb 100644
--- a/app/controllers/deployments/single.js
+++ b/app/controllers/deployments/single.js
@@ -4,12 +4,15 @@ const observables = [
     'nodes',
     'nodeGroups',
     'serviceInstances',
-    'communicationInstances'
+    'communicationInstances',
+    'communications',
+    'services',
 ];
 
 // we require the use of controllers solely because Ember does not allow routes to pass more than model() to templates
 export default Ember.Controller.extend({
-    graphingService: Ember.inject.service(),
+    deploymentGraphingService: Ember.inject.service(),
+    architectureGraphingService: Ember.inject.service(),
     changelogQueue: Ember.inject.service(),
 
     init() {
@@ -17,7 +20,7 @@ export default Ember.Controller.extend({
     },
     // gets automatically updated when any of the instances changes, changes are notified via a pseudo property 'updated'
     // using @each will also listen if the array itself changes. Can be quite expensive.
-    graphModel: Ember.computed(`model.instances.{${observables.join(',')}}.@each._updated`, function() {
+    graphModel: Ember.computed(`model.instances.{${observables.join(',')}}.@each._updated`, 'model.mode', function() {
         const systemId = this.get('model.systemId');
         const instances = this.get('model.instances');
         /*
@@ -30,9 +33,14 @@ export default Ember.Controller.extend({
         Object.keys(instances).map((key) => {
             filteredInstances[key] = instances[key].filterBy('systemId', systemId);
         });
-
+        let graphingService;
+        if(this.get('model.mode') === 'architectures') {
+            graphingService = this.get('architectureGraphingService');
+        } else {
+            graphingService = this.get('deploymentGraphingService');
+        }
         this.debug('creating graph', filteredInstances);
-        return this.get('graphingService').createGraph(filteredInstances); // TODO: update instead of complete recalculation?
+        return graphingService.createGraph(filteredInstances); // TODO: update instead of complete recalculation?
     }),
     actions: {
         applyQueueUpdates() {
diff --git a/app/routes/deployments/single.js b/app/routes/deployments/single.js
index 27a006a5665ebaf4fc11748f974f08086e9de82b..495b417bfbf84c42e63ca2bacc78149bf88a6832 100644
--- a/app/routes/deployments/single.js
+++ b/app/routes/deployments/single.js
@@ -32,7 +32,8 @@ export default Ember.Route.extend({
         this.debug('loaded models', models);
         return {
             systemId: systemId,
-            instances: models
+            instances: models,
+            mode: this.get('routeName').split('.')[0]
         };
     });
   },
diff --git a/app/services/architecture-graphing-service.js b/app/services/architecture-graphing-service.js
new file mode 100644
index 0000000000000000000000000000000000000000..baa34752cd3352e81566e8b2710634e960d21aff
--- /dev/null
+++ b/app/services/architecture-graphing-service.js
@@ -0,0 +1,66 @@
+import Ember from 'ember';
+
+/**
+ * parses a list of models and creates stores them
+ */
+export default Ember.Service.extend({
+  store: Ember.inject.service(),
+  createGraph(models) {
+    this.debug('loaded models', models);
+
+    // prepare models by serializing them
+    const prepared = {};
+    [   'services',
+        'serviceInstances',
+        'communications'
+    ].forEach((key) => {
+        const records = models[key];
+        prepared[key] = records.map(record => record.serialize());
+    });
+
+    // services not used in current view
+    const {services, serviceInstances, communications} = prepared;
+
+    var network = {
+      nodes: [],
+      edges: []
+    };
+
+    services.forEach(data => {
+        data.label = data.name;
+        network.nodes.push({
+            data: data
+        });
+    });
+
+    // serviceInstances.forEach(data => {
+    //     data.label = data.name;
+    //     data.parent = data.serviceId;
+    //
+    //     network.nodes.push({
+    //         data: data,
+    //         classes: data.status || ''
+    //     });
+    // });
+
+    communications.forEach(data => {
+        data.source = data.sourceId;
+        data.target = data.targetId;
+        data.label = data.technology;
+
+        const instanceList = this.get('store').peekAll('communicationinstance')
+            .filter((instance) => instance.get('communicationId') === data.id );
+
+        data.workload = instanceList.reduce((previous, instance) => previous + instance.get('workload'), 0);
+
+        //TODO Normalize
+
+        network.edges.push({
+            data,
+            classes: data.status || ''
+        });
+    });
+
+    return network;
+  }
+});
diff --git a/app/services/graphing-service.js b/app/services/deployment-graphing-service.js
similarity index 100%
rename from app/services/graphing-service.js
rename to app/services/deployment-graphing-service.js
diff --git a/app/templates/deployments/single.hbs b/app/templates/deployments/single.hbs
index 2e61bf871516767888b2dad34d9f16f5801254f7..2fe75de04b32f40284eb4804e185c278aba18fb0 100644
--- a/app/templates/deployments/single.hbs
+++ b/app/templates/deployments/single.hbs
@@ -4,6 +4,16 @@
         <i class="glyphicon glyphicon-refresh"></i> Apply Updates {{#if changelogQueue.available}}({{ changelogQueue.size }}){{/if}}
     </button>
 
+    {{#if (eq model.mode 'architectures')}}
+        {{#link-to 'deployments.single' model.systemId tagName='button' class='btn btn-default'}}
+            Deployments
+        {{/link-to}}
+    {{else}}
+        {{#link-to 'architectures.single' model.systemId tagName='button' class='btn btn-default'}}
+            Architecture
+        {{/link-to}}
+    {{/if}}
+
     {{!-- show entity details in sidebar if subroute (details) is used --}}
     {{outlet}}
 {{/architecture-viewer}}
\ No newline at end of file