diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 35fba4d..767b207 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -1,13 +1,18 @@
 <template>
   <div id="app">
+    <DockableSidebar />
     <router-view></router-view>
+    <PlayerBar />
   </div>
 </template>
 
 <script>
-  export default {
-    name: 'jukebox'
-  }
+import DockableSidebar from './layouts/DockableSidebar'
+import PlayerBar from './layouts/PlayerBar'
+export default {
+  name: 'jukebox',
+  components: {DockableSidebar, PlayerBar}
+}
 </script>
 
 <style lang="sass">
diff --git a/src/renderer/layouts/ActionBar.vue b/src/renderer/layouts/ActionBar.vue
new file mode 100644
index 0000000..36e2605
--- /dev/null
+++ b/src/renderer/layouts/ActionBar.vue
@@ -0,0 +1,15 @@
+<template>
+    <div>
+        ActionBar
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'ActionBar'
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/renderer/layouts/DockableSidebar.vue b/src/renderer/layouts/DockableSidebar.vue
new file mode 100644
index 0000000..e6e18ea
--- /dev/null
+++ b/src/renderer/layouts/DockableSidebar.vue
@@ -0,0 +1,15 @@
+<template>
+    <section>
+        Sidebar
+    </section>    
+</template>
+
+<script>
+export default {
+  name: 'DockableSidebar'
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 5495216..fb28a10 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,12 +1,15 @@
 <template>
-    <div>
-        Home page
-    </div>
+    <section>
+      <ActionBar />
+      HomePage
+    </section>
 </template>
 
 <script>
+import ActionBar from './ActionBar'
 export default {
-  name: 'HomePage'
+  name: 'HomePage',
+  components: {ActionBar}
 }
 </script>
 
diff --git a/src/renderer/layouts/PlayerBar.vue b/src/renderer/layouts/PlayerBar.vue
new file mode 100644
index 0000000..7db7b9a
--- /dev/null
+++ b/src/renderer/layouts/PlayerBar.vue
@@ -0,0 +1,15 @@
+<template>
+    <section>
+        Player
+    </section>
+</template>
+
+<script>
+export default {
+  name: 'PlayerBar'
+}
+</script>
+
+<style>
+
+</style>