Merge branch 'main' into feat/disabling-update-badges

2026-01-22 18:33:56 +00:00 · 2025-12-26 21:53:45 +00:00
parent 9faf34a976 98dc20092a
commit 27462c1e1e
71 changed files with 2994 additions and 1150 deletions
--- a/src/renderer/src/app.tsx
+++ b/src/renderer/src/app.tsx
@@ -23,7 +23,6 @@ import {
  clearExtraction,
 } from "@renderer/features";
 import { useTranslation } from "react-i18next";
-import { UserFriendModal } from "./pages/shared-modals/user-friend-modal";
 import { useSubscription } from "./hooks/use-subscription";
 import { HydraCloudModal } from "./pages/shared-modals/hydra-cloud/hydra-cloud-modal";
 import { ArchiveDeletionModal } from "./pages/downloads/archive-deletion-error-modal";
@@ -54,12 +53,7 @@ export function App() {
  const { clearDownload, setLastPacket } = useDownload();

  const {
-    userDetails,
    hasActiveSubscription,
-    isFriendsModalVisible,
-    friendRequetsModalTab,
-    friendModalUserId,
-    hideFriendsModal,
    fetchUserDetails,
    updateUserDetails,
    clearUserDetails,
@@ -135,7 +129,6 @@ export function App() {
      .then((response) => {
        if (response) {
          updateUserDetails(response);
-          window.electron.syncFriendRequests();
        }
      })
      .finally(() => {
@@ -152,7 +145,6 @@ export function App() {
    fetchUserDetails().then((response) => {
      if (response) {
        updateUserDetails(response);
-        window.electron.syncFriendRequests();
        showSuccessToast(t("successfully_signed_in"));
      }
    });
@@ -305,15 +297,6 @@ export function App() {
        onClose={() => setShowArchiveDeletionModal(false)}
      />

-      {userDetails && (
-        <UserFriendModal
-          visible={isFriendsModalVisible}
-          initialTab={friendRequetsModalTab}
-          onClose={hideFriendsModal}
-          userId={friendModalUserId}
-        />
-      )}
-
      <main>
        <Sidebar />

--- a/src/renderer/src/components/header/header.tsx
+++ b/src/renderer/src/components/header/header.tsx
@@ -82,6 +82,7 @@ export function Header() {
    if (location.pathname.startsWith("/game")) return headerTitle;
    if (location.pathname.startsWith("/achievements")) return headerTitle;
    if (location.pathname.startsWith("/profile")) return headerTitle;
+    if (location.pathname.startsWith("/notifications")) return headerTitle;
    if (location.pathname.startsWith("/library"))
      return headerTitle || t("library");
    if (location.pathname.startsWith("/search")) return t("search_results");
@@ -323,7 +324,8 @@ export function Header() {
      <SearchDropdown
        visible={
          isDropdownVisible &&
-          (historyItems.length > 0 ||
+          (searchValue.trim().length > 0 ||
+            historyItems.length > 0 ||
            suggestions.length > 0 ||
            isLoadingSuggestions)
        }
--- a/src/renderer/src/components/modal/modal.tsx
+++ b/src/renderer/src/components/modal/modal.tsx
@@ -10,7 +10,7 @@ import cn from "classnames";

 export interface ModalProps {
  visible: boolean;
-  title: string;
+  title: React.ReactNode;
  description?: string;
  onClose: () => void;
  large?: boolean;
@@ -115,7 +115,6 @@ export function Modal({
          "modal--large": large,
        })}
        role="dialog"
-        aria-labelledby={title}
        aria-describedby={description}
        ref={modalContentRef}
        data-hydra-dialog
--- a/src/renderer/src/components/search-dropdown/search-dropdown.scss
+++ b/src/renderer/src/components/search-dropdown/search-dropdown.scss
@@ -5,7 +5,7 @@
  background-color: globals.$dark-background-color;
  border: 1px solid globals.$border-color;
  border-radius: 8px;
-  max-height: 300px;
+  max-height: 350px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
--- a/src/renderer/src/components/search-dropdown/search-dropdown.tsx
+++ b/src/renderer/src/components/search-dropdown/search-dropdown.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useRef, useCallback, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ClockIcon, SearchIcon, XIcon } from "@primer/octicons-react";
 import cn from "classnames";
@@ -92,23 +92,8 @@ export function SearchDropdown({
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, [visible, onClose, searchContainerRef]);

-  const handleItemClick = useCallback(
-    (
-      type: "history" | "suggestion",
-      item: SearchHistoryEntry | SearchSuggestion
-    ) => {
-      if (type === "history") {
-        onSelectHistory((item as SearchHistoryEntry).query);
-      } else {
-        onSelectSuggestion(item as SearchSuggestion);
-      }
-    },
-    [onSelectHistory, onSelectSuggestion]
-  );
-
  if (!visible) return null;

-  const totalItems = historyItems.length + suggestions.length;
  const hasHistory = historyItems.length > 0;
  const hasSuggestions = suggestions.length > 0;

@@ -158,7 +143,7 @@ export function SearchDropdown({
                      activeIndex === getItemIndex("history", index),
                  })}
                  onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => handleItemClick("history", item)}
+                  onClick={() => onSelectHistory(item.query)}
                >
                  <ClockIcon size={16} className="search-dropdown__item-icon" />
                  <span className="search-dropdown__item-text">
@@ -200,7 +185,7 @@ export function SearchDropdown({
                      activeIndex === getItemIndex("suggestion", index),
                  })}
                  onMouseDown={(e) => e.preventDefault()}
-                  onClick={() => handleItemClick("suggestion", item)}
+                  onClick={() => onSelectSuggestion(item)}
                >
                  {item.iconUrl ? (
                    <img
@@ -227,13 +212,6 @@ export function SearchDropdown({
      {isLoadingSuggestions && !hasSuggestions && !hasHistory && (
        <div className="search-dropdown__loading">{t("loading")}</div>
      )}
-
-      {!isLoadingSuggestions &&
-        !hasHistory &&
-        !hasSuggestions &&
-        totalItems === 0 && (
-          <div className="search-dropdown__empty">{t("no_results")}</div>
-        )}
    </div>
  );

--- a/src/renderer/src/components/sidebar/sidebar-profile.scss
+++ b/src/renderer/src/components/sidebar/sidebar-profile.scss
@@ -46,7 +46,7 @@
    white-space: nowrap;
  }

-  &__friends-button {
+  &__notification-button {
    color: globals.$muted-color;
    cursor: pointer;
    border-radius: 50%;
@@ -62,7 +62,7 @@
    }
  }

-  &__friends-button-badge {
+  &__notification-button-badge {
    background-color: globals.$success-color;
    display: flex;
    justify-content: center;
@@ -73,6 +73,8 @@
    position: absolute;
    top: -5px;
    right: -5px;
+    font-size: 10px;
+    font-weight: bold;
  }

  &__game-running-icon {
--- a/src/renderer/src/components/sidebar/sidebar-profile.tsx
+++ b/src/renderer/src/components/sidebar/sidebar-profile.tsx
@@ -1,12 +1,13 @@
 import { useNavigate } from "react-router-dom";
-import { PeopleIcon } from "@primer/octicons-react";
+import { BellIcon } from "@primer/octicons-react";
 import { useAppSelector, useUserDetails } from "@renderer/hooks";
-import { useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar } from "../avatar/avatar";
 import { AuthPage } from "@shared";
+import { logger } from "@renderer/logger";
+import type { NotificationCountResponse } from "@types";
 import "./sidebar-profile.scss";

 export function SidebarProfile() {
@@ -14,11 +15,75 @@ export function SidebarProfile() {

  const { t } = useTranslation("sidebar");

-  const { userDetails, friendRequestCount, showFriendsModal } =
-    useUserDetails();
+  const { userDetails } = useUserDetails();

  const { gameRunning } = useAppSelector((state) => state.gameRunning);

+  const [notificationCount, setNotificationCount] = useState(0);
+
+  const fetchNotificationCount = useCallback(async () => {
+    try {
+      // Always fetch local notification count
+      const localCount = await window.electron.getLocalNotificationsCount();
+
+      // Fetch API notification count only if logged in
+      let apiCount = 0;
+      if (userDetails) {
+        try {
+          const response =
+            await window.electron.hydraApi.get<NotificationCountResponse>(
+              "/profile/notifications/count",
+              { needsAuth: true }
+            );
+          apiCount = response.count;
+        } catch {
+          // Ignore API errors
+        }
+      }
+
+      setNotificationCount(localCount + apiCount);
+    } catch (error) {
+      logger.error("Failed to fetch notification count", error);
+    }
+  }, [userDetails]);
+
+  useEffect(() => {
+    fetchNotificationCount();
+
+    const interval = setInterval(fetchNotificationCount, 60000);
+    return () => clearInterval(interval);
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onLocalNotificationCreated(() => {
+      fetchNotificationCount();
+    });
+
+    return () => unsubscribe();
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const handleNotificationsChange = () => {
+      fetchNotificationCount();
+    };
+
+    window.addEventListener("notificationsChanged", handleNotificationsChange);
+    return () => {
+      window.removeEventListener(
+        "notificationsChanged",
+        handleNotificationsChange
+      );
+    };
+  }, [fetchNotificationCount]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onSyncNotificationCount(() => {
+      fetchNotificationCount();
+    });
+
+    return () => unsubscribe();
+  }, [fetchNotificationCount]);
+
  const handleProfileClick = () => {
    if (userDetails === null) {
      window.electron.openAuthWindow(AuthPage.SignIn);
@@ -28,28 +93,24 @@ export function SidebarProfile() {
    navigate(`/profile/${userDetails.id}`);
  };

-  const friendsButton = useMemo(() => {
-    if (!userDetails) return null;
-
+  const notificationsButton = useMemo(() => {
    return (
      <button
        type="button"
-        className="sidebar-profile__friends-button"
-        onClick={() =>
-          showFriendsModal(UserFriendModalTab.AddFriend, userDetails.id)
-        }
-        title={t("friends")}
+        className="sidebar-profile__notification-button"
+        onClick={() => navigate("/notifications")}
+        title={t("notifications")}
      >
-        {friendRequestCount > 0 && (
-          <small className="sidebar-profile__friends-button-badge">
-            {friendRequestCount > 99 ? "99+" : friendRequestCount}
+        {notificationCount > 0 && (
+          <small className="sidebar-profile__notification-button-badge">
+            {notificationCount > 99 ? "99+" : notificationCount}
          </small>
        )}

-        <PeopleIcon size={16} />
+        <BellIcon size={16} />
      </button>
    );
-  }, [userDetails, t, friendRequestCount, showFriendsModal]);
+  }, [t, notificationCount, navigate]);

  const gameRunningDetails = () => {
    if (!userDetails || !gameRunning) return null;
@@ -98,7 +159,7 @@ export function SidebarProfile() {
        </div>
      </button>

-      {friendsButton}
+      {notificationsButton}
    </div>
  );
 }
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -14,6 +14,7 @@ import type {
  GameStats,
  UserDetails,
  FriendRequestSync,
+  NotificationSync,
  GameArtifact,
  LudusaviBackup,
  UserAchievement,
@@ -31,6 +32,7 @@ import type {
  Game,
  DiskUsage,
  DownloadSource,
+  LocalNotification,
 } from "@types";
 import type { AxiosProgressEvent } from "axios";

@@ -387,10 +389,12 @@ declare global {
    processProfileImage: (
      path: string
    ) => Promise<{ imagePath: string; mimeType: string }>;
-    syncFriendRequests: () => Promise<void>;
    onSyncFriendRequests: (
      cb: (friendRequests: FriendRequestSync) => void
    ) => () => Electron.IpcRenderer;
+    onSyncNotificationCount: (
+      cb: (notification: NotificationSync) => void
+    ) => () => Electron.IpcRenderer;
    updateFriendRequest: (
      userId: string,
      action: FriendRequestAction
@@ -398,6 +402,15 @@ declare global {

    /* Notifications */
    publishNewRepacksNotification: (newRepacksCount: number) => Promise<void>;
+    getLocalNotifications: () => Promise<LocalNotification[]>;
+    getLocalNotificationsCount: () => Promise<number>;
+    markLocalNotificationRead: (id: string) => Promise<void>;
+    markAllLocalNotificationsRead: () => Promise<void>;
+    deleteLocalNotification: (id: string) => Promise<void>;
+    clearAllLocalNotifications: () => Promise<void>;
+    onLocalNotificationCreated: (
+      cb: (notification: LocalNotification) => void
+    ) => () => Electron.IpcRenderer;
    onAchievementUnlocked: (
      cb: (
        position?: AchievementCustomNotificationPosition,
--- a/src/renderer/src/features/user-details-slice.ts
+++ b/src/renderer/src/features/user-details-slice.ts
@@ -1,5 +1,4 @@
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";
 import type { FriendRequest, UserDetails } from "@types";

 export interface UserDetailsState {
@@ -7,9 +6,6 @@ export interface UserDetailsState {
  profileBackground: null | string;
  friendRequests: FriendRequest[];
  friendRequestCount: number;
-  isFriendsModalVisible: boolean;
-  friendRequetsModalTab: UserFriendModalTab | null;
-  friendModalUserId: string;
 }

 const initialState: UserDetailsState = {
@@ -17,9 +13,6 @@ const initialState: UserDetailsState = {
  profileBackground: null,
  friendRequests: [],
  friendRequestCount: 0,
-  isFriendsModalVisible: false,
-  friendRequetsModalTab: null,
-  friendModalUserId: "",
 };

 export const userDetailsSlice = createSlice({
@@ -38,18 +31,6 @@ export const userDetailsSlice = createSlice({
    setFriendRequestCount: (state, action: PayloadAction<number>) => {
      state.friendRequestCount = action.payload;
    },
-    setFriendsModalVisible: (
-      state,
-      action: PayloadAction<{ initialTab: UserFriendModalTab; userId: string }>
-    ) => {
-      state.isFriendsModalVisible = true;
-      state.friendRequetsModalTab = action.payload.initialTab;
-      state.friendModalUserId = action.payload.userId;
-    },
-    setFriendsModalHidden: (state) => {
-      state.isFriendsModalVisible = false;
-      state.friendRequetsModalTab = null;
-    },
  },
 });

@@ -58,6 +39,4 @@ export const {
  setProfileBackground,
  setFriendRequests,
  setFriendRequestCount,
-  setFriendsModalVisible,
-  setFriendsModalHidden,
 } = userDetailsSlice.actions;
--- a/src/renderer/src/hooks/use-user-details.ts
+++ b/src/renderer/src/hooks/use-user-details.ts
@@ -4,8 +4,6 @@ import {
  setProfileBackground,
  setUserDetails,
  setFriendRequests,
-  setFriendsModalVisible,
-  setFriendsModalHidden,
 } from "@renderer/features";
 import type {
  FriendRequestAction,
@@ -13,20 +11,12 @@ import type {
  UserDetails,
  FriendRequest,
 } from "@types";
-import { UserFriendModalTab } from "@renderer/pages/shared-modals/user-friend-modal";

 export function useUserDetails() {
  const dispatch = useAppDispatch();

-  const {
-    userDetails,
-    profileBackground,
-    friendRequests,
-    friendRequestCount,
-    isFriendsModalVisible,
-    friendModalUserId,
-    friendRequetsModalTab,
-  } = useAppSelector((state) => state.userDetails);
+  const { userDetails, profileBackground, friendRequests, friendRequestCount } =
+    useAppSelector((state) => state.userDetails);

  const clearUserDetails = useCallback(async () => {
    dispatch(setUserDetails(null));
@@ -85,24 +75,11 @@ export function useUserDetails() {
    return window.electron.hydraApi
      .get<FriendRequest[]>("/profile/friend-requests")
      .then((friendRequests) => {
-        window.electron.syncFriendRequests();
        dispatch(setFriendRequests(friendRequests));
      })
      .catch(() => {});
  }, [dispatch]);

-  const showFriendsModal = useCallback(
-    (initialTab: UserFriendModalTab, userId: string) => {
-      dispatch(setFriendsModalVisible({ initialTab, userId }));
-      fetchFriendRequests();
-    },
-    [dispatch, fetchFriendRequests]
-  );
-
-  const hideFriendsModal = useCallback(() => {
-    dispatch(setFriendsModalHidden());
-  }, [dispatch]);
-
  const sendFriendRequest = useCallback(
    async (userId: string) => {
      return window.electron.hydraApi
@@ -152,12 +129,7 @@ export function useUserDetails() {
    profileBackground,
    friendRequests,
    friendRequestCount,
-    friendRequetsModalTab,
-    isFriendsModalVisible,
-    friendModalUserId,
    hasActiveSubscription,
-    showFriendsModal,
-    hideFriendsModal,
    fetchUserDetails,
    signOut,
    clearUserDetails,
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -31,6 +31,7 @@ import Profile from "./pages/profile/profile";
 import Achievements from "./pages/achievements/achievements";
 import ThemeEditor from "./pages/theme-editor/theme-editor";
 import Library from "./pages/library/library";
+import Notifications from "./pages/notifications/notifications";
 import { AchievementNotification } from "./pages/achievements/notification/achievement-notification";

 console.log = logger.log;
@@ -76,6 +77,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
            <Route path="/settings" element={<Settings />} />
            <Route path="/profile/:userId" element={<Profile />} />
            <Route path="/achievements" element={<Achievements />} />
+            <Route path="/notifications" element={<Notifications />} />
          </Route>

          <Route path="/theme-editor" element={<ThemeEditor />} />
--- a/src/renderer/src/pages/game-details/game-details-content.tsx
+++ b/src/renderer/src/pages/game-details/game-details-content.tsx
@@ -1,6 +1,7 @@
-import { useContext, useEffect, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { PencilIcon } from "@primer/octicons-react";
 import { useTranslation } from "react-i18next";
+import { useSearchParams } from "react-router-dom";

 import { HeroPanel } from "./hero";
 import { DescriptionHeader } from "./description-header/description-header";
@@ -55,6 +56,8 @@ const getImageWithCustomPriority = (

 export function GameDetailsContent() {
  const { t } = useTranslation("game_details");
+  const [searchParams] = useSearchParams();
+  const reviewsRef = useRef<HTMLDivElement>(null);

  const {
    objectId,
@@ -137,6 +140,16 @@ export function GameDetailsContent() {
    getGameArtifacts();
  }, [getGameArtifacts]);

+  // Scroll to reviews section if reviews=true in URL
+  useEffect(() => {
+    const shouldScrollToReviews = searchParams.get("reviews") === "true";
+    if (shouldScrollToReviews && reviewsRef.current) {
+      setTimeout(() => {
+        reviewsRef.current?.scrollIntoView({ behavior: "smooth" });
+      }, 500);
+    }
+  }, [searchParams, objectId]);
+
  const isCustomGame = game?.shop === "custom";

  const heroImage = isCustomGame
@@ -229,15 +242,17 @@ export function GameDetailsContent() {
            )}

            {shop !== "custom" && shop && objectId && (
-              <GameReviews
-                shop={shop}
-                objectId={objectId}
-                game={game}
-                userDetailsId={userDetails?.id}
-                isGameInLibrary={isGameInLibrary}
-                hasUserReviewed={hasUserReviewed}
-                onUserReviewedChange={setHasUserReviewed}
-              />
+              <div ref={reviewsRef}>
+                <GameReviews
+                  shop={shop}
+                  objectId={objectId}
+                  game={game}
+                  userDetailsId={userDetails?.id}
+                  isGameInLibrary={isGameInLibrary}
+                  hasUserReviewed={hasUserReviewed}
+                  onUserReviewedChange={setHasUserReviewed}
+                />
+              </div>
            )}
          </div>

--- a/src/renderer/src/pages/notifications/local-notification-item.tsx
+++ b/src/renderer/src/pages/notifications/local-notification-item.tsx
@@ -0,0 +1,103 @@
+import { useCallback } from "react";
+import {
+  XIcon,
+  DownloadIcon,
+  PackageIcon,
+  SyncIcon,
+  TrophyIcon,
+  ClockIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useDate } from "@renderer/hooks";
+import cn from "classnames";
+
+import type { LocalNotification } from "@types";
+import "./notification-item.scss";
+
+interface LocalNotificationItemProps {
+  notification: LocalNotification;
+  onDismiss: (id: string) => void;
+  onMarkAsRead: (id: string) => void;
+}
+
+export function LocalNotificationItem({
+  notification,
+  onDismiss,
+  onMarkAsRead,
+}: Readonly<LocalNotificationItemProps>) {
+  const { t } = useTranslation("notifications_page");
+  const { formatDistance } = useDate();
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => {
+    if (!notification.isRead) {
+      onMarkAsRead(notification.id);
+    }
+
+    if (notification.url) {
+      navigate(notification.url);
+    }
+  }, [notification, onMarkAsRead, navigate]);
+
+  const handleDismiss = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onDismiss(notification.id);
+    },
+    [notification.id, onDismiss]
+  );
+
+  const getIcon = () => {
+    switch (notification.type) {
+      case "DOWNLOAD_COMPLETE":
+        return <DownloadIcon size={24} />;
+      case "EXTRACTION_COMPLETE":
+        return <PackageIcon size={24} />;
+      case "UPDATE_AVAILABLE":
+        return <SyncIcon size={24} />;
+      case "ACHIEVEMENT_UNLOCKED":
+        return <TrophyIcon size={24} />;
+      default:
+        return <DownloadIcon size={24} />;
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn("notification-item", {
+        "notification-item--unread": !notification.isRead,
+      })}
+      onClick={handleClick}
+    >
+      <div className="notification-item__picture">
+        {notification.pictureUrl ? (
+          <img src={notification.pictureUrl} alt="" />
+        ) : (
+          getIcon()
+        )}
+      </div>
+
+      <div className="notification-item__content">
+        <span className="notification-item__title">{notification.title}</span>
+        <span className="notification-item__description">
+          {notification.description}
+        </span>
+        <span className="notification-item__time">
+          <ClockIcon size={12} />
+          {formatDistance(new Date(notification.createdAt), new Date())}
+        </span>
+      </div>
+
+      <button
+        type="button"
+        className="notification-item__dismiss"
+        onClick={handleDismiss}
+        title={t("dismiss")}
+      >
+        <XIcon size={16} />
+      </button>
+    </button>
+  );
+}
--- a/src/renderer/src/pages/notifications/notification-item.scss
+++ b/src/renderer/src/pages/notifications/notification-item.scss
@@ -0,0 +1,120 @@
+@use "../../scss/globals.scss";
+
+.notification-item {
+  display: flex;
+  align-items: center;
+  gap: calc(globals.$spacing-unit * 2);
+  padding: calc(globals.$spacing-unit * 2);
+  background-color: globals.$dark-background-color;
+  border: 1px solid globals.$border-color;
+  border-radius: 8px;
+  transition: all ease 0.2s;
+  position: relative;
+  opacity: 0.4;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.03);
+    opacity: 0.6;
+  }
+
+  &--unread {
+    border-left: 3px solid globals.$brand-teal;
+    opacity: 1;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    .notification-item__title {
+      color: #fff;
+    }
+  }
+
+  &__picture {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__badge-picture {
+    border-radius: 8px;
+    background-color: globals.$background-color;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__review-picture {
+    color: #f5a623;
+  }
+
+  &__content {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+  }
+
+  &__title {
+    font-size: globals.$body-font-size;
+    font-weight: 600;
+    color: globals.$muted-color;
+  }
+
+  &__description {
+    font-size: globals.$small-font-size;
+    color: globals.$body-color;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__time {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+    font-size: globals.$small-font-size;
+    color: rgba(255, 255, 255, 0.5);
+  }
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+    flex-shrink: 0;
+  }
+
+  &__dismiss {
+    position: absolute;
+    top: calc(globals.$spacing-unit / 2);
+    right: calc(globals.$spacing-unit / 2);
+    background: transparent;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 50%;
+    transition: all ease 0.2s;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+}
--- a/src/renderer/src/pages/notifications/notification-item.tsx
+++ b/src/renderer/src/pages/notifications/notification-item.tsx
@@ -0,0 +1,228 @@
+import { useCallback, useMemo } from "react";
+import {
+  XIcon,
+  PersonIcon,
+  ClockIcon,
+  StarFillIcon,
+} from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Button } from "@renderer/components";
+import { useDate, useUserDetails } from "@renderer/hooks";
+import cn from "classnames";
+
+import type { Notification, Badge } from "@types";
+import "./notification-item.scss";
+
+const parseNotificationUrl = (notificationUrl: string): string => {
+  const url = new URL(notificationUrl, "http://localhost");
+  const userId = url.searchParams.get("userId");
+  const badgeName = url.searchParams.get("name");
+  const gameTitle = url.searchParams.get("title");
+  const showReviews = url.searchParams.get("reviews");
+
+  if (url.pathname === "/profile" && userId) {
+    return `/profile/${userId}`;
+  }
+
+  if (url.pathname === "/badges" && badgeName) {
+    return `/badges/${badgeName}`;
+  }
+
+  if (url.pathname.startsWith("/game/")) {
+    const params = new URLSearchParams();
+    if (gameTitle) params.set("title", gameTitle);
+    if (showReviews) params.set("reviews", showReviews);
+    const queryString = params.toString();
+    return queryString ? `${url.pathname}?${queryString}` : url.pathname;
+  }
+
+  return notificationUrl;
+};
+
+interface NotificationItemProps {
+  notification: Notification;
+  badges: Badge[];
+  onDismiss: (id: string) => void;
+  onMarkAsRead: (id: string) => void;
+  onAcceptFriendRequest?: (senderId: string) => void;
+  onRefuseFriendRequest?: (senderId: string) => void;
+}
+
+export function NotificationItem({
+  notification,
+  badges,
+  onDismiss,
+  onMarkAsRead,
+  onAcceptFriendRequest,
+  onRefuseFriendRequest,
+}: Readonly<NotificationItemProps>) {
+  const { t } = useTranslation("notifications_page");
+  const { formatDistance } = useDate();
+  const navigate = useNavigate();
+  const { updateFriendRequestState } = useUserDetails();
+
+  const badge = useMemo(() => {
+    if (notification.type !== "BADGE_RECEIVED") return null;
+    return badges.find((b) => b.name === notification.variables.badgeName);
+  }, [notification, badges]);
+
+  const handleClick = useCallback(() => {
+    if (!notification.isRead) {
+      onMarkAsRead(notification.id);
+    }
+
+    if (notification.url) {
+      navigate(parseNotificationUrl(notification.url));
+    }
+  }, [notification, onMarkAsRead, navigate]);
+
+  const handleAccept = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const senderId = notification.variables.senderId;
+      if (senderId) {
+        await updateFriendRequestState(senderId, "ACCEPTED");
+        onAcceptFriendRequest?.(senderId);
+        onDismiss(notification.id);
+      }
+    },
+    [notification, updateFriendRequestState, onAcceptFriendRequest, onDismiss]
+  );
+
+  const handleRefuse = useCallback(
+    async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const senderId = notification.variables.senderId;
+      if (senderId) {
+        await updateFriendRequestState(senderId, "REFUSED");
+        onRefuseFriendRequest?.(senderId);
+        onDismiss(notification.id);
+      }
+    },
+    [notification, updateFriendRequestState, onRefuseFriendRequest, onDismiss]
+  );
+
+  const handleDismiss = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onDismiss(notification.id);
+    },
+    [notification.id, onDismiss]
+  );
+
+  const getNotificationContent = () => {
+    switch (notification.type) {
+      case "FRIEND_REQUEST_RECEIVED":
+        return {
+          title: t("friend_request_received_title"),
+          description: t("friend_request_received_description", {
+            displayName: notification.variables.senderDisplayName,
+          }),
+          showActions: true,
+        };
+      case "FRIEND_REQUEST_ACCEPTED":
+        return {
+          title: t("friend_request_accepted_title"),
+          description: t("friend_request_accepted_description", {
+            displayName: notification.variables.accepterDisplayName,
+          }),
+          showActions: false,
+        };
+      case "BADGE_RECEIVED":
+        return {
+          title: t("badge_received_title"),
+          description: badge?.description || notification.variables.badgeName,
+          showActions: false,
+        };
+      case "REVIEW_UPVOTE":
+        return {
+          title: t("review_upvote_title", {
+            gameTitle: notification.variables.gameTitle,
+          }),
+          description: t("review_upvote_description", {
+            count: Number.parseInt(
+              notification.variables.upvoteCount || "1",
+              10
+            ),
+          }),
+          showActions: false,
+        };
+      default:
+        return {
+          title: t("notification"),
+          description: "",
+          showActions: false,
+        };
+    }
+  };
+
+  const content = getNotificationContent();
+  const isBadge = notification.type === "BADGE_RECEIVED";
+  const isReview = notification.type === "REVIEW_UPVOTE";
+
+  const getIcon = () => {
+    if (notification.pictureUrl) {
+      return <img src={notification.pictureUrl} alt="" />;
+    }
+    if (isReview) {
+      return <StarFillIcon size={24} />;
+    }
+    return <PersonIcon size={24} />;
+  };
+
+  return (
+    <button
+      type="button"
+      className={cn("notification-item", {
+        "notification-item--unread":
+          !notification.isRead ||
+          notification.type === "FRIEND_REQUEST_RECEIVED",
+      })}
+      onClick={handleClick}
+    >
+      <div
+        className={cn("notification-item__picture", {
+          "notification-item__badge-picture": isBadge,
+          "notification-item__review-picture": isReview,
+        })}
+      >
+        {getIcon()}
+      </div>
+
+      <div className="notification-item__content">
+        <span className="notification-item__title">{content.title}</span>
+        <span className="notification-item__description">
+          {content.description}
+        </span>
+        <span className="notification-item__time">
+          <ClockIcon size={12} />
+          {formatDistance(new Date(notification.createdAt), new Date())}
+        </span>
+      </div>
+
+      {content.showActions &&
+        notification.type === "FRIEND_REQUEST_RECEIVED" && (
+          <div className="notification-item__actions">
+            <Button theme="primary" onClick={handleAccept}>
+              {t("accept")}
+            </Button>
+            <Button theme="outline" onClick={handleRefuse}>
+              {t("refuse")}
+            </Button>
+          </div>
+        )}
+
+      {notification.type !== "FRIEND_REQUEST_RECEIVED" && (
+        <button
+          type="button"
+          className="notification-item__dismiss"
+          onClick={handleDismiss}
+          title={t("dismiss")}
+        >
+          <XIcon size={16} />
+        </button>
+      )}
+    </button>
+  );
+}
--- a/src/renderer/src/pages/notifications/notifications.scss
+++ b/src/renderer/src/pages/notifications/notifications.scss
@@ -0,0 +1,58 @@
+@use "../../scss/globals.scss";
+
+.notifications {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  padding: calc(globals.$spacing-unit * 3);
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+
+  &__actions {
+    display: flex;
+    gap: globals.$spacing-unit;
+    justify-content: flex-end;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+  }
+
+  &__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;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__loading {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    align-items: center;
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+}
--- a/src/renderer/src/pages/notifications/notifications.tsx
+++ b/src/renderer/src/pages/notifications/notifications.tsx
@@ -0,0 +1,400 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { BellIcon } from "@primer/octicons-react";
+import { useTranslation } from "react-i18next";
+import { AnimatePresence, motion } from "framer-motion";
+import { Button } from "@renderer/components";
+import { useAppDispatch, useToast, useUserDetails } from "@renderer/hooks";
+import { setHeaderTitle } from "@renderer/features";
+import { logger } from "@renderer/logger";
+
+import { NotificationItem } from "./notification-item";
+import { LocalNotificationItem } from "./local-notification-item";
+import type {
+  Notification,
+  LocalNotification,
+  NotificationsResponse,
+  MergedNotification,
+  Badge,
+} from "@types";
+import "./notifications.scss";
+
+export default function Notifications() {
+  const { t, i18n } = useTranslation("notifications_page");
+  const { showSuccessToast, showErrorToast } = useToast();
+  const { userDetails } = useUserDetails();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(setHeaderTitle(t("title")));
+  }, [dispatch, t]);
+
+  const [apiNotifications, setApiNotifications] = useState<Notification[]>([]);
+  const [localNotifications, setLocalNotifications] = useState<
+    LocalNotification[]
+  >([]);
+  const [badges, setBadges] = useState<Badge[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [clearingIds, setClearingIds] = useState<Set<string>>(new Set());
+  const [pagination, setPagination] = useState({
+    total: 0,
+    hasMore: false,
+    skip: 0,
+  });
+
+  const fetchLocalNotifications = useCallback(async () => {
+    try {
+      const notifications = await window.electron.getLocalNotifications();
+      setLocalNotifications(notifications);
+    } catch (error) {
+      logger.error("Failed to fetch local notifications", error);
+    }
+  }, []);
+
+  const fetchBadges = useCallback(async () => {
+    try {
+      const language = i18n.language.split("-")[0];
+      const params = new URLSearchParams({ locale: language });
+      const badgesResponse = await window.electron.hydraApi.get<Badge[]>(
+        `/badges?${params.toString()}`,
+        { needsAuth: false }
+      );
+      setBadges(badgesResponse);
+    } catch (error) {
+      logger.error("Failed to fetch badges", error);
+    }
+  }, [i18n.language]);
+
+  const fetchApiNotifications = useCallback(
+    async (skip = 0, append = false) => {
+      if (!userDetails) return;
+
+      try {
+        setIsLoading(true);
+        const response =
+          await window.electron.hydraApi.get<NotificationsResponse>(
+            "/profile/notifications",
+            {
+              params: { filter: "all", take: 20, skip },
+              needsAuth: true,
+            }
+          );
+
+        logger.log("Notifications API response:", response);
+
+        if (append) {
+          setApiNotifications((prev) => [...prev, ...response.notifications]);
+        } else {
+          setApiNotifications(response.notifications);
+        }
+
+        setPagination({
+          total: response.pagination.total,
+          hasMore: response.pagination.hasMore,
+          skip: response.pagination.skip + response.pagination.take,
+        });
+      } catch (error) {
+        logger.error("Failed to fetch API notifications", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [userDetails]
+  );
+
+  const fetchAllNotifications = useCallback(async () => {
+    setIsLoading(true);
+    await Promise.all([
+      fetchLocalNotifications(),
+      fetchBadges(),
+      userDetails ? fetchApiNotifications(0, false) : Promise.resolve(),
+    ]);
+    setIsLoading(false);
+  }, [
+    fetchLocalNotifications,
+    fetchBadges,
+    fetchApiNotifications,
+    userDetails,
+  ]);
+
+  useEffect(() => {
+    fetchAllNotifications();
+  }, [fetchAllNotifications]);
+
+  useEffect(() => {
+    const unsubscribe = window.electron.onLocalNotificationCreated(
+      (notification) => {
+        setLocalNotifications((prev) => [notification, ...prev]);
+      }
+    );
+
+    return () => unsubscribe();
+  }, []);
+
+  const mergedNotifications = useMemo<MergedNotification[]>(() => {
+    const sortByDate = (a: MergedNotification, b: MergedNotification) =>
+      new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+
+    // High priority notifications (priority === 1) - keep in API order
+    const highPriority: MergedNotification[] = apiNotifications
+      .filter((n) => n.priority === 1)
+      .map((n) => ({ ...n, source: "api" as const }));
+
+    // Low priority: other API notifications + local notifications, merged and sorted by date
+    const lowPriorityApi: MergedNotification[] = apiNotifications
+      .filter((n) => n.priority !== 1)
+      .map((n) => ({ ...n, source: "api" as const }));
+
+    const localWithSource: MergedNotification[] = localNotifications.map(
+      (n) => ({
+        ...n,
+        source: "local" as const,
+      })
+    );
+
+    const lowPriority = [...lowPriorityApi, ...localWithSource].sort(
+      sortByDate
+    );
+
+    return [...highPriority, ...lowPriority];
+  }, [apiNotifications, localNotifications]);
+
+  const displayedNotifications = useMemo(() => {
+    return mergedNotifications.filter((n) => !clearingIds.has(n.id));
+  }, [mergedNotifications, clearingIds]);
+
+  const notifyCountChange = useCallback(() => {
+    window.dispatchEvent(new CustomEvent("notificationsChanged"));
+  }, []);
+
+  const handleMarkAsRead = useCallback(
+    async (id: string, source: "api" | "local") => {
+      try {
+        if (source === "api") {
+          await window.electron.hydraApi.patch(
+            `/profile/notifications/${id}/read`,
+            {
+              data: { id },
+              needsAuth: true,
+            }
+          );
+          setApiNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+          );
+        } else {
+          await window.electron.markLocalNotificationRead(id);
+          setLocalNotifications((prev) =>
+            prev.map((n) => (n.id === id ? { ...n, isRead: true } : n))
+          );
+        }
+        notifyCountChange();
+      } catch (error) {
+        logger.error("Failed to mark notification as read", error);
+      }
+    },
+    [notifyCountChange]
+  );
+
+  const handleMarkAllAsRead = useCallback(async () => {
+    try {
+      // Mark all API notifications as read
+      if (userDetails && apiNotifications.some((n) => !n.isRead)) {
+        await window.electron.hydraApi.patch(
+          `/profile/notifications/all/read`,
+          { needsAuth: true }
+        );
+        setApiNotifications((prev) =>
+          prev.map((n) => ({ ...n, isRead: true }))
+        );
+      }
+
+      // Mark all local notifications as read
+      await window.electron.markAllLocalNotificationsRead();
+      setLocalNotifications((prev) =>
+        prev.map((n) => ({ ...n, isRead: true }))
+      );
+
+      notifyCountChange();
+      showSuccessToast(t("marked_all_as_read"));
+    } catch (error) {
+      logger.error("Failed to mark all as read", error);
+      showErrorToast(t("failed_to_mark_as_read"));
+    }
+  }, [
+    apiNotifications,
+    userDetails,
+    showSuccessToast,
+    showErrorToast,
+    t,
+    notifyCountChange,
+  ]);
+
+  const handleDismiss = useCallback(
+    async (id: string, source: "api" | "local") => {
+      try {
+        if (source === "api") {
+          await window.electron.hydraApi.delete(
+            `/profile/notifications/${id}`,
+            { needsAuth: true }
+          );
+          setApiNotifications((prev) => prev.filter((n) => n.id !== id));
+          setPagination((prev) => ({ ...prev, total: prev.total - 1 }));
+        } else {
+          await window.electron.deleteLocalNotification(id);
+          setLocalNotifications((prev) => prev.filter((n) => n.id !== id));
+        }
+        notifyCountChange();
+      } catch (error) {
+        logger.error("Failed to dismiss notification", error);
+        showErrorToast(t("failed_to_dismiss"));
+      }
+    },
+    [showErrorToast, t, notifyCountChange]
+  );
+
+  const handleClearAll = useCallback(async () => {
+    try {
+      // Mark all as clearing for animation
+      const allIds = new Set([
+        ...apiNotifications.map((n) => n.id),
+        ...localNotifications.map((n) => n.id),
+      ]);
+      setClearingIds(allIds);
+
+      // Wait for exit animation
+      await new Promise((resolve) => setTimeout(resolve, 300));
+
+      // Clear all API notifications
+      if (userDetails && apiNotifications.length > 0) {
+        await window.electron.hydraApi.delete(`/profile/notifications/all`, {
+          needsAuth: true,
+        });
+        setApiNotifications([]);
+      }
+
+      // Clear all local notifications
+      await window.electron.clearAllLocalNotifications();
+      setLocalNotifications([]);
+
+      setClearingIds(new Set());
+      setPagination({ total: 0, hasMore: false, skip: 0 });
+      notifyCountChange();
+      showSuccessToast(t("cleared_all"));
+    } catch (error) {
+      logger.error("Failed to clear all notifications", error);
+      setClearingIds(new Set());
+      showErrorToast(t("failed_to_clear"));
+    }
+  }, [
+    apiNotifications,
+    localNotifications,
+    userDetails,
+    showSuccessToast,
+    showErrorToast,
+    t,
+    notifyCountChange,
+  ]);
+
+  const handleLoadMore = useCallback(() => {
+    if (pagination.hasMore && !isLoading) {
+      fetchApiNotifications(pagination.skip, true);
+    }
+  }, [pagination, isLoading, fetchApiNotifications]);
+
+  const handleAcceptFriendRequest = useCallback(() => {
+    showSuccessToast(t("friend_request_accepted"));
+  }, [showSuccessToast, t]);
+
+  const handleRefuseFriendRequest = useCallback(() => {
+    showSuccessToast(t("friend_request_refused"));
+  }, [showSuccessToast, t]);
+
+  const renderNotification = (notification: MergedNotification) => {
+    const key =
+      notification.source === "local"
+        ? `local-${notification.id}`
+        : `api-${notification.id}`;
+
+    return (
+      <motion.div
+        key={key}
+        layout
+        initial={{ opacity: 0, x: -20 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: 100, transition: { duration: 0.2 } }}
+        transition={{ duration: 0.2 }}
+      >
+        {notification.source === "local" ? (
+          <LocalNotificationItem
+            notification={notification}
+            onDismiss={(id) => handleDismiss(id, "local")}
+            onMarkAsRead={(id) => handleMarkAsRead(id, "local")}
+          />
+        ) : (
+          <NotificationItem
+            notification={notification}
+            badges={badges}
+            onDismiss={(id) => handleDismiss(id, "api")}
+            onMarkAsRead={(id) => handleMarkAsRead(id, "api")}
+            onAcceptFriendRequest={handleAcceptFriendRequest}
+            onRefuseFriendRequest={handleRefuseFriendRequest}
+          />
+        )}
+      </motion.div>
+    );
+  };
+
+  const renderContent = () => {
+    if (isLoading && mergedNotifications.length === 0) {
+      return (
+        <div className="notifications__loading">
+          <span>{t("loading")}</span>
+        </div>
+      );
+    }
+
+    if (mergedNotifications.length === 0) {
+      return (
+        <div className="notifications__empty">
+          <div className="notifications__icon-container">
+            <BellIcon size={24} />
+          </div>
+          <h2>{t("empty_title")}</h2>
+          <p>{t("empty_description")}</p>
+        </div>
+      );
+    }
+
+    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>
+
+        <div className="notifications__list">
+          <AnimatePresence mode="popLayout">
+            {displayedNotifications.map(renderNotification)}
+          </AnimatePresence>
+        </div>
+
+        {pagination.hasMore && (
+          <div className="notifications__load-more">
+            <Button
+              theme="outline"
+              onClick={handleLoadMore}
+              disabled={isLoading}
+            >
+              {isLoading ? t("loading") : t("load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return <>{renderContent()}</>;
+}
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.scss
@@ -0,0 +1,120 @@
+@use "../../../scss/globals.scss";
+
+.add-friend-modal {
+  display: flex;
+  flex-direction: column;
+  gap: calc(globals.$spacing-unit * 2);
+  width: 100%;
+  min-width: 400px;
+
+  &__my-code {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    padding: calc(globals.$spacing-unit * 1.5);
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  &__my-code-label {
+    font-size: 0.875rem;
+    color: globals.$muted-color;
+    font-weight: 500;
+  }
+
+  &__my-code-value {
+    font-size: 0.875rem;
+    color: globals.$body-color;
+    font-family: monospace;
+    font-weight: 600;
+    flex: 1;
+  }
+
+  &__copy-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 2);
+    border-radius: 4px;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+      color: globals.$body-color;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+    gap: globals.$spacing-unit;
+  }
+
+  &__button {
+    align-self: flex-end;
+    white-space: nowrap;
+  }
+
+  &__pending-status {
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    text-align: center;
+    padding: calc(globals.$spacing-unit / 2);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 4px;
+    margin-top: calc(globals.$spacing-unit * -1);
+  }
+
+  &__pending-container {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+
+    h3 {
+      margin: 0;
+      font-size: globals.$body-font-size;
+      font-weight: 600;
+      color: globals.$muted-color;
+    }
+  }
+
+  &__pending-list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    max-height: 300px;
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__friend-item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__friend-name {
+    flex: 1;
+    font-weight: 600;
+    color: globals.$muted-color;
+    font-size: globals.$body-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
--- a/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/add-friend-modal.tsx
@@ -0,0 +1,185 @@
+import { Avatar, Button, Modal, TextField } from "@renderer/components";
+import { useToast, useUserDetails } from "@renderer/hooks";
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { CopyIcon } from "@primer/octicons-react";
+import "./add-friend-modal.scss";
+
+interface AddFriendModalProps {
+  readonly visible: boolean;
+  readonly onClose: () => void;
+}
+
+export function AddFriendModal({ visible, onClose }: AddFriendModalProps) {
+  const { t } = useTranslation("user_profile");
+  const navigate = useNavigate();
+
+  const [friendCode, setFriendCode] = useState("");
+  const [isAddingFriend, setIsAddingFriend] = useState(false);
+
+  const {
+    sendFriendRequest,
+    updateFriendRequestState,
+    friendRequests,
+    fetchFriendRequests,
+    userDetails,
+  } = useUserDetails();
+
+  const { showSuccessToast, showErrorToast } = useToast();
+
+  const copyMyFriendCode = () => {
+    if (userDetails?.id) {
+      navigator.clipboard.writeText(userDetails.id);
+      showSuccessToast(t("friend_code_copied"));
+    }
+  };
+
+  useEffect(() => {
+    if (visible) {
+      setFriendCode("");
+      fetchFriendRequests();
+    }
+  }, [visible, fetchFriendRequests]);
+
+  const handleChangeFriendCode = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const code = e.target.value.trim().slice(0, 8);
+    setFriendCode(code);
+  };
+
+  const validateFriendCode = (callback: () => void) => {
+    if (friendCode.length === 8) {
+      return callback();
+    }
+
+    showErrorToast(t("friend_code_length_error"));
+  };
+
+  const handleClickAddFriend = () => {
+    setIsAddingFriend(true);
+    sendFriendRequest(friendCode)
+      .then(() => {
+        setFriendCode("");
+        showSuccessToast(t("request_sent"));
+      })
+      .catch(() => {
+        showErrorToast(t("error_adding_friend"));
+      })
+      .finally(() => {
+        setIsAddingFriend(false);
+      });
+  };
+
+  const handleClickSeeProfile = () => {
+    if (friendCode.length === 8) {
+      onClose();
+      navigate(`/profile/${friendCode}`);
+    }
+  };
+
+  const handleClickRequest = (userId: string) => {
+    onClose();
+    navigate(`/profile/${userId}`);
+  };
+
+  const handleCancelFriendRequest = (userId: string) => {
+    updateFriendRequestState(userId, "CANCEL").catch(() => {
+      showErrorToast(t("try_again"));
+    });
+  };
+
+  const sentRequests = friendRequests.filter((req) => req.type === "SENT");
+  const currentRequest =
+    friendCode.length === 8
+      ? sentRequests.find((req) => req.id === friendCode)
+      : null;
+
+  return (
+    <Modal visible={visible} title={t("add_friends")} onClose={onClose}>
+      <div className="add-friend-modal">
+        {userDetails?.id && (
+          <div className="add-friend-modal__my-code">
+            <span className="add-friend-modal__my-code-label">
+              {t("your_friend_code")}
+            </span>
+            <span className="add-friend-modal__my-code-value">
+              {userDetails.id}
+            </span>
+            <button
+              onClick={copyMyFriendCode}
+              type="button"
+              className="add-friend-modal__copy-icon-button"
+              title={t("copy_friend_code")}
+            >
+              <CopyIcon size={16} />
+            </button>
+          </div>
+        )}
+
+        <div className="add-friend-modal__actions">
+          <TextField
+            label={t("friend_code")}
+            value={friendCode}
+            containerProps={{ style: { flex: 1 } }}
+            onChange={handleChangeFriendCode}
+          />
+          <Button
+            disabled={isAddingFriend}
+            type="button"
+            className="add-friend-modal__button"
+            onClick={() => validateFriendCode(handleClickAddFriend)}
+          >
+            {isAddingFriend ? t("sending") : t("add")}
+          </Button>
+          <Button
+            theme="outline"
+            onClick={() => validateFriendCode(handleClickSeeProfile)}
+            disabled={isAddingFriend}
+            className="add-friend-modal__button"
+            type="button"
+          >
+            {t("see_profile")}
+          </Button>
+        </div>
+        {currentRequest && (
+          <div className="add-friend-modal__pending-status">{t("pending")}</div>
+        )}
+
+        {sentRequests.length > 0 && (
+          <div className="add-friend-modal__pending-container">
+            <h3>{t("pending")}</h3>
+            <div className="add-friend-modal__pending-list">
+              {sentRequests.map((request) => (
+                <button
+                  key={request.id}
+                  type="button"
+                  className="add-friend-modal__friend-item"
+                  onClick={() => handleClickRequest(request.id)}
+                >
+                  <Avatar
+                    src={request.profileImageUrl}
+                    alt={request.displayName}
+                    size={40}
+                  />
+                  <span className="add-friend-modal__friend-name">
+                    {request.displayName}
+                  </span>
+                  <Button
+                    theme="outline"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleCancelFriendRequest(request.id);
+                    }}
+                    type="button"
+                  >
+                    {t("cancel_request")}
+                  </Button>
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/all-badges-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/all-badges-modal.scss
@@ -0,0 +1,87 @@
+@use "../../../scss/globals.scss";
+
+.all-badges-modal {
+  display: flex;
+  flex-direction: column;
+  gap: globals.$spacing-unit;
+  max-height: 400px;
+  margin-top: calc(globals.$spacing-unit * -1);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    transition: background-color ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    width: 48px;
+    height: 48px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+
+    img {
+      width: 32px;
+      height: 32px;
+      object-fit: contain;
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 0.5);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-title {
+    font-size: globals.$body-font-size;
+    font-weight: 600;
+    color: globals.$body-color;
+    margin: 0;
+  }
+
+  &__item-description {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+  }
+}
--- a/src/renderer/src/pages/profile/profile-content/all-badges-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/all-badges-modal.tsx
@@ -0,0 +1,58 @@
+import { useContext } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal } from "@renderer/components";
+import { userProfileContext } from "@renderer/context";
+import "./all-badges-modal.scss";
+
+interface AllBadgesModalProps {
+  visible: boolean;
+  onClose: () => void;
+}
+
+export function AllBadgesModal({
+  visible,
+  onClose,
+}: Readonly<AllBadgesModalProps>) {
+  const { t } = useTranslation("user_profile");
+  const { userProfile, badges } = useContext(userProfileContext);
+
+  const userBadges = userProfile?.badges
+    .map((badgeName) => badges.find((b) => b.name === badgeName))
+    .filter((badge) => badge !== undefined);
+
+  const modalTitle = (
+    <div className="all-badges-modal__title">
+      {t("badges")}
+      {userBadges && userBadges.length > 0 && (
+        <span className="all-badges-modal__count">{userBadges.length}</span>
+      )}
+    </div>
+  );
+
+  return (
+    <Modal visible={visible} title={modalTitle} onClose={onClose}>
+      <div className="all-badges-modal">
+        <div className="all-badges-modal__list">
+          {userBadges?.map((badge) => (
+            <div key={badge.name} className="all-badges-modal__item">
+              <div className="all-badges-modal__item-icon">
+                <img
+                  src={badge.badge.url}
+                  alt={badge.name}
+                  width={32}
+                  height={32}
+                />
+              </div>
+              <div className="all-badges-modal__item-content">
+                <h3 className="all-badges-modal__item-title">{badge.title}</h3>
+                <p className="all-badges-modal__item-description">
+                  {badge.description}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Modal>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
+++ b/src/renderer/src/pages/profile/profile-content/all-friends-modal.scss
@@ -0,0 +1,101 @@
+@use "../../../scss/globals.scss";
+
+.all-friends-modal {
+  display: flex;
+  flex-direction: column;
+  gap: globals.$spacing-unit;
+  max-height: 400px;
+  margin-top: calc(globals.$spacing-unit * -1);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: globals.$spacing-unit;
+    overflow-y: auto;
+    padding-right: globals.$spacing-unit;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 2);
+    padding: calc(globals.$spacing-unit * 1.5);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.05);
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit / 2);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__name {
+    font-weight: 600;
+    color: globals.$muted-color;
+    font-size: globals.$body-font-size;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__game {
+    display: flex;
+    align-items: center;
+    gap: globals.$spacing-unit;
+    font-size: globals.$small-font-size;
+    color: globals.$body-color;
+
+    img {
+      border-radius: 4px;
+    }
+
+    small {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  &__empty {
+    text-align: center;
+    padding: calc(globals.$spacing-unit * 4);
+    color: globals.$body-color;
+  }
+
+  &__loading {
+    display: flex;
+    justify-content: center;
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__load-more {
+    display: flex;
+    justify-content: center;
+    padding-top: globals.$spacing-unit;
+  }
+}
--- a/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
+++ b/src/renderer/src/pages/profile/profile-content/all-friends-modal.tsx
@@ -0,0 +1,174 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Modal, Avatar, Button } from "@renderer/components";
+import { logger } from "@renderer/logger";
+import SteamLogo from "@renderer/assets/steam-logo.svg?react";
+import type { UserFriend } from "@types";
+import "./all-friends-modal.scss";
+
+interface AllFriendsModalProps {
+  visible: boolean;
+  onClose: () => void;
+  userId: string;
+  isMe: boolean;
+}
+
+const PAGE_SIZE = 20;
+
+export function AllFriendsModal({
+  visible,
+  onClose,
+  userId,
+  isMe,
+}: AllFriendsModalProps) {
+  const { t } = useTranslation("user_profile");
+  const navigate = useNavigate();
+
+  const [friends, setFriends] = useState<UserFriend[]>([]);
+  const [totalFriends, setTotalFriends] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [page, setPage] = useState(0);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  const fetchFriends = useCallback(
+    async (pageNum: number, append = false) => {
+      if (isLoading) return;
+
+      setIsLoading(true);
+      try {
+        const url = isMe ? "/profile/friends" : `/users/${userId}/friends`;
+        const response = await window.electron.hydraApi.get<{
+          totalFriends: number;
+          friends: UserFriend[];
+        }>(url, {
+          params: { take: PAGE_SIZE, skip: pageNum * PAGE_SIZE },
+        });
+
+        if (append) {
+          setFriends((prev) => [...prev, ...response.friends]);
+        } else {
+          setFriends(response.friends);
+        }
+
+        setTotalFriends(response.totalFriends);
+        setHasMore((pageNum + 1) * PAGE_SIZE < response.totalFriends);
+        setPage(pageNum + 1);
+      } catch (error) {
+        logger.error("Failed to fetch friends", error);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [userId, isMe, isLoading]
+  );
+
+  useEffect(() => {
+    if (visible) {
+      setFriends([]);
+      setPage(0);
+      setHasMore(true);
+      fetchFriends(0, false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, userId]);
+
+  const handleScroll = useCallback(() => {
+    if (!listRef.current || isLoading || !hasMore) return;
+
+    const { scrollTop, scrollHeight, clientHeight } = listRef.current;
+    if (scrollTop + clientHeight >= scrollHeight - 50) {
+      fetchFriends(page, true);
+    }
+  }, [isLoading, hasMore, page, fetchFriends]);
+
+  const handleFriendClick = (friendId: string) => {
+    onClose();
+    navigate(`/profile/${friendId}`);
+  };
+
+  const handleLoadMore = () => {
+    if (!isLoading && hasMore) {
+      fetchFriends(page, true);
+    }
+  };
+
+  const getGameImage = (game: { iconUrl: string | null; title: string }) => {
+    if (game.iconUrl) {
+      return <img alt={game.title} width={16} height={16} src={game.iconUrl} />;
+    }
+    return <SteamLogo width={16} height={16} />;
+  };
+
+  const modalTitle = (
+    <div className="all-friends-modal__title">
+      {t("friends")}
+      {totalFriends > 0 && (
+        <span className="all-friends-modal__count">{totalFriends}</span>
+      )}
+    </div>
+  );
+
+  return (
+    <Modal visible={visible} title={modalTitle} onClose={onClose}>
+      <div className="all-friends-modal">
+        {friends.length === 0 && !isLoading ? (
+          <div className="all-friends-modal__empty">
+            {t("no_friends_added")}
+          </div>
+        ) : (
+          <div
+            ref={listRef}
+            className="all-friends-modal__list"
+            onScroll={handleScroll}
+          >
+            {friends.map((friend) => (
+              <div
+                key={friend.id}
+                className="all-friends-modal__item"
+                onClick={() => handleFriendClick(friend.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    handleFriendClick(friend.id);
+                  }
+                }}
+                role="button"
+                tabIndex={0}
+              >
+                <Avatar
+                  size={40}
+                  src={friend.profileImageUrl}
+                  alt={friend.displayName}
+                />
+                <div className="all-friends-modal__info">
+                  <span className="all-friends-modal__name">
+                    {friend.displayName}
+                  </span>
+                  {friend.currentGame && (
+                    <div className="all-friends-modal__game">
+                      {getGameImage(friend.currentGame)}
+                      <small>{friend.currentGame.title}</small>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {isLoading && (
+          <div className="all-friends-modal__loading">{t("loading")}...</div>
+        )}
+
+        {hasMore && !isLoading && friends.length > 0 && (
+          <div className="all-friends-modal__load-more">
+            <Button theme="outline" onClick={handleLoadMore}>
+              {t("load_more")}
+            </Button>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/badges-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.scss
@@ -0,0 +1,95 @@
+@use "../../../scss/globals.scss";
+
+.badges-box {
+  &__box {
+    padding: calc(globals.$spacing-unit * 2);
+  }
+
+  &__header {
+    display: flex;
+    justify-content: flex-end;
+    margin-bottom: calc(globals.$spacing-unit * 2);
+  }
+
+  &__list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 2);
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit * 1.5);
+    width: 100%;
+    padding: calc(globals.$spacing-unit * 1.5);
+    background-color: rgba(255, 255, 255, 0.05);
+    border-radius: 8px;
+    transition: background-color ease 0.2s;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    width: 34px;
+    height: 34px;
+    border-radius: 8px;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: globals.$background-color;
+
+    img {
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    }
+  }
+
+  &__item-content {
+    display: flex;
+    flex-direction: column;
+    gap: calc(globals.$spacing-unit * 0.5);
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__item-title {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: globals.$body-color;
+    margin: 0;
+  }
+
+  &__item-description {
+    font-size: 0.75rem;
+    color: rgba(255, 255, 255, 0.6);
+    margin: 0;
+  }
+
+  &__view-all-container {
+    padding-top: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+    display: flex;
+    justify-content: flex-start;
+  }
+
+  &__view-all {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
+}
--- a/src/renderer/src/pages/profile/profile-content/badges-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/badges-box.tsx
@@ -0,0 +1,67 @@
+import { userProfileContext } from "@renderer/context";
+import { useContext, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AllBadgesModal } from "./all-badges-modal";
+import "./badges-box.scss";
+
+const MAX_VISIBLE_BADGES = 4;
+
+export function BadgesBox() {
+  const { userProfile, badges } = useContext(userProfileContext);
+  const { t } = useTranslation("user_profile");
+  const [showAllBadgesModal, setShowAllBadgesModal] = useState(false);
+
+  if (!userProfile?.badges.length) return null;
+
+  const visibleBadges = userProfile.badges.slice(0, MAX_VISIBLE_BADGES);
+  const hasMoreBadges = userProfile.badges.length > MAX_VISIBLE_BADGES;
+
+  return (
+    <>
+      <div className="badges-box__box">
+        <div className="badges-box__list">
+          {visibleBadges.map((badgeName) => {
+            const badge = badges.find((b) => b.name === badgeName);
+
+            if (!badge) return null;
+
+            return (
+              <div key={badge.name} className="badges-box__item">
+                <div className="badges-box__item-icon">
+                  <img
+                    src={badge.badge.url}
+                    alt={badge.name}
+                    width={32}
+                    height={32}
+                  />
+                </div>
+                <div className="badges-box__item-content">
+                  <h3 className="badges-box__item-title">{badge.title}</h3>
+                  <p className="badges-box__item-description">
+                    {badge.description}
+                  </p>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+        {hasMoreBadges && (
+          <div className="badges-box__view-all-container">
+            <button
+              type="button"
+              className="badges-box__view-all"
+              onClick={() => setShowAllBadgesModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
+        )}
+      </div>
+
+      <AllBadgesModal
+        visible={showAllBadgesModal}
+        onClose={() => setShowAllBadgesModal(false)}
+      />
+    </>
+  );
+}
--- a/src/renderer/src/pages/profile/profile-content/friends-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.scss
@@ -1,18 +1,34 @@
@use "../../../scss/globals.scss";

 .friends-box {
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
+  &__box {
+    padding: calc(globals.$spacing-unit * 2);
+    position: relative;
  }

-  &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
-    padding: calc(globals.$spacing-unit * 2);
+  &__add-friend-button {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+    display: flex;
+    align-items: center;
+    gap: calc(globals.$spacing-unit / 2);
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
+
+  &__view-all-container {
+    padding-top: calc(globals.$spacing-unit * 2);
+    margin-top: calc(globals.$spacing-unit * 2);
+    display: flex;
+    justify-content: flex-start;
  }

  &__list {
@@ -44,11 +60,12 @@

  &__friend-name {
    color: globals.$muted-color;
-    font-weight: bold;
-    font-size: globals.$body-font-size;
+    font-size: 0.8rem;
+    font-weight: 600;
  }

  &__game-info {
+    font-size: 0.75rem;
    display: flex;
    gap: globals.$spacing-unit;
    align-items: center;
@@ -63,4 +80,19 @@
  &__game-image {
    border-radius: 4px;
  }
+
+  &__view-all {
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    font-size: globals.$small-font-size;
+    cursor: pointer;
+    text-decoration: underline;
+    padding: 0;
+    transition: color ease 0.2s;
+
+    &:hover {
+      color: globals.$muted-color;
+    }
+  }
 }
--- a/src/renderer/src/pages/profile/profile-content/friends-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/friends-box.tsx
@@ -1,15 +1,24 @@
 import { userProfileContext } from "@renderer/context";
-import { useFormat } from "@renderer/hooks";
-import { useContext } from "react";
+import { useUserDetails } from "@renderer/hooks";
+import { useContext, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { PlusIcon } from "@primer/octicons-react";
 import SteamLogo from "@renderer/assets/steam-logo.svg?react";
 import { Avatar, Link } from "@renderer/components";
+import { AllFriendsModal } from "./all-friends-modal";
+import { AddFriendModal } from "./add-friend-modal";
 import "./friends-box.scss";

+const MAX_VISIBLE_FRIENDS = 5;
+
 export function FriendsBox() {
-  const { userProfile, userStats } = useContext(userProfileContext);
+  const { userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
  const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
+  const [showAllFriendsModal, setShowAllFriendsModal] = useState(false);
+  const [showAddFriendModal, setShowAddFriendModal] = useState(false);
+
+  const isMe = userDetails?.id === userProfile?.id;

  const getGameImage = (game: { iconUrl: string | null; title: string }) => {
    if (game.iconUrl) {
@@ -28,22 +37,15 @@ export function FriendsBox() {

  if (!userProfile?.friends.length) return null;

-  return (
-    <div>
-      <div className="friends-box__section-header">
-        <div className="profile-content__section-title-group">
-          <h2>{t("friends")}</h2>
-          {userStats && (
-            <span className="profile-content__section-badge">
-              {numberFormatter.format(userStats.friendsCount)}
-            </span>
-          )}
-        </div>
-      </div>
+  const visibleFriends = userProfile.friends.slice(0, MAX_VISIBLE_FRIENDS);
+  const totalFriends = userProfile.friends.length;
+  const showViewAllButton = totalFriends > MAX_VISIBLE_FRIENDS;

+  return (
+    <>
      <div className="friends-box__box">
        <ul className="friends-box__list">
-          {userProfile?.friends.map((friend) => (
+          {visibleFriends.map((friend) => (
            <li
              key={friend.id}
              title={
@@ -77,7 +79,61 @@ export function FriendsBox() {
            </li>
          ))}
        </ul>
+        {showViewAllButton && (
+          <div className="friends-box__view-all-container">
+            <button
+              type="button"
+              className="friends-box__view-all"
+              onClick={() => setShowAllFriendsModal(true)}
+            >
+              {t("view_all")}
+            </button>
+          </div>
+        )}
      </div>
-    </div>
+
+      {userProfile && (
+        <>
+          <AllFriendsModal
+            visible={showAllFriendsModal}
+            onClose={() => setShowAllFriendsModal(false)}
+            userId={userProfile.id}
+            isMe={isMe}
+          />
+          <AddFriendModal
+            visible={showAddFriendModal}
+            onClose={() => setShowAddFriendModal(false)}
+          />
+        </>
+      )}
+    </>
+  );
+}
+
+export function FriendsBoxAddButton() {
+  const { userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
+  const { t } = useTranslation("user_profile");
+  const [showAddFriendModal, setShowAddFriendModal] = useState(false);
+
+  const isMe = userDetails?.id === userProfile?.id;
+
+  if (!isMe) return null;
+
+  return (
+    <>
+      <button
+        type="button"
+        className="friends-box__add-friend-button"
+        onClick={() => setShowAddFriendModal(true)}
+      >
+        <PlusIcon size={16} />
+        {t("add_friends")}
+      </button>
+      <AddFriendModal
+        visible={showAddFriendModal}
+        onClose={() => setShowAddFriendModal(false)}
+      />
+    </>
  );
 }
--- a/src/renderer/src/pages/profile/profile-content/profile-content.tsx
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.tsx
@@ -14,10 +14,11 @@ import { useTranslation } from "react-i18next";
 import type { GameShop } from "@types";
 import { LockedProfile } from "./locked-profile";
 import { ReportProfile } from "../report-profile/report-profile";
-import { FriendsBox } from "./friends-box";
+import { BadgesBox } from "./badges-box";
+import { FriendsBox, FriendsBoxAddButton } from "./friends-box";
 import { RecentGamesBox } from "./recent-games-box";
 import { UserStatsBox } from "./user-stats-box";
-import { UserKarmaBox } from "./user-karma-box";
+import { ProfileSection } from "../profile-section/profile-section";
 import { DeleteReviewModal } from "@renderer/pages/game-details/modals/delete-review-modal";
 import { GAME_STATS_ANIMATION_DURATION_IN_MS } from "./profile-animations";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
@@ -186,8 +187,6 @@ export function ProfileContent() {
      );
      setReviews(response.reviews);
      setReviewsTotalCount(response.totalCount);
-    } catch (error) {
-      // Error handling for fetching reviews
    } finally {
      setIsLoadingReviews(false);
    }
@@ -426,10 +425,35 @@ export function ProfileContent() {

        {shouldShowRightContent && (
          <div className="profile-content__right-content">
-            <UserStatsBox />
-            <UserKarmaBox />
-            <RecentGamesBox />
-            <FriendsBox />
+            {userStats && (
+              <ProfileSection title={t("stats")} defaultOpen={true}>
+                <UserStatsBox />
+              </ProfileSection>
+            )}
+            {userProfile?.badges.length > 0 && (
+              <ProfileSection
+                title={t("badges")}
+                count={userProfile.badges.length}
+                defaultOpen={true}
+              >
+                <BadgesBox />
+              </ProfileSection>
+            )}
+            {userProfile?.recentGames.length > 0 && (
+              <ProfileSection title={t("activity")} defaultOpen={true}>
+                <RecentGamesBox />
+              </ProfileSection>
+            )}
+            {userProfile?.friends.length > 0 && (
+              <ProfileSection
+                title={t("friends")}
+                count={userStats?.friendsCount || userProfile.friends.length}
+                action={<FriendsBoxAddButton />}
+                defaultOpen={true}
+              >
+                <FriendsBox />
+              </ProfileSection>
+            )}
            <ReportProfile />
          </div>
        )}
--- a/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/recent-games-box.scss
@@ -2,19 +2,9 @@

 .recent-games {
  &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
    padding: calc(globals.$spacing-unit * 2);
  }

-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
  &__list {
    list-style: none;
    margin: 0;
@@ -57,13 +47,15 @@
  }

  &__game-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__game-description {
+    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: globals.$spacing-unit;
--- a/src/renderer/src/pages/profile/profile-content/recent-games-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/recent-games-box.tsx
@@ -42,38 +42,32 @@ export function RecentGamesBox() {
  if (!userProfile?.recentGames.length) return null;

  return (
-    <div>
-      <div className="recent-games__section-header">
-        <h2>{t("activity")}</h2>
-      </div>
+    <div className="recent-games__box">
+      <ul className="recent-games__list">
+        {userProfile?.recentGames.map((game) => (
+          <li key={`${game.shop}-${game.objectId}`}>
+            <Link
+              to={buildUserGameDetailsPath(game)}
+              className="recent-games__list-item"
+            >
+              <img
+                src={game.iconUrl!}
+                alt={game.title}
+                className="recent-games__game-image"
+              />

-      <div className="recent-games__box">
-        <ul className="recent-games__list">
-          {userProfile?.recentGames.map((game) => (
-            <li key={`${game.shop}-${game.objectId}`}>
-              <Link
-                to={buildUserGameDetailsPath(game)}
-                className="recent-games__list-item"
-              >
-                <img
-                  src={game.iconUrl!}
-                  alt={game.title}
-                  className="recent-games__game-image"
-                />
+              <div className="recent-games__game-details">
+                <span className="recent-games__game-title">{game.title}</span>

-                <div className="recent-games__game-details">
-                  <span className="recent-games__game-title">{game.title}</span>
-
-                  <div className="recent-games__game-description">
-                    <ClockIcon />
-                    <small>{formatPlayTime(game)}</small>
-                  </div>
+                <div className="recent-games__game-description">
+                  <ClockIcon />
+                  <small>{formatPlayTime(game)}</small>
                </div>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
+              </div>
+            </Link>
+          </li>
+        ))}
+      </ul>
    </div>
  );
 }
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-karma-box.scss
@@ -1,47 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-karma {
-  &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
-    padding: calc(globals.$spacing-unit * 2);
-  }
-
-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 1.5);
-  }
-
-  &__stats-row {
-    display: flex;
-    align-items: center;
-    color: globals.$body-color;
-  }
-
-  &__description {
-    display: flex;
-    align-items: center;
-    gap: globals.$spacing-unit;
-    font-weight: 600;
-    font-size: 1.1rem;
-  }
-
-  &__info {
-    padding-top: calc(globals.$spacing-unit * 0.5);
-  }
-
-  &__info-text {
-    color: globals.$muted-color;
-    font-size: 0.85rem;
-    line-height: 1.4;
-  }
-}
--- a/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-karma-box.tsx
@@ -1,43 +0,0 @@
-import { useContext } from "react";
-import { userProfileContext } from "@renderer/context";
-import { useTranslation } from "react-i18next";
-import { useFormat, useUserDetails } from "@renderer/hooks";
-import { Award } from "lucide-react";
-import "./user-karma-box.scss";
-
-export function UserKarmaBox() {
-  const { isMe, userProfile } = useContext(userProfileContext);
-  const { userDetails } = useUserDetails();
-  const { t } = useTranslation("user_profile");
-  const { numberFormatter } = useFormat();
-
-  // Get karma from userDetails (for current user) or userProfile (for other users)
-  const karma = isMe ? userDetails?.karma : userProfile?.karma;
-
-  // Don't show if karma is not available
-  if (karma === undefined || karma === null) return null;
-
-  return (
-    <div>
-      <div className="user-karma__section-header">
-        <h2>{t("karma")}</h2>
-      </div>
-
-      <div className="user-karma__box">
-        <div className="user-karma__content">
-          <div className="user-karma__stats-row">
-            <p className="user-karma__description">
-              <Award size={20} /> {numberFormatter.format(karma)}{" "}
-              {t("karma_count")}
-            </p>
-          </div>
-          <div className="user-karma__info">
-            <small className="user-karma__info-text">
-              {t("karma_description")}
-            </small>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.scss
@@ -2,19 +2,9 @@

 .user-stats {
  &__box {
-    background-color: globals.$background-color;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
    padding: calc(globals.$spacing-unit * 2);
  }

-  &__section-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: calc(globals.$spacing-unit * 2);
-  }
-
  &__list {
    list-style: none;
    margin: 0;
@@ -42,13 +32,15 @@
  }

  &__list-title {
-    font-weight: bold;
+    font-size: 0.8rem;
+    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__list-description {
+    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: globals.$spacing-unit;
@@ -72,4 +64,10 @@
      cursor: pointer;
    }
  }
+
+  &__karma-info-text {
+    color: globals.$muted-color;
+    font-size: 0.75rem;
+    line-height: 1.4;
+  }
 }
--- a/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
+++ b/src/renderer/src/pages/profile/profile-content/user-stats-box.tsx
@@ -1,16 +1,18 @@
 import { useCallback, useContext } from "react";
 import { userProfileContext } from "@renderer/context";
 import { useTranslation } from "react-i18next";
-import { useFormat } from "@renderer/hooks";
+import { useFormat, useUserDetails } from "@renderer/hooks";
 import { MAX_MINUTES_TO_SHOW_IN_PLAYTIME } from "@renderer/constants";
 import HydraIcon from "@renderer/assets/icons/hydra.svg?react";
 import { useSubscription } from "@renderer/hooks/use-subscription";
 import { ClockIcon, TrophyIcon } from "@primer/octicons-react";
+import { Award } from "lucide-react";
 import "./user-stats-box.scss";

 export function UserStatsBox() {
  const { showHydraCloudModal } = useSubscription();
-  const { userStats, isMe } = useContext(userProfileContext);
+  const { userStats, isMe, userProfile } = useContext(userProfileContext);
+  const { userDetails } = useUserDetails();
  const { t } = useTranslation("user_profile");
  const { numberFormatter } = useFormat();

@@ -33,88 +35,102 @@ export function UserStatsBox() {

  if (!userStats) return null;

+  const karma = isMe ? userDetails?.karma : userProfile?.karma;
+  const hasKarma = karma !== undefined && karma !== null;
+
  return (
-    <div>
-      <div className="user-stats__section-header">
-        <h2>{t("stats")}</h2>
-      </div>
-
-      <div className="user-stats__box">
-        <ul className="user-stats__list">
-          {(isMe || userStats.unlockedAchievementSum !== undefined) && (
-            <li className="user-stats__list-item">
-              <h3 className="user-stats__list-title">
-                {t("achievements_unlocked")}
-              </h3>
-              {userStats.unlockedAchievementSum !== undefined ? (
-                <div className="user-stats__stats-row">
-                  <p className="user-stats__list-description">
-                    <TrophyIcon /> {userStats.unlockedAchievementSum}{" "}
-                    {t("achievements")}
-                  </p>
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => showHydraCloudModal("achievements")}
-                  className="user-stats__link"
-                >
-                  <small style={{ color: "var(--color-warning)" }}>
-                    {t("show_achievements_on_profile")}
-                  </small>
-                </button>
-              )}
-            </li>
-          )}
-
-          {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && (
-            <li className="user-stats__list-item">
-              <h3 className="user-stats__list-title">{t("earned_points")}</h3>
-              {userStats.achievementsPointsEarnedSum !== undefined ? (
-                <div className="user-stats__stats-row">
-                  <p className="user-stats__list-description">
-                    <HydraIcon width={20} height={20} />
-                    {numberFormatter.format(
-                      userStats.achievementsPointsEarnedSum.value
-                    )}
-                  </p>
-                  <p title={t("ranking_updated_weekly")}>
-                    {t("top_percentile", {
-                      percentile:
-                        userStats.achievementsPointsEarnedSum.topPercentile,
-                    })}
-                  </p>
-                </div>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => showHydraCloudModal("achievements-points")}
-                  className="user-stats__link"
-                >
-                  <small className="user-stats__link--warning">
-                    {t("show_points_on_profile")}
-                  </small>
-                </button>
-              )}
-            </li>
-          )}
-
+    <div className="user-stats__box">
+      <ul className="user-stats__list">
+        {(isMe || userStats.unlockedAchievementSum !== undefined) && (
          <li className="user-stats__list-item">
-            <h3 className="user-stats__list-title">{t("total_play_time")}</h3>
+            <h3 className="user-stats__list-title">
+              {t("achievements_unlocked")}
+            </h3>
+            {userStats.unlockedAchievementSum !== undefined ? (
+              <div className="user-stats__stats-row">
+                <p className="user-stats__list-description">
+                  <TrophyIcon /> {userStats.unlockedAchievementSum}{" "}
+                  {t("achievements")}
+                </p>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => showHydraCloudModal("achievements")}
+                className="user-stats__link"
+              >
+                <small style={{ color: "var(--color-warning)" }}>
+                  {t("show_achievements_on_profile")}
+                </small>
+              </button>
+            )}
+          </li>
+        )}
+
+        {(isMe || userStats.achievementsPointsEarnedSum !== undefined) && (
+          <li className="user-stats__list-item">
+            <h3 className="user-stats__list-title">{t("earned_points")}</h3>
+            {userStats.achievementsPointsEarnedSum !== undefined ? (
+              <div className="user-stats__stats-row">
+                <p className="user-stats__list-description">
+                  <HydraIcon width={20} height={20} />
+                  {numberFormatter.format(
+                    userStats.achievementsPointsEarnedSum.value
+                  )}
+                </p>
+                <p title={t("ranking_updated_weekly")}>
+                  {t("top_percentile", {
+                    percentile:
+                      userStats.achievementsPointsEarnedSum.topPercentile,
+                  })}
+                </p>
+              </div>
+            ) : (
+              <button
+                type="button"
+                onClick={() => showHydraCloudModal("achievements-points")}
+                className="user-stats__link"
+              >
+                <small className="user-stats__link--warning">
+                  {t("show_points_on_profile")}
+                </small>
+              </button>
+            )}
+          </li>
+        )}
+
+        <li className="user-stats__list-item">
+          <h3 className="user-stats__list-title">{t("total_play_time")}</h3>
+          <div className="user-stats__stats-row">
+            <p className="user-stats__list-description">
+              <ClockIcon />
+              {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
+            </p>
+            <p title={t("ranking_updated_weekly")}>
+              {t("top_percentile", {
+                percentile: userStats.totalPlayTimeInSeconds.topPercentile,
+              })}
+            </p>
+          </div>
+        </li>
+
+        {hasKarma && karma !== undefined && karma !== null && (
+          <li className="user-stats__list-item user-stats__list-item--karma">
+            <h3 className="user-stats__list-title">{t("karma")}</h3>
            <div className="user-stats__stats-row">
              <p className="user-stats__list-description">
-                <ClockIcon />
-                {formatPlayTime(userStats.totalPlayTimeInSeconds.value)}
-              </p>
-              <p title={t("ranking_updated_weekly")}>
-                {t("top_percentile", {
-                  percentile: userStats.totalPlayTimeInSeconds.topPercentile,
-                })}
+                <Award size={20} /> {numberFormatter.format(karma)}{" "}
+                {t("karma_count")}
              </p>
            </div>
+            <div className="user-stats__karma-info">
+              <small className="user-stats__karma-info-text">
+                {t("karma_description")}
+              </small>
+            </div>
          </li>
-        </ul>
-      </div>
+        )}
+      </ul>
    </div>
  );
 }
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -27,9 +27,33 @@
    }
  }

-  &__badges {
+  &__copy-button {
    display: flex;
-    gap: calc(globals.$spacing-unit / 2);
+    align-items: center;
+    justify-content: flex-end;
+    background: none;
+    border: none;
+    color: globals.$body-color;
+    background-color: rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    padding: calc(globals.$spacing-unit / 1.5);
+    border-radius: 6px;
+    transition: background-color ease 0.2s;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-shrink: 0;
+    box-sizing: border-box;
+
+    &:hover {
+      opacity: 1;
+      background-color: rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  &__friend-code {
+    font-size: 0.875rem;
+    font-family: monospace;
+    white-space: nowrap;
  }

  &__user-information {
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -3,6 +3,7 @@ import { userProfileContext } from "@renderer/context";
 import {
  BlockedIcon,
  CheckCircleFillIcon,
+  CopyIcon,
  PencilIcon,
  PersonAddIcon,
  SignOutIcon,
@@ -25,13 +26,13 @@ import {
 } from "@renderer/hooks";
 import { addSeconds } from "date-fns";
 import { useNavigate } from "react-router-dom";
+import { motion } from "framer-motion";

 import type { FriendRequestAction } from "@types";
 import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal";
 import { WrappedFullscreenModal } from "../profile-content/wrapped-tab";
 import Skeleton from "react-loading-skeleton";
 import { UploadBackgroundImageButton } from "../upload-background-image-button/upload-background-image-button";
-import { Tooltip } from "react-tooltip";
 import "./profile-hero.scss";

 type FriendAction =
@@ -43,15 +44,10 @@ export function ProfileHero() {
  const [showWrappedModal, setShowWrappedModal] = useState(false);
  const [showFullscreenAvatar, setShowFullscreenAvatar] = useState(false);
  const [isPerformingAction, setIsPerformingAction] = useState(false);
+  const [isCopyButtonHovered, setIsCopyButtonHovered] = useState(false);

-  const {
-    isMe,
-    badges,
-    getUserProfile,
-    userProfile,
-    heroBackground,
-    backgroundImage,
-  } = useContext(userProfileContext);
+  const { isMe, getUserProfile, userProfile, heroBackground, backgroundImage } =
+    useContext(userProfileContext);
  const {
    signOut,
    updateFriendRequestState,
@@ -262,6 +258,13 @@ export function ProfileHero() {
    }
  }, [isMe, userProfile?.profileImageUrl]);

+  const copyFriendCode = useCallback(() => {
+    if (userProfile?.id) {
+      navigator.clipboard.writeText(userProfile.id);
+      showSuccessToast(t("friend_code_copied"));
+    }
+  }, [userProfile, showSuccessToast, t]);
+
  const currentGame = useMemo(() => {
    if (isMe) {
      if (gameRunning)
@@ -336,28 +339,32 @@ export function ProfileHero() {
                    {userProfile?.displayName}
                  </h2>

-                  <div className="profile-hero__badges">
-                    {userProfile.badges.map((badgeName) => {
-                      const badge = badges.find((b) => b.name === badgeName);
-
-                      if (!badge) return null;
-
-                      return (
-                        <img
-                          key={badge.name}
-                          src={badge.badge.url}
-                          alt={badge.name}
-                          width={24}
-                          height={24}
-                          data-tooltip-place="top"
-                          data-tooltip-content={badge.description}
-                          data-tooltip-id="badge-name"
-                        />
-                      );
-                    })}
-
-                    <Tooltip id="badge-name" />
-                  </div>
+                  <motion.button
+                    type="button"
+                    className="profile-hero__copy-button"
+                    onClick={copyFriendCode}
+                    title={t("copy_friend_code")}
+                    onMouseEnter={() => setIsCopyButtonHovered(true)}
+                    onMouseLeave={() => setIsCopyButtonHovered(false)}
+                    initial={{ width: 28 }}
+                    animate={{
+                      width: isCopyButtonHovered ? 105 : 28,
+                    }}
+                    transition={{ duration: 0.2, ease: "easeInOut" }}
+                  >
+                    <motion.span
+                      className="profile-hero__friend-code"
+                      initial={{ opacity: 0, marginRight: 0 }}
+                      animate={{
+                        opacity: isCopyButtonHovered ? 1 : 0,
+                        marginRight: isCopyButtonHovered ? 8 : 0,
+                      }}
+                      transition={{ duration: 0.2, ease: "easeInOut" }}
+                    >
+                      {userProfile?.id}
+                    </motion.span>
+                    <CopyIcon size={16} />
+                  </motion.button>
                </div>
              ) : (
                <Skeleton width={150} height={28} />
--- a/src/renderer/src/pages/profile/profile-section/profile-section.scss
+++ b/src/renderer/src/pages/profile/profile-section/profile-section.scss
@@ -0,0 +1,71 @@
+@use "../../../scss/globals.scss";
+
+.profile-section {
+  background-color: globals.$background-color;
+  border-radius: 12px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: globals.$background-color;
+    padding-right: calc(globals.$spacing-unit * 2);
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  &__button {
+    padding: calc(globals.$spacing-unit * 2.5) calc(globals.$spacing-unit * 2);
+    display: flex;
+    align-items: center;
+    background-color: transparent;
+    color: globals.$muted-color;
+    flex: 1;
+    cursor: pointer;
+    transition: all ease 0.2s;
+    gap: globals.$spacing-unit;
+    font-size: globals.$body-font-size;
+    font-weight: bold;
+    border: none;
+
+    &:active {
+      opacity: globals.$active-opacity;
+    }
+  }
+
+  &__count {
+    background-color: rgba(255, 255, 255, 0.1);
+    color: rgba(255, 255, 255, 0.7);
+    padding: 4px 8px;
+    border-radius: 6px;
+    font-size: 12px;
+    font-weight: 600;
+    min-width: 24px;
+    text-align: center;
+  }
+
+  &__action {
+    display: flex;
+    align-items: center;
+  }
+
+  &__chevron {
+    transition: transform ease 0.2s;
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__content {
+    overflow: hidden;
+    transition: max-height 0.4s cubic-bezier(0, 1, 0, 1);
+    background-color: globals.$dark-background-color;
+    position: relative;
+  }
+}
--- a/src/renderer/src/pages/profile/profile-section/profile-section.tsx
+++ b/src/renderer/src/pages/profile/profile-section/profile-section.tsx
@@ -0,0 +1,64 @@
+import { ChevronDownIcon } from "@primer/octicons-react";
+import { useEffect, useRef, useState } from "react";
+import "./profile-section.scss";
+
+export interface ProfileSectionProps {
+  title: string;
+  count?: number;
+  action?: React.ReactNode;
+  children: React.ReactNode;
+  defaultOpen?: boolean;
+}
+
+export function ProfileSection({
+  title,
+  count,
+  action,
+  children,
+  defaultOpen = true,
+}: ProfileSectionProps) {
+  const content = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const [height, setHeight] = useState(0);
+
+  useEffect(() => {
+    if (content.current && content.current.scrollHeight !== height) {
+      setHeight(isOpen ? content.current.scrollHeight : 0);
+    } else if (!isOpen) {
+      setHeight(0);
+    }
+  }, [isOpen, children, height]);
+
+  return (
+    <div className="profile-section">
+      <div className="profile-section__header">
+        <button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          className="profile-section__button"
+        >
+          <ChevronDownIcon
+            className={`profile-section__chevron ${
+              isOpen ? "profile-section__chevron--open" : ""
+            }`}
+          />
+          <span>{title}</span>
+          {count !== undefined && (
+            <span className="profile-section__count">{count}</span>
+          )}
+        </button>
+        {action && <div className="profile-section__action">{action}</div>}
+      </div>
+
+      <div
+        ref={content}
+        className="profile-section__content"
+        style={{
+          maxHeight: `${height}px`,
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/index.ts
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/index.ts
@@ -1 +0,0 @@
-export * from "./user-friend-modal";
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.scss
@@ -1,79 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-item {
-  &__container {
-    display: flex;
-    gap: calc(globals.$spacing-unit * 3);
-    align-items: center;
-    border-radius: 4px;
-    border: solid 1px globals.$border-color;
-    width: 100%;
-    height: 54px;
-    min-height: 54px;
-    transition: all ease 0.2s;
-    position: relative;
-
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.15);
-    }
-  }
-
-  &__button {
-    display: flex;
-    align-items: center;
-    position: absolute;
-    cursor: pointer;
-    height: 100%;
-    width: 100%;
-    flex-direction: row;
-    color: globals.$body-color;
-    gap: calc(globals.$spacing-unit + globals.$spacing-unit / 2);
-    padding: 0 globals.$spacing-unit;
-
-    &__content {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      flex: 1;
-      min-width: 0;
-    }
-
-    &__actions {
-      position: absolute;
-      right: 8px;
-      display: flex;
-      gap: 8px;
-    }
-  }
-
-  &__display-name {
-    font-weight: bold;
-    font-size: globals.$body-font-size;
-    text-align: left;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &__accept-button {
-    cursor: pointer;
-    color: globals.$body-color;
-    width: 28px;
-    height: 28px;
-
-    &:hover {
-      color: globals.$success-color;
-    }
-  }
-
-  &__cancel-button {
-    cursor: pointer;
-    color: globals.$body-color;
-    width: 28px;
-    height: 28px;
-
-    &:hover {
-      color: globals.$danger-color;
-    }
-  }
-}
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-item.tsx
@@ -1,139 +0,0 @@
-import { CheckCircleIcon, XCircleIcon } from "@primer/octicons-react";
-import { useTranslation } from "react-i18next";
-import { Avatar } from "@renderer/components";
-import "./user-friend-item.scss";
-
-export type UserFriendItemProps = {
-  userId: string;
-  profileImageUrl: string | null;
-  displayName: string;
-} & (
-  | {
-      type: "ACCEPTED";
-      onClickUndoFriendship: (userId: string) => void;
-      onClickItem: (userId: string) => void;
-    }
-  | { type: "BLOCKED"; onClickUnblock: (userId: string) => void }
-  | {
-      type: "SENT" | "RECEIVED";
-      onClickCancelRequest: (userId: string) => void;
-      onClickAcceptRequest: (userId: string) => void;
-      onClickRefuseRequest: (userId: string) => void;
-      onClickItem: (userId: string) => void;
-    }
-  | { type: null; onClickItem: (userId: string) => void }
-);
-
-export const UserFriendItem = (props: UserFriendItemProps) => {
-  const { t } = useTranslation("user_profile");
-  const { userId, profileImageUrl, displayName, type } = props;
-
-  const getRequestDescription = () => {
-    if (type === "ACCEPTED" || type === null) return null;
-
-    return (
-      <small>
-        {type == "SENT" ? t("request_sent") : t("request_received")}
-      </small>
-    );
-  };
-
-  const getRequestActions = () => {
-    if (type === null) return null;
-
-    if (type === "SENT") {
-      return (
-        <button
-          className="user-friend-item__cancel-button"
-          onClick={() => props.onClickCancelRequest(userId)}
-          title={t("cancel_request")}
-        >
-          <XCircleIcon size={28} />
-        </button>
-      );
-    }
-
-    if (type === "RECEIVED") {
-      return (
-        <>
-          <button
-            className="user-friend-item__accept-button"
-            onClick={() => props.onClickAcceptRequest(userId)}
-            title={t("accept_request")}
-          >
-            <CheckCircleIcon size={28} />
-          </button>
-          <button
-            className="user-friend-item__cancel-button"
-            onClick={() => props.onClickRefuseRequest(userId)}
-            title={t("ignore_request")}
-          >
-            <XCircleIcon size={28} />
-          </button>
-        </>
-      );
-    }
-
-    if (type === "ACCEPTED") {
-      return (
-        <button
-          className="user-friend-item__cancel-button"
-          onClick={() => props.onClickUndoFriendship(userId)}
-          title={t("undo_friendship")}
-        >
-          <XCircleIcon size={28} />
-        </button>
-      );
-    }
-
-    if (type === "BLOCKED") {
-      return (
-        <button
-          className="user-friend-item__cancel-button"
-          onClick={() => props.onClickUnblock(userId)}
-          title={t("unblock")}
-        >
-          <XCircleIcon size={28} />
-        </button>
-      );
-    }
-
-    return null;
-  };
-
-  if (type === "BLOCKED") {
-    return (
-      <div className="user-friend-item__container">
-        <div className="user-friend-item__button">
-          <Avatar size={35} src={profileImageUrl} alt={displayName} />
-          <div className="user-friend-item__button__content">
-            <p className="user-friend-item__display-name">{displayName}</p>
-          </div>
-        </div>
-        <div className="user-friend-item__button__actions">
-          {getRequestActions()}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="user-friend-item__container">
-      <button
-        type="button"
-        className="user-friend-item__button"
-        onClick={() => props.onClickItem(userId)}
-      >
-        <Avatar size={35} src={profileImageUrl} alt={displayName} />
-        <div className="user-friend-item__button__content">
-          <p className="user-friend-item__display-name">{displayName}</p>
-
-          {getRequestDescription()}
-        </div>
-      </button>
-      <div className="user-friend-item__button__actions">
-        {getRequestActions()}
-      </div>
-    </div>
-  );
-};
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.scss
@@ -1,21 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-modal-add-friend {
-  &__actions {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: globals.$spacing-unit;
-  }
-
-  &__button {
-    align-self: end;
-  }
-
-  &__pending-container {
-    display: flex;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 2);
-  }
-}
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-add-friend.tsx
@@ -1,138 +0,0 @@
-import { Button, TextField } from "@renderer/components";
-import { useToast, useUserDetails } from "@renderer/hooks";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { UserFriendItem } from "./user-friend-item";
-import "./user-friend-modal-add-friend.scss";
-
-export interface UserFriendModalAddFriendProps {
-  closeModal: () => void;
-}
-
-export const UserFriendModalAddFriend = ({
-  closeModal,
-}: UserFriendModalAddFriendProps) => {
-  const { t } = useTranslation("user_profile");
-
-  const [friendCode, setFriendCode] = useState("");
-  const [isAddingFriend, setIsAddingFriend] = useState(false);
-
-  const navigate = useNavigate();
-
-  const { sendFriendRequest, updateFriendRequestState, friendRequests } =
-    useUserDetails();
-
-  const { showSuccessToast, showErrorToast } = useToast();
-
-  const handleClickAddFriend = () => {
-    setIsAddingFriend(true);
-    sendFriendRequest(friendCode)
-      .then(() => {
-        setFriendCode("");
-      })
-      .catch(() => {
-        showErrorToast(t("error_adding_friend"));
-      })
-      .finally(() => {
-        setIsAddingFriend(false);
-      });
-  };
-
-  const handleClickRequest = (userId: string) => {
-    closeModal();
-    navigate(`/profile/${userId}`);
-  };
-
-  const handleClickSeeProfile = () => {
-    if (friendCode.length === 8) {
-      closeModal();
-      navigate(`/profile/${friendCode}`);
-    }
-  };
-
-  const validateFriendCode = (callback: () => void) => {
-    if (friendCode.length === 8) {
-      return callback();
-    }
-
-    showErrorToast(t("friend_code_length_error"));
-  };
-
-  const handleCancelFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "CANCEL").catch(() => {
-      showErrorToast(t("try_again"));
-    });
-  };
-
-  const handleAcceptFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "ACCEPTED")
-      .then(() => {
-        showSuccessToast(t("request_accepted"));
-      })
-      .catch(() => {
-        showErrorToast(t("try_again"));
-      });
-  };
-
-  const handleRefuseFriendRequest = (userId: string) => {
-    updateFriendRequestState(userId, "REFUSED").catch(() => {
-      showErrorToast(t("try_again"));
-    });
-  };
-
-  const handleChangeFriendCode = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const friendCode = e.target.value.trim().slice(0, 8);
-    setFriendCode(friendCode);
-  };
-
-  return (
-    <>
-      <div className="user-friend-modal-add-friend__actions">
-        <TextField
-          label={t("friend_code")}
-          value={friendCode}
-          containerProps={{ style: { width: "100%" } }}
-          onChange={handleChangeFriendCode}
-        />
-        <Button
-          disabled={isAddingFriend}
-          className="user-friend-modal-add-friend__button"
-          type="button"
-          onClick={() => validateFriendCode(handleClickAddFriend)}
-        >
-          {isAddingFriend ? t("sending") : t("add")}
-        </Button>
-
-        <Button
-          onClick={() => validateFriendCode(handleClickSeeProfile)}
-          disabled={isAddingFriend}
-          className="user-friend-modal-add-friend__button"
-          type="button"
-        >
-          {t("see_profile")}
-        </Button>
-      </div>
-
-      <div className="user-friend-modal-add-friend__pending-container">
-        <h3>{t("pending")}</h3>
-        {friendRequests.length === 0 && <p>{t("no_pending_invites")}</p>}
-        {friendRequests.map((request) => {
-          return (
-            <UserFriendItem
-              key={request.id}
-              displayName={request.displayName}
-              type={request.type}
-              profileImageUrl={request.profileImageUrl}
-              userId={request.id}
-              onClickAcceptRequest={handleAcceptFriendRequest}
-              onClickCancelRequest={handleCancelFriendRequest}
-              onClickRefuseRequest={handleRefuseFriendRequest}
-              onClickItem={handleClickRequest}
-            />
-          );
-        })}
-      </div>
-    </>
-  );
-};
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.scss
@@ -1,16 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-modal-list {
-  display: flex;
-  flex-direction: column;
-  gap: calc(globals.$spacing-unit * 2);
-  max-height: 400px;
-  overflow-y: scroll;
-
-  &__skeleton {
-    width: 100%;
-    height: 54px;
-    overflow: hidden;
-    border-radius: 4px;
-  }
-}
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal-list.tsx
@@ -1,120 +0,0 @@
-import type { UserFriend } from "@types";
-import { useEffect, useRef, useState } from "react";
-import { UserFriendItem } from "./user-friend-item";
-import { useNavigate } from "react-router-dom";
-import { useToast, useUserDetails } from "@renderer/hooks";
-import { useTranslation } from "react-i18next";
-import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
-import "./user-friend-modal-list.scss";
-
-export interface UserFriendModalListProps {
-  userId: string;
-  closeModal: () => void;
-}
-
-const pageSize = 12;
-
-export const UserFriendModalList = ({
-  userId,
-  closeModal,
-}: UserFriendModalListProps) => {
-  const { t } = useTranslation("user_profile");
-  const { showErrorToast } = useToast();
-  const navigate = useNavigate();
-
-  const [page, setPage] = useState(0);
-  const [isLoading, setIsLoading] = useState(false);
-  const [maxPage, setMaxPage] = useState(0);
-  const [friends, setFriends] = useState<UserFriend[]>([]);
-  const listContainer = useRef<HTMLDivElement>(null);
-
-  const { userDetails, undoFriendship } = useUserDetails();
-  const isMe = userDetails?.id == userId;
-
-  const loadNextPage = () => {
-    if (page > maxPage) return;
-    setIsLoading(true);
-
-    const url = isMe ? "/profile/friends" : `/users/${userId}/friends`;
-
-    window.electron.hydraApi
-      .get<{ totalFriends: number; friends: UserFriend[] }>(url, {
-        params: { take: pageSize, skip: page * pageSize },
-      })
-      .then((newPage) => {
-        if (page === 0) {
-          setMaxPage(newPage.totalFriends / pageSize);
-        }
-
-        setFriends([...friends, ...newPage.friends]);
-        setPage(page + 1);
-      })
-      .catch(() => {})
-      .finally(() => setIsLoading(false));
-  };
-
-  const handleScroll = () => {
-    const scrollTop = listContainer.current?.scrollTop || 0;
-    const scrollHeight = listContainer.current?.scrollHeight || 0;
-    const clientHeight = listContainer.current?.clientHeight || 0;
-    const maxScrollTop = scrollHeight - clientHeight;
-
-    if (scrollTop < maxScrollTop * 0.9 || isLoading) {
-      return;
-    }
-
-    loadNextPage();
-  };
-
-  useEffect(() => {
-    const container = listContainer.current;
-    container?.addEventListener("scroll", handleScroll);
-    return () => container?.removeEventListener("scroll", handleScroll);
-  }, [isLoading]);
-
-  const reloadList = () => {
-    setPage(0);
-    setMaxPage(0);
-    setFriends([]);
-    loadNextPage();
-  };
-
-  useEffect(() => {
-    reloadList();
-  }, [userId]);
-
-  const handleClickFriend = (userId: string) => {
-    closeModal();
-    navigate(`/profile/${userId}`);
-  };
-
-  const handleUndoFriendship = (userId: string) => {
-    undoFriendship(userId)
-      .then(() => {
-        reloadList();
-      })
-      .catch(() => {
-        showErrorToast(t("try_again"));
-      });
-  };
-
-  return (
-    <SkeletonTheme baseColor="#1c1c1c" highlightColor="#444">
-      <div ref={listContainer} className="user-friend-modal-list">
-        {!isLoading && friends.length === 0 && <p>{t("no_friends_added")}</p>}
-        {friends.map((friend) => (
-          <UserFriendItem
-            userId={friend.id}
-            displayName={friend.displayName}
-            profileImageUrl={friend.profileImageUrl}
-            onClickItem={handleClickFriend}
-            onClickUndoFriendship={handleUndoFriendship}
-            type={isMe ? "ACCEPTED" : null}
-            key={"modal" + friend.id}
-          />
-        ))}
-        {isLoading && <Skeleton className="user-friend-modal-list__skeleton" />}
-      </div>
-    </SkeletonTheme>
-  );
-};
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
@@ -1,34 +0,0 @@
-@use "../../../scss/globals.scss";
-
-.user-friend-modal {
-  &__container {
-    display: flex;
-    width: 500px;
-    flex-direction: column;
-    gap: calc(globals.$spacing-unit * 2);
-  }
-
-  &__header {
-    display: flex;
-    gap: globals.$spacing-unit;
-    align-items: center;
-  }
-
-  &__friend-code-button {
-    color: globals.$body-color;
-    cursor: pointer;
-    display: flex;
-    gap: calc(globals.$spacing-unit / 2);
-    align-items: center;
-    transition: all ease 0.2s;
-
-    &:hover {
-      color: globals.$muted-color;
-    }
-  }
-
-  &__tabs {
-    display: flex;
-    gap: globals.$spacing-unit;
-  }
-}
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.tsx
@@ -1,96 +0,0 @@
-import { Button, Modal } from "@renderer/components";
-import { useCallback, useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { UserFriendModalAddFriend } from "./user-friend-modal-add-friend";
-import { useToast, useUserDetails } from "@renderer/hooks";
-import { UserFriendModalList } from "./user-friend-modal-list";
-import { CopyIcon } from "@primer/octicons-react";
-import "./user-friend-modal.scss";
-
-export enum UserFriendModalTab {
-  FriendsList,
-  AddFriend,
-}
-
-export interface UserFriendsModalProps {
-  visible: boolean;
-  onClose: () => void;
-  initialTab: UserFriendModalTab | null;
-  userId: string;
-}
-
-export const UserFriendModal = ({
-  visible,
-  onClose,
-  initialTab,
-  userId,
-}: UserFriendsModalProps) => {
-  const { t } = useTranslation("user_profile");
-
-  const tabs = [t("friends_list"), t("add_friends")];
-
-  const [currentTab, setCurrentTab] = useState(
-    initialTab || UserFriendModalTab.FriendsList
-  );
-
-  const { showSuccessToast } = useToast();
-
-  const { userDetails } = useUserDetails();
-  const isMe = userDetails?.id == userId;
-
-  useEffect(() => {
-    if (initialTab != null) {
-      setCurrentTab(initialTab);
-    }
-  }, [initialTab]);
-
-  const renderTab = () => {
-    if (currentTab == UserFriendModalTab.FriendsList) {
-      return <UserFriendModalList userId={userId} closeModal={onClose} />;
-    }
-
-    if (currentTab == UserFriendModalTab.AddFriend) {
-      return <UserFriendModalAddFriend closeModal={onClose} />;
-    }
-
-    return <></>;
-  };
-
-  const copyToClipboard = useCallback(() => {
-    navigator.clipboard.writeText(userDetails!.id);
-    showSuccessToast(t("friend_code_copied"));
-  }, [userDetails, showSuccessToast, t]);
-
-  return (
-    <Modal visible={visible} title={t("friends")} onClose={onClose}>
-      <div className="user-friend-modal__container">
-        {isMe && (
-          <>
-            <div className="user-friend-modal__header">
-              <p>{t("your_friend_code")}</p>
-              <button
-                className="user-friend-modal__friend-code-button"
-                onClick={copyToClipboard}
-              >
-                <h3>{userDetails.id}</h3>
-                <CopyIcon />
-              </button>
-            </div>
-            <section className="user-friend-modal__tabs">
-              {tabs.map((tab, index) => (
-                <Button
-                  key={tab}
-                  theme={index === currentTab ? "primary" : "outline"}
-                  onClick={() => setCurrentTab(index)}
-                >
-                  {tab}
-                </Button>
-              ))}
-            </section>
-          </>
-        )}
-        {renderTab()}
-      </div>
-    </Modal>
-  );
-};