diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
index 87ad52b3..0aaf2c09 100755
--- a/src/locales/en/translation.json
+++ b/src/locales/en/translation.json
@@ -689,6 +689,7 @@
"blocked_users": "Blocked users",
"unblock": "Unblock",
"no_friends_added": "You have no added friends",
+ "no_friends_yet": "You haven't added any friends yet",
"view_all": "View all",
"load_more": "Load more",
"loading": "Loading",
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.scss b/src/renderer/src/pages/profile/profile-content/friends-box.scss
index 088b204f..c1f4826d 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.scss
@@ -4,6 +4,20 @@
&__box {
padding: calc(globals.$spacing-unit * 2);
position: relative;
+
+ &--empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: calc(globals.$spacing-unit * 2);
+ }
+ }
+
+ &__empty-text {
+ color: globals.$muted-color;
+ font-size: globals.$small-font-size;
+ margin: 0;
+ text-align: center;
}
&__add-friend-button {
diff --git a/src/renderer/src/pages/profile/profile-content/friends-box.tsx b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
index cd0fed24..81e2b708 100644
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -19,6 +19,7 @@ export function FriendsBox() {
const [showAddFriendModal, setShowAddFriendModal] = useState(false);
const isMe = userDetails?.id === userProfile?.id;
+ const hasFriends = userProfile?.friends && userProfile.friends.length > 0;
const getGameImage = (game: { iconUrl: string | null; title: string }) => {
if (game.iconUrl) {
@@ -35,7 +36,15 @@ export function FriendsBox() {
return
{t("no_friends_yet")}
+