finished making the buttons compoent

src/renderer/App.vue

@@ -27,6 +27,7 @@ $lato-font-path: '/node_modules/lato-font/fonts'
  
 @include lato-include-font('normal')
 
+
 .root,.page-wrapper
   display: flex
   @include lato-font('normal')

src/renderer/components/Button.vue

@@ -0,0 +1,57 @@
+<template>
+  <a href="#" role="button" class="btn" :class="className"><slot></slot></a>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      className: `btn--` + this.type
+    }
+  },
+
+  props: ['type']
+
+}
+</script>
+
+<style lang="sass" scoped>
+.btn 
+  font-size: .9rem
+  text-decoration: none
+  padding: .5rem 1rem
+  text-transform: capitalize
+  border-radius: .375rem
+
+  &--contained 
+    background-color: #336cfb
+    color: white
+    font-weight: 600
+    align-self: flex-starts
+
+  #btn__icon
+    width: 14px
+    height: 14px
+    fill: white
+
+  &--flat 
+    color: grey
+    transition: all .2s ease-in-out
+    &:hover 
+      background-color: rgba(0,0,0,.15)
+
+  &--raised 
+    background-color: #336cfb
+    color: white
+    font-weight: 600
+    box-shadow: 0 .6rem .6rem rgba(#336cfb , .5)
+
+  &--outlined 
+     background-color: white
+     border: 1px solid #336cfb
+     transition: all 0.2s ease-in-out
+     &:hover
+      background-color: #336cfb
+      color: white
+</style>
+

src/renderer/components/Logo.vue

@@ -1,7 +1,7 @@
 <template>
     <span :class="{'nopadding' : nopadding === true}">
         <img src="/static/logo-2.svg" alt="Jukebox">
-        Jukebox.
+        Jukebox
     </span>
 </template>
 

src/renderer/components/MenuGroup.vue

@@ -23,5 +23,4 @@ div
         text-transform: uppercase
     ul
         padding: unset
-    
 </style>

src/renderer/layouts/DockableSidebar.vue

@@ -61,7 +61,7 @@
                     My Favorites
                 </MenuItem>
             </MenuGroup>
-            <MenuGroup class="grow">
+            <MenuGroup>
                 <template v-slot:title>Your playlists</template>
                 <MenuItem to="/">
                     Hits of this summer
@@ -76,6 +76,20 @@
                     Workout
                 </MenuItem>
             </MenuGroup>
+
+            <Button type="outlined">
+                <svg version="1.1" id="btn__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 286.376 286.376" style="enable-background:new 0 0 286.376 286.376;" xml:space="preserve">
+                    <g id="Add">
+                        <path style="fill-rule:evenodd;clip-rule:evenodd;" d="M268.477,125.29H161.086V17.899c0-9.885-8.013-17.898-17.898-17.898
+                            s-17.898,8.013-17.898,17.898v107.39H17.9c-9.885,0-17.9,8.013-17.9,17.898c0,9.885,8.015,17.898,17.9,17.898h107.39v107.39
+                            c0,9.885,8.013,17.898,17.898,17.898s17.898-8.013,17.898-17.898v-107.39h107.391c9.885,0,17.898-8.014,17.898-17.898
+                            C286.376,133.303,278.362,125.29,268.477,125.29z"/>
+                    </g>
+                </svg>
+                Add new list
+            </Button>
+            <div class="grow"></div>
+
             <MenuGroup>
                 <MenuItem to="/" :faded="true">
                     <template v-slot:icon>
@@ -106,10 +120,11 @@ import MenuItem from '../components/MenuItem'
 import projectPackage from '~/package.json'
 import Logo from '../components/Logo'
 import { mapActions, mapGetters } from 'vuex'
+import Button from '../components/Button'
 
 export default {
   name: 'DockableSidebar',
-  components: { MenuGroup, MenuItem, Logo },
+  components: { MenuGroup, MenuItem, Logo, Button },
   data: () => {
     return { version: projectPackage.version }
   },