diff --git a/src/renderer/assets/profile.jpg b/src/renderer/assets/profile.jpg
new file mode 100644
index 0000000..c2118d8
Binary files /dev/null and b/src/renderer/assets/profile.jpg differ
diff --git a/src/renderer/components/Badge.vue b/src/renderer/components/Badge.vue
new file mode 100644
index 0000000..3185ef6
--- /dev/null
+++ b/src/renderer/components/Badge.vue
@@ -0,0 +1,37 @@
+<template>
+  <span class="badge__container">
+    <p class="badge__number">
+      <slot></slot>
+    </p>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'Badge'
+}
+</script>
+
+<style lang="sass" scoped>
+.badge
+  &__container
+    // base styles
+    width: 1rem
+    height: 1rem
+    background-color: #336cfb
+    display: flex
+    justify-content: center
+    align-items: center
+    border-radius: 50%
+    border: 2px solid white
+    // positioning according to the the notification icon
+    position: absolute
+    top: -0.2rem
+    right: -.3rem
+  &__number
+    font-size: .8rem
+    color: white
+    font-weight: 600
+    padding: 0 
+    display: inline-block
+</style>
diff --git a/src/renderer/components/BaseInput.vue b/src/renderer/components/BaseInput.vue
new file mode 100644
index 0000000..9fe3d66
--- /dev/null
+++ b/src/renderer/components/BaseInput.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="search__container">
+      <input type="search" class="search__input" v-bind="query" :placeholder="placeholder">
+      <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BaseInput',
+  data () {
+    return {
+      query: null
+    }
+  },
+  props: ['placeholder']
+}
+</script>
+
+
+<style lang="sass" scoped>
+.search
+  &__container 
+    padding: 0
+    diplay: flex
+    justify-content: center
+    width: 40%
+
+  &__input
+    width: 90%
+    height: 100%
+    border-radius: 15px
+    padding: .4rem 1.5rem
+    color: lighten(black, 30) 
+    border: 1px solid lighten(grey, 40)
+    margin-right: -2rem
+    background-color: #f9f9f9
+    transition: all .2s ease-in-out
+    
+    &::placeholder
+      color: #a8abb3
+      
+    &:focus
+      outline: none
+      width: 100%
+
+  &__icon
+    width: 1.2rem
+    height: 1.2rem
+    cursor: pointer
+    fill: #3b3c3d
+</style>
+
diff --git a/src/renderer/components/History.vue b/src/renderer/components/History.vue
new file mode 100644
index 0000000..faac1ea
--- /dev/null
+++ b/src/renderer/components/History.vue
@@ -0,0 +1,30 @@
+<template>
+  <div class="history__container">
+    <svg class="history__icon" version="1.1" xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 64 64">
+      <g>
+        <g fill="#1D1D1B">
+          <path d="m34.688,3.315c-15.887,0-28.812,12.924-28.81,28.729-0.012,0.251-0.157,4.435 1.034,8.941l-3.881-2.262c-0.964-0.56-2.192-0.235-2.758,0.727-0.558,0.96-0.234,2.195 0.727,2.755l9.095,5.302c0.019,0.01 0.038,0.013 0.056,0.022 0.097,0.052 0.196,0.09 0.301,0.126 0.071,0.025 0.14,0.051 0.211,0.068 0.087,0.019 0.173,0.025 0.262,0.033 0.062,0.006 0.124,0.025 0.186,0.025 0.035,0 0.068-0.012 0.104-0.014 0.034-0.001 0.063,0.007 0.097,0.004 0.05-0.005 0.095-0.026 0.144-0.034 0.097-0.017 0.189-0.038 0.282-0.068 0.078-0.026 0.155-0.057 0.23-0.093 0.084-0.04 0.163-0.084 0.241-0.136 0.071-0.046 0.139-0.096 0.203-0.15 0.071-0.06 0.134-0.125 0.197-0.195 0.059-0.065 0.11-0.133 0.159-0.205 0.027-0.04 0.063-0.069 0.087-0.11 0.018-0.031 0.018-0.067 0.033-0.098 0.027-0.055 0.069-0.103 0.093-0.162l3.618-8.958c0.417-1.032-0.081-2.207-1.112-2.624-1.033-0.414-2.207,0.082-2.624,1.114l-1.858,4.6c-1.24-4.147-1.099-8.408-1.095-8.525 0-13.664 11.117-24.78 24.779-24.78 13.663,0 24.779,11.116 24.779,24.78 0,13.662-11.116,24.778-24.779,24.778-1.114,0-2.016,0.903-2.016,2.016s0.901,2.016 2.016,2.016c15.888,0 28.812-12.924 28.812-28.81-0.002-15.888-12.926-28.812-28.813-28.812z"/>
+          <path d="m33.916,36.002c0.203,0.084 0.417,0.114 0.634,0.129 0.045,0.003 0.089,0.027 0.134,0.027 0.236,0 0.465-0.054 0.684-0.134 0.061-0.022 0.118-0.054 0.177-0.083 0.167-0.08 0.321-0.182 0.463-0.307 0.031-0.027 0.072-0.037 0.103-0.068l12.587-12.587c0.788-0.788 0.788-2.063 0-2.851-0.787-0.788-2.062-0.788-2.851,0l-11.632,11.631-10.439-4.372c-1.033-0.431-2.209,0.053-2.64,1.081-0.43,1.027 0.055,2.208 1.08,2.638l11.688,4.894c0.004,0.001 0.008,0.001 0.012,0.002z"/>
+        </g>
+      </g>
+  </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'History'
+}
+</script>
+
+<style lang="sass" scoped>
+.history
+  &__container
+    padding: 0
+    margin-left: 1.5rem
+    cursor: pointer
+  &__icon
+    width: 2rem
+    height: 2rem
+</style>
+
diff --git a/src/renderer/components/Notification.vue b/src/renderer/components/Notification.vue
new file mode 100644
index 0000000..06a82b0
--- /dev/null
+++ b/src/renderer/components/Notification.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="notification__container">
+    <svg version="1.1" class="notification__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+      <g>
+        <g>
+          <path d="M467.812,431.851l-36.629-61.056c-16.917-28.181-25.856-60.459-25.856-93.312V224c0-67.52-45.056-124.629-106.667-143.04
+            V42.667C298.66,19.136,279.524,0,255.993,0s-42.667,19.136-42.667,42.667V80.96C151.716,99.371,106.66,156.48,106.66,224v53.483
+            c0,32.853-8.939,65.109-25.835,93.291l-36.629,61.056c-1.984,3.307-2.027,7.403-0.128,10.752c1.899,3.349,5.419,5.419,9.259,5.419
+            H458.66c3.84,0,7.381-2.069,9.28-5.397C469.839,439.275,469.775,435.136,467.812,431.851z"/>
+        </g>
+      </g>
+      <g>
+        <g>
+          <path d="M188.815,469.333C200.847,494.464,226.319,512,255.993,512s55.147-17.536,67.179-42.667H188.815z"/>
+        </g>
+      </g>
+    </svg>
+    <Badge>{{BadgeNumber}}</Badge>
+  </div>
+
+</template>
+
+<script>
+import Badge from './Badge'
+
+export default {
+  name: 'Notifcation',
+  components: { Badge },
+  props: ['BadgeNumber']
+}
+</script>
+
+<style lang="sass" scoped>
+.notification
+  &__container
+    margin-left: auto
+    padding: 0
+    position: relative
+    cursor: pointer
+    
+  &__icon
+    width: 2rem
+    height: 2rem
+    padding: 0
+    fill: #bbbcbc
+</style>
+
diff --git a/src/renderer/components/Profile.vue b/src/renderer/components/Profile.vue
new file mode 100644
index 0000000..bea8ce1
--- /dev/null
+++ b/src/renderer/components/Profile.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="profile__container">
+    <img src="../assets/profile.jpg" alt="PROFILE" class="profile__image">
+      <svg version="1.1" class="profile__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 129 129" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 129 129">
+        <g>
+          <path d="m121.3,34.6c-1.6-1.6-4.2-1.6-5.8,0l-51,51.1-51.1-51.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l53.9,53.9c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l53.9-53.9c1.7-1.6 1.7-4.2 0.1-5.8z"/>
+        </g>
+      </svg>
+  </div>  
+</template>
+
+<script>
+export default {
+  name: 'Profile'
+}
+</script>
+
+<style lang="sass" scoped>
+.profile
+  &__container
+    padding: 0
+    margin-left: 1.5rem
+    display: flex
+    flex-direction: row
+    cursor: pointer
+
+  &__image
+    width: 2rem
+    height: 2rem
+    border-radius: 50%
+
+  &__icon
+    width: .7rem
+    height: .7rem
+    margin-left: .313rem // 5px
+</style>
diff --git a/src/renderer/layouts/ActionBar.vue b/src/renderer/layouts/ActionBar.vue
index 36e2605..da1bc6a 100644
--- a/src/renderer/layouts/ActionBar.vue
+++ b/src/renderer/layouts/ActionBar.vue
@@ -1,15 +1,39 @@
 <template>
     <div>
-        ActionBar
+        <BaseInput placeholder="Search">
+          <svg version="1.1" class="search__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
+            <path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
+              c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
+              C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
+              S32.459,40,21.983,40z"/>
+            <g></g>
+          </svg>
+        </BaseInput>
+
+        <Notification :BadgeNumber="5"></Notification>
+
+        <Profile></Profile>
+
+        <History></History>
     </div>
 </template>
 
 <script>
+import BaseInput from '../components/BaseInput'
+import Notification from '../components/Notification'
+import Profile from '../components/Profile'
+import History from '../components/History'
+
 export default {
-  name: 'ActionBar'
+  name: 'ActionBar',
+  components: { BaseInput, Notification, Profile, History }
 }
 </script>
 
-<style>
-
+<style lang="sass" scoped>
+div
+  display: flex
+  padding: 1rem 2.5rem
+  align-items: center
 </style>
+