diff --git a/components/notifications-list/notifications-list.sass b/components/notifications-list/notifications-list.sass
index 7e051e88..3f63de4d 100644
--- a/components/notifications-list/notifications-list.sass
+++ b/components/notifications-list/notifications-list.sass
@@ -2,6 +2,21 @@
@apply flex flex-col items-center
width: 300px
+ max-height: 325px
+
+ .wrapper
+ @apply p-2
+ overflow-y: overlay
+
+ .wrapper::-webkit-scrollbar, .wrapper::-webkit-scrollbar-thumb
+ width: 23px
+ border-radius: 13px
+ background-clip: padding-box
+ border: 10px solid transparent
+
+ .wrapper::-webkit-scrollbar-thumb
+ box-shadow: inset 0 0 0 10px
+
.notification
@apply py-2 px-3
@@ -9,7 +24,7 @@
@apply flex items-center justify-between
.action
- @apply rounded-full text-ps-green cursor-pointer
+ @apply rounded-full text-ps-green cursor-pointer p-1
transition: all 250ms ease-in-out
diff --git a/components/notifications-list/notifications-list.vue b/components/notifications-list/notifications-list.vue
index ef1aa3d1..05243044 100644
--- a/components/notifications-list/notifications-list.vue
+++ b/components/notifications-list/notifications-list.vue
@@ -1,9 +1,10 @@
.notifications-list
- .notification(v-for='(notification, i) in notifications', :key='i')
- .message {{ notification.message }}
- .action
- close-icon(:size='18', @click='removeNotification(notification.id)')
+ .wrapper
+ .notification(v-for='(notification, i) in notifications', :key='i')
+ .message {{ notification.message }}
+ .action
+ close-icon(:size='18', @click='removeNotification(notification.id)')