diff --git a/src/renderer/components/MusicBox.vue b/src/renderer/components/MusicBox.vue
index 9d9c942..13bc03d 100644
--- a/src/renderer/components/MusicBox.vue
+++ b/src/renderer/components/MusicBox.vue
@@ -15,7 +15,7 @@ export default {
     onLoad () {
       let img = this.$el.getElementsByTagName('img')[0]
       color(img.src, {format: 'rgb'}, (_, color) => {
-        img.style['boxShadow'] = `0px 10px 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60)`
+        img.style['boxShadow'] = `0px 5px 55px 5px rgba(${color[0]},${color[1]},${color[2]},0.60),0px 10px 40px 4px rgba(${color[0]},${color[1]},${color[2]},0.40)`
       })
     }
   }
@@ -24,7 +24,7 @@ export default {
 
 <style scoped lang="sass">
 div.music-box
-    width: 150px
+    width: 140px
     img
         border-radius: 4px
         width: 100%
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 6b42502..83a90cc 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -2,25 +2,20 @@
     <section>
       <ActionBar />
       <div>
-        <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5]]">
-          <Slide v-for="item in top" :key="item.id">
-            <MusicBox  :item="item" />
-          </Slide>
-        </Carousel>
+        <MusicRow :items='items' />
       </div>
     </section>
 </template>
 
 <script>
 import ActionBar from './ActionBar'
-import MusicBox from '../components/MusicBox'
-import { Carousel, Slide } from 'vue-carousel'
+import MusicRow from './MusicRow'
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicBox, Carousel, Slide },
+  components: { ActionBar, MusicRow },
   data: () => {
     return {
-      top: [
+      items: [
         {
           id: 0,
           title: 'Habiba',
diff --git a/src/renderer/layouts/MusicRow.vue b/src/renderer/layouts/MusicRow.vue
new file mode 100644
index 0000000..61d8373
--- /dev/null
+++ b/src/renderer/layouts/MusicRow.vue
@@ -0,0 +1,23 @@
+<template>
+    <section>
+        <Carousel class="carousel-custom" :paginationEnabled="false" :scrollPerPage="false" :perPageCustom="[[300, 2], [540, 3], [740, 4], [800, 3], [900, 4],  [1000, 4], [1200, 5] , [1300, 6]]">
+          <Slide v-for="item in items" :key="item.id">
+            <MusicBox  :item="item" />
+          </Slide>
+        </Carousel>
+    </section>
+</template>
+
+<script>
+import { Carousel, Slide } from 'vue-carousel'
+import MusicBox from '../components/MusicBox'
+export default {
+  name: 'MusicRow',
+  props: ['items'],
+  components: { MusicBox, Carousel, Slide }
+}
+</script>
+
+<style>
+
+</style>