diff --git a/src/components/ElementAdder.vue b/src/components/ElementAdder.vue
new file mode 100644
index 0000000..fe81951
--- /dev/null
+++ b/src/components/ElementAdder.vue
@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <md-dialog :md-active.sync="showNewElementChooser">
+      <md-dialog-title>Select the type of the new element</md-dialog-title>
+
+
+      <md-button @click="addElement('ingest')">
+        <md-icon>vertical_align_bottom</md-icon>
+        Ingest
+      </md-button>
+      <i></i> <!-- This is to prevent margin collapse -->
+
+      <md-button @click="addElement('encoder')">
+        <md-icon>gradient</md-icon>
+        Encoder
+      </md-button>
+      <i></i>
+
+      <md-button @click="addElement('restreamer')">
+        <md-icon>publish</md-icon>
+        Restreamer
+      </md-button>
+
+
+    </md-dialog>
+
+
+    <md-speed-dial class="md-bottom-right">
+      <md-speed-dial-target @click="showNewElementChooser = true">
+        <md-icon>add</md-icon>
+      </md-speed-dial-target>
+
+      <md-speed-dial-content>
+        <md-button @click="addElement('restreamer')" class="md-icon-button">
+          <md-icon>publish</md-icon>
+        </md-button>
+
+        <md-button @click="addElement('encoder')" class="md-icon-button">
+          <md-icon>gradient</md-icon>
+        </md-button>
+
+        <md-button @click="addElement('ingest')" class="md-icon-button">
+          <md-icon>vertical_align_bottom</md-icon>
+        </md-button>
+
+      </md-speed-dial-content>
+    </md-speed-dial>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ElementAdder",
+  data() {
+    return {
+      showNewElementChooser: false
+    }
+  },
+  methods: {
+    addElement(type) {
+      this.showNewElementChooser = false;
+      this.$emit("addElement", type)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.vue
new file mode 100644
index 0000000..111c798
--- /dev/null
+++ b/src/components/Toolbar.vue
@@ -0,0 +1,51 @@
+<template>
+  <md-toolbar class="md-primary">
+
+
+    <md-button class="md-icon-button" @click="showDrawerClicked">
+      <md-icon>menu</md-icon>
+    </md-button>
+    <span class="md-title">VideON</span>
+
+    <div class="md-toolbar-section-end">
+
+      <md-progress-spinner
+          v-if="processing"
+          class="md-accent"
+          md-mode="indeterminate"
+          :md-stroke="4"
+          :md-diameter="35" />
+
+      <md-button class="md-raised" :disabled="!applyEnabled" @click="applyClicked">Apply</md-button>
+
+    </div>
+  </md-toolbar>
+</template>
+
+<script>
+export default {
+  name: "ToolbarContent",
+  props: {
+    processing: {
+      type: Boolean,
+      default: false
+    },
+    applyEnabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: {
+    showDrawerClicked() {
+      this.$emit("showDrawerClicked");
+    },
+    applyClicked() {
+      this.$emit("applyClicked");
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/WorkspaceDrawerContent.vue b/src/components/WorkspaceDrawerContent.vue
new file mode 100644
index 0000000..0dbbbb4
--- /dev/null
+++ b/src/components/WorkspaceDrawerContent.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <md-toolbar class="md-transparent" md-elevation="0">
+      <span class="md-title">VideON</span>
+
+
+    </md-toolbar>
+
+    <md-list>
+      <md-list-item>
+        <md-avatar class="md-avatar-icon">J</md-avatar>
+        <span class="md-list-item-text">Joska</span>
+      </md-list-item>
+
+      <md-list-item>
+        <md-button class="md-raised md-accent">Logout</md-button>
+      </md-list-item>
+
+    </md-list>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "WorkspaceDrawerContent"
+}
+</script>
+
+<style scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
index 7558a02..356fde7 100644
--- a/src/views/Dashboard.vue
+++ b/src/views/Dashboard.vue
@@ -1,88 +1,18 @@
 <template>
   <div class="page-container md-layout-column" id="dashboard-container">
 
-    <md-dialog :md-active.sync="showNewElementChooser">
-      <md-dialog-title>Select the type of the new element</md-dialog-title>
-
-
-      <md-button @click="newElement('ingest')">
-        <md-icon>vertical_align_bottom</md-icon>
-        Ingest
-      </md-button>
-      <i></i> <!-- This is to prevent margin collapse -->
-
-      <md-button @click="newElement('encoder')">
-        <md-icon>gradient</md-icon>
-        Encoder
-      </md-button>
-      <i></i>
-
-      <md-button @click="newElement('restreamer')">
-        <md-icon>publish</md-icon>
-        Restreamer
-      </md-button>
-
-
-    </md-dialog>
-
-    <md-toolbar class="md-primary">
-
-      <md-button class="md-icon-button" @click="showNavigation = true">
-        <md-icon>menu</md-icon>
-      </md-button>
-      <span class="md-title">VideON</span>
-
-      <div class="md-toolbar-section-end">
-        <md-button class="md-raised" :disabled="true">Apply</md-button>
-      </div>
-
-    </md-toolbar>
-
-    <md-drawer :md-active.sync="showNavigation" md-swipeable>
-      <md-toolbar class="md-transparent" md-elevation="0">
-        <span class="md-title">VideON</span>
-
-
-      </md-toolbar>
-
-      <md-list>
-        <md-list-item>
-          <md-avatar class="md-avatar-icon">J</md-avatar>
-          <span class="md-list-item-text">Joska</span>
-        </md-list-item>
-
-        <md-list-item>
-          <md-button class="md-raised md-accent">Logout</md-button>
-        </md-list-item>
-
-      </md-list>
+    <!-- toolbar -->
+    <toolbar @showDrawerClicked="showDrawer = true"/>
 
+    <!-- drawer -->
+    <md-drawer :md-active.sync="showDrawer" md-swipeable>
+      <workspace-drawer-content/>
     </md-drawer>
 
+    <!-- workspace -->
     <md-content id="diagram-container">
       <simple-flowchart :scene.sync="diagram"></simple-flowchart>
-
-      <md-speed-dial class="md-bottom-right">
-        <md-speed-dial-target @click="performAddElement">
-          <md-icon>add</md-icon>
-        </md-speed-dial-target>
-
-        <md-speed-dial-content>
-          <md-button @click="newElement('restreamer')" class="md-icon-button">
-            <md-icon>publish</md-icon>
-          </md-button>
-
-          <md-button @click="newElement('encoder')" class="md-icon-button">
-            <md-icon>gradient</md-icon>
-          </md-button>
-
-          <md-button @click="newElement('ingest')" class="md-icon-button">
-            <md-icon>vertical_align_bottom</md-icon>
-          </md-button>
-
-        </md-speed-dial-content>
-      </md-speed-dial>
-
+      <element-adder @addElement="newElement"/>
     </md-content>
 
   </div>
@@ -91,14 +21,21 @@
 <script>
 
 import SimpleFlowchart from '@/simple-flowchart';
+import ElementAdder from "@/components/ElementAdder";
+import WorkspaceDrawerContent from "@/components/WorkspaceDrawerContent";
+import Toolbar from "@/components/Toolbar";
 import {maxBy} from 'lodash';
 
 export default {
   name: 'Dashboard',
-  components: {SimpleFlowchart},
+  components: {
+    SimpleFlowchart,
+    ElementAdder,
+    WorkspaceDrawerContent,
+    Toolbar
+  },
   data: () => ({
-    showNavigation: false,
-    showNewElementChooser: false,
+    showDrawer: false,
     diagram: {
       centerX: 0,
       centerY: 0,
@@ -136,9 +73,6 @@ export default {
     }
   }),
   methods: {
-    performAddElement() {
-      this.showNewElementChooser = true;
-    },
     newElement(type) {
       this.showNewElementChooser = false;