diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue
new file mode 100644
index 0000000..0a18e2b
--- /dev/null
+++ b/src/renderer/components/MusicBox.vue
@@ -0,0 +1,37 @@
+<template>
+    <div class="music-box">
+        <img @load="onLoad" src="/static/demo/artwork-5.png" alt="Artwork">
+        <p class="title">Don't Hide - single</p>
+        <p class="artist">Mike Perry & Willie Willie Willie</p>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'MusicBox',
+  methods: {
+    onLoad () {
+      console.log('loaded')
+    }
+  }
+}
+</script>
+
+<style scoped lang="sass">
+div.music-box
+    width: 150px
+    img
+        border-radius: 4px
+        width: 100%
+        height: auto
+    p
+        text-overflow: ellipsis
+        white-space: nowrap
+        overflow: hidden
+        margin: 0.5rem 0
+        &.title
+            font-size: .9rem
+        &.artist
+            font-size: 0.8rem
+            color: lighten(black,50)
+</style>
diff --git a/src/renderer/layouts/ActionBar.vue b/src/renderer/layouts/ActionBar.vue
index 77e6958..54cbceb 100644
--- a/src/renderer/layouts/ActionBar.vue
+++ b/src/renderer/layouts/ActionBar.vue
@@ -36,8 +36,8 @@ export default {
 <style lang="sass" scoped>
 section.action-bar
   display: flex
-  padding: 1rem 2.5rem
   align-items: center
+  padding-bottom: 1rem
   .search-wrapper
     transition: width 200ms
     transition: margin-top 100ms
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 38a7e44..365e516 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -1,18 +1,28 @@
 <template>
-    <section>
+    <section class="page">
       <ActionBar />
-      <p>home</p>
+      <div>
+        <MusicBox />
+      </div>
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
+import MusicBox from '../components/MusicBox'
 export default {
   name: 'HomePage',
-  components: {ActionBar}
+  components: { ActionBar, MusicBox },
+  data: () => {
+    return {
+      top: []
+    }
+  }
 }
 </script>
 
-<style>
+<style scoped lang="sass">
+section.page
+    padding: 1rem 2.5rem
 
 </style>
diff --git a/static/demo/artwork-1 b/static/demo/artwork-1.png
similarity index 100%
rename from static/demo/artwork-1
rename to static/demo/artwork-1.png
diff --git a/static/demo/artwork-10 b/static/demo/artwork-10.png
similarity index 100%
rename from static/demo/artwork-10
rename to static/demo/artwork-10.png
diff --git a/static/demo/artwork-2 b/static/demo/artwork-2.png
similarity index 100%
rename from static/demo/artwork-2
rename to static/demo/artwork-2.png
diff --git a/static/demo/artwork-3 b/static/demo/artwork-3.png
similarity index 100%
rename from static/demo/artwork-3
rename to static/demo/artwork-3.png
diff --git a/static/demo/artwork-4 b/static/demo/artwork-4.png
similarity index 100%
rename from static/demo/artwork-4
rename to static/demo/artwork-4.png
diff --git a/static/demo/artwork-5 b/static/demo/artwork-5.png
similarity index 100%
rename from static/demo/artwork-5
rename to static/demo/artwork-5.png
diff --git a/static/demo/artwork-6 b/static/demo/artwork-6.png
similarity index 100%
rename from static/demo/artwork-6
rename to static/demo/artwork-6.png
diff --git a/static/demo/artwork-7 b/static/demo/artwork-7.png
similarity index 100%
rename from static/demo/artwork-7
rename to static/demo/artwork-7.png
diff --git a/static/demo/artwork-8 b/static/demo/artwork-8.png
similarity index 100%
rename from static/demo/artwork-8
rename to static/demo/artwork-8.png
diff --git a/static/demo/artwork-9 b/static/demo/artwork-9.png
similarity index 100%
rename from static/demo/artwork-9
rename to static/demo/artwork-9.png