diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 4b1d3f4..5fd81c2 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -26,7 +26,7 @@ $FontPath: '/node_modules/roboto-slab-fontface-kit/fonts'
 @include normalize()
  
 $lato-font-path: '/node_modules/lato-font/fonts'
- 
+
 @include lato-include-font('normal')
 
 
diff --git a/src/renderer/components/ListItem.vue b/src/renderer/components/ListItem.vue
index 2787c76..079cb57 100644
--- a/src/renderer/components/ListItem.vue
+++ b/src/renderer/components/ListItem.vue
@@ -44,7 +44,7 @@ li
   margin-bottom: .6rem
   padding: .4rem .8rem
   border-radius: .5rem
-  
+  box-sizing: border-box
   &.active
     background-color: #0076F9
     color: white
diff --git a/src/renderer/layouts/HomePage.vue b/src/renderer/layouts/HomePage.vue
index 352bb74..8856fde 100644
--- a/src/renderer/layouts/HomePage.vue
+++ b/src/renderer/layouts/HomePage.vue
@@ -6,7 +6,7 @@
       </div>
 
       <div class="middle-row">
-        <div class="grow-half">
+        <div class="grow-half favourite">
           <div class="favourite__title-container">
             <legend>favourite songs</legend>
             <Button variant="outlined" class="view-all">View All</Button>
@@ -28,9 +28,22 @@
           <List >
             <ListItem v-for="favourite in favourites" :key="favourite.id" :item="favourite"></ListItem>
           </List>
-        </div>
+        </div> <!-- favourite box-->
 
-        <div class="grow-half"></div>
+        <div class="grow-half recommend" >
+          <div class="recommend__title">
+            <legend>Recommended For You</legend>
+          </div>
+
+          <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom half">
+            <MusicBox v-for="item in items" :key="item.id" :item="item" />
+          </carousel>
+
+          <!-- <carousel :dots="false" :nav="false" :autoWidth="true" class="carousel-custom">
+            <MusicBox v-for="item in items" :key="item.id" :item="item" />
+          </carousel> -->
+
+        </div> <!-- recommended box -->
       </div>
 
     </section>
@@ -42,10 +55,12 @@ import MusicRow from './MusicRow'
 import List from './List'
 import ListItem from '../components/ListItem'
 import Button from '../components/Button'
+import carousel from 'vue-owl-carousel'
+import MusicBox from '../components/MusicBox'
 
 export default {
   name: 'HomePage',
-  components: { ActionBar, MusicRow, List, ListItem, Button },
+  components: { ActionBar, MusicRow, List, ListItem, Button, carousel, MusicBox },
   data: () => {
     return {
       items: [
@@ -118,12 +133,69 @@ export default {
           artist: 'The Weeknd',
           duration: '4:30',
           artwork: '/static/demo/starboy.png'
+        }
+        // {
+        //   id: 3,
+        //   title: 'Tilte',
+        //   artist: 'Juice WRLD',
+        //   duration: '5:30',
+        //   artwork: '/static/demo/clever.jpg'
+        // }
+      ],
+
+      recommends: [
+        {
+          id: 0,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 1,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 2,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
         },
         {
           id: 3,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 4,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 5,
+          title: 'Tilte',
+          artist: 'Juice WRLD',
+          artwork: '/static/demo/clever.jpg'
+        },
+        {
+          id: 6,
+          title: 'Habiba',
+          artist: 'Oldasinus',
+          artwork: '/static/demo/habiba.jpg'
+        },
+        {
+          id: 7,
+          title: 'Starboy',
+          artist: 'The Weeknd',
+          artwork: '/static/demo/starboy.png'
+        },
+        {
+          id: 8,
           title: 'Tilte',
           artist: 'Juice WRLD',
-          duration: '5:30',
           artwork: '/static/demo/clever.jpg'
         }
       ]
@@ -137,7 +209,7 @@ section.page
   padding: 1rem 2.5rem
   overflow-x: hidden
   .VueCarousel-wrapper
-     overflow: unset
+      overflow: unset
 
   .middle-row
     display: flex
@@ -146,12 +218,14 @@ section.page
     flex: 1 0 50% // deviding the space equally between two element
 
 .favourite
+  background: white
+  z-index: 10
   &__list-header
     width: 100%
-    padding: 0.3rem .6rem
+    padding: 0.3rem 1.6rem
+    box-sizing: border-box
     display: flex
     justify-content: space-between
-
     span.song
         flex: 1 0 50%
     span.artist
@@ -171,7 +245,7 @@ section.page
     legend
       font-size: 2rem
       font-family: 'Roboto Slab', serif        
-      margin: 20px 0px
+      margin: 15px 0px
       text-transform: capitalize
 
     .view-all
@@ -183,4 +257,34 @@ section.page
       display: flex
       align-items: center
       justify-content: center
+
+.recommend
+  margin-left: 2rem
+  padding: 0
+  &__title
+    display: flex
+    align-items: center
+    legend
+      font-size: 2rem
+      font-family: 'Roboto Slab', serif        
+      margin: 15px 0px 20px 0
+      text-transform: capitalize
+
+    h3
+      font-size: 1.5rem
+      font-weight: 200
+      margin-left: 1rem
+  .carousel-custom
+      &.half
+        width: 0rem
+      .owl-stage-outer
+        overflow: unset
+
+@media(max-width: 1000px)
+  .middle-row
+    flex-wrap: wrap
+
+  .recommend
+    margin-left: 0
+    margin-top: 1.5rem
 </style>