diff --git a/src/renderer/src/pages/notifications/notification-item.tsx b/src/renderer/src/pages/notifications/notification-item.tsx
index 96ede5e8..843df053 100644
--- a/src/renderer/src/pages/notifications/notification-item.tsx
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -125,7 +125,7 @@ export function NotificationItem({
         return {
           title: t("friend_request_accepted_title"),
           description: t("friend_request_accepted_description", {
-            displayName: notification.variables.senderDisplayName,
+            displayName: notification.variables.accepterDisplayName,
           }),
           showActions: false,
         };
diff --git a/src/renderer/src/pages/notifications/notifications.scss b/src/renderer/src/pages/notifications/notifications.scss
index 34555198..c8fa7c3f 100644
--- a/src/renderer/src/pages/notifications/notifications.scss
+++ b/src/renderer/src/pages/notifications/notifications.scss
@@ -23,33 +23,31 @@
 
   &__empty {
     display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
     flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__icon-container {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background-color: rgba(255, 255, 255, 0.06);
+    display: flex;
     align-items: center;
     justify-content: center;
-    gap: calc(globals.$spacing-unit * 2);
-    padding: calc(globals.$spacing-unit * 6);
-    text-align: center;
-    color: globals.$body-color;
-
-    &-icon {
-      opacity: 0.4;
-    }
-
-    &-title {
-      font-size: 18px;
-      font-weight: 600;
-      color: globals.$muted-color;
-    }
-
-    &-description {
-      font-size: globals.$body-font-size;
-    }
+    margin-bottom: calc(globals.$spacing-unit * 2);
   }
 
   &__loading {
     display: flex;
+    width: 100%;
+    height: 100%;
     justify-content: center;
-    padding: calc(globals.$spacing-unit * 4);
+    align-items: center;
   }
 
   &__load-more {
diff --git a/src/renderer/src/pages/notifications/notifications.tsx b/src/renderer/src/pages/notifications/notifications.tsx
index 0c8aecb6..bceaff21 100644
--- a/src/renderer/src/pages/notifications/notifications.tsx
+++ b/src/renderer/src/pages/notifications/notifications.tsx
@@ -344,30 +344,30 @@ export default function Notifications() {
   };
 
   return (
-    <div className="notifications">
-      <div className="notifications__actions">
-        <Button theme="outline" onClick={handleMarkAllAsRead}>
-          {t("mark_all_as_read")}
-        </Button>
-        <Button theme="danger" onClick={handleClearAll}>
-          {t("clear_all")}
-        </Button>
-      </div>
-
+    <>
       {isLoading && mergedNotifications.length === 0 ? (
         <div className="notifications__loading">
           <span>{t("loading")}</span>
         </div>
       ) : mergedNotifications.length === 0 ? (
         <div className="notifications__empty">
-          <BellIcon size={48} className="notifications__empty-icon" />
-          <span className="notifications__empty-title">{t("empty_title")}</span>
-          <span className="notifications__empty-description">
-            {t("empty_description")}
-          </span>
+          <div className="notifications__icon-container">
+            <BellIcon size={24} />
+          </div>
+          <h2>{t("empty_title")}</h2>
+          <p>{t("empty_description")}</p>
         </div>
       ) : (
-        <>
+        <div className="notifications">
+          <div className="notifications__actions">
+            <Button theme="outline" onClick={handleMarkAllAsRead}>
+              {t("mark_all_as_read")}
+            </Button>
+            <Button theme="danger" onClick={handleClearAll}>
+              {t("clear_all")}
+            </Button>
+          </div>
+
           <div className="notifications__list">
             <AnimatePresence mode="popLayout">
               {displayedNotifications.map(renderNotification)}
@@ -385,8 +385,8 @@ export default function Notifications() {
               </Button>
             </div>
           )}
-        </>
+        </div>
       )}
-    </div>
+    </>
   );
 }