diff --git a/app/adapters/_baseAdapter.js b/app/adapters/_baseAdapter.js
new file mode 100644
index 0000000000000000000000000000000000000000..8e9613e82d51ea20456074ea7673daf0c99a68c2
--- /dev/null
+++ b/app/adapters/_baseAdapter.js
@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import RESTAdapter from 'ember-data/adapters/rest';
+
+export default RESTAdapter.extend({
+    host: 'http://localhost:3000',
+    namespace: 'v1',
+    session: Ember.inject.service()
+});
\ No newline at end of file
diff --git a/app/adapters/application.js b/app/adapters/application.js
index e93e85975ad9d689c9b5905f27644c01d1570cdf..34b5f81f421fa75eb1e3b4e58c0d1a76a315c782 100644
--- a/app/adapters/application.js
+++ b/app/adapters/application.js
@@ -1,6 +1,19 @@
-import RESTAdapter from 'ember-data/adapters/rest';
+import Ember from 'ember';
+import BaseAdapter from './_baseAdapter';
+import UrlTemplates from "ember-data-url-templates";
 
-export default RESTAdapter.extend({
-    host: 'http://localhost:3000',
-    namespace: 'v1'
+/**
+ * @param  {UrlTemplate}
+ * @param  {Object} configuration for templates
+ * @return {Adapter} adapter that is used for all metamodel models
+ */
+export default BaseAdapter.extend(UrlTemplates, {
+    urlTemplate: '{+host}/{+namespace}/systems{/systemId}/{pathForType}/{/id}',
+    findAllUrlTemplate: '{+host}/{+namespace}/systems{/systemId}/{pathForType}/{?query*}',
+
+    urlSegments: {
+        systemId() {
+          return this.get('session.systemId');
+        }
+    }
 });
\ No newline at end of file
diff --git a/app/adapters/system.js b/app/adapters/system.js
new file mode 100644
index 0000000000000000000000000000000000000000..4154b01a051008561dff73b798fa067b5f972985
--- /dev/null
+++ b/app/adapters/system.js
@@ -0,0 +1,3 @@
+import BaseAdapter from './_baseAdapter';
+
+export default BaseAdapter; // do not use URL Templates!
\ No newline at end of file
diff --git a/app/models/communication.js b/app/models/communication.js
index 74f799d1332a874c3d810b6c0be7ee677550b775..859bfa056b0f65912bb47cf239554d5d30425f81 100644
--- a/app/models/communication.js
+++ b/app/models/communication.js
@@ -1,4 +1,4 @@
-import BaseEntity from './baseentity.js';
+import BaseEntity from './baseentity';
 import attr from 'ember-data/attr';
 
 export default BaseEntity.extend({
diff --git a/app/models/communicationInstance.js b/app/models/communicationInstance.js
index 352267c8da63b0ba0123d4e700e4483a87c00c5b..2ec2e3ab73da37dbf08908936395f9b8636e579e 100644
--- a/app/models/communicationInstance.js
+++ b/app/models/communicationInstance.js
@@ -1,4 +1,4 @@
-import BaseEntity from './baseentity.js';
+import BaseEntity from './baseentity';
 import attr from 'ember-data/attr';
 
 export default BaseEntity.extend({
diff --git a/app/models/node.js b/app/models/node.js
index 05953175fa1ab2d40bdaa1ea8562adcebab30c68..a218acfb53fec4d63536c60499056220abdcfe6f 100644
--- a/app/models/node.js
+++ b/app/models/node.js
@@ -1,4 +1,4 @@
-import BaseEntity from './baseentity.js';
+import BaseEntity from './baseentity';
 import attr from 'ember-data/attr';
 
 export default BaseEntity.extend({
diff --git a/app/models/nodeGroup.js b/app/models/nodeGroup.js
index 23355b345b3eaa92f37e8d48f297a07e07415c6c..167a21f8bd9e940c2aa6e40ddc209efc477d47f8 100644
--- a/app/models/nodeGroup.js
+++ b/app/models/nodeGroup.js
@@ -1,4 +1,4 @@
-import BaseEntity from './baseentity.js';
+import BaseEntity from './baseentity';
 import attr from 'ember-data/attr';
 
 export default BaseEntity.extend({
diff --git a/app/models/service.js b/app/models/service.js
index 68e6a4bf852aa0b3874ccf8eb8c2b7951c9535a8..f33a068691de03bb182e9e4501d0a31c5692364c 100644
--- a/app/models/service.js
+++ b/app/models/service.js
@@ -1,4 +1,4 @@
-import BaseEntity from './baseentity.js';
+import BaseEntity from './baseentity';
 import attr from 'ember-data/attr';
 
 export default BaseEntity.extend({
diff --git a/app/models/serviceInstance.js b/app/models/serviceInstance.js
index 8bb57a8d89eabb86a5080cd035be9d3f3f58b866..2899d227178c076fc7559fea44638a8069e3a633 100644
--- a/app/models/serviceInstance.js
+++ b/app/models/serviceInstance.js
@@ -1,8 +1,9 @@
-import BaseEntity from './baseentity.js';
+import BaseEntity from './baseentity';
 import attr from 'ember-data/attr';
+import DS from 'ember-data';
 
 export default BaseEntity.extend({
     name: attr('string'),
-    node: attr(), // FIXME relation
-    service: attr() // FIXME relation
+    node: DS.belongsTo('node', {async: true}),
+    service: DS.belongsTo('service', {async: true})
 });
diff --git a/app/models/system.js b/app/models/system.js
index dd31943eb2f61a3378584a13762b4d2e311dc506..33c1efdf7313d472b9142101786227c73f3f2acd 100644
--- a/app/models/system.js
+++ b/app/models/system.js
@@ -1,9 +1,7 @@
 import BaseEntity from './baseentity';
 import attr from 'ember-data/attr';
+import DS from 'ember-data';
 
 export default BaseEntity.extend({
-    name: attr('string'),
-    nodeGroups: attr('string'), // FIXME relation
-    communications: attr('string'), // FIXME relation
-    services: attr('string') // FIXME relation
+    name: attr('string')
 });
diff --git a/app/router.js b/app/router.js
index fc46ed2107522b1950e4d202c22c83d0133ae6aa..7b6ee52098cc730579653149d620aa896645c608 100644
--- a/app/router.js
+++ b/app/router.js
@@ -6,10 +6,10 @@ const Router = Ember.Router.extend({
 });
 
 Router.map(function() {
-  this.route('home', {path: '/'});
-  this.route('architecture', {path: '/architecture'});
-  this.route('cola', {path: '/cola'});
-  this.route('cytoscape');
+    this.route('home', {path: '/'});
+    this.route('architectures', function() {
+        this.route('single', {path: '/:systemId'});
+    });
 });
 
 export default Router;
diff --git a/app/routes/.gitkeep b/app/routes/.gitkeep
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/app/routes/architecture.js b/app/routes/architecture.js
deleted file mode 100644
index b3b46e58c472db2eeeffa6db2e22d40902addb85..0000000000000000000000000000000000000000
--- a/app/routes/architecture.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import Ember from 'ember';
-
-export default Ember.Route.extend({
-  model() {
-    return {
-        id: 'root',
-        labels: [{text: 'My Architecture'}],
-        'properties': {
-            'direction': 'RIGHT',
-            'spacing': 10,
-            'de.cau.cs.kieler.aspectRatio': 1.7,
-            'de.cau.cs.kieler.separateConnComp': true,
-            'separateConnComp': true
-        },
-        children: [{
-            id: 'VM_Profile',
-            children: [{
-                id: 'VM_Profile>Database',
-                labels: [{text: 'Profile DB'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_Big',
-            children: [{
-                id: 'VM_Big>Auth',
-                width: 20,
-                height: 20
-            }, {
-                id: 'VM_Big>User',
-                width: 20,
-                height: 20
-            }, {
-                id: 'VM_Big>User2',
-                width: 20,
-                height: 20
-            }, {
-                id: 'VM_Big>User3',
-                width: 20,
-                height: 20
-            }, {
-                id: 'VM_Big>User4',
-                width: 20,
-                height: 20
-            }],
-            edges: [{
-                id: 'VM_Big>Auth->VM_Big>User',
-                labels: [ { text: 'e1' } ],
-                source: 'VM_Big>Auth',
-                target: 'VM_Big>User'
-            }]
-        },
-        {
-            id: 'VM_1',
-            children: [{
-                id: 'VM_1>Auth',
-                labels: [{text: 'Auth 1'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_2',
-            children: [{
-                id: 'VM_2>Auth',
-                labels: [{text: 'Auth 2'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_3',
-            children: [{
-                id: 'VM_3>User',
-                labels: [{text: 'User 1'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_4',
-            children: [{
-                id: 'VM_4>User',
-                labels: [{text: 'User 2'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_5',
-            children: [{
-                id: 'VM_5>User',
-                labels: [{text: 'User 2'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_6',
-            children: [{
-                id: 'VM_6>User',
-                labels: [{text: 'User 2'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_7',
-            children: [{
-                id: 'VM_7>User',
-                labels: [{text: 'User 2'}],
-                width: 20,
-                height: 20
-            }]
-        },
-        {
-            id: 'VM_8',
-            children: [{
-                id: 'VM_8>User',
-                labels: [{text: 'User 2'}],
-                width: 20,
-                height: 20
-            }]
-        }],
-        edges: [{
-            id: 'VM_1>Auth->VM_3>User',
-            source: 'VM_1>Auth',
-            target: 'VM_3>User',
-        }, {
-            id: 'VM_2>Auth->VM_4>User',
-            source: 'VM_2>Auth',
-            target: 'VM_4>User',
-        } /*{
-            id: 'VM_Big>User->VM_Profile>Database',
-            source: 'VM_Big>User',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_2>Auth->VM_Profile>Database',
-            source: 'VM_2>Auth',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_1>Auth->VM_Profile>Database',
-            source: 'VM_1>Auth',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_3>User->VM_Profile>Database',
-            source: 'VM_3>User',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_4>User->VM_Profile>Database',
-            source: 'VM_4>User',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_5>User->VM_Profile>Database',
-            source: 'VM_5>User',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_6>User->VM_Profile>Database',
-            source: 'VM_6>User',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_7>User->VM_Profile>Database',
-            source: 'VM_7>User',
-            target: 'VM_Profile>Database',
-        }, {
-            id: 'VM_8>User->VM_Profile>Database',
-            source: 'VM_8>User',
-            target: 'VM_Profile>Database',
-        }*/]
-    };
-  }
-});
\ No newline at end of file
diff --git a/app/routes/architectures/index.js b/app/routes/architectures/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..96fbfbc22dcc861206641b7f94ec568c14ca55bb
--- /dev/null
+++ b/app/routes/architectures/index.js
@@ -0,0 +1,12 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+    session: Ember.inject.service(), // loads services/session.js for systemId
+    model () {
+        this.set('session.systemId', null); // no system selected, remove from model requests
+        return this.store.findAll('system').then((systems) => {
+            this.debug(systems);
+            return systems;
+        });
+    }
+});
diff --git a/app/routes/architectures/single.js b/app/routes/architectures/single.js
new file mode 100644
index 0000000000000000000000000000000000000000..113eaab197749b338c6234af6d9ea05ff314ee36
--- /dev/null
+++ b/app/routes/architectures/single.js
@@ -0,0 +1,25 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+    session: Ember.inject.service(), // loads services/session.js
+    graphingService: Ember.inject.service(),
+    model(params) {
+        this.set('session.systemId', params.systemId); // add the system to all requests
+        const graphingService = this.get('graphingService');
+        const createGraph = graphingService.createGraph.bind(graphingService);
+
+        this.set('loading', true);
+
+        return Ember.RSVP.Promise.all([
+            this.store.findAll('node'),
+            this.store.findAll('nodegroup'),
+            this.store.findAll('service'),
+            this.store.findAll('serviceinstance'),
+            this.store.findAll('communication'),
+            this.store.findAll('communicationinstance')
+        ]).then(createGraph).finally((graph) => {
+            this.set('loading', false);
+            return graph;
+        });
+    }
+});
diff --git a/app/routes/cytoscape.js b/app/routes/cytoscape.js
index 8490ad185be806404e849218ce9f6009830e2093..733b4cb13c5884e0c6a9fd929159b436d201b6ef 100644
--- a/app/routes/cytoscape.js
+++ b/app/routes/cytoscape.js
@@ -3,7 +3,7 @@ import Ember from 'ember';
 export default Ember.Route.extend({
     model() {
         return this.store.findAll('system').then((systems) => {
-            console.log('loaded systems', systems)
+            console.log('loaded systems', systems);
             return systems;
         });
     }
diff --git a/app/serializers/application.js b/app/serializers/application.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e9a06231808046b5719d23a385e1cbd3de0b979
--- /dev/null
+++ b/app/serializers/application.js
@@ -0,0 +1,5 @@
+import JSONSerializer from 'ember-data/serializers/json';
+
+export default JSONSerializer.extend({
+
+});
\ No newline at end of file
diff --git a/app/services/graphing-service.js b/app/services/graphing-service.js
new file mode 100644
index 0000000000000000000000000000000000000000..da002efe6b8396551e3cba15d0c4aa5393b6a6fb
--- /dev/null
+++ b/app/services/graphing-service.js
@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+/**
+ * parses a list of models and creates stores them
+ */
+export default Ember.Service.extend({
+    createGraph(models) {
+        this.debug('loaded models', models);
+        return models;
+    }
+});
diff --git a/app/services/session.js b/app/services/session.js
new file mode 100644
index 0000000000000000000000000000000000000000..844513856fc903b5747cd409a9bd537ed942e3fa
--- /dev/null
+++ b/app/services/session.js
@@ -0,0 +1,10 @@
+import Ember from 'ember';
+
+/**
+ * this service stores the global state of the system.
+ * @property {String} systemId store the id of the system which is currently used for
+ *      loading metamodel components
+ */
+export default Ember.Service.extend({
+    systemId: null
+});
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 8231f96b83518b468ace123ecbc3c47ea2965219..afbc62949cf624c0357fb2a1687b6103f8fa5c1a 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,9 +1,8 @@
+{{loading-slider isLoading=loading duration=250}}
 <h2 id="title">Welcome to Ember</h2>
 <ul>
     <li>Go to {{#link-to 'home'}}Home{{/link-to}}</li>
-    <li>Go to {{#link-to 'architecture'}}Klay-based Architecture{{/link-to}}</li>
-    <li>Go to {{#link-to 'cola'}}Webcola Architecture{{/link-to}}</li>
-    <li>Go to {{#link-to 'cytoscape'}}Cytoscape Architecture{{/link-to}}</li>
+    <li>Go to {{#link-to 'architectures'}}Architekturen{{/link-to}}</li>
 </ul>
 
 {{outlet}}
diff --git a/app/templates/architecture.hbs b/app/templates/architecture.hbs
deleted file mode 100644
index a7234d6af09ec983a740a041b0b6f7eb5a40aac5..0000000000000000000000000000000000000000
--- a/app/templates/architecture.hbs
+++ /dev/null
@@ -1,2 +0,0 @@
-Visualisierung:
-{{architecture-visualisation graph=model}}
\ No newline at end of file
diff --git a/app/templates/architectures.hbs b/app/templates/architectures.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..c24cd68950a9a5c52c59d7020c3a30a00adb094d
--- /dev/null
+++ b/app/templates/architectures.hbs
@@ -0,0 +1 @@
+{{outlet}}
diff --git a/app/templates/architectures/index.hbs b/app/templates/architectures/index.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..dbc342d382fc0bdcc3178c5fdd00f21864086cd5
--- /dev/null
+++ b/app/templates/architectures/index.hbs
@@ -0,0 +1,9 @@
+{{model.length}}
+
+<ul>
+{{#each model as |system| }}
+    <li>{{#link-to 'architectures.single' system.id}}{{system.name}}{{/link-to}}</li>
+{{/each}}
+</ul>
+
+{{outlet}}
\ No newline at end of file
diff --git a/app/templates/architectures/single.hbs b/app/templates/architectures/single.hbs
new file mode 100644
index 0000000000000000000000000000000000000000..63b43e9bfee74d9fd2d0fea2cf155e240f66041a
--- /dev/null
+++ b/app/templates/architectures/single.hbs
@@ -0,0 +1 @@
+Hallo Visualisierung {{model}}
\ No newline at end of file
diff --git a/package.json b/package.json
index 6c07f1559fa28fb642d7c1ddf05815e968819b98..696677555cccde19d19c42169f2e1c5181346fd3 100644
--- a/package.json
+++ b/package.json
@@ -30,13 +30,16 @@
     "ember-cli-htmlbars": "^1.0.1",
     "ember-cli-htmlbars-inline-precompile": "^0.3.1",
     "ember-cli-inject-live-reload": "^1.3.1",
+    "ember-cli-loading-slider": "1.3.0",
     "ember-cli-qunit": "^1.2.1",
     "ember-cli-release": "0.2.8",
     "ember-cli-sass": "5.3.1",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-cli-yuidoc": "0.8.3",
     "ember-d3": "0.1.0",
     "ember-data": "^2.4.0",
+    "ember-data-url-templates": "0.1.1",
     "ember-debug-logger": "0.2.0",
     "ember-disable-proxy-controllers": "^1.0.1",
     "ember-export-application-global": "^1.0.4",
diff --git a/tests/unit/routes/systems-test.js b/tests/unit/routes/systems-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..e29a8ee21d2cc22e62369489a79025be32e05aa8
--- /dev/null
+++ b/tests/unit/routes/systems-test.js
@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:systems', 'Unit | Route | systems', {
+  // Specify the other units that are required for this test.
+  // needs: ['controller:foo']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});
diff --git a/tests/unit/services/session-test.js b/tests/unit/services/session-test.js
new file mode 100644
index 0000000000000000000000000000000000000000..a027c05370c19411f9f31e91381489f556006669
--- /dev/null
+++ b/tests/unit/services/session-test.js
@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('service:session', 'Unit | Service | session', {
+  // Specify the other units that are required for this test.
+  // needs: ['service:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let service = this.subject();
+  assert.ok(service);
+});
diff --git a/yuidoc.json b/yuidoc.json
new file mode 100644
index 0000000000000000000000000000000000000000..11c63df449dc9f00d923c540de29d998c24563a8
--- /dev/null
+++ b/yuidoc.json
@@ -0,0 +1,16 @@
+{
+  "name": "frontend-prototype",
+  "description": "Small description for frontend-prototype goes here",
+  "version": "0.0.0",
+  "options": {
+    "paths": [
+      "app"
+    ],
+    "exclude": "vendor",
+    "outdir": "docs",
+    "linkNatives": true,
+    "quiet": true,
+    "parseOnly": false,
+    "lint": false
+  }
+}
\ No newline at end of file