diff --git a/app/assets/stylesheets/notifications.css b/app/assets/stylesheets/notifications.css
index 041c1bf3f..fdb211269 100644
--- a/app/assets/stylesheets/notifications.css
+++ b/app/assets/stylesheets/notifications.css
@@ -11,22 +11,27 @@
 
 .notification {
   position: absolute;
-  background-color: #eee;
-  border-radius: 6px;
-  border: solid 1px #ccc;
-  padding: 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 40ch;
+  padding: 4px;
   bottom: 0;
+  border-radius: 6px;
 
-  color: black;
-
-  &:visited {
+  & .notification--content {
+    border-radius: 6px;
+    background-color: #eee;
+    border: solid 1px black;
+    padding: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 40ch;
     color: black;
+
+    &:visited {
+      color: black;
+    }
   }
 
+
   transform: translateY(var(--offset));
   z-index: var(--z-index);
   transition: transform 0.2s;
diff --git a/app/views/notifications/_notification.html.erb b/app/views/notifications/_notification.html.erb
index 9a33e5c67..7c7d99103 100644
--- a/app/views/notifications/_notification.html.erb
+++ b/app/views/notifications/_notification.html.erb
@@ -1,7 +1,9 @@
 <%= notification_tag notification do %>
-  <div class="avatar txt-small">
-    <%= avatar_image_tag(notification.creator) %>
-  </div>
+  <div class="notification--content shadow">
+    <div class="avatar txt-small">
+      <%= avatar_image_tag(notification.creator) %>
+    </div>
 
-  <%= notification.body %>
+    <%= notification.body %>
+  </div>
 <% end %>